Reactify Licenses page [BIVS-2912] (#1372)

rails/strings.rb

@@ -658,13 +658,6 @@ def strings
         learn_more_about: "Learn more about Machine types »",
         invalid_set_in_bitrise_yml_meta: "Invalid machine type set in bitrise.yml meta"
       },
-      licenses: {
-        lead: "You can run your builds on Bitrise machines relying on license pools. For more info, visit the <a href='https://devcenter.bitrise.io/en/getting-started/unity-on-bitrise.html' target='_blank'>DevCenter.</a>",
-        card: {
-          header_title: 'Workflow-specific license pools',
-          header_description: 'Your workflow-specific builds will run utilizing the selected pool.'
-        }
-      },
       yml: {
         title_editor: "bitrise.yml editor",
         title: "bitrise.yml",
@@ -1063,7 +1056,6 @@ def strings
         apple_developer_account_default_team_post: "/me/profile/apple_developer_account/default_team.json",
         workflows_and_pipelines: "/app/<app_slug>/workflows-and-pipelines",
         get_org_beta_tags: "/organization/<org_slug>/beta_tags",
-        user_auth_tokens: "/me/profile/security/user_auth_tokens",
         app_setting_code_signing: "/app/<app_slug>/settings/code-signing"
 
       },

source/javascripts/_componentRegister.js

@@ -17,6 +17,7 @@ import {
   TriggersPage,
   WorkflowsPage,
   YmlPage,
+  LicensesPage,
 } from "./pages";
 
 function register(component, props, injects) {
@@ -39,7 +40,8 @@ angular
   )
   .component("rPipelinesPage", register(PipelinesPage, ["yml", "onChange"]))
   .component("rWorkflowsPage", register(WorkflowsPage, ["yml", "onChange"]))
-  .component("rYmlPage", register(YmlPage, ["ciConfigYml", "isEditorLoading", "onConfigSourceChangeSaved", "onEditorChange", "ymlSettings"]));
+  .component("rYmlPage", register(YmlPage, ["ciConfigYml", "isEditorLoading", "onConfigSourceChangeSaved", "onEditorChange", "ymlSettings"]))
+  .component("rLicensesPage", register(LicensesPage, ["yml", "onChange"]));
 
 // Components
 angular

source/javascripts/components/unified-editor/WorkflowConfig/components/StackAndMachineCard.tsx

@@ -30,7 +30,7 @@ const ButtonContent = ({ stackName, machineTypeName, isDefault }: ButtonContentP
 const StackAndMachineCard = () => {
   const workflow = useWorkflowConfigContext();
   const { data, isLoading } = useStacksAndMachines();
-  const updateStackAndMachine = useBitriseYmlStore((s) => s.updateStackAndMachine);
+  const updateWorkflowMeta = useBitriseYmlStore((s) => s.updateWorkflowMeta);
 
   const {
     selectedStack,
@@ -69,7 +69,9 @@ const StackAndMachineCard = () => {
           isLoading={isLoading}
           value={selectedStack.id}
           errorText={isInvalidInitialStack ? 'Invalid stack' : undefined}
-          onChange={(e) => updateStackAndMachine(workflow?.id || '', e.target.value, selectedMachineType.id)}
+          onChange={(e) =>
+            updateWorkflowMeta(workflow?.id || '', { stack: e.target.value, machine_type_id: selectedMachineType.id })
+          }
         >
           {availableStackOptions.map(({ value, label }) => (
             <option key={value} value={value}>
@@ -84,7 +86,9 @@ const StackAndMachineCard = () => {
           value={selectedMachineType.id}
           isDisabled={isMachineTypeSelectionDisabled}
           errorText={isInvalidInitialMachineType ? 'Invalid machine type' : undefined}
-          onChange={(e) => updateStackAndMachine(workflow?.id || '', selectedStack.id, e.target.value)}
+          onChange={(e) =>
+            updateWorkflowMeta(workflow?.id || '', { stack: selectedStack.id, machine_type_id: e.target.value })
+          }
         >
           {availableMachineTypeOptions.map(({ value, label }) => (
             <option key={value} value={value}>

source/javascripts/controllers/_LicensesController.js

@@ -0,0 +1,31 @@
+import {safeDigest} from "@/services/react-compat";
+
+(function() {
+	"use strict";
+
+	angular
+		.module("BitriseWorkflowEditor")
+		.controller("LicensesController", function($rootScope, $scope, appService) {
+			var viewModel = this;
+			viewModel.yml = null;
+
+			viewModel.init = function () {
+				viewModel.yml = appService.appConfig;
+			};
+
+			viewModel.onChange = (yml) => {
+				appService.appConfig = yml;
+				safeDigest($rootScope);
+			}
+
+			$scope.$on(
+				"$destroy",
+				$rootScope.$on("MainController::changesDiscarded", function() {
+					safeDigest($scope);
+					viewModel.init();
+				})
+			);
+
+			viewModel.init();
+		});
+})();

source/javascripts/controllers/_MainController.js.erb

@@ -243,7 +243,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
               );
               break;
             case "licenses":
-              var loadPromises = [appService.getAppConfig(), appService.getPipelineConfig(), appService.getPublicApiToken()];
+              var loadPromises = [appService.getAppConfig(), appService.getPipelineConfig()];
 
               var loadPromise = $q.all(loadPromises);
 

source/javascripts/core/api/LicensePoolsApi.mswMocks.ts

@@ -0,0 +1,50 @@
+import { delay, http, HttpResponse } from 'msw';
+import { LicensePoolKind } from '../models/LicensePool';
+import LicensePoolsApi, { LicencePoolsResponse } from './LicensePoolsApi';
+
+function getWorkspaceLicensePools(isEmpty?: boolean) {
+  return http.get(LicensePoolsApi.getWorkspaceLicensesPoolsPath(':workspaceSlug'), async (): Promise<Response> => {
+    await delay();
+
+    if (isEmpty) {
+      return HttpResponse.json<LicencePoolsResponse>([]);
+    }
+
+    return HttpResponse.json<LicencePoolsResponse>([
+      {
+        id: 'pool-1',
+        name: 'pool 1',
+        env_var_name: 'pool_1_env',
+        description: 'dede',
+        kind: LicensePoolKind.UNITY,
+        created_at: '2023-08-29T14:48:17.367908Z',
+        modified_at: '2023-08-29T14:48:17.367908Z',
+        licenses: [
+          {
+            id: 'license-1',
+            value: 'h',
+          },
+        ],
+      },
+      {
+        id: 'pool-2',
+        name: 'pool 2',
+        env_var_name: 'pool_2_env',
+        description: 'dede',
+        kind: LicensePoolKind.UNITY,
+        created_at: '2023-08-29T14:48:17.367908Z',
+        modified_at: '2023-08-29T14:48:17.367908Z',
+        licenses: [
+          {
+            id: 'license-2',
+            value: 'h',
+          },
+        ],
+      },
+    ]);
+  });
+}
+
+export default {
+  getWorkspaceLicensePools,
+};

source/javascripts/core/api/LicensePoolsApi.ts

@@ -0,0 +1,50 @@
+import { pick } from 'es-toolkit';
+import { LicensePool, LicensePoolKind } from '../models/LicensePool';
+import Client from './client';
+
+// DTOs
+export type LicencePoolsResponse = Array<{
+  created_at: string;
+  description?: string;
+  env_var_name: string;
+  id: string;
+  kind: LicensePoolKind;
+  name: string;
+  modified_at: string;
+  licenses: Array<{
+    id: string;
+    value: string;
+  }>;
+}>;
+
+// TRANSFORMATIONS
+function toLicensePools(response: LicencePoolsResponse): Array<LicensePool> {
+  return response.map((pool) => ({
+    ...pick(pool, ['description', 'id', 'kind', 'name', 'licenses']),
+    createdAt: pool.created_at,
+    envVarName: pool.env_var_name,
+    modifiedAt: pool.modified_at,
+  }));
+}
+
+export function getWorkspaceLicensesPoolsPath(workspaceSlug: string): string {
+  return `/organizations/${workspaceSlug}/license_pools`;
+}
+
+export async function getWorkspaceLicensePools({
+  workspaceSlug,
+  signal,
+}: {
+  workspaceSlug: string;
+  signal?: AbortSignal;
+}): Promise<Array<LicensePool>> {
+  const response = await Client.get<LicencePoolsResponse>(getWorkspaceLicensesPoolsPath(workspaceSlug), {
+    signal,
+  });
+  return toLicensePools(response);
+}
+
+export default {
+  getWorkspaceLicensesPoolsPath,
+  getWorkspaceLicensePools,
+};

source/javascripts/core/models/BitriseYml.schema.ts

@@ -653,6 +653,11 @@ const BitriseYmlSchema = {
               additionalProperties: true,
             },
           },
+          properties: {
+            'bitrise.io': {
+              type: 'object',
+            },
+          },
           type: 'object',
         },
         triggers: {

source/javascripts/core/models/BitriseYml.ts

@@ -3,7 +3,7 @@ import { BitriseYmlSchema } from './BitriseYml.schema';
 
 type BitriseYml = FromSchema<typeof BitriseYmlSchema>;
 type Meta = Required<BitriseYml>['meta'] & {
-  'bitrise.io'?: { stack?: string; machine_type_id?: string };
+  'bitrise.io'?: { stack?: string; machine_type_id?: string; license_pool_id?: string };
 };
 
 export { BitriseYml, Meta };