2964: Project Workflow (Create/Edit ) - Add Pagination Component with clickable pages

[ijoel]

• Fixes Dev: Add Pagination Component with each page clickable to the Create/Edit Project workflow #2964

What changes did you make?

The changes enhance the pagination component of the View/Edit Project workflow. The user now has the ability to directly navigate to a page previously visited by clicking the desired page navigation button.

The updated behavior matches the desired state specified on the issue

• The calculation wizard should have a pagination component that displays clickable link to each page, thereby allowing users to click on the link and navigate directly to the page of concern.
• If its a Level 0 project, the link to page 4 should be disabled.
• This should only show up if the project has been saved and the project is a draft owned by the logged-in user.
• If the project is a draft that has not been saved, it should still show "Page N/5" between the Next and Previous buttons as it does now.

Why did you make the changes (we will use this info to test)?

The changes achieve the requested enhancements to the pagination component.

Issue-Specific User Account

Tested in an unauthentication session and with an authenticated user: ladot@dispostable.com

Screenshots of Proposed Changes Of The Website

Visuals before changes are applied

Visuals after changes are applied

[ijoel]

@bonniewolfe Hi Bonnie, I wanted to share the updated treatment that I applied to the pagination component for saved projects.

The target functionality:

Maintaining existing pagination theme:

Please let me know if you any questions. If there is approval on the design, we can proceed with code review.

[entrotech]

This is going to take some time for me to review.

[ExperimentsInHonesty]

@ijoel Please run the wave chrome extension against the new pagination to see if it throws a contrast error.

See https://hackforla.github.io/accessibility/getting-started/ for the wave chrome extension overview

[entrotech]

I downloaded your branch and tried it, going to page 4 of an existing project:

Note that url is http://localhost:3000/calculation/4/861, and I have cleared my Network tab in the dev tools.

If I use the Next navigation button to go to page 5, it looks like this:

Note that the new url is http://localhost:3000/calculation/5/861, as expected and the only network call is a google analytics request.

I can use the Back navigation button to get back to page 4, and it looks like the first screenshot. Now I check the checkbox for BikeShare Membership an earn 5 more points:

so far, so good - url is the same and the only network activity is another GA request.
Now I use the Page 5 link to go to page 5 and I should see 15 earned points, but I get this:

Note that the url is now http://localhost:3000/calculation/5/861# (with a # at the end), and the Project Summary has discarded my change, reverting to 10 earned points, and this is because the app made network requests to get the project data again, replacing my changes.

This is just one specific example, but it seems that any time you use one of the new page links, it re-populates the project data, losing any changes that have been made since the last time the project was saved.

I didn't track down why the network requests are made, but two suspicious things I noticed are the appending of a "#" at the end of the url, and that you added another useEffect in the TdmCalculationWizard, when there is already an existing useEffect that does some scrolling.

Two other minor things I noticed:

• You added a Link component for the page buttons that looks like it is intended to be used only for the pagination control. If it only to be used on the WizardFooter component, it would be better to put it in the same folder as the WizardFooter, and maybe give it a less generic name, like PageNavigationLink or something. If you think it is generic enough to be used in other places, it should go under the /components/UI folder.
• In your PR, there is a new NPM package in the /server/package.json file for uuid@11.1.0. This is totally unrelated to anything you were working on, but uuid version 8.3.2 was implicitly included before as a dependency of mssql@11.0.1 and testcontainers@10.28.0. Not sure what to make of this. Maybe explicity including a newer version fixed probs you were having?

[ijoel]

@ijoel Please run the wave chrome extension against the new pagination to see if it throws a contrast error.

See https://hackforla.github.io/accessibility/getting-started/ for the wave chrome extension overview

@bonniewolfe, I’ve addressed the low contrast warning reported by WAVE by making making color adjustments to the numbered links as shown in the following screenshot:

I believe the adjustment is reasonable, but if we need to run it by design, please let me know whom I can reach out to make that request.

[ijoel]

Thanks for your thorough review @entrotech, I gave the changes another review to address your observations and suggestions.

• I've added the tests in WizardFooter.test.jsx, so the changes to jest.config.js and the added files __mocks__/fileMock.js and __mocks__/react-jss.js are necessary.

• I addressed the errant behavior that you mentioned relating to how the URL location is updated. The page calculation changes were reverted and a fix was applied to the numbered link component.

• I relocated the Link component adjacent to WizardFooter and renamed it NumberedLink.jsx

• Removed accidental inclusion of uuid dependency

I added the following defensive checks to SideBarPoints and SidebarProjectLevel components when I was tracking down an error thrown in my environment relating to a NaN value. I'm going to remove them from this PR and just note down the observation. If I run into again in the future, I'll create a Github issue.

modified   client/src/components/ProjectWizard/WizardSidebar/SidebarPoints.jsx
@@ -96,7 +96,7 @@ const SidebarPoints = props => {
   return (
     <div className={clsx(classes.metricsPanelItem, opacityTest)}>
       <div id={rule.code} className={earnedPointsColor || targetPointsColor}>
-        {rule.value}
+        {Number.isNaN(Number(rule.value)) ? 0 : rule.value}
       </div>
       <h3 className={classes.ruleName}>
         {rule.name}
modified   client/src/components/ProjectWizard/WizardSidebar/SidebarProjectLevel.jsx
@@ -59,7 +59,7 @@ const SidebarProjectLevel = ({ level, rules }) => {
       )}
     >
       <p id="PROJECT_LEVEL" className={classes.projectLevelValue}>
-        {level}
+        {Number.isNaN(Number(level)) ? 0 : level}
       </p>
       <h3 className={classes.projectLevelHeader}>
         PROJECT LEVEL

[entrotech]

This is working better, but when a NumberedLink button is pressed, it should navigate to the corresponding page. Right now, if you are on page 1 and press the Page 5 link, it goes to page 2. If you click it again, it goes to page 3, etc. If you click on a page number link less than the current page, it goes to current page -1. There is an onPageChange method in the TdmCalculationWizard component that effectively only allows going to the next or previous page. I think this can just be simplified to go directly to the page specified in the pageNo argument.