Bug/WP-417: Onboarding User List Alternating Color

[jalowe13]

Overview

Fix for when the onboarding user list does not alternate row color with more than 2 onboarding steps

Related

• WP-417

Bug traces back to review for WP-352
Confluence bug report

Changes

The background row styling seemed hardcoded in based on the amount of contained user elements instead of alternating odd and even based on index of the user elements being inserted in.

• CSS guidelines changed for this for even and odd row alternation
• Conditional rendering added and index passed into OnboardingAdminListUser.jsx

Testing

1. Added formatting test to check styling classes applied to User elements.

    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();

3. To test visually what is alike to PTDATAX's portal steps, the following can be added to OnboardingAdmin.jsx:206
   (This could also be made as a fixture)

  // Testing actions

  // More than 2
  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",
    },
  ];

UI

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 73.10%. Comparing base (abbe219) to head (0442637).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #985      +/-   ##
==========================================
+ Coverage   73.09%   73.10%   +0.01%     
==========================================
  Files         531      531              
  Lines       33152    33155       +3     
  Branches     2922     2923       +1     
==========================================
+ Hits        24232    24239       +7     
+ Misses       8726     8722       -4     
  Partials      194      194              

Flag	Coverage Δ
javascript	76.14% <100.00%> (+0.01%)	⬆️
unittests	60.12% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...ient/src/components/Onboarding/OnboardingAdmin.jsx	83.06% <100.00%> (+0.16%)	⬆️

... and 1 file with indirect coverage changes