[BIVS-2905] Step bundles, iteration 1: Edit, remove and drag a Step bundle

package.json

@@ -54,7 +54,7 @@
     "stepDefinitions": "spec/integration"
   },
   "dependencies": {
-    "@bitrise/bitkit": "^13.179.0",
+    "@bitrise/bitkit": "^13.186.0",
     "@bitrise/react2angular": "^5.0.0",
     "@bitrise/steplib-search": "^2.3.0",
     "@chakra-ui/react": "^2.8.2",

source/javascripts/components/_Step.js

@@ -37,7 +37,7 @@
 
       Step.prototype.displayName = function () {
         if (this.isStepBundle()) {
-          return "Step bundle: " + this.cvs.replace("bundle::", "");
+          return this.cvs.replace("bundle::", "");
         }
         if (this.isWithBlock()) {
           return "With group";

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

@@ -9,6 +9,10 @@ import FloatingDrawer, {
   FloatingDrawerHeader,
   FloatingDrawerProps,
 } from '@/components/unified-editor/FloatingDrawer/FloatingDrawer';
+import StepBundlePropertiesTab from '@/components/unified-editor/StepBundleDrawer/StepBundlePropertiesTab';
+import useDependantWorkflows from '@/hooks/useDependantWorkflows';
+import StepBundleService from '@/core/models/StepBundleService';
+import useFeatureFlag from '@/hooks/useFeatureFlag';
 import useNavigation from '@/hooks/useNavigation';
 
 type Props = Omit<FloatingDrawerProps, 'children'> & {
@@ -17,11 +21,14 @@ type Props = Omit<FloatingDrawerProps, 'children'> & {
 };
 
 const StepBundleDrawer = ({ workflowId, stepIndex, ...props }: Props) => {
-  const { replace } = useNavigation();
   const { data } = useStep({ workflowId, stepIndex });
   const defaultStepLibrary = useDefaultStepLibrary();
+  const stepBundleId = data?.title;
+  const dependants = useDependantWorkflows({ stepBundleCvs: `bundle::${stepBundleId}` });
+  const usedInWorkflowsText = StepBundleService.getUsedByText(dependants.length);
+  const { replace } = useNavigation();
+  const enableStepBundles = useFeatureFlag('enable-wfe-step-bundles-ui') && stepBundleId;
 
-  const title = data?.title;
   const isStepBundle = StepService.isStepBundle(data?.cvs || '', defaultStepLibrary, data?.userValues);
 
   if (!isStepBundle || !data) {
@@ -34,22 +41,31 @@ const StepBundleDrawer = ({ workflowId, stepIndex, ...props }: Props) => {
         <FloatingDrawerCloseButton />
         <FloatingDrawerHeader>
           <Text as="h3" textStyle="heading/h3">
-            {title}
+            {enableStepBundles ? stepBundleId : `Step bundle: ${stepBundleId}`}
           </Text>
+          {enableStepBundles && (
+            <Text color="text/secondary" textStyle="body/md/regular">
+              {usedInWorkflowsText}
+            </Text>
+          )}
         </FloatingDrawerHeader>
         <FloatingDrawerBody>
-          <Notification
-            action={{
-              label: 'Go to YAML page',
-              onClick: () => replace('/yml'),
-            }}
-            status="info"
-          >
-            <Text textStyle="comp/notification/title">Edit step bundle configuration</Text>
-            <Text textStyle="comp/notification/message">
-              View more details or edit step bundle configuration in the Configuration YAML page.
-            </Text>
-          </Notification>
+          {enableStepBundles ? (
+            <StepBundlePropertiesTab stepBundleId={stepBundleId} />
+          ) : (
+            <Notification
+              action={{
+                label: 'Go to YAML page',
+                onClick: () => replace('/yml'),
+              }}
+              status="info"
+            >
+              <Text textStyle="comp/notification/title">Edit step bundle configuration</Text>
+              <Text textStyle="comp/notification/message">
+                View more details or edit step bundle configuration in the Configuration YAML page.
+              </Text>
+            </Notification>
+          )}
         </FloatingDrawerBody>
       </FloatingDrawerContent>
     </FloatingDrawer>

source/javascripts/components/unified-editor/StepBundleDrawer/StepBundlePropertiesTab.tsx

@@ -0,0 +1,31 @@
+import EditableInput from '@/components/EditableInput/EditableInput';
+import useRenameStepBundle from '@/components/unified-editor/StepBundleDrawer/hooks/useRenameStepBundle';
+import StepBundleService from '@/core/models/StepBundleService';
+import { useStepBundles } from '@/hooks/useStepBundles';
+
+type StepBundlesPropertiesTabProps = {
+  stepBundleId: string;
+};
+
+const StepBundlesPropertiesTab = (props: StepBundlesPropertiesTabProps) => {
+  const { stepBundleId } = props;
+
+  const stepBundles = useStepBundles();
+  const stepBundleIds = Object.keys(stepBundles);
+
+  const handleNameChange = useRenameStepBundle(stepBundleId);
+
+  return (
+    <EditableInput
+      isRequired
+      name="name"
+      label="Name"
+      value={stepBundleId}
+      sanitize={StepBundleService.sanitizeName}
+      validate={(v) => StepBundleService.validateName(v, stepBundleId, stepBundleIds)}
+      onCommit={handleNameChange}
+    />
+  );
+};
+
+export default StepBundlesPropertiesTab;

source/javascripts/components/unified-editor/StepBundleDrawer/hooks/useRenameStepBundle.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import useBitriseYmlStore from '@/hooks/useBitriseYmlStore';
+
+const useRenameStepBundle = (selectedStepBundleId: string) => {
+  const { renameStepBundle } = useBitriseYmlStore((s) => ({
+    renameStepBundle: s.renameStepBundle,
+  }));
+
+  return useCallback(
+    (newStepBundleId: string) => {
+      if (selectedStepBundleId) {
+        renameStepBundle(selectedStepBundleId, newStepBundleId);
+      }
+    },
+    [renameStepBundle, selectedStepBundleId],
+  );
+};
+
+export default useRenameStepBundle;

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

@@ -3,19 +3,33 @@ import useStep from '@/hooks/useStep';
 import { Step } from '@/core/models/Step';
 import VersionChangedDialog from '../VersionChangedDialog/VersionChangedDialog';
 
-type Props = { workflowId: string; stepIndex: number };
-type State = { workflowId: string; stepIndex: number; isLoading: boolean; data?: Step; error?: Error };
+type Props = { workflowId: string; stepIndex: number; stepBundleId?: string };
+type State = {
+  workflowId: string;
+  stepIndex: number;
+  isLoading: boolean;
+  data?: Step;
+  error?: Error;
+  stepBundleId?: string;
+};
 
-const initialState: State = { error: undefined, data: undefined, isLoading: true, workflowId: '', stepIndex: -1 };
+const initialState: State = {
+  error: undefined,
+  data: undefined,
+  isLoading: true,
+  workflowId: '',
+  stepBundleId: '',
+  stepIndex: -1,
+};
 const Context = createContext(initialState);
 
-const StepConfigDrawerProvider = ({ children, workflowId, stepIndex }: PropsWithChildren<Props>) => {
-  const result = useStep({ workflowId, stepIndex });
+const StepConfigDrawerProvider = ({ children, workflowId, stepBundleId, stepIndex }: PropsWithChildren<Props>) => {
+  const result = useStep({ workflowId, stepBundleId, stepIndex });
 
   const value = useMemo<State>(() => {
     if (!result) return initialState;
-    return { workflowId, stepIndex, ...result } as State;
-  }, [result, workflowId, stepIndex]);
+    return { workflowId, stepBundleId, stepIndex, ...result } as State;
+  }, [result, workflowId, stepBundleId, stepIndex]);
 
   const [newVersion, setNewVersion] = useState(value?.data?.resolvedInfo?.resolvedVersion);
   const [oldVersion, setOldVersion] = useState(value?.data?.resolvedInfo?.resolvedVersion);