feat(content-sidebar): Add placehoder metadatasidebar redesigned (#3570)

* feat(content-sidebar): Introduce redesigned MetadataSidebar placeholder In this new placeholder component we will be composing new experience from new components from shared-feature * feat(content-sidebar): Use isFeatureEnabled utility * feat(content-sidebar): Remove lint disabling comments * feat(content-sidebar): Rename component to MetadataSidebarRedesign * feat(content-sidebar): Rename constant value to match it's name Also use constant in mock to show they connected * feat(content-sidebar): Rename class name to follow SUIT naming * feat(content-sidebar): Remove unneeded ref and constant * feat(content-sidebar): Remove unneeded constant * feat(content-sidebar): Add performance mark for MetadataSidebarRedesign
box · Jul 18, 2024 · 6a0d7ee · 6a0d7ee
1 parent c0ff8d7
commit 6a0d7ee
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 11 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -315,6 +315,7 @@ export const ORIGIN_ACTIVITY_SIDEBAR: 'activity_sidebar' = 'activity_sidebar';
 export const ORIGIN_DETAILS_SIDEBAR: 'details_sidebar' = 'details_sidebar';
 export const ORIGIN_DOCGEN_SIDEBAR: 'docgen_sidebar' = 'docgen_sidebar';
 export const ORIGIN_METADATA_SIDEBAR: 'metadata_sidebar' = 'metadata_sidebar';
+export const ORIGIN_METADATA_SIDEBAR_REDESIGN: 'metadata_sidebar_redesign' = 'metadata_sidebar_redesign';
 export const ORIGIN_SKILLS_SIDEBAR: 'skills_sidebar' = 'skills_sidebar';
 export const ORIGIN_VERSIONS_SIDEBAR: 'versions_sidebar' = 'versions_sidebar';
 export const ORIGIN_PREVIEW: 'preview' = 'preview';
@@ -395,6 +396,7 @@ export const REPRESENTATIONS_RESPONSE_VIEWABLE: 'viewable' = 'viewable';
 export const SIDEBAR_VIEW_SKILLS: 'skills' = 'skills';
 export const SIDEBAR_VIEW_DETAILS: 'details' = 'details';
 export const SIDEBAR_VIEW_METADATA: 'metadata' = 'metadata';
+export const SIDEBAR_VIEW_METADATA_REDESIGN: 'metadata_redesign' = 'metadata_redesign';
 export const SIDEBAR_VIEW_ACTIVITY: 'activity' = 'activity';
 export const SIDEBAR_VIEW_VERSIONS: 'versions' = 'versions';
 export const SIDEBAR_VIEW_DOCGEN: 'docgen' = 'docgen';

diff --git a/src/elements/common/flowTypes.js b/src/elements/common/flowTypes.js
@@ -10,6 +10,7 @@ import {
     ORIGIN_ACTIVITY_SIDEBAR,
     ORIGIN_SKILLS_SIDEBAR,
     ORIGIN_METADATA_SIDEBAR,
+    ORIGIN_METADATA_SIDEBAR_REDESIGN,
     ORIGIN_OPEN_WITH,
 } from '../../constants';
 
@@ -44,6 +45,7 @@ type ElementOrigin =
     | typeof ORIGIN_ACTIVITY_SIDEBAR
     | typeof ORIGIN_SKILLS_SIDEBAR
     | typeof ORIGIN_METADATA_SIDEBAR
+    | typeof ORIGIN_METADATA_SIDEBAR_REDESIGN
     | typeof ORIGIN_OPEN_WITH;
 
 type Alignment = 'left' | 'right';

diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.scss b/src/elements/content-sidebar/MetadataSidebarRedesign.scss
@@ -0,0 +1,5 @@
+@import '../common/variables';
+
+.bcs-MetadataSidebarRedesign {
+    padding-inline: 10px;
+}
diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx
@@ -0,0 +1,39 @@
+/**
+ * @file Redesigned Metadata sidebar component
+ * @author Box
+ */
+import * as React from 'react';
+import flow from 'lodash/flow';
+import { FormattedMessage } from 'react-intl';
+import { withAPIContext } from '../common/api-context';
+import { withErrorBoundary } from '../common/error-boundary';
+import { withLogger } from '../common/logger';
+import { ORIGIN_METADATA_SIDEBAR_REDESIGN } from '../../constants';
+import { EVENT_JS_READY } from '../common/logger/constants';
+import { mark } from '../../utils/performance';
+import messages from '../common/messages';
+
+import './MetadataSidebarRedesign.scss';
+
+const MARK_NAME_JS_READY = `${ORIGIN_METADATA_SIDEBAR_REDESIGN}_${EVENT_JS_READY}`;
+
+mark(MARK_NAME_JS_READY);
+
+function MetadataSidebarRedesign() {
+    return (
+        <div className="bcs-MetadataSidebarRedesign">
+            <h3>
+                <FormattedMessage {...messages.sidebarMetadataTitle} />
+            </h3>
+            <hr />
+            <p>Hello from Metadata Sidebar redesign</p>
+        </div>
+    );
+}
+
+export { MetadataSidebarRedesign as MetadataSidebarRedesignComponent };
+export default flow([
+    withLogger(ORIGIN_METADATA_SIDEBAR_REDESIGN),
+    withErrorBoundary(ORIGIN_METADATA_SIDEBAR_REDESIGN),
+    withAPIContext,
+])(MetadataSidebarRedesign);
diff --git a/src/elements/content-sidebar/SidebarPanels.js b/src/elements/content-sidebar/SidebarPanels.js
@@ -11,12 +11,14 @@ import SidebarUtils from './SidebarUtils';
 import withSidebarAnnotations from './withSidebarAnnotations';
 import { withAnnotatorContext } from '../common/annotator-context';
 import { withAPIContext } from '../common/api-context';
+import { withFeatureConsumer, isFeatureEnabled } from '../common/feature-checking';
 import { withRouterAndRef } from '../common/routing';
 import {
     ORIGIN_ACTIVITY_SIDEBAR,
     ORIGIN_DETAILS_SIDEBAR,
     ORIGIN_DOCGEN_SIDEBAR,
     ORIGIN_METADATA_SIDEBAR,
+    ORIGIN_METADATA_SIDEBAR_REDESIGN,
     ORIGIN_SKILLS_SIDEBAR,
     ORIGIN_VERSIONS_SIDEBAR,
     SIDEBAR_VIEW_ACTIVITY,
@@ -25,6 +27,7 @@ import {
     SIDEBAR_VIEW_SKILLS,
     SIDEBAR_VIEW_VERSIONS,
     SIDEBAR_VIEW_DOCGEN,
+    SIDEBAR_VIEW_METADATA_REDESIGN,
 } from '../../constants';
 import type { DetailsSidebarProps } from './DetailsSidebar';
 import type { DocGenSidebarProps } from './DocGenSidebar/DocGenSidebar';
@@ -33,6 +36,7 @@ import type { MetadataSidebarProps } from './MetadataSidebar';
 import type { VersionsSidebarProps } from './versions';
 import type { User, BoxItem } from '../../common/types/core';
 import type { Errors } from '../common/flowTypes';
+import type { FeatureConfig } from '../common/feature-checking';
 
 type Props = {
     activitySidebarProps: ActivitySidebarProps,
@@ -41,6 +45,7 @@ type Props = {
     detailsSidebarProps: DetailsSidebarProps,
     docGenSidebarProps: DocGenSidebarProps,
     elementId: string,
+    features: FeatureConfig,
     file: BoxItem,
     fileId: string,
     getPreview: Function,
@@ -74,6 +79,7 @@ const MARK_NAME_JS_LOADING_DETAILS = `${ORIGIN_DETAILS_SIDEBAR}${BASE_EVENT_NAME
 const MARK_NAME_JS_LOADING_ACTIVITY = `${ORIGIN_ACTIVITY_SIDEBAR}${BASE_EVENT_NAME}`;
 const MARK_NAME_JS_LOADING_SKILLS = `${ORIGIN_SKILLS_SIDEBAR}${BASE_EVENT_NAME}`;
 const MARK_NAME_JS_LOADING_METADATA = `${ORIGIN_METADATA_SIDEBAR}${BASE_EVENT_NAME}`;
+const MARK_NAME_JS_LOADING_METADATA_REDESIGNED = `${ORIGIN_METADATA_SIDEBAR_REDESIGN}${BASE_EVENT_NAME}`;
 const MARK_NAME_JS_LOADING_DOCGEN = `${ORIGIN_DOCGEN_SIDEBAR}${BASE_EVENT_NAME}`;
 const MARK_NAME_JS_LOADING_VERSIONS = `${ORIGIN_VERSIONS_SIDEBAR}${BASE_EVENT_NAME}`;
 
@@ -89,6 +95,10 @@ const LoadableMetadataSidebar = SidebarUtils.getAsyncSidebarContent(
     SIDEBAR_VIEW_METADATA,
     MARK_NAME_JS_LOADING_METADATA,
 );
+const LoadableMetadataSidebarRedesigned = SidebarUtils.getAsyncSidebarContent(
+    SIDEBAR_VIEW_METADATA_REDESIGN,
+    MARK_NAME_JS_LOADING_METADATA,
+);
 const LoadableDocGenSidebar = SidebarUtils.getAsyncSidebarContent(SIDEBAR_VIEW_DOCGEN, MARK_NAME_JS_LOADING_DOCGEN);
 const LoadableVersionsSidebar = SidebarUtils.getAsyncSidebarContent(
     SIDEBAR_VIEW_VERSIONS,
@@ -162,6 +172,7 @@ class SidebarPanels extends React.Component<Props, State> {
             detailsSidebarProps,
             docGenSidebarProps,
             elementId,
+            features,
             file,
             fileId,
             getPreview,
@@ -182,6 +193,8 @@ class SidebarPanels extends React.Component<Props, State> {
 
         const { isInitialized } = this.state;
 
+        const isMetadataSidebarRedesignEnabled = isFeatureEnabled(features, 'metadata.redesign.enabled');
+
         if (!isOpen || (!hasActivity && !hasDetails && !hasMetadata && !hasSkills && !hasVersions)) {
             return null;
         }
@@ -263,16 +276,27 @@ class SidebarPanels extends React.Component<Props, State> {
                     <Route
                         exact
                         path={`/${SIDEBAR_VIEW_METADATA}`}
-                        render={() => (
-                            <LoadableMetadataSidebar
-                                elementId={elementId}
-                                fileId={fileId}
-                                hasSidebarInitialized={isInitialized}
-                                ref={this.metadataSidebar}
-                                startMarkName={MARK_NAME_JS_LOADING_METADATA}
-                                {...metadataSidebarProps}
-                            />
-                        )}
+                        render={() =>
+                            isMetadataSidebarRedesignEnabled ? (
+                                <LoadableMetadataSidebarRedesigned
+                                    elementId={elementId}
+                                    fileId={fileId}
+                                    hasSidebarInitialized={isInitialized}
+                                    ref={this.metadataSidebar}
+                                    startMarkName={MARK_NAME_JS_LOADING_METADATA_REDESIGNED}
+                                    {...metadataSidebarProps}
+                                />
+                            ) : (
+                                <LoadableMetadataSidebar
+                                    elementId={elementId}
+                                    fileId={fileId}
+                                    hasSidebarInitialized={isInitialized}
+                                    ref={this.metadataSidebar}
+                                    startMarkName={MARK_NAME_JS_LOADING_METADATA}
+                                    {...metadataSidebarProps}
+                                />
+                            )
+                        }
                     />
                 )}
                 {hasDocGen && (
@@ -330,4 +354,10 @@ class SidebarPanels extends React.Component<Props, State> {
 }
 
 export { SidebarPanels as SidebarPanelsComponent };
-export default flow([withSidebarAnnotations, withAPIContext, withAnnotatorContext, withRouterAndRef])(SidebarPanels);
+export default flow([
+    withFeatureConsumer,
+    withSidebarAnnotations,
+    withAPIContext,
+    withAnnotatorContext,
+    withRouterAndRef,
+])(SidebarPanels);
diff --git a/src/elements/content-sidebar/SidebarUtils.js b/src/elements/content-sidebar/SidebarUtils.js
@@ -18,6 +18,7 @@ import {
     SIDEBAR_VIEW_DETAILS,
     SIDEBAR_VIEW_VERSIONS,
     SIDEBAR_VIEW_DOCGEN,
+    SIDEBAR_VIEW_METADATA_REDESIGN,
 } from '../../constants';
 import type { MetadataSidebarProps } from './MetadataSidebar';
 import type { MetadataEditor } from '../../common/types/metadata';
@@ -179,6 +180,11 @@ class SidebarUtils {
             case SIDEBAR_VIEW_METADATA:
                 importFn = import(/* webpackMode: "lazy", webpackChunkName: "metadata-sidebar" */ './MetadataSidebar');
                 break;
+            case SIDEBAR_VIEW_METADATA_REDESIGN:
+                importFn = import(
+                    /* webpackMode: "lazy", webpackChunkName: "metadata-sidebar-redesigned" */ './MetadataSidebarRedesign'
+                );
+                break;
             case SIDEBAR_VIEW_ACTIVITY:
                 importFn = import(/* webpackMode: "lazy", webpackChunkName: "activity-sidebar" */ './ActivitySidebar');
                 break;

diff --git a/src/elements/content-sidebar/__mocks__/SidebarUtils.js b/src/elements/content-sidebar/__mocks__/SidebarUtils.js
@@ -2,6 +2,8 @@
 /* eslint-disable max-classes-per-file */
 import * as React from 'react';
 
+import { SIDEBAR_VIEW_METADATA_REDESIGN } from '../../../constants';
+
 export default {
     getAsyncSidebarContent: jest.fn(panelName => {
         return {
@@ -15,6 +17,11 @@ export default {
                     return <div data-testid="metadata-sidebar" />;
                 }
             },
+            [SIDEBAR_VIEW_METADATA_REDESIGN]: class MetadataSidebarRedesigned extends React.Component {
+                render() {
+                    return <div data-testid="metadata-sidebar-redesigned" />;
+                }
+            },
             skills: class SkillsSidebar extends React.Component {
                 render() {
                     return <div data-testid="skills-sidebar" />;

diff --git a/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx b/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+import { screen, render } from '@testing-library/react';
+
+import { MetadataSidebarRedesignComponent as MetadataSidebar } from '../MetadataSidebarRedesign';
+
+jest.unmock('react-intl');
+
+describe('elements/content-sidebar/Metadata/MetadataSidebarRedesigned', () => {
+    const renderComponent = (props = {}) =>
+        render(<MetadataSidebar {...props} />, {
+            wrapper: ({ children }: { children: React.ReactNode }) => (
+                <IntlProvider locale="en-US">{children}</IntlProvider>
+            ),
+        });
+
+    test('should render title', () => {
+        renderComponent();
+
+        expect(screen.getByRole('heading', { level: 3, name: 'Metadata' })).toBeVisible();
+    });
+});
diff --git a/src/elements/content-sidebar/__tests__/SidebarPanels.test.js b/src/elements/content-sidebar/__tests__/SidebarPanels.test.js
@@ -54,6 +54,11 @@ describe('elements/content-sidebar/SidebarPanels', () => {
             expect(wrapper.exists(sidebar)).toBe(true);
         });
 
+        test('should render redesigned metadata sidebar if it is enabled', () => {
+            const wrapper = getWrapper({ path: '/metadata', features: { metadata: { redesign: { enabled: true } } } });
+            expect(wrapper.exists('MetadataSidebarRedesigned')).toBe(true);
+        });
+
         test('should render nothing if the sidebar is closed', () => {
             const wrapper = getWrapper({
                 isOpen: false,