Skip to content

Commit 84dfd5f

Browse files
steverydzsteverydz
committed
chore: Update releases UI actions
1 parent 8aec05e commit 84dfd5f

13 files changed

Lines changed: 230 additions & 420 deletions

File tree

‎static/js/publisher/pages/Releases/components/progressiveBarControl.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React from "react";
2+
import { connect } from "react-redux";
3+
import PropTypes from "prop-types";
4+
5+
import { updateProgressiveReleasePercentage } from "../actions/pendingReleases";
6+
7+
import progressiveTypes from "./releasesConfirmDetails/types";
8+
9+
import { InteractiveProgressiveBar } from "./progressiveBar";
10+
11+
class ProgressiveBarControl extends React.Component {
12+
constructor(props) {
13+
super(props);
14+
15+
this.onChangeHandler = this.onChangeHandler.bind(this);
16+
}
17+
18+
onChangeHandler(percentage) {
19+
const { updateProgressiveReleasePercentage, updateGlobalPercentage } =
20+
this.props;
21+
22+
if (updateGlobalPercentage) {
23+
updateGlobalPercentage(percentage);
24+
}
25+
updateProgressiveReleasePercentage(percentage);
26+
}
27+
28+
render() {
29+
const { release, type, globalPercentage } = this.props;
30+
31+
if (!release.progressive) {
32+
return false;
33+
}
34+
35+
let startingPercentage = 100;
36+
let targetPercentage = 100;
37+
38+
if (globalPercentage) {
39+
startingPercentage = targetPercentage = globalPercentage;
40+
} else {
41+
switch (type) {
42+
case progressiveTypes.RELEASE:
43+
startingPercentage = targetPercentage =
44+
release.progressive.percentage;
45+
break;
46+
case progressiveTypes.UPDATE:
47+
startingPercentage = release.revision.release.progressive.percentage;
48+
targetPercentage = release.progressive.percentage;
49+
break;
50+
default:
51+
}
52+
}
53+
54+
return (
55+
<div className="progressive-release-control">
56+
<div className="progressive-release-control__inner">
57+
<div>Release all to</div>
58+
<div className="p-release-details-row__progress">
59+
<InteractiveProgressiveBar
60+
percentage={startingPercentage}
61+
onChange={this.onChangeHandler}
62+
targetPercentage={targetPercentage}
63+
minPercentage={1}
64+
singleDirection={type === progressiveTypes.UPDATE ? 1 : 0}
65+
/>
66+
<span>
67+
<span className="p-tooltip--btm-center">
68+
<span className="p-help">{targetPercentage}% of devices</span>
69+
<span className="p-tooltip__message">
70+
Releases are delivered to devices via snap refreshes, as such,
71+
it may
72+
<br />
73+
take some time for devices to receive the new version. There
74+
is also no
75+
<br />
76+
guarantee that this release will achieve the entire target
77+
percentage.
78+
</span>
79+
</span>
80+
</span>
81+
</div>
82+
</div>
83+
<div className="p-release-details-row__notes">
84+
<small>
85+
{100 - targetPercentage}% of devices will stay on the current
86+
version
87+
</small>
88+
</div>
89+
</div>
90+
);
91+
}
92+
}
93+
94+
ProgressiveBarControl.propTypes = {
95+
release: PropTypes.object,
96+
type: PropTypes.string,
97+
globalPercentage: PropTypes.number,
98+
updateGlobalPercentage: PropTypes.func,
99+
updateProgressiveReleasePercentage: PropTypes.func,
100+
};
101+
102+
const mapDispatchToProps = (dispatch) => {
103+
return {
104+
updateProgressiveReleasePercentage: (percentage) =>
105+
dispatch(updateProgressiveReleasePercentage(percentage)),
106+
};
107+
};
108+
109+
export default connect(null, mapDispatchToProps)(ProgressiveBarControl);

‎static/js/publisher/pages/Releases/components/releasesConfirm.tsx‎

Lines changed: 23 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -121,50 +121,39 @@ class ReleasesConfirm extends Component<Props, State> {
121121
ref={this.stickyBar}
122122
>
123123
<div className="u-fixed-width">
124-
<div className="row u-vertically-center p-releases-row">
125-
<div className="col-6">
126-
{updatesCount > 0 && (
127-
<>
124+
<div className="p-releases-row u-align--right p-releases-confirm__buttons">
125+
{updatesCount > 0 && (
126+
<>
127+
{!showDetails && (
128128
<button
129-
type="button"
130-
className="p-button--base u-no-margin--bottom has-icon"
131-
onClick={this.toggleDetails.bind(this)}
129+
className="p-button u-no-margin--bottom"
130+
onClick={this.onRevertClick.bind(this)}
132131
>
133-
<i
134-
className={`${
135-
showDetails
136-
? "p-icon--chevron-up"
137-
: "p-icon--chevron-down"
138-
}`}
139-
>
140-
{showDetails ? "Hide" : "Show"} details
141-
</i>
142-
<span>
143-
{updatesCount} update
144-
{updatesCount > 1 ? "s" : ""}
145-
</span>
132+
Revert
146133
</button>
147-
</>
148-
)}
149-
</div>
150-
<div className="col-6 p-releases-confirm__actions">
151-
{updatesCount > 0 && (
152-
<div
153-
className={`p-releases-confirm__details-toggle ${
154-
showDetails ? "is-open" : ""
155-
}`}
156-
></div>
157-
)}
134+
)}
135+
<button
136+
type="button"
137+
className={`p-button--${showDetails ? "base" : "positive"} u-no-margin--bottom`}
138+
onClick={this.toggleDetails.bind(this)}
139+
>
140+
{showDetails ? "Hide changes" : "Review changes"}
141+
</button>
142+
</>
143+
)}
144+
</div>
145+
{showDetails && (
146+
<>
147+
<ReleasesConfirmDetails updates={updates} />
158148
<ReleasesConfirmActions
159149
isCancelEnabled={isCancelEnabled}
160150
cancelPendingReleases={this.onRevertClick.bind(this)}
161151
isApplyEnabled={isApplyEnabled}
162152
applyPendingReleases={this.onApplyClick.bind(this)}
163153
isLoading={isLoading}
164154
/>
165-
</div>
166-
</div>
167-
{showDetails && <ReleasesConfirmDetails updates={updates} />}
155+
</>
156+
)}
168157
</div>
169158
</div>
170159
</>

‎static/js/publisher/pages/Releases/components/releasesConfirmActions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const ReleasesConfirmActions = ({
88
applyPendingReleases,
99
isLoading,
1010
}) => (
11-
<div className="p-releases-confirm__buttons">
11+
<div className="p-releases-confirm__buttons u-align--right">
1212
<button
1313
className="u-no-margin--bottom u-no-margin--right"
1414
disabled={!isCancelEnabled}

‎static/js/publisher/pages/Releases/components/releasesConfirmDetails/globalRow.js‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎static/js/publisher/pages/Releases/components/releasesConfirmDetails/index.js‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { useState } from "react";
1+
import { useState } from "react";
22
import { connect } from "react-redux";
3+
import { Row, Col } from "@canonical/react-components";
34
import PropTypes from "prop-types";
45

56
import { updateProgressiveReleasePercentage } from "../../actions/pendingReleases";
@@ -8,16 +9,11 @@ import { isProgressiveReleaseEnabled } from "../../selectors";
89
import progressiveTypes from "./types";
910
import ReleaseRow from "./releaseRow";
1011
import CancelProgressiveRow from "./cancelProgressiveRow";
11-
import ProgressiveRow from "./progressiveRow";
12-
import ProgressiveRowGroup from "./progressiveRowGroup";
12+
import ProgressiveBarControl from "../progressiveBarControl";
13+
import ReleaseRowGroup from "./releaseRowGroup";
1314
import CloseChannelsRow from "./closeChannelsRow";
1415

15-
const ReleasesConfirmDetails = ({
16-
updates,
17-
isProgressiveReleaseEnabled,
18-
updateProgressiveReleasePercentage,
19-
}) => {
20-
const [useGlobal, setGlobal] = useState(true);
16+
const ReleasesConfirmDetails = ({ updates, isProgressiveReleaseEnabled }) => {
2117
const [globalPercentage, setGlobalPercentage] = useState(100);
2218

2319
const progressiveReleases = updates.newReleasesToProgress;
@@ -36,11 +32,6 @@ const ReleasesConfirmDetails = ({
3632
const showNewReleases = Object.keys(newReleases).length > 0;
3733
const showPendingCloses = pendingCloses.length > 0;
3834

39-
const toggleGlobal = () => {
40-
const newUseGlobal = !useGlobal;
41-
setGlobal(newUseGlobal);
42-
};
43-
4435
const updatePercentage = (percentage) => {
4536
setGlobalPercentage(percentage);
4637
updateProgressiveReleasePercentage(percentage);
@@ -49,21 +40,15 @@ const ReleasesConfirmDetails = ({
4940
return (
5041
<div className="p-releases-confirm__details">
5142
{showProgressiveReleases && (
52-
<ProgressiveRowGroup
53-
releases={progressiveReleases}
54-
useGlobal={useGlobal}
55-
globalPercentage={globalPercentage}
56-
toggleGlobal={toggleGlobal}
57-
updatePercentage={updatePercentage}
58-
/>
43+
<ReleaseRowGroup releases={progressiveReleases} />
5944
)}
6045
{showProgressiveUpdates &&
6146
Object.keys(progressiveUpdates).map((releaseKey) => {
6247
return (
63-
<ProgressiveRow
64-
release={progressiveUpdates[releaseKey]}
48+
<ReleaseRow
6549
type={progressiveTypes.UPDATE}
66-
key={releaseKey}
50+
revisionInfo={progressiveUpdates[releaseKey].revision}
51+
channel={progressiveUpdates[releaseKey].channel}
6752
/>
6853
);
6954
})}
@@ -88,10 +73,21 @@ const ReleasesConfirmDetails = ({
8873
revisionInfo={revisionInfo}
8974
channel={channel}
9075
key={`${revisionInfo.revision}-{${channel}`}
91-
showBar={showProgressiveReleases}
9276
/>
9377
);
9478
})}
79+
{showProgressiveReleases && (
80+
<Row>
81+
<Col size={6}>
82+
<ProgressiveBarControl
83+
globalPercentage={globalPercentage}
84+
type={progressiveTypes.RELEASE}
85+
release={progressiveReleases[Object.keys(progressiveReleases)[0]]}
86+
updateGlobalPercentage={updatePercentage}
87+
/>
88+
</Col>
89+
</Row>
90+
)}
9591
{showPendingCloses && <CloseChannelsRow channels={pendingCloses} />}
9692
</div>
9793
);

0 commit comments

Comments
 (0)
⚡