From 4ffa5a1bee674f96c15a1db1468552247f81d750 Mon Sep 17 00:00:00 2001 From: Joseph Andersen Date: Mon, 6 Mar 2023 19:52:40 -0600 Subject: [PATCH 1/7] Update to Node 18 Fixes #7078 --- .github/actions/build-frontend/action.yml | 2 +- frontend-react/.nvmrc | 2 +- frontend-react/package.json | 2 +- .../MessageTracker/MessageReceivers.test.tsx | 9 ++++- .../MessageTracker/MessageReceivers.tsx | 9 +++-- frontend-react/src/utils/TestUtils.ts | 40 +++++++++++++++++++ 6 files changed, 57 insertions(+), 7 deletions(-) diff --git a/.github/actions/build-frontend/action.yml b/.github/actions/build-frontend/action.yml index 81037f9144f..51de4242e7a 100644 --- a/.github/actions/build-frontend/action.yml +++ b/.github/actions/build-frontend/action.yml @@ -28,7 +28,7 @@ runs: - name: Use Node.js ${{ matrix.node-version }} with yarn uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: "16.19.1" + node-version: "18.14.2" - run: yarn install working-directory: frontend-react diff --git a/frontend-react/.nvmrc b/frontend-react/.nvmrc index 8b3ed1b235e..72e4a483c02 100644 --- a/frontend-react/.nvmrc +++ b/frontend-react/.nvmrc @@ -1 +1 @@ -16.19.1 +18.14.2 diff --git a/frontend-react/package.json b/frontend-react/package.json index fb4b97d2fb8..f55745f9d36 100644 --- a/frontend-react/package.json +++ b/frontend-react/package.json @@ -190,6 +190,6 @@ "workbox-webpack-plugin": "^6.5.4" }, "engines": { - "node": "~16.19.1" + "node": "~18.14.2" } } diff --git a/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx b/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx index 652ac99b551..073f378eff8 100644 --- a/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx +++ b/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx @@ -3,8 +3,10 @@ import userEvent from "@testing-library/user-event"; import { ReceiverData } from "../../config/endpoints/messageTracker"; import { renderApp } from "../../utils/CustomRenderUtils"; +import { createProxyNodeDateTimeFormatter } from "../../utils/TestUtils"; import { + dateTimeFormatter, FilterOption, formatMessages, MessageReceivers, @@ -98,8 +100,13 @@ const sortScenarios: { ]; describe("formatMessages function", () => { + // Proxy formatter so we can replace node's unicode spaces + const alteredFormatter = + createProxyNodeDateTimeFormatter(dateTimeFormatter); test("formats data properly", () => { - expect(formatMessages(MOCK_RECEIVER_DATA)).toEqual(formattedMockData); + expect(formatMessages(MOCK_RECEIVER_DATA, alteredFormatter)).toEqual( + formattedMockData + ); }); }); diff --git a/frontend-react/src/components/MessageTracker/MessageReceivers.tsx b/frontend-react/src/components/MessageTracker/MessageReceivers.tsx index b94b513495c..72f1f77a8af 100644 --- a/frontend-react/src/components/MessageTracker/MessageReceivers.tsx +++ b/frontend-react/src/components/MessageTracker/MessageReceivers.tsx @@ -266,7 +266,10 @@ export const MessageReceiversRow = ({ // fileName: string; // transportResults: string; // } -export function formatMessages(data: ReceiverData[]): NormalizedReceiverData[] { +export function formatMessages( + data: ReceiverData[], + formatter: Intl.DateTimeFormat +): NormalizedReceiverData[] { return data.map((receiverItem: ReceiverData): NormalizedReceiverData => { const formattedData: NormalizedReceiverData = Object.keys( ColumnDataTitles @@ -289,7 +292,7 @@ export function formatMessages(data: ReceiverData[]): NormalizedReceiverData[] { break; case ColumnDataTitles.date: if (receiverItem.createdAt) - formattedData.date = dateTimeFormatter.format( + formattedData.date = formatter.format( new Date(receiverItem.createdAt) ); break; @@ -364,7 +367,7 @@ export const MessageReceivers = ({ receiverDetails }: MessageReceiverProps) => { const [activeColumnSortOrder, setActiveColumnSortOrder] = useState(FilterOptionsEnum.NONE); const normalizedData = useMemo( - () => formatMessages(receiverDetails), + () => formatMessages(receiverDetails, dateTimeFormatter), [receiverDetails] ); const sortedData = useMemo( diff --git a/frontend-react/src/utils/TestUtils.ts b/frontend-react/src/utils/TestUtils.ts index 40fb2c24ba4..1dd22029320 100644 --- a/frontend-react/src/utils/TestUtils.ts +++ b/frontend-react/src/utils/TestUtils.ts @@ -48,3 +48,43 @@ export function conditionallySuppressConsole(...matchers: string[]) { jestWarn.mockRestore(); }; } + +/** + * Future updates to browser Intl will eventually include a change to strings where + * some spaces will be unicode no-break spaces (u+202F / charCode 8239) instead of + * regular spaces (charCode 32). This apparently already happened in the browser + * space but was quickly reverted due to breaking WebCompat. Node 18.14.2 + * implements this change which will break tests doing string comparisons of Intl + * output with developer-crafted comparisons. A future update to Node may revert + * this change as well if this was reverted in V8 itself. In either case, this + * helper will be important for the eventual transition period if they persue this + * again. Use this helper function preferably within a mock implementation or + * proxy object handler so the strings are passed on naturally. + */ +export function replaceUnicodeNarrowNoBreakSpaces(str: string) { + return str.replaceAll(String.fromCharCode(8239), String.fromCharCode(32)); +} + +/** + * Create a proxy of a Node DateTimeFormat object so we can replace unicode no-break + * strings before returning. + */ +export function createProxyNodeDateTimeFormatter( + formatter: Intl.DateTimeFormat +) { + return new Proxy(formatter, { + get(target, p) { + const targets: (string | symbol)[] = [ + "format", + "formatRange", + ] as (keyof Intl.DateTimeFormat)[]; + + if (targets.includes(p)) { + return (...args: any[]) => + replaceUnicodeNarrowNoBreakSpaces(target.format(...args)); + } + + return (target as any)[p]; + }, + }); +} From 923d1e6fdf4ef5bcccd75130f09f8ed27c5d3472 Mon Sep 17 00:00:00 2001 From: Joseph Andersen Date: Tue, 7 Mar 2023 10:24:33 -0600 Subject: [PATCH 2/7] docs --- frontend-react/README.md | 6 +++--- .../docs/getting-started/Using-an-apple-silicon-mac.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend-react/README.md b/frontend-react/README.md index 3c9f4ab277b..5c39e984508 100644 --- a/frontend-react/README.md +++ b/frontend-react/README.md @@ -12,9 +12,9 @@ Use the directions here to install nvm: https://github.com/nvm-sh/nvm#install--u Then: ```bash -nvm install 16.19.x # refer to nvmrc for exact current version -node -v # v16.19.x -npm -v # v8.x.x +nvm install 18.14.x # refer to nvmrc for exact current version +node -v # v18.14.x +npm -v # v9.5.x npm install --global yarn ``` diff --git a/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md b/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md index 484326f7750..6b4d5f62d3f 100644 --- a/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md +++ b/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md @@ -134,8 +134,8 @@ Use the directions here to install nvm: https://github.com/nvm-sh/nvm#install--u Then: ```bash -nvm install 16.19.x # refer to nvmrc for exact current version -node -v # v16.19.x +nvm install 18.14.x # refer to nvmrc for exact current version +node -v # v18.14.x npm -v # v8.x.x npm install --global yarn From a1be31af121e9b2a12e01f8223a0e8f8d34e2a01 Mon Sep 17 00:00:00 2001 From: Joseph Andersen Date: Tue, 7 Mar 2023 10:27:44 -0600 Subject: [PATCH 3/7] docs --- prime-router/docs/getting-started/Using-an-apple-silicon-mac.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md b/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md index 6b4d5f62d3f..bcf7c72e7b8 100644 --- a/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md +++ b/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md @@ -136,7 +136,7 @@ Then: ```bash nvm install 18.14.x # refer to nvmrc for exact current version node -v # v18.14.x -npm -v # v8.x.x +npm -v # v9.5.x npm install --global yarn ``` From ae6fa493641879bbf87b649c7cc5d34e352abafc Mon Sep 17 00:00:00 2001 From: Joseph Andersen Date: Thu, 9 Mar 2023 11:13:27 -0600 Subject: [PATCH 4/7] revert string changes due to 18.15 --- frontend-react/.nvmrc | 2 +- frontend-react/README.md | 4 +- frontend-react/package.json | 2 +- .../MessageTracker/MessageReceivers.test.tsx | 9 +---- .../MessageTracker/MessageReceivers.tsx | 30 +++++++------- frontend-react/src/utils/TestUtils.ts | 40 ------------------- 6 files changed, 21 insertions(+), 66 deletions(-) diff --git a/frontend-react/.nvmrc b/frontend-react/.nvmrc index 72e4a483c02..932b2b01d71 100644 --- a/frontend-react/.nvmrc +++ b/frontend-react/.nvmrc @@ -1 +1 @@ -18.14.2 +18.15 diff --git a/frontend-react/README.md b/frontend-react/README.md index 5c39e984508..190176f9d5b 100644 --- a/frontend-react/README.md +++ b/frontend-react/README.md @@ -12,8 +12,8 @@ Use the directions here to install nvm: https://github.com/nvm-sh/nvm#install--u Then: ```bash -nvm install 18.14.x # refer to nvmrc for exact current version -node -v # v18.14.x +nvm install 18.15.x # refer to nvmrc for exact current version +node -v # v18.15.x npm -v # v9.5.x npm install --global yarn diff --git a/frontend-react/package.json b/frontend-react/package.json index f55745f9d36..772a72a8586 100644 --- a/frontend-react/package.json +++ b/frontend-react/package.json @@ -190,6 +190,6 @@ "workbox-webpack-plugin": "^6.5.4" }, "engines": { - "node": "~18.14.2" + "node": "~18.15" } } diff --git a/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx b/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx index 073f378eff8..652ac99b551 100644 --- a/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx +++ b/frontend-react/src/components/MessageTracker/MessageReceivers.test.tsx @@ -3,10 +3,8 @@ import userEvent from "@testing-library/user-event"; import { ReceiverData } from "../../config/endpoints/messageTracker"; import { renderApp } from "../../utils/CustomRenderUtils"; -import { createProxyNodeDateTimeFormatter } from "../../utils/TestUtils"; import { - dateTimeFormatter, FilterOption, formatMessages, MessageReceivers, @@ -100,13 +98,8 @@ const sortScenarios: { ]; describe("formatMessages function", () => { - // Proxy formatter so we can replace node's unicode spaces - const alteredFormatter = - createProxyNodeDateTimeFormatter(dateTimeFormatter); test("formats data properly", () => { - expect(formatMessages(MOCK_RECEIVER_DATA, alteredFormatter)).toEqual( - formattedMockData - ); + expect(formatMessages(MOCK_RECEIVER_DATA)).toEqual(formattedMockData); }); }); diff --git a/frontend-react/src/components/MessageTracker/MessageReceivers.tsx b/frontend-react/src/components/MessageTracker/MessageReceivers.tsx index 72f1f77a8af..a3fa56e0cb6 100644 --- a/frontend-react/src/components/MessageTracker/MessageReceivers.tsx +++ b/frontend-react/src/components/MessageTracker/MessageReceivers.tsx @@ -11,6 +11,8 @@ import classnames from "classnames"; import { ReceiverData } from "../../config/endpoints/messageTracker"; import { parseFileLocation } from "../../utils/misc"; +const NO_DATA_STRING = "N/A"; + export type MessageReceiverProps = { receiverDetails: ReceiverData[]; }; @@ -192,11 +194,14 @@ export const MessageReceiversRow = ({

@@ -266,15 +271,12 @@ export const MessageReceiversRow = ({ // fileName: string; // transportResults: string; // } -export function formatMessages( - data: ReceiverData[], - formatter: Intl.DateTimeFormat -): NormalizedReceiverData[] { +export function formatMessages(data: ReceiverData[]): NormalizedReceiverData[] { return data.map((receiverItem: ReceiverData): NormalizedReceiverData => { const formattedData: NormalizedReceiverData = Object.keys( ColumnDataTitles ).reduce((accumulator: any, currentValue: string) => { - accumulator[currentValue] = "N/A"; + accumulator[currentValue] = NO_DATA_STRING; return accumulator; }, {}); for (const key of Object.keys( @@ -292,7 +294,7 @@ export function formatMessages( break; case ColumnDataTitles.date: if (receiverItem.createdAt) - formattedData.date = formatter.format( + formattedData.date = dateTimeFormatter.format( new Date(receiverItem.createdAt) ); break; @@ -302,19 +304,19 @@ export function formatMessages( break; case ColumnDataTitles.main: const { folderLocation } = parseFileLocation( - receiverItem?.fileUrl || "" + receiverItem?.fileUrl || NO_DATA_STRING ); formattedData.main = folderLocation as Status; break; case ColumnDataTitles.sub: const { sendingOrg } = parseFileLocation( - receiverItem?.fileUrl || "" + receiverItem?.fileUrl || NO_DATA_STRING ); formattedData.sub = sendingOrg; break; case ColumnDataTitles.fileName: const { fileName } = parseFileLocation( - receiverItem?.fileUrl || "" + receiverItem?.fileUrl || NO_DATA_STRING ); formattedData.fileName = fileName; break; @@ -367,7 +369,7 @@ export const MessageReceivers = ({ receiverDetails }: MessageReceiverProps) => { const [activeColumnSortOrder, setActiveColumnSortOrder] = useState(FilterOptionsEnum.NONE); const normalizedData = useMemo( - () => formatMessages(receiverDetails, dateTimeFormatter), + () => formatMessages(receiverDetails), [receiverDetails] ); const sortedData = useMemo( diff --git a/frontend-react/src/utils/TestUtils.ts b/frontend-react/src/utils/TestUtils.ts index 1dd22029320..40fb2c24ba4 100644 --- a/frontend-react/src/utils/TestUtils.ts +++ b/frontend-react/src/utils/TestUtils.ts @@ -48,43 +48,3 @@ export function conditionallySuppressConsole(...matchers: string[]) { jestWarn.mockRestore(); }; } - -/** - * Future updates to browser Intl will eventually include a change to strings where - * some spaces will be unicode no-break spaces (u+202F / charCode 8239) instead of - * regular spaces (charCode 32). This apparently already happened in the browser - * space but was quickly reverted due to breaking WebCompat. Node 18.14.2 - * implements this change which will break tests doing string comparisons of Intl - * output with developer-crafted comparisons. A future update to Node may revert - * this change as well if this was reverted in V8 itself. In either case, this - * helper will be important for the eventual transition period if they persue this - * again. Use this helper function preferably within a mock implementation or - * proxy object handler so the strings are passed on naturally. - */ -export function replaceUnicodeNarrowNoBreakSpaces(str: string) { - return str.replaceAll(String.fromCharCode(8239), String.fromCharCode(32)); -} - -/** - * Create a proxy of a Node DateTimeFormat object so we can replace unicode no-break - * strings before returning. - */ -export function createProxyNodeDateTimeFormatter( - formatter: Intl.DateTimeFormat -) { - return new Proxy(formatter, { - get(target, p) { - const targets: (string | symbol)[] = [ - "format", - "formatRange", - ] as (keyof Intl.DateTimeFormat)[]; - - if (targets.includes(p)) { - return (...args: any[]) => - replaceUnicodeNarrowNoBreakSpaces(target.format(...args)); - } - - return (target as any)[p]; - }, - }); -} From cdb828b63456b229914a5aabfb4aa40faeea8c6e Mon Sep 17 00:00:00 2001 From: Joseph Andersen Date: Thu, 9 Mar 2023 11:24:16 -0600 Subject: [PATCH 5/7] 18.15 --- .github/actions/build-frontend/action.yml | 2 +- .../docs/getting-started/Using-an-apple-silicon-mac.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/actions/build-frontend/action.yml b/.github/actions/build-frontend/action.yml index 51de4242e7a..807794ddfa4 100644 --- a/.github/actions/build-frontend/action.yml +++ b/.github/actions/build-frontend/action.yml @@ -28,7 +28,7 @@ runs: - name: Use Node.js ${{ matrix.node-version }} with yarn uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: "18.14.2" + node-version: "18.152" - run: yarn install working-directory: frontend-react diff --git a/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md b/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md index bcf7c72e7b8..a55b7aa63ed 100644 --- a/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md +++ b/prime-router/docs/getting-started/Using-an-apple-silicon-mac.md @@ -134,8 +134,8 @@ Use the directions here to install nvm: https://github.com/nvm-sh/nvm#install--u Then: ```bash -nvm install 18.14.x # refer to nvmrc for exact current version -node -v # v18.14.x +nvm install 18.15x # refer to nvmrc for exact current version +node -v # v18.15x npm -v # v9.5.x npm install --global yarn From d524da15cf32324aab21689de4640baa199bb500 Mon Sep 17 00:00:00 2001 From: Joseph Andersen Date: Thu, 9 Mar 2023 11:24:56 -0600 Subject: [PATCH 6/7] typo --- .github/actions/build-frontend/action.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/actions/build-frontend/action.yml b/.github/actions/build-frontend/action.yml index 807794ddfa4..1c1530538c3 100644 --- a/.github/actions/build-frontend/action.yml +++ b/.github/actions/build-frontend/action.yml @@ -28,7 +28,7 @@ runs: - name: Use Node.js ${{ matrix.node-version }} with yarn uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: "18.152" + node-version: "18.15" - run: yarn install working-directory: frontend-react From 5bef3b22177c0672604951c6f912ffd1c73ba59f Mon Sep 17 00:00:00 2001 From: Joseph Andersen Date: Fri, 10 Mar 2023 11:08:05 -0600 Subject: [PATCH 7/7] use explicit loopback ip address for proxy --- frontend-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend-react/package.json b/frontend-react/package.json index 348e42c0162..5ab4a24a884 100644 --- a/frontend-react/package.json +++ b/frontend-react/package.json @@ -3,7 +3,7 @@ "version": "0.1.1", "private": true, "npmClient": "yarn", - "proxy": "http://localhost:7071", + "proxy": "http://127.0.0.1:7071", "dependencies": { "@microsoft/applicationinsights-react-js": "^3.4.1", "@microsoft/applicationinsights-web": "^2.8.10",