Bug/WP-417: Onboarding User List Alternating Color (#985)

* index based styling fix for alternating user rows

* WP-417: Test for multiple actions per user have correct formatting

* WP-417: Test for multiple actions per user have correct formatting + prettier

* WP-417: Test for multiple actions per user have correct formatting + unused import removed

client/src/components/Onboarding/OnboardingAdmin.jsx

@@ -96,7 +96,7 @@ OnboardingResetLinks.defaultProps = {
   action: null,
 };
 
-const OnboardingAdminListUser = ({ user, viewLogCallback }) => {
+const OnboardingAdminListUser = ({ user, index, viewLogCallback }) => {
   const dispatch = useDispatch();
   const actionCallback = useCallback(
     (step, username, action) => {
@@ -113,11 +113,13 @@ const OnboardingAdminListUser = ({ user, viewLogCallback }) => {
   );
   const adminAction = useSelector((state) => state.onboarding.action);
   const stepCount = user.steps.length;
+  const rowClass =
+    index % 2 === 0 ? styles['user-row-white'] : styles['user-row-grey'];
 
   return (
     <>
       {user.steps.map((step, index) => (
-        <tr className={styles.user} key={uuidv4()}>
+        <tr className={`${styles.user} ${rowClass}`} key={uuidv4()}>
           {index === 0 && (
             <td rowSpan={stepCount} className={styles.name}>
               {`${user.firstName} ${user.lastName}`}
@@ -214,10 +216,11 @@ const OnboardingAdminList = ({ users, viewLogCallback }) => {
         </tr>
       </thead>
       <tbody>
-        {users.map((user) => (
+        {users.map((user, index) => (
           <OnboardingAdminListUser
             user={user}
             key={user.username}
+            index={index}
             viewLogCallback={viewLogCallback}
           />
         ))}

client/src/components/Onboarding/OnboardingAdmin.module.scss

@@ -119,11 +119,12 @@
 .user > td:not(.has-wrappable-content):not(.status) {
   @include truncate-with-ellipsis;
 }
-.user:nth-child(4n),
-.user:nth-child(4n-1) > td:not(.staffwait) {
+.user-row-white {
+  background-color: #ffffff;
+}
+.user-row-grey {
   background-color: #f4f4f4;
 }
-
 .username {
   display: inline-block; /* needed to make margin-top work with span */
   margin-top: 5px; /* adjust value as needed to create more space between fullname and username */

client/src/components/Onboarding/OnboardingAdmin.test.jsx

@@ -19,6 +19,7 @@ function renderOnboardingAdminComponent(store) {
   );
 }
 
+// Onboarding Admin component rendering
 describe('Onboarding Admin View', () => {
   it('renders onboarding steps', () => {
     const store = mockStore({
@@ -32,3 +33,148 @@ describe('Onboarding Admin View', () => {
     expect(getByText(/username/)).toBeDefined();
   });
 });
+
+// Onboarding Admin component rendering
+describe('Onboarding Admin View', () => {
+  it('renders onboarding steps', () => {
+    const store = mockStore({
+      onboarding: {
+        ...onboardingAdminState,
+        admin: {
+          // Data based off users payload output, 3 generated users that have more than 2 steps
+          users: [
+            {
+              email: '[email protected]',
+              firstName: 'First1',
+              isStaff: false,
+              lastName: 'Last1',
+              setupComplete: false,
+              steps: [
+                {
+                  step: 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
+                  displayName: 'Allocations',
+                  description: 'Checking if allocations have been completed',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'completed',
+                },
+                {
+                  step: 'portal.apps.onboarding.steps.test_steps.MockStep',
+                  displayName: 'Checking Project Membership',
+                  description:
+                    'Checking project membership to specific project',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'staffwait',
+                },
+                {
+                  step: 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
+                  displayName: 'System Access',
+                  description:
+                    'Setting up access to TACC storage and execution systems. No action required.',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'pending',
+                },
+              ],
+              username: 'User1',
+            },
+            {
+              email: '[email protected]',
+              firstName: 'First2',
+              isStaff: false,
+              lastName: 'Last2',
+              setupComplete: false,
+              steps: [
+                {
+                  step: 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
+                  displayName: 'Allocations',
+                  description: 'Checking if allocations have been completed',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'completed',
+                },
+                {
+                  step: 'portal.apps.onboarding.steps.test_steps.MockStep',
+                  displayName: 'Checking Project Membership',
+                  description:
+                    'Checking project membership to specific project',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'staffwait',
+                },
+                {
+                  step: 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
+                  displayName: 'System Access',
+                  description:
+                    'Setting up access to TACC storage and execution systems. No action required.',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'pending',
+                },
+              ],
+              username: 'User2',
+            },
+            {
+              email: '[email protected]',
+              firstName: 'First3',
+              isStaff: false,
+              lastName: 'Last3',
+              setupComplete: false,
+              steps: [
+                {
+                  step: 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
+                  displayName: 'Allocations',
+                  description: 'Checking if allocations have been completed',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'completed',
+                },
+                {
+                  step: 'portal.apps.onboarding.steps.test_steps.MockStep',
+                  displayName: 'Checking Project Membership',
+                  description:
+                    'Checking project membership to specific project',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'staffwait',
+                },
+                {
+                  step: 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
+                  displayName: 'System Access',
+                  description:
+                    'Setting up access to TACC storage and execution systems. No action required.',
+                  userConfirm: 'Confirm',
+                  staffApprove: 'Approve',
+                  state: 'pending',
+                },
+              ],
+              username: 'User3',
+            },
+          ],
+          offset: 0,
+          limit: 25,
+          total: 3,
+          query: '',
+          loading: false,
+          error: null,
+        },
+      },
+    });
+
+    const { getByText, container } = renderOnboardingAdminComponent(store);
+    const userElements = container.querySelectorAll('.user-row');
+    // Check style for user elements
+    userElements.forEach((element, index) => {
+      if (index % 2 === 0) {
+        expect(element).toHaveClass('even-row');
+      } else {
+        expect(element).toHaveClass('odd-row');
+      }
+    });
+    // Check if users last and first names have been defined
+    expect(getByText(/First1 Last1/)).toBeDefined();
+    expect(getByText(/First2 Last2/)).toBeDefined();
+    expect(getByText(/First3 Last3/)).toBeDefined();
+  });
+});