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,37 +41,54 @@ 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>;
+}
 
-      <Switch>
+const APP = p => (
-        <Route
+  <div>
-          path="/deployment-groups/:deploymentGroup/services/:service"
-          component={Breadcrumb}
-        />
-        <Route
-          path="/deployment-groups/:deploymentGroup"
-          component={Breadcrumb}
-        />
-        <Route path="/deployment-groups" component={Breadcrumb} />
-      </Switch>
-      <Switch>
-        <Route
-          path="/deployment-groups/:deploymentGroup/delete"
-          exact
-          component={DeploymentGroupDelete}
-        />
-        <Route
-          path="/deployment-groups/:deploymentGroup/services/:service"
-          component={Menu}
-        />
-        <Route path="/deployment-groups/:deploymentGroup" component={Menu} />
-      </Switch>
 
-      <Route path="/" exact component={rootRedirect} />
+    <Switch>
-      <Route path="/deployment-groups" exact component={DeploymentGroupList} />
+      <Route
+        path="/deployment-groups/:deploymentGroup/services/:service"
+        component={Breadcrumb}
+      />
+      <Route
+        path="/deployment-groups/:deploymentGroup"
+        component={Breadcrumb}
+      />
+      <Route path="/deployment-groups" component={Breadcrumb} />
+    </Switch>
+
+    <Switch>
+      <Route
+        path="/deployment-groups/:deploymentGroup/delete"
+        exact
+        component={DeploymentGroupDelete}
+      />
+      <Route
+        path="/deployment-groups/:deploymentGroup/services/:service"
+        component={Menu}
+      />
+      <Route path="/deployment-groups/:deploymentGroup" component={Menu} />
+    </Switch>
+
+    <Route path="/deployment-groups" exact component={DeploymentGroupList} />
+
+    <Route
+      path="/deployment-groups/:deploymentGroup/services-list"
+      component={ServicesMenu}
+    />
+
+    <Route
+      path="/deployment-groups/:deploymentGroup/services-topology"
+      component={ServicesMenu}
+    />
+
+    <Switch>
       <Route
         path="/deployment-groups/:deploymentGroup/delete"
         exact
@@ -79,74 +96,56 @@ const Router = (
       />
 
       <Route
-        path="/deployment-groups/:deploymentGroup"
+        path="/deployment-groups/~create/:stage?"
         exact
-        component={deploymentGroupRedirect}
+        component={DeploymentGroupCreate}
+      />
+      <Route
+        path="/deployment-groups/~import/:slug"
+        exact
+        component={DeploymentGroupImport}
       />
 
       <Route
-        path="/deployment-groups/:deploymentGroup/services/:service"
+        path="/deployment-groups/:deploymentGroup/instances"
         exact
-        component={serviceRedirect}
+        component={InstanceList}
+      />
+
+      <Route
+        path="/deployment-groups/:deploymentGroup/manifest/:stage?"
+        exact
+        component={Manifest}
       />
 
       <Route
         path="/deployment-groups/:deploymentGroup/services-list"
-        component={ServicesMenu}
+        component={ServiceList}
       />
 
       <Route
         path="/deployment-groups/:deploymentGroup/services-topology"
-        component={ServicesMenu}
+        component={ServicesTopology}
       />
 
-      <Switch>
+      <Route
-        <Route
+        path="/deployment-groups/:deploymentGroup/services/:service/instances"
-          path="/deployment-groups/~create/:stage?"
+        exact
-          exact
+        component={InstanceList}
-          component={DeploymentGroupCreate}
+      />
-        />
-        <Route
-          path="/deployment-groups/~import/:slug"
-          exact
-          component={DeploymentGroupImport}
-        />
 
-        <Route
+      <Route
-          path="/deployment-groups/:deploymentGroup/services"
+        path="/deployment-groups/:deploymentGroup/services/:service"
-          exact
+        component={serviceRedirect}
-          component={deploymentGroupRedirect}
+      />
-        />
 
-        <Route
+      <Route
-          path="/deployment-groups/:deploymentGroup/instances"
+        path="/deployment-groups/:deploymentGroup"
-          exact
+        component={deploymentGroupRedirect}
-          component={InstanceList}
+      />
-        />
+    </Switch>
-
-        <Route
-          path="/deployment-groups/:deploymentGroup/manifest/:stage?"
-          exact
-          component={Manifest}
-        />
-
-        <Route
-          path="/deployment-groups/:deploymentGroup/services-list"
-          component={ServiceList}
-        />
-
-        <Route
-          path="/deployment-groups/:deploymentGroup/services-topology"
-          component={ServicesTopology}
-        />
-
-        <Route
-          path="/deployment-groups/:deploymentGroup/services/:service/instances"
-          exact
-          component={InstanceList}
-        />
-      </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>
 );