fixes #362 and #352

dashboard/src/components/image-selector/ImageList.tsx

@@ -168,6 +168,7 @@ export default class ImageList extends Component<PropsType, StateType> {
   */
   renderImageList = () => {
     let { images, loading, error } = this.state;
+
     if (loading) {
       return (
         <LoadingWrapper>

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -119,6 +119,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
   */
   renderImageList = () => {
     let { images, loading, error } = this.state;
+
     if (loading) {
       return (
         <LoadingWrapper>
@@ -195,7 +196,11 @@ export default class ImageSelector extends Component<PropsType, StateType> {
           value={selectedImageUrl}
           onChange={(e: any) => {
             setSelectedImageUrl(e.target.value);
-            this.setState({ clickedImage: null });
+            this.setState({ clickedImage: null, isExpanded: false });
+
+            if (e.target.value == "") {
+              this.setState({ isExpanded: true });
+            }
           }}
           placeholder="Enter or select your container image URL"
         />

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -234,6 +234,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       ...values,
     });
 
+    console.log("VALUES YAML", valuesYaml)
+
     this.setState({ saveValuesStatus: "loading" });
     this.refreshChart();
     api

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -17,6 +17,7 @@ import SaveButton from "components/SaveButton";
 import Heading from "components/values-form/Heading";
 import Helper from "components/values-form/Helper";
 import InputRow from "components/values-form/InputRow";
+import _ from "lodash";
 
 type PropsType = {
   currentChart: ChartType;
@@ -111,14 +112,25 @@ export default class SettingsSection extends Component<PropsType, StateType> {
       },
     };
 
-    let values = yaml.dump(image);
+    let values = {};
+    let rawValues = this.props.currentChart.config
+    for (let key in rawValues) {
+      _.set(values, key, rawValues[key])
+    }
+
+    // Weave in preexisting values and convert to yaml
+    let valuesYaml = yaml.dump({
+      ...values,
+      ...image,
+    });
+
     api
       .upgradeChartValues(
         "<token>",
         {
           namespace: this.props.currentChart.namespace,
           storage: StorageType.Secret,
-          values,
+          values: valuesYaml
         },
         {
           id: currentProject.id,
@@ -136,99 +148,23 @@ export default class SettingsSection extends Component<PropsType, StateType> {
       });
   };
 
-  /*
-    <Helper>
-      Specify a container image and tag or
-      <Highlight onClick={() => this.setState({ sourceType: 'repo' })}>
-        link a repo
-      </Highlight>.
-    </Helper>
-  */
   renderSourceSection = () => {
     if (!this.props.currentChart?.form?.hasSource) {
       return;
     }
 
-    if (this.state.action.git_repo.length > 0) {
-      return (
-        <>
-          <Heading>Connected Source</Heading>
-          <Holder>
-            <InputRow
-              disabled={true}
-              label="Git Repository"
-              type="text"
-              width="100%"
-              value={this.state.action.git_repo}
-              setValue={(x: string) => console.log(x)}
-            />
-            <InputRow
-              disabled={true}
-              label="Dockerfile Path"
-              type="text"
-              width="100%"
-              value={this.state.action.dockerfile_path}
-              setValue={(x: string) => console.log(x)}
-            />
-            <InputRow
-              disabled={true}
-              label="Docker Image Repository"
-              type="text"
-              width="100%"
-              value={this.state.action.image_repo_uri}
-              setValue={(x: string) => console.log(x)}
-            />
-          </Holder>
-        </>
-      );
-    }
-
-    if (this.state.sourceType === "registry") {
-      return (
-        <>
-          <Heading>Connected Source</Heading>
-          <Helper>Specify a container image and tag.</Helper>
-          <ImageSelector
-            selectedImageUrl={this.state.selectedImageUrl}
-            selectedTag={this.state.selectedTag}
-            setSelectedImageUrl={(x: string) =>
-              this.setState({ selectedImageUrl: x })
-            }
-            setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
-            forceExpanded={true}
-          />
-        </>
-      );
-    }
-
-    let { currentProject } = this.context;
     return (
       <>
-        <Heading>Connect a Source</Heading>
-        <Helper>
-          Select a repo to connect to. You can
-          <A
-            padRight={true}
-            href={`/api/oauth/projects/${currentProject.id}/github?redirected=true`}
-          >
-            log in with GitHub
-          </A>{" "}
-          or
-          <Highlight onClick={() => this.setState({ sourceType: "registry" })}>
-            link an image registry
-          </Highlight>
-          .
-        </Helper>
-        <RepoSelector
-          chart={this.props.currentChart}
-          forceExpanded={true}
-          actionConfig={this.state.actionConfig}
-          setActionConfig={(actionConfig: ActionConfigType) =>
-            this.setState({ actionConfig })
-          }
-          resetActionConfig={() =>
-            this.setState({ actionConfig: defaultActionConfig })
+        <Heading>Connected Source</Heading>
+        <Helper>Specify a container image and tag.</Helper>
+        <ImageSelector
+          selectedImageUrl={this.state.selectedImageUrl}
+          selectedTag={this.state.selectedTag}
+          setSelectedImageUrl={(x: string) =>
+            this.setState({ selectedImageUrl: x })
           }
+          setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
+          forceExpanded={true}
         />
       </>
     );
@@ -240,7 +176,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     }
 
     if (true || this.state.webhookToken) {
-      let webhookText = `curl -X POST 'https://dashboard.getporter.dev/api/webhooks/deploy/${this.state.webhookToken}?commit=???&repository=???'`;
+      let webhookText = `curl -X POST 'https://dashboard.getporter.dev/api/webhooks/deploy/${this.state.webhookToken}?commit=YOUR_COMMIT_HASH&repository=IMAGE_REPOSITORY_URL'`;
       return (
         <>
           <Heading>Redeploy Webhook</Heading>