Set memberof type from parent component

The `memberof` type (i.e. `groups`, `netgroup`, `role`, `hbacrule`, and `sudorule`) should be infered from the `UserMemberOf` component in order to set the proper route (thus, navigating directly to the proper page based on this parameter) instead of this being set from each of the member of pages. This would also allow to navigate to any of those pages directly by writing the URL in the browser. Signed-off-by: Carla Martinez <[email protected]>
carma12 · May 28, 2024 · be10002 · be10002
1 parent ef183cf
commit be10002
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 81 deletions.
diff --git a/src/components/MemberOf/MemberOfHbacRules.tsx b/src/components/MemberOf/MemberOfHbacRules.tsx
@@ -21,9 +21,6 @@ import {
 // Utils
 import { API_VERSION_BACKUP, paginate } from "src/utils/utils";
 import { apiToHBACRule } from "src/utils/hbacRulesUtils";
-// Navigation
-import { useNavigate, useParams } from "react-router-dom";
-import { URL_PREFIX } from "src/navigation/NavRoutes";
 
 interface MemberOfHbacRulesProps {
   user: Partial<User>;
@@ -33,17 +30,6 @@ interface MemberOfHbacRulesProps {
 }
 
 const MemberOfHbacRules = (props: MemberOfHbacRulesProps) => {
-  const navigate = useNavigate();
-  const { uid } = useParams();
-
-  React.useEffect(() => {
-    if (props.user && props.user.uid) {
-      navigate(
-        URL_PREFIX + "/" + props.from + "/" + uid + "/memberof_hbacrule"
-      );
-    }
-  }, [props.user]);
-
   // Alerts to show in the UI
   const alerts = useAlerts();
 

diff --git a/src/components/MemberOf/MemberOfNetgroups.tsx b/src/components/MemberOf/MemberOfNetgroups.tsx
@@ -22,9 +22,6 @@ import { apiToNetgroup } from "src/utils/netgroupsUtils";
 // Modals
 import MemberOfAddModal, { AvailableItems } from "./MemberOfAddModal";
 import MemberOfDeleteModal from "./MemberOfDeleteModal";
-// Navigation
-import { useNavigate, useParams } from "react-router-dom";
-import { URL_PREFIX } from "src/navigation/NavRoutes";
 
 interface MemberOfNetroupsProps {
   user: Partial<User>;
@@ -34,17 +31,6 @@ interface MemberOfNetroupsProps {
 }
 
 const memberOfNetgroups = (props: MemberOfNetroupsProps) => {
-  const navigate = useNavigate();
-  const { uid } = useParams();
-
-  React.useEffect(() => {
-    if (props.user && props.user.uid) {
-      navigate(
-        URL_PREFIX + "/" + props.from + "/" + uid + "/memberof_netgroup"
-      );
-    }
-  }, [props.user]);
-
   // Alerts to show in the UI
   const alerts = useAlerts();
 

diff --git a/src/components/MemberOf/MemberOfRoles.tsx b/src/components/MemberOf/MemberOfRoles.tsx
@@ -21,9 +21,6 @@ import {
 // Utils
 import { API_VERSION_BACKUP, paginate } from "src/utils/utils";
 import { apiToRole } from "src/utils/rolesUtils";
-// Navigation
-import { useNavigate, useParams } from "react-router-dom";
-import { URL_PREFIX } from "src/navigation/NavRoutes";
 
 interface MemberOfRolesProps {
   user: Partial<User>;
@@ -32,15 +29,6 @@ interface MemberOfRolesProps {
   onRefreshUserData: () => void;
 }
 const MemberOfRoles = (props: MemberOfRolesProps) => {
-  const navigate = useNavigate();
-  const { uid } = useParams();
-
-  React.useEffect(() => {
-    if (props.user && props.user.uid) {
-      navigate(URL_PREFIX + "/" + props.from + "/" + uid + "/memberof_role");
-    }
-  }, [props.user]);
-
   // Alerts to show in the UI
   const alerts = useAlerts();
 

diff --git a/src/components/MemberOf/MemberOfSudoRules.tsx b/src/components/MemberOf/MemberOfSudoRules.tsx
@@ -21,9 +21,6 @@ import {
 import { API_VERSION_BACKUP, paginate } from "src/utils/utils";
 import { apiToSudoRule } from "src/utils/sudoRulesUtils";
 import { ErrorResult } from "src/services/rpc";
-// Navigation
-import { useNavigate, useParams } from "react-router-dom";
-import { URL_PREFIX } from "src/navigation/NavRoutes";
 
 interface MemberOfSudoRulesProps {
   user: Partial<User>;
@@ -33,17 +30,6 @@ interface MemberOfSudoRulesProps {
 }
 
 const MemberOfSudoRules = (props: MemberOfSudoRulesProps) => {
-  const navigate = useNavigate();
-  const { uid } = useParams();
-
-  React.useEffect(() => {
-    if (props.user && props.user.uid) {
-      navigate(
-        URL_PREFIX + "/" + props.from + "/" + uid + "/memberof_sudorule"
-      );
-    }
-  }, [props.user]);
-
   // Alerts to show in the UI
   const alerts = useAlerts();
 

diff --git a/src/components/MemberOf/MemberOfUserGroups.tsx b/src/components/MemberOf/MemberOfUserGroups.tsx
@@ -21,9 +21,6 @@ import {
 // Utils
 import { API_VERSION_BACKUP, paginate } from "src/utils/utils";
 import { apiToGroup } from "src/utils/groupUtils";
-// Navigation
-import { useNavigate, useParams } from "react-router-dom";
-import { URL_PREFIX } from "src/navigation/NavRoutes";
 
 interface MemberOfUserGroupsProps {
   user: Partial<User>;
@@ -33,15 +30,6 @@ interface MemberOfUserGroupsProps {
 }
 
 const MemberOfUserGroups = (props: MemberOfUserGroupsProps) => {
-  const navigate = useNavigate();
-  const { uid } = useParams();
-
-  React.useEffect(() => {
-    if (props.user && props.user.uid) {
-      navigate(URL_PREFIX + "/" + props.from + "/" + uid + "/memberof_group");
-    }
-  }, [props.user]);
-
   // Alerts to show in the UI
   const alerts = useAlerts();
 

diff --git a/src/pages/ActiveUsers/ActiveUsersTabs.tsx b/src/pages/ActiveUsers/ActiveUsersTabs.tsx
@@ -151,7 +151,6 @@ const ActiveUsersTabs = ({ memberof }) => {
             name="memberof-details"
             title={<TabTitleText>Is a member of</TabTitleText>}
           >
-            {/* <UserMemberOf user={userData} from="active-users" /> */}
             <UserMemberOf
               user={partialUserToUser(user)}
               tab={memberof || "group"}

diff --git a/src/pages/ActiveUsers/UserMemberOf.tsx b/src/pages/ActiveUsers/UserMemberOf.tsx
@@ -20,6 +20,9 @@ import MemberOfSudoRules from "src/components/MemberOf/MemberOfSudoRules";
 import { useGetUserByUidQuery } from "src/services/rpcUsers";
 // Utils
 import { convertToString } from "src/utils/ipaObjectUtils";
+// Navigation
+import { URL_PREFIX } from "src/navigation/NavRoutes";
+import { useNavigate } from "react-router-dom";
 
 interface PropsToUserMemberOf {
   user: User;
@@ -28,6 +31,8 @@ interface PropsToUserMemberOf {
 }
 
 const UserMemberOf = (props: PropsToUserMemberOf) => {
+  const navigate = useNavigate();
+
   // User's full data
   const userQuery = useGetUserByUidQuery(convertToString(props.user.uid));
 
@@ -91,16 +96,21 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
   }, [user]);
 
   // Tab
-  const [activeTabKey, setActiveTabKey] = useState(0);
+  const [activeTabKey, setActiveTabKey] = useState("group");
 
-  const handleTabClick = (
-    _event: React.MouseEvent<HTMLElement, MouseEvent>,
-    tabIndex: number | string
-  ) => {
-    setActiveTabKey(tabIndex as number);
-  };
+  React.useEffect(() => {
+    setActiveTabKey(props.tab);
+    navigate(
+      URL_PREFIX +
+        "/" +
+        props.from +
+        "/" +
+        props.user.uid +
+        "/memberof_" +
+        props.tab
+    );
+  }, [props.tab]);
 
-  // Render 'ActiveUsersIsMemberOf'
   return (
     <Page>
       <PageSection
@@ -110,13 +120,24 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
       >
         <Tabs
           activeKey={activeTabKey}
-          onSelect={handleTabClick}
+          onSelect={(_event, tabIndex) => {
+            setActiveTabKey(tabIndex as string);
+            navigate(
+              URL_PREFIX +
+                "/" +
+                props.from +
+                "/" +
+                props.user.uid +
+                "/memberof_" +
+                tabIndex
+            );
+          }}
           isBox={false}
           mountOnEnter
           unmountOnExit
         >
           <Tab
-            eventKey={0}
+            eventKey={"group"}
             name="memberof_group"
             title={
               <TabTitleText>
@@ -135,7 +156,7 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
             />
           </Tab>
           <Tab
-            eventKey={1}
+            eventKey={"netgroup"}
             name="memberof_netgroup"
             title={
               <TabTitleText>
@@ -154,7 +175,7 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
             />
           </Tab>
           <Tab
-            eventKey={2}
+            eventKey={"role"}
             name="memberof_role"
             title={
               <TabTitleText>
@@ -173,7 +194,7 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
             />
           </Tab>
           <Tab
-            eventKey={3}
+            eventKey={"hbacrule"}
             name="memberof_hbacrule"
             title={
               <TabTitleText>
@@ -192,7 +213,7 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
             />
           </Tab>
           <Tab
-            eventKey={4}
+            eventKey={"sudorule"}
             name="memberof_sudorule"
             title={
               <TabTitleText>