Add a version selector in the upgrade form (#2034)

vmware-tanzu · Sep 16, 2020 · 8991eed · 8991eed
1 parent aebaa4f
commit 8991eed
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 25 deletions.
diff --git a/dashboard/src/components/ChartView/ChartHeader.v2.test.tsx b/dashboard/src/components/ChartView/ChartHeader.v2.test.tsx
@@ -54,7 +54,7 @@ it("uses the first version as default in the select input", () => {
     },
   ];
   const wrapper = mount(<ChartHeader {...testProps} versions={versions} />);
-  expect(wrapper.find("select").prop("defaultValue")).toBe("1.2.3");
+  expect(wrapper.find("select").prop("value")).toBe("1.2.3");
 });
 
 it("uses the current version as default in the select input", () => {
@@ -71,5 +71,5 @@ it("uses the current version as default in the select input", () => {
     },
   ];
   const wrapper = mount(<ChartHeader {...testProps} versions={versions} currentVersion="1.2.4" />);
-  expect(wrapper.find("select").prop("defaultValue")).toBe("1.2.4");
+  expect(wrapper.find("select").prop("value")).toBe("1.2.4");
 });
diff --git a/dashboard/src/components/ChartView/ChartHeader.v2.tsx b/dashboard/src/components/ChartView/ChartHeader.v2.tsx
@@ -3,6 +3,7 @@ import PageHeader from "components/PageHeader/PageHeader.v2";
 import React from "react";
 import { IChartAttributes, IChartVersion } from "shared/types";
 import placeholder from "../../placeholder.png";
+import ChartVersionSelector from "./ChartVersionSelector";
 
 import "./ChartHeader.v2.css";
 
@@ -12,6 +13,7 @@ interface IChartHeaderProps {
   onSelect: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   releaseName?: string;
   currentVersion?: string;
+  selectedVersion?: string;
   deployButton?: JSX.Element;
 }
 
@@ -22,6 +24,7 @@ export default function ChartHeader({
   releaseName,
   currentVersion,
   deployButton,
+  selectedVersion,
 }: IChartHeaderProps) {
   return (
     <PageHeader
@@ -54,28 +57,13 @@ export default function ChartHeader({
               .{" "}
             </Tooltip>
           </label>
-          <div className="clr-select-wrapper">
-            <select
-              name="chart-versions"
-              className="clr-page-size-select"
-              onChange={onSelect}
-              defaultValue={
-                currentVersion || (versions.length ? versions[0].attributes.version : undefined)
-              }
-            >
-              {versions.map(v => {
-                return (
-                  <option
-                    key={`chart-version-selector-${v.attributes.version}`}
-                    value={v.attributes.version}
-                  >
-                    {v.attributes.version} / App Version {v.attributes.app_version}
-                    {currentVersion === v.attributes.version ? " (current)" : ""}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
+          <ChartVersionSelector
+            versions={versions}
+            onSelect={onSelect}
+            selectedVersion={selectedVersion}
+            currentVersion={currentVersion}
+            chartAttrs={chartAttrs}
+          />
         </>
       }
       buttons={deployButton ? [deployButton] : undefined}

diff --git a/dashboard/src/components/ChartView/ChartVersionSelector.tsx b/dashboard/src/components/ChartView/ChartVersionSelector.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { IChartAttributes, IChartVersion } from "shared/types";
+
+interface IChartHeaderProps {
+  chartAttrs: IChartAttributes;
+  versions: IChartVersion[];
+  onSelect: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  releaseName?: string;
+  currentVersion?: string;
+  selectedVersion?: string;
+  deployButton?: JSX.Element;
+}
+
+export default function ChartVersionSelector({
+  versions,
+  onSelect,
+  currentVersion,
+  selectedVersion,
+}: IChartHeaderProps) {
+  return (
+    <div className="clr-select-wrapper">
+      <select
+        name="chart-versions"
+        className="clr-page-size-select"
+        onChange={onSelect}
+        value={
+          selectedVersion ||
+          currentVersion ||
+          (versions.length ? versions[0].attributes.version : "")
+        }
+      >
+        {versions.map(v => {
+          return (
+            <option
+              key={`chart-version-selector-${v.attributes.version}`}
+              value={v.attributes.version}
+            >
+              {v.attributes.version} / App Version {v.attributes.app_version}
+              {currentVersion === v.attributes.version ? " (current)" : ""}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+}
diff --git a/dashboard/src/components/ChartView/ChartView.v2.tsx b/dashboard/src/components/ChartView/ChartView.v2.tsx
@@ -86,6 +86,7 @@ function ChartView({
               </CdsButton>
             </Link>
           }
+          selectedVersion={selected.version?.attributes.version}
         />
       </div>
 

diff --git a/dashboard/src/components/DeploymentForm/DeploymentForm.v2.tsx b/dashboard/src/components/DeploymentForm/DeploymentForm.v2.tsx
@@ -116,7 +116,12 @@ function DeploymentForm({
   const chartAttrs = version.relationships.chart.data;
   return (
     <section>
-      <ChartHeader chartAttrs={chartAttrs} versions={selected.versions} onSelect={selectVersion} />
+      <ChartHeader
+        chartAttrs={chartAttrs}
+        versions={selected.versions}
+        onSelect={selectVersion}
+        selectedVersion={selected.version?.attributes.version}
+      />
       {isDeploying && (
         <h3 className="center" style={{ marginBottom: "1.2rem" }}>
           Hang tight, the application is being deployed...

diff --git a/dashboard/src/components/UpgradeForm/UpgradeForm.v2.scss b/dashboard/src/components/UpgradeForm/UpgradeForm.v2.scss
@@ -0,0 +1,3 @@
+.upgrade-form-version-selector {
+  margin: 1.2rem 0 0.6rem 0;
+}
diff --git a/dashboard/src/components/UpgradeForm/UpgradeForm.v2.tsx b/dashboard/src/components/UpgradeForm/UpgradeForm.v2.tsx
@@ -6,6 +6,7 @@ import * as YAML from "yaml";
 
 import ChartSummary from "components/Catalog/ChartSummary";
 import ChartHeader from "components/ChartView/ChartHeader.v2";
+import ChartVersionSelector from "components/ChartView/ChartVersionSelector";
 import Alert from "components/js/Alert";
 import Column from "components/js/Column";
 import Row from "components/js/Row";
@@ -14,6 +15,7 @@ import { IChartState, IChartVersion } from "../../shared/types";
 import * as url from "../../shared/url";
 import DeploymentFormBody from "../DeploymentFormBody/DeploymentFormBody.v2";
 import LoadingWrapper from "../LoadingWrapper/LoadingWrapper.v2";
+import "./UpgradeForm.v2.css";
 
 export interface IUpgradeFormProps {
   appCurrentVersion: string;
@@ -175,6 +177,7 @@ function UpgradeForm({
         versions={selected.versions}
         onSelect={selectVersion}
         currentVersion={deployed.chartVersion?.attributes.version}
+        selectedVersion={selected.version?.attributes.version}
       />
       {isDeploying && (
         <h3 className="center" style={{ marginBottom: "1.2rem" }}>
@@ -188,6 +191,18 @@ function UpgradeForm({
           </Column>
           <Column span={9}>
             <form onSubmit={handleDeploy}>
+              <div className="upgrade-form-version-selector">
+                <label className="centered deployment-form-label deployment-form-label-text-param">
+                  Upgrade to Version
+                </label>
+                <ChartVersionSelector
+                  versions={selected.versions}
+                  selectedVersion={selected.version?.attributes.version}
+                  onSelect={selectVersion}
+                  currentVersion={deployed.chartVersion?.attributes.version}
+                  chartAttrs={chartAttrs}
+                />
+              </div>
               <DeploymentFormBody
                 deploymentEvent="upgrade"
                 chartID={chartID}
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,6 +86,7 @@ function ChartView({ @@
                   </CdsButton>
                 </Link>
               }
+              selectedVersion={selected.version?.attributes.version}
             />
           </div>
@@ Expand Down @@