From c2c7f8d9392983aeec47cea7eb17e1954bb6c9a9 Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Tue, 20 Mar 2018 11:46:07 +0530 Subject: [PATCH 01/11] AppNew: allow users to select a version in the appNew component --- dashboard/src/components/AppNew/AppNew.tsx | 42 +++++++++++++++++-- .../AppNewContainer/AppNewContainer.tsx | 1 + 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index db5ae5f453f..882a11fd816 100644 --- 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; 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,6 +41,7 @@ interface IAppNewState { class AppNew extends React.Component { public state: IAppNewState = { appValues: undefined, + chartVersion: "", error: undefined, isDeploying: false, namespace: "default", @@ -46,11 +49,24 @@ class AppNew extends React.Component { 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 { required={true} /> +
+ + +
{ public handleReleaseNameChange = (e: React.FormEvent) => { this.setState({ releaseName: e.currentTarget.value }); }; + public handleChartVersionChange = (e: React.FormEvent) => { + 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) => { this.setState({ namespace: e.currentTarget.value }); }; diff --git a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx index 0d2af123b3b..76c79e080eb 100644 --- a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx +++ b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx @@ -36,6 +36,7 @@ function mapDispatchToProps(dispatch: Dispatch) { 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)), From e6169eff3942290e2f43c47b01f2c6d9ee987a33 Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Wed, 21 Mar 2018 13:05:53 +0530 Subject: [PATCH 02/11] fix implementation to reuse the chartVersion property --- dashboard/src/components/AppNew/AppNew.tsx | 52 ++++++++++++------- .../AppNewContainer/AppNewContainer.tsx | 2 + 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index 882a11fd816..8fd2c71707a 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -24,13 +24,13 @@ interface IAppNewProps { getBindings: () => Promise; getChartVersion: (id: string, chartVersion: string) => Promise<{}>; getChartValues: (id: string, chartVersion: string) => Promise<{}>; + selectChartVersionAndGetFiles: (version: IChartVersion) => Promise<{}>; } interface IAppNewState { isDeploying: boolean; // deployment options releaseName: string; - chartVersion: string; namespace: string; appValues?: string; valuesModified: boolean; @@ -41,7 +41,6 @@ interface IAppNewState { class AppNew extends React.Component { public state: IAppNewState = { appValues: undefined, - chartVersion: "", error: undefined, isDeploying: false, namespace: "default", @@ -50,11 +49,6 @@ class AppNew extends React.Component { valuesModified: false, }; - constructor(props: any) { - super(props); - this.state.chartVersion = props.chartVersion; - } - public componentDidMount() { const { chartID, @@ -62,22 +56,38 @@ class AppNew extends React.Component { getBindings, getChartVersion, getChartValues, + chartVersion, } = this.props; fetchChartVersions(chartID); getBindings(); - getChartVersion(chartID, this.state.chartVersion); - getChartValues(chartID, this.state.chartVersion); + getChartVersion(chartID, chartVersion); + getChartValues(chartID, chartVersion); } public componentWillReceiveProps(nextProps: IAppNewProps) { - const { version, values } = nextProps.selected; - if (version && values && !this.state.valuesModified) { - this.setState({ appValues: values }); + const { selectChartVersionAndGetFiles, chartVersion } = this.props; + const { versions } = this.props.selected; + if (nextProps.chartVersion !== chartVersion) { + const cv = versions.find(v => v.attributes.version === nextProps.chartVersion); + if (cv) { + selectChartVersionAndGetFiles(cv); + } else { + throw new Error("could not find chart"); + } + } else { + const { version, values } = nextProps.selected; + if (version && values && !this.state.valuesModified) { + this.setState({ appValues: values }); + } } } public render() { - if (!this.props.selected.version && !this.state.appValues) { + if ( + !this.props.selected.version && + !this.state.appValues && + !this.props.selected.versions.length + ) { return
Loading
; } const { bindings } = this.props; @@ -143,7 +153,7 @@ class AppNew extends React.Component { @@ -231,10 +241,16 @@ class AppNew extends React.Component { this.setState({ releaseName: e.currentTarget.value }); }; public handleChartVersionChange = (e: React.FormEvent) => { - const { chartID, getChartVersion, getChartValues } = this.props; - getChartVersion(chartID, e.currentTarget.value); - getChartValues(chartID, e.currentTarget.value); - this.setState({ chartVersion: e.currentTarget.value }); + const { versions } = this.props.selected; + const cv = versions.find(v => v.attributes.version === e.currentTarget.value); + if (cv) { + const repoName = cv.relationships.chart.data.repo.name; + const chartName = cv.relationships.chart.data.name; + const versionStr = cv.attributes.version; + this.props.push(`/apps/new/${repoName}/${chartName}/versions/${versionStr}`); + } else { + throw new Error("could not find chart"); + } }; public handleNamespaceChange = (e: React.FormEvent) => { this.setState({ namespace: e.currentTarget.value }); diff --git a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx index 76c79e080eb..42c173e3470 100644 --- a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx +++ b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx @@ -43,6 +43,8 @@ function mapDispatchToProps(dispatch: Dispatch) { getChartVersion: (id: string, version: string) => dispatch(actions.charts.getChartVersion(id, version)), push: (location: string) => dispatch(push(location)), + selectChartVersionAndGetFiles: (version: IChartVersion) => + dispatch(actions.charts.selectChartVersionAndGetFiles(version)), }; } From ba4c79cce08ef1dd5d05680c53d9aab4f288ad1e Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Wed, 21 Mar 2018 13:56:55 +0530 Subject: [PATCH 03/11] fixes render condition render should only proceed if a version is currently selected, the appValues have been fetched and the versions array is populated. --- dashboard/src/components/AppNew/AppNew.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index 8fd2c71707a..f20ff895325 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -84,8 +84,8 @@ class AppNew extends React.Component { public render() { if ( - !this.props.selected.version && - !this.state.appValues && + !this.props.selected.version || + !this.state.appValues || !this.props.selected.versions.length ) { return
Loading
; From b141ed9bfe3ed54a6c7c871ac5399339d3d2a8b2 Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Wed, 21 Mar 2018 14:03:46 +0530 Subject: [PATCH 04/11] minor cleanup of the render function --- dashboard/src/components/AppNew/AppNew.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index f20ff895325..c995dfaa54c 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -83,15 +83,12 @@ class AppNew extends React.Component { } public render() { - if ( - !this.props.selected.version || - !this.state.appValues || - !this.props.selected.versions.length - ) { + const { selected, bindings } = this.props; + const { version, versions } = selected; + const { appValues, selectedBinding } = this.state; + if (!version || !appValues || !versions.length) { return
Loading
; } - const { bindings } = this.props; - const { selectedBinding } = this.state; let bindingDetail =
; if (selectedBinding) { const { @@ -149,7 +146,7 @@ class AppNew extends React.Component {
Date: Thu, 22 Mar 2018 11:42:58 +0530 Subject: [PATCH 06/11] refactor `componentWillReceiveProps` --- dashboard/src/components/AppNew/AppNew.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index 2eb7085b6be..8bf3ccf750b 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -67,6 +67,8 @@ class AppNew extends React.Component { public componentWillReceiveProps(nextProps: IAppNewProps) { const { selectChartVersionAndGetFiles, chartVersion } = this.props; const { versions } = this.props.selected; + const { version, values } = nextProps.selected; + if (nextProps.chartVersion !== chartVersion) { const cv = versions.find(v => v.attributes.version === nextProps.chartVersion); if (cv) { @@ -74,11 +76,8 @@ class AppNew extends React.Component { } else { throw new Error("could not find chart"); } - } else { - const { version, values } = nextProps.selected; - if (version && values && !this.state.valuesModified) { - this.setState({ appValues: values }); - } + } else if (version && values && !this.state.valuesModified) { + this.setState({ appValues: values }); } } From 8fc2f6deff4965afb0ea25c4c34647c6bf746dd3 Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Thu, 22 Mar 2018 11:48:49 +0530 Subject: [PATCH 07/11] refactor `handleChartVersionChange` --- dashboard/src/components/AppNew/AppNew.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index 8bf3ccf750b..a9cb9b0108e 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -243,16 +243,7 @@ class AppNew extends React.Component { this.setState({ releaseName: e.currentTarget.value }); }; public handleChartVersionChange = (e: React.FormEvent) => { - const { versions } = this.props.selected; - const cv = versions.find(v => v.attributes.version === e.currentTarget.value); - if (cv) { - const repoName = cv.relationships.chart.data.repo.name; - const chartName = cv.relationships.chart.data.name; - const versionStr = cv.attributes.version; - this.props.push(`/apps/new/${repoName}/${chartName}/versions/${versionStr}`); - } else { - throw new Error("could not find chart"); - } + this.props.push(`/apps/new/${this.props.chartID}/versions/${e.currentTarget.value}`); }; public handleNamespaceChange = (e: React.FormEvent) => { this.setState({ namespace: e.currentTarget.value }); From 503987faac214ba8d99e839150700150456287e7 Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Thu, 22 Mar 2018 11:51:43 +0530 Subject: [PATCH 08/11] fix usage of select tag --- dashboard/src/components/AppNew/AppNew.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index a9cb9b0108e..acc4f4a9f66 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -150,13 +150,14 @@ class AppNew extends React.Component {
- {versions.map(v => ( - ))} From 0d7584772f8bd2cc051421598f9295f85eb6bfdd Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Thu, 22 Mar 2018 11:58:15 +0530 Subject: [PATCH 09/11] adds bottom padding to the form --- dashboard/src/components/AppNew/AppNew.css | 3 +++ dashboard/src/components/AppNew/AppNew.tsx | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 dashboard/src/components/AppNew/AppNew.css diff --git a/dashboard/src/components/AppNew/AppNew.css b/dashboard/src/components/AppNew/AppNew.css new file mode 100644 index 00000000000..499b52cd1a1 --- /dev/null +++ b/dashboard/src/components/AppNew/AppNew.css @@ -0,0 +1,3 @@ +.container { + padding-bottom: 10px; +} diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index acc4f4a9f66..14d3993b76c 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -5,6 +5,8 @@ import { RouterAction } from "react-router-redux"; import { IServiceBinding } from "../../shared/ServiceBinding"; import { IChartState, IChartVersion } from "../../shared/types"; +import "./AppNew.css"; + import "brace/mode/yaml"; import "brace/theme/xcode"; From d75c889504d96b40b4ebd1923624c294e705d69b Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Thu, 22 Mar 2018 12:02:28 +0530 Subject: [PATCH 10/11] use the value of chartID to display the chart name --- dashboard/src/components/AppNew/AppNew.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index 14d3993b76c..ba75bb2c3d4 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -90,7 +90,6 @@ class AppNew extends React.Component { if (!version || !appValues || !versions.length) { return
Loading
; } - const chartAttrs = version.relationships.chart.data; let bindingDetail =
; if (selectedBinding) { const { @@ -137,9 +136,7 @@ class AppNew extends React.Component {
-

- {chartAttrs.repo.name}/{chartAttrs.name} -

+

{this.props.chartID}

From 33d865cd89c00c2383b2881558337caffa415a0d Mon Sep 17 00:00:00 2001 From: Sameer Naik Date: Thu, 22 Mar 2018 12:36:33 +0530 Subject: [PATCH 11/11] sets `editor.$blockScrolling = Infinity` to disable deprecation warning --- dashboard/src/components/AppNew/AppNew.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dashboard/src/components/AppNew/AppNew.tsx b/dashboard/src/components/AppNew/AppNew.tsx index ba75bb2c3d4..0d8b8671077 100644 --- a/dashboard/src/components/AppNew/AppNew.tsx +++ b/dashboard/src/components/AppNew/AppNew.tsx @@ -179,6 +179,7 @@ class AppNew extends React.Component { width="100%" onChange={this.handleValuesChange} setOptions={{ showPrintMargin: false }} + editorProps={{ $blockScrolling: Infinity }} value={appValues} />