From f09a3c77201310e2f489df0ed8cd541659fb57fe Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Wed, 3 Jul 2024 23:45:01 +0200 Subject: [PATCH 1/9] feat(content-sidebar): Introduce redesigned MetadataSidebar placeholder In this new placeholder component we will be composing new experience from new components from shared-feature --- src/constants.js | 2 + .../MetadataSidebarRedesigned.scss | 5 ++ .../MetadataSidebarRedesigned.tsx | 41 +++++++++++++ src/elements/content-sidebar/SidebarPanels.js | 59 +++++++++++++++---- src/elements/content-sidebar/SidebarUtils.js | 6 ++ .../content-sidebar/__mocks__/SidebarUtils.js | 5 ++ .../MetadataSidebarRedesigned.test.tsx | 23 ++++++++ .../__tests__/SidebarPanels.test.js | 5 ++ 8 files changed, 135 insertions(+), 11 deletions(-) create mode 100644 src/elements/content-sidebar/MetadataSidebarRedesigned.scss create mode 100644 src/elements/content-sidebar/MetadataSidebarRedesigned.tsx create mode 100644 src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx diff --git a/src/constants.js b/src/constants.js index 7012e7cf8c..c9546d35c5 100644 --- 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' = 'metadata_sidebar'; 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_redesigned' = 'metadata_redesigned'; 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/content-sidebar/MetadataSidebarRedesigned.scss b/src/elements/content-sidebar/MetadataSidebarRedesigned.scss new file mode 100644 index 0000000000..4038b70961 --- /dev/null +++ b/src/elements/content-sidebar/MetadataSidebarRedesigned.scss @@ -0,0 +1,5 @@ +@import '../common/variables'; + +.bcs-metadata-redesign { + padding-inline: 10px; +} diff --git a/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx b/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx new file mode 100644 index 0000000000..1a7823f0c5 --- /dev/null +++ b/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx @@ -0,0 +1,41 @@ +/** + * @file Redesigned Metadata sidebar component + * @author Box + */ +import * as React from 'react'; +import flow from 'lodash/flow'; +import { FormattedMessage } from 'react-intl'; +// @ts-ignore Module is written in Flow +// eslint-disable-next-line import/named +import { withAPIContext } from '../common/api-context'; +// @ts-ignore Module is written in Flow +// eslint-disable-next-line import/named +import { withErrorBoundary } from '../common/error-boundary'; +// @ts-ignore Module is written in Flow +// eslint-disable-next-line import/named +import { withLogger } from '../common/logger'; +// @ts-ignore Module is written in Flow +import { ORIGIN_METADATA_SIDEBAR_REDESIGN } from '../../constants'; +// @ts-ignore Module is written in Flow +import messages from '../common/messages'; + +import './MetadataSidebarRedesigned.scss'; + +function MetadataSidebarRedesigned() { + return ( +
+

+ +

+
+

Hello from Metadata Sidebar redesign

+
+ ); +} + +export { MetadataSidebarRedesigned as MetadataSidebarRedesignedComponent }; +export default flow([ + withLogger(ORIGIN_METADATA_SIDEBAR_REDESIGN), + withErrorBoundary(ORIGIN_METADATA_SIDEBAR_REDESIGN), + withAPIContext, +])(MetadataSidebarRedesigned); diff --git a/src/elements/content-sidebar/SidebarPanels.js b/src/elements/content-sidebar/SidebarPanels.js index 267eb16414..f3b1a5f7f7 100644 --- 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 } 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_REDESIGNED, +); const LoadableDocGenSidebar = SidebarUtils.getAsyncSidebarContent(SIDEBAR_VIEW_DOCGEN, MARK_NAME_JS_LOADING_DOCGEN); const LoadableVersionsSidebar = SidebarUtils.getAsyncSidebarContent( SIDEBAR_VIEW_VERSIONS, @@ -104,6 +114,8 @@ class SidebarPanels extends React.Component { metadataSidebar: ElementRefType = React.createRef(); + metadataSidebarRedesigned: ElementRefType = React.createRef(); + state: State = { isInitialized: false }; versionsSidebar: ElementRefType = React.createRef(); @@ -135,6 +147,7 @@ class SidebarPanels extends React.Component { const { current: activitySidebar } = this.activitySidebar; const { current: detailsSidebar } = this.detailsSidebar; const { current: metadataSidebar } = this.metadataSidebar; + const { current: metadataSidebarRedesigned } = this.metadataSidebarRedesigned; const { current: versionsSidebar } = this.versionsSidebar; if (activitySidebar) { @@ -149,6 +162,10 @@ class SidebarPanels extends React.Component { metadataSidebar.refresh(); } + if (metadataSidebarRedesigned) { + metadataSidebarRedesigned.refresh(); + } + if (versionsSidebar) { versionsSidebar.refresh(); } @@ -162,6 +179,7 @@ class SidebarPanels extends React.Component { detailsSidebarProps, docGenSidebarProps, elementId, + features, file, fileId, getPreview, @@ -182,6 +200,8 @@ class SidebarPanels extends React.Component { const { isInitialized } = this.state; + const isMetadataSidebarRedesignEnabled = features?.metadata?.redesign?.enabled ?? false; + if (!isOpen || (!hasActivity && !hasDetails && !hasMetadata && !hasSkills && !hasVersions)) { return null; } @@ -263,16 +283,27 @@ class SidebarPanels extends React.Component { ( - - )} + render={() => + isMetadataSidebarRedesignEnabled ? ( + + ) : ( + + ) + } /> )} {hasDocGen && ( @@ -330,4 +361,10 @@ class SidebarPanels extends React.Component { } 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 index 87bfa40e71..55f37abef8 100644 --- 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" */ './MetadataSidebarRedesigned' + ); + 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 index 98883a2603..34a52b16e6 100644 --- a/src/elements/content-sidebar/__mocks__/SidebarUtils.js +++ b/src/elements/content-sidebar/__mocks__/SidebarUtils.js @@ -15,6 +15,11 @@ export default { return
; } }, + metadata_redesigned: class MetadataSidebarRedesigned extends React.Component { + render() { + return
; + } + }, skills: class SkillsSidebar extends React.Component { render() { return
; diff --git a/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx b/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx new file mode 100644 index 0000000000..ff73597101 --- /dev/null +++ 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 { MetadataSidebarRedesignedComponent as MetadataSidebar } from '../MetadataSidebarRedesigned'; + +jest.unmock('react-intl'); + +describe('elements/content-sidebar/Metadata/MetadataSidebarRedesigned', () => { + const renderComponent = (props = {}) => + render(, { + wrapper: ({ children }: { children: React.ReactNode }) => ( + {children} + ), + }); + + 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 index 0daaeb67df..006433d8d9 100644 --- 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, From 2fb99600e5d7cec673c9ff89326cfd7627b47db8 Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Mon, 15 Jul 2024 17:33:02 +0200 Subject: [PATCH 2/9] feat(content-sidebar): Use isFeatureEnabled utility --- src/elements/content-sidebar/SidebarPanels.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/content-sidebar/SidebarPanels.js b/src/elements/content-sidebar/SidebarPanels.js index f3b1a5f7f7..15d3b5abdc 100644 --- a/src/elements/content-sidebar/SidebarPanels.js +++ b/src/elements/content-sidebar/SidebarPanels.js @@ -11,7 +11,7 @@ import SidebarUtils from './SidebarUtils'; import withSidebarAnnotations from './withSidebarAnnotations'; import { withAnnotatorContext } from '../common/annotator-context'; import { withAPIContext } from '../common/api-context'; -import { withFeatureConsumer } from '../common/feature-checking'; +import { withFeatureConsumer, isFeatureEnabled } from '../common/feature-checking'; import { withRouterAndRef } from '../common/routing'; import { ORIGIN_ACTIVITY_SIDEBAR, @@ -200,7 +200,7 @@ class SidebarPanels extends React.Component { const { isInitialized } = this.state; - const isMetadataSidebarRedesignEnabled = features?.metadata?.redesign?.enabled ?? false; + const isMetadataSidebarRedesignEnabled = isFeatureEnabled(features, 'metadata.redesign.enabled'); if (!isOpen || (!hasActivity && !hasDetails && !hasMetadata && !hasSkills && !hasVersions)) { return null; From 14da29fea5afe0c0a0219943b06f5205d6f0097b Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Mon, 15 Jul 2024 18:15:52 +0200 Subject: [PATCH 3/9] feat(content-sidebar): Remove lint disabling comments --- .../content-sidebar/MetadataSidebarRedesigned.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx b/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx index 1a7823f0c5..9078e65df6 100644 --- a/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx +++ b/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx @@ -5,18 +5,10 @@ import * as React from 'react'; import flow from 'lodash/flow'; import { FormattedMessage } from 'react-intl'; -// @ts-ignore Module is written in Flow -// eslint-disable-next-line import/named import { withAPIContext } from '../common/api-context'; -// @ts-ignore Module is written in Flow -// eslint-disable-next-line import/named import { withErrorBoundary } from '../common/error-boundary'; -// @ts-ignore Module is written in Flow -// eslint-disable-next-line import/named import { withLogger } from '../common/logger'; -// @ts-ignore Module is written in Flow import { ORIGIN_METADATA_SIDEBAR_REDESIGN } from '../../constants'; -// @ts-ignore Module is written in Flow import messages from '../common/messages'; import './MetadataSidebarRedesigned.scss'; From 7a8672c245a0acb9d2eef72e8e1ed64a9d337bc7 Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Mon, 15 Jul 2024 18:19:04 +0200 Subject: [PATCH 4/9] feat(content-sidebar): Rename component to MetadataSidebarRedesign --- ...idebarRedesigned.scss => MetadataSidebarRedesign.scss} | 0 ...aSidebarRedesigned.tsx => MetadataSidebarRedesign.tsx} | 8 ++++---- src/elements/content-sidebar/SidebarUtils.js | 2 +- .../__tests__/MetadataSidebarRedesigned.test.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) rename src/elements/content-sidebar/{MetadataSidebarRedesigned.scss => MetadataSidebarRedesign.scss} (100%) rename src/elements/content-sidebar/{MetadataSidebarRedesigned.tsx => MetadataSidebarRedesign.tsx} (82%) diff --git a/src/elements/content-sidebar/MetadataSidebarRedesigned.scss b/src/elements/content-sidebar/MetadataSidebarRedesign.scss similarity index 100% rename from src/elements/content-sidebar/MetadataSidebarRedesigned.scss rename to src/elements/content-sidebar/MetadataSidebarRedesign.scss diff --git a/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx similarity index 82% rename from src/elements/content-sidebar/MetadataSidebarRedesigned.tsx rename to src/elements/content-sidebar/MetadataSidebarRedesign.tsx index 9078e65df6..d27348a4a4 100644 --- a/src/elements/content-sidebar/MetadataSidebarRedesigned.tsx +++ b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx @@ -11,9 +11,9 @@ import { withLogger } from '../common/logger'; import { ORIGIN_METADATA_SIDEBAR_REDESIGN } from '../../constants'; import messages from '../common/messages'; -import './MetadataSidebarRedesigned.scss'; +import './MetadataSidebarRedesign.scss'; -function MetadataSidebarRedesigned() { +function MetadataSidebarRedesign() { return (

@@ -25,9 +25,9 @@ function MetadataSidebarRedesigned() { ); } -export { MetadataSidebarRedesigned as MetadataSidebarRedesignedComponent }; +export { MetadataSidebarRedesign as MetadataSidebarRedesignComponent }; export default flow([ withLogger(ORIGIN_METADATA_SIDEBAR_REDESIGN), withErrorBoundary(ORIGIN_METADATA_SIDEBAR_REDESIGN), withAPIContext, -])(MetadataSidebarRedesigned); +])(MetadataSidebarRedesign); diff --git a/src/elements/content-sidebar/SidebarUtils.js b/src/elements/content-sidebar/SidebarUtils.js index 55f37abef8..e229044772 100644 --- a/src/elements/content-sidebar/SidebarUtils.js +++ b/src/elements/content-sidebar/SidebarUtils.js @@ -182,7 +182,7 @@ class SidebarUtils { break; case SIDEBAR_VIEW_METADATA_REDESIGN: importFn = import( - /* webpackMode: "lazy", webpackChunkName: "metadata-sidebar-redesigned" */ './MetadataSidebarRedesigned' + /* webpackMode: "lazy", webpackChunkName: "metadata-sidebar-redesigned" */ './MetadataSidebarRedesign' ); break; case SIDEBAR_VIEW_ACTIVITY: diff --git a/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx b/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx index ff73597101..dbbaf1ac7f 100644 --- a/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx +++ b/src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx @@ -3,7 +3,7 @@ import { IntlProvider } from 'react-intl'; import { screen, render } from '@testing-library/react'; -import { MetadataSidebarRedesignedComponent as MetadataSidebar } from '../MetadataSidebarRedesigned'; +import { MetadataSidebarRedesignComponent as MetadataSidebar } from '../MetadataSidebarRedesign'; jest.unmock('react-intl'); From 96490fff0eaa7a5daee388f791af43d05b206af2 Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Tue, 16 Jul 2024 17:11:27 +0200 Subject: [PATCH 5/9] feat(content-sidebar): Rename constant value to match it's name Also use constant in mock to show they connected --- src/constants.js | 2 +- src/elements/content-sidebar/__mocks__/SidebarUtils.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/constants.js b/src/constants.js index c9546d35c5..0fdc7a9b07 100644 --- a/src/constants.js +++ b/src/constants.js @@ -396,7 +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_redesigned' = 'metadata_redesigned'; +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/content-sidebar/__mocks__/SidebarUtils.js b/src/elements/content-sidebar/__mocks__/SidebarUtils.js index 34a52b16e6..98ba636313 100644 --- 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,7 +17,7 @@ export default { return
; } }, - metadata_redesigned: class MetadataSidebarRedesigned extends React.Component { + [SIDEBAR_VIEW_METADATA_REDESIGN]: class MetadataSidebarRedesigned extends React.Component { render() { return
; } From 4cfef1fd47fe088810e9bc90008ba9d4a821bb7b Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Wed, 17 Jul 2024 13:53:00 +0200 Subject: [PATCH 6/9] feat(content-sidebar): Rename class name to follow SUIT naming --- src/elements/content-sidebar/MetadataSidebarRedesign.scss | 2 +- src/elements/content-sidebar/MetadataSidebarRedesign.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.scss b/src/elements/content-sidebar/MetadataSidebarRedesign.scss index 4038b70961..8a651e469b 100644 --- a/src/elements/content-sidebar/MetadataSidebarRedesign.scss +++ b/src/elements/content-sidebar/MetadataSidebarRedesign.scss @@ -1,5 +1,5 @@ @import '../common/variables'; -.bcs-metadata-redesign { +.bcs-MetadataSidebarRedesign { padding-inline: 10px; } diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx index d27348a4a4..7541fff398 100644 --- a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx +++ b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx @@ -15,7 +15,7 @@ import './MetadataSidebarRedesign.scss'; function MetadataSidebarRedesign() { return ( -
+

From f65408bff4aedd2576da37e3e960db3999ed90df Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Wed, 17 Jul 2024 15:58:38 +0200 Subject: [PATCH 7/9] feat(content-sidebar): Remove unneeded ref and constant --- src/elements/content-sidebar/SidebarPanels.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/elements/content-sidebar/SidebarPanels.js b/src/elements/content-sidebar/SidebarPanels.js index 15d3b5abdc..fcfc9e1e1c 100644 --- a/src/elements/content-sidebar/SidebarPanels.js +++ b/src/elements/content-sidebar/SidebarPanels.js @@ -97,7 +97,7 @@ const LoadableMetadataSidebar = SidebarUtils.getAsyncSidebarContent( ); const LoadableMetadataSidebarRedesigned = SidebarUtils.getAsyncSidebarContent( SIDEBAR_VIEW_METADATA_REDESIGN, - MARK_NAME_JS_LOADING_METADATA_REDESIGNED, + MARK_NAME_JS_LOADING_METADATA, ); const LoadableDocGenSidebar = SidebarUtils.getAsyncSidebarContent(SIDEBAR_VIEW_DOCGEN, MARK_NAME_JS_LOADING_DOCGEN); const LoadableVersionsSidebar = SidebarUtils.getAsyncSidebarContent( @@ -114,8 +114,6 @@ class SidebarPanels extends React.Component { metadataSidebar: ElementRefType = React.createRef(); - metadataSidebarRedesigned: ElementRefType = React.createRef(); - state: State = { isInitialized: false }; versionsSidebar: ElementRefType = React.createRef(); @@ -147,7 +145,6 @@ class SidebarPanels extends React.Component { const { current: activitySidebar } = this.activitySidebar; const { current: detailsSidebar } = this.detailsSidebar; const { current: metadataSidebar } = this.metadataSidebar; - const { current: metadataSidebarRedesigned } = this.metadataSidebarRedesigned; const { current: versionsSidebar } = this.versionsSidebar; if (activitySidebar) { @@ -162,10 +159,6 @@ class SidebarPanels extends React.Component { metadataSidebar.refresh(); } - if (metadataSidebarRedesigned) { - metadataSidebarRedesigned.refresh(); - } - if (versionsSidebar) { versionsSidebar.refresh(); } @@ -289,7 +282,7 @@ class SidebarPanels extends React.Component { elementId={elementId} fileId={fileId} hasSidebarInitialized={isInitialized} - ref={this.metadataSidebarRedesigned} + ref={this.metadataSidebar} startMarkName={MARK_NAME_JS_LOADING_METADATA_REDESIGNED} {...metadataSidebarProps} /> From 89839c276736cae5fc56c0d4468302484258118c Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Wed, 17 Jul 2024 16:59:14 +0200 Subject: [PATCH 8/9] feat(content-sidebar): Remove unneeded constant --- src/constants.js | 1 - src/elements/content-sidebar/MetadataSidebarRedesign.tsx | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/constants.js b/src/constants.js index 0fdc7a9b07..32944aceb1 100644 --- a/src/constants.js +++ b/src/constants.js @@ -315,7 +315,6 @@ 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' = 'metadata_sidebar'; export const ORIGIN_SKILLS_SIDEBAR: 'skills_sidebar' = 'skills_sidebar'; export const ORIGIN_VERSIONS_SIDEBAR: 'versions_sidebar' = 'versions_sidebar'; export const ORIGIN_PREVIEW: 'preview' = 'preview'; diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx index 7541fff398..91545aadc2 100644 --- a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx +++ b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx @@ -8,7 +8,7 @@ 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 { ORIGIN_METADATA_SIDEBAR } from '../../constants'; import messages from '../common/messages'; import './MetadataSidebarRedesign.scss'; @@ -27,7 +27,7 @@ function MetadataSidebarRedesign() { export { MetadataSidebarRedesign as MetadataSidebarRedesignComponent }; export default flow([ - withLogger(ORIGIN_METADATA_SIDEBAR_REDESIGN), - withErrorBoundary(ORIGIN_METADATA_SIDEBAR_REDESIGN), + withLogger(ORIGIN_METADATA_SIDEBAR), + withErrorBoundary(ORIGIN_METADATA_SIDEBAR), withAPIContext, ])(MetadataSidebarRedesign); From 8e3e443cac656430821fa024fd70fef5f5eff55c Mon Sep 17 00:00:00 2001 From: Dawid Jankowiak Date: Thu, 18 Jul 2024 12:56:02 +0200 Subject: [PATCH 9/9] feat(content-sidebar): Add performance mark for MetadataSidebarRedesign --- src/constants.js | 1 + src/elements/common/flowTypes.js | 2 ++ .../content-sidebar/MetadataSidebarRedesign.tsx | 12 +++++++++--- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/constants.js b/src/constants.js index 32944aceb1..b33d77d8a6 100644 --- 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'; diff --git a/src/elements/common/flowTypes.js b/src/elements/common/flowTypes.js index 6784928aef..0a52f7c3fc 100644 --- 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.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx index 91545aadc2..02c4abdf14 100644 --- a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx +++ b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx @@ -8,11 +8,17 @@ 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 } from '../../constants'; +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 (
@@ -27,7 +33,7 @@ function MetadataSidebarRedesign() { export { MetadataSidebarRedesign as MetadataSidebarRedesignComponent }; export default flow([ - withLogger(ORIGIN_METADATA_SIDEBAR), - withErrorBoundary(ORIGIN_METADATA_SIDEBAR), + withLogger(ORIGIN_METADATA_SIDEBAR_REDESIGN), + withErrorBoundary(ORIGIN_METADATA_SIDEBAR_REDESIGN), withAPIContext, ])(MetadataSidebarRedesign);