fix(metadata-editor): Fix AI suggestion for newly created instance (#…

…3791) * fix(metadata-editor): Fix AI suggestion for newly created instance * fix(metadata-editor): Fix AI suggestion for newly created instance
box · Dec 13, 2024 · f165d24 · f165d24
1 parent 2cc1986
commit f165d24
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 20 deletions.
diff --git a/src/elements/content-sidebar/__tests__/useSidebarMetadataFetcher.test.tsx b/src/elements/content-sidebar/__tests__/useSidebarMetadataFetcher.test.tsx
@@ -19,15 +19,6 @@ const mockFile = {
 };
 
 const mockTemplates = [
-    {
-        id: 'metadata_template_custom_1',
-        scope: 'global',
-        templateKey: 'properties',
-        hidden: false,
-    },
-];
-
-const mockTemplateInstances = [
     {
         canEdit: true,
         id: 'metadata_template_instance_1',
@@ -45,9 +36,16 @@ const mockTemplateInstances = [
         ],
         scope: 'global',
         templateKey: 'templateKey',
-        type: 'properties',
+    },
+    {
+        id: 'metadata_template_custom_1',
+        scope: 'global',
+        templateKey: 'properties',
         hidden: false,
     },
+];
+
+const mockTemplateInstances = [
     {
         canEdit: true,
         id: 'metadata_template_instance_2',
@@ -331,13 +329,13 @@ describe('useSidebarMetadataFetcher', () => {
 
             const { result } = setupHook();
 
-            expect(result.current.templateInstances).toEqual(mockTemplateInstances);
+            expect(result.current.templates).toEqual(mockTemplates);
 
             const suggestions = await result.current.extractSuggestions('templateKey', 'global');
 
             expect(suggestions).toEqual([
-                { ...mockTemplateInstances[0].fields[0], aiSuggestion: 'value1' },
-                { ...mockTemplateInstances[0].fields[1], aiSuggestion: 'value2' },
+                { ...mockTemplates[0].fields[0], aiSuggestion: 'value1' },
+                { ...mockTemplates[0].fields[1], aiSuggestion: 'value2' },
             ]);
         });
 

diff --git a/src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts b/src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts
@@ -79,9 +79,9 @@ function useSidebarMetadataFetcher(
 
     const fetchMetadataSuccessCallback = React.useCallback(
         ({
-             templates: fetchedTemplates,
-             templateInstances: fetchedTemplateInstances,
-         }: {
+            templates: fetchedTemplates,
+            templateInstances: fetchedTemplateInstances,
+        }: {
             templates: Array<MetadataTemplate>;
             templateInstances: Array<MetadataTemplateInstance>;
         }) => {
@@ -225,9 +225,7 @@ function useSidebarMetadataFetcher(
                 return [];
             }
 
-            const templateInstance = templateInstances.find(
-                template => template.templateKey === templateKey && template.scope,
-            );
+            const templateInstance = templates.find(template => template.templateKey === templateKey && template.scope);
             const fields = templateInstance?.fields || [];
             return fields.map(field => {
                 const value = answer[field.key];
@@ -241,7 +239,7 @@ function useSidebarMetadataFetcher(
                 };
             });
         },
-        [api, file, onError, templateInstances],
+        [api, file, onError, templates],
     );
 
     React.useEffect(() => {

diff --git a/src/elements/content-sidebar/stories/__mocks__/MetadataSidebarRedesignedMocks.ts b/src/elements/content-sidebar/stories/__mocks__/MetadataSidebarRedesignedMocks.ts
@@ -313,6 +313,24 @@ export const mockEnterpriseMetadataTemplates = {
                     },
                 ],
             },
+            {
+                id: 'dc864980-9e7f-45ca-9c8a-454367642fsdf3',
+                type: 'metadata_template',
+                templateKey: 'date_template',
+                scope: 'enterprise_173733877',
+                displayName: 'Date Template',
+                hidden: false,
+                copyInstanceOnItemCopy: false,
+                fields: [
+                    {
+                        id: 'ffbca749-771b-4399-8c93-4534fsdgs3423',
+                        type: 'date',
+                        key: 'dateField',
+                        displayName: 'Date Field',
+                        hidden: false,
+                    },
+                ],
+            },
         ],
         next_marker: null,
         prev_marker: null,
@@ -341,6 +359,13 @@ export const aiSuggestionsForMyAttribute = {
     },
 };
 
+export const aiSuggestionForDateField = {
+    url: `${apiV2Path}/ai/extract_structured`,
+    response: {
+        dateField: '2024-04-01T00:00:00Z',
+    },
+};
+
 export const mockErrorDeleteMyTemplateMetadataRequest = {
     url: 'https://api.box.com/2.0/files/415542803939/metadata/enterprise_173733877/myTemplate',
     response: {

diff --git a/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx b/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx
@@ -6,6 +6,7 @@ import { defaultVisualConfig } from '../../../../utils/storybook';
 import ContentSidebar from '../../ContentSidebar';
 import MetadataSidebarRedesign from '../../MetadataSidebarRedesign';
 import {
+    aiSuggestionForDateField,
     aiSuggestionsForMyAttribute,
     fileIdWithMetadata,
     fileIdWithoutMetadata,
@@ -479,6 +480,44 @@ export const SuggestionsWhenAIAPIResponses: StoryObj<typeof MetadataSidebarRedes
     },
 };
 
+export const SuggestionForNewlyCreatedTemplateInstance: StoryObj<typeof MetadataSidebarRedesign> = {
+    args: {
+        features: {
+            ...mockFeatures,
+            'metadata.aiSuggestions.enabled': true,
+        },
+    },
+    parameters: {
+        ...defaultVisualConfig.parameters,
+        msw: {
+            handlers: [
+                ...defaultMockHandlers,
+                http.post(aiSuggestionsForMyAttribute.url, () => HttpResponse.json(aiSuggestionForDateField.response)),
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const addTemplateButton = await canvas.findByRole('button', { name: 'Add template' });
+        expect(addTemplateButton).toBeInTheDocument();
+        await userEvent.click(addTemplateButton);
+
+        const customMetadataOption = canvas.getByRole('option', { name: 'Date Template' });
+        expect(customMetadataOption).toBeInTheDocument();
+        await userEvent.click(customMetadataOption);
+
+        const templateHeader = await canvas.findByRole('heading', { name: 'Date Template' });
+        expect(templateHeader).toBeInTheDocument();
+
+        const autofillButton = await canvas.findByRole('button', { name: 'Autofill' });
+        userEvent.click(autofillButton);
+
+        const suggestion = await canvas.findByText('4/1/2024');
+        expect(suggestion).toBeInTheDocument();
+    },
+};
+
 export const ShowErrorOnDelete: StoryObj<typeof MetadataSidebarRedesign> = {
     parameters: {
         ...defaultVisualConfig.parameters,