New profile view (#337)

Co-authored-by: Krzysztof <krzysztof.wielocha@nask.pl>
CERT-Polska · Apr 12, 2021 · 943eeab · 943eeab
1 parent 5e05390
commit 943eeab
Show file tree

Hide file tree

Showing 32 changed files with 924 additions and 319 deletions.
diff --git a/mwdb/web/src/App.js b/mwdb/web/src/App.js
@@ -13,7 +13,6 @@ import ShowTextBlob from "./components/ShowTextBlob";
 import DiffTextBlob from "./components/DiffTextBlob";
 import Upload from "./components/Upload";
 import UserLogin from "./components/UserLogin";
-import UserProfile from "./components/UserProfile";
 import ShowUsers from "./components/ShowUsers";
 import ShowGroups from "./components/ShowGroups";
 import UserCreate from "./components/UserCreate";
@@ -32,6 +31,7 @@ import UserPasswordRecover from "./components/UserPasswordRecover";
 import ShowPendingUsers from "./components/ShowPendingUsers";
 import Docs from "./components/Docs";
 import RemoteViews from "./components/Remote/RemoteViews";
+import ProfileViews from "./components/Profile/ProfileViews";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
@@ -62,7 +62,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
 
-import { AuthContext } from "@mwdb-web/commons/auth";
+import { AuthContext, Capability } from "@mwdb-web/commons/auth";
 import { ConfigContext } from "@mwdb-web/commons/config";
 import { fromPlugin } from "@mwdb-web/commons/extensions";
 import {
@@ -149,7 +149,7 @@ export default function App() {
             <ProtectedRoute
                 exact
                 path="/upload"
-                condition={auth.hasCapability("adding_files")}
+                condition={auth.hasCapability(Capability.addingFiles)}
             >
                 <Upload />
             </ProtectedRoute>
@@ -165,9 +165,6 @@ export default function App() {
             <ProtectedRoute exact path="/docs">
                 <Docs />
             </ProtectedRoute>
-            <ProtectedRoute exact path="/profile/:login">
-                <UserProfile />
-            </ProtectedRoute>
             <Redirect from="/sample/:hash" to="/file/:hash" />
             <ProtectedRoute path="/file/:hash">
                 <ShowSample />
@@ -220,6 +217,9 @@ export default function App() {
             <ProtectedRoute path="/remote/:remote">
                 <RemoteViews />
             </ProtectedRoute>
+            <ProtectedRoute path={["/profile/user/:user", "/profile"]}>
+                <ProfileViews />
+            </ProtectedRoute>
             {fromPlugin("routes")}
             <DefaultRoute />
         </Switch>

diff --git a/mwdb/web/src/commons/auth/capabilities.js b/mwdb/web/src/commons/auth/capabilities.js
@@ -0,0 +1,59 @@
+import { fromPlugin } from "../extensions";
+
+export const Capability = {
+    manageUsers: "manage_users",
+    shareQueriedObjects: "share_queried_objects",
+    accessAllObjects: "access_all_objects",
+    sharingObjects: "sharing_objects",
+    addingTags: "adding_tags",
+    removingTags: "removing_tags",
+    addingComments: "adding_comments",
+    removingComments: "removing_comments",
+    addingParents: "adding_parents",
+    removingParents: "removing_parents",
+    readingAllAttributes: "reading_all_attributes",
+    addingAllAttributes: "adding_all_attributes",
+    managingAttributes: "managing_attributes",
+    removingAttributes: "removing_attributes",
+    addingFiles: "adding_files",
+    addingConfigs: "adding_configs",
+    addingBlobs: "adding_blobs",
+    unlimitedRequests: "unlimited_requests",
+    removingObjects: "removing_objects",
+    manageProfile: "manage_profile",
+    personalize: "personalize",
+};
+
+export let capabilitiesList = {
+    [Capability.manageUsers]:
+        "Managing users and groups (system administration)",
+    [Capability.shareQueriedObjects]: "Query for all objects in system",
+    [Capability.accessAllObjects]:
+        "Has access to all new uploaded objects into system",
+    [Capability.sharingObjects]: "Can share objects with all groups in system",
+    [Capability.addingTags]: "Can add tags",
+    [Capability.removingTags]: "Can remove tags",
+    [Capability.addingComments]: "Can add comments",
+    [Capability.removingComments]: "Can remove (all) comments",
+    [Capability.addingParents]: "Can specify parent of uploaded object",
+    [Capability.removingParents]:
+        "Can remove parent of object and inherited permissions from that relation",
+    [Capability.readingAllAttributes]:
+        "Has access to all attributes of object (including hidden)",
+    [Capability.addingAllAttributes]: "Can add all attributes to object",
+    [Capability.managingAttributes]:
+        "Can define new attributes and manage them",
+    [Capability.removingAttributes]: "Can remove attribute from objects",
+    [Capability.addingFiles]: "Can upload files",
+    [Capability.addingConfigs]: "Can upload configs",
+    [Capability.addingBlobs]: "Can upload text blobs",
+    [Capability.unlimitedRequests]:
+        "API requests are not rate-limited for this group",
+    [Capability.removingObjects]: "Can remove objects",
+    [Capability.manageProfile]: "Can manage own profile",
+    [Capability.personalize]: "Can mark favorites and manage own quick queries",
+};
+
+for (let extraCapabilities of fromPlugin("capabilities")) {
+    capabilitiesList = { ...capabilitiesList, ...extraCapabilities };
+}
diff --git a/mwdb/web/src/commons/auth/index.js b/mwdb/web/src/commons/auth/index.js
@@ -1,2 +1,3 @@
 export { AuthContext } from "./context";
 export { AuthProvider } from "./provider";
+export { Capability, capabilitiesList } from "./capabilities";
diff --git a/mwdb/web/src/commons/auth/provider.js b/mwdb/web/src/commons/auth/provider.js
@@ -3,6 +3,7 @@ import { useHistory } from "react-router";
 
 import api from "../api";
 
+import { Capability } from "./capabilities";
 import { AuthContext } from "./context";
 
 const localStorageAuthKey = "user";
@@ -184,7 +185,7 @@ export function AuthProvider(props) {
             value={{
                 user: session,
                 isAuthenticated: !!session,
-                isAdmin: hasCapability("manage_users"),
+                isAdmin: hasCapability(Capability.manageUsers),
                 hasCapability,
                 refreshSession,
                 updateSession,

diff --git a/mwdb/web/src/commons/package.json b/mwdb/web/src/commons/package.json
@@ -9,6 +9,7 @@
         "react": "*",
         "react-ace": "*",
         "react-autocomplete": "*",
+        "react-copy-to-clipboard": "*",
         "react-js-pagination": "*",
         "react-router": "*",
         "react-router-dom": "*"

diff --git a/mwdb/web/src/commons/ui/ErrorBoundary.js b/mwdb/web/src/commons/ui/ErrorBoundary.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { intersperse } from "../helpers";
 
-function getErrorMessage(error) {
+export function getErrorMessage(error) {
     if (error.response) {
         if (error.response.data.message) {
             return error.response.data.message;

diff --git a/mwdb/web/src/commons/ui/GroupBadge.js b/mwdb/web/src/commons/ui/GroupBadge.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function GroupBadge({ group }) {
+    return (
+        <Link
+            to={
+                group.private
+                    ? `/profile/user/${group.name}`
+                    : `/profile/group/${group.name}`
+            }
+        >
+            <span
+                className={`badge badge-${
+                    group.private ? "primary" : "secondary"
+                }`}
+            >
+                {group.name}
+            </span>
+        </Link>
+    );
+}
diff --git a/mwdb/web/src/commons/ui/ProtectedRoute.js b/mwdb/web/src/commons/ui/ProtectedRoute.js
@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import { useLocation } from "react-router";
 import { Redirect, Route } from "react-router-dom";
 
-import { AuthContext } from "../auth";
+import { AuthContext, Capability } from "../auth";
 
 export function ConditionalRoute({ children, condition, fallback, ...props }) {
     return <Route {...props}>{condition ? children : fallback}</Route>;
@@ -53,7 +53,7 @@ export function AttributeRoute(args) {
     const auth = useContext(AuthContext);
     return (
         <ProtectedRoute
-            condition={auth.hasCapability("managing_attributes")}
+            condition={auth.hasCapability(Capability.managingAttributes)}
             {...args}
         />
     );

diff --git a/mwdb/web/src/commons/ui/index.js b/mwdb/web/src/commons/ui/index.js
@@ -4,7 +4,12 @@ export { default as APIKeyList } from "./APIKeyList";
 export { default as ConfirmationModal } from "./ConfirmationModal";
 export { default as DataTable } from "./DataTable";
 export { default as DateString } from "./DateString";
-export { default as ErrorBoundary, Alert } from "./ErrorBoundary";
+export {
+    default as ErrorBoundary,
+    Alert,
+    getErrorMessage,
+} from "./ErrorBoundary";
+export { default as GroupBadge } from "./GroupBadge";
 export { default as Hash } from "./Hash";
 export { default as HexView } from "./HexView";
 export { default as Identicon } from "./Identicon";
@@ -58,6 +63,10 @@ export function getStyleForTag(tag) {
     return "danger";
 }
 
+export function ShowIf({ condition, children }) {
+    return condition ? children : [];
+}
+
 export function HighlightText(props) {
     let text = React.Children.toArray(props.children)[0].toString();
 

diff --git a/mwdb/web/src/components/Attributes.js b/mwdb/web/src/components/Attributes.js
@@ -3,7 +3,7 @@ import AttributesAddModal from "./AttributesAddModal";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { APIContext } from "@mwdb-web/commons/api/context";
-import { AuthContext } from "@mwdb-web/commons/auth";
+import { AuthContext, Capability } from "@mwdb-web/commons/auth";
 import { ObjectContext } from "@mwdb-web/commons/context";
 import { fromPlugin, Extendable } from "@mwdb-web/commons/extensions";
 import {
@@ -79,7 +79,7 @@ function DefaultAttributeRenderer(props) {
                                 tooltipMessage="Copy value to clipboard"
                             />
                         </span>
-                        {auth.hasCapability("removing_attributes") && (
+                        {auth.hasCapability(Capability.removingAttributes) && (
                             <span
                                 className="ml-2"
                                 data-toggle="tooltip"

diff --git a/mwdb/web/src/components/AttributesAddModal.js b/mwdb/web/src/components/AttributesAddModal.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
 import api from "@mwdb-web/commons/api";
-import { AuthContext } from "@mwdb-web/commons/auth";
+import { AuthContext, Capability } from "@mwdb-web/commons/auth";
 import { ConfirmationModal } from "@mwdb-web/commons/ui";
 
 export default class AttributesAddModal extends Component {
@@ -77,7 +77,7 @@ export default class AttributesAddModal extends Component {
                 onRequestClose={this.props.onRequestClose}
                 onConfirm={this.handleSubmit}
             >
-                {!this.context.hasCapability("adding_all_attributes") &&
+                {!this.context.hasCapability(Capability.addingAllAttributes) &&
                 !Object.keys(this.state.attributes).length ? (
                     <div>
                         Sorry, there are no attributes you can set at this

diff --git a/mwdb/web/src/components/Capabilities.js b/mwdb/web/src/components/Capabilities.js
@@ -1,35 +1,6 @@
 import React, { Component } from "react";
-import { fromPlugin } from "@mwdb-web/commons/extensions";
 
-export let capabilitiesList = {
-    manage_users: "Managing users and groups (system administration)",
-    share_queried_objects: "Query for all objects in system",
-    access_all_objects: "Has access to all new uploaded objects into system",
-    sharing_objects: "Can share objects with all groups in system",
-    adding_tags: "Can add tags",
-    removing_tags: "Can remove tags",
-    adding_comments: "Can add comments",
-    removing_comments: "Can remove (all) comments",
-    adding_parents: "Can specify parent of uploaded object",
-    removing_parents:
-        "Can remove parent of object and inherited permissions from that relation",
-    reading_all_attributes:
-        "Has access to all attributes of object (including hidden)",
-    adding_all_attributes: "Can add all attributes to object",
-    managing_attributes: "Can define new attributes and manage them",
-    removing_attributes: "Can remove attribute from objects",
-    adding_configs: "Can upload configs",
-    adding_blobs: "Can upload text blobs",
-    unlimited_requests: "API requests are not rate-limited for this group",
-    removing_objects: "Can remove objects",
-    adding_files: "Can add files",
-    manage_profile: "Can manage own profile",
-    personalize: "Can mark favorites and manage own quick queries",
-};
-
-for (let extraCapabilities of fromPlugin("capabilities")) {
-    capabilitiesList = { ...capabilitiesList, ...extraCapabilities };
-}
+import { capabilitiesList } from "@mwdb-web/commons/auth";
 
 export default class Capabilities extends Component {
     isCapabilityChanged(cap) {

diff --git a/mwdb/web/src/components/Navigation.js b/mwdb/web/src/components/Navigation.js
@@ -7,11 +7,12 @@ import {
     faScroll,
     faUpload,
     faGlobe,
+    faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import api from "@mwdb-web/commons/api";
-import { AuthContext } from "@mwdb-web/commons/auth";
+import { AuthContext, Capability } from "@mwdb-web/commons/auth";
 import { ConfigContext } from "@mwdb-web/commons/config";
 import { fromPlugin, Extendable } from "@mwdb-web/commons/extensions";
 import { NavDropdown } from "@mwdb-web/commons/ui";
@@ -24,7 +25,9 @@ function AdminDropdown() {
     const [pendingUsersCount, setPendingUsersCount] = useState(null);
 
     const isAdmin = auth.isAdmin;
-    const isAttributeManager = auth.hasCapability("managing_attributes");
+    const isAttributeManager = auth.hasCapability(
+        Capability.managingAttributes
+    );
 
     async function updatePendingUsersCount() {
         try {
@@ -114,7 +117,7 @@ function RemoteDropdown() {
 
 function UploadButton() {
     const auth = useContext(AuthContext);
-    const buttonLink = auth.hasCapability("adding_files") ? (
+    const buttonLink = auth.hasCapability(Capability.addingFiles) ? (
         <Link className="nav-link" to={"/upload"}>
             <FontAwesomeIcon className="navbar-icon" icon={faUpload} />
             Upload
@@ -196,11 +199,6 @@ export default function Navigation() {
                             Search
                         </Link>
                     </li>
-                    <li>
-                        <Link className="nav-link" to="/user_groups">
-                            Groups
-                        </Link>
-                    </li>
                     <li className="nav-item">
                         <Link className="nav-link" to={"/configs/stats"}>
                             Statistics
@@ -313,17 +311,6 @@ export default function Navigation() {
                         <Extendable ident="navbarRight">
                             {auth.isAuthenticated ? (
                                 <React.Fragment>
-                                    {!remote && (
-                                        <li className="nav-item">
-                                            <span
-                                                className="navbar-text"
-                                                style={{ marginRight: "1rem" }}
-                                            >
-                                                Logged as:{" "}
-                                                <b>{auth.user.login}</b>
-                                            </span>
-                                        </li>
-                                    )}
                                     <RemoteDropdown />
                                     <li className="nav-item">
                                         <div className="btn-group">
@@ -338,10 +325,14 @@ export default function Navigation() {
                                             ) : (
                                                 <React.Fragment>
                                                     <Link
-                                                        className="btn btn-outline-success"
-                                                        to={`/profile/${auth.user.login}`}
+                                                        className="btn btn-outline-success profile-button"
+                                                        to="/profile"
                                                     >
-                                                        Profile
+                                                        <FontAwesomeIcon
+                                                            className="navbar-icon"
+                                                            icon={faUser}
+                                                        />
+                                                        {auth.user.login}
                                                     </Link>
                                                     <a
                                                         className="btn btn-outline-danger"