refactor: SecretsPage

source/javascripts/_serviceRegister.js

@@ -5,7 +5,6 @@ import RequestService from "./services/request-service";
 import loggerFactory from "./services/logger";
 import workflowSelectionserviceFactory from "./services/workflows-selection-service";
 import workflowSelectionStore from "./services/workflow-selection-store";
-import * as appService from "./services/app-service";
 
 angular
   .module("BitriseWorkflowEditor")
@@ -31,9 +30,6 @@ angular
   .factory("RequestService", function (logger) {
     return new RequestService(logger);
   })
-  .factory("appServiceUtil", function () {
-    return appService;
-  })
   .factory("workflowSelectionStore", function () {
     return workflowSelectionStore;
   })

source/javascripts/components/unified-editor/RunWorkflowDialog/RunWorkflowDialog.tsx

@@ -21,9 +21,9 @@ const RunWorkflowDialog = ({ isOpen, onClose, workflowId }: RunWorkflowDialogPro
       { workflowId, branch },
       {
         onSuccess: (data) => {
-          if (data.build_url) {
-            onClose();
-            window.open(data.build_url, '_blank');
+          onClose();
+          if (data?.build_url) {
+            window.open(data?.build_url, '_blank');
           }
         },
         onError: (error) => {

source/javascripts/components/unified-editor/StepConfigDrawer/components/InsertEnvVarPopover/InsertEnvVarPopover.tsx

@@ -39,7 +39,6 @@ const InsertEnvVarPopover = ({ size, onCreate, onSelect, isOpen: initialIsOpen,
   const { isLoading: isLoadingEnvVars, envs } = useEnvVars(id, shouldLoadVars);
   const { isLoading: isLoadingSecrets, data: secrets = [] } = useSecrets({
     appSlug,
-    useApi: true,
     options: { enabled: shouldLoadVars },
   });
 

source/javascripts/components/unified-editor/StepConfigDrawer/components/InsertSecretPopover/InsertSecretPopover.tsx

@@ -37,7 +37,6 @@ const InsertSecretPopover = ({ size, onCreate, onSelect, isOpen: initialIsOpen,
   const [shouldLoadVars, setShouldLoadVars] = useState(Boolean(initialIsOpen));
   const { isLoading, data: secrets = [] } = useSecrets({
     appSlug,
-    useApi: true,
     options: { enabled: shouldLoadVars },
   });
 

source/javascripts/components/unified-editor/StepConfigDrawer/components/StepInput.tsx

@@ -3,7 +3,7 @@ import { ButtonGroup, forwardRef, IconButton } from '@bitrise/bitkit';
 import AutoGrowableInput, { AutoGrowableInputProps } from '@/components/AutoGrowableInput';
 import useBitriseYmlStore from '@/hooks/useBitriseYmlStore';
 import { EnvVar } from '@/core/models/EnvVar';
-import { useUpdateSecret } from '@/hooks/useSecrets';
+import { useUpsertSecret } from '@/hooks/useSecrets';
 import WindowUtils from '@/core/utils/WindowUtils';
 import { useStepDrawerContext } from '../StepConfigDrawer.context';
 import StepHelperText from './StepHelperText';
@@ -35,11 +35,13 @@ const StepInput = forwardRef(
     const appendWorkflowEnvVar = useBitriseYmlStore((s) => s.appendWorkflowEnvVar);
     const [value, setValue] = useState(String(props.value ?? props.defaultValue ?? ''));
 
-    const { mutate: createSecret } = useUpdateSecret({
+    const { mutate: createSecret } = useUpsertSecret({
       appSlug: WindowUtils.appSlug() ?? '',
       options: {
-        onSuccess: ({ key }) => {
-          insertVariable(key);
+        onSuccess: (data) => {
+          if (data) {
+            insertVariable(data.key);
+          }
         },
       },
     });

source/javascripts/components/unified-editor/WorkflowCard/components/StepList.tsx

@@ -122,16 +122,11 @@ const StepList = ({ workflowId, containerProps, stepActions }: Props) => {
 
             return (
               <Fragment key={item.stepIndex}>
-                <AddStepButton
-                  my={-8}
-                  zIndex={10}
-                  onClick={onAddStepClick && (() => onAddStepClick(workflowId, item.stepIndex))}
-                />
+                <AddStepButton my={-8} onClick={onAddStepClick && (() => onAddStepClick(workflowId, item.stepIndex))} />
                 <StepCard {...item} isSortable actions={actions} />
                 {isLast && (
                   <AddStepButton
                     my={-8}
-                    zIndex={10}
                     onClick={onAddStepClick && (() => onAddStepClick(workflowId, item.stepIndex + 1))}
                   />
                 )}

source/javascripts/controllers/_MainController.js.erb

@@ -1,11 +1,11 @@
 import _ from "underscore";
 import isEqual from "lodash/isEqual";
 import datadogRumCustomTiming from "../utils/datadogCustomRumTiming.ts";
-import { getSearchParamsFromLocationHash } from "@/hooks/useSearchParams";
-import { safeDigest } from "@/services/react-compat";
+import {getSearchParamsFromLocationHash} from "@/hooks/useSearchParams";
+import {safeDigest} from "@/services/react-compat";
 import WindowUtils from "@/core/utils/WindowUtils";
 import BitriseYmlApi from "@/core/api/BitriseYmlApi";
-import { segmentTrack } from "@/utils/segmentTracking";
+import {segmentTrack} from "@/utils/segmentTracking";
 
 (function () {
   "use strict";
@@ -27,10 +27,10 @@ import { segmentTrack } from "@/utils/segmentTracking";
       Progress,
       Popup,
       Stack,
-      appServiceUtil,
       logger,
       MachineType,
-      launchDarklyService
+      launchDarklyService,
+      Variable
     ) {
       var viewModel = this;
 
@@ -122,8 +122,6 @@ import { segmentTrack } from "@/utils/segmentTracking";
       viewModel.shouldAllowYMLMenuWithoutDiscard = false;
       viewModel.lastWorkflowEditedDate;
 
-      viewModel.isFirstBuildExperienceEnabled = false;
-
       viewModel.isDiffEditorEnabled = false;
       viewModel.isDiffDialogOpen = false;
       viewModel.originalYaml = "";
@@ -265,8 +263,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
             case "code-signing":
               resolve();
             case "secrets":
-              appService.getSecrets().then(resolve, reject);
-
+              resolve();
               break;
             case "stack":
               appService.getAppConfigYML();
@@ -367,7 +364,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
             "<%= data[:strings][:main][:confirm_tab_change_save_popup][:save] %>",
             "<%= data[:strings][:main][:confirm_tab_change_save_popup][:cancel] %>",
             function () {
-              viewModel.save({ shouldReturnPromise: true, source: "unsaved_changes_save_button" }).then(
+              viewModel.save({shouldReturnPromise: true, source: "unsaved_changes_save_button"}).then(
                 function () {
                   resolve();
                 },
@@ -382,7 +379,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
           );
         }).then(
           function () {
-            logger.setTags({ menuID: menu.id });
+            logger.setTags({menuID: menu.id});
 
             _.each(_.without(viewModel.menus, menu), function (aMenu) {
               _.each(aMenu.possibleURLParameterKeys, function (aMenuURLParameterKey) {
@@ -406,8 +403,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
             if ($location.path() != "/" + menu.path) {
               if (params) {
                 $location.path("/" + menu.path).search(params).replace();
-              }
-              else {
+              } else {
                 $location.path("/" + menu.path).replace();
               }
             }
@@ -571,7 +567,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
         return viewModel.dataToSave;
       };
 
-      viewModel.save = function ({ shouldReturnPromise, source = 'save_changes_button' }) {
+      viewModel.save = function ({shouldReturnPromise, source = 'save_changes_button'}) {
         if (shouldReturnPromise === undefined) {
           shouldReturnPromise = false;
         }
@@ -611,7 +607,8 @@ import { segmentTrack } from "@/utils/segmentTracking";
                     })
                     .then(resolve, reject);
                 case "secrets":
-                  return appService.saveSecrets(viewModel.appSecretsWriteNew).then(resolve, reject);
+                  resolve();
+                  break;
                 case "stack":
                   viewModel.dataToSave = appService.appConfig;
                   var machineTypeUpdated = appService.defaultMachineTypeHasUnsavedChanges();
@@ -660,7 +657,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
               }
             }
           )
-          ;
+        ;
 
         if (shouldReturnPromise) {
           return promise;
@@ -700,7 +697,7 @@ import { segmentTrack } from "@/utils/segmentTracking";
           event.preventDefault();
 
           if (viewModel.isSaveEnabled()) {
-            viewModel.save({ source: 'save_changes_keyboard_shortcut_pressed' });
+            viewModel.save({source: 'save_changes_keyboard_shortcut_pressed'});
           }
 
           return false;
@@ -824,9 +821,6 @@ import { segmentTrack } from "@/utils/segmentTracking";
 
         $q(function (resolve, reject) {
           launchDarklyService.initialize().then(() => {
-            viewModel.isFirstBuildExperienceEnabled = launchDarklyService.variation("enable-first-build-experience");
-            viewModel.workspaceSecretsEnabled = launchDarklyService.variation("workspace-secrets");
-            viewModel.appSecretsWriteNew = launchDarklyService.variation("wfe-app-secrets-write-new");
             viewModel.enableNewWorkflowsPage = launchDarklyService.variation("enable-new-wfe-workflows-page");
             viewModel.isDiffEditorEnabled = launchDarklyService.variation("enable-wfe-diff-editor");
 
@@ -930,6 +924,63 @@ import { segmentTrack } from "@/utils/segmentTracking";
         });
       };
 
+      viewModel.saveSecretsFromReact = function (secretsFromReact) {
+        if (!appService.secrets) {
+          appService.secrets = [];
+        }
+
+        // delete the ones that got removed.
+        appService.secrets = appService.secrets.filter((secret) => {
+          // leave workspace secrets intact
+          if (secret.scope() === 'workspace') return true;
+
+          // remove the ones that are not in the react list
+          return secretsFromReact.find((s) => !s.isShared && s.key === secret.key())
+        });
+
+        // edit existing ones
+        appService.secrets.forEach(secret => {
+          if (secret.scope() === 'workspace') return;
+
+          const updatedSecret = secretsFromReact.find((s) => !s.isShared && s.key === secret.key());
+
+          if (updatedSecret) {
+            secret.value(updatedSecret.value);
+            secret.isProtected(updatedSecret.isProtected);
+            secret.isExpose(updatedSecret.isExpose);
+            secret.isExpand(updatedSecret.isExpand);
+          }
+
+          return secret;
+        });
+
+        // add new ones
+        secretsFromReact.forEach(secret => {
+          if (secret.isShared) return;
+
+          const existingSecret = appService.secrets.find(s => s.scope() !== 'workspace' && s.key() === secret.key);
+
+          if (!existingSecret) {
+            let newVariable = new Variable(
+              {
+                "": ""
+              },
+              Variable.defaultVariableConfig(),
+            )
+
+            newVariable.key(secret.key);
+            newVariable.value(secret.value);
+            newVariable.isProtected(secret.isProtected);
+            newVariable.isExpose(secret.isExpose);
+            newVariable.isExpand(secret.isExpand);
+
+            appService.secrets.push(newVariable);
+          }
+        });
+
+        appService.saveSecrets();
+      }
+
       window.parent.addEventListener('navigation.replace', (e) => {
         const menu = viewModel.menus.find(m => `/${m.path}` === e.detail.path);