New routing for Permanent Config (#236)

* Add new frontend routes and sidebar options

* Add backend routes

assets/js/components/App.tsx

@@ -9,6 +9,9 @@ const Dashboard = React.lazy(() => import("./Dashboard/Dashboard"));
 const PlacesPage = React.lazy(() => import("./Dashboard/PlacesPage"));
 const AlertsPage = React.lazy(() => import("./Dashboard/AlertsPage"));
 const AlertDetails = React.lazy(() => import("./Dashboard/AlertDetails"));
+const PendingScreensPage = React.lazy(
+  () => import("./Dashboard/PendingScreensPage")
+);
 
 class AppRoutes extends React.Component {
   render() {
@@ -30,6 +33,8 @@ class AppRoutes extends React.Component {
             <Route path="dashboard" element={<PlacesPage />}></Route>
             <Route path="alerts" element={<AlertsPage />}></Route>
             <Route path="alerts/:id" element={<AlertDetails />}></Route>
+            <Route path="pending" element={<PendingScreensPage />}></Route>
+            <Route path="configure-screens" element={<></>}></Route>
           </Route>
         </Routes>
       </React.Suspense>

assets/js/components/Dashboard/PendingScreensPage.tsx

@@ -0,0 +1,11 @@
+import React, { ComponentType } from "react";
+
+const PendingScreensPage: ComponentType = () => {
+  return (
+    <div>
+      <div className="page-content__header">Pending</div>
+    </div>
+  );
+};
+
+export default PendingScreensPage;

assets/js/components/Dashboard/Sidebar.tsx

@@ -5,6 +5,8 @@ import {
   CollectionFill,
   ExclamationTriangleFill,
   PersonFill,
+  PlusLg,
+  ClockFill,
 } from "react-bootstrap-icons";
 import TSquare from "../../../static/images/t-square.svg";
 
@@ -39,6 +41,20 @@ const Sidebar: ComponentType = () => {
             <span className="nav-link__name">Posted Alerts</span>
           </Button>
         </Link>
+        <Link className="sidebar-link" to="/pending">
+          <Button className={pathname === "pending" ? "selected" : ""}>
+            <ClockFill size={20} className="sidebar-link__icon" />
+            <span className="nav-link__name">Pending</span>
+          </Button>
+        </Link>
+        <Link className="sidebar-link" to="/configure-screens">
+          <Button
+            className={pathname === "configure-screens" ? "selected" : ""}
+          >
+            <PlusLg size={20} className="sidebar-link__icon" />
+            <span className="nav-link__name">Configure</span>
+          </Button>
+        </Link>
         {/* This button slightly different to trigger a reload */}
         <Button href="/" className="takeover-button">
           <ExclamationTriangleFill size={20} className="sidebar-link__icon" />

lib/screenplay_web/controllers/config_controller.ex

@@ -3,6 +3,10 @@ defmodule ScreenplayWeb.ConfigController do
 
   alias Screenplay.Config.PermanentConfig
 
+  def index(conn, _params) do
+    render(conn, "index.html")
+  end
+
   def add(conn, _params) do
     PermanentConfig.add_new_screen()
     conn

lib/screenplay_web/router.ex

@@ -60,6 +60,8 @@ defmodule ScreenplayWeb.Router do
 
     get("/dashboard", DashboardController, :index)
     get("/alerts/*id", AlertsController, :index)
+    get("/pending", ConfigController, :index)
+    get("/configure-screens", ConfigController, :index)
     get("/unauthorized", UnauthorizedController, :index)
   end
 

lib/screenplay_web/templates/config/index.html.eex

@@ -0,0 +1 @@
+<div id="app"></div>

lib/screenplay_web/views/config_view.ex

@@ -0,0 +1,3 @@
+defmodule ScreenplayWeb.ConfigView do
+  use ScreenplayWeb, :view
+end