chore: Update releases UI actions

steverydz · steverydz · commit cc502d99ef84 · 2025-05-08T17:52:53.000+01:00
Add placeholder progressive releases bar

temp

Hack

Next hack

Another hack

More of a hack

Cleaning up hack
diff --git a/static/js/publisher/pages/Releases/components/releasesConfirm.tsx b/static/js/publisher/pages/Releases/components/releasesConfirm.tsx
@@ -121,50 +121,39 @@ class ReleasesConfirm extends Component<Props, State> {
           ref={this.stickyBar}
         >
           <div className="u-fixed-width">
-            <div className="row u-vertically-center p-releases-row">
-              <div className="col-6">
-                {updatesCount > 0 && (
-                  <>
+            <div className="p-releases-row u-align--right p-releases-confirm__buttons">
+              {updatesCount > 0 && (
+                <>
+                  {!showDetails && (
                     <button
-                      type="button"
-                      className="p-button--base u-no-margin--bottom has-icon"
-                      onClick={this.toggleDetails.bind(this)}
+                      className="p-button u-no-margin--bottom"
+                      onClick={this.onRevertClick.bind(this)}
                     >
-                      <i
-                        className={`${
-                          showDetails
-                            ? "p-icon--chevron-up"
-                            : "p-icon--chevron-down"
-                        }`}
-                      >
-                        {showDetails ? "Hide" : "Show"} details
-                      </i>
-                      <span>
-                        {updatesCount} update
-                        {updatesCount > 1 ? "s" : ""}
-                      </span>
+                      Revert
                     </button>
-                  </>
-                )}
-              </div>
-              <div className="col-6 p-releases-confirm__actions">
-                {updatesCount > 0 && (
-                  <div
-                    className={`p-releases-confirm__details-toggle ${
-                      showDetails ? "is-open" : ""
-                    }`}
-                  ></div>
-                )}
+                  )}
+                  <button
+                    type="button"
+                    className={`p-button--${showDetails ? "base" : "positive"} u-no-margin--bottom`}
+                    onClick={this.toggleDetails.bind(this)}
+                  >
+                    {showDetails ? "Hide changes" : "Review changes"}
+                  </button>
+                </>
+              )}
+            </div>
+            {showDetails && (
+              <>
+                <ReleasesConfirmDetails updates={updates} />
                 <ReleasesConfirmActions
                   isCancelEnabled={isCancelEnabled}
                   cancelPendingReleases={this.onRevertClick.bind(this)}
                   isApplyEnabled={isApplyEnabled}
                   applyPendingReleases={this.onApplyClick.bind(this)}
                   isLoading={isLoading}
                 />
-              </div>
-            </div>
-            {showDetails && <ReleasesConfirmDetails updates={updates} />}
+              </>
+            )}
           </div>
         </div>
       </>
diff --git a/static/js/publisher/pages/Releases/components/releasesConfirmActions.js b/static/js/publisher/pages/Releases/components/releasesConfirmActions.js
@@ -8,7 +8,7 @@ const ReleasesConfirmActions = ({
   applyPendingReleases,
   isLoading,
 }) => (
-  <div className="p-releases-confirm__buttons">
+  <div className="p-releases-confirm__buttons u-align--right">
     <button
       className="u-no-margin--bottom u-no-margin--right"
       disabled={!isCancelEnabled}
diff --git a/static/js/publisher/pages/Releases/components/releasesConfirmDetails/globalRow.js b/static/js/publisher/pages/Releases/components/releasesConfirmDetails/globalRow.js
diff --git a/static/js/publisher/pages/Releases/components/releasesConfirmDetails/index.js b/static/js/publisher/pages/Releases/components/releasesConfirmDetails/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 
@@ -12,12 +12,7 @@ import ProgressiveRow from "./progressiveRow";
 import ProgressiveRowGroup from "./progressiveRowGroup";
 import CloseChannelsRow from "./closeChannelsRow";
 
-const ReleasesConfirmDetails = ({
-  updates,
-  isProgressiveReleaseEnabled,
-  updateProgressiveReleasePercentage,
-}) => {
-  const [useGlobal, setGlobal] = useState(true);
+const ReleasesConfirmDetails = ({ updates, isProgressiveReleaseEnabled }) => {
   const [globalPercentage, setGlobalPercentage] = useState(100);
 
   const progressiveReleases = updates.newReleasesToProgress;
@@ -36,11 +31,6 @@ const ReleasesConfirmDetails = ({
   const showNewReleases = Object.keys(newReleases).length > 0;
   const showPendingCloses = pendingCloses.length > 0;
 
-  const toggleGlobal = () => {
-    const newUseGlobal = !useGlobal;
-    setGlobal(newUseGlobal);
-  };
-
   const updatePercentage = (percentage) => {
     setGlobalPercentage(percentage);
     updateProgressiveReleasePercentage(percentage);
@@ -51,9 +41,7 @@ const ReleasesConfirmDetails = ({
       {showProgressiveReleases && (
         <ProgressiveRowGroup
           releases={progressiveReleases}
-          useGlobal={useGlobal}
           globalPercentage={globalPercentage}
-          toggleGlobal={toggleGlobal}
           updatePercentage={updatePercentage}
         />
       )}
@@ -92,6 +80,15 @@ const ReleasesConfirmDetails = ({
             />
           );
         })}
+      {showProgressiveReleases && (
+        <ProgressiveRow
+          globalPercentage={globalPercentage}
+          type={progressiveTypes.RELEASE}
+          release={progressiveReleases[Object.keys(progressiveReleases)[0]]}
+          updateGlobalPercentage={updatePercentage}
+          showChart={true}
+        />
+      )}
       {showPendingCloses && <CloseChannelsRow channels={pendingCloses} />}
     </div>
   );
diff --git a/static/js/publisher/pages/Releases/components/releasesConfirmDetails/progressiveRow.js b/static/js/publisher/pages/Releases/components/releasesConfirmDetails/progressiveRow.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 
@@ -67,14 +67,14 @@ class ProgressiveRow extends React.Component {
         (change) => change.key === "paused",
       ).value;
       progress = (
-        <Fragment>
+        <>
           <ProgressiveBar percentage={startingPercentage} />
           <span>{paused ? "Paused" : "Resumed"}</span>
-        </Fragment>
+        </>
       );
     } else {
       progress = (
-        <Fragment>
+        <>
           {!isInteractive && (
             <ProgressiveBar percentage={globalPercentage} disabled={true} />
           )}
@@ -102,7 +102,7 @@ class ProgressiveRow extends React.Component {
               </span>
             </span>
           </span>
-        </Fragment>
+        </>
       );
     }
 
@@ -118,6 +118,38 @@ class ProgressiveRow extends React.Component {
 
     const displayType = type.charAt(0).toUpperCase() + type.slice(1);
 
+    if (this.props.showChart) {
+      return (
+        <>
+          {progress && (
+            <>
+              <span className="p-release-details-row__join">to</span>
+              <span className="p-release-details-row__progress">
+                {progress}
+              </span>
+            </>
+          )}
+          {!progress && showProgressiveReleases && (
+            <>
+              <span className="p-release-details-row__join">to</span>
+              <span className="p-release-details-row__progress">
+                <ProgressiveBar percentage={100} disabled={true} />
+                <span>100% of devices</span>
+              </span>
+              <span className="p-release-details-row__notes">
+                Cannot progressively release to an empty channel
+              </span>
+            </>
+          )}
+          {notes && (
+            <span className="p-release-details-row__notes">
+              <small>{notes}</small>
+            </span>
+          )}
+        </>
+      );
+    }
+
     return (
       <ReleaseRow
         type={displayType}
@@ -136,6 +168,7 @@ ProgressiveRow.propTypes = {
   globalPercentage: PropTypes.number,
   updateGlobalPercentage: PropTypes.func,
   updateProgressiveReleasePercentage: PropTypes.func,
+  showChart: PropTypes.bool,
 };
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/static/js/publisher/pages/Releases/components/releasesConfirmDetails/progressiveRowGroup.js b/static/js/publisher/pages/Releases/components/releasesConfirmDetails/progressiveRowGroup.js
@@ -1,42 +1,31 @@
-import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 
 import progressiveTypes from "./types";
 import ProgressiveRow from "./progressiveRow";
-import GlobalRow from "./globalRow";
 
 const ProgressiveRowGroup = ({
   releases,
-  useGlobal,
   globalPercentage,
-  toggleGlobal,
   updatePercentage,
 }) => {
   return (
     <div className="p-release-details-group">
       {Object.keys(releases).map((releaseKey, index) => {
         if (index === 1) {
           return (
-            <Fragment key="global">
-              <GlobalRow
-                useGlobal={useGlobal}
-                toggleGlobal={toggleGlobal}
-                globalPercentage={globalPercentage}
-              />
-              <ProgressiveRow
-                release={releases[releaseKey]}
-                type={progressiveTypes.RELEASE}
-                globalPercentage={useGlobal ? globalPercentage : null}
-                key={releaseKey}
-              />
-            </Fragment>
+            <ProgressiveRow
+              release={releases[releaseKey]}
+              type={progressiveTypes.RELEASE}
+              globalPercentage={globalPercentage}
+              key={releaseKey}
+            />
           );
         }
         return (
           <ProgressiveRow
             release={releases[releaseKey]}
             type={progressiveTypes.RELEASE}
-            globalPercentage={useGlobal ? globalPercentage : null}
+            globalPercentage={globalPercentage}
             key={releaseKey}
             updateGlobalPercentage={index === 0 ? updatePercentage : null}
           />
@@ -48,9 +37,7 @@ const ProgressiveRowGroup = ({
 
 ProgressiveRowGroup.propTypes = {
   releases: PropTypes.object,
-  useGlobal: PropTypes.bool,
   globalPercentage: PropTypes.number,
-  toggleGlobal: PropTypes.func,
   updatePercentage: PropTypes.func,
 };
 
diff --git a/static/js/publisher/pages/Releases/components/releasesConfirmDetails/releaseRow.js b/static/js/publisher/pages/Releases/components/releasesConfirmDetails/releaseRow.js
@@ -1,16 +1,6 @@
-import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 
-import { ProgressiveBar } from "../progressiveBar";
-
-const ReleaseRow = ({
-  type,
-  revisionInfo,
-  channel,
-  progress,
-  notes,
-  showProgressiveReleases,
-}) => (
+const ReleaseRow = ({ type, revisionInfo, channel }) => (
   <div className="p-release-details-row">
     <span className="p-release-details-row__type">{type}</span>
     <span className="p-release-details-row__info">
@@ -22,29 +12,6 @@ const ReleaseRow = ({
         <b>{channel}</b> on <b>{revisionInfo.architectures.join(", ")}</b>
       </span>
     </span>
-    {progress && (
-      <Fragment>
-        <span className="p-release-details-row__join">to</span>
-        <span className="p-release-details-row__progress">{progress}</span>
-      </Fragment>
-    )}
-    {!progress && showProgressiveReleases && (
-      <Fragment>
-        <span className="p-release-details-row__join">to</span>
-        <span className="p-release-details-row__progress">
-          <ProgressiveBar percentage={100} disabled={true} />
-          <span>100% of devices</span>
-        </span>
-        <span className="p-release-details-row__notes">
-          Cannot progressively release to an empty channel
-        </span>
-      </Fragment>
-    )}
-    {notes && (
-      <span className="p-release-details-row__notes">
-        <small>{notes}</small>
-      </span>
-    )}
   </div>
 );
 
diff --git a/static/js/publisher/pages/Releases/components/releasesTable/cellViews.js b/static/js/publisher/pages/Releases/components/releasesTable/cellViews.js
@@ -73,7 +73,7 @@ const ProgressiveTooltip = ({ revision, previousRevision }) => {
       <strong>{previousRevision?.revision || "Unknown"}</strong>
       <br />
       <strong>
-        {Math.round(100 - revision?.progressive["current-percentage"])}% →{" "}
+        {Math.round(100 - revision?.progressive?.["current-percentage"])}% →{" "}
         {Math.round(100 - revision?.progressive?.percentage)}%
       </strong>
       <br />
@@ -94,7 +94,7 @@ const ProgressiveTooltip = ({ revision, previousRevision }) => {
       <strong>{revision.revision} (progressive)</strong>
       <br />
       <strong>
-        {Math.round(revision?.progressive["current-percentage"]) || 0}% →{" "}
+        {Math.round(revision?.progressive?.["current-percentage"]) || 0}% →{" "}
         {Math.round(revision?.progressive?.percentage)}%
       </strong>
       <br />
diff --git a/static/sass/_snapcraft_p-release-details-row.scss b/static/sass/_snapcraft_p-release-details-row.scss
@@ -28,14 +28,6 @@
       }
     }
 
-    &.is-global {
-      padding: 0.25rem;
-
-      .p-release-details-row__global-check {
-        grid-column-start: 4;
-      }
-    }
-
     &__join {
       text-align: center;
     }
diff --git a/static/sass/_snapcraft_release.scss b/static/sass/_snapcraft_release.scss

Original file line number	Diff line number	Diff line change
`@@ -28,14 +28,6 @@`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
`31`		`- &.is-global {`
`32`		`- padding: 0.25rem;`
`33`		`-`
`34`		`- .p-release-details-row__global-check {`
`35`		`- grid-column-start: 4;`
`36`		`- }`
`37`		`- }`
`38`		`-`
`39`	`31`	`&__join {`
`40`	`32`	`text-align: center;`
`41`	`33`	`}`