feat(cp-frontend): Add 404 to router and redirects for not matched routes

packages/cp-frontend/package.json

@@ -6,7 +6,7 @@
   "repository": "github:yldio/joyent-portal",
   "main": "src/index.js",
   "scripts": {
-    "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 react-scripts start",
+    "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
     "start": "PORT=3069 react-scripts start",
     "build": "NODE_ENV=production react-scripts build",
     "lint:css": "echo 0",

packages/cp-frontend/src/containers/deployment-groups/list.js

@@ -90,11 +90,23 @@ const StyledIconButton = styled(IconButton)`
   border: none;
 
   &:hover,
+  &:focus,
   &:active,
   &:active:hover,
   &:active:focus {
     background-color: ${props => props.theme.white};
   }
+
+  &:focus > svg,
+  &:hover > svg {
+    fill: ${props => props.theme.red};
+  }
+
+  &:active > svg,
+  &:active:hover > svg,
+  &:active:focus > svg {
+    fill: ${props => props.theme.redDark};
+  }
 `;
 
 const DeploymentGroupList = ({

packages/cp-frontend/src/router.js

@@ -41,10 +41,15 @@ const serviceRedirect = p =>
       .params.service}/instances`}
   />;
 
-const Router = (
+// TODO component to be designed
-  <BrowserRouter>
+const notFound = p => {
-    <Container>
+  return <p>
-      <Route path="/" component={Header} />
+    NOT FOUND
+  </p>;
+}
+
+const APP = p => (
+  <div>
 
     <Switch>
       <Route
@@ -57,6 +62,7 @@ const Router = (
       />
       <Route path="/deployment-groups" component={Breadcrumb} />
     </Switch>
+
     <Switch>
       <Route
         path="/deployment-groups/:deploymentGroup/delete"
@@ -70,25 +76,7 @@ const Router = (
       <Route path="/deployment-groups/:deploymentGroup" component={Menu} />
     </Switch>
 
-      <Route path="/" exact component={rootRedirect} />
     <Route path="/deployment-groups" exact component={DeploymentGroupList} />
-      <Route
-        path="/deployment-groups/:deploymentGroup/delete"
-        exact
-        component={DeploymentGroupList}
-      />
-
-      <Route
-        path="/deployment-groups/:deploymentGroup"
-        exact
-        component={deploymentGroupRedirect}
-      />
-
-      <Route
-        path="/deployment-groups/:deploymentGroup/services/:service"
-        exact
-        component={serviceRedirect}
-      />
 
     <Route
       path="/deployment-groups/:deploymentGroup/services-list"
@@ -101,6 +89,12 @@ const Router = (
     />
 
     <Switch>
+      <Route
+        path="/deployment-groups/:deploymentGroup/delete"
+        exact
+        component={DeploymentGroupList}
+      />
+
       <Route
         path="/deployment-groups/~create/:stage?"
         exact
@@ -112,12 +106,6 @@ const Router = (
         component={DeploymentGroupImport}
       />
 
-        <Route
-          path="/deployment-groups/:deploymentGroup/services"
-          exact
-          component={deploymentGroupRedirect}
-        />
-
       <Route
         path="/deployment-groups/:deploymentGroup/instances"
         exact
@@ -145,8 +133,19 @@ const Router = (
         exact
         component={InstanceList}
       />
+
+      <Route
+        path="/deployment-groups/:deploymentGroup/services/:service"
+        component={serviceRedirect}
+      />
+
+      <Route
+        path="/deployment-groups/:deploymentGroup"
+        component={deploymentGroupRedirect}
+      />
     </Switch>
 
+    <Switch>
       <Route
         path="/deployment-groups/:deploymentGroup/services-list/:service/scale"
         exact
@@ -169,6 +168,28 @@ const Router = (
         exact
         component={ServiceDelete}
       />
+
+      <Route
+        path="/deployment-groups/:deploymentGroup/services-list"
+        component={deploymentGroupRedirect}
+      />
+      <Route
+        path="/deployment-groups/:deploymentGroup/services-topology"
+        component={deploymentGroupRedirect}
+      />
+    </Switch>
+  </div>
+)
+
+const Router = (
+  <BrowserRouter>
+    <Container>
+      <Route path="/" component={Header} />
+      <Switch>
+        <Route path="/deployment-groups" component={APP} />
+        <Route path="/" exact component={rootRedirect} />
+        <Route path="/*" component={notFound} />
+      </Switch>
     </Container>
   </BrowserRouter>
 );