From 43ab2dd632549797a4633d6a30524cb4f13ca689 Mon Sep 17 00:00:00 2001
From: Markus Hauru <mhauru@turing.ac.uk>
Date: Mon, 30 May 2022 13:42:56 +0100
Subject: [PATCH] Add Create Group to PermissionManager. Also fix a bug in
 CaseContainer.

---
 frontend/src/components/CaseContainer.js      | 28 ++++++-----
 .../src/components/CasePermissionsManager.js  | 29 +++++++----
 frontend/src/components/CreateGroup.js        | 50 +++++++++++++++++++
 frontend/src/components/Groups.js             | 32 +-----------
 frontend/src/components/PermissionSelector.js | 12 ++---
 5 files changed, 92 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/components/CreateGroup.js

diff --git a/frontend/src/components/CaseContainer.js b/frontend/src/components/CaseContainer.js
index 0c230e89..2657d281 100644
--- a/frontend/src/components/CaseContainer.js
+++ b/frontend/src/components/CaseContainer.js
@@ -50,19 +50,21 @@ class CaseContainer extends Component {
       },
     };
     const res = await fetch(this.url + id, requestOptions);
-    const json_response = await res.json();
-    if (
-      JSON.stringify(this.state.assurance_case) !==
-      JSON.stringify(json_response)
-    ) {
-      this.setState({ loading: true });
-      this.setState({
-        assurance_case: json_response,
-      });
-      this.setState({
-        mermaid_md: jsonToMermaid(this.state.assurance_case),
-      });
-      this.setState({ loading: false });
+    if (res.status === 200) {
+      const json_response = await res.json();
+      if (
+        JSON.stringify(this.state.assurance_case) !==
+        JSON.stringify(json_response)
+      ) {
+        this.setState({ loading: true });
+        this.setState({
+          assurance_case: json_response,
+        });
+        this.setState({
+          mermaid_md: jsonToMermaid(this.state.assurance_case),
+        });
+        this.setState({ loading: false });
+      }
     }
   };
 
diff --git a/frontend/src/components/CasePermissionsManager.js b/frontend/src/components/CasePermissionsManager.js
index 130b9839..280de364 100644
--- a/frontend/src/components/CasePermissionsManager.js
+++ b/frontend/src/components/CasePermissionsManager.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { getBaseURL } from "./utils.js";
 import { Box, Button, Form, Heading, Text } from "grommet";
+import CreateGroup from "./CreateGroup.js";
 import PermissionSelector from "./PermissionSelector.js";
 import { removeArrayElement } from "./utils.js";
 
@@ -16,7 +17,7 @@ class CasePermissionsManager extends Component {
     };
   }
 
-  componentDidMount() {
+  getGroups() {
     const requestOptions = {
       headers: {
         Authorization: `Token ${localStorage.getItem("token")}`,
@@ -35,6 +36,10 @@ class CasePermissionsManager extends Component {
       });
   }
 
+  componentDidMount() {
+    this.getGroups();
+  }
+
   dialValue(group, assurance_case) {
     if (group.editable_cases.includes(assurance_case.id)) return "Edit";
     if (group.viewable_cases.includes(assurance_case.id)) return "View";
@@ -52,15 +57,15 @@ class CasePermissionsManager extends Component {
   }
 
   renderGroupDials(group) {
-    const initialValue = this.getGroupPermission(group);
-    if (initialValue === undefined)
+    const value = this.getGroupPermission(group);
+    if (value === undefined)
       return <Text key={group.id}>Loading permissions...</Text>;
     return (
       <Box key={group.id} direction="row">
         <Text>{group.name}</Text>
         <PermissionSelector
           name={group.name}
-          initialValue={initialValue}
+          value={value}
           setValue={(value) => this.setGroupPermission(group, value)}
         />
       </Box>
@@ -104,13 +109,19 @@ class CasePermissionsManager extends Component {
 
   render() {
     return (
-      <Form onSubmit={this.onSubmit.bind(this)}>
-        <Heading level={3}>Group permissions</Heading>
+      <Box>
+        <Form onSubmit={this.onSubmit.bind(this)}>
+          <Heading level={3}>Group permissions</Heading>
+          <Box pad="medium" gap="small" fill>
+            {this.state.groups.map(this.renderGroupDials.bind(this))}
+            <Button type="submit" label="Submit" />
+          </Box>
+        </Form>
         <Box pad="medium" gap="small" fill>
-          {this.state.groups.map(this.renderGroupDials.bind(this))}
-          <Button type="submit" label="Submit" />
+          <Heading level={4}>Create a new group</Heading>
+          <CreateGroup afterSubmit={this.getGroups.bind(this)} />
         </Box>
-      </Form>
+      </Box>
     );
   }
 }
diff --git a/frontend/src/components/CreateGroup.js b/frontend/src/components/CreateGroup.js
new file mode 100644
index 00000000..7684ae39
--- /dev/null
+++ b/frontend/src/components/CreateGroup.js
@@ -0,0 +1,50 @@
+import { Box, Button, Form, FormField, TextInput } from "grommet";
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { getBaseURL } from "./utils.js";
+
+class CreateGroup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      newGroupName: "",
+    };
+  }
+
+  async submitCreateGroup() {
+    const requestOptions = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Token ${localStorage.getItem("token")}`,
+      },
+      body: JSON.stringify({ name: this.state.newGroupName }),
+    };
+
+    await fetch(`${getBaseURL()}/groups/`, requestOptions);
+    this.setState({ newGroupName: "" });
+    this.props.afterSubmit();
+  }
+
+  render() {
+    return (
+      <Form onSubmit={this.submitCreateGroup.bind(this)}>
+        <Box gap="small" direction="row">
+          <FormField margin={{ left: "small" }}>
+            <TextInput
+              plain={true}
+              value={this.state.newGroupName}
+              name="new-group-name"
+              onChange={(e) => this.setState({ newGroupName: e.target.value })}
+            />
+          </FormField>
+          <Button type="submit" label="Create group" />
+        </Box>
+      </Form>
+    );
+  }
+}
+
+export default (props) => (
+  <CreateGroup {...props} params={useParams()} navigate={useNavigate()} />
+);
diff --git a/frontend/src/components/Groups.js b/frontend/src/components/Groups.js
index c7bdf724..738d47f8 100644
--- a/frontend/src/components/Groups.js
+++ b/frontend/src/components/Groups.js
@@ -15,6 +15,7 @@ import {
   joinCommaSeparatedString,
   splitCommaSeparatedString,
 } from "./utils.js";
+import CreateGroup from "./CreateGroup.js";
 
 class Groups extends React.Component {
   constructor(props) {
@@ -42,21 +43,6 @@ class Groups extends React.Component {
     await this.setState({ userList: users });
   }
 
-  async submitCreateGroup() {
-    const requestOptions = {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Token ${localStorage.getItem("token")}`,
-      },
-      body: JSON.stringify({ name: this.state.newGroupName }),
-    };
-
-    await fetch(`${getBaseURL()}/groups/`, requestOptions);
-    this.setState({ newGroupName: "" });
-    this.getGroups();
-  }
-
   async getGroups() {
     const response = await fetch(`${getBaseURL()}/groups/`, {
       method: "GET",
@@ -219,21 +205,7 @@ class Groups extends React.Component {
           <ul>
             {this.state.ownerGroups.map(this.ownerGroupLine.bind(this))}
             <li>
-              <Form onSubmit={this.submitCreateGroup.bind(this)}>
-                <Box gap="small" direction="row">
-                  <FormField margin={{ left: "small" }}>
-                    <TextInput
-                      plain={true}
-                      value={this.state.newGroupName}
-                      name="new-group-name"
-                      onChange={(e) =>
-                        this.setState({ newGroupName: e.target.value })
-                      }
-                    />
-                  </FormField>
-                  <Button type="submit" label="Create group" />
-                </Box>
-              </Form>
+              <CreateGroup afterSubmit={this.getGroups.bind(this)} />
             </li>
           </ul>
         </Box>
diff --git a/frontend/src/components/PermissionSelector.js b/frontend/src/components/PermissionSelector.js
index 3764c8f2..8a20a7e5 100644
--- a/frontend/src/components/PermissionSelector.js
+++ b/frontend/src/components/PermissionSelector.js
@@ -5,14 +5,12 @@ import { Box, RadioButton } from "grommet";
 class PermissionSelector extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      value: props.initialValue,
-    };
   }
 
   render() {
     // Grommet also has an element called RadioButtonGroup, which should be perfect for
-    // this, but as of 2022-05-26 it's too buggy to use.
+    // this, but as of 2022-05-26 it's too buggy to use: Having more than one of them on
+    // the same page causes the onChange events of one to affect the others.
     return (
       <Box
         key={this.props.name}
@@ -23,7 +21,7 @@ class PermissionSelector extends Component {
         <RadioButton
           name={this.props.name}
           label="None"
-          checked={this.state.value === "None"}
+          checked={this.props.value === "None"}
           onChange={(e) => {
             if (e.target.checked) this.setState({ value: "None" });
             this.props.setValue("None");
@@ -32,7 +30,7 @@ class PermissionSelector extends Component {
         <RadioButton
           name={this.props.name}
           label="View"
-          checked={this.state.value === "View"}
+          checked={this.props.value === "View"}
           onChange={(e) => {
             if (e.target.checked) this.setState({ value: "View" });
             this.props.setValue("View");
@@ -41,7 +39,7 @@ class PermissionSelector extends Component {
         <RadioButton
           name={this.props.name}
           label="Edit"
-          checked={this.state.value === "Edit"}
+          checked={this.props.value === "Edit"}
           onChange={(e) => {
             if (e.target.checked) this.setState({ value: "Edit" });
             this.props.setValue("Edit");