Move Routes to a component

dashboard/src/containers/Root.tsx

@@ -6,7 +6,7 @@ import Layout from "../components/Layout";
 import store, { history } from "../store";
 import ConfigLoaderContainer from "./ConfigLoaderContainer";
 import HeaderContainer from "./HeaderContainer";
-import Routes from "./Routes";
+import Routes from "./RoutesContainer";
 
 class Root extends React.Component {
   public render() {

dashboard/src/containers/Routes.test.tsx → dashboard/src/containers/RoutesContainer/Routes.test.tsx

@@ -1,13 +1,32 @@
 import { mount } from "enzyme";
+import { createMemoryHistory } from "history";
 import * as React from "react";
-import { Redirect, StaticRouter } from "react-router";
-import NotFound from "../components/NotFound";
+import { StaticRouter } from "react-router";
+import { Redirect, RouteComponentProps } from "react-router-dom";
+
+import NotFound from "../../components/NotFound";
 import Routes from "./Routes";
 
+const emptyRouteComponentProps: RouteComponentProps<{}> = {
+  history: createMemoryHistory(),
+  location: {
+    hash: "",
+    pathname: "",
+    search: "",
+    state: "",
+  },
+  match: {
+    isExact: false,
+    params: {},
+    path: "",
+    url: "",
+  },
+};
+
 it("invalid path should show a 404 error", () => {
   const wrapper = mount(
     <StaticRouter location="/random" context={{}}>
-      <Routes />
+      <Routes {...emptyRouteComponentProps} namespace={"default"} />
     </StaticRouter>,
   );
   expect(wrapper.find(NotFound)).toExist();
@@ -17,7 +36,7 @@ it("invalid path should show a 404 error", () => {
 it("should render a redirect to the default page", () => {
   const wrapper = mount(
     <StaticRouter location="/" context={{}}>
-      <Routes />
+      <Routes {...emptyRouteComponentProps} namespace={"default"} />
     </StaticRouter>,
   );
   expect(wrapper.find(NotFound)).not.toExist();

dashboard/src/containers/RoutesContainer/Routes.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { Redirect, Route, RouteComponentProps, RouteProps, Switch } from "react-router";
+
+import NotFound from "../../components/NotFound";
+import AppList from "../../containers/AppListContainer";
+import AppNew from "../../containers/AppNewContainer";
+import AppUpgrade from "../../containers/AppUpgradeContainer";
+import AppView from "../../containers/AppViewContainer";
+import ChartList from "../../containers/ChartListContainer";
+import ChartView from "../../containers/ChartViewContainer";
+import ClassListContainer from "../../containers/ClassListContainer";
+import { ClassViewContainer } from "../../containers/ClassView";
+import FunctionListContainer from "../../containers/FunctionListContainer";
+import FunctionViewContainer from "../../containers/FunctionViewContainer";
+import InstanceListViewContainer from "../../containers/InstanceListViewContainer";
+import InstanceView from "../../containers/InstanceView";
+import LoginFormContainer from "../../containers/LoginFormContainer";
+import PrivateRouteContainer from "../../containers/PrivateRouteContainer";
+import RepoListContainer from "../../containers/RepoListContainer";
+import ServiceCatalogContainer from "../../containers/ServiceCatalogContainer";
+
+type IRouteComponentPropsAndRouteProps = RouteProps & RouteComponentProps<any>;
+
+const privateRoutes: {
+  [route: string]: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
+} = {
+  "/apps/ns/:namespace": AppList,
+  "/apps/ns/:namespace/:releaseName": AppView,
+  "/apps/ns/:namespace/new/:repo/:id/versions/:version": AppNew,
+  "/apps/ns/:namespace/upgrade/:releaseName": AppUpgrade,
+  "/charts": ChartList,
+  "/charts/:repo": ChartList,
+  "/charts/:repo/:id": ChartView,
+  "/charts/:repo/:id/versions/:version": ChartView,
+  "/config/brokers": ServiceCatalogContainer,
+  "/config/repos": RepoListContainer,
+  "/functions/ns/:namespace": FunctionListContainer,
+  "/functions/ns/:namespace/:name": FunctionViewContainer,
+  "/services/brokers/:brokerName/classes/:className": ClassViewContainer,
+  "/services/brokers/:brokerName/instances/ns/:namespace/:instanceName": InstanceView,
+  "/services/classes": ClassListContainer,
+  "/services/instances/ns/:namespace": InstanceListViewContainer,
+};
+
+// Public routes that don't require authentication
+const routes: {
+  [route: string]: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
+} = {
+  "/login": LoginFormContainer,
+};
+
+interface IRoutesProps extends IRouteComponentPropsAndRouteProps {
+  namespace: string;
+}
+
+class Routes extends React.Component<IRoutesProps> {
+  public render() {
+    return (
+      <Switch>
+        <Route exact={true} path="/" render={this.rootNamespacedRedirect} />
+        {Object.keys(routes).map(route => (
+          <Route key={route} exact={true} path={route} component={routes[route]} />
+        ))}
+        {Object.keys(privateRoutes).map(route => (
+          <PrivateRouteContainer
+            key={route}
+            exact={true}
+            path={route}
+            component={privateRoutes[route]}
+          />
+        ))}
+        {/* If the route doesn't match any expected path redirect to a 404 page  */}
+        <Route component={NotFound} />
+      </Switch>
+    );
+  }
+  private rootNamespacedRedirect = (props: any) => {
+    return <Redirect to={`/apps/ns/${this.props.namespace}`} />;
+  };
+}
+
+export default Routes;

dashboard/src/containers/RoutesContainer/RoutesContainer.tsx

@@ -0,0 +1,11 @@
+import { connect } from "react-redux";
+import { withRouter } from "react-router";
+
+import { IStoreState } from "../../shared/types";
+import Routes from "./Routes";
+
+function mapStateToProps({ namespace }: IStoreState) {
+  return { namespace: namespace.current };
+}
+
+export default withRouter(connect(mapStateToProps)(Routes));

dashboard/src/containers/RoutesContainer/index.ts

@@ -0,0 +1,3 @@
+import RoutesContainer from "./RoutesContainer";
+
+export default RoutesContainer;