[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.188.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,19 +9,26 @@ import FloatingDrawer, {
   FloatingDrawerHeader,
   FloatingDrawerProps,
 } from '@/components/unified-editor/FloatingDrawer/FloatingDrawer';
+import useDependantWorkflows from '@/hooks/useDependantWorkflows';
+import StepBundleService from '@/core/models/StepBundleService';
+import useFeatureFlag from '@/hooks/useFeatureFlag';
 import useNavigation from '@/hooks/useNavigation';
+import StepBundlePropertiesTab from './StepBundlePropertiesTab';
 
 type Props = Omit<FloatingDrawerProps, 'children'> & {
   workflowId: string;
   stepIndex: number;
 };
 
 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 StepBundleService from '@/core/models/StepBundleService';
+import { useStepBundles } from '@/hooks/useStepBundles';
+import useRenameStepBundle from './hooks/useRenameStepBundle';
+
+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;