Fix: Bad conditional return in web (#799)

* Fix wrong conditional return in components * Update ProfileGroups.jsx * check all isEmpty and remove some console errors --------- Co-authored-by: postrowinski <p.ostrowinski@gmail.com>
CERT-Polska · Apr 20, 2023 · 64315a6 · 64315a6
1 parent cc97fb2
commit 64315a6
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 29 deletions.
diff --git a/mwdb/web/src/components/Profile/ProfileView.jsx b/mwdb/web/src/components/Profile/ProfileView.jsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
 import { NavLink, useParams, Outlet } from "react-router-dom";
-import { isEmpty } from "lodash";
 
 import { faUserCog } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -49,7 +48,7 @@ export default function ProfileView() {
     const auth = useContext(AuthContext);
     const { redirectToAlert, setAlert } = useViewAlert();
     const user = useParams().user || auth.user.login;
-    const [profile, setProfile] = useState();
+    const [profile, setProfile] = useState({});
     const [capabilitiesToDelete, setCapabilitiesToDelete] = useState("");
 
     useEffect(() => {
@@ -81,7 +80,7 @@ export default function ProfileView() {
         }
     }
 
-    if (isEmpty(profile) || profile.login !== user) return <></>;
+    if (profile.login !== user) return <></>;
 
     return (
         <View ident="profile" fluid>

diff --git a/mwdb/web/src/components/Profile/Views/ProfileGroup.jsx b/mwdb/web/src/components/Profile/Views/ProfileGroup.jsx
@@ -25,7 +25,7 @@ export default function ProfileGroup() {
     const { profile } = useOutletContext();
     const { redirectToAlert } = useViewAlert();
     const { group: groupName } = useParams();
-    const [workspaces, setWorkspaces] = useState();
+    const [workspaces, setWorkspaces] = useState([]);
 
     const group = profile.groups.find((group) => group.name === groupName);
 
@@ -45,8 +45,6 @@ export default function ProfileGroup() {
         }
     }
 
-    if (isEmpty(workspaces)) return <></>;
-
     if (isEmpty(group)) {
         redirectToAlert({
             target: "/profile",

diff --git a/mwdb/web/src/components/Profile/Views/ProfileGroupMembers.jsx b/mwdb/web/src/components/Profile/Views/ProfileGroupMembers.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Navigate, useParams, useOutletContext } from "react-router-dom";
-import { isEmpty } from "lodash";
+import { isEmpty, isNil } from "lodash";
 
 import { api } from "@mwdb-web/commons/api";
 import { AuthContext, Capability } from "@mwdb-web/commons/auth";
@@ -78,7 +78,7 @@ export default function ProfileGroupMembers() {
     const { redirectToAlert } = useViewAlert();
     const { profile } = useOutletContext();
     const { group: groupName } = useParams();
-    const [workspaces, setWorkspaces] = useState();
+    const [workspaces, setWorkspaces] = useState([]);
 
     const group = profile.groups.find((group) => group.name === groupName);
 
@@ -98,8 +98,6 @@ export default function ProfileGroupMembers() {
         }
     }
 
-    if (isEmpty(workspaces)) return <></>;
-
     if (isEmpty(group)) {
         redirectToAlert({
             target: "/profile",
@@ -113,6 +111,8 @@ export default function ProfileGroupMembers() {
     // Merge it with workspace info
     const workspace = workspaces.find((group) => group.name === groupName);
 
+    if (isNil(workspace)) return <></>;
+
     if (
         !(
             workspace.admins.includes(auth.user.login) ||

diff --git a/mwdb/web/src/components/Profile/Views/ProfileGroups.jsx b/mwdb/web/src/components/Profile/Views/ProfileGroups.jsx
@@ -8,7 +8,7 @@ import { GroupBadge, useViewAlert } from "@mwdb-web/commons/ui";
 export default function ProfileGroups() {
     const { redirectToAlert } = useViewAlert();
     const { profile } = useOutletContext();
-    const [workspaces, setWorkspaces] = useState();
+    const [workspaces, setWorkspaces] = useState([]);
 
     useEffect(() => {
         getWorkspaces();
@@ -26,8 +26,6 @@ export default function ProfileGroups() {
         }
     }
 
-    if (isEmpty(workspaces)) return <></>;
-
     return (
         <div className="container">
             <h2>Role groups</h2>

diff --git a/mwdb/web/src/components/Settings/Views/AccessControl.jsx b/mwdb/web/src/components/Settings/Views/AccessControl.jsx
@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { isEmpty } from "lodash";
 
 import { faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -29,11 +28,11 @@ function GroupAppliesTo({ group }) {
             <small className="text-muted">
                 Applies to{" "}
                 {intersperse(
-                    group["users"]
-                        .slice(0, 3)
-                        .map((user) => (
-                            <Link to={`/settings/user/${user}`}>{user}</Link>
-                        )),
+                    group["users"].slice(0, 3).map((user) => (
+                        <Link key={user} to={`/settings/user/${user}`}>
+                            {user}
+                        </Link>
+                    )),
                     ", "
                 )}
                 {group["users"].length > 3
@@ -59,7 +58,7 @@ function CapabilitiesHeader({ group }) {
 
 function CapabilitiesList({ capabilities, onDelete }) {
     return capabilities.map((cap) => (
-        <tr>
+        <tr key={cap}>
             <td className="col-auto">
                 <Link
                     to={"#"}
@@ -158,6 +157,7 @@ function CapabilityChangeCard({ groups, onSubmit }) {
                         const selected = selectedCaps.includes(cap);
                         return (
                             <option
+                                key={cap}
                                 data-content={`
                                 ${changed ? "*" : ""}
                                 <span class='badge badge-success'>${cap}</span>
@@ -200,7 +200,7 @@ function CapabilityChangeCard({ groups, onSubmit }) {
 }
 
 export default function AccessControl() {
-    const [groups, setGroups] = useState(null);
+    const [groups, setGroups] = useState([]);
     const { setAlert } = useViewAlert();
 
     const [isChangeModalOpen, setChangeModalOpen] = useState(false);
@@ -242,8 +242,6 @@ export default function AccessControl() {
         getGroups();
     }, []);
 
-    if (isEmpty(groups)) return <></>;
-
     return (
         <div className="container">
             <h2>Access control</h2>
@@ -264,7 +262,7 @@ export default function AccessControl() {
                         .filter((group) => group.capabilities.length > 0)
                         .map((group) => (
                             <React.Fragment key={group.name}>
-                                <CapabilitiesHeader group={group} />,
+                                <CapabilitiesHeader group={group} />
                                 <CapabilitiesList
                                     capabilities={group.capabilities}
                                     onDelete={(capToRemove) => {
@@ -278,7 +276,6 @@ export default function AccessControl() {
                                         setChangeModalOpen(true);
                                     }}
                                 />
-                                ,
                             </React.Fragment>
                         ))}
                 </tbody>

diff --git a/mwdb/web/src/components/Settings/Views/OAuthProvider.jsx b/mwdb/web/src/components/Settings/Views/OAuthProvider.jsx
@@ -23,7 +23,7 @@ function ProviderItem(props) {
 export default function OAuthProvider() {
     const viewAlert = useViewAlert();
     const { name } = useParams();
-    const [provider, setProvider] = useState(null);
+    const [provider, setProvider] = useState({});
     const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
     const [isDeleteModalDisabled, setDeleteModalDisabled] = useState(false);
 

diff --git a/mwdb/web/src/components/Settings/Views/SettingsOverview.jsx b/mwdb/web/src/components/Settings/Views/SettingsOverview.jsx
@@ -36,7 +36,7 @@ function FlagBadge({ enabled }) {
 export default function SettingsOverview() {
     const config = useContext(ConfigContext);
     const { setAlert } = useViewAlert();
-    const [extendedInfo, setExtendedInfo] = useState();
+    const [extendedInfo, setExtendedInfo] = useState({});
 
     useEffect(() => {
         getExtendedInfo();

diff --git a/mwdb/web/src/components/Settings/Views/UserSingleGroups.jsx b/mwdb/web/src/components/Settings/Views/UserSingleGroups.jsx
@@ -152,11 +152,11 @@ export default function UserSingleGroups() {
 
     if (isEmpty(user)) return <></>;
 
-    let groupItems = user.groups
+    const groupItems = user.groups
         .filter((group) => group.name !== "public" && group.name !== user.login)
         .sort((groupA, groupB) => groupA.name.localeCompare(groupB.name));
 
-    let allGroupItems = allGroups.filter(
+    const allGroupItems = allGroups.filter(
         (group) =>
             !user.groups.map((g) => g.name).includes(group.name) &&
             !group.private &&