feat(metadata-sidebar): pass areAiSuggestionsAvailable based on file …

…ext (box#3675) * feat(content-sidebar): pass areAiSuggestionsAvailable based on file ext * fix: req changes * fix: req changes * fix: req changes * fix: test * fix: requested * feat: bump package * fix: fetchSuggestions * fix: types * fix: yarn --------- Co-authored-by: greg-in-a-box <[email protected]> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
DanilaRubleuski · Oct 9, 2024 · 116b6a1 · 116b6a1
1 parent f2b51c9
commit 116b6a1
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -92,11 +92,7 @@
             "last 2 Edge versions",
             "last 2 iOS versions"
         ],
-        "development": [
-            "last 1 Chrome versions",
-            "last 1 Firefox versions",
-            "last 1 Safari versions"
-        ]
+        "development": ["last 1 Chrome versions", "last 1 Firefox versions", "last 1 Safari versions"]
     },
     "husky": {
         "hooks": {
@@ -370,8 +366,6 @@
         }
     },
     "msw": {
-        "workerDirectory": [
-            ".storybook/public"
-        ]
+        "workerDirectory": [".storybook/public"]
     }
 }
diff --git a/src/elements/content-sidebar/MetadataInstanceEditor.tsx b/src/elements/content-sidebar/MetadataInstanceEditor.tsx
@@ -1,5 +1,6 @@
 import {
     AutofillContextProvider,
+    AutofillContextProviderProps,
     MetadataInstanceForm,
     type FormValues,
     type JSONPatchOperations,
@@ -8,48 +9,52 @@ import {
 import React from 'react';
 
 export interface MetadataInstanceEditorProps {
+    areAiSuggestionsAvailable: boolean;
+    fetchSuggestions: AutofillContextProviderProps['fetchSuggestions'];
     isBoxAiSuggestionsEnabled: boolean;
     isDeleteButtonDisabled: boolean;
     isUnsavedChangesModalOpen: boolean;
     onCancel: () => void;
     onDelete: (metadataInstance: MetadataTemplateInstance) => void;
-    template: MetadataTemplateInstance;
+    onDiscardUnsavedChanges: () => void;
     onSubmit: (values: FormValues, operations: JSONPatchOperations) => Promise<void>;
     setIsUnsavedChangesModalOpen: (isUnsavedChangesModalOpen: boolean) => void;
-    onDiscardUnsavedChanges: () => void;
+    template: MetadataTemplateInstance;
 }
 
 const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
+    areAiSuggestionsAvailable,
+    fetchSuggestions,
     isBoxAiSuggestionsEnabled,
     isDeleteButtonDisabled,
     isUnsavedChangesModalOpen,
+    onCancel,
     onDelete,
+    onDiscardUnsavedChanges,
     onSubmit,
     setIsUnsavedChangesModalOpen,
     template,
-    onCancel,
-    onDiscardUnsavedChanges,
 }) => {
     const handleCancel = () => {
         onCancel();
     };
 
     return (
         <AutofillContextProvider
-            fetchSuggestions={() => Promise.resolve([])}
+            fetchSuggestions={fetchSuggestions}
             isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
         >
             <MetadataInstanceForm
-                areAiSuggestionsAvailable={true}
+                areAiSuggestionsAvailable={areAiSuggestionsAvailable}
                 isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
                 isDeleteButtonDisabled={isDeleteButtonDisabled}
                 isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
-                selectedTemplateInstance={template}
                 onCancel={handleCancel}
-                onSubmit={onSubmit}
-                setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
                 onDelete={onDelete}
                 onDiscardUnsavedChanges={onDiscardUnsavedChanges}
+                onSubmit={onSubmit}
+                selectedTemplateInstance={template}
+                setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
             />
         </AutofillContextProvider>
     );

diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx
@@ -34,8 +34,9 @@ import { type WithLoggerProps } from '../../common/types/logging';
 
 import messages from '../common/messages';
 import './MetadataSidebarRedesign.scss';
-import MetadataInstanceEditor from './MetadataInstanceEditor';
+import MetadataInstanceEditor, { MetadataInstanceEditorProps } from './MetadataInstanceEditor';
 import { convertTemplateToTemplateInstance } from './utils/convertTemplateToTemplateInstance';
+import { isExtensionSupportedForMetadataSuggestions } from './utils/isExtensionSupportedForMetadataSuggestions';
 
 const MARK_NAME_JS_READY = `${ORIGIN_METADATA_SIDEBAR_REDESIGN}_${EVENT_JS_READY}`;
 
@@ -172,6 +173,14 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna
     const showEmptyState = !showLoading && showTemplateInstances && templateInstances.length === 0 && !editingTemplate;
     const showEditor = !showEmptyState && editingTemplate;
     const showList = !showEditor && templateInstances.length > 0 && !editingTemplate;
+    const areAiSuggestionsAvailable = isExtensionSupportedForMetadataSuggestions(file?.extension ?? '');
+    const fetchSuggestions = React.useCallback<MetadataInstanceEditorProps['fetchSuggestions']>(
+        async (templateKey, fields) => {
+            // should use getIntelligenceAPI().extractStructured
+            return fields;
+        },
+        [],
+    );
 
     return (
         <SidebarContent
@@ -189,15 +198,17 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna
                 )}
                 {editingTemplate && (
                     <MetadataInstanceEditor
+                        areAiSuggestionsAvailable={areAiSuggestionsAvailable}
+                        fetchSuggestions={fetchSuggestions}
                         isBoxAiSuggestionsEnabled={isBoxAiSuggestionsEnabled}
                         isDeleteButtonDisabled={isDeleteButtonDisabled}
                         isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
                         onCancel={handleCancel}
+                        onDelete={handleDeleteInstance}
                         onDiscardUnsavedChanges={handleDiscardUnsavedChanges}
                         onSubmit={handleSubmit}
-                        onDelete={handleDeleteInstance}
-                        template={editingTemplate}
                         setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
+                        template={editingTemplate}
                     />
                 )}
                 {showList && (

diff --git a/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx b/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx
@@ -49,15 +49,17 @@ describe('MetadataInstanceEditor', () => {
     };
 
     const defaultProps: MetadataInstanceEditorProps = {
+        areAiSuggestionsAvailable: true,
+        fetchSuggestions: jest.fn(),
         isBoxAiSuggestionsEnabled: true,
         isDeleteButtonDisabled: false,
         isUnsavedChangesModalOpen: false,
-        template: mockMetadataTemplate,
         onCancel: mockOnCancel,
         onDelete: jest.fn(),
+        onDiscardUnsavedChanges: mockOnDiscardUnsavedChanges,
         onSubmit: jest.fn(),
         setIsUnsavedChangesModalOpen: mockSetIsUnsavedChangesModalOpen,
-        onDiscardUnsavedChanges: mockOnDiscardUnsavedChanges,
+        template: mockMetadataTemplate,
     };
 
     test('should render MetadataInstanceForm with correct props', () => {

diff --git a/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx b/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx
@@ -339,7 +339,7 @@ export const SwitchEditingTemplateInstances: StoryObj<typeof MetadataSidebarRede
         expect(templateMetadataOptionBAfterSwitch).toHaveAttribute('aria-disabled');
     },
 };
-    
+
 export const MetadataInstanceEditorAIEnabled: StoryObj<typeof MetadataSidebarRedesign> = {
     args: {
         features: {

diff --git a/src/elements/content-sidebar/utils/isExtensionSupportedForMetadataSuggestions.ts b/src/elements/content-sidebar/utils/isExtensionSupportedForMetadataSuggestions.ts
@@ -0,0 +1,88 @@
+/**
+ * @file Metadata suggestions supported extensions
+ * @author Box
+ */
+
+const SUPPORTED_FILE_EXTENSIONS = new Set([
+    // Text-Based Documents
+    'as',
+    'as3',
+    'asm',
+    'bat',
+    'c',
+    'cc',
+    'cmake',
+    'cpp',
+    'cs',
+    'css',
+    'csv',
+    'cxx',
+    'diff',
+    'doc',
+    'docx',
+    'erb',
+    'gdoc',
+    'groovy',
+    'gsheet',
+    'h',
+    'haml',
+    'hh',
+    'htm',
+    'html',
+    'java',
+    'js',
+    'json',
+    'less',
+    'log',
+    'm',
+    'make',
+    'md',
+    'ml',
+    'mm',
+    'msg',
+    'ods',
+    'odt',
+    'pages',
+    'pdf',
+    'php',
+    'pl',
+    'properties',
+    'py',
+    'rb',
+    'rst',
+    'rtf',
+    'sass',
+    'scala',
+    'scm',
+    'script',
+    'sh',
+    'sml',
+    'sql',
+    'txt',
+    'vi',
+    'vim',
+    'webdoc',
+    'wpd',
+    'xhtml',
+    'xls',
+    'xlsb',
+    'xlsm',
+    'xlsx',
+    'xml',
+    'xsd',
+    'xsl',
+    'xbd',
+    'xdw',
+    'yaml',
+    // Presentations
+    'gslide',
+    'gslides',
+    'key',
+    'odp',
+    'ppt',
+    'pptx',
+]);
+
+export function isExtensionSupportedForMetadataSuggestions(extension: string): boolean {
+    return SUPPORTED_FILE_EXTENSIONS.has(extension);
+}
diff --git a/src/test-utils/testing-library.tsx b/src/test-utils/testing-library.tsx
@@ -9,8 +9,16 @@ import { FeatureProvider } from '../elements/common/feature-checking';
 
 jest.unmock('react-intl');
 
-const Wrapper = ({ children, features = {}, isAiSuggestionsFeatureEnabled = false, fetchSuggestions = () => Promise.resolve([]) }) => (
-    <AutofillContextProvider isAiSuggestionsFeatureEnabled={isAiSuggestionsFeatureEnabled} fetchSuggestions={fetchSuggestions}>
+const Wrapper = ({
+    children,
+    features = {},
+    isAiSuggestionsFeatureEnabled = false,
+    fetchSuggestions = () => Promise.resolve([]),
+}) => (
+    <AutofillContextProvider
+        isAiSuggestionsFeatureEnabled={isAiSuggestionsFeatureEnabled}
+        fetchSuggestions={fetchSuggestions}
+    >
         <FeatureProvider features={features}>
             <TooltipProvider>
                 <IntlProvider locale="en">{children}</IntlProvider>