Add select/create menu to navbar, move Add goal button

alan-turing-institute · Mar 11, 2022 · e24699f · e24699f
1 parent 14ffced
commit e24699f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 41 deletions.
diff --git a/frontend/src/components/CaseContainer.js b/frontend/src/components/CaseContainer.js
@@ -1,6 +1,14 @@
 import React, { Component } from "react";
 import { useParams } from "react-router-dom";
-import { Grid, Box, DropButton, TextInput, Layer, Button } from "grommet";
+import {
+  Grid,
+  Box,
+  DropButton,
+  Heading,
+  TextInput,
+  Layer,
+  Button,
+} from "grommet";
 import { grommet } from "grommet/themes";
 import { FormSearch, FormClose, ZoomIn, ZoomOut } from "grommet-icons";
 import { deepMerge } from "grommet/utils";
@@ -10,7 +18,6 @@ import MermaidChart from "./Mermaid";
 import configData from "../config.json";
 
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-import CaseSelector from "./CaseSelector.js";
 import ItemViewer from "./ItemViewer.js";
 import ItemEditor from "./ItemEditor.js";
 import ItemCreator from "./ItemCreator.js";
@@ -303,13 +310,13 @@ class CaseContainer extends Component {
       return (
         <Box>
           <Grid
-            rows={["3px", "flex", "xxsmall"]} //{['xxsmall', 'flex', 'xxsmall']}
+            rows={["auto", "flex", "xxsmall"]}
             columns={["flex", "20%"]}
-            gap="medium"
+            gap="none"
             areas={[
-              { name: "header", start: [0, 0], end: [0, 0] },
-              { name: "main", start: [0, 1], end: [0, 1] },
-              { name: "right", start: [1, 1], end: [1, 1] },
+              { name: "header", start: [0, 0], end: [1, 0] },
+              { name: "main", start: [0, 1], end: [1, 1] },
+              { name: "topright", start: [1, 0], end: [1, 0] },
               { name: "footer", start: [0, 2], end: [1, 2] },
             ]}
           >
@@ -325,6 +332,40 @@ class CaseContainer extends Component {
               this.state.createItemType &&
               this.state.createItemParentId &&
               this.createLayer()}
+
+            <Box
+              gridArea="header"
+              pad={{
+                horizontal: "small",
+                top: "small",
+                bottom: "none",
+              }}
+            >
+              <Heading level={2}>{this.state.assurance_case.name}</Heading>
+            </Box>
+
+            <Box
+              direction="column"
+              pad={{
+                horizontal: "small",
+                top: "small",
+                bottom: "small",
+              }}
+              gridArea="topright"
+            >
+              <DropButton
+                label="Add Goal"
+                dropAlign={{ top: "bottom", right: "right" }}
+                dropContent={
+                  <ItemCreator
+                    type="TopLevelNormativeGoal"
+                    parentId={this.state.id}
+                    updateView={this.updateView.bind(this)}
+                  />
+                }
+              />
+            </Box>
+
             <Box
               gridArea="main"
               background={{
@@ -336,11 +377,6 @@ class CaseContainer extends Component {
                 repeat: "repeat-xy",
               }}
             >
-              {/* {this.Example()} */}
-              <Box width={"flex"} height={"30px"}>
-                {" "}
-                <h2> &nbsp;{this.state.assurance_case.name}</h2>{" "}
-              </Box>
               <TransformWrapper initialScale={1} centerOnInit={true}>
                 {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
                   <React.Fragment>
@@ -371,29 +407,7 @@ class CaseContainer extends Component {
                 )}
               </TransformWrapper>
             </Box>
-            {/* {{ color: "#ff0000" }} */}
-
-            <Box
-              direction="column"
-              pad="small"
-              gap="small"
-              gridArea="right"
-              background="light-2"
-            >
-              <CaseSelector />
 
-              <DropButton
-                label="Add Goal"
-                dropAlign={{ top: "bottom", right: "right" }}
-                dropContent={
-                  <ItemCreator
-                    type="TopLevelNormativeGoal"
-                    parentId={this.state.id}
-                    updateView={this.updateView.bind(this)}
-                  />
-                }
-              />
-            </Box>
             <Box gridArea="footer" background="light-5" pad="small">
               &copy; credits
             </Box>

diff --git a/frontend/src/components/CaseSelector.js b/frontend/src/components/CaseSelector.js
@@ -1,4 +1,4 @@
-import { Box, Heading, Select } from "grommet";
+import { Box, Select } from "grommet";
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import configData from "../config.json";
@@ -28,17 +28,17 @@ function CaseSelector() {
   function handleChange(option) {
     const id = option.value.id;
     setValue(id);
-    navigate("/cases/" + id);
+    navigate("/case/" + id);
   }
 
   return (
-    <Box width="medium" className="dropdown">
-      <Heading level={4}>Select Assurance Case</Heading>
+    <Box className="dropdown">
       <Select
         disabled={loading}
+        placeholder="Select or create a case"
         value={value}
         onChange={handleChange}
-        options={items}
+        options={[{ name: "Create new case", id: "new" }, ...items]}
         labelKey="name"
       />
     </Box>

diff --git a/frontend/src/components/Navigation.js b/frontend/src/components/Navigation.js
@@ -1,6 +1,7 @@
 import { Box } from "grommet";
 import React from "react";
 import { NavLink } from "react-router-dom";
+import CaseSelector from "./CaseSelector.js";
 
 function Navigation() {
   return (
@@ -10,7 +11,8 @@ function Navigation() {
           <NavLink className="navbar-brand" to="/">
             Ethical Assurance Platform
           </NavLink>
-          <Box>
+          <Box gap="small" direction="row">
+            <CaseSelector />
             <ul className="navbar-nav ml-auto">
               <li className="nav-item">
                 <NavLink className="nav-link" to="/">

diff --git a/frontend/src/components/Routes.js b/frontend/src/components/Routes.js
@@ -12,7 +12,7 @@ const AllRoutes = () => (
       <Route exact path="/" element={<Home />} />
       <Route path="/case/new" element={<CaseCreator />} />
       <Route path="/case/select" element={<CaseSelector />} />
-      <Route path="/cases">
+      <Route path="/case">
         <Route path=":caseSlug" element={<CaseContainer />} />
       </Route>
     </Routes>