fix: handle row click using events provider

RedHatInsights · Nov 5, 2024 · 25e1330 · 25e1330
1 parent 86579b4
commit 25e1330
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/src/smart-components/access-management/UserDetailsDrawer.tsx b/src/smart-components/access-management/UserDetailsDrawer.tsx
@@ -15,28 +15,32 @@ import {
   TextContent,
   Title,
 } from '@patternfly/react-core';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { User } from '../../redux/reducers/user-reducer';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { useIntl } from 'react-intl';
 import messages from '../../Messages';
 import UserDetailsGroupsView from './UserDetailsGroupsView';
 import UserDetailsRolesView from './UserDetailsRolesView';
+import { EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view';
 
 interface UserDetailsProps {
   focusedUser?: User;
+  drawerRef: React.RefObject<HTMLDivElement>;
   onClose: () => void;
   ouiaId: string;
 }
 
-const UserDetailsDrawerContent: React.FunctionComponent<UserDetailsProps> = ({ focusedUser, onClose, ouiaId }) => {
+const UserDetailsDrawerContent: React.FunctionComponent<UserDetailsProps> = ({ focusedUser, drawerRef, onClose, ouiaId }) => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
   const intl = useIntl();
 
   return (
     <DrawerPanelContent>
       <DrawerHead>
-        <Title headingLevel="h2">{`${focusedUser?.first_name} ${focusedUser?.last_name}`}</Title>
+        <Title headingLevel="h2">
+          <span tabIndex={focusedUser ? 0 : -1} ref={drawerRef}>{`${focusedUser?.first_name} ${focusedUser?.last_name}`}</span>
+        </Title>
         <TextContent>
           <Text>{focusedUser?.email}</Text>
         </TextContent>
@@ -74,21 +78,36 @@ const UserDetailsDrawerContent: React.FunctionComponent<UserDetailsProps> = ({ f
 };
 
 interface DetailDrawerProps {
-  isOpen: boolean;
   focusedUser?: User;
-  onClose: () => void;
+  setFocusedUser: (user: User | undefined) => void;
   children: React.ReactNode;
   ouiaId: string;
 }
 
-const UserDetailsDrawer: React.FunctionComponent<DetailDrawerProps> = ({ isOpen, focusedUser, onClose, children, ouiaId }) => {
+const UserDetailsDrawer: React.FunctionComponent<DetailDrawerProps> = ({ focusedUser, setFocusedUser, children, ouiaId }) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
+  const context = useDataViewEventsContext();
+
+  useEffect(() => {
+    const unsubscribe = context.subscribe(EventTypes.rowClick, (user: User | undefined) => {
+      setFocusedUser(user);
+      drawerRef.current?.focus();
+    });
+
+    return () => unsubscribe();
+  }, [drawerRef]);
 
   return (
-    <Drawer isExpanded={isOpen} onExpand={() => drawerRef.current?.focus()} data-ouia-component-id={ouiaId}>
+    <Drawer isExpanded={Boolean(focusedUser)} data-ouia-component-id={ouiaId}>
       <DrawerContent
-        panelContent={<UserDetailsDrawerContent ouiaId={`${ouiaId}-panel-content`} focusedUser={focusedUser} onClose={onClose} />}
-        ref={drawerRef}
+        panelContent={
+          <UserDetailsDrawerContent
+            ouiaId={`${ouiaId}-panel-content`}
+            drawerRef={drawerRef}
+            focusedUser={focusedUser}
+            onClose={() => setFocusedUser(undefined)}
+          />
+        }
       >
         <DrawerContentBody hasPadding>{children}</DrawerContentBody>
       </DrawerContent>

diff --git a/src/smart-components/access-management/UsersTable.tsx b/src/smart-components/access-management/UsersTable.tsx
@@ -15,6 +15,7 @@ import { useIntl } from 'react-intl';
 import messages from '../../Messages';
 import { useSearchParams } from 'react-router-dom';
 import { WarningModal } from '@patternfly/react-component-groups';
+import { EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view';
 
 const COLUMNS: string[] = ['Username', 'Email', 'First name', 'Last name', 'Status', 'Org admin'];
 
@@ -30,14 +31,15 @@ const OUIA_ID = 'iam-users-table';
 
 interface UsersTableProps {
   onAddUserClick: (selected: User[]) => void;
-  onFocusUser?: (user: User) => void;
+  focusedUser?: User;
 }
 
-const UsersTable: React.FunctionComponent<UsersTableProps> = ({ onAddUserClick, onFocusUser }) => {
+const UsersTable: React.FunctionComponent<UsersTableProps> = ({ onAddUserClick, focusedUser }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [currentUser, setCurrentUser] = useState<User | undefined>();
   const dispatch = useDispatch();
   const intl = useIntl();
+  const { trigger } = useDataViewEventsContext();
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent, user: User) => {
     setCurrentUser(user);
@@ -84,6 +86,10 @@ const UsersTable: React.FunctionComponent<UsersTableProps> = ({ onAddUserClick,
   };
 
   const rows = useMemo(() => {
+    const handleRowClick = (event: any, user: User | undefined) => {
+      (event.target.matches('td') || event.target.matches('tr')) && trigger(EventTypes.rowClick, user);
+    };
+
     return users.map((user: User) => ({
       id: user.username,
       is_active: user.is_active,
@@ -114,10 +120,12 @@ const UsersTable: React.FunctionComponent<UsersTableProps> = ({ onAddUserClick,
         },
       ],
       props: {
-        onClick: () => onFocusUser && onFocusUser(user),
+        isClickable: Boolean(user.is_active),
+        onRowClick: (event: any) => user.is_active && handleRowClick(event, focusedUser?.username === user.username ? undefined : user),
+        isRowSelected: focusedUser?.username === user.username,
       },
     }));
-  }, [users, intl, onAddUserClick, handleModalToggle]);
+  }, [users, intl, onAddUserClick, handleModalToggle, trigger, focusedUser?.username]);
 
   const pageSelected = rows.length > 0 && rows.every(isSelected);
   const pagePartiallySelected = !pageSelected && rows.some(isSelected);

diff --git a/src/smart-components/access-management/users-and-user-groups.tsx b/src/smart-components/access-management/users-and-user-groups.tsx
@@ -9,6 +9,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import AddUserGroupModal from './AddUserGroupModal';
 import { User } from '../../redux/reducers/user-reducer';
 import UserDetailsDrawer from './UserDetailsDrawer';
+import { DataViewEventsProvider } from '@patternfly/react-data-view';
 
 const TAB_NAMES = ['users', 'user-groups'];
 
@@ -77,14 +78,13 @@ const UsersAndUserGroups: React.FunctionComponent = () => {
       </PageSection>
       <PageSection padding={{ default: 'noPadding' }}>
         {activeTabKey === 0 && (
-          <UserDetailsDrawer ouiaId="user-details-drawer" isOpen={!!focusedUser} focusedUser={focusedUser} onClose={() => setFocusedUser(undefined)}>
-            <TabContent eventKey={0} id="usersTab" ref={usersRef} aria-label="Users tab">
-              <UsersTable
-                onAddUserClick={handleOpenAddUserModal}
-                onFocusUser={(user) => (user?.is_active ? setFocusedUser(user) : setFocusedUser(undefined))}
-              />
-            </TabContent>
-          </UserDetailsDrawer>
+          <DataViewEventsProvider>
+            <UserDetailsDrawer ouiaId="user-details-drawer" setFocusedUser={setFocusedUser} focusedUser={focusedUser}>
+              <TabContent eventKey={0} id="usersTab" ref={usersRef} aria-label="Users tab">
+                <UsersTable onAddUserClick={handleOpenAddUserModal} focusedUser={focusedUser} />
+              </TabContent>
+            </UserDetailsDrawer>
+          </DataViewEventsProvider>
         )}
         {activeTabKey === 1 && (
           <TabContent eventKey={1} id="groupsTab" ref={groupsRef} aria-label="Groups tab">