Merge pull request #366 from porter-dev/ux-improvements

Ux improvements

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,14 +148,6 @@ 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;
@@ -183,52 +187,18 @@ export default class SettingsSection extends Component<PropsType, StateType> {
       );
     }
 
-    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 +210,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>

dashboard/src/main/home/launch/expanded-template/LaunchTemplate.tsx

@@ -5,6 +5,7 @@ import posthog from "posthog-js";
 import _ from "lodash";
 import { Context } from "shared/Context";
 import api from "shared/api";
+import { RouteComponentProps, withRouter } from "react-router";
 
 import {
   ActionConfigType,
@@ -22,7 +23,8 @@ import ValuesWrapper from "components/values-form/ValuesWrapper";
 import ValuesForm from "components/values-form/ValuesForm";
 import { isAlphanumeric } from "shared/common";
 
-type PropsType = {
+
+type PropsType = RouteComponentProps & {
   currentTemplate: any;
   hideLaunch: () => void;
   values: any;
@@ -57,7 +59,7 @@ const defaultActionConfig: ActionConfigType = {
   dockerfile_path: "",
 };
 
-export default class LaunchTemplate extends Component<PropsType, StateType> {
+class LaunchTemplate extends Component<PropsType, StateType> {
   state = {
     currentView: "repo",
     clusterOptions: [] as { label: string; value: string }[],
@@ -133,10 +135,12 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         if (this.state.sourceType === "repo") {
           this.createGHAction(name, this.state.selectedNamespace);
         }
-        // this.props.setCurrentView('cluster-dashboard');
+
         this.setState({ saveValuesStatus: "successful" }, () => {
           // redirect to dashboard
+          setTimeout(() => { this.props.history.push("cluster-dashboard")}, 1000);
         });
+
         posthog.capture("Deployed template", {
           name: this.props.currentTemplate.name,
           namespace: this.state.selectedNamespace,
@@ -241,6 +245,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         // this.props.setCurrentView('cluster-dashboard');
         this.setState({ saveValuesStatus: "successful" }, () => {
           // redirect to dashboard with namespace
+          setTimeout(() => { this.props.history.push("cluster-dashboard")}, 1000);
         });
         try {
           posthog.capture("Deployed template", {
@@ -590,6 +595,8 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
 LaunchTemplate.contextType = Context;
 
+export default withRouter(LaunchTemplate);
+
 const Title = styled.div`
   font-size: 24px;
   font-weight: 600;