work in progress

box · Oct 10, 2024 · 3f6575d · 3f6575d
1 parent 87e4d19
commit 3f6575d
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 62 deletions.
diff --git a/src/elements/content-sidebar/MetadataInstanceEditor.tsx b/src/elements/content-sidebar/MetadataInstanceEditor.tsx
@@ -4,9 +4,13 @@ import {
     type FormValues,
     type JSONPatchOperations,
     type MetadataTemplateInstance,
+    type FetcherResponse,
+    type BaseOptionType,
 } from '@box/metadata-editor';
 import React from 'react';
 
+const noopTaxonomyFetcher = () => Promise.resolve({ options: [] } satisfies FetcherResponse<BaseOptionType>);
+
 export interface MetadataInstanceEditorProps {
     areAiSuggestionsAvailable: boolean;
     isBoxAiSuggestionsEnabled: boolean;
@@ -44,6 +48,7 @@ export const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
             onSubmit={onSubmit}
             selectedTemplateInstance={template}
             setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
+            taxonomyOptionsFetcher={noopTaxonomyFetcher}
         />
     );
 };

diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx
@@ -8,12 +8,13 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { InlineError, LoadingIndicator } from '@box/blueprint-web';
 import {
     AddMetadataTemplateDropdown,
+    AutofillContextProvider,
     MetadataEmptyState,
     MetadataInstanceList,
     type FormValues,
     type JSONPatchOperations,
-    type MetadataTemplateInstance,
     type MetadataTemplate,
+    type MetadataTemplateInstance,
 } from '@box/metadata-editor';
 
 import API from '../../api';
@@ -27,13 +28,11 @@ import { EVENT_JS_READY } from '../common/logger/constants';
 import { mark } from '../../utils/performance';
 import useSidebarMetadataFetcher, { STATUS } from './hooks/useSidebarMetadataFetcher';
 
-import { type ElementsXhrError } from '../../common/types/api';
-import { type ElementOrigin } from '../common/flowTypes';
 import { type WithLoggerProps } from '../../common/types/logging';
 
 import messages from '../common/messages';
 import './MetadataSidebarRedesign.scss';
-import MetadataInstanceEditor from './MetadataInstanceEditor';
+import { MetadataInstanceEditor } from './MetadataInstanceEditor';
 import { convertTemplateToTemplateInstance } from './utils/convertTemplateToTemplateInstance';
 import { isExtensionSupportedForMetadataSuggestions } from './utils/isExtensionSupportedForMetadataSuggestions';
 
@@ -51,13 +50,8 @@ interface PropsWithoutContext extends ExternalProps {
     hasSidebarInitialized?: boolean;
 }
 
-interface ContextInfo {
-    isErrorDisplayed: boolean;
-    error: ElementsXhrError | Error;
-}
-
 export interface ErrorContextProps {
-    onError: (error: ElementsXhrError | Error, code: string, contextInfo?: ContextInfo, origin?: ElementOrigin) => void;
+    onError: (error: Error, code: string, contextInfo?: Record<string, unknown>) => void;
 }
 
 export interface MetadataSidebarRedesignProps extends PropsWithoutContext, ErrorContextProps, WithLoggerProps {
@@ -189,35 +183,36 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna
                 {showEmptyState && (
                     <MetadataEmptyState level={'file'} isBoxAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled} />
                 )}
-                {editingTemplate && (
-                    <MetadataInstanceEditor
-                        areAiSuggestionsAvailable={areAiSuggestionsAvailable}
-                        isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
-                        isBoxAiSuggestionsEnabled={isBoxAiSuggestionsEnabled}
-                        isDeleteButtonDisabled={isDeleteButtonDisabled}
-                        isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
-                        fetchSuggestions={extractSuggestions}
-                        onCancel={handleCancel}
-                        onDelete={handleDeleteInstance}
-                        onDiscardUnsavedChanges={handleDiscardUnsavedChanges}
-                        onSubmit={handleSubmit}
-                        setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
-                        template={editingTemplate}
-                    />
-                )}
-                {showList && (
-                    <MetadataInstanceList
-                        isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
-                        onEdit={templateInstance => {
-                            setEditingTemplate(templateInstance);
-                            setIsDeleteButtonDisabled(false);
-                        }}
-                        onEditWithAutofill={templateInstance => {
-                            setEditingTemplate(templateInstance);
-                        }}
-                        templateInstances={templateInstances}
-                    />
-                )}
+                <AutofillContextProvider
+                    fetchSuggestions={extractSuggestions}
+                    isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
+                >
+                    {editingTemplate && (
+                        <MetadataInstanceEditor
+                            areAiSuggestionsAvailable={areAiSuggestionsAvailable}
+                            isBoxAiSuggestionsEnabled={isBoxAiSuggestionsEnabled}
+                            isDeleteButtonDisabled={isDeleteButtonDisabled}
+                            isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
+                            onCancel={handleCancel}
+                            onDelete={handleDeleteInstance}
+                            onDiscardUnsavedChanges={handleDiscardUnsavedChanges}
+                            onSubmit={handleSubmit}
+                            setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
+                            template={editingTemplate}
+                        />
+                    )}
+                    {showList && (
+                        <MetadataInstanceList
+                            areAiSuggestionsAvailable={areAiSuggestionsAvailable}
+                            isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
+                            onEdit={templateInstance => {
+                                setEditingTemplate(templateInstance);
+                                setIsDeleteButtonDisabled(false);
+                            }}
+                            templateInstances={templateInstances}
+                        />
+                    )}
+                </AutofillContextProvider>
             </div>
         </SidebarContent>
     );

diff --git a/src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts b/src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts
@@ -31,22 +31,7 @@ export enum STATUS {
     SUCCESS = 'success',
 }
 
-class ElementsError extends Error {
-    code: string;
-
-    type: 'error';
-
-    constructor(message: string, errorCode: string) {
-        super(message);
-        this.name = 'ElementsError';
-        this.code = errorCode;
-        this.message = message;
-        this.type = 'error';
-
-        // Set the prototype explicitly to maintain the instanceof check
-        Object.setPrototypeOf(this, ElementsError.prototype);
-    }
-}
+const wait = async ms => new Promise(resolve => setTimeout(resolve, ms));
 
 interface DataFetcher {
     errorMessage: MessageDescriptor | null;
@@ -208,18 +193,25 @@ function useSidebarMetadataFetcher(
     const extractSuggestions = React.useCallback(
         async (templateKey: string, fields: MetadataTemplateField[]) => {
             const aiAPI = api.getIntelligenceAPI();
+
+            await wait(1000);
+
             let answer = {};
             try {
-                answer = await aiAPI.extractStructured({
-                    items: [file],
-                    fields,
-                });
+                // answer = await aiAPI.extractStructured({
+                //     items: [{ id: file.id, type: file.type }],
+                //     fields,
+                // });
+                answer = {
+                    projectName: 'P1691981c2ec540d0187c51fe0f12bf5225',
+                };
             } catch (error) {
-                throw new ElementsError(error.message, ERROR_CODE_FETCH_METADATA_SUGGESTIONS);
+                onError(error, ERROR_CODE_FETCH_METADATA_SUGGESTIONS, { showNotification: true });
             }
 
             if (isEmpty(answer)) {
-                throw new ElementsError('No suggestions found.', ERROR_CODE_EMPTY_METADATA_SUGGESTIONS);
+                const error = new Error('No suggestions found.');
+                onError(error, ERROR_CODE_EMPTY_METADATA_SUGGESTIONS, { showNotification: true });
             }
 
             return fields.map(field => {
@@ -233,7 +225,7 @@ function useSidebarMetadataFetcher(
                 };
             });
         },
-        [api, file],
+        [api, file, onError],
     );
 
     React.useEffect(() => {