AppNew: allow users to select a version in the appNew component

vmware-tanzu · Mar 22, 2018 · c2c7f8d · c2c7f8d
1 parent 4a66d1c
commit c2c7f8d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx
@@ -20,6 +20,7 @@ interface IAppNewProps {
   selected: IChartState["selected"];
   chartVersion: string;
   push: (location: string) => RouterAction;
+  fetchChartVersions: (id: string) => Promise<{}>;
   getBindings: () => Promise<IServiceBinding[]>;
   getChartVersion: (id: string, chartVersion: string) => Promise<{}>;
   getChartValues: (id: string, chartVersion: string) => Promise<{}>;
@@ -29,6 +30,7 @@ interface IAppNewState {
   isDeploying: boolean;
   // deployment options
   releaseName: string;
+  chartVersion: string;
   namespace: string;
   appValues?: string;
   valuesModified: boolean;
@@ -39,18 +41,32 @@ interface IAppNewState {
 class AppNew extends React.Component<IAppNewProps, IAppNewState> {
   public state: IAppNewState = {
     appValues: undefined,
+    chartVersion: "",
     error: undefined,
     isDeploying: false,
     namespace: "default",
     releaseName: "",
     selectedBinding: undefined,
     valuesModified: false,
   };
+
+  constructor(props: any) {
+    super(props);
+    this.state.chartVersion = props.chartVersion;
+  }
+
   public componentDidMount() {
-    const { chartID, getBindings, getChartVersion, getChartValues, chartVersion } = this.props;
+    const {
+      chartID,
+      fetchChartVersions,
+      getBindings,
+      getChartVersion,
+      getChartValues,
+    } = this.props;
+    fetchChartVersions(chartID);
     getBindings();
-    getChartVersion(chartID, chartVersion);
-    getChartValues(chartID, chartVersion);
+    getChartVersion(chartID, this.state.chartVersion);
+    getChartValues(chartID, this.state.chartVersion);
   }
 
   public componentWillReceiveProps(nextProps: IAppNewProps) {
@@ -120,6 +136,20 @@ class AppNew extends React.Component<IAppNewProps, IAppNewState> {
                   required={true}
                 />
               </div>
+              <div>
+                <label htmlFor="chartVersion">Version</label>
+                <select id="chartVersion" onChange={this.handleChartVersionChange} required={true}>
+                  {this.props.selected.versions.map(v => (
+                    <option
+                      key={v.id}
+                      value={v.attributes.version}
+                      selected={v.attributes.version === this.state.chartVersion}
+                    >
+                      {v.attributes.version}
+                    </option>
+                  ))}
+                </select>
+              </div>
               <div>
                 <label htmlFor="namespace">Namespace</label>
                 <input
@@ -200,6 +230,12 @@ class AppNew extends React.Component<IAppNewProps, IAppNewState> {
   public handleReleaseNameChange = (e: React.FormEvent<HTMLInputElement>) => {
     this.setState({ releaseName: e.currentTarget.value });
   };
+  public handleChartVersionChange = (e: React.FormEvent<HTMLSelectElement>) => {
+    const { chartID, getChartVersion, getChartValues } = this.props;
+    getChartVersion(chartID, e.currentTarget.value);
+    getChartValues(chartID, e.currentTarget.value);
+    this.setState({ chartVersion: e.currentTarget.value });
+  };
   public handleNamespaceChange = (e: React.FormEvent<HTMLInputElement>) => {
     this.setState({ namespace: e.currentTarget.value });
   };

diff --git a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx
@@ -36,6 +36,7 @@ function mapDispatchToProps(dispatch: Dispatch<IStoreState>) {
       namespace: string,
       values?: string,
     ) => dispatch(actions.charts.deployChart(version, releaseName, namespace, values)),
+    fetchChartVersions: (id: string) => dispatch(actions.charts.fetchChartVersions(id)),
     getBindings: () => dispatch(actions.catalog.getBindings()),
     getChartValues: (id: string, version: string) =>
       dispatch(actions.charts.getChartValues(id, version)),