Select the latest version when upgrading (#1284)

dashboard/src/components/DeploymentForm/DeploymentForm.test.tsx

@@ -32,6 +32,12 @@ afterEach(() => {
   jest.resetAllMocks();
 });
 
+it("fetches the available versions", () => {
+  const fetchChartVersions = jest.fn();
+  shallow(<DeploymentForm {...defaultProps} fetchChartVersions={fetchChartVersions} />);
+  expect(fetchChartVersions).toHaveBeenCalledWith(defaultProps.chartID);
+});
+
 describe("renders an error", () => {
   it("renders a custom error if the deployment failed", () => {
     const wrapper = shallow(

dashboard/src/components/DeploymentForm/DeploymentForm.tsx

@@ -49,6 +49,10 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
     valuesModified: false,
   };
 
+  public componentDidMount() {
+    this.props.fetchChartVersions(this.props.chartID);
+  }
+
   public componentDidUpdate(prevProps: IDeploymentFormProps) {
     if (prevProps.selected.version !== this.props.selected.version && !this.state.valuesModified) {
       this.setState({ appValues: this.props.selected.values || "" });
@@ -94,7 +98,6 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
               namespace={this.props.namespace}
               selected={this.props.selected}
               push={this.props.push}
-              fetchChartVersions={this.props.fetchChartVersions}
               getChartVersion={this.props.getChartVersion}
               setValues={this.handleValuesChange}
               appValues={this.state.appValues}

dashboard/src/components/DeploymentForm/__snapshots__/DeploymentForm.test.tsx.snap

@@ -37,7 +37,6 @@ exports[`renders the full DeploymentForm 1`] = `
         appValues=""
         chartID="foo"
         chartVersion="1.0.0"
-        fetchChartVersions={[Function]}
         getChartVersion={[Function]}
         namespace="default"
         push={[Function]}

dashboard/src/components/DeploymentFormBody/DeploymentFormBody.test.tsx

@@ -65,6 +65,17 @@ it("renders the full DeploymentFormBody", () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it("marks the current version", () => {
+  const wrapper = shallow(
+    <DeploymentFormBody
+      {...defaultProps}
+      releaseVersion={versions[0].attributes.version}
+      selected={{ versions, version: versions[0] }}
+    />,
+  );
+  expect(wrapper.find("select").text()).toMatch("1.2.3 (current)");
+});
+
 const initialValues = "foo: bar";
 const initialSchema = { properties: { foo: { type: "string", form: true } } };
 const chartVersion = {

dashboard/src/components/DeploymentFormBody/DeploymentFormBody.tsx

@@ -20,12 +20,11 @@ export interface IDeploymentFormBodyProps {
   chartID: string;
   chartVersion: string;
   namespace: string;
-  releaseName?: string;
+  releaseVersion?: string;
   selected: IChartState["selected"];
   appValues: string;
   push: (location: string) => RouterAction;
   goBack?: () => RouterAction;
-  fetchChartVersions: (id: string) => void;
   getChartVersion: (id: string, chartVersion: string) => void;
   setValues: (values: string) => void;
   setValuesModified: () => void;
@@ -47,8 +46,7 @@ class DeploymentFormBody extends React.Component<
   };
 
   public componentDidMount() {
-    const { chartID, fetchChartVersions, getChartVersion, chartVersion } = this.props;
-    fetchChartVersions(chartID);
+    const { chartID, getChartVersion, chartVersion } = this.props;
     getChartVersion(chartID, chartVersion);
   }
 
@@ -106,7 +104,7 @@ class DeploymentFormBody extends React.Component<
             {versions.map(v => (
               <option key={v.id} value={v.attributes.version}>
                 {v.attributes.version}{" "}
-                {this.props.releaseName && v.attributes.version === this.props.chartVersion
+                {this.props.releaseVersion && v.attributes.version === this.props.releaseVersion
                   ? "(current)"
                   : ""}
               </option>
@@ -142,7 +140,7 @@ class DeploymentFormBody extends React.Component<
     // TODO(andres): This requires refactoring. Currently, the deploy and upgrade
     // forms behave differently. In the deployment form, a change in the version
     // changes the route but in the case of the upgrade it only changes the state
-    const isUpgradeForm = !!this.props.releaseName;
+    const isUpgradeForm = !!this.props.releaseVersion;
 
     if (isUpgradeForm) {
       const { chartID, getChartVersion } = this.props;

dashboard/src/components/UpgradeForm/UpgradeForm.test.tsx

@@ -1,19 +1,22 @@
 import { mount, shallow } from "enzyme";
 import * as React from "react";
+import itBehavesLike from "../../shared/specs";
 
 import { IChartState, IChartVersion, UnprocessableEntity } from "../../shared/types";
 import DeploymentFormBody from "../DeploymentFormBody/DeploymentFormBody";
 import { ErrorSelector } from "../ErrorAlert";
 import UpgradeForm, { IUpgradeFormProps } from "./UpgradeForm";
 
+const versions = [{ id: "foo", attributes: { version: "1.2.3" } }] as IChartVersion[];
+
 const defaultProps = {
   appCurrentVersion: "1.0.0",
   appCurrentValues: "foo: bar",
   chartName: "my-chart",
   namespace: "default",
   releaseName: "my-release",
   repo: "my-repo",
-  selected: {} as IChartState["selected"],
+  selected: { versions } as IChartState["selected"],
   deployed: {} as IChartState["deployed"],
   upgradeApp: jest.fn(),
   push: jest.fn(),
@@ -23,7 +26,16 @@ const defaultProps = {
   error: undefined,
 } as IUpgradeFormProps;
 
-const versions = [{ id: "foo", attributes: { version: "1.2.3" } }] as IChartVersion[];
+itBehavesLike("aLoadingComponent", {
+  component: UpgradeForm,
+  props: { ...defaultProps, selected: { versions: [] } },
+});
+
+it("fetches the available versions", () => {
+  const fetchChartVersions = jest.fn();
+  shallow(<UpgradeForm {...defaultProps} fetchChartVersions={fetchChartVersions} />);
+  expect(fetchChartVersions).toHaveBeenCalledWith(`${defaultProps.repo}/${defaultProps.chartName}`);
+});
 
 describe("renders an error", () => {
   it("renders a custom error if the deployment failed", () => {
@@ -108,7 +120,7 @@ describe("when receiving new props", () => {
     const modifications = [{ op: "add", path: "/c", value: "d" }];
     const wrapper = shallow(<UpgradeForm {...defaultProps} />);
     wrapper.setState({ modifications });
-    wrapper.setProps({ selected: { version: {}, values: defaultValues } });
+    wrapper.setProps({ selected: { versions: [], version: {}, values: defaultValues } });
 
     expect(wrapper.state("appValues")).toEqual("a: b\nc: d\n");
   });
@@ -118,7 +130,7 @@ describe("when receiving new props", () => {
     const modifications = [{ op: "add", path: "/c", value: "d" }];
     const wrapper = shallow(<UpgradeForm {...defaultProps} />);
     wrapper.setState({ modifications, valuesModified: true, appValues: userValues });
-    wrapper.setProps({ selected: { version: {} } });
+    wrapper.setProps({ selected: { versions: [], version: {} } });
 
     expect(wrapper.state("appValues")).toEqual(userValues);
   });

dashboard/src/components/UpgradeForm/UpgradeForm.tsx

@@ -8,6 +8,7 @@ import { deleteValue, setValue } from "../../shared/schema";
 import { IChartState, IChartVersion } from "../../shared/types";
 import DeploymentFormBody from "../DeploymentFormBody/DeploymentFormBody";
 import { ErrorSelector } from "../ErrorAlert";
+import LoadingWrapper from "../LoadingWrapper";
 
 export interface IUpgradeFormProps {
   appCurrentVersion: string;
@@ -46,6 +47,11 @@ class UpgradeForm extends React.Component<IUpgradeFormProps, IUpgradeFormState>
     valuesModified: false,
   };
 
+  public componentDidMount() {
+    const chartID = `${this.props.repo}/${this.props.chartName}`;
+    this.props.fetchChartVersions(chartID);
+  }
+
   public componentDidUpdate = (prevProps: IUpgradeFormProps) => {
     let modifications = this.state.modifications;
     if (this.props.deployed.values && !modifications) {
@@ -67,13 +73,15 @@ class UpgradeForm extends React.Component<IUpgradeFormProps, IUpgradeFormState>
   };
 
   public render() {
-    const { namespace, releaseName, error } = this.props;
+    const { namespace, releaseName, error, selected } = this.props;
     if (error) {
       return (
         <ErrorSelector error={error} namespace={namespace} action="update" resource={releaseName} />
       );
     }
-
+    if (selected.versions.length === 0) {
+      return <LoadingWrapper />;
+    }
     const chartID = `${this.props.repo}/${this.props.chartName}`;
     return (
       <form className="container padding-b-bigger" onSubmit={this.handleDeploy}>
@@ -84,13 +92,12 @@ class UpgradeForm extends React.Component<IUpgradeFormProps, IUpgradeFormState>
           <div className="col-8">
             <DeploymentFormBody
               chartID={chartID}
-              chartVersion={this.props.appCurrentVersion}
+              chartVersion={this.props.selected.versions[0].attributes.version}
               namespace={this.props.namespace}
-              releaseName={this.props.releaseName}
+              releaseVersion={this.props.appCurrentVersion}
               selected={this.props.selected}
               push={this.props.push}
               goBack={this.props.goBack}
-              fetchChartVersions={this.props.fetchChartVersions}
               getChartVersion={this.props.getChartVersion}
               setValues={this.handleValuesChange}
               appValues={this.state.appValues}

dashboard/src/components/UpgradeForm/__snapshots__/UpgradeForm.test.tsx.snap

@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`loading spinner matches the snapshot 1`] = `
+<LoadingWrapper
+  loaded={false}
+  type={0}
+/>
+`;
+
 exports[`renders the full UpgradeForm 1`] = `
 <form
   className="container padding-b-bigger"
@@ -21,13 +28,12 @@ exports[`renders the full UpgradeForm 1`] = `
       <DeploymentFormBody
         appValues="foo: bar"
         chartID="my-repo/my-chart"
-        chartVersion="1.0.0"
-        fetchChartVersions={[Function]}
+        chartVersion="1.2.3"
         getChartVersion={[Function]}
         goBack={[Function]}
         namespace="default"
         push={[Function]}
-        releaseName="my-release"
+        releaseVersion="1.0.0"
         selected={
           Object {
             "version": Object {