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 Loading permissions... ;
return (
{group.name}
this.setGroupPermission(group, value)}
/>
@@ -104,13 +109,19 @@ class CasePermissionsManager extends Component {
render() {
return (
-
+
);
}
}
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 (
+
+
+
+ this.setState({ newGroupName: e.target.value })}
+ />
+
+
+
+
+ );
+ }
+}
+
+export default (props) => (
+
+);
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 {
{this.state.ownerGroups.map(this.ownerGroupLine.bind(this))}
-
-
-
-
- this.setState({ newGroupName: e.target.value })
- }
- />
-
-
-
-
+
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 (
{
if (e.target.checked) this.setState({ value: "None" });
this.props.setValue("None");
@@ -32,7 +30,7 @@ class PermissionSelector extends Component {
{
if (e.target.checked) this.setState({ value: "View" });
this.props.setValue("View");
@@ -41,7 +39,7 @@ class PermissionSelector extends Component {
{
if (e.target.checked) this.setState({ value: "Edit" });
this.props.setValue("Edit");