Skip to content

Commit a4942d3

Browse files
jstoffanmergify[bot]
jstoffan
authored and
mergify[bot]
committed
feat(versions): Add resin tracking to all version history actions (#1285)
* feat(versions): Add resin tracking to all version history actions * chore: Code review feedback
1 parent c49e52f commit a4942d3

22 files changed

+531
-369
lines changed

‎src/elements/content-sidebar/SidebarContent.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ type Props = {
1515
title: React.Node,
1616
};
1717

18-
const SidebarContent = ({ actions, children, className, title }: Props) => (
19-
<div className={classNames('bcs-content', className)} data-testid="bcs-content">
18+
const SidebarContent = ({ actions, children, className, title, ...rest }: Props) => (
19+
<div className={classNames('bcs-content', className)} data-testid="bcs-content" {...rest}>
2020
<div className="bcs-content-header">
2121
<h3 className="bcs-title">{title}</h3>
2222
{actions}

‎src/elements/content-sidebar/SidebarVersions.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.bcs-SidebarVersions {
2-
&.lnk {
2+
&:not(:empty) {
33
margin-bottom: 20px;
44
}
55
}

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

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* @author Box
55
*/
66

7-
import React from 'react';
7+
import * as React from 'react';
88
import getProp from 'lodash/get';
99
import { FormattedMessage } from 'react-intl';
1010
import messages from './messages';
@@ -18,6 +18,7 @@ import { VERSION_DELETE_ACTION, VERSION_RESTORE_ACTION, VERSION_UPLOAD_ACTION }
1818
import './VersionsItem.scss';
1919

2020
type Props = {
21+
fileId: string,
2122
isCurrent: boolean,
2223
isSelected: boolean,
2324
onDelete?: VersionActionCallback,
@@ -38,8 +39,9 @@ const FIVE_MINUTES_MS = 5 * 60 * 1000;
3839
const getActionMessage = action => ACTION_MAP[action] || ACTION_MAP[VERSION_UPLOAD_ACTION];
3940

4041
const VersionsItem = ({
41-
isCurrent,
42-
isSelected,
42+
fileId,
43+
isCurrent = false,
44+
isSelected = false,
4345
onDelete,
4446
onDownload,
4547
onPreview,
@@ -74,56 +76,56 @@ const VersionsItem = ({
7476
};
7577

7678
return (
77-
<VersionsItemButton
78-
className="bcs-VersionsItem"
79-
isDisabled={isDisabled}
80-
isSelected={isSelected}
81-
onActivate={handleAction(onPreview)}
82-
>
83-
<div className="bcs-VersionsItem-badge">
84-
<VersionsItemBadge isDisabled={isDeleted} versionNumber={versionNumber} />
85-
</div>
86-
87-
<div className="bcs-VersionsItem-details">
88-
{isCurrent && (
89-
<div className="bcs-VersionsItem-current">
90-
<FormattedMessage {...messages.versionCurrent} />
91-
</div>
92-
)}
93-
<div className="bcs-VersionsItem-log" data-testid="bcs-VersionsItem-log">
94-
<FormattedMessage {...getActionMessage(action)} values={{ name: versionUserName }} />
79+
<div className="bcs-VersionsItem">
80+
<VersionsItemButton
81+
fileId={fileId}
82+
isCurrent={isCurrent}
83+
isDisabled={isDisabled}
84+
isSelected={isSelected}
85+
onClick={handleAction(onPreview)}
86+
>
87+
<div className="bcs-VersionsItem-badge">
88+
<VersionsItemBadge isDisabled={isDeleted} versionNumber={versionNumber} />
9589
</div>
96-
<div className="bcs-VersionsItem-info">
97-
{versionTimestamp && (
98-
<time className="bcs-VersionsItem-date" dateTime={createdAt}>
99-
<ReadableTime
100-
alwaysShowTime
101-
relativeThreshold={FIVE_MINUTES_MS}
102-
timestamp={versionTimestamp}
103-
/>
104-
</time>
105-
)}
106-
{!!size && (
107-
<span className="bcs-VersionsItem-size" title={versionSize}>
108-
{versionSize}
109-
</span>
90+
91+
<div className="bcs-VersionsItem-details">
92+
{isCurrent && (
93+
<div className="bcs-VersionsItem-current">
94+
<FormattedMessage {...messages.versionCurrent} />
95+
</div>
11096
)}
97+
<div className="bcs-VersionsItem-log" data-testid="bcs-VersionsItem-log" title={versionUserName}>
98+
<FormattedMessage {...getActionMessage(action)} values={{ name: versionUserName }} />
99+
</div>
100+
<div className="bcs-VersionsItem-info">
101+
{versionTimestamp && (
102+
<time className="bcs-VersionsItem-date" dateTime={createdAt}>
103+
<ReadableTime
104+
alwaysShowTime
105+
relativeThreshold={FIVE_MINUTES_MS}
106+
timestamp={versionTimestamp}
107+
/>
108+
</time>
109+
)}
110+
{!!size && <span className="bcs-VersionsItem-size">{versionSize}</span>}
111+
</div>
111112
</div>
112-
</div>
113+
</VersionsItemButton>
113114

114115
<VersionsItemActions
116+
fileId={fileId}
115117
isCurrent={isCurrent}
116118
isDeleted={isDeleted}
117119
isDownloadable={isDownloadable}
120+
isSelected={isSelected}
118121
onDelete={handleAction(onDelete)}
119122
onDownload={handleAction(onDownload)}
120123
onPreview={handleAction(onPreview)}
121124
onPromote={handleAction(onPromote)}
122125
onRestore={handleAction(onRestore)}
123126
permissions={permissions}
124127
/>
125-
</VersionsItemButton>
128+
</div>
126129
);
127130
};
128-
129131
export default VersionsItem;

‎src/elements/content-sidebar/versions/VersionsItem.scss‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,26 @@
11
@import '../../common/variables';
22

33
.bcs-VersionsItem {
4-
align-items: flex-start;
5-
background: transparent;
6-
border: 1px solid transparent;
7-
border-radius: 4px;
8-
color: $twos;
9-
cursor: pointer;
10-
display: flex;
11-
font-size: 100%;
12-
line-height: 20px;
13-
outline: none;
14-
padding: 15px 10px;
4+
$bcs-VersionsItemButton-horizontal: 10px;
5+
$bcs-VersionsItemButton-vertical: 15px;
6+
157
position: relative;
16-
text-align: left;
17-
transition: background-color 50ms ease-in, border 50ms ease-in;
18-
width: 100%;
198

20-
&:hover,
21-
&:focus {
22-
border-color: $nines;
9+
.bcs-VersionsItemButton {
10+
padding: $bcs-VersionsItemButton-vertical $bcs-VersionsItemButton-horizontal;
2311
}
2412

25-
&.bcs-is-disabled {
26-
border-color: transparent;
27-
cursor: default;
28-
pointer-events: none;
13+
.bcs-VersionsItemActions {
14+
.aria-menu {
15+
padding-bottom: 8px;
16+
padding-top: 8px;
17+
}
2918
}
3019

31-
&.bcs-is-selected {
32-
background-color: $hover-blue-background;
33-
border-color: $primary-color;
20+
.bcs-VersionsItemActions-toggle {
21+
position: absolute;
22+
right: $bcs-VersionsItemButton-horizontal;
23+
top: $bcs-VersionsItemButton-vertical;
3424
}
3525
}
3626

@@ -40,7 +30,7 @@
4030
}
4131

4232
.bcs-VersionsItem-current {
43-
color: $primary-color;
33+
color: $bdl-box-blue;
4434
font-weight: bold;
4535
}
4636

@@ -51,12 +41,13 @@
5141

5242
.bcs-VersionsItem-info {
5343
align-items: center;
54-
color: $seventy-sixers;
44+
color: $bdl-gray-62;
5545
display: flex;
5646
white-space: nowrap;
5747
}
5848

5949
.bcs-VersionsItem-log {
50+
margin-right: 35px; // Avoid flowing under action toggle button
6051
overflow: hidden;
6152
text-overflow: ellipsis;
6253
white-space: nowrap;

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* @flow strict
3+
* @file Versions Item Action component
4+
* @author Box
5+
*/
6+
7+
import * as React from 'react';
8+
import PlainButton from '../../../components/plain-button';
9+
import './VersionsItemAction.scss';
10+
11+
type Props = {
12+
action: string,
13+
children: React.Node,
14+
fileId: string,
15+
isCurrent: boolean,
16+
};
17+
18+
const VersionsItemAction = ({ action, children, fileId, isCurrent, ...rest }: Props) => (
19+
<li className="bcs-VersionsItemAction">
20+
<PlainButton // Button element is required to trigger resin events
21+
className="bcs-VersionsItemAction-button menu-item"
22+
data-resin-iscurrent={isCurrent}
23+
data-resin-itemid={fileId}
24+
data-resin-target={action}
25+
role="menuitem"
26+
type="button"
27+
{...rest}
28+
>
29+
{children}
30+
</PlainButton>
31+
</li>
32+
);
33+
34+
export default VersionsItemAction;

‎src/elements/content-sidebar/versions/VersionsItemAction.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import '../../common/variables';
2+
3+
.bcs-VersionsItemAction {
4+
.fill-color {
5+
fill: $bdl-gray;
6+
}
7+
8+
.stroke-color {
9+
stroke: $bdl-gray;
10+
}
11+
}
12+
13+
.bcs-VersionsItemAction-button {
14+
width: 100%;
15+
}

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

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/**
22
* @flow
3-
* @file Versions Item Action component
3+
* @file Versions Item Actions component
44
* @author Box
55
*/
66

7-
import React from 'react';
7+
import * as React from 'react';
88
import { FormattedMessage } from 'react-intl';
99
import DropdownMenu from '../../../components/dropdown-menu';
1010
import IconClockPast from '../../../icons/general/IconClockPast';
@@ -15,13 +15,16 @@ import IconTrash from '../../../icons/general/IconTrash';
1515
import IconUpload from '../../../icons/general/IconUpload';
1616
import messages from './messages';
1717
import PlainButton from '../../../components/plain-button';
18-
import { Menu, MenuItem } from '../../../components/menu';
18+
import VersionsItemAction from './VersionsItemAction';
19+
import { Menu } from '../../../components/menu';
1920
import './VersionsItemActions.scss';
2021

2122
type Props = {
22-
isCurrent: boolean,
23-
isDeleted: boolean,
24-
isDownloadable: boolean,
23+
fileId: string,
24+
isCurrent?: boolean,
25+
isDeleted?: boolean,
26+
isDownloadable?: boolean,
27+
isSelected?: boolean,
2528
onDelete?: () => void,
2629
onDownload?: () => void,
2730
onPreview?: () => void,
@@ -41,9 +44,11 @@ const handleToggleClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
4144
};
4245

4346
const VersionsItemActions = ({
47+
fileId,
4448
isCurrent = false,
4549
isDeleted = false,
4650
isDownloadable = false,
51+
isSelected = false,
4752
onDelete,
4853
onDownload,
4954
onPreview,
@@ -54,7 +59,7 @@ const VersionsItemActions = ({
5459
const { can_delete, can_download, can_preview, can_upload } = permissions;
5560
const showDelete = can_delete && !isDeleted && !isCurrent;
5661
const showDownload = can_download && !isDeleted && isDownloadable;
57-
const showPreview = can_preview && !isDeleted;
62+
const showPreview = can_preview && !isDeleted && !isSelected;
5863
const showPromote = can_upload && !isDeleted && !isCurrent;
5964
const showRestore = can_delete && isDeleted;
6065

@@ -66,43 +71,59 @@ const VersionsItemActions = ({
6671
<DropdownMenu
6772
className="bcs-VersionsItemActions"
6873
constrainToScrollParent
74+
constrainToWindow
6975
isRightAligned
7076
onMenuClose={handleMenuClose}
7177
>
72-
<PlainButton className="bcs-VersionsItemActions-toggle" onClick={handleToggleClick}>
73-
<IconEllipsis height={4} width={14} title={<FormattedMessage {...messages.versionActionToggle} />} />
78+
<PlainButton
79+
className="bcs-VersionsItemActions-toggle"
80+
data-resin-iscurrent={isCurrent}
81+
data-resin-itemid={fileId}
82+
data-resin-target="overflow"
83+
onClick={handleToggleClick}
84+
type="button"
85+
>
86+
<IconEllipsis height={4} width={14} />
87+
<FormattedMessage {...messages.versionActionToggle}>
88+
{text => <span className="accessibility-hidden">{text}</span>}
89+
</FormattedMessage>
7490
</PlainButton>
75-
<Menu>
91+
92+
<Menu
93+
className="bcs-VersionsItemActions-menu"
94+
data-resin-component="preview" // Needed for resin events due to tether moving menu to body
95+
data-resin-feature="versions" // Needed for resin events due to tether moving menu to body
96+
>
7697
{showPreview && (
77-
<MenuItem className="bcs-VersionsItemActions-item" onClick={onPreview}>
98+
<VersionsItemAction action="preview" fileId={fileId} isCurrent={isCurrent} onClick={onPreview}>
7899
<IconOpenWith {...ICON_SIZE} />
79100
<FormattedMessage {...messages.versionActionPreview} />
80-
</MenuItem>
101+
</VersionsItemAction>
81102
)}
82103

83104
{showDownload && (
84-
<MenuItem className="bcs-VersionsItemActions-item" onClick={onDownload}>
105+
<VersionsItemAction action="download" fileId={fileId} isCurrent={isCurrent} onClick={onDownload}>
85106
<IconDownload {...ICON_SIZE} />
86107
<FormattedMessage {...messages.versionActionDownload} />
87-
</MenuItem>
108+
</VersionsItemAction>
88109
)}
89110
{showPromote && (
90-
<MenuItem className="bcs-VersionsItemActions-item" onClick={onPromote}>
111+
<VersionsItemAction action="promote" fileId={fileId} isCurrent={isCurrent} onClick={onPromote}>
91112
<IconUpload {...ICON_SIZE} />
92113
<FormattedMessage {...messages.versionActionPromote} />
93-
</MenuItem>
114+
</VersionsItemAction>
94115
)}
95116
{showRestore && (
96-
<MenuItem className="bcs-VersionsItemActions-item" onClick={onRestore}>
117+
<VersionsItemAction action="restore" fileId={fileId} isCurrent={isCurrent} onClick={onRestore}>
97118
<IconClockPast height={14} width={14} />
98119
<FormattedMessage {...messages.versionActionRestore} />
99-
</MenuItem>
120+
</VersionsItemAction>
100121
)}
101122
{showDelete && (
102-
<MenuItem className="bcs-VersionsItemActions-item" onClick={onDelete}>
123+
<VersionsItemAction action="remove" fileId={fileId} isCurrent={isCurrent} onClick={onDelete}>
103124
<IconTrash {...ICON_SIZE} />
104125
<FormattedMessage {...messages.versionActionDelete} />
105-
</MenuItem>
126+
</VersionsItemAction>
106127
)}
107128
</Menu>
108129
</DropdownMenu>

0 commit comments

Comments
 (0)