feat(metadata-sidebar): missing tests after rebase

box · Aug 26, 2024 · 8a27b2c · 8a27b2c
1 parent 22d0120
commit 8a27b2c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.scss b/src/elements/content-sidebar/MetadataSidebarRedesign.scss
@@ -4,6 +4,11 @@
     border-left: 1px solid $gray-10;
 
     .bcs-MetadataSidebarRedesign-content {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         padding: $space-2;
         background-color: $gray-02;
     }

diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx
@@ -6,11 +6,10 @@ import * as React from 'react';
 import flow from 'lodash/flow';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { InlineError, LoadingIndicator } from '@box/blueprint-web';
-import { AddMetadataTemplateDropdown } from '@box/metadata-editor';
+import { AddMetadataTemplateDropdown , MetadataEmptyState } from '@box/metadata-editor';
 
 import API from '../../api';
 import SidebarContent from './SidebarContent';
-import { MetadataEmptyState } from '@box/metadata-editor';
 import { withAPIContext } from '../common/api-context';
 import { withErrorBoundary } from '../common/error-boundary';
 import { withLogger } from '../common/logger';
@@ -55,12 +54,24 @@ export interface MetadataSidebarRedesignProps extends PropsWithoutContext, Error
     api: API;
 }
 
-function MetadataSidebarRedesign({ api, elementId, fileId,isBoxAiSuggestionsEnabled, onError, isFeatureEnabled }: MetadataSidebarRedesignProps) {
+function MetadataSidebarRedesign({
+    api,
+    elementId,
+    fileId,
+    isBoxAiSuggestionsEnabled,
+    onError,
+    isFeatureEnabled,
+}: MetadataSidebarRedesignProps) {
     const { formatMessage } = useIntl();
 
     const [selectedTemplates, setSelectedTemplates] = React.useState<Array<MetadataTemplate>>([]);
 
-    const {editors, file, templates, errorMessage, status } = useSidebarMetadataFetcher(api, fileId, onError, isFeatureEnabled);
+    const { editors, file, templates, errorMessage, status } = useSidebarMetadataFetcher(
+        api,
+        fileId,
+        onError,
+        isFeatureEnabled,
+    );
 
     const metadataDropdown = status === STATUS.SUCCESS && templates && (
         <AddMetadataTemplateDropdown
@@ -94,12 +105,11 @@ function MetadataSidebarRedesign({ api, elementId, fileId,isBoxAiSuggestionsEnab
                 {status === STATUS.LOADING && (
                     <LoadingIndicator aria-label={formatMessage(messages.loading)} data-testid="loading" />
                 )}
+                {showEmptyState && (
+                    <MetadataEmptyState level={'file'} isBoxAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled} />
+                )}
             </div>
-            {showEmptyState && (
-                <MetadataEmptyState level={'file'} isBoxAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled} />
-            )}
         </SidebarContent>
-
     );
 }
 

diff --git a/src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx b/src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx
@@ -33,6 +33,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             api: {},
             fileId: 'test-file-id-1',
             elementId: 'element-1',
+            isBoxAiSuggestionsEnabled: true,
             isFeatureEnabled: true,
             onError: jest.fn(),
         } satisfies MetadataSidebarRedesignProps;
@@ -43,6 +44,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
     beforeEach(() => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
             templates: mockTemplates,
+            editors: [],
             errorMessage: null,
             status: STATUS.SUCCESS,
             file: mockFile,
@@ -83,6 +85,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render metadata sidebar with error', async () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            editors: [],
             templates: [],
             errorMessage: {
                 id: 'error',
@@ -101,6 +104,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
 
     test('should render metadata sidebar with loading indicator', async () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
+            editors: [],
             templates: [],
             errorMessage: null,
             status: STATUS.LOADING,
@@ -113,4 +117,22 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         expect(screen.getByTestId('loading')).toBeInTheDocument();
         expect(screen.getByRole('status', { name: 'Loading' })).toBeInTheDocument();
     });
+
+    test('should correctly render empty state when AI feature is enabled', () => {
+        renderComponent();
+        expect(screen.getByRole('heading', { level: 2, name: 'Autofill Metadata with Box AI' })).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'Use the power of Box AI to quickly capture document metadata, with ever-increasing accuracy.',
+            ),
+        ).toBeInTheDocument();
+    });
+
+    test('should correctly render empty state when AI feature is disabled', () => {
+        renderComponent({ isBoxAiSuggestionsEnabled: false });
+        expect(screen.getByRole('heading', { level: 2, name: 'Add Metadata Templates' })).toBeInTheDocument();
+        expect(
+            screen.getByText('Add Metadata to your file to support business operations, workflows, and more!'),
+        ).toBeInTheDocument();
+    });
 });