New Settings > Capabilities page (#356)

CERT-Polska · May 6, 2021 · ec39e52 · ec39e52
1 parent df15e16
commit ec39e52
Show file tree

Hide file tree

Showing 11 changed files with 370 additions and 10 deletions.
diff --git a/mwdb/web/package-lock.json b/mwdb/web/package-lock.json
diff --git a/mwdb/web/package.json b/mwdb/web/package.json
@@ -4,12 +4,13 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
-    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
     "@fortawesome/free-regular-svg-icons": "^5.1.0-11",
+    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
     "@fortawesome/react-fontawesome": "0.1.0-11",
     "@mwdb-web/commons": "file:src/commons",
     "axios": "^0.21.1",
     "bootstrap": "4.3.1",
+    "bootstrap-select": "^1.13.18",
     "brace": "^0.11.1",
     "d3": "^5.10.0",
     "dagre-d3": "^0.6.3",

diff --git a/mwdb/web/src/commons/package.json b/mwdb/web/src/commons/package.json
@@ -5,6 +5,7 @@
     "version": "2.3.0",
     "peerDependencies": {
         "@fortawesome/react-fontawesome": "*",
+        "bootstrap-select": "*",
         "lodash": "*",
         "react": "*",
         "react-ace": "*",

diff --git a/mwdb/web/src/commons/ui/BootstrapSelect.js b/mwdb/web/src/commons/ui/BootstrapSelect.js
@@ -0,0 +1,45 @@
+import React, { useCallback, useLayoutEffect, useRef } from "react";
+
+import "bootstrap-select";
+import "bootstrap-select/dist/css/bootstrap-select.css";
+import $ from "jquery";
+
+export default function BootstrapSelect({
+    children,
+    onChange,
+    noneSelectedText,
+    ...props
+}) {
+    const ref = useRef(null);
+    const setRef = useCallback((node) => {
+        // Initialize the select element when mounted
+        if (node) {
+            const selectElement = $(node);
+            selectElement.selectpicker();
+        }
+        // Save a reference to the node
+        ref.current = node;
+    }, []);
+
+    useLayoutEffect(() => {
+        // Bind onChange event handler and unbind the old/unmounted one
+        const selectElement = $(ref.current);
+        selectElement.on("changed.bs.select", onChange);
+        return () => {
+            selectElement.off("changed.bs.select", onChange);
+        };
+    }, [onChange]);
+
+    useLayoutEffect(() => {
+        // Re-render selectpicker when props are changed
+        // FIX: noneSelectedText doesn't update on refresh itself
+        $(ref.current).selectpicker({ noneSelectedText });
+        $(ref.current).selectpicker("refresh");
+    }, [props, noneSelectedText]);
+
+    return (
+        <select ref={setRef} {...props}>
+            {children}
+        </select>
+    );
+}
diff --git a/mwdb/web/src/commons/ui/GroupBadge.js b/mwdb/web/src/commons/ui/GroupBadge.js
@@ -1,7 +1,17 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-export default function GroupBadge({ group }) {
+export default function GroupBadge({ group, clickable }) {
+    const badge = (
+        <span
+            className={`badge badge-${group.private ? "primary" : "secondary"}`}
+        >
+            {group.name}
+        </span>
+    );
+
+    if (!clickable) return badge;
+
     return (
         <Link
             to={
@@ -10,13 +20,7 @@ export default function GroupBadge({ group }) {
                     : `/profile/group/${group.name}`
             }
         >
-            <span
-                className={`badge badge-${
-                    group.private ? "primary" : "secondary"
-                }`}
-            >
-                {group.name}
-            </span>
+            {badge}
         </Link>
     );
 }
diff --git a/mwdb/web/src/commons/ui/index.js b/mwdb/web/src/commons/ui/index.js
@@ -2,6 +2,7 @@ import React from "react";
 
 export { default as APIKeyList } from "./APIKeyList";
 export { default as Autocomplete } from "./Autocomplete";
+export { default as BootstrapSelect } from "./BootstrapSelect";
 export { default as ConfirmationModal } from "./ConfirmationModal";
 export { default as DataTable } from "./DataTable";
 export { default as DateString } from "./DateString";

diff --git a/mwdb/web/src/components/Profile/Views/ProfileCapabilities.js b/mwdb/web/src/components/Profile/Views/ProfileCapabilities.js
@@ -23,7 +23,7 @@ function CapabilitiesTable({ profile }) {
                                         group.capabilities.includes(cap)
                                     )
                                     .map((group) => (
-                                        <GroupBadge group={group} />
+                                        <GroupBadge group={group} clickable />
                                     ))}
                             </div>
                         </td>

diff --git a/mwdb/web/src/components/Profile/Views/ProfileGroup.js b/mwdb/web/src/components/Profile/Views/ProfileGroup.js
@@ -84,6 +84,7 @@ export default function ProfileGroup({ profile }) {
                                         name: login,
                                         private: true,
                                     }}
+                                    clickable
                                 />
                             ))}
                     </ProfileItem>
@@ -98,6 +99,7 @@ export default function ProfileGroup({ profile }) {
                                         name: login,
                                         private: true,
                                     }}
+                                    clickable
                                 />
                             ))}
                     </ProfileItem>

diff --git a/mwdb/web/src/components/Settings/SettingsView.js b/mwdb/web/src/components/Settings/SettingsView.js
@@ -22,6 +22,7 @@ import UserCreate from "./Views/UserCreate";
 import GroupRegister from "./Views/GroupRegister";
 import AttributeDefine from "./Views/AttributeDefine";
 import UserView from "./Views/UserView";
+import AccessControl from "./Views/AccessControl";
 
 function SettingsNav() {
     const auth = useContext(AuthContext);
@@ -162,6 +163,13 @@ export default function SettingsView(props) {
                                 <GroupUpdate />
                             </AdministrativeRoute>
 
+                            <AdministrativeRoute
+                                exact
+                                path="/admin/capabilities"
+                            >
+                                <AccessControl />
+                            </AdministrativeRoute>
+
                             <AttributeRoute exact path="/admin/attributes">
                                 <ManageAttributes />
                             </AttributeRoute>