From 195593558c973326ba0e57493fef356c2f75b4de Mon Sep 17 00:00:00 2001
From: Cody Mitchell <comitche@redhat.com>
Date: Wed, 30 Oct 2024 02:38:48 -0400
Subject: [PATCH] feat: add cypress test

---
 cypress/e2e/users-and-user-groups.cy.ts       |  8 ++++
 .../access-management/UserDetailsDrawer.tsx   | 38 ++++++++++++-------
 .../users-and-user-groups.tsx                 |  2 +-
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/users-and-user-groups.cy.ts b/cypress/e2e/users-and-user-groups.cy.ts
index 5d646534d..91eabe5cb 100644
--- a/cypress/e2e/users-and-user-groups.cy.ts
+++ b/cypress/e2e/users-and-user-groups.cy.ts
@@ -120,4 +120,12 @@ describe('Users and User Groups page', () => {
     cy.get('[data-ouia-component-id="iam-users-table-add-user-button"]').click();
     cy.get('[data-ouia-component-id="add-user-group-modal"]').should('be.visible');
   });
+
+  it('can view user details when a user is clicked', () => {
+    cy.get('[data-ouia-component-id="iam-users-table-table-tr-0"]').click();
+    cy.get('[data-ouia-component-id="user-details-drawer"]').should('be.visible');
+    cy.get('[data-ouia-component-id="user-details-drawer"]').contains(mockUsers.data[0].first_name).should('exist');
+    cy.get('[data-ouia-component-id="user-details-drawer"]').contains(mockUsers.data[0].last_name).should('exist');
+    cy.get('[data-ouia-component-id="user-details-drawer"]').contains(mockUsers.data[0].email).should('exist');
+  });
 });
diff --git a/src/smart-components/access-management/UserDetailsDrawer.tsx b/src/smart-components/access-management/UserDetailsDrawer.tsx
index c77d2896e..c2c25f1df 100644
--- a/src/smart-components/access-management/UserDetailsDrawer.tsx
+++ b/src/smart-components/access-management/UserDetailsDrawer.tsx
@@ -27,13 +27,12 @@ import { fetchRoles } from '../../redux/actions/role-actions';
 import { useIntl } from 'react-intl';
 import messages from '../../Messages';
 
-interface UserDetailsProps {
-  focusedUser?: User;
-  onClose: () => void;
+interface UserGroupsViewProps {
+  userId: string;
+  ouiaId: string;
 }
 
-const UserGroupsView: React.FunctionComponent<{ userId: string }> = ({ userId }) => {
-  const ouiaId = 'user-groups-view';
+const UserGroupsView: React.FunctionComponent<UserGroupsViewProps> = ({ userId, ouiaId }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   const columns: string[] = [intl.formatMessage(messages.userGroup), intl.formatMessage(messages.users)];
@@ -69,8 +68,12 @@ const UserGroupsView: React.FunctionComponent<{ userId: string }> = ({ userId })
   );
 };
 
-const UserRolesView: React.FunctionComponent<{ userId: string }> = ({ userId }) => {
-  const ouiaId = 'user-roles-view';
+interface UserRolesViewProps {
+  userId: string;
+  ouiaId: string;
+}
+
+const UserRolesView: React.FunctionComponent<UserRolesViewProps> = ({ userId, ouiaId }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   // const columns: string[] = ['Roles', 'User group', 'Workspace'];
@@ -111,7 +114,13 @@ const UserRolesView: React.FunctionComponent<{ userId: string }> = ({ userId })
   );
 };
 
-export const UserDetailsDrawerContent: React.FunctionComponent<UserDetailsProps> = ({ focusedUser, onClose }) => {
+interface UserDetailsProps {
+  focusedUser?: User;
+  onClose: () => void;
+  ouiaId: string;
+}
+
+export const UserDetailsDrawerContent: React.FunctionComponent<UserDetailsProps> = ({ focusedUser, onClose, ouiaId }) => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
   const intl = useIntl();
 
@@ -128,7 +137,7 @@ export const UserDetailsDrawerContent: React.FunctionComponent<UserDetailsProps>
       </DrawerHead>
       <Tabs isFilled activeKey={activeTabKey} onSelect={(_, tabIndex) => setActiveTabKey(tabIndex)}>
         <Tab eventKey={0} title={intl.formatMessage(messages.userGroups)}>
-          {focusedUser && <UserGroupsView userId={focusedUser.username} />}
+          {focusedUser && <UserGroupsView ouiaId={`${ouiaId}-user-groups-view`} userId={focusedUser.username} />}
         </Tab>
         <Tab
           eventKey={1}
@@ -148,7 +157,7 @@ export const UserDetailsDrawerContent: React.FunctionComponent<UserDetailsProps>
             </TabTitleText>
           }
         >
-          {focusedUser && <UserRolesView userId={focusedUser.username} />}
+          {focusedUser && <UserRolesView userId={focusedUser.username} ouiaId={`${ouiaId}-assigned-users-view`} />}
         </Tab>
       </Tabs>
     </DrawerPanelContent>
@@ -160,15 +169,18 @@ interface DetailDrawerProps {
   focusedUser?: User;
   onClose: () => void;
   children: React.ReactNode;
-  ouiaId?: string;
+  ouiaId: string;
 }
 
 export const UserDetailsDrawer: React.FunctionComponent<DetailDrawerProps> = ({ isOpen, focusedUser, onClose, children, ouiaId }) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
 
   return (
-    <Drawer isExpanded={isOpen} onExpand={() => drawerRef.current?.focus()} data-ouia-component-id={ouiaId ? `${ouiaId}-detail-drawer` : undefined}>
-      <DrawerContent panelContent={<UserDetailsDrawerContent focusedUser={focusedUser} onClose={onClose} />} ref={drawerRef}>
+    <Drawer isExpanded={isOpen} onExpand={() => drawerRef.current?.focus()} data-ouia-component-id={ouiaId}>
+      <DrawerContent
+        panelContent={<UserDetailsDrawerContent ouiaId={`${ouiaId}-panel-content`} focusedUser={focusedUser} onClose={onClose} />}
+        ref={drawerRef}
+      >
         <DrawerContentBody hasPadding>{children}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
diff --git a/src/smart-components/access-management/users-and-user-groups.tsx b/src/smart-components/access-management/users-and-user-groups.tsx
index 456ba9d7a..c338666e7 100644
--- a/src/smart-components/access-management/users-and-user-groups.tsx
+++ b/src/smart-components/access-management/users-and-user-groups.tsx
@@ -77,7 +77,7 @@ const UsersAndUserGroups: React.FunctionComponent = () => {
       </PageSection>
       <PageSection padding={{ default: 'noPadding' }}>
         {activeTabKey === 0 && (
-          <UserDetailsDrawer isOpen={!!focusedUser} focusedUser={focusedUser} onClose={() => setFocusedUser(undefined)}>
+          <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}