fix(metadata-sidebar): Fix metadata sidebar ai capabilities (#3681)

* fix(metadata-sidebar): Check if AI Suggestion are enabled feature

* fix(metadata-sidebar): Fix storybook test

* fix(metadata-sidebar): Spread mockFeatures instead of duplication

Co-authored-by: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com>

* feat(metadata-sidebar): Select only one button as only one is used

* feat(metadata-sidebar): Add FeatureProvider to test-utils

---------

Co-authored-by: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com>

Author: jankowiakdawid

src/elements/content-sidebar/MetadataSidebarRedesign.tsx

@@ -24,6 +24,7 @@ import { withErrorBoundary } from '../common/error-boundary';
 import { withLogger } from '../common/logger';
 import { ORIGIN_METADATA_SIDEBAR_REDESIGN, SIDEBAR_VIEW_METADATA } from '../../constants';
 import { EVENT_JS_READY } from '../common/logger/constants';
+import { useFeatureEnabled } from '../common/feature-checking';
 import { mark } from '../../utils/performance';
 import useSidebarMetadataFetcher, { STATUS } from './hooks/useSidebarMetadataFetcher';
 
@@ -41,7 +42,6 @@ const MARK_NAME_JS_READY = `${ORIGIN_METADATA_SIDEBAR_REDESIGN}_${EVENT_JS_READY
 mark(MARK_NAME_JS_READY);
 
 export interface ExternalProps {
-    isBoxAiSuggestionsEnabled: boolean;
     isFeatureEnabled: boolean;
 }
 
@@ -64,14 +64,7 @@ export interface MetadataSidebarRedesignProps extends PropsWithoutContext, Error
     api: API;
 }
 
-function MetadataSidebarRedesign({
-    api,
-    elementId,
-    fileId,
-    isBoxAiSuggestionsEnabled,
-    onError,
-    isFeatureEnabled,
-}: MetadataSidebarRedesignProps) {
+function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEnabled }: MetadataSidebarRedesignProps) {
     const {
         file,
         handleCreateMetadataInstance,
@@ -84,6 +77,7 @@ function MetadataSidebarRedesign({
     } = useSidebarMetadataFetcher(api, fileId, onError, isFeatureEnabled);
 
     const { formatMessage } = useIntl();
+    const isBoxAiSuggestionsEnabled: boolean = useFeatureEnabled('metadata.aiSuggestions.enabled');
 
     const [editingTemplate, setEditingTemplate] = React.useState<MetadataTemplateInstance | null>(null);
     const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = React.useState<boolean>(false);

src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx

@@ -54,17 +54,16 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         permissions: { [FIELD_PERMISSIONS_CAN_UPLOAD]: true },
     };
 
-    const renderComponent = (props = {}) => {
+    const renderComponent = (props = {}, features = {}) => {
         const defaultProps = {
             api: {},
             fileId: 'test-file-id-1',
             elementId: 'element-1',
-            isBoxAiSuggestionsEnabled: true,
             isFeatureEnabled: true,
             onError: jest.fn(),
         } satisfies MetadataSidebarRedesignProps;
 
-        render(<MetadataSidebarRedesign {...defaultProps} {...props} />);
+        render(<MetadataSidebarRedesign {...defaultProps} {...props} />, { wrapperProps: { features } });
     };
 
     beforeEach(() => {
@@ -154,7 +153,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
     });
 
     test('should correctly render empty state when AI feature is enabled', () => {
-        renderComponent();
+        renderComponent({}, { 'metadata.aiSuggestions.enabled': true });
         expect(screen.getByRole('heading', { level: 2, name: 'Autofill Metadata with Box AI' })).toBeInTheDocument();
         expect(
             screen.getByText(

src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -15,7 +15,6 @@ const defaultMetadataArgs = {
     onError: fn,
 };
 const defaultMetadataSidebarProps: ComponentProps<typeof MetadataSidebarRedesign> = {
-    isBoxAiSuggestionsEnabled: true,
     isFeatureEnabled: true,
     onError: fn,
 };
@@ -139,6 +138,10 @@ export const EmptyStateWithBoxAiEnabled: StoryObj<typeof MetadataSidebarRedesign
         metadataSidebarProps: {
             ...defaultMetadataSidebarProps,
         },
+        features: {
+            ...mockFeatures,
+            'metadata.aiSuggestions.enabled': true,
+        },
     },
 };
 
@@ -188,7 +191,9 @@ export const MetadataInstanceEditorCancelChanges: StoryObj<typeof MetadataSideba
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        const editButtons = await canvas.findAllByRole('button', { name: 'Edit' }, { timeout: 5000 });
+        // Edit buttons contains also template name
+        const editButton = await canvas.findByRole('button', { name: 'Edit My Template' }, { timeout: 5000 });
+        expect(editButton).toBeInTheDocument();
 
         let headlines = await canvas.findAllByRole('heading', { level: 1 });
         expect(headlines).toHaveLength(3);
@@ -197,7 +202,7 @@ export const MetadataInstanceEditorCancelChanges: StoryObj<typeof MetadataSideba
         );
 
         // go to edit mode - only edited template is visible
-        await userEvent.click(editButtons[0]);
+        await userEvent.click(editButton);
 
         headlines = await canvas.findAllByRole('heading', { level: 1 });
         expect(headlines).toHaveLength(1);
@@ -286,7 +291,6 @@ export const SwitchEditingTemplateInstances: StoryObj<typeof MetadataSidebarRede
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-
         // open and edit a new template
         const addTemplateButton = await canvas.findByRole('button', { name: 'Add template' }, { timeout: 5000 });
 
@@ -335,3 +339,28 @@ export const SwitchEditingTemplateInstances: StoryObj<typeof MetadataSidebarRede
         expect(templateMetadataOptionBAfterSwitch).toHaveAttribute('aria-disabled');
     },
 };
+    
+export const MetadataInstanceEditorAIEnabled: StoryObj<typeof MetadataSidebarRedesign> = {
+    args: {
+        features: {
+            ...mockFeatures,
+            'metadata.aiSuggestions.enabled': true,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const autofillWithBoxAI = await canvas.findAllByRole(
+            'button',
+            { name: /Autofill .+ with Box AI/ },
+            { timeout: 5000 },
+        );
+        expect(autofillWithBoxAI).toHaveLength(2);
+
+        const editButton = await canvas.findByRole('button', { name: 'Edit My Template' });
+        userEvent.click(editButton);
+
+        const autofillButton = await canvas.findByRole('button', { name: 'Autofill' });
+        expect(autofillButton).toBeInTheDocument();
+    },
+};

src/test-utils/testing-library.tsx

@@ -1,22 +1,30 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, type RenderOptions } from '@testing-library/react';
 
 // Data Providers
 import { TooltipProvider } from '@box/blueprint-web';
 import { IntlProvider } from 'react-intl';
 import { AutofillContextProvider } from '@box/metadata-editor';
+import { FeatureProvider } from '../elements/common/feature-checking';
 
 jest.unmock('react-intl');
 
-const Wrapper = ({ children }) => (
-    <AutofillContextProvider isAiSuggestionsFeatureEnabled={false} fetchSuggestions={() => Promise.resolve([])}>
-        <TooltipProvider>
-            <IntlProvider locale="en">{children}</IntlProvider>
-        </TooltipProvider>
+const Wrapper = ({ children, features = {}, isAiSuggestionsFeatureEnabled = false, fetchSuggestions = () => Promise.resolve([]) }) => (
+    <AutofillContextProvider isAiSuggestionsFeatureEnabled={isAiSuggestionsFeatureEnabled} fetchSuggestions={fetchSuggestions}>
+        <FeatureProvider features={features}>
+            <TooltipProvider>
+                <IntlProvider locale="en">{children}</IntlProvider>
+            </TooltipProvider>
+        </FeatureProvider>
     </AutofillContextProvider>
 );
 
-const renderConnected = (element, options = {}) => render(element, { wrapper: Wrapper, ...options });
+type RenderConnectedOptions = Omit<RenderOptions, 'wrapper'> & {
+    wrapperProps?: Record<string, unknown>;
+};
+
+const renderConnected = (element, options: RenderConnectedOptions = {}) =>
+    render(element, { wrapper: props => <Wrapper {...props} {...options.wrapperProps} />, ...options });
 
 export * from '@testing-library/react';
 export { renderConnected as render };