feat(metadata-sidebar): disable delete button (#3677)

* feat(metadata-sidebar): disable delete button

* feat(metadata-sidebar): remove console.log

* feat(metadata-sidebar): unit tests

* feat(metadata-sidebar): storybook tests

Author: karolinaru

package.json

@@ -128,7 +128,7 @@
         "@box/cldr-data": "^34.2.0",
         "@box/frontend": "^10.0.0",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.53.0",
+        "@box/metadata-editor": "^0.54.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^1.6.1",
@@ -304,7 +304,7 @@
         "@box/blueprint-web-assets": "^4.21.0",
         "@box/box-ai-content-answers": "^0.49.1",
         "@box/cldr-data": ">=34.2.0",
-        "@box/metadata-editor": "^0.53.0",
+        "@box/metadata-editor": "^0.54.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@hapi/address": "^2.1.4",
         "axios": "^0.25.0",

src/elements/content-sidebar/MetadataInstanceEditor.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 export interface MetadataInstanceEditorProps {
     isBoxAiSuggestionsEnabled: boolean;
+    isDeleteButtonDisabled: boolean;
     isUnsavedChangesModalOpen: boolean;
     onCancel: () => void;
     onDelete: (metadataInstance: MetadataTemplateInstance) => void;
@@ -19,6 +20,7 @@ export interface MetadataInstanceEditorProps {
 
 const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
     isBoxAiSuggestionsEnabled,
+    isDeleteButtonDisabled,
     isUnsavedChangesModalOpen,
     onDelete,
     onSubmit,
@@ -34,6 +36,7 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
         <AutofillContextProvider isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}>
             <MetadataInstanceForm
                 isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
+                isDeleteButtonDisabled={isDeleteButtonDisabled}
                 isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
                 selectedTemplateInstance={template}
                 onCancel={handleCancel}

src/elements/content-sidebar/MetadataSidebarRedesign.tsx

@@ -87,7 +87,7 @@ function MetadataSidebarRedesign({
 
     const [editingTemplate, setEditingTemplate] = React.useState<MetadataTemplateInstance | null>(null);
     const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = React.useState<boolean>(false);
-
+    const [isDeleteButtonDisabled, setIsDeleteButtonDisabled] = React.useState<boolean>(false);
     const [selectedTemplates, setSelectedTemplates] =
         React.useState<Array<MetadataTemplateInstance | MetadataTemplate>>(templateInstances);
 
@@ -102,6 +102,7 @@ function MetadataSidebarRedesign({
     const handleTemplateSelect = (selectedTemplate: MetadataTemplate) => {
         setSelectedTemplates([...selectedTemplates, selectedTemplate]);
         setEditingTemplate(convertTemplateToTemplateInstance(file, selectedTemplate));
+        setIsDeleteButtonDisabled(true);
     };
 
     const handleDeleteInstance = (metadataInstance: MetadataTemplateInstance) => {
@@ -163,6 +164,7 @@ function MetadataSidebarRedesign({
                 {editingTemplate && (
                     <MetadataInstanceEditor
                         isBoxAiSuggestionsEnabled={isBoxAiSuggestionsEnabled}
+                        isDeleteButtonDisabled={isDeleteButtonDisabled}
                         isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
                         onCancel={() => setEditingTemplate(null)}
                         onSubmit={handleSubmit}
@@ -176,6 +178,7 @@ function MetadataSidebarRedesign({
                         isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
                         onEdit={templateInstance => {
                             setEditingTemplate(templateInstance);
+                            setIsDeleteButtonDisabled(false);
                         }}
                         onEditWithAutofill={noop}
                         templateInstances={templateInstances}

src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx

@@ -26,6 +26,7 @@ describe('MetadataInstanceEditor', () => {
 
     const defaultProps: MetadataInstanceEditorProps = {
         isBoxAiSuggestionsEnabled: true,
+        isDeleteButtonDisabled: false,
         isUnsavedChangesModalOpen: false,
         template: mockMetadataTemplate,
         onCancel: jest.fn(),
@@ -70,4 +71,19 @@ describe('MetadataInstanceEditor', () => {
         const unsavedChangesModal = screen.getByText('Unsaved Changes');
         expect(unsavedChangesModal).toBeInTheDocument();
     });
+
+    test('should render MetadataInstanceForm with Delete button disabled', () => {
+        const props = { ...defaultProps, isDeleteButtonDisabled: true };
+        render(<MetadataInstanceEditor {...props} />);
+
+        const deleteButton = screen.getByRole('button', { name: 'Delete' });
+        expect(deleteButton).toBeDisabled();
+    });
+
+    test('should render MetadataInstanceForm with Delete button enabled', () => {
+        render(<MetadataInstanceEditor {...defaultProps} />);
+
+        const deleteButton = screen.getByRole('button', { name: 'Delete' });
+        expect(deleteButton).toBeEnabled();
+    });
 });

src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -214,3 +214,37 @@ export const MetadataInstanceEditorCancelChanges: StoryObj<typeof MetadataSideba
         );
     },
 };
+
+export const DeleteButtonIsDisabledWhenAddingNewMetadataTemplate: StoryObj<typeof MetadataSidebarRedesign> = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const addTemplateButton = await canvas.findByRole('button', { name: 'Add template' }, { timeout: 5000 });
+        expect(addTemplateButton).toBeInTheDocument();
+        await userEvent.click(addTemplateButton);
+
+        const customMetadataOption = canvas.getByRole('option', { name: 'Virus Scan' });
+        expect(customMetadataOption).toBeInTheDocument();
+        await userEvent.click(customMetadataOption);
+
+        const deleteButton = await canvas.findByRole('button', { name: 'Delete' });
+        expect(deleteButton).toBeDisabled();
+    },
+};
+
+export const DeleteButtonIsEnabledWhenEditingMetadataTemplateInstance: StoryObj<typeof MetadataSidebarRedesign> = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const editMetadataInstanceButton = await canvas.findByRole(
+            'button',
+            { name: 'Edit My Template' },
+            { timeout: 5000 },
+        );
+        expect(editMetadataInstanceButton).toBeInTheDocument();
+        await userEvent.click(editMetadataInstanceButton);
+
+        const deleteButton = await canvas.findByRole('button', { name: 'Delete' });
+        expect(deleteButton).toBeEnabled();
+    },
+};

yarn.lock

@@ -1569,10 +1569,10 @@
   resolved "https://registry.yarnpkg.com/@box/languages/-/languages-1.1.2.tgz#cd4266b3da62da18560d881e10b429653186be29"
   integrity sha512-d64TGosx+KRmrLZj4CIyLp42LUiEbgBJ8n8cviMQwTJmfU0g+UwZqLjmQZR1j+Q9D64yV4xHzY9K1t5nInWWeQ==
 
-"@box/metadata-editor@^0.53.0":
-  version "0.53.0"
-  resolved "https://registry.yarnpkg.com/@box/metadata-editor/-/metadata-editor-0.53.0.tgz#913851d2a8ad52e42b3f919a708f132d36f5be2b"
-  integrity sha512-W9BVauKnkHdaw3jmii2W25N0kWD0K9luITQpvM8zHjbHy5mNRAg8fX7tHmcNKR+kUyCpThW+QcWRHKf+3F3CsA==
+"@box/metadata-editor@^0.54.0":
+  version "0.54.0"
+  resolved "https://registry.yarnpkg.com/@box/metadata-editor/-/metadata-editor-0.54.0.tgz#699266252fca2b776eb9df814b158d988e719f01"
+  integrity sha512-Og7w6DsoDoXpuujDcnrlTWiTmVONuuWDwDitcrXflNkxsx9ZVvgTFwKD9SVj2yW5HjMM5X46X1qHYDe40qDXkg==
 
 "@box/react-virtualized@9.22.3-rc-box.9":
   version "9.22.3-rc-box.9"