UI: Support removal of relationships (#340)

* UI: Support removal of relationships * Apply suggestions from code review
CERT-Polska · Apr 7, 2021 · 379655c · 379655c
1 parent ddda151
commit 379655c
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/mwdb/web/src/commons/api/index.js b/mwdb/web/src/commons/api/index.js
@@ -122,6 +122,10 @@ function addObjectRelation(parent, child) {
     return axios.put(`/object/${parent}/child/${child}`);
 }
 
+function removeObjectRelation(parent, child) {
+    return axios.delete(`/object/${parent}/child/${child}`);
+}
+
 function getObjectShares(id) {
     return axios.get(`/object/${id}/share`);
 }
@@ -507,6 +511,7 @@ export default {
     getConfigStats,
     getObjectRelations,
     addObjectRelation,
+    removeObjectRelation,
     getRemoteObject,
     getRemoteObjectList,
     getRemoteObjectCount,

diff --git a/mwdb/web/src/components/ShowObject/Views/RelationsBox.js b/mwdb/web/src/components/ShowObject/Views/RelationsBox.js
@@ -3,18 +3,26 @@ import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { APIContext } from "@mwdb-web/commons/api/context";
+import { AuthContext } from "@mwdb-web/commons/auth/context";
 import { ObjectContext } from "@mwdb-web/commons/context";
 import {
     ObjectLink,
     ActionCopyToClipboard,
+    ConfirmationModal,
     TagList,
 } from "@mwdb-web/commons/ui";
 import RelationsAddModal from "../Actions/RelationsAddModal";
 
 function RelationsBox(props) {
     const api = useContext(APIContext);
+    const auth = useContext(AuthContext);
     const context = useContext(ObjectContext);
     const [isAttributeAddModalOpen, setAttributeAddModalOpen] = useState(false);
+    const [isAttributeDeleteModalOpen, setAttributeDeleteModalOpen] = useState(
+        false
+    );
+    const [disabledModalButton, setDisabledModalButton] = useState(false);
+    const [relationToRemove, setRelationToRemove] = useState({});
     const [modalError, setModalError] = useState("");
 
     async function addObjectRelations(relation, value) {
@@ -23,12 +31,32 @@ function RelationsBox(props) {
                 await api.addObjectRelation(context.object.id, value);
             else if (relation === "parent")
                 await api.addObjectRelation(value, context.object.id);
+        } catch (error) {
+            if (error.response && error.response.status === 404)
+                setModalError("Object not found or incorrect SHA256 hash.");
+            else setModalError(error);
+        } finally {
             context.updateObject();
             setAttributeAddModalOpen(false);
+        }
+    }
+
+    async function removeObjectRelations(relation, value) {
+        try {
+            setDisabledModalButton(true);
+            if (relation === "child")
+                await api.removeObjectRelation(context.object.id, value);
+            else if (relation === "parent")
+                await api.removeObjectRelation(value, context.object.id);
         } catch (error) {
             if (error.response && error.response.status === 404)
                 setModalError("Object not found or incorrect SHA256 hash.");
             else setModalError(error);
+            setDisabledModalButton(false);
+        } finally {
+            context.updateObject();
+            setAttributeDeleteModalOpen(false);
+            setDisabledModalButton(false);
         }
     }
 
@@ -52,6 +80,28 @@ function RelationsBox(props) {
                         tooltipMessage="Copy sha256 to clipboard"
                     />
                 </span>
+                {auth.hasCapability("removing_parents") && (
+                    <span
+                        className="ml-2"
+                        data-toggle="tooltip"
+                        title="Remove relation to parent object."
+                        onClick={() => {
+                            setRelationToRemove({
+                                relation: "parent",
+                                id: parent.id,
+                            });
+                            setAttributeDeleteModalOpen(true);
+                        }}
+                    >
+                        <i>
+                            <FontAwesomeIcon
+                                icon={"trash"}
+                                size="sm"
+                                style={{ cursor: "pointer" }}
+                            />
+                        </i>
+                    </span>
+                )}
             </td>
             <td>
                 <TagList tags={parent.tags} />
@@ -79,6 +129,28 @@ function RelationsBox(props) {
                         tooltipMessage="Copy sha256 to clipboard"
                     />
                 </span>
+                {auth.hasCapability("removing_parents") && (
+                    <span
+                        className="ml-2"
+                        data-toggle="tooltip"
+                        title="Remove relation to child object."
+                        onClick={() => {
+                            setRelationToRemove({
+                                relation: "child",
+                                id: child.id,
+                            });
+                            setAttributeDeleteModalOpen(true);
+                        }}
+                    >
+                        <i>
+                            <FontAwesomeIcon
+                                icon={"trash"}
+                                size="sm"
+                                style={{ cursor: "pointer" }}
+                            />
+                        </i>
+                    </span>
+                )}
             </td>
             <td>
                 <TagList tags={child.tags} />
@@ -128,6 +200,21 @@ function RelationsBox(props) {
                 onError={setModalError}
                 onRequestModalClose={() => setAttributeAddModalOpen(false)}
             />
+            <ConfirmationModal
+                isOpen={isAttributeDeleteModalOpen}
+                disabled={disabledModalButton}
+                onRequestClose={() => setAttributeDeleteModalOpen(false)}
+                onConfirm={() =>
+                    removeObjectRelations(
+                        relationToRemove.relation,
+                        relationToRemove.id
+                    )
+                }
+                message="Are you sure you want to delete this relation?"
+                buttonStyle="btn btn-danger"
+                confirmText="yes"
+                cancelText="no"
+            />
         </div>
     );
 }