diff --git a/package.json b/package.json index 42d49799bd..ecb3681b82 100644 --- a/package.json +++ b/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", diff --git a/src/elements/content-sidebar/MetadataInstanceEditor.tsx b/src/elements/content-sidebar/MetadataInstanceEditor.tsx index 772d1eb920..c5884fdade 100644 --- a/src/elements/content-sidebar/MetadataInstanceEditor.tsx +++ b/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 = ({ isBoxAiSuggestionsEnabled, + isDeleteButtonDisabled, isUnsavedChangesModalOpen, onDelete, onSubmit, @@ -34,6 +36,7 @@ const MetadataInstanceEditor: React.FC = ({ (null); const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = React.useState(false); - + const [isDeleteButtonDisabled, setIsDeleteButtonDisabled] = React.useState(false); const [selectedTemplates, setSelectedTemplates] = React.useState>(templateInstances); @@ -96,6 +96,7 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna const handleTemplateSelect = (selectedTemplate: MetadataTemplate) => { setSelectedTemplates([...selectedTemplates, selectedTemplate]); setEditingTemplate(convertTemplateToTemplateInstance(file, selectedTemplate)); + setIsDeleteButtonDisabled(true); }; const handleDeleteInstance = (metadataInstance: MetadataTemplateInstance) => { @@ -157,6 +158,7 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna {editingTemplate && ( setEditingTemplate(null)} onSubmit={handleSubmit} @@ -170,6 +172,7 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled} onEdit={templateInstance => { setEditingTemplate(templateInstance); + setIsDeleteButtonDisabled(false); }} onEditWithAutofill={noop} templateInstances={templateInstances} diff --git a/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx b/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx index 33b133368b..3d56958ba1 100644 --- a/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx +++ b/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(); + + const deleteButton = screen.getByRole('button', { name: 'Delete' }); + expect(deleteButton).toBeDisabled(); + }); + + test('should render MetadataInstanceForm with Delete button enabled', () => { + render(); + + const deleteButton = screen.getByRole('button', { name: 'Delete' }); + expect(deleteButton).toBeEnabled(); + }); }); diff --git a/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx b/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx index 355df42cbd..7dc73d95c4 100644 --- a/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx +++ b/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx @@ -245,3 +245,37 @@ export const MetadataInstanceEditorAIEnabled: StoryObj = { + 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 = { + 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(); + }, +}; diff --git a/yarn.lock b/yarn.lock index 29e1369f27..0cea4c90fc 100644 --- a/yarn.lock +++ b/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"