chore(content-sidebar): Temporarily remove files

while we be working with not yet publish internal library.
Will remove this commit after the library will become publicly
available on NPM and added to BUIE.

feat(metadata-sidebar): MetadataEmptyState

feat(metadata-sidebar): comment api to pass test

feat(metadata-sidebar): uncomment comments

feat(metadata-sidebar): add states

feat(metadata-sidebar): tests update

feat(metadata-sidebar): PR comments

feat(metadata-sidebar): delete git add . in showEditor

feat(metadata-sidebar): PR comments

feat(metadata-sidebar): storybook tests

feat(metadata-sidebar): update unit tests

feat(metadata-sidebar): pr comments

feat(metadata-sidebar): variables name changes

feat(metadata-sidebar): PR comments

feat(metadata-sidebar): PR comments

feat(metadata-sidebar): global token change  and status enum

feat(metadata-sidebar): global token update

feat(metadata-sidebar): global variables and enum upper case change

feat(metadata-sidebar): PR comments

feat(metadata-sidebar): styles import and title deletion

feat(metadata-sidebar): convert type to interface

src/elements/content-sidebar/MetadataSidebarRedesign.tsx

@@ -10,6 +10,7 @@ import { AddMetadataTemplateDropdown } 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';
@@ -31,6 +32,7 @@ const MARK_NAME_JS_READY = `${ORIGIN_METADATA_SIDEBAR_REDESIGN}_${EVENT_JS_READY
 mark(MARK_NAME_JS_READY);
 
 export interface ExternalProps {
+    isBoxAiSuggestionsEnabled: boolean;
     isFeatureEnabled: boolean;
 }
 
@@ -53,12 +55,12 @@ export interface MetadataSidebarRedesignProps extends PropsWithoutContext, Error
     api: API;
 }
 
-function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEnabled }: MetadataSidebarRedesignProps) {
+function MetadataSidebarRedesign({ api, elementId, fileId,isBoxAiSuggestionsEnabled, onError, isFeatureEnabled }: MetadataSidebarRedesignProps) {
     const { formatMessage } = useIntl();
 
     const [selectedTemplates, setSelectedTemplates] = React.useState<Array<MetadataTemplate>>([]);
 
-    const { 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
@@ -76,6 +78,9 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna
         </InlineError>
     );
 
+    const showEditor = file && templates && editors;
+    const showEmptyState = showEditor && editors.length === 0;
+
     return (
         <SidebarContent
             actions={metadataDropdown}
@@ -90,7 +95,11 @@ function MetadataSidebarRedesign({ api, elementId, fileId, onError, isFeatureEna
                     <LoadingIndicator aria-label={formatMessage(messages.loading)} data-testid="loading" />
                 )}
             </div>
+            {showEmptyState && (
+                <MetadataEmptyState level={'file'} isBoxAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled} />
+            )}
         </SidebarContent>
+
     );
 }
 

src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts

@@ -4,7 +4,7 @@ import { type MessageDescriptor } from 'react-intl';
 import API from '../../../api';
 import { type ElementsXhrError } from '../../../common/types/api';
 import { isUserCorrectableError } from '../../../utils/error';
-import { FIELD_IS_EXTERNALLY_OWNED, FIELD_PERMISSIONS, FIELD_PERMISSIONS_CAN_UPLOAD } from '../../../constants';
+import { FIELD_IS_EXTERNALLY_OWNED, FIELD_PERMISSIONS, FIELD_PERMISSIONS_CAN_UPLOAD, IS_ERROR_DISPLAYED} from '../../../constants';
 
 import messages from '../../common/messages';
 
@@ -19,9 +19,10 @@ export enum STATUS {
     SUCCESS = 'success',
 }
 interface DataFetcher {
-    status: STATUS;
+    editors: Array<MetadataEditor>;
     file: BoxItem | null;
     errorMessage: MessageDescriptor | null;
+    status: STATUS;
     templates: Array<MetadataTemplate>;
 }
 
@@ -35,6 +36,7 @@ function useSidebarMetadataFetcher(
     const [file, setFile] = React.useState<BoxItem>(null);
     const [templates, setTemplates] = React.useState(null);
     const [errorMessage, setErrorMessage] = React.useState<MessageDescriptor | null>(null);
+    const [editors, setEditors] = React.useState<Array<MetadataEditor>>([]);
 
     const onApiError = React.useCallback(
         (error: ElementsXhrError, code: string, message: MessageDescriptor) => {
@@ -51,7 +53,8 @@ function useSidebarMetadataFetcher(
     );
 
     const fetchMetadataSuccessCallback = React.useCallback(
-        ({ templates: fetchedTemplates }: { editors: Array<MetadataEditor>; templates: Array<MetadataTemplate> }) => {
+        ({ editors: fetchedEditors, templates: fetchedTemplates }: { editors: Array<MetadataEditor>; templates: Array<MetadataTemplate> }) => {
+            setEditors(fetchedEditors);
             setErrorMessage(null);
             setStatus(STATUS.SUCCESS);
             setTemplates(fetchedTemplates);
@@ -61,6 +64,7 @@ function useSidebarMetadataFetcher(
 
     const fetchMetadataErrorCallback = React.useCallback(
         (e: ElementsXhrError, code: string) => {
+            setEditors(null);
             setTemplates(null);
             onApiError(e, code, messages.sidebarMetadataFetchingErrorContent);
         },
@@ -115,9 +119,10 @@ function useSidebarMetadataFetcher(
     }, [api, fetchFileErrorCallback, fetchFileSuccessCallback, fileId, status]);
 
     return {
-        status,
         file,
+        editors,
         errorMessage,
+        status,
         templates,
     };
 }

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

@@ -1,10 +1,11 @@
 import { type StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { type ComponentProps } from 'react';
+import React, { type ComponentProps } from 'react';
 import MetadataSidebarRedesign from '../MetadataSidebarRedesign';
 import ContentSidebar from '../ContentSidebar';
 
 const fileIdWithMetadata = global.FILE_ID;
+const fileIdWithNoMetadata = '416047501580';
 const mockFeatures = {
     'metadata.redesign.enabled': true,
 };
@@ -15,6 +16,7 @@ const mockLogger = {
 };
 
 const defaultMetadataSidebarProps: ComponentProps<typeof MetadataSidebarRedesign> = {
+    isBoxAiSuggestionsEnabled: true,
     isFeatureEnabled: true,
     onError: fn,
 };
@@ -30,6 +32,27 @@ export default {
         token: global.TOKEN,
         metadataSidebarProps: defaultMetadataSidebarProps,
     },
+    render: args => {
+        return <ContentSidebar {...args} />;
+    },
 };
 
 export const AddTemplateDropdownMenu: StoryObj<typeof MetadataSidebarRedesign> = {};
+
+export const EmptyStateWithBoxAiEnabled: StoryObj<typeof MetadataSidebarRedesign> = {
+    args: {
+        fileId: fileIdWithNoMetadata,
+        metadataSidebarProps: {
+            ...defaultMetadataSidebarProps,
+        },
+    },};
+
+export const EmptyStateWithBoxAiDisabled: StoryObj<typeof MetadataSidebarRedesign> = {
+    args: {
+        fileId: fileIdWithNoMetadata,
+        metadataSidebarProps: {
+            ...defaultMetadataSidebarProps,
+            isBoxAiSuggestionsEnabled: false,
+        },
+    },
+};