TAA-136: MVP of the Approval Request and Approval Request List page functionality #576

KlimekM · 2025-02-04T22:48:54Z

Description

This PR implements the core Approval Request functionality for the Approval Request List Page and the individual Approval Request page.

The Approval Request List page allows filtering based on a given status, and searching by subject. The search functionality currently happens in the client. Clicking on an individual approval request links to the page for that approval request.

The individual approval request page allows a user to view the details of the approval request as well as approve/deny a request with comments.

Error handling follows the pattern set forth by Service Catalog and renders the same error view.

Screenshots

List Page Desktop:

List Page Mobile:

List Page functionality:

Show Page Desktop:

Show Page Mobile:

Show Page Functionality:

ErrorBoundary if request fails:

Checklist

📗 all commit messages follow the conventional commits standard
⬅️ changes are compatible with RTL direction
♿ Changes to the UI are tested for accessibility and compliant with WCAG 2.1.
📝 changes are tested in Chrome, Firefox, Safari and Edge
📱 changes are responsive and tested in mobile
👍 PR is approved by @zendesk/vikings

…ck data

…th mock data

…update decision to send notes

byronhabana · 2025-02-05T15:22:08Z

src/modules/approval-requests/ApprovalRequestListPage.tsx

+  }, [approvalRequests, searchTerm]);
+
+  if (error) {
+    throw error;


nit: i know this is still MVP but we could note to handle errors gracefully in the future like a growl or something with better UX

maybe similar to using notify below?

Good callout, I followed the pattern used in the Service Catalog: https://github.com/zendesk/copenhagen_theme/blob/beta/src/modules/service-catalog/ServiceCatalogItemPage.tsx#L49-L51

This relies on the ErrorBoundary in the src/modules/approval-requests/renderApprovalRequestList.tsx file which will display this standard error screen:

byronhabana · 2025-02-05T15:31:21Z

src/modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx

+          {/* <Option value="clarification_requested" label="Info needed" /> */}
+          <Option value="approved" label="Approved" />
+          <Option value="rejected" label="Denied" />
+          <Option value="withdrawn" label="Withdrawn" />


will these options always be hardcoded?

The values will since they correspond with the accepted statuses in the API. The labels will be updated. I merged the translations earlier today and will follow up and update the text throughout

byronhabana · 2025-02-05T15:54:29Z

src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx

+      <MD>
+        {value.map((val) => (
+          <MultiselectTag key={val} hue="grey">
+            {val}


do we want to add support for nested dropdown values?

Oo, good call - let me try out a nested value to see what that would return as since we are using a custom endpoint for these.

byronhabana · 2025-02-05T15:54:50Z

src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx

+    return <MD>{value ? "Yes" : "No"}</MD>;
+  }
+
+  return <MD>{value}</MD>;


will this never be a date or lurf value?

It can be a LURF or a Date or any other custom field that is exposed to customers but in the instance of a LURF/Date the API returns a string value:

byronhabana · 2025-02-05T15:55:59Z

src/modules/approval-requests/components/approval-request/ApproverActions.tsx

+  const notify = useNotify();
+  const [comment, setComment] = useState("");
+  const [pendingStatus, setPendingStatus] = useState<
+    "APPROVED" | "REJECTED" | null


nit: these strings can likely be stored in CONSTs

Good point, I'll update

…otes

…rowing an error page

SirishaNeduri · 2025-02-05T18:07:46Z

@KlimekM The YML file is empty so there is no translation review needed. please let us know if the file has strings to be reviewed.

KlimekM · 2025-02-05T19:23:25Z

@KlimekM The YML file is empty so there is no translation review needed. please let us know if the file has strings to be reviewed.

Hey @SirishaNeduri, sorry about that - I put the translations up in a separate PR: #575 that @kubraokcu reviewed and merged this morning to kick off the translation process and will update here to use those strings as the content when they are available

KlimekM · 2025-02-05T22:51:57Z

package.json

@@ -66,7 +68,8 @@
    "@svgr/rollup": "^8.1.0",
    "@testing-library/dom": "^9.3.1",
    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/react": "^12.1.5",


Only using testing-library/react version 12 here because that is what is compatible with react 17 which is the current version of react within the repo

… components

KlimekM · 2025-02-05T23:06:19Z

.eslintrc.js

-      { "src/**/": "KEBAB_CASE" },
+      {
+        "src/**/!(__tests__)/": "KEBAB_CASE",
+      },


@luis-almeida I ended up adding a __tests__ directory within the approval-requests module and this was throwing an eslint error on those files. Let me know if you want to handle this differently.

…atar

…just date format

KlimekM · 2025-02-11T22:26:56Z

tsconfig.json

@@ -3,6 +3,7 @@
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
+    "esModuleInterop": true,


Updated here to account for lodash.debounce import error in test files

More context: https://www.typescriptlang.org/tsconfig/#esModuleInterop

src/modules/approval-requests/components/approval-request/ApprovalRequestBreadcrumbs.tsx

src/modules/approval-requests/components/approval-request/ApprovalStatusTag.tsx

…slation

KlimekM added 6 commits February 4, 2025 16:25

feat(TAA-163): create approval requests module and placeholder templates

c979b49

feat(TAA-163): build out initial Approval Request skeleton UI with mo…

548391f

…ck data

feat(TAA-163): build out initial Approval Request List skeleton UI wi…

e1e3c55

…th mock data

feat(TAA-163): wire up individual approval request to first API endpoint

a378675

feat(TAA-163): begin integrating with the decision API

aa08970

feat(TAA-163): wire up the Approval Request List to the REST API and …

bd686d0

…update decision to send notes

KlimekM requested review from a team as code owners February 4, 2025 22:48

byronhabana reviewed Feb 5, 2025

View reviewed changes

KlimekM force-pushed the KlimekM/approvals-eap-1 branch from 8c2e45b to c386be0 Compare February 5, 2025 17:00

fix(TAA-136): addresses type error, wires up now returning decision n…

c44cbc5

…otes

KlimekM force-pushed the KlimekM/approvals-eap-1 branch from c386be0 to c44cbc5 Compare February 5, 2025 17:38

fix(TAA-136): commit assets/ changes, without the custom_theme was th…

e0b910c

…rowing an error page

feat(TAA-163): add Breadcrumbs to the Approval Request page

6e2bf42

KlimekM commented Feb 5, 2025

View reviewed changes

test(TAA-163): begin adding tests for the individual approval-request…

0c77487

… components

KlimekM force-pushed the KlimekM/approvals-eap-1 branch from e6be3c7 to 0c77487 Compare February 5, 2025 23:03

KlimekM commented Feb 5, 2025

View reviewed changes

kubraokcu removed the request for review from a team February 6, 2025 09:36

KlimekM added 5 commits February 6, 2025 15:14

feat(TAA-163): add hardcoded link in dropdown for Approval requests

350abd6

fix(TAA-364): update decision textarea to match design and include av…

b828012

…atar

fix(TAA-370): remove border radius, add sortable sent on cell, and ad…

3968b2c

…just date format

fix: commit generated bundle file updates

e574128

feat: update to use translation function with English fallbacks

9ae1976

KlimekM force-pushed the KlimekM/approvals-eap-1 branch from 56823b1 to 9ae1976 Compare February 11, 2025 18:09

test: finish writing unit tests for ApprovalRequests

f9fd58b

KlimekM commented Feb 11, 2025

View reviewed changes

byronhabana approved these changes Feb 18, 2025

View reviewed changes

src/modules/approval-requests/components/approval-request/ApprovalRequestBreadcrumbs.tsx Outdated Show resolved Hide resolved

src/modules/approval-requests/components/approval-request/ApprovalStatusTag.tsx Outdated Show resolved Hide resolved

feat(TAA-136): address PR feedback re: using constant and missed tran…

a2fb5d7

…slation

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TAA-136: MVP of the Approval Request and Approval Request List page functionality #576

TAA-136: MVP of the Approval Request and Approval Request List page functionality #576

KlimekM commented Feb 4, 2025 •

edited

Loading

byronhabana Feb 5, 2025

byronhabana Feb 5, 2025

KlimekM Feb 5, 2025

byronhabana Feb 5, 2025

KlimekM Feb 5, 2025

byronhabana Feb 5, 2025

KlimekM Feb 5, 2025

byronhabana Feb 5, 2025

KlimekM Feb 5, 2025

byronhabana Feb 5, 2025

KlimekM Feb 5, 2025

SirishaNeduri commented Feb 5, 2025

KlimekM commented Feb 5, 2025

KlimekM Feb 5, 2025

KlimekM Feb 5, 2025

KlimekM Feb 11, 2025

TAA-136: MVP of the Approval Request and Approval Request List page functionality #576

Are you sure you want to change the base?

TAA-136: MVP of the Approval Request and Approval Request List page functionality #576

Conversation

KlimekM commented Feb 4, 2025 • edited Loading

Description

Screenshots

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SirishaNeduri commented Feb 5, 2025

KlimekM commented Feb 5, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KlimekM commented Feb 4, 2025 •

edited

Loading