Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from
Jul 18, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f09a3c7
feat(content-sidebar): Introduce redesigned MetadataSidebar placeholder
jankowiakdawid Jul 3, 2024
2fb9960
feat(content-sidebar): Use isFeatureEnabled utility
jankowiakdawid Jul 15, 2024
14da29f
feat(content-sidebar): Remove lint disabling comments
jankowiakdawid Jul 15, 2024
7a8672c
feat(content-sidebar): Rename component to MetadataSidebarRedesign
jankowiakdawid Jul 15, 2024
96490ff
feat(content-sidebar): Rename constant value to match it's name
jankowiakdawid Jul 16, 2024
4cfef1f
feat(content-sidebar): Rename class name to follow SUIT naming
jankowiakdawid Jul 17, 2024
f65408b
feat(content-sidebar): Remove unneeded ref and constant
jankowiakdawid Jul 17, 2024
89839c2
feat(content-sidebar): Remove unneeded constant
jankowiakdawid Jul 17, 2024
8e3e443
feat(content-sidebar): Add performance mark for MetadataSidebarRedesign
jankowiakdawid Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
2 changes: 2 additions & 0 deletions src/elements/common/flowTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
ORIGIN_ACTIVITY_SIDEBAR,
ORIGIN_SKILLS_SIDEBAR,
ORIGIN_METADATA_SIDEBAR,
ORIGIN_METADATA_SIDEBAR_REDESIGN,
ORIGIN_OPEN_WITH,
} from '../../constants';

Expand Down Expand Up @@ -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';
Expand Down
5 changes: 5 additions & 0 deletions src/elements/content-sidebar/MetadataSidebarRedesign.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import '../common/variables';

.bcs-MetadataSidebarRedesign {
padding-inline: 10px;
}
39 changes: 39 additions & 0 deletions src/elements/content-sidebar/MetadataSidebarRedesign.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
52 changes: 41 additions & 11 deletions src/elements/content-sidebar/SidebarPanels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand All @@ -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,
Expand All @@ -41,6 +45,7 @@ type Props = {
detailsSidebarProps: DetailsSidebarProps,
docGenSidebarProps: DocGenSidebarProps,
elementId: string,
features: FeatureConfig,
file: BoxItem,
fileId: string,
getPreview: Function,
Expand Down Expand Up @@ -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}`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ORIGIN_METADATA_SIDEBAR_REDESIGN no longer exists - was previously the same as ORIGIN_METADATA_SIDEBAR

Suggested change
const MARK_NAME_JS_LOADING_METADATA_REDESIGNED = `${ORIGIN_METADATA_SIDEBAR_REDESIGN}${BASE_EVENT_NAME}`;
const MARK_NAME_JS_LOADING_METADATA_REDESIGNED = `${ORIGIN_METADATA_SIDEBAR}${BASE_EVENT_NAME}`;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After further consideration I decided to leave ORIGIN_METADATA_SIDEBAR_REDESIGN and apply it properly, so we can track the loading performance. I'm sure @jstoffan knows how.

const MARK_NAME_JS_LOADING_DOCGEN = `${ORIGIN_DOCGEN_SIDEBAR}${BASE_EVENT_NAME}`;
const MARK_NAME_JS_LOADING_VERSIONS = `${ORIGIN_VERSIONS_SIDEBAR}${BASE_EVENT_NAME}`;

Expand All @@ -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,
Expand Down Expand Up @@ -162,6 +172,7 @@ class SidebarPanels extends React.Component<Props, State> {
detailsSidebarProps,
docGenSidebarProps,
elementId,
features,
file,
fileId,
getPreview,
Expand All @@ -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;
}
Expand Down Expand Up @@ -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 && (
Expand Down Expand Up @@ -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);
6 changes: 6 additions & 0 deletions src/elements/content-sidebar/SidebarUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions src/elements/content-sidebar/__mocks__/SidebarUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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" />;
Expand Down
23 changes: 23 additions & 0 deletions src/elements/content-sidebar/__tests__/MetadataSidebarRedesigned.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});
5 changes: 5 additions & 0 deletions src/elements/content-sidebar/__tests__/SidebarPanels.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading