MPDX-9130 Combine MHA Pages #1547

kegrimes · 2025-12-12T14:30:29Z

Description

Combine new, edit, and view pages into a single page that routes to /housingAllowance/[requestId]. This page displays different UI based on the mode query parameter.

Implementation: I have used query params (?mode=new, ?mode=edit, ?mode=view) to determine which UI to display. I was thinking about using status (MhaStatusEnum), but there wouldn't be a solid way to determine which display is needed. When a user clicks the navigation buttons, they will be directed to the appropriate mode.

NOTE: In order to test this properly, you need to change MinisterHousingAllowance.tsx line 96 to this:

  const currentRequest = requests[1] || {};

It has been kept as requests[0] since changing it will affect the tests.

Testing

Go to /reports/housingAllowance
Click on "Edit Request"
Check that it displays correct UI with the appropriate mode AND user is on Step 2
Click back arrow icon
Click on "View Request"
Check that it displays correct UI with the appropriate mode

Checklist:

I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
I have applied the appropriate labels (Add the label "Preview" to automatically create a preview environment)
I have run the Claude Code /pr-review command locally and fixed any relevant suggestions
I have requested a review from another person on the project
I have tested my changes in preview or in staging
I have cleaned up my commit history

github-actions · 2025-12-12T14:34:04Z

Bundle sizes [mpdx-react]

Compared against 4f67f48

Route	Size (gzipped)	Diff
`/accountLists/[accountListId]/reports/housingAllowance/[requestId]`	163.28 KB	added
`/accountLists/[accountListId]/reports/housingAllowance/[...requestId]`	no change	removed

github-actions · 2025-12-12T14:49:01Z

Preview branch generated at https://mpdx-9130-combine-edit-new-pages.d3dytjb8adxkk5.amplifyapp.com

wjames111

Great work on this! Works really well, I had a few small comments and some suggestions but other then that it looks really good.

wjames111 · 2025-12-18T15:00:00Z

pages/accountLists/[accountListId]/reports/housingAllowance/[requestId].page.tsx

+  const modeLabel =
+    type === PageEnum.New ? 'New' : type === PageEnum.Edit ? 'Edit' : 'View';
  const title = t("{{mode}} Minister's Housing Allowance Request", {
-    mode:
-      type === PageEnum.New ? 'New' : type === PageEnum.Edit ? 'Edit' : 'View',
+    mode: modeLabel,


I would update the enum to 'New', 'Edit' and 'View' then just use type here.

Suggested change

const modeLabel =

type === PageEnum.New ? 'New' : type === PageEnum.Edit ? 'Edit' : 'View';

const title = t("{{mode}} Minister's Housing Allowance Request", {

mode:

type === PageEnum.New ? 'New' : type === PageEnum.Edit ? 'Edit' : 'View',

mode: modeLabel,

const title = t("{{mode}} Minister's Housing Allowance Request", {

mode: type,

wjames111 · 2025-12-18T15:01:53Z

pages/accountLists/[accountListId]/reports/housingAllowance/[requestId].page.tsx

-      : mode[1] === PageEnum.Edit
-        ? PageEnum.Edit
-        : PageEnum.View;
+  const type = getPageType(mode);


optional:
I might make this variable name a little more descriptive

Suggested change

const type = getPageType(mode);

const pageType = getPageType(mode);

wjames111 · 2025-12-18T15:16:58Z

src/components/Reports/MinisterHousingAllowance/MinisterHousingAllowance.tsx


+  const { data, error: requestsError } =
+    useMinistryHousingAllowanceRequestsQuery();
+  const requestsData = data?.ministryHousingAllowanceRequests.nodes || [];


You could update this and remove line 56 const requests = requestsData ?? [];

Suggested change

const requestsData = data?.ministryHousingAllowanceRequests.nodes || [];

const requests = data?.ministryHousingAllowanceRequests.nodes ?? [];

wjames111 · 2025-12-18T15:21:08Z

src/components/Reports/MinisterHousingAllowance/Shared/Helper/getRequestUrl.ts

+  return mode
+    ? `/accountLists/${accountListId}/reports/housingAllowance/${requestId}?mode=${mode}`
+    : `/accountLists/${accountListId}/reports/housingAllowance/${requestId}`;


We could probably dry this up a bit

Suggested change

return mode

? `/accountLists/${accountListId}/reports/housingAllowance/${requestId}?mode=${mode}`

: `/accountLists/${accountListId}/reports/housingAllowance/${requestId}`;

const baseUrl = `/accountLists/${accountListId}/reports/housingAllowance/${requestId}`;

return mode ? `${baseUrl}?mode=${mode}` : baseUrl;

wjames111 · 2025-12-18T15:23:27Z

src/components/Reports/MinisterHousingAllowance/MinisterHousingAllowance.tsx

        );
        const mhaRequestId = newRequest?.ministryHousingAllowanceRequest.id;
-        const requestLink = `/accountLists/${accountListId}/reports/housingAllowance/${mhaRequestId}/new`;
+        const requestLink = getRequestUrl(accountListId, mhaRequestId, 'new');


We could probably use the PageEnum here

Suggested change

const requestLink = getRequestUrl(accountListId, mhaRequestId, 'new');

const requestLink = getRequestUrl(accountListId, mhaRequestId, PageEnum.New);

wjames111 · 2025-12-18T15:43:56Z

src/components/Reports/MinisterHousingAllowance/RequestPage/RequestPage.tsx

                  <Receipt
                    formTitle={t('MHA Request')}
                    buttonText={t('View Your MHA')}
+                    editLink={`${getRequestUrl(accountListId, requestId, 'edit')}`}


I'd pass the enums here for editLink and viewLink.

wjames111 · 2025-12-18T15:50:19Z

...mponents/Reports/MinisterHousingAllowance/Shared/Context/MinisterHousingAllowanceContext.tsx

+  useEffect(() => {
+    if (type === PageEnum.Edit) {
+      setCurrentStep(StepsEnum.RentOrOwn);
+    }
+  }, [type]);


Are we sure we want to start edit mode on the second step?

wjames111 · 2025-12-18T15:50:56Z

src/components/Reports/MinisterHousingAllowance/SharedComponents/CurrentBoardApproved.tsx

      iconColor="success.main"
      linkOneText={t('View Current MHA')}
-      linkOne={`/accountLists/${accountListId}/reports/housingAllowance/${requestId}/view`}
+      linkOne={getRequestUrl(accountListId, requestId, 'view')}


Maybe enum instead of 'view' here.

wjames111 · 2025-12-18T15:51:26Z

src/components/Reports/MinisterHousingAllowance/SharedComponents/CurrentRequest.tsx

      iconColor="warning.main"
      linkOneText={t('View Request')}
-      linkOne={`/accountLists/${accountListId}/reports/housingAllowance/${requestId}/view`}
+      linkOne={getRequestUrl(accountListId, requestId, 'view')}


Same here on and on linkTwo.

wjames111 · 2025-12-18T15:53:15Z

src/hooks/useStepList.ts

-            complete: false,
-          },
-        ]
+      ? isEdit


I wonder if there's a way we could DRY this up a bit. Seems like a lot of repeated code.

Katelyn Grimes added 2 commits December 12, 2025 21:20

Combined new, edit, and view pages into single page

181c199

Fixed wrong import

e8d7ae4

Automatically takes user to step 2 when editing

11aee89

kegrimes added the Preview Environment Add this label to create an Amplify Preview label Dec 12, 2025

Katelyn Grimes added 5 commits December 12, 2025 22:08

Fixed a few tests

265515a

Claude review suggestions

a945aca

Fixed broken requestId links

01648e7

Refetch query when updating field

67dfabe

Revert current request

287f979

kegrimes closed this Dec 13, 2025

kegrimes reopened this Dec 13, 2025

kegrimes requested a review from dr-bizz December 13, 2025 02:44

wjames111 self-requested a review December 18, 2025 14:46

wjames111 reviewed Dec 18, 2025

View reviewed changes

	const type = getPageType(mode);
	const pageType = getPageType(mode);

	const requestsData = data?.ministryHousingAllowanceRequests.nodes \|\| [];
	const requests = data?.ministryHousingAllowanceRequests.nodes ?? [];

	const requestLink = getRequestUrl(accountListId, mhaRequestId, 'new');
	const requestLink = getRequestUrl(accountListId, mhaRequestId, PageEnum.New);

MPDX-9130 Combine MHA Pages #1547

Are you sure you want to change the base?

MPDX-9130 Combine MHA Pages #1547

Uh oh!

Conversation

kegrimes commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Testing

Checklist:

Uh oh!

github-actions bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle sizes [mpdx-react]

Uh oh!

github-actions bot commented Dec 12, 2025

Uh oh!

wjames111 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kegrimes commented Dec 12, 2025 •

edited

Loading

github-actions bot commented Dec 12, 2025 •

edited

Loading