feat(metadata-editor): show empty state if there's no visible instanc…

…es (#3770) feat(metdata-editor): show empty state if there's no visible instances
box · Dec 4, 2024 · f8cdfff · f8cdfff
1 parent bd9d44a
commit f8cdfff
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx
@@ -167,12 +167,13 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna
         </InlineError>
     );
 
-    const showTemplateInstances = file && templates && templateInstances;
+    const isFullyLoaded = file && templates && templateInstances;
+    const visibleTemplateInstances = templateInstances.filter(templateInstance => !templateInstance.hidden);
 
     const showLoading = status === STATUS.LOADING;
-    const showEmptyState = !showLoading && showTemplateInstances && templateInstances.length === 0 && !editingTemplate;
+    const showEmptyState = !showLoading && isFullyLoaded && visibleTemplateInstances.length === 0 && !editingTemplate;
     const showEditor = !showEmptyState && editingTemplate;
-    const showList = !showEditor && templateInstances.length > 0 && !editingTemplate;
+    const showList = !showEditor && visibleTemplateInstances.length > 0 && !editingTemplate;
     const areAiSuggestionsAvailable = isExtensionSupportedForMetadataSuggestions(file?.extension ?? '');
 
     const taxonomyOptionsFetcher = async (

diff --git a/src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx b/src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx
@@ -49,6 +49,28 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         type: 'properties',
     } satisfies MetadataTemplateInstance;
 
+    const mockVisibleTemplateInstance = {
+        displayName: 'Visible Template',
+        canEdit: true,
+        hidden: false,
+        fields: [],
+        id: 'visible_template',
+        scope: 'global',
+        templateKey: 'visibleTemplate',
+        type: 'metadata_template',
+    } satisfies MetadataTemplateInstance;
+
+    const mockHiddenTemplateInstance = {
+        displayName: 'Hidden Template',
+        canEdit: true,
+        hidden: true,
+        fields: [],
+        id: 'hidden_template',
+        scope: 'global',
+        templateKey: 'hiddenTemplate',
+        type: 'metadata_template',
+    } satisfies MetadataTemplateInstance;
+
     const mockFile = {
         id: '123',
         permissions: { [FIELD_PERMISSIONS_CAN_UPLOAD]: true },
@@ -176,13 +198,35 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         ).toBeInTheDocument();
     });
 
+    test('should render empty state when no visible template instances are present', () => {
+        mockUseSidebarMetadataFetcher.mockReturnValue({
+            extractSuggestions: jest.fn(),
+            handleCreateMetadataInstance: jest.fn(),
+            handleDeleteMetadataInstance: jest.fn(),
+            handleUpdateMetadataInstance: jest.fn(),
+            templateInstances: [mockHiddenTemplateInstance],
+            templates: mockTemplates,
+            errorMessage: null,
+            status: STATUS.SUCCESS,
+            file: mockFile,
+        });
+
+        renderComponent();
+
+        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();
+        expect(screen.queryByRole('heading', { level: 4, name: 'Hidden Template' })).not.toBeInTheDocument();
+    });
+
     test('should render metadata instance list when templates are present', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
             extractSuggestions: jest.fn(),
             handleCreateMetadataInstance: jest.fn(),
             handleDeleteMetadataInstance: jest.fn(),
             handleUpdateMetadataInstance: jest.fn(),
-            templateInstances: [mockCustomTemplateInstance],
+            templateInstances: [mockCustomTemplateInstance, mockVisibleTemplateInstance],
             templates: mockTemplates,
             errorMessage: null,
             status: STATUS.SUCCESS,
@@ -195,5 +239,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         expect(screen.getByRole('heading', { level: 4, name: 'Custom Metadata' })).toBeInTheDocument();
         expect(screen.getByText(mockCustomTemplateInstance.fields[0].key)).toBeInTheDocument();
         expect(screen.getByText(mockCustomTemplateInstance.fields[1].key)).toBeInTheDocument();
+
+        expect(screen.getByRole('heading', { level: 4, name: 'Visible Template' })).toBeInTheDocument();
     });
 });