Add the ability to group routes (#42)

* First version of grouping routes

* Switched to new calculation of groups and styled them

* Added group routing based on togglable state

* Updated package-lock

* DB - Moved some components around, added some tests and fixed jest running tests

* DB - Added more test coverage

client/config-overrides.js

@@ -0,0 +1,6 @@
+module.exports = {
+  jest: function(config) {
+    config.testMatch.push("<rootDir>/src/**/{spec,test}.{js,jsx,ts,tsx}");
+    return config;
+  }
+};

client/package.json

@@ -6,18 +6,20 @@
     "bulma": "^0.7.4",
     "bulma-extensions": "^6.2.4",
     "faker": "^4.1.0",
+    "lodash": "^4.17.11",
     "node-sass": "^4.11.0",
     "react": "v16.8.3",
     "react-dom": "v16.8.3",
     "react-json-editor-ajrm": "^2.5.9",
     "react-scripts": "3.0.0",
     "scrollreveal": "^4.0.5",
+    "styled-components": "^4.2.0",
     "uuid": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "REACT_APP_MOCKIT_API_URL=localhost react-scripts test",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "jest": {
@@ -40,6 +42,7 @@
     "dom-testing-library": "^3.19.1",
     "jest-dom": "^3.1.3",
     "nock": "^10.0.6",
+    "react-app-rewired": "^2.1.3",
     "react-testing-library": "^6.1.2"
   }
 }

client/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import useScrollReval from "./hooks/useScrollReveal";
-import RouteList from "./components/RouteList";
+import RouteListStack from "./components/RouteListStack";
+import RouteListGroup from "./components/RouteListGroup";
 import Logo from "./components/Logo";
 
 import { buildRoute, deleteRoute } from "./utils/routes-api";
@@ -9,21 +10,20 @@ import RouteModal from "./components/RouteModal";
 import SettingsModal from "./components/SettingsModal";
 import ConfirmationDialog from "./components/ConfirmationDialog";
 
-import { settings, routes } from "./config/routes.json";
+import { settings, routes as configRoutes } from "./config/routes.json";
 
 import "./scss/index.scss";
 
-export default function({ settings: propSettings }) {
-  useScrollReval([
-    { selector: ".hero .title, .card, .subtitle " },
-    { selector: ".route", options: { duration: 750, distance: "40px", easing: "cubic-bezier(0.5, -0.01, 0, 1.005)", interval: 64, origin: "bottom", viewFactor: 0.32 } }
-  ]);
+export default function({ settings: propSettings, customRoutes }) {
+  useScrollReval([{ selector: ".hero .title, .card, .subtitle " }]);
 
   const [selectedRoute, setSelectedRoute] = useState();
   const [routeToBeRemoved, setRouteToBeRemoved] = useState();
   const [settingsModalVisible, showSettingsModal] = useState(false);
 
-  const { features: { chaosMonkey = false } = {} } = propSettings || settings;
+  const routes = customRoutes || configRoutes;
+
+  const { features: { chaosMonkey = false, groupedRoutes = false } = {} } = propSettings || settings;
 
   return (
     <>
@@ -73,8 +73,17 @@ export default function({ settings: propSettings }) {
             <p className=" mb20 has-text-centered">The chaos monkey is enabled and causing havoc on all APIs...</p>
           </>
         )}
+        {routes.length === 0 && (
+          <p aria-label="no-routes" className="no-routes has-text-centered">
+            No routes found. Click "Add Route" to get started.
+          </p>
+        )}
 
-        <RouteList routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        {groupedRoutes ? (
+          <RouteListGroup routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        ) : (
+          <RouteListStack routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        )}
       </main>
       <footer className="footer" aria-label="Site footer">
         <div className="content has-text-centered">

client/src/components/Route/RouteItem.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const RouteItem = ({ title, value }) => {
+  const buildAriaLabel = label => (label ? `route-${title.toLowerCase()}-${label}` : `route-${title.toLowerCase()}`);
+
+  return (
+    <div className="level-item has-text-centered" aria-label={buildAriaLabel()}>
+      <div>
+        <p className="heading" aria-label={buildAriaLabel("title")}>
+          {title}
+        </p>
+        <p className="title is-size-6" aria-label={buildAriaLabel("value")}>
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default RouteItem;

client/src/components/Route/index.js

@@ -0,0 +1,54 @@
+import React from "react";
+import url from "url";
+import RouteItem from "./RouteItem";
+
+import { MOCKIT_SERVER_URL } from "../../utils/consts";
+
+const Route = ({ routeItem, onRouteDelete, onRouteEdit }) => {
+  const { delay = 0, route, statusCode, httpMethod, disabled = false } = routeItem;
+  const routeClassName = disabled ? "disabled" : "";
+
+  const openRoute = route => {
+    return () => {
+      window.open(url.resolve(MOCKIT_SERVER_URL, route), "_blank");
+    };
+  };
+
+  const editRoute = event => {
+    event.stopPropagation();
+    onRouteEdit(routeItem);
+  };
+
+  const deleteRoute = event => {
+    event.stopPropagation();
+    onRouteDelete(routeItem);
+  };
+
+  return (
+    <div className="column is-full">
+      <div className={`route ${routeClassName}`} onClick={openRoute(route)} aria-label="Route">
+        <nav className="level">
+          <RouteItem title="Route" value={route} />
+          <RouteItem title="Delay" value={`${delay} ms`} />
+          <RouteItem title="Status Code" value={statusCode} />
+          <RouteItem title="HTTP" value={httpMethod} />
+
+          <div className="level-item has-text-centered">
+            <div>
+              <p className="title is-size-4">
+                <button className="button is-info mr10" onClick={editRoute} aria-label="Edit Route">
+                  <strong>Edit</strong>
+                </button>
+                <button className="button is-danger" onClick={deleteRoute} aria-label="Delete Route">
+                  <strong>Delete</strong>
+                </button>
+              </p>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+};
+
+export default Route;