updated routing

dashboard/src/components/TabRegion.tsx

@@ -17,21 +17,18 @@ type StateType = {};
 
 // Manages a tab selector and renders the associated view
 export default class TabRegion extends Component<PropsType, StateType> {
-  setDefaultTab = () => {
-    if (!this.props.defaultTab && this.props.options[0]) {
-      this.props.setCurrentTab(this.props.options[0].value);
-    }
-  };
-
-  componentDidMount() {
-    this.setDefaultTab();
-  }
+  defaultTab = () =>
+    this.props.defaultTab
+      ? this.props.defaultTab
+      : this.props.options[0]
+      ? this.props.options[0].value
+      : "";
 
   componentDidUpdate(prevProps: PropsType) {
     let { options, currentTab } = this.props;
     if (prevProps.options !== options) {
       if (options.filter((x) => x.value === currentTab).length === 0) {
-        this.setDefaultTab();
+        this.props.setCurrentTab(this.defaultTab());
       }
     }
   }

dashboard/src/main/Main.tsx

@@ -10,7 +10,7 @@ import Register from "./Register";
 import CurrentError from "./CurrentError";
 import Home from "./home/Home";
 import Loading from "components/Loading";
-import { PorterUrls } from "shared/urls";
+import { PorterUrls } from "shared/routing";
 
 type PropsType = {};
 

dashboard/src/main/home/Home.tsx

@@ -23,7 +23,7 @@ import ConfirmOverlay from "components/ConfirmOverlay";
 import Modal from "./modals/Modal";
 import * as FullStory from "@fullstory/browser";
 import { Redirect, RouteComponentProps, withRouter } from "react-router";
-import { PorterUrls } from "shared/urls";
+import { PorterUrls } from "shared/routing";
 
 type PropsType = RouteComponentProps & {
   logOut: () => void;
@@ -61,26 +61,30 @@ class Home extends Component<PropsType, StateType> {
 
     if (!currentProject) return;
 
-    api.getInfra('<token>', {}, { 
-      project_id: currentProject.id 
-    }, (err: any, res: any) => {
-      if (err) return;
-      
-      let creating = false;
+    api.getInfra(
+      "<token>",
+      {},
+      {
+        project_id: currentProject.id,
+      },
+      (err: any, res: any) => {
+        if (err) return;
+        let creating = false;
 
-      for (var i = 0; i < res.data.length; i++) {
-        creating = res.data[i].status === "creating"
-      }
+        for (var i = 0; i < res.data.length; i++) {
+          creating = res.data[i].status === "creating";
+        }
 
-      if (creating) {
-        this.props.history.push("dashboard?tab=provisioner");
-      } else if (this.state.ghRedirect) {
-        this.props.history.push("integrations");
-        this.setState({ ghRedirect: false });
-      } else if (this.props.currentRoute !== "dashboard") {
+        if (creating) {
+          this.props.history.push("dashboard?tab=provisioner");
+        } else if (this.state.ghRedirect) {
+          this.props.history.push("integrations");
+          this.setState({ ghRedirect: false });
+        } else if (this.props.currentRoute !== "dashboard") {
           this.props.history.push("dashboard");
+        }
       }
-    });
+    );
   };
 
   getProjects = (id?: number) => {
@@ -108,7 +112,6 @@ class Home extends Component<PropsType, StateType> {
               });
               this.context.setCurrentProject(foundProject);
             }
-
             if (!foundProject) {
               res.data.forEach((project: ProjectType, i: number) => {
                 if (

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

@@ -1,4 +1,3 @@
-import { render } from "@testing-library/react";
 import React, { Component } from "react";
 import styled from "styled-components";
 
@@ -9,10 +8,12 @@ import api from "shared/api";
 
 import ProvisionerSettings from "../provisioner/ProvisionerSettings";
 import ClusterPlaceholderContainer from "./ClusterPlaceholderContainer";
-import { Redirect, RouteComponentProps, withRouter } from "react-router";
+import { RouteComponentProps, withRouter } from "react-router";
 import TabRegion from "components/TabRegion";
 import Provisioner from "../provisioner/Provisioner";
 
+import { setSearchParam } from "shared/routing";
+
 type PropsType = RouteComponentProps & {
   projectId: number | null;
 };
@@ -22,18 +23,15 @@ const tabOptions = [
   { label: "Provisioner Status", value: "provisioner" },
 ];
 // TODO: rethink this typing, should be coupled with tabOptions
-type TabType = "overview" | "provisioner"
+type TabType = "overview" | "provisioner";
 
 type StateType = {
   infras: InfraType[];
-  currentTab: TabType;
 };
 
-
 class Dashboard extends Component<PropsType, StateType> {
   state = {
     infras: [] as InfraType[],
-    currentTab: "overview" as TabType,
   };
 
   refreshInfras = () => {
@@ -69,15 +67,10 @@ class Dashboard extends Component<PropsType, StateType> {
     this.props.history.push("project-settings");
   };
 
-  renderTabContents = () => {
-    const currentTab = new URLSearchParams(this.props.location.search).get("tab")
-    if (
-      currentTab && currentTab !== this.state.currentTab
-    ) {
-      this.setState({ currentTab: currentTab as TabType });
-    }
+  currentTab = () => new URLSearchParams(this.props.location.search).get("tab");
 
-    if (this.state.currentTab === "provisioner") {
+  renderTabContents = () => {
+    if (this.currentTab() === "provisioner") {
       return <Provisioner />;
     } else {
       return (
@@ -99,8 +92,7 @@ class Dashboard extends Component<PropsType, StateType> {
   };
 
   render() {
-    let { currentProject, currentCluster } = this.context;
-    let { infras } = this.state;
+    let { currentProject } = this.context;
     let { onShowProjectSettings } = this;
     return (
       <>
@@ -135,8 +127,12 @@ class Dashboard extends Component<PropsType, StateType> {
             </InfoSection>
 
             <TabRegion
-              currentTab={this.state.currentTab}
-              setCurrentTab={(x: TabType) => this.props.history.push(`dashboard?tab=${x}`)}
+              currentTab={this.currentTab()}
+              setCurrentTab={(x: TabType) =>
+                this.props.history.push(
+                  setSearchParam(this.props.location, "tab", x)
+                )
+              }
               options={tabOptions}
             >
               {this.renderTabContents()}

dashboard/src/shared/routing.tsx

@@ -0,0 +1,25 @@
+import { Location } from "history";
+
+export const PorterUrls = [
+  "dashboard",
+  "templates",
+  "integrations",
+  "new-project",
+  "cluster-dashboard",
+  "project-settings",
+];
+
+export const setSearchParam = (
+  location: Location<any>,
+  key: string,
+  value: string
+) => {
+  const urlParams = new URLSearchParams(location.search);
+  urlParams.set(key, value);
+  return {
+    pathname: location.pathname,
+    search: urlParams.toString(),
+  };
+};
+
+export type PorterUrls = typeof PorterUrls[number];

dashboard/src/shared/urls.tsx

@@ -1,10 +0,0 @@
-export const PorterUrls = [
-  "dashboard",
-  "templates",
-  "integrations",
-  "new-project",
-  "cluster-dashboard",
-  "project-settings",
-];
-
-export type PorterUrls = typeof PorterUrls[number];