Editable fields on step bundle instance [BIVS-3422] (#1663)

Author: moczolaszlo

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

@@ -31,21 +31,24 @@ const Options = <T,>({ baseEntities }: { baseEntities: BaseEntityType<T>[] }) =>
 
 type FormValues = {
   entityId: string;
+  title?: string;
   baseEntityId: string;
 };
 
 export type Props<T> = Omit<DialogProps, 'onCloseComplete' | 'title'> & {
   baseEntities: BaseEntityType<T>[];
   entityName: string;
+  extraInputs?: 'title'[];
   onCloseComplete: (entityId: string) => void;
-  onCreateEntity: (entityId: string, baseEntityId?: string) => void;
+  onCreateEntity: (entityId: string, baseEntityId?: string, title?: string) => void;
   sanitizer: (value: string) => string;
   validator: (value: string) => string | boolean;
 };
 
 const CreateEntityDialog = <T,>({
   baseEntities,
   entityName,
+  extraInputs,
   onClose,
   onCloseComplete,
   onCreateEntity,
@@ -63,6 +66,7 @@ const CreateEntityDialog = <T,>({
   } = useForm<FormValues>({
     defaultValues: {
       entityId: '',
+      title: '',
       baseEntityId: '',
     },
   });
@@ -75,8 +79,8 @@ const CreateEntityDialog = <T,>({
     });
   };
 
-  const handleCreate = handleSubmit(({ entityId, baseEntityId }) => {
-    onCreateEntity(entityId, baseEntityId);
+  const handleCreate = handleSubmit(({ entityId, baseEntityId, title }) => {
+    onCreateEntity(entityId, baseEntityId, title || undefined);
     onClose();
   });
 
@@ -94,15 +98,24 @@ const CreateEntityDialog = <T,>({
         <Input
           autoFocus
           isRequired
-          label="Name"
-          placeholder={`${entityName} name`}
+          label="ID"
+          placeholder={`${entityName} ID`}
           inputRef={(ref) => ref?.setAttribute('data-1p-ignore', '')}
           errorText={errors.entityId?.message}
           {...register('entityId', {
             onChange: handleNameChange,
             validate: validator,
           })}
         />
+        {extraInputs?.includes('title') && (
+          <Input
+            label="Title"
+            placeholder={`${entityName} Title`}
+            inputRef={(ref) => ref?.setAttribute('data-1p-ignore', '')}
+            helperText="Human-readable name, overridable per instance."
+            {...register('title')}
+          />
+        )}
         <Select label="Based on" {...register('baseEntityId')}>
           <option key="" value="">
             An empty {entityName}

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

@@ -15,7 +15,7 @@ type BaseEntityGroup = {
 };
 
 type Props = Omit<DialogProps, 'title'> & {
-  onCreateStepBundle: (stepBundleId: string, baseEntityId?: string) => void;
+  onCreateStepBundle: (stepBundleId: string, baseEntityId?: string, title?: string) => void;
 };
 
 const CreateStepBundleDialog = ({ onClose, onCloseComplete, onCreateStepBundle, ...props }: Props) => {
@@ -52,6 +52,7 @@ const CreateStepBundleDialog = ({ onClose, onCloseComplete, onCreateStepBundle,
   return (
     <CreateEntityDialog<StepBundleCreationSource>
       baseEntities={baseEntities}
+      extraInputs={['title']}
       entityName="Step bundle"
       onClose={onClose}
       onCloseComplete={handleCloseComplete}

source/javascripts/components/unified-editor/StepBundleConfig/StepBundleConfigContent.tsx

@@ -5,17 +5,17 @@ import StepBundlePropertiesTab from './StepBundlePropertiesTab';
 
 type ConfigContentProps = {
   onDelete?: () => void;
-  onRename?: (name: string) => void;
+  onChangeId?: (name: string) => void;
 } & TabPanelProps;
 
-const StepBundleConfigContent = ({ onDelete, onRename, ...rest }: ConfigContentProps) => {
+const StepBundleConfigContent = ({ onDelete, onChangeId, ...rest }: ConfigContentProps) => {
   return (
     <TabPanels {...rest}>
       <TabPanel height="100%">
         <StepBundleConfigurationTab />
       </TabPanel>
-      <TabPanel>
-        <StepBundlePropertiesTab onDelete={onDelete} onRename={onRename} />
+      <TabPanel display="flex" flexDirection="column" gap="24">
+        <StepBundlePropertiesTab onDelete={onDelete} onChangeId={onChangeId} />
       </TabPanel>
     </TabPanels>
   );

source/javascripts/components/unified-editor/StepBundleConfig/StepBundleConfigDrawer.tsx

@@ -12,15 +12,15 @@ import StepBundleConfigContent from './StepBundleConfigContent';
 import StepBundleConfigHeader from './StepBundleConfigHeader';
 
 type Props = Omit<FloatingDrawerProps, 'children'> & {
-  onRename?: (name: string) => void;
+  onChangeId?: (name: string) => void;
   stepBundleId?: string;
   parentWorkflowId?: string;
   parentStepBundleId?: string;
   stepIndex: number;
 };
 
 const StepBundleConfigDrawer = ({
-  onRename,
+  onChangeId,
   stepBundleId,
   stepIndex,
   parentWorkflowId,
@@ -42,7 +42,7 @@ const StepBundleConfigDrawer = ({
               <StepBundleConfigHeader variant="drawer" />
             </FloatingDrawerHeader>
             <FloatingDrawerBody>
-              <StepBundleConfigContent onRename={onRename} />
+              <StepBundleConfigContent onChangeId={onChangeId} />
             </FloatingDrawerBody>
           </FloatingDrawerContent>
         </FloatingDrawer>

source/javascripts/components/unified-editor/StepBundleConfig/StepBundleConfigPanel.tsx

@@ -24,7 +24,7 @@ const StepBundleConfigPanel = ({ stepBundleId }: Props) => {
           overflow="auto"
           padding="24"
           onDelete={closeDialog}
-          onRename={setSelectedStepBundle}
+          onChangeId={setSelectedStepBundle}
         />
       </Tabs>
     </StepBundleConfigProvider>

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

@@ -1,82 +1,89 @@
-import { Button, Textarea, useDisclosure } from '@bitrise/bitkit';
-import { ChangeEventHandler } from 'react';
+import { Button, Input, Textarea, useDisclosure } from '@bitrise/bitkit';
 
 import EditableInput from '@/components/EditableInput/EditableInput';
 import StepBundleService from '@/core/services/StepBundleService';
 import { useStepBundles } from '@/hooks/useStepBundles';
 
 import DeleteStepBundleDialog from '../DeleteStepBundleDialog/DeleteStepBundleDialog';
-import useRenameStepBundle from './hooks/useRenameStepBundle';
+import useChangeStepBundleId from './hooks/useChangeStepBundleId';
 import { useStepBundleConfigContext } from './StepBundleConfig.context';
 
 type StepBundlePropertiesTabProps = {
   onDelete?: () => void;
-  onRename?: (newStepBundleId: string) => void;
+  onChangeId?: (newStepBundleId: string) => void;
 };
 
-const NameInput = ({ onRename }: Pick<StepBundlePropertiesTabProps, 'onRename'>) => {
-  const value = useStepBundleConfigContext((s) => s.stepBundle?.id);
+const StepBundlePropertiesTab = ({ onDelete, onChangeId }: StepBundlePropertiesTabProps) => {
   const stepBundleIds = useStepBundles((s) => Object.keys(s));
-  const rename = useRenameStepBundle(value, onRename);
+  const contextData = useStepBundleConfigContext((s) => s);
+  const id = contextData.stepBundle?.id || contextData.stepBundleId || '';
 
-  const handleNameChange = (newStepBundleId: string) => {
-    if (newStepBundleId !== value) {
-      rename(newStepBundleId);
-    }
+  const at = {
+    cvs: contextData.stepBundle?.cvs || `bundle::${contextData.stepBundle?.id || contextData.stepBundleId}`,
+    source: contextData.parentStepBundleId ? 'step_bundles' : ('workflows' as 'step_bundles' | 'workflows'),
+    sourceId: contextData.parentStepBundleId || contextData.parentWorkflowId || '',
+    stepIndex: contextData.stepIndex,
   };
 
-  return (
-    <EditableInput
-      isRequired
-      name="name"
-      label="Name"
-      value={value}
-      marginBlockEnd="16"
-      sanitize={StepBundleService.sanitizeName}
-      validate={(v) => StepBundleService.validateName(v, value || '', stepBundleIds)}
-      onCommit={handleNameChange}
-    />
-  );
-};
+  const { isOpen: isDeleteDialogOpen, onOpen: openDeleteDialog, onClose: closeDeleteDialog } = useDisclosure();
 
-const SummaryInput = () => {
-  const id = useStepBundleConfigContext((s) => s.stepBundle?.id || '');
-  const value = useStepBundleConfigContext((s) => s.stepBundle?.mergedValues.summary || '');
+  const rename = useChangeStepBundleId(id, onChangeId);
 
-  const handleSummaryChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    StepBundleService.updateStepBundleField(id, 'summary', e.target.value);
+  const handleIdChange = (newStepBundleId: string) => {
+    if (newStepBundleId !== id) {
+      rename(newStepBundleId);
+    }
   };
 
-  return <Textarea label="Summary" value={value} onChange={handleSummaryChange} marginBlockEnd="16" />;
-};
-
-const DescriptionInput = () => {
-  const id = useStepBundleConfigContext((s) => s.stepBundle?.id || '');
-  const value = useStepBundleConfigContext((s) => s.stepBundle?.mergedValues.description || '');
-
-  const handleDescriptionChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    StepBundleService.updateStepBundleField(id, 'description', e.target.value);
+  const handleFieldChange = (field: 'description' | 'summary' | 'title', value: string) => {
+    if (contextData.parentStepBundleId || contextData.parentWorkflowId) {
+      StepBundleService.updateStepBundleInstanceField(field, value, at);
+    } else {
+      StepBundleService.updateStepBundleField(id, field, value);
+    }
   };
 
-  return <Textarea label="Description" value={value} onChange={handleDescriptionChange} />;
-};
-
-const StepBundlePropertiesTab = ({ onDelete, onRename }: StepBundlePropertiesTabProps) => {
-  const id = useStepBundleConfigContext((s) => s.stepBundle?.id || '');
-  const { isOpen: isDeleteDialogOpen, onOpen: openDeleteDialog, onClose: closeDeleteDialog } = useDisclosure();
-
   return (
     <>
-      <NameInput onRename={onRename} />
-      <SummaryInput />
-      <DescriptionInput />
+      <EditableInput
+        isRequired
+        name="id"
+        label="ID"
+        value={contextData.stepBundle?.id}
+        sanitize={StepBundleService.sanitizeName}
+        validate={(v) => StepBundleService.validateName(v, contextData.stepBundle?.id || '', stepBundleIds)}
+        onCommit={handleIdChange}
+      />
+      <Input
+        label="Title"
+        size="md"
+        onChange={(e) => handleFieldChange('title', e.target.value)}
+        value={contextData.stepBundle?.mergedValues.title || ''}
+      />
+      <Textarea
+        label="Summary"
+        value={contextData.stepBundle?.mergedValues.summary || ''}
+        onChange={(e) => handleFieldChange('summary', e.target.value)}
+      />
+      <Textarea
+        label="Description"
+        value={contextData.stepBundle?.mergedValues.description || ''}
+        onChange={(e) => handleFieldChange('description', e.target.value)}
+      />
       {!!onDelete && (
         <>
-          <Button leftIconName="Trash" variant="secondary" isDanger marginBlockStart="24" onClick={openDeleteDialog}>
+          <Button
+            leftIconName="Trash"
+            size="md"
+            variant="secondary"
+            isDanger
+            onClick={openDeleteDialog}
+            width="fit-content"
+          >
             Delete Step bundle
           </Button>
           <DeleteStepBundleDialog
-            stepBundleId={id}
+            stepBundleId={contextData.stepBundle?.id || ''}
             isOpen={isDeleteDialogOpen}
             onClose={closeDeleteDialog}
             onDeleteStepBundle={onDelete}

source/javascripts/components/unified-editor/StepBundleConfig/hooks/useRenameStepBundle.ts renamed to source/javascripts/components/unified-editor/StepBundleConfig/hooks/useChangeStepBundleId.ts

@@ -3,18 +3,18 @@ import { useCallback, useEffect, useState } from 'react';
 import StepBundleService from '@/core/services/StepBundleService';
 import useBitriseYmlStore from '@/hooks/useBitriseYmlStore';
 
-const useRenameStepBundle = (stepBundleId: string = '', onChange?: (newStepBundleId: string) => void) => {
+const useChangeStepBundleId = (stepBundleId: string = '', onChange?: (newStepBundleId: string) => void) => {
   const stepBundleIdsInTheStore = useBitriseYmlStore((s) => Object.keys(s.yml.step_bundles ?? {}));
 
-  const [isRenaming, setIsRenaming] = useState(false);
+  const [isChanging, setIsChanging] = useState(false);
   const [nextStepBundleId, setNextStepBundleId] = useState(stepBundleId);
   const [prevStepBundleId, setPrevStepBundleId] = useState(stepBundleId);
 
   const isNewStepBundlePersisted = stepBundleIdsInTheStore.includes(nextStepBundleId);
   const isNewStepBundleSelected = nextStepBundleId === stepBundleId;
 
-  const shouldRunOnChange = isRenaming && isNewStepBundlePersisted && !isNewStepBundleSelected;
-  const shouldFinishRenaming = isRenaming && isNewStepBundlePersisted && isNewStepBundleSelected;
+  const shouldRunOnChange = isChanging && isNewStepBundlePersisted && !isNewStepBundleSelected;
+  const shouldFinishChanging = isChanging && isNewStepBundlePersisted && isNewStepBundleSelected;
 
   useEffect(() => {
     if (shouldRunOnChange) {
@@ -23,18 +23,18 @@ const useRenameStepBundle = (stepBundleId: string = '', onChange?: (newStepBundl
   }, [onChange, shouldRunOnChange, nextStepBundleId]);
 
   useEffect(() => {
-    if (shouldFinishRenaming) {
-      setIsRenaming(false);
+    if (shouldFinishChanging) {
+      setIsChanging(false);
       StepBundleService.deleteStepBundle(prevStepBundleId);
     }
-  }, [shouldFinishRenaming, prevStepBundleId]);
+  }, [shouldFinishChanging, prevStepBundleId]);
 
   return useCallback(
     (newStepBundleId: string) => {
       if (stepBundleId) {
-        setIsRenaming(true);
+        setIsChanging(true);
 
-        StepBundleService.renameStepBundle(stepBundleId, newStepBundleId);
+        StepBundleService.changeStepBundleId(stepBundleId, newStepBundleId);
         StepBundleService.createStepBundle(stepBundleId, { source: 'step_bundles', sourceId: newStepBundleId });
 
         setNextStepBundleId(newStepBundleId);
@@ -45,4 +45,4 @@ const useRenameStepBundle = (stepBundleId: string = '', onChange?: (newStepBundl
   );
 };
 
-export default useRenameStepBundle;
+export default useChangeStepBundleId;