routes

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

@@ -17,7 +17,6 @@ type PropsType = {
   selectedTag: string | null,
   setSelectedImageUrl: (x: string) => void,
   setSelectedTag: (x: string) => void,
-  setCurrentView: (x: string) => void,
 };
 
 type StateType = {

dashboard/src/main/Main.tsx

@@ -11,6 +11,7 @@ import Register from './Register';
 import CurrentError from './CurrentError';
 import Home from './home/Home';
 import Loading from 'components/Loading';
+import PorterUrls from 'shared/urls';
 
 type PropsType = {
 };
@@ -67,6 +68,11 @@ export default class Main extends Component<PropsType, StateType> {
       return <Loading />
     }
 
+    const authedUrls: PorterUrls[] = [
+      "dashboard", "templates", "integrations", "new-project",
+      "cluster-dashboard", "provisioner", "project-settings"
+    ];
+
     return (
       <Switch>
         <Route path='/login' render={() => {
@@ -85,19 +91,24 @@ export default class Main extends Component<PropsType, StateType> {
           }
         }} />
 
-        <Route path='/dashboard' render={() => {
-          if (this.state.isLoggedIn && this.state.initialized) {
-            return (
-              <Home 
-                currentProject={this.context.currentProject}
-                currentCluster={this.context.currentCluster} 
-                logOut={this.handleLogOut} 
-              />
-            );
-          } else {
-            return <Redirect to='/' />
-          }
-        }}/>
+        // TODO: Possible template this into a map from url to routed home
+        {...authedUrls.map(route =>
+            <Route path={`/${route}`} render={() => {
+            if (this.state.isLoggedIn && this.state.initialized) {
+              return (
+                <Home 
+                  currentProject={this.context.currentProject}
+                  currentCluster={this.context.currentCluster} 
+                  currentRoute={route}
+                  logOut={this.handleLogOut} 
+                />
+              );
+            } else {
+              return <Redirect to='/' />
+            }
+          }}/>
+        )}
+        
 
         <Route path='/' render={() => {
           if (this.state.isLoggedIn) {

dashboard/src/main/home/Home.tsx

@@ -24,17 +24,19 @@ import ProjectSettings from './project-settings/ProjectSettings';
 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';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   logOut: () => void,
   currentProject: ProjectType,
   currentCluster: ClusterType,
+  currentRoute: PorterUrls,
 };
 
 type StateType = {
   forceSidebar: boolean,
   showWelcome: boolean,
-  currentView: string,
   handleDO: boolean, // Trigger DO infra calls after oauth flow if needed
   ghRedirect: boolean,
   forceRefreshClusters: boolean, // For updating ClusterSection from modal on deletion
@@ -45,11 +47,10 @@ type StateType = {
 };
 
 // TODO: Handle cluster connected but with some failed infras (no successful set)
-export default class Home extends Component<PropsType, StateType> {
+class Home extends Component<PropsType, StateType> {
   state = {
     forceSidebar: true,
     showWelcome: false,
-    currentView: 'dashboard',
     prevProjectId: null as number | null,
     forceRefreshClusters: false,
     sidebarReady: false,
@@ -71,18 +72,18 @@ export default class Home extends Component<PropsType, StateType> {
         return;
       }
 
-      if (res.data.length > 0 && (!currentCluster && !includesCompletedInfraSet(res.data))) {
-        // force refresh if currentView is identical set to provisioner. Tentative solution before refactoring.
-        this.setState({ currentView: 'dashboard'}, () => {
-          this.setState({ currentView: 'provisioner', sidebarReady: true, });
-        });
-      } else if (this.state.ghRedirect) {
-        this.setState({ currentView: 'integrations', sidebarReady: true, ghRedirect: false });
-      } else {
-        this.setState({ currentView: 'provisioner'}, () => {
-          this.setState({ currentView: 'dashboard', sidebarReady: true });
-        })
-      }
+      // if (res.data.length > 0 && (!currentCluster && !includesCompletedInfraSet(res.data))) {
+      //   // force refresh if currentView is identical set to provisioner. Tentative solution before refactoring.
+      //   this.setState({ currentView: 'dashboard'}, () => {
+      //     this.setState({ currentView: 'provisioner', sidebarReady: true, });
+      //   });
+      // } else if (this.state.ghRedirect) {
+      //   this.setState({ currentView: 'integrations', sidebarReady: true, ghRedirect: false });
+      // } else {
+      //   this.setState({ currentView: 'provisioner'}, () => {
+      //     this.setState({ currentView: 'dashboard', sidebarReady: true });
+      //   })
+      // }
     });
   }
 
@@ -94,7 +95,7 @@ export default class Home extends Component<PropsType, StateType> {
         console.log(err);
       } else if (res.data) {
         if (res.data.length === 0) {
-          this.setState({ currentView: 'new-project', sidebarReady: true, });
+          <Redirect to="new-project"></Redirect>
         } else if (res.data.length > 0 && !currentProject) {
           setProjects(res.data);
 
@@ -106,7 +107,7 @@ export default class Home extends Component<PropsType, StateType> {
               } 
             });
             this.context.setCurrentProject(foundProject);
-            this.setState({ currentView: 'provisioner' });
+            <Redirect to="provisioner"></Redirect>
           }
 
           if (!foundProject) {
@@ -153,7 +154,7 @@ export default class Home extends Component<PropsType, StateType> {
         console.log(err);
         return;
       }
-      this.setState({ currentView: 'provisioner' });
+      <Redirect to="provisioner"></Redirect>
     });
   }
 
@@ -181,7 +182,7 @@ export default class Home extends Component<PropsType, StateType> {
           });
         } else if (infras[0] === 'docr') {
           this.provisionDOCR(tgtIntegration.id, tier, () => {
-            this.setState({ currentView: 'provisioner' });
+            <Redirect to="provisioner"></Redirect>
           });
         } else {
           this.provisionDOKS(tgtIntegration.id, region);
@@ -271,14 +272,15 @@ export default class Home extends Component<PropsType, StateType> {
         <ClusterDashboard
           currentCluster={currentCluster}
           setSidebar={(x: boolean) => this.setState({ forceSidebar: x })}
-          setCurrentView={(x: string) => this.setState({ currentView: x })}
+          // setCurrentView={(x: string) => this.setState({ currentView: x })}
         />
       </DashboardWrapper>
     );
   }
 
   renderContents = () => {
-    let { currentView, handleDO } = this.state;
+    // let { handleDO } = this.state;
+    let currentView = this.props.currentRoute;
     if (this.context.currentProject && currentView !== 'new-project') {
       if (currentView === 'cluster-dashboard') {
         return this.renderDashboard();
@@ -286,7 +288,6 @@ export default class Home extends Component<PropsType, StateType> {
         return (
           <DashboardWrapper>
             <Dashboard 
-              setCurrentView={(x: string) => this.setState({ currentView: x })}
               projectId={this.context.currentProject?.id}
             />
           </DashboardWrapper>
@@ -295,51 +296,36 @@ export default class Home extends Component<PropsType, StateType> {
         return <Integrations />;
       } else if (currentView === 'provisioner') {
         return (
-          <ProvisionerStatus
-            setCurrentView={(x: string) => this.setState({ currentView: x })} 
-          />
+          <ProvisionerStatus/>
         );
       } else if (currentView === 'project-settings') {
         return (
-          <ProjectSettings  setCurrentView={(x: string) => this.setState({ currentView: x })} />
+          <ProjectSettings />
         )
       }
 
       return (
-        <Templates
-          setCurrentView={(x: string) => this.setState({ currentView: x })}
-        />
+        <Templates/>
       );
     } else if (currentView === 'new-project') {
       return (
-        <NewProject 
-          setCurrentView={(x: string, data: any ) => this.setState({ currentView: x })} 
-        />
+        <NewProject/>
       );
     }
   }
 
-  setCurrentView = (x: string) => {
-    if (x === 'dashboard') {
-      this.initializeView();
-    } else {
-      this.setState({ currentView: x });
-    }
-  }
-
   renderSidebar = () => {
     if (this.context.projects.length > 0) {
 
       // Force sidebar closed on first provision
-      if (this.state.currentView === 'provisioner' && this.state.forceSidebar) {
+      if (this.props.currentRoute === 'provisioner' && this.state.forceSidebar) {
         this.setState({ forceSidebar: false });
       } else {
         return (
           <Sidebar
             forceSidebar={this.state.forceSidebar}
             setWelcome={(x: boolean) => this.setState({ showWelcome: x })}
-            setCurrentView={this.setCurrentView}
-            currentView={this.state.currentView}
+            currentView={this.props.currentRoute}
             forceRefreshClusters={this.state.forceRefreshClusters}
             setRefreshClusters={(x: boolean) => this.setState({ forceRefreshClusters: x })}
           />
@@ -359,7 +345,7 @@ export default class Home extends Component<PropsType, StateType> {
           this.context.setCurrentProject(res.data[0]);
         } else {
           this.context.setCurrentProject(null);
-          this.setState({ currentView: 'new-project' });
+          this.props.history.push("new-project");
         }
         this.context.setCurrentModal(null, null);
       }
@@ -434,7 +420,7 @@ export default class Home extends Component<PropsType, StateType> {
       }
     });
     setCurrentModal(null, null)
-    this.setState({ currentView: 'dashboard' });
+    this.props.history.push("dashboard");
   }
 
   render() {
@@ -486,7 +472,7 @@ export default class Home extends Component<PropsType, StateType> {
         <ViewWrapper>
           <Navbar
             logOut={this.props.logOut}
-            currentView={this.state.currentView} // For form feedback
+            currentView={this.props.currentRoute} // For form feedback
           />
           {this.renderContents()}
         </ViewWrapper>
@@ -504,6 +490,8 @@ export default class Home extends Component<PropsType, StateType> {
 
 Home.contextType = Context;
 
+export default withRouter(Home);
+
 const ViewWrapper = styled.div`
   height: 100%;
   width: 100vw;

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -10,11 +10,11 @@ import ChartList from './chart/ChartList';
 import NamespaceSelector from './NamespaceSelector';
 import SortSelector from './SortSelector';
 import ExpandedChart from './expanded-chart/ExpandedChart';
+import { Redirect, RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   currentCluster: ClusterType,
-  setSidebar: (x: boolean) => void
-  setCurrentView: (x: string) => void,
+  setSidebar: (x: boolean) => void,
 };
 
 type StateType = {
@@ -23,7 +23,7 @@ type StateType = {
   currentChart: ChartType | null
 };
 
-export default class ClusterDashboard extends Component<PropsType, StateType> {
+class ClusterDashboard extends Component<PropsType, StateType> {
   state = {
     namespace: 'default',
     sortType: (localStorage.getItem("SortType") ? localStorage.getItem('SortType') : 'Newest'),
@@ -59,7 +59,7 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
   }
 
   renderContents = () => {
-    let { currentCluster, setSidebar, setCurrentView } = this.props;
+    let { currentCluster, setSidebar } = this.props;
     
     if (this.state.currentChart) {
       return (
@@ -69,7 +69,6 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
           currentChart={this.state.currentChart}
           setCurrentChart={(x: ChartType | null) => this.setState({ currentChart: x })}
           setSidebar={setSidebar}
-          setCurrentView={setCurrentView} // Link to integrations from chart settings
         />
       );
     }
@@ -81,9 +80,7 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
           <Title>{currentCluster.name}</Title>
           <i 
             className="material-icons"
-            onClick={() => this.context.setCurrentModal('UpdateClusterModal', { 
-              setCurrentView: this.props.setCurrentView,
-            })}
+            onClick={() => this.context.setCurrentModal('UpdateClusterModal')}
           >
             more_vert
           </i>
@@ -102,7 +99,7 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
         
         <ControlRow>
           <Button
-            onClick={() => this.props.setCurrentView('templates')}
+            onClick={() => this.props.history.push("templates")}
           >
             <i className="material-icons">add</i> Deploy Template
           </Button>
@@ -139,6 +136,8 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
 
 ClusterDashboard.contextType = Context;
 
+export default withRouter(ClusterDashboard);
+
 const ControlRow = styled.div`
   display: flex;
   justify-content: space-between;

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

@@ -27,7 +27,6 @@ type PropsType = {
   currentCluster: ClusterType,
   setCurrentChart: (x: ChartType | null) => void,
   setSidebar: (x: boolean) => void,
-  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -241,7 +240,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       saveValuesStatus,
       tabOptions,
     } = this.state;
-    let { currentChart, setSidebar, setCurrentView } = this.props;
+    let { currentChart, setSidebar } = this.props;
     let chart = currentChart;
     
     switch (currentTab) {
@@ -254,7 +253,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           <SettingsSection
             currentChart={chart}
             refreshChart={this.refreshChart}
-            setCurrentView={setCurrentView}
             setShowDeleteOverlay={(x: boolean) => this.setState({ showDeleteOverlay: x })}
           /> 
         );

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

@@ -16,7 +16,6 @@ import InputRow from 'components/values-form/InputRow';
 type PropsType = {
   currentChart: ChartType,
   refreshChart: () => void,
-  setCurrentView: (x: string) => void,
   setShowDeleteOverlay: (x: boolean) => void,
 };
 
@@ -138,7 +137,6 @@ export default class SettingsSection extends Component<PropsType, StateType> {
             setSelectedImageUrl={(x: string) => this.setState({ selectedImageUrl: x })}
             setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
             forceExpanded={true}
-            setCurrentView={this.props.setCurrentView}
           />
         </>
       );

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

@@ -7,10 +7,9 @@ import { ClusterType } from 'shared/types';
 import Helper from 'components/values-form/Helper';
 
 import Loading from 'components/Loading';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
-  setCurrentView: (x: string) => void,
-};
+type PropsType = RouteComponentProps;
 
 type StateType = {
   loading: boolean,
@@ -18,7 +17,7 @@ type StateType = {
   clusters: ClusterType[],
 };
 
-export default class Templates extends Component<PropsType, StateType> {
+class Templates extends Component<PropsType, StateType> {
   state = {
     loading: true,
     error: '',
@@ -47,7 +46,7 @@ export default class Templates extends Component<PropsType, StateType> {
         <TemplateBlock 
           onClick={() => { 
             this.context.setCurrentCluster(cluster); 
-            this.props.setCurrentView('cluster-dashboard');
+            this.props.history.push('cluster-dashboard');
           }}
           key={i}
         >
@@ -74,6 +73,8 @@ export default class Templates extends Component<PropsType, StateType> {
 
 Templates.contextType = Context;
 
+export default withRouter(Templates)
+
 const DashboardIcon = styled.div`
   position: relative;
   height: 45px;

dashboard/src/main/home/dashboard/ClusterPlaceholder.tsx

@@ -10,7 +10,6 @@ import Loading from 'components/Loading';
 
 type PropsType = {
   currentCluster: ClusterType,
-  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -59,7 +58,7 @@ export default class ClusterPlaceholder extends Component<PropsType, StateType>
       );
     } else {
       return (
-        <ClusterList setCurrentView={this.props.setCurrentView} />
+        <ClusterList/>
       );
     }
   }

dashboard/src/main/home/dashboard/ClusterPlaceholderContainer.tsx

@@ -4,9 +4,7 @@ import styled from 'styled-components';
 import { Context } from 'shared/Context';
 import ClusterPlaceholder from './ClusterPlaceholder';
 
-type PropsType = {
-  setCurrentView: (x: string) => void,
-};
+type PropsType = {};
 
 type StateType = {
 };
@@ -19,7 +17,6 @@ export default class ClusterPlaceholderContainer extends Component<PropsType, St
   render() {
     return (
       <ClusterPlaceholder
-        setCurrentView={this.props.setCurrentView}
         currentCluster={this.context.currentCluster}
       />
     );

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

@@ -9,9 +9,9 @@ import api from 'shared/api';
 
 import ProvisionerSettings from '../provisioner/ProvisionerSettings';
 import ClusterPlaceholderContainer from './ClusterPlaceholderContainer';
+import { Redirect, RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
-  setCurrentView: (x: string) => void,
+type PropsType = RouteComponentProps & {
   projectId: number | null,
 };
 
@@ -19,7 +19,7 @@ type StateType = {
   infras: InfraType[],
 };
 
-export default class Dashboard extends Component<PropsType, StateType> {
+class Dashboard extends Component<PropsType, StateType> {
   state = {
     infras: [] as InfraType[],
   }
@@ -49,13 +49,11 @@ export default class Dashboard extends Component<PropsType, StateType> {
   }
 
   onShowProjectSettings = () => {
-    let { setCurrentView } = this.props;
-    setCurrentView('project-settings');
+    this.props.history.push("project-settings");
   }
 
   render() {
     let { currentProject, currentCluster } = this.context;
-    let { setCurrentView } = this.props;
     let { infras } = this.state;
     let { onShowProjectSettings } = this;
     return (
@@ -103,14 +101,11 @@ export default class Dashboard extends Component<PropsType, StateType> {
                     This project currently has no clusters conncted.
                     </Banner>
                   <ProvisionerSettings 
-                    setCurrentView={setCurrentView} 
                     infras={infras}
                   />
                 </>
               ) : (
-                <ClusterPlaceholderContainer
-                  setCurrentView={this.props.setCurrentView} 
-                />
+                <ClusterPlaceholderContainer/>
               )
             }
           </DashboardWrapper>
@@ -122,6 +117,8 @@ export default class Dashboard extends Component<PropsType, StateType> {
 
 Dashboard.contextType = Context;
 
+export default withRouter(Dashboard);
+
 const DashboardWrapper = styled.div`
   padding-bottom: 100px;
 `;

dashboard/src/main/home/new-project/NewProject.tsx

@@ -9,9 +9,7 @@ import InputRow from 'components/values-form/InputRow';
 import Helper from 'components/values-form/Helper';
 import ProvisionerSettings from '../provisioner/ProvisionerSettings';
 
-type PropsType = {
-  setCurrentView: (x: string, data?: any) => void,
-};
+type PropsType = {};
 
 type StateType = {
   projectName: string,
@@ -25,7 +23,6 @@ export default class NewProject extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { setCurrentView } = this.props;
     let { projectName } = this.state;
     return (
       <StyledNewProject>
@@ -54,7 +51,6 @@ export default class NewProject extends Component<PropsType, StateType> {
         </InputWrapper>
         <ProvisionerSettings 
           isInNewProject={true}
-          setCurrentView={setCurrentView} 
           projectName={projectName}
         />
         <Br />

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -8,9 +8,7 @@ import TabRegion from 'components/TabRegion';
 import Heading from 'components/values-form/Heading';
 import Helper from 'components/values-form/Helper';
 
-type PropsType = {
-  setCurrentView: (x: string) => void,
-}
+type PropsType = {};
 
 type StateType = {
   projectName: string,
@@ -49,9 +47,8 @@ export default class ProjectSettings extends Component<PropsType, StateType> {
 
           <DeleteButton
             onClick={() => {
-              this.context.setCurrentModal('UpdateProjectModal', {
+              this.context.setCurrentModal("UpdateProjectModal", {
                 currentProject: this.context.currentProject,
-                setCurrentView: this.props.setCurrentView,
               });
             }}
           >

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

@@ -13,12 +13,12 @@ import Helper from 'components/values-form/Helper';
 import Heading from 'components/values-form/Heading';
 import SaveButton from 'components/SaveButton';
 import CheckboxList from 'components/values-form/CheckboxList';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   setSelectedProvisioner: (x: string | null) => void,
   handleError: () => void,
   projectName: string,
-  setCurrentView: (x: string | null, data?: any) => void,
   infras: InfraType[],
 };
 
@@ -59,7 +59,7 @@ const regionOptions = [
 ];
 
 // TODO: Consolidate across forms w/ HOC
-export default class AWSFormSection extends Component<PropsType, StateType> {
+class AWSFormSection extends Component<PropsType, StateType> {
   state = {
     awsRegion: 'us-east-1',
     awsAccessId: '',
@@ -185,7 +185,7 @@ export default class AWSFormSection extends Component<PropsType, StateType> {
 
   provisionEKS = () => {
     console.log('Provisioning EKS');
-    let { setCurrentView, handleError } = this.props;
+    let { handleError } = this.props;
     let { awsAccessId, awsSecretKey, awsRegion } = this.state;
     let { currentProject } = this.context;
 
@@ -210,14 +210,14 @@ export default class AWSFormSection extends Component<PropsType, StateType> {
           handleError();
           return;
         }
-        setCurrentView('provisioner');
+        this.props.history.push("provisioner");
       })
     })
   }
 
   // TODO: handle generically (with > 2 steps)
   onCreateAWS = () => {
-    let { projectName, setCurrentView } = this.props;
+    let { projectName } = this.props;
     let { selectedInfras } = this.state;
 
     if (!projectName) {
@@ -226,7 +226,7 @@ export default class AWSFormSection extends Component<PropsType, StateType> {
         this.provisionECR(this.provisionEKS);
       } else if (selectedInfras[0].value === 'ecr') {
         // Case: project exists, only provision ECR
-        this.provisionECR(() => setCurrentView('provisioner'));
+        this.provisionECR(() => this.props.history.push("provisioner"));
       } else {
         // Case: project exists, only provision EKS
         this.provisionEKS();
@@ -238,7 +238,7 @@ export default class AWSFormSection extends Component<PropsType, StateType> {
       } else if (selectedInfras[0].value === 'ecr') {
         // Case: project DNE, only provision ECR
         this.createProject(() => this.provisionECR(() => {
-          setCurrentView('provisioner');
+          this.props.history.push("provisioner");
         }));
       } else {
         // Case: project DNE, only provision EKS
@@ -324,6 +324,8 @@ export default class AWSFormSection extends Component<PropsType, StateType> {
 
 AWSFormSection.contextType = Context;
 
+export default withRouter(AWSFormSection);
+
 const Padding = styled.div`
   height: 15px;
 `;

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

@@ -8,23 +8,23 @@ import { Context } from 'shared/Context';
 
 import SaveButton from 'components/SaveButton';
 import CheckboxList from 'components/values-form/CheckboxList';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   projectName: string,
-  setCurrentView: (x: string, data?: any) => void,
 };
 
 type StateType = {
   buttonStatus: string,
 };
 
-export default class ExistingClusterSection extends Component<PropsType, StateType> {
+class ExistingClusterSection extends Component<PropsType, StateType> {
   state = {
     buttonStatus: '',
   }
 
   onCreateProject = () => {
-    let { projectName, setCurrentView } = this.props;
+    let { projectName } = this.props;
     let { user, setProjects, setCurrentProject } = this.context;
 
     this.setState({ buttonStatus: 'loading' });
@@ -45,7 +45,8 @@ export default class ExistingClusterSection extends Component<PropsType, StateTy
                 return el.name === projectName;
               });
               setCurrentProject(proj);
-              setCurrentView('dashboard', null);
+
+              this.props.history.push("dashboard")
             } 
           }
         });
@@ -78,6 +79,8 @@ export default class ExistingClusterSection extends Component<PropsType, StateTy
 
 ExistingClusterSection.contextType = Context;
 
+export default withRouter(ExistingClusterSection);
+
 const Padding = styled.div`
   height: 15px;
 `;

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

@@ -13,12 +13,12 @@ import Helper from 'components/values-form/Helper';
 import Heading from 'components/values-form/Heading';
 import SaveButton from 'components/SaveButton';
 import CheckboxList from 'components/values-form/CheckboxList';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   setSelectedProvisioner: (x: string | null) => void,
   handleError: () => void,
   projectName: string,
-  setCurrentView: (x: string | null, data?: any) => void,
   infras: InfraType[],
 };
 
@@ -62,7 +62,7 @@ const regionOptions = [
   { value: 'us-west4', label: 'us-west4' },
 ]
 
-export default class GCPFormSection extends Component<PropsType, StateType> {
+class GCPFormSection extends Component<PropsType, StateType> {
   state = {
     gcpRegion: 'us-east1',
     gcpProjectId: '',
@@ -171,7 +171,7 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
 
   provisionGKE = (id: number) => {
     console.log('Provisioning GKE');
-    let { setCurrentView, handleError } = this.props;
+    let { handleError } = this.props;
     let { currentProject } = this.context;
 
     let clusterName = `${currentProject.name}-cluster`
@@ -184,12 +184,11 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
         handleError();
         return;
       }
-      setCurrentView('provisioner');
+      this.props.history.push("provisioner");
     })
   }
 
   handleCreateFlow = () => {
-    let { setCurrentView } = this.props;
     let { selectedInfras, gcpKeyData, gcpProjectId, gcpRegion } = this.state;
     let { currentProject } = this.context;
     api.createGCPIntegration('<token>', {
@@ -208,7 +207,7 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
           this.provisionGCR(id, () => this.provisionGKE(id));
         } else if (selectedInfras[0].value === 'gcr') {
           // Case: project exists, only provision GCR
-          this.provisionGCR(id, () => setCurrentView('provisioner'));
+          this.provisionGCR(id, () => this.props.history.push("provisioner"));
         } else {
           // Case: project exists, only provision GKE
           this.provisionGKE(id);
@@ -305,6 +304,8 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
 
 GCPFormSection.contextType = Context;
 
+export default withRouter(GCPFormSection);
+
 const Padding = styled.div`
   height: 15px;
 `;

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

@@ -11,9 +11,9 @@ import GCPFormSection from './GCPFormSection';
 import DOFormSection from './DOFormSection';
 import SaveButton from 'components/SaveButton';
 import ExistingClusterSection from './ExistingClusterSection';
+import { Redirect, RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
-  setCurrentView: (x: string, data?: any) => void,
+type PropsType = RouteComponentProps & {
   isInNewProject?: boolean,
   projectName?: string,
   infras?: InfraType[],
@@ -26,7 +26,7 @@ type StateType = {
 
 const providers = ['aws', 'gcp', 'do',];
 
-export default class NewProject extends Component<PropsType, StateType> {
+class NewProject extends Component<PropsType, StateType> {
   state = {
     selectedProvider: null as string | null,
     infras: [] as InfraType[],
@@ -34,16 +34,15 @@ export default class NewProject extends Component<PropsType, StateType> {
 
   // Handle any submission (pre-status) error
   handleError = () => {
-    let { setCurrentView } = this.props;
     let { setCurrentError } = this.context;
-    setCurrentView('dashboard');
     this.setState({ selectedProvider: null });
     setCurrentError('Provisioning failed. Check your credentials and try again.');
+    this.props.history.push("dashboard");
   }
 
   renderSelectedProvider = () => {
     let { selectedProvider } = this.state;
-    let { projectName, setCurrentView, infras } = this.props;
+    let { projectName, infras } = this.props;
 
     let renderSkipHelper = () => {
       return (
@@ -84,7 +83,6 @@ export default class NewProject extends Component<PropsType, StateType> {
             handleError={this.handleError}
             projectName={projectName}
             infras={infras}
-            setCurrentView={setCurrentView}
             setSelectedProvisioner={(x: string | null) => {
               this.setState({ selectedProvider: x });
             }}
@@ -98,7 +96,6 @@ export default class NewProject extends Component<PropsType, StateType> {
             handleError={this.handleError}
             projectName={projectName}
             infras={infras}
-            setCurrentView={setCurrentView}
             setSelectedProvisioner={(x: string | null) => {
               this.setState({ selectedProvider: x });
             }}
@@ -121,7 +118,6 @@ export default class NewProject extends Component<PropsType, StateType> {
         return (
           <ExistingClusterSection 
             projectName={projectName}
-            setCurrentView={setCurrentView}
           >
             {renderSkipHelper()}
           </ExistingClusterSection>
@@ -192,6 +188,8 @@ export default class NewProject extends Component<PropsType, StateType> {
 
 NewProject.contextType = Context;
 
+export default withRouter(NewProject);
+
 const Br = styled.div`
   width: 100%;
   height: 35px;

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

@@ -12,10 +12,10 @@ import { filterOldInfras } from 'shared/common';
 
 import Helper from 'components/values-form/Helper';
 import InfraStatuses from './InfraStatuses';
+import { RouteComponentProps, withRouter } from "react-router";
+import { Link } from "react-router-dom";
 
-type PropsType = {
-  setCurrentView: (x: string) => void,
-}
+type PropsType = RouteComponentProps & {};
 
 type StateType = {
   error: boolean,
@@ -35,7 +35,7 @@ const dummyInfras = [
   { kind: 'ecr', status: 'created', id: 2, project_id: 1 },
 ];
 
-export default class ProvisionerStatus extends Component<PropsType, StateType> {
+class ProvisionerStatus extends Component<PropsType, StateType> {
   state = {
     error: false,
     logs: [] as string[],
@@ -210,8 +210,7 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
         } else if (res.data) {
           let clusters = res.data;
           if (clusters.length > 0) {
-            // console.log('response :', res.data);
-            this.props.setCurrentView('dashboard');
+            this.props.history.push("dashboard");
             // console.log('provision end project: ', this.context.currentProject);
             // console.log('provision end cluster: ', this.context.currentCluster);
             clearInterval(myInterval);
@@ -251,7 +250,6 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
   
   render() {
     let { error, triggerEnd, infras } = this.state;
-    let { setCurrentView } = this.props;
     
     let maxStep = 0;
     let currentStep = 0;
@@ -278,41 +276,42 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
 
     return (
       <StyledProvisioner>
-        {error 
-          ? (
-            <>
-              <TitleSection>
-                <Title><img src={warning} /> Provisioning Error</Title>
-              </TitleSection>
-    
-              <Helper>
-                Porter encountered an error while provisioning.
-                <Link onClick={() => setCurrentView('dashboard')}>
-                  Exit to dashboard
-                </Link> 
-                to try again with new credentials.
-              </Helper>
-            </>
-          ) : (
-            <>
-              <TitleSection>
-                <Title><img src={loading} /> Setting Up Porter</Title>
-              </TitleSection>
-              <Helper>
-                Porter is currently provisioning resources in your cloud provider:
-              </Helper>
-            </>
-          )
-        }
-      
+        {error ? (
+          <>
+            <TitleSection>
+              <Title>
+                <img src={warning} /> Provisioning Error
+              </Title>
+            </TitleSection>
+
+            <Helper>
+              Porter encountered an error while provisioning.
+              <Link to="dashboard">Exit to dashboard</Link>
+              to try again with new credentials.
+            </Helper>
+          </>
+        ) : (
+          <>
+            <TitleSection>
+              <Title>
+                <img src={loading} /> Setting Up Porter
+              </Title>
+            </TitleSection>
+            <Helper>
+              Porter is currently provisioning resources in your cloud provider:
+            </Helper>
+          </>
+        )}
+
         <LoadingBar>
-          <Loaded 
+          <Loaded
             progress={
-              error ? (
-                '0%'
-              ) : (
-                (((currentStep / (maxStep == 0 ? 1 : maxStep)) * 100).toString() + '%')
-              )
+              error
+                ? "0%"
+                : (
+                    (currentStep / (maxStep == 0 ? 1 : maxStep)) *
+                    100
+                  ).toString() + "%"
             }
           />
         </LoadingBar>
@@ -322,9 +321,7 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
           <Wrapper ref={this.parentRef}>{this.renderLogs()}</Wrapper>
         </LogStream>
 
-        <Helper>
-          (Provisioning usually takes around 15 minutes)
-        </Helper>
+        <Helper>(Provisioning usually takes around 15 minutes)</Helper>
       </StyledProvisioner>
     );
   }
@@ -332,6 +329,8 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
 
 ProvisionerStatus.contextType = Context;
 
+export default withRouter(ProvisionerStatus);
+
 const Options = styled.div`
   width: 100%;
   height: 25px;
@@ -361,11 +360,11 @@ const Refresh = styled.div`
   }
 `
 
-const Link = styled.a`
-  cursor: pointer;
-  margin-left: 5px;
-  margin-right: 5px;
-`;
+// const Link = styled.a`
+//   cursor: pointer;
+//   margin-left: 5px;
+//   margin-right: 5px;
+// `;
 
 const Warning = styled.span`
   color: ${(props: { highlight: boolean, makeFlush?: boolean }) => props.highlight ? '#f5cb42' : ''};

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

@@ -7,12 +7,12 @@ import { Context } from 'shared/Context';
 import { ClusterType } from 'shared/types';
 
 import Drawer from './Drawer';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   forceCloseDrawer: boolean,
   releaseDrawer: () => void,
   setWelcome: (x: boolean) => void,
-  setCurrentView: (x: string) => void,
   currentView: string,
   isSelected: boolean,
   forceRefreshClusters: boolean,
@@ -28,7 +28,7 @@ type StateType = {
   prevProjectId: number
 };
 
-export default class ClusterSection extends Component<PropsType, StateType> {
+class ClusterSection extends Component<PropsType, StateType> {
 
   // Need to track initialized for animation mounting
   state = {
@@ -77,7 +77,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
           ) {
             this.setState({ clusters: [] });
             setCurrentCluster(null);
-            this.props.setCurrentView('dashboard');
+            this.props.history.push('dashboard');
           }
         }
       }
@@ -122,7 +122,6 @@ export default class ClusterSection extends Component<PropsType, StateType> {
           toggleDrawer={this.toggleDrawer}
           showDrawer={this.state.showDrawer}
           clusters={this.state.clusters}
-          setCurrentView={this.props.setCurrentView}
         />
       );
     }
@@ -139,7 +138,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     if (clusters.length > 0) {
       return (
         <ClusterSelector isSelected={this.props.isSelected}>
-          <LinkWrapper onClick={() => this.props.setCurrentView('cluster-dashboard')}>
+          <LinkWrapper onClick={() => this.props.history.push('cluster-dashboard')}>
             <ClusterIcon><i className="material-icons">device_hub</i></ClusterIcon>
             <ClusterName>{currentCluster && currentCluster.name}</ClusterName>
           </LinkWrapper>
@@ -174,6 +173,8 @@ export default class ClusterSection extends Component<PropsType, StateType> {
 
 ClusterSection.contextType = Context;
 
+export default withRouter(ClusterSection);
+
 const Plus = styled.div`
   margin-right: 10px;
   font-size: 15px;

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

@@ -4,21 +4,21 @@ import close from 'assets/close.png';
 
 import { Context } from 'shared/Context';
 import { ClusterType } from 'shared/types';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   toggleDrawer: () => void,
   showDrawer: boolean,
   clusters: ClusterType[],
-  setCurrentView: (x: string) => void
 };
 
 type StateType = {
 };
 
-export default class Drawer extends Component<PropsType, StateType> {
+class Drawer extends Component<PropsType, StateType> {
 
   renderClusterList = (): JSX.Element[] | JSX.Element => {
-    let { clusters, setCurrentView } = this.props;
+    let { clusters } = this.props;
     let { currentCluster, setCurrentCluster } = this.context;
 
     if (clusters.length > 0 && currentCluster) {
@@ -34,7 +34,7 @@ export default class Drawer extends Component<PropsType, StateType> {
           <ClusterOption
             key={i}
             active={cluster.name === currentCluster.name}
-            onClick={() => { setCurrentCluster(cluster); setCurrentView('cluster-dashboard') }}
+            onClick={() => { setCurrentCluster(cluster); this.props.history.push('cluster-dashboard') }}
           >
             <ClusterIcon><i className="material-icons">device_hub</i></ClusterIcon>
             <ClusterName>{cluster.name}</ClusterName>
@@ -78,6 +78,8 @@ export default class Drawer extends Component<PropsType, StateType> {
 
 Drawer.contextType = Context;
 
+export default withRouter(Drawer);
+
 const Plus = styled.div`
   margin-right: 10px;
   font-size: 15px;

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

@@ -4,10 +4,10 @@ import gradient from 'assets/gradient.jpg';
 
 import { Context } from 'shared/Context';
 import { ProjectType, InfraType } from 'shared/types';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   currentProject: ProjectType,
-  setCurrentView: (x: string) => void,
   projects: ProjectType[],
 };
 
@@ -15,7 +15,7 @@ type StateType = {
   expanded: boolean
 };
 
-export default class ProjectSection extends Component<PropsType, StateType> {
+class ProjectSection extends Component<PropsType, StateType> {
   state = {
     expanded: false,
   };
@@ -50,7 +50,7 @@ export default class ProjectSection extends Component<PropsType, StateType> {
             <Option
               selected={false}
               lastItem={true}
-              onClick={() => this.props.setCurrentView('new-project')}
+              onClick={() => this.props.history.push('new-project')}
             >
               <ProjectIconAlt>+</ProjectIconAlt>
               <ProjectLabel>Create a Project</ProjectLabel>
@@ -86,7 +86,7 @@ export default class ProjectSection extends Component<PropsType, StateType> {
       );
     }
     return (
-      <InitializeButton onClick={() => this.props.setCurrentView('new-project')}>
+      <InitializeButton onClick={() => this.props.history.push('new-project')}>
         <Plus>+</Plus> Create a Project
       </InitializeButton>
     );
@@ -95,6 +95,8 @@ export default class ProjectSection extends Component<PropsType, StateType> {
 
 ProjectSection.contextType = Context;
 
+export default withRouter(ProjectSection);
+
 const ProjectLabel = styled.div`
   overflow: hidden;
   white-space: nowrap;

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

@@ -4,9 +4,7 @@ import styled from 'styled-components';
 import { Context } from 'shared/Context';
 import ProjectSection from './ProjectSection';
 
-type PropsType = {
-  setCurrentView: (x: string) => void,
-};
+type PropsType = {};
 
 type StateType = {
 };
@@ -21,7 +19,6 @@ export default class ProjectSectionContainer extends Component<PropsType, StateT
       <ProjectSection
         currentProject={this.context.currentProject}
         projects={this.context.projects}
-        setCurrentView={this.props.setCurrentView}
       />
     );
   }

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

@@ -11,11 +11,11 @@ import ClusterSection from './ClusterSection';
 import ProjectSectionContainer from './ProjectSectionContainer';
 import loading from 'assets/loading.gif';
 import posthog from 'posthog-js';
+import { RouteComponentProps, withRouter } from 'react-router';
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   forceSidebar: boolean,
   setWelcome: (x: boolean) => void,
-  setCurrentView: (x: string) => void,
   currentView: string,
   forceRefreshClusters: boolean,
   setRefreshClusters: (x: boolean) => void,
@@ -29,7 +29,7 @@ type StateType = {
   forceCloseDrawer: boolean
 };
 
-export default class Sidebar extends Component<PropsType, StateType> {
+class Sidebar extends Component<PropsType, StateType> {
 
   // Need closeDrawer to hide drawer on sidebar close
   state = {
@@ -60,7 +60,7 @@ export default class Sidebar extends Component<PropsType, StateType> {
   handleKeyDown = (e: KeyboardEvent): void => {
     if (e.key === 'Meta' || e.key === 'Control') {
       this.setState({ pressingCtrl: true });
-    } else if (e.keyCode === 220 && this.state.pressingCtrl) {
+    } else if (e.code === "Backslash" && this.state.pressingCtrl) {
       this.toggleSidebar();
     }
   };
@@ -94,21 +94,21 @@ export default class Sidebar extends Component<PropsType, StateType> {
   };
 
   renderProjectContents = () => {
-    let { currentView, setCurrentView } = this.props;
+    let { currentView } = this.props;
     let { currentProject, setCurrentModal } = this.context;
     if (currentProject) {
       return (
         <>
           <SidebarLabel>Home</SidebarLabel>
           <NavButton
-            onClick={() => (currentView !== 'provisioner') && setCurrentView('dashboard')}
+            onClick={() => (currentView !== 'provisioner') && this.props.history.push("dashboard")}
             selected={currentView === 'dashboard' || currentView === 'provisioner'}
           >
             <Img src={category} />
             Dashboard
           </NavButton>
           <NavButton
-            onClick={() => setCurrentView('templates')}
+            onClick={() => this.props.history.push("templates")}
             selected={currentView === 'templates'}
           >
             <Img src={filter} />
@@ -130,7 +130,7 @@ export default class Sidebar extends Component<PropsType, StateType> {
             return obj.user_id === this.context.user.userId;
           })[0].kind === 'admin' &&
             <NavButton
-              onClick={() => this.props.setCurrentView('project-settings')}
+              onClick={() => this.props.history.push("project-settings")}
               selected={this.props.currentView === 'project-settings'}
             >
               <Img enlarge={true} src={settings} />
@@ -146,7 +146,6 @@ export default class Sidebar extends Component<PropsType, StateType> {
             releaseDrawer={() => this.setState({ forceCloseDrawer: false })}
             setWelcome={this.props.setWelcome}
             currentView={currentView}
-            setCurrentView={setCurrentView}
             isSelected={currentView === 'cluster-dashboard'}
             forceRefreshClusters={this.props.forceRefreshClusters}
             setRefreshClusters={this.props.setRefreshClusters}
@@ -179,9 +178,7 @@ export default class Sidebar extends Component<PropsType, StateType> {
             <i className="material-icons">double_arrow</i>
           </CollapseButton>
 
-          <ProjectSectionContainer 
-            setCurrentView={this.props.setCurrentView}
-          />
+          <ProjectSectionContainer />
 
           <br />
 
@@ -194,6 +191,8 @@ export default class Sidebar extends Component<PropsType, StateType> {
 
 Sidebar.contextType = Context;
 
+export default withRouter(Sidebar);
+
 const ProjectPlaceholder = styled.div`
   background: #ffffff11;
   border-radius: 5px;

dashboard/src/main/home/templates/Templates.tsx

@@ -15,9 +15,7 @@ const tabOptions = [
   { label: 'Community Templates', value: 'community' }
 ];
 
-type PropsType = {
-  setCurrentView: (x: string) => void, // Link to add integration from source selector
-};
+type PropsType = {};
 
 type StateType = {
   currentTemplate: PorterTemplate | null,
@@ -100,7 +98,6 @@ export default class Templates extends Component<PropsType, StateType> {
         <ExpandedTemplate
           currentTemplate={this.state.currentTemplate}
           setCurrentTemplate={(currentTemplate: PorterTemplate) => this.setState({ currentTemplate })}
-          setCurrentView={this.props.setCurrentView}
         />
       );
     }

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

@@ -11,7 +11,6 @@ import Loading from 'components/Loading';
 type PropsType = {
   currentTemplate: PorterTemplate,
   setCurrentTemplate: (x: PorterTemplate) => void,
-  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -60,7 +59,6 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
         <LaunchTemplate
           currentTemplate={this.props.currentTemplate}
           hideLaunch={() => this.setState({ showLaunchTemplate: false })}
-          setCurrentView={this.props.setCurrentView}
           values={this.state.values}
           form={this.state.form}
         />

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

@@ -20,7 +20,6 @@ import { safeDump } from 'js-yaml';
 type PropsType = {
   currentTemplate: any,
   hideLaunch: () => void,
-  setCurrentView: (x: string) => void,
   values: any,
   form: any,
 };
@@ -302,7 +301,6 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
             setSelectedImageUrl={this.setSelectedImageUrl}
             setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
             forceExpanded={true}
-            setCurrentView={this.props.setCurrentView}
           />
           <br />
         </>

dashboard/src/shared/urls.tsx

@@ -0,0 +1,11 @@
+type PorterUrls =
+  | "dashboard"
+  | "templates"
+  | "integrations"
+  | "new-project"
+  | "cluster-dashboard"
+  | "provisioner"
+  | "project-settings";
+
+
+export default PorterUrls;