write cluster to query param (no read yet)

dashboard/src/main/home/Home.tsx

@@ -75,9 +75,9 @@ class Home extends Component<PropsType, StateType> {
           creating = res.data[i].status === "creating";
         }
         if (creating) {
-          pushFiltered(this.props, "/dashboard?tab=provisioner", [
+          pushFiltered(this.props, "/dashboard", [
             "project_id",
-          ]);
+          ], { tab: "provisioner" });
         } else if (this.state.ghRedirect) {
           pushFiltered(this.props, "/integrations", ["project_id"]);
           this.setState({ ghRedirect: false });
@@ -182,9 +182,9 @@ class Home extends Component<PropsType, StateType> {
         project_id: this.props.currentProject.id,
       }
     );
-    return pushFiltered(this.props, "/dashboard?tab=provisioner", [
+    return pushFiltered(this.props, "/dashboard", [
       "project_id",
-    ]);
+    ], { tab: "provisioner" });
   };
 
   checkDO = () => {
@@ -214,9 +214,9 @@ class Home extends Component<PropsType, StateType> {
             });
           } else if (infras[0] === "docr") {
             this.provisionDOCR(tgtIntegration.id, tier, () => {
-              pushFiltered(this.props, "/dashboard?tab=provisioner", [
+              pushFiltered(this.props, "/dashboard", [
                 "project_id",
-              ]);
+              ], { tab: "provisioner" });
             });
           } else {
             this.provisionDOKS(tgtIntegration.id, region, clusterName);

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -63,7 +63,7 @@ class Templates extends Component<PropsType, StateType> {
         <TemplateBlock
           onClick={() => {
             this.context.setCurrentCluster(cluster);
-            pushFiltered(this.props, "applications", ["project_id"]);
+            pushFiltered(this.props, "/applications", ["project_id"], { cluster: cluster.name });
           }}
           key={i}
         >

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -96,7 +96,7 @@ class Dashboard extends Component<PropsType, StateType> {
   }
 
   onShowProjectSettings = () => {
-    pushFiltered(this.props, "project-settings", ["project_id"]);
+    pushFiltered(this.props, "/project-settings", ["project_id"]);
   };
 
   currentTab = () => new URLSearchParams(this.props.location.search).get("tab");

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

@@ -5,9 +5,7 @@ import { PorterTemplate } from "shared/types";
 import api from "shared/api";
 
 import TemplateInfo from "./TemplateInfo";
-import LaunchTemplate from "./LaunchTemplate";
 import Loading from "components/Loading";
-import { template } from "lodash";
 
 type PropsType = {
   currentTemplate: PorterTemplate;
@@ -88,18 +86,6 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
         </LoadingWrapper>
       );
     }
-    if (this.props.skipDescription || this.state.showLaunchTemplate) {
-      return (
-        <LaunchTemplate
-          currentTab={this.props.currentTab}
-          currentTemplate={this.props.currentTemplate}
-          hideLaunch={() => this.setState({ showLaunchTemplate: false })}
-          hideBackButton={this.props.skipDescription}
-          values={this.state.values}
-          form={this.state.form}
-        />
-      );
-    }
 
     return (
       <FadeWrapper>

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

@@ -163,11 +163,11 @@ class LaunchTemplate extends Component<PropsType, StateType> {
       .then((_) => {
         // this.props.setCurrentView('cluster-dashboard');
         this.setState({ saveValuesStatus: "successful" }, () => {
-          // redirect to dashboard
+          // TODO: redirect to appropriate cluster if not current context
           let dst =
-            this.props.currentTemplate.name === "job" ? "jobs" : "applications";
+            this.props.currentTemplate.name === "job" ? "/jobs" : "/applications";
           setTimeout(() => {
-            pushFiltered(this.props, dst, ["project_id"]);
+            pushFiltered(this.props, dst, ["project_id"], { cluster: currentCluster.name });
           }, 500);
           window.analytics.track("Deployed Add-on", {
             name: this.props.currentTemplate.name,
@@ -302,9 +302,9 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           setTimeout(() => {
             let dst =
               this.props.currentTemplate.name === "job"
-                ? "jobs"
-                : "applications";
-            pushFiltered(this.props, dst, ["project_id"]);
+                ? "/jobs"
+                : "/applications";
+            pushFiltered(this.props, dst, ["project_id"], { cluster: currentCluster.name });
           }, 1000);
         });
       })
@@ -561,7 +561,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
             template.
             <Highlight
               onClick={() =>
-                pushFiltered(this.props, "integrations/registry", [
+                pushFiltered(this.props, "/integrations/registry", [
                   "project_id",
                 ])
               }

dashboard/src/main/home/launch/launch-flow/LaunchFlow.tsx

@@ -162,9 +162,9 @@ class LaunchFlow extends Component<PropsType, StateType> {
         this.setState({ saveValuesStatus: "successful" }, () => {
           // redirect to dashboard
           let dst =
-            this.props.currentTemplate.name === "job" ? "jobs" : "applications";
+            this.props.currentTemplate.name === "job" ? "/jobs" : "/applications";
           setTimeout(() => {
-            pushFiltered(this.props, dst, ["project_id"]);
+            pushFiltered(this.props, dst, ["project_id"], { cluster: currentCluster.name });
           }, 500);
           window.analytics.track("Deployed Add-on", {
             name: this.props.currentTemplate.name,
@@ -308,7 +308,6 @@ class LaunchFlow extends Component<PropsType, StateType> {
       .then((res: any) => {
         if (sourceType === "repo") {
           let env = rawValues["container.env.normal"];
-          console.log(env);
           this.createGHAction(name, selectedNamespace, env);
         }
         // this.props.setCurrentView('cluster-dashboard');
@@ -317,9 +316,9 @@ class LaunchFlow extends Component<PropsType, StateType> {
           setTimeout(() => {
             let dst =
               this.props.currentTemplate.name === "job"
-                ? "jobs"
-                : "applications";
-            pushFiltered(this.props, dst, ["project_id"]);
+                ? "/jobs"
+                : "/applications";
+            pushFiltered(this.props, dst, ["project_id"], { cluster: currentCluster.name });
           }, 1000);
         });
       })

dashboard/src/main/home/launch/launch-flow/SourcePage.tsx

@@ -101,7 +101,7 @@ class SourcePage extends Component<PropsType, StateType> {
             template.
             <Highlight
               onClick={() =>
-                pushFiltered(this.props, "integrations/registry", [
+                pushFiltered(this.props, "/integrations/registry", [
                   "project_id",
                 ])
               }

dashboard/src/main/home/modals/UpdateClusterModal.tsx

@@ -52,7 +52,7 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
           this.props.setRefreshClusters(true);
           this.setState({ status: "successful", showDeleteOverlay: false });
           this.context.setCurrentModal(null, null);
-          pushFiltered(this.props, "dashboard?tab=overview", ["project_id"]);
+          pushFiltered(this.props, "/dashboard", ["project_id"], { tab: "overview" });
           return;
         }
 

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -262,7 +262,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
         )
       )
       .then(() =>
-        pushFiltered(this.props, "dashboard?tab=provisioner", ["project_id"])
+        pushFiltered(this.props, "/dashboard", ["project_id"], { tab: "provisioner" })
       )
       .catch(this.catchError);
   };
@@ -280,7 +280,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
       } else if (selectedInfras[0].value === "ecr") {
         // Case: project exists, only provision ECR
         this.provisionECR().then(() =>
-          pushFiltered(this.props, "dashboard?tab=provisioner", ["project_id"])
+          pushFiltered(this.props, "/dashboard", ["project_id"], { tab: "provisioner" })
         );
       } else {
         // Case: project exists, only provision EKS
@@ -294,9 +294,9 @@ class AWSFormSection extends Component<PropsType, StateType> {
         // Case: project DNE, only provision ECR
         this.createProject(() =>
           this.provisionECR().then(() =>
-            pushFiltered(this.props, "dashboard?tab=provisioner", [
+            pushFiltered(this.props, "/dashboard", [
               "project_id",
-            ])
+            ], { tab: "provisioner" })
           )
         );
       } else {

dashboard/src/main/home/provisioner/ExistingClusterSection.tsx

@@ -47,7 +47,7 @@ class ExistingClusterSection extends Component<PropsType, StateType> {
               return el.name === projectName;
             });
             setCurrentProject(proj);
-            pushFiltered(this.props, "dashboard?tab=overview", ["project_id"]);
+            pushFiltered(this.props, "/dashboard", ["project_id"], { tab: "overview" });
           }
         }
       })

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -223,7 +223,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
         { project_id: currentProject.id }
       )
       .then((res) =>
-        pushFiltered(this.props, "dashboard?tab=provisioner", ["project_id"])
+        pushFiltered(this.props, "/dashboard", ["project_id"], { tab: "provisioner" })
       )
       .catch(this.catchError);
   };
@@ -252,9 +252,9 @@ class GCPFormSection extends Component<PropsType, StateType> {
           } else if (selectedInfras[0].value === "gcr") {
             // Case: project exists, only provision GCR
             this.provisionGCR(id).then(() =>
-              pushFiltered(this.props, "dashboard?tab=provisioner", [
+              pushFiltered(this.props, "/dashboard", [
                 "project_id",
-              ])
+              ], { tab: "provisioner" })
             );
           } else {
             // Case: project exists, only provision GKE

dashboard/src/main/home/provisioner/ProvisionerSettings.tsx

@@ -41,7 +41,7 @@ class NewProject extends Component<PropsType, StateType> {
     setCurrentError(
       "Provisioning failed. Check your credentials and try again."
     );
-    pushFiltered(this.props, "dashboard?tab=overview", ["project_id"]);
+    pushFiltered(this.props, "/dashboard", ["project_id"], { tab: "overview" });
   };
 
   renderSelectedProvider = (override?: string) => {

dashboard/src/main/home/sidebar/Drawer.tsx

@@ -34,8 +34,9 @@ class Drawer extends Component<PropsType, StateType> {
             key={i}
             active={cluster.name === currentCluster.name}
             onClick={() => {
-              setCurrentCluster(cluster);
-              pushFiltered(this.props, "/applications", ["project_id"]);
+              setCurrentCluster(cluster, () => {
+                pushFiltered(this.props, "/applications", ["project_id"], { cluster: cluster.name });
+              });
             }}
           >
             <ClusterIcon>

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -77,7 +77,7 @@ class ProjectSection extends Component<PropsType, StateType> {
               selected={false}
               lastItem={true}
               onClick={() =>
-                pushFiltered(this.props, "new-project", ["project_id"])
+                pushFiltered(this.props, "/new-project", ["project_id"])
               }
             >
               <ProjectIconAlt>+</ProjectIconAlt>

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -15,7 +15,7 @@ import ClusterSection from "./ClusterSection";
 import ProjectSectionContainer from "./ProjectSectionContainer";
 import loading from "assets/loading.gif";
 import { RouteComponentProps, withRouter } from "react-router";
-import { pushFiltered } from "shared/routing";
+import { pushFiltered, pushQueryParams } from "shared/routing";
 
 type PropsType = RouteComponentProps & {
   forceSidebar: boolean;
@@ -107,7 +107,7 @@ class Sidebar extends Component<PropsType, StateType> {
           <NavButton
             selected={currentView === "applications"}
             onClick={() =>
-              pushFiltered(this.props, "/applications", ["project_id"])
+              pushFiltered(this.props, "/applications", ["project_id"], { cluster: currentCluster.name })
             }
           >
             <Img src={monoweb} />
@@ -115,7 +115,7 @@ class Sidebar extends Component<PropsType, StateType> {
           </NavButton>
           <NavButton
             selected={currentView === "jobs"}
-            onClick={() => pushFiltered(this.props, "/jobs", ["project_id"])}
+            onClick={() => pushFiltered(this.props, "/jobs", ["project_id"], { cluster: currentCluster.name })}
           >
             <Img src={monojob} />
             Jobs
@@ -123,7 +123,7 @@ class Sidebar extends Component<PropsType, StateType> {
           <NavButton
             selected={currentView === "env-groups"}
             onClick={() =>
-              pushFiltered(this.props, "/env-groups", ["project_id"])
+              pushFiltered(this.props, "/env-groups", ["project_id"], { cluster: currentCluster.name })
             }
           >
             <Img src={sliders} />

dashboard/src/shared/routing.tsx

@@ -23,11 +23,12 @@ export const PorterUrls = [
   "jobs",
 ];
 
+// TODO: consolidate with pushFiltered
 export const pushQueryParams = (props: any, params: any) => {
   let { location, history } = props;
   const urlParams = new URLSearchParams(location.search);
   Object.keys(params)?.forEach((key: string) => {
-    urlParams.set(key, params[key]);
+    params[key] && urlParams.set(key, params[key]);
   });
   history.push({
     pathname: location.pathname,
@@ -38,7 +39,8 @@ export const pushQueryParams = (props: any, params: any) => {
 export const pushFiltered = (
   props: any, // Props for retrieving history and location
   pathname: string, // Path to redirect to
-  keys: string[] // Query params to preserve during redirect
+  keys: string[], // Query params to preserve during redirect
+  params?: any,
 ) => {
   let { location, history } = props;
   let urlParams = new URLSearchParams(location.search);
@@ -47,6 +49,9 @@ export const pushFiltered = (
     let value = urlParams.get(key);
     value && newUrlParams.set(key, value);
   });
+  params && Object.keys(params)?.forEach((key: string) => {
+    params[key] && newUrlParams.set(key, params[key]);
+  });
   history.push({
     pathname,
     search: newUrlParams.toString(),