Skip to content

Commit a456f3d

Browse files
rafalmaksymiukmergify[bot]
rafalmaksymiuk
and
mergify[bot]
authored
feat(router): optional router in StaticVersionSidebar and VersionsSid… (#4152)
* feat(router): optional router in StaticVersionSidebar and VersionsSidebar * feat(router): flow fixes * feat(router): flow fixes * feat(router): test fixes * feat: Small updates after review * feat: Small updates after review --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
1 parent 814035d commit a456f3d

File tree

8 files changed

+318
-105
lines changed

8 files changed

+318
-105
lines changed

‎src/elements/common/types/SidebarNavigation.js.flow‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export type SidebarNavigation = {
3030
};
3131

3232
export type InternalSidebarNavigation = SidebarNavigation & {
33-
open: boolean,
33+
open?: boolean,
3434
};
3535

3636
export type SidebarNavigationHandler = (sidebar: SidebarNavigation, replace?: boolean) => void;

‎src/elements/common/types/SidebarNavigation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export type SidebarNavigation =
3939
| ActivityAnnotationsSidebarView;
4040

4141
export type InternalSidebarNavigation = SidebarNavigation & {
42-
open: boolean;
42+
open?: boolean;
4343
};
4444

4545
export type SidebarNavigationHandler = (sidebar: SidebarNavigation, replace?: boolean) => void;

‎src/elements/content-sidebar/versions/StaticVersionSidebar.js‎

Lines changed: 104 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,46 @@ import BackButton from '../../common/back-button';
1414
import PrimaryButton from '../../../components/primary-button';
1515
import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
1616
import VersionsMenu from './VersionsMenu';
17+
import type {
18+
InternalSidebarNavigation,
19+
InternalSidebarNavigationHandler,
20+
ViewTypeValues,
21+
} from '../../common/types/SidebarNavigation';
1722

1823
import messages from './messages';
1924

2025
import './StaticVersionsSidebar.scss';
2126

27+
const { useCallback } = React;
28+
2229
type Props = {
30+
internalSidebarNavigation?: InternalSidebarNavigation,
31+
internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
32+
isLoading: boolean,
33+
onUpgradeClick: () => void,
34+
parentName: ViewTypeValues,
35+
routerDisabled?: boolean,
36+
};
37+
38+
type StaticVersionsContentProps = {
39+
history?: any,
40+
internalSidebarNavigation?: InternalSidebarNavigation,
41+
internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
2342
isLoading: boolean,
2443
onUpgradeClick: () => void,
25-
parentName: string,
44+
parentName: ViewTypeValues,
45+
routerDisabled?: boolean,
2646
};
2747

28-
const StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName }: Props): React.Node => {
48+
const StaticVersionsContent = ({
49+
history,
50+
internalSidebarNavigation,
51+
internalSidebarNavigationHandler,
52+
isLoading,
53+
onUpgradeClick,
54+
parentName,
55+
routerDisabled,
56+
}: StaticVersionsContentProps): React.Node => {
2957
const versionTimestamp = new Date();
3058
versionTimestamp.setDate(versionTimestamp.getDate() - 1);
3159

@@ -45,55 +73,83 @@ const StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName }: Props)
4573
};
4674
});
4775

76+
const handleBackClick = useCallback(() => {
77+
if (routerDisabled && internalSidebarNavigationHandler) {
78+
internalSidebarNavigationHandler({ sidebar: parentName });
79+
} else if (!routerDisabled && history) {
80+
history.push(`/${parentName}`);
81+
}
82+
}, [parentName, routerDisabled, internalSidebarNavigationHandler, history]);
83+
4884
return (
49-
<Route>
50-
{({ history }) => (
51-
<div
52-
className="bcs-StaticVersionSidebar"
53-
role="tabpanel"
54-
data-resin-component="preview"
55-
data-resin-feature="versions"
85+
<div
86+
className="bcs-StaticVersionSidebar"
87+
role="tabpanel"
88+
data-resin-component="preview"
89+
data-resin-feature="versions"
90+
>
91+
<div className="bcs-StaticVersionSidebar-header">
92+
<h3 className="bcs-StaticVersionSidebar-title">
93+
<>
94+
<BackButton
95+
data-resin-target="back"
96+
onClick={handleBackClick}
97+
/>
98+
<FormattedMessage {...messages.versionsTitle} />
99+
</>
100+
</h3>
101+
</div>
102+
103+
<div className="bcs-StaticVersionSidebar-content-wrapper">
104+
<LoadingIndicatorWrapper
105+
className="bcs-StaticVersionSidebar-content"
106+
crawlerPosition="top"
107+
isLoading={isLoading}
56108
>
57-
<div className="bcs-StaticVersionSidebar-header">
58-
<h3 className="bcs-StaticVersionSidebar-title">
59-
<>
60-
<BackButton data-resin-target="back" onClick={() => history.push(`/${parentName}`)} />
61-
<FormattedMessage {...messages.versionsTitle} />
62-
</>
63-
</h3>
64-
</div>
65-
66-
<div className="bcs-StaticVersionSidebar-content-wrapper">
67-
<LoadingIndicatorWrapper
68-
className="bcs-StaticVersionSidebar-content"
69-
crawlerPosition="top"
70-
isLoading={isLoading}
71-
>
72-
<VersionsMenu versions={versions} fileId="1" versionCount={3} versionLimit={3} />
73-
</LoadingIndicatorWrapper>
74-
</div>
75-
76-
<div className="bcs-StaticVersionSidebar-upsell-wrapper">
77-
<div className="bcs-StaticVersionSidebar-upsell">
78-
<BoxDrive140 className="bcs-StaticVersionSidebar-upsell-icon" />
79-
<p className="bcs-StaticVersionSidebar-upsell-header">
80-
<FormattedMessage {...messages.versionUpgradeLink} />
81-
</p>
82-
<p>
83-
<FormattedMessage {...messages.versionUpsell} />
84-
</p>
85-
<PrimaryButton
86-
className="bcs-StaticVersionSidebar-upsell-button"
87-
data-resin-target="versioning_error_upgrade_cta"
88-
onClick={onUpgradeClick}
89-
type="button"
90-
>
91-
<FormattedMessage {...messages.upgradeButton} />
92-
</PrimaryButton>
93-
</div>
94-
</div>
109+
<VersionsMenu
110+
versions={versions}
111+
fileId="1"
112+
versionCount={3}
113+
versionLimit={3}
114+
routerDisabled={routerDisabled}
115+
internalSidebarNavigation={internalSidebarNavigation}
116+
/>
117+
</LoadingIndicatorWrapper>
118+
</div>
119+
120+
<div className="bcs-StaticVersionSidebar-upsell-wrapper">
121+
<div className="bcs-StaticVersionSidebar-upsell">
122+
<BoxDrive140 className="bcs-StaticVersionSidebar-upsell-icon" />
123+
<p className="bcs-StaticVersionSidebar-upsell-header">
124+
<FormattedMessage {...messages.versionUpgradeLink} />
125+
</p>
126+
<p>
127+
<FormattedMessage {...messages.versionUpsell} />
128+
</p>
129+
<PrimaryButton
130+
className="bcs-StaticVersionSidebar-upsell-button"
131+
data-resin-target="versioning_error_upgrade_cta"
132+
onClick={onUpgradeClick}
133+
type="button"
134+
>
135+
<FormattedMessage {...messages.upgradeButton} />
136+
</PrimaryButton>
95137
</div>
96-
)}
138+
</div>
139+
</div>
140+
);
141+
};
142+
143+
const StaticVersionsSidebar = (props: Props): React.Node => {
144+
const { routerDisabled } = props;
145+
146+
if (routerDisabled) {
147+
return <StaticVersionsContent {...props} />;
148+
}
149+
150+
return (
151+
<Route>
152+
{({ history }) => <StaticVersionsContent {...props} history={history} />}
97153
</Route>
98154
);
99155
};

‎src/elements/content-sidebar/versions/VersionsSidebar.js‎

Lines changed: 101 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -16,75 +16,128 @@ import BackButton from '../../common/back-button';
1616
import { DEFAULT_FETCH_END } from '../../../constants';
1717
import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
1818
import type { BoxItemVersion } from '../../../common/types/core';
19+
import type { InternalSidebarNavigation, InternalSidebarNavigationHandler, ViewTypeValues } from '../../common/types/SidebarNavigation';
1920
import './VersionsSidebar.scss';
2021

22+
const { useCallback } = React;
23+
2124
const MAX_VERSIONS = DEFAULT_FETCH_END;
2225

2326
type Props = {
2427
error?: MessageDescriptor,
2528
fileId: string,
29+
internalSidebarNavigation?: InternalSidebarNavigation,
30+
internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
31+
isLoading: boolean,
32+
parentName: ViewTypeValues,
33+
routerDisabled?: boolean,
34+
versionCount: number,
35+
versionLimit: number,
36+
versions: Array<BoxItemVersion>,
37+
};
38+
39+
type VersionsContentProps = {
40+
error?: MessageDescriptor,
41+
fileId: string,
42+
history?: any,
43+
internalSidebarNavigation?: InternalSidebarNavigation,
44+
internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
2645
isLoading: boolean,
27-
parentName: string,
46+
parentName: ViewTypeValues,
47+
routerDisabled?: boolean,
2848
versionCount: number,
2949
versionLimit: number,
3050
versions: Array<BoxItemVersion>,
3151
};
3252

33-
const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => {
53+
const VersionsContent = ({
54+
error,
55+
history,
56+
internalSidebarNavigation,
57+
internalSidebarNavigationHandler,
58+
isLoading,
59+
parentName,
60+
routerDisabled,
61+
versions,
62+
...rest
63+
}: VersionsContentProps) => {
3464
const showLimit = versions.length >= MAX_VERSIONS;
3565
const showVersions = !!versions.length;
3666
const showEmpty = !isLoading && !showVersions;
3767
const showError = !!error;
3868

69+
const handleBackClick = useCallback(() => {
70+
if (routerDisabled && internalSidebarNavigationHandler) {
71+
internalSidebarNavigationHandler({ sidebar: parentName });
72+
} else if (!routerDisabled && history) {
73+
history.push(`/${parentName}`);
74+
}
75+
}, [parentName, routerDisabled, internalSidebarNavigationHandler, history]);
76+
3977
return (
40-
<Route>
41-
{({ history }) => (
42-
<SidebarContent
43-
className="bcs-Versions"
44-
data-resin-component="preview"
45-
data-resin-feature="versions"
46-
title={
47-
<>
48-
<BackButton data-resin-target="back" onClick={() => history.push(`/${parentName}`)} />
49-
<FormattedMessage {...messages.versionsTitle} />
50-
</>
51-
}
52-
>
53-
<LoadingIndicatorWrapper
54-
className="bcs-Versions-content"
55-
crawlerPosition="top"
56-
isLoading={isLoading}
57-
>
58-
{showError && (
59-
<InlineError title={<FormattedMessage {...messages.versionServerError} />}>
60-
<FormattedMessage {...error} />
61-
</InlineError>
62-
)}
78+
<SidebarContent
79+
className="bcs-Versions"
80+
data-resin-component="preview"
81+
data-resin-feature="versions"
82+
title={
83+
<>
84+
<BackButton data-resin-target="back" onClick={handleBackClick} />
85+
<FormattedMessage {...messages.versionsTitle} />
86+
</>
87+
}
88+
>
89+
<LoadingIndicatorWrapper
90+
className="bcs-Versions-content"
91+
crawlerPosition="top"
92+
isLoading={isLoading}
93+
>
94+
{showError && (
95+
<InlineError title={<FormattedMessage {...messages.versionServerError} />}>
96+
<FormattedMessage {...error} />
97+
</InlineError>
98+
)}
99+
100+
{showEmpty && (
101+
<div className="bcs-Versions-empty">
102+
<FormattedMessage {...messages.versionsEmpty} />
103+
</div>
104+
)}
63105

64-
{showEmpty && (
65-
<div className="bcs-Versions-empty">
66-
<FormattedMessage {...messages.versionsEmpty} />
67-
</div>
68-
)}
106+
{showVersions && (
107+
<div className="bcs-Versions-menu" data-testid="bcs-Versions-menu">
108+
<VersionsMenu
109+
versions={versions}
110+
routerDisabled={routerDisabled}
111+
internalSidebarNavigation={internalSidebarNavigation}
112+
{...rest}
113+
/>
114+
</div>
115+
)}
116+
{showLimit && (
117+
<div className="bcs-Versions-maxEntries" data-testid="max-versions">
118+
<FormattedMessage
119+
{...messages.versionMaxEntries}
120+
values={{
121+
maxVersions: MAX_VERSIONS,
122+
}}
123+
/>
124+
</div>
125+
)}
126+
</LoadingIndicatorWrapper>
127+
</SidebarContent>
128+
);
129+
};
69130

70-
{showVersions && (
71-
<div className="bcs-Versions-menu" data-testid="bcs-Versions-menu">
72-
<VersionsMenu versions={versions} {...rest} />
73-
</div>
74-
)}
75-
{showLimit && (
76-
<div className="bcs-Versions-maxEntries" data-testid="max-versions">
77-
<FormattedMessage
78-
{...messages.versionMaxEntries}
79-
values={{
80-
maxVersions: MAX_VERSIONS,
81-
}}
82-
/>
83-
</div>
84-
)}
85-
</LoadingIndicatorWrapper>
86-
</SidebarContent>
87-
)}
131+
const VersionsSidebar = (props: Props) => {
132+
const { routerDisabled } = props;
133+
134+
if (routerDisabled) {
135+
return <VersionsContent {...props} />;
136+
}
137+
138+
return (
139+
<Route>
140+
{({ history }) => <VersionsContent {...props} history={history} />}
88141
</Route>
89142
);
90143
};

‎src/elements/content-sidebar/versions/VersionsSidebarContainer.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { withAPIContext } from '../../common/api-context';
2424
import type { FeatureConfig } from '../../common/feature-checking';
2525
import type { VersionActionCallback, VersionChangeCallback, SidebarLoadCallback } from './flowTypes';
2626
import type { BoxItemVersion, BoxItem, FileVersions } from '../../../common/types/core';
27+
import { ViewType, type ViewTypeValues } from '../../common/types/SidebarNavigation';
2728

2829
type Props = {
2930
api: API,
@@ -40,7 +41,7 @@ type Props = {
4041
onVersionPreview: VersionActionCallback,
4142
onVersionPromote: VersionActionCallback,
4243
onVersionRestore: VersionActionCallback,
43-
parentName: string,
44+
parentName: ViewTypeValues,
4445
versionId?: string,
4546
};
4647

@@ -63,7 +64,7 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
6364
onVersionPreview: noop,
6465
onVersionPromote: noop,
6566
onVersionRestore: noop,
66-
parentName: '',
67+
parentName: ViewType.DETAILS,
6768
};
6869

6970
api: VersionsSidebarAPI;

0 commit comments

Comments
 (0)