feat(metadata-sidebar): Use error code prop in MetadataInstanceEditor (…

…#3921) * feat(metadata-sidebar): Use error code prop in MetadataInstanceEditor * feat(metadata-sidebar): Fix tests * feat(metadata-sidebar): Throw error if not specified status * feat(metadata-sidebar): Add clear error callback * feat(metadata-editor): Fix storybook test * feat(metadata-editor): Fix storybook test
box · Feb 12, 2025 · c604547 · c604547
1 parent 4c0116f
commit c604547
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -130,7 +130,7 @@
         "@box/frontend": "^10.0.0",
         "@box/item-icon": "^0.9.58",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.88.1",
+        "@box/metadata-editor": "0.91.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^1.6.1",

diff --git a/src/constants.js b/src/constants.js
@@ -324,6 +324,8 @@ export const ERROR_CODE_UNEXPECTED_EXCEPTION = 'unexpected_exception_error';
 export const ERROR_CODE_SEARCH = 'search_error';
 export const ERROR_CODE_METADATA_QUERY = 'metadata_query_error';
 export const ERROR_CODE_METADATA_STRUCTURED_TEXT_REP = 'metadata_structured_text_rep_error';
+export const ERROR_CODE_METADATA_AUTOFILL_TIMEOUT = 'metadata_autofill_timeout_error';
+export const ERROR_CODE_METADATA_PRECONDITION_FAILED = 'metadata_precondition_failed_error';
 export const ERROR_CODE_UNKNOWN = 'unknown_error';
 
 /* ------------------ Origins ---------------------- */

diff --git a/src/elements/content-sidebar/MetadataInstanceEditor.tsx b/src/elements/content-sidebar/MetadataInstanceEditor.tsx
@@ -8,9 +8,15 @@ import {
     type PaginationQueryInput,
 } from '@box/metadata-editor';
 import React from 'react';
+import {
+    ERROR_CODE_METADATA_AUTOFILL_TIMEOUT,
+    ERROR_CODE_UNKNOWN,
+    ERROR_CODE_METADATA_PRECONDITION_FAILED,
+} from '../../constants';
 
 export interface MetadataInstanceEditorProps {
     areAiSuggestionsAvailable: boolean;
+    errorCode?: ERROR_CODE_METADATA_AUTOFILL_TIMEOUT | ERROR_CODE_METADATA_PRECONDITION_FAILED | ERROR_CODE_UNKNOWN;
     isBetaLanguageEnabled: boolean;
     isBoxAiSuggestionsEnabled: boolean;
     isDeleteButtonDisabled: boolean;
@@ -32,6 +38,7 @@ export interface MetadataInstanceEditorProps {
 
 const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
     areAiSuggestionsAvailable,
+    errorCode,
     isBetaLanguageEnabled,
     isBoxAiSuggestionsEnabled,
     isDeleteButtonDisabled,
@@ -47,6 +54,7 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
     return (
         <MetadataInstanceForm
             areAiSuggestionsAvailable={areAiSuggestionsAvailable}
+            errorCode={errorCode}
             isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
             isBetaLanguageEnabled={isBetaLanguageEnabled}
             isDeleteButtonDisabled={isDeleteButtonDisabled}

diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx
@@ -92,12 +92,14 @@ function MetadataSidebarRedesign({
     getStructuredTextRep,
 }: MetadataSidebarRedesignProps) {
     const {
+        clearExtractError,
         extractSuggestions,
         file,
         handleCreateMetadataInstance,
         handleDeleteMetadataInstance,
         handleUpdateMetadataInstance,
         templates,
+        extractErrorCode,
         errorMessage,
         status,
         templateInstances,
@@ -156,6 +158,8 @@ function MetadataSidebarRedesign({
     }, [editingTemplate, templateInstances, templateInstances.length]);
 
     const handleTemplateSelect = (selectedTemplate: MetadataTemplate) => {
+        clearExtractError();
+
         if (editingTemplate) {
             setPendingTemplateToEdit(convertTemplateToTemplateInstance(file, selectedTemplate));
             setIsUnsavedChangesModalOpen(true);
@@ -166,6 +170,7 @@ function MetadataSidebarRedesign({
     };
 
     const handleCancel = () => {
+        clearExtractError();
         setEditingTemplate(null);
     };
 
@@ -189,6 +194,7 @@ function MetadataSidebarRedesign({
         } catch {
             // ignore error, handled in useSidebarMetadataFetcher
         }
+        clearExtractError();
         setEditingTemplate(null);
     };
 
@@ -279,6 +285,7 @@ function MetadataSidebarRedesign({
                     {editingTemplate && (
                         <MetadataInstanceEditor
                             areAiSuggestionsAvailable={areAiSuggestionsAvailable}
+                            errorCode={extractErrorCode}
                             isBetaLanguageEnabled={isBetaLanguageEnabled}
                             isBoxAiSuggestionsEnabled={isBoxAiSuggestionsEnabled}
                             isDeleteButtonDisabled={isDeleteButtonDisabled}

diff --git a/src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx b/src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx
@@ -118,6 +118,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     beforeEach(() => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -127,6 +128,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
     });
 
@@ -142,6 +144,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should have accessible "All templates" combobox trigger button', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -151,6 +154,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         renderComponent();
@@ -184,6 +188,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should have accessible "All templates" combobox trigger button', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -193,6 +198,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         renderComponent();
@@ -204,6 +210,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render metadata sidebar with error', async () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -216,6 +223,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             },
             status: STATUS.ERROR,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         const errorMessage = { id: 'error', defaultMessage: 'error message' };
@@ -227,6 +235,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render metadata sidebar with loading indicator', async () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -236,6 +245,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.LOADING,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         renderComponent();
@@ -266,6 +276,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render empty state when no visible template instances are present', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -275,6 +286,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         renderComponent();
@@ -288,6 +300,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render metadata instance list when templates are present', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -297,6 +310,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         renderComponent();
@@ -311,6 +325,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render filter dropdown when more than one templates are present', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -320,6 +335,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         renderComponent();
@@ -337,6 +353,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         'should not render filter dropdown when only one or none visible template is present',
         (templateInstances: MetadataTemplateInstance[]) => {
             mockUseSidebarMetadataFetcher.mockReturnValue({
+                clearExtractError: jest.fn(),
                 extractSuggestions: jest.fn(),
                 handleCreateMetadataInstance: jest.fn(),
                 handleDeleteMetadataInstance: jest.fn(),
@@ -346,6 +363,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
                 errorMessage: null,
                 status: STATUS.SUCCESS,
                 file: mockFile,
+                extractErrorCode: null,
             });
 
             renderComponent();
@@ -356,6 +374,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render metadata filterd instance list when fileterd templates are present and matching', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -365,6 +384,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         const filteredTemplateIds = [mockVisibleTemplateInstance.id];
@@ -378,6 +398,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render metadata unfiltered instance list when fileterd templates are present and do not match existing templates', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
@@ -387,6 +408,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
+            extractErrorCode: null,
         });
 
         const filteredTemplateIds = ['non-existing-template-id'];