From b0096f56c6970c19ac71b2e391b182adb3c3ecdc Mon Sep 17 00:00:00 2001 From: Timmy Huang Date: Tue, 9 Jan 2024 12:05:18 -0800 Subject: [PATCH] chore: 5795 Upgrade node LTM version --- .github/workflows/deploy-happy-stack.yml | 6 +-- .github/workflows/rdev-update-for-pr.yml | 4 +- frontend/.nvmrc | 2 +- frontend/Dockerfile | 4 +- frontend/README.md | 2 +- frontend/package-lock.json | 38 ++++++++++++++----- frontend/package.json | 4 +- frontend/src/common/networkGuard.ts | 6 +-- .../components/CopyButton/index.tsx | 8 +++- .../components/Description/index.tsx | 8 +++- .../components/AnimatedNodes/index.tsx | 14 +++++-- 11 files changed, 64 insertions(+), 32 deletions(-) diff --git a/.github/workflows/deploy-happy-stack.yml b/.github/workflows/deploy-happy-stack.yml index c57faacdd339d..ff1da17e6138b 100644 --- a/.github/workflows/deploy-happy-stack.yml +++ b/.github/workflows/deploy-happy-stack.yml @@ -18,7 +18,7 @@ jobs: steps: - uses: actions/setup-node@v2 with: - node-version: "16.14.2" + node-version: "20.10.0" - name: Configure AWS Prod Credentials uses: aws-actions/configure-aws-credentials@v4 if: github.event.deployment.environment == 'prod' @@ -137,7 +137,7 @@ jobs: steps: - uses: actions/setup-node@v2 with: - node-version: "16.14.2" + node-version: "20.10.0" - uses: actions/setup-python@v5 with: python-version: "3.10" @@ -218,7 +218,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: "16.14.2" + node-version: "20.10.0" - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v4 with: diff --git a/.github/workflows/rdev-update-for-pr.yml b/.github/workflows/rdev-update-for-pr.yml index f24b7d216352a..f875a1bc114a8 100644 --- a/.github/workflows/rdev-update-for-pr.yml +++ b/.github/workflows/rdev-update-for-pr.yml @@ -271,7 +271,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: "16.14.2" + node-version: "20.10.0" - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v4 with: @@ -402,7 +402,7 @@ jobs: steps: - uses: actions/setup-node@v2 with: - node-version: "16.14.2" + node-version: "20.10.0" - uses: actions/checkout@v3 with: fetch-depth: 2 diff --git a/frontend/.nvmrc b/frontend/.nvmrc index 6276cf12fb16b..790e1105f22b5 100644 --- a/frontend/.nvmrc +++ b/frontend/.nvmrc @@ -1 +1 @@ -v16.14.2 +v20.10.0 diff --git a/frontend/Dockerfile b/frontend/Dockerfile index b483560d37671..435816aa81b2e 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,7 +1,7 @@ # Frontend dockerfile -# Pinning to 16.14.2 to avoid GH Action lint error exit code 243 +# Pinning to 20.10.0 to avoid GH Action lint error exit code 243 # See: https://stackoverflow.com/a/71892226/3120863 -FROM node:16.14.2 +FROM node:20.10.0 # install dependencies first, in a different location for easier app bind mounting for local development # due to default /opt permissions we have to create the dir with root and change perms diff --git a/frontend/README.md b/frontend/README.md index f7ba99c1db11f..95312d74045a3 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -17,7 +17,7 @@ The following steps will start a FE server that connects to `dev` API. (See [use 1. Install [`nvm`](https://github.com/nvm-sh/nvm) - Example: `brew install nvm` 1. Check `.nvmrc` to see which version of node to download. - - Example: `nvm install 16.14.2 && nvm use 16.14.2` + - Example: `nvm install 20.10.0 && nvm use 20.10.0` 1. Install npm packages and playwright browsers - Example: `npm i && npx playwright install` 1. Copy configs file `frontend/src/configs/local.js` to `frontend/src/configs/configs.js` diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 800d5e5eb938d..e1e0a03a7ba13 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -76,7 +76,7 @@ "@types/downloadjs": "^1.4.3", "@types/loadable__component": "^5.13.4", "@types/lodash": "^4.14.195", - "@types/node": "^17.0.45", + "@types/node": "^20.10.0", "@types/pako": "^2.0.0", "@types/papaparse": "^5.3.7", "@types/pixelmatch": "^5.2.4", @@ -117,7 +117,7 @@ "typescript": "^4.9.5" }, "engines": { - "node": "v16.14.2" + "node": "v20.10.0" } }, "../../components/packages/data-viz": { @@ -3716,10 +3716,13 @@ "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==" }, "node_modules/@types/node": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz", - "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==", - "dev": true + "version": "20.10.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.0.tgz", + "integrity": "sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } }, "node_modules/@types/normalize-package-data": { "version": "2.4.1", @@ -15128,6 +15131,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/unified": { "version": "10.1.2", "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz", @@ -18849,10 +18858,13 @@ "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==" }, "@types/node": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz", - "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==", - "dev": true + "version": "20.10.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.0.tgz", + "integrity": "sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==", + "dev": true, + "requires": { + "undici-types": "~5.26.4" + } }, "@types/normalize-package-data": { "version": "2.4.1", @@ -27172,6 +27184,12 @@ "which-boxed-primitive": "^1.0.2" } }, + "undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "unified": { "version": "10.1.2", "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index e7b6279a201cb..2c81289089291 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -72,7 +72,7 @@ "@types/downloadjs": "^1.4.3", "@types/loadable__component": "^5.13.4", "@types/lodash": "^4.14.195", - "@types/node": "^17.0.45", + "@types/node": "^20.10.0", "@types/pako": "^2.0.0", "@types/papaparse": "^5.3.7", "@types/pixelmatch": "^5.2.4", @@ -113,7 +113,7 @@ "typescript": "^4.9.5" }, "engines": { - "node": "v16.14.2" + "node": "v20.10.0" }, "keywords": [ "cellxgene", diff --git a/frontend/src/common/networkGuard.ts b/frontend/src/common/networkGuard.ts index 1336169da68dd..47e2e96a5ab8b 100644 --- a/frontend/src/common/networkGuard.ts +++ b/frontend/src/common/networkGuard.ts @@ -17,17 +17,15 @@ const maxRequests = 500; let timeoutExpiration = 0; let hasReachedMaxRequests = false; -type FetchArgs = [input: RequestInfo | URL, init?: RequestInit | undefined]; - export function networkGuard() { if (isSSR()) return; // Intercept network requests const originalFetch = window.fetch; - window.fetch = newFetch; + window.fetch = newFetch as typeof window.fetch; - function newFetch(...args: FetchArgs) { + function newFetch(...args: Parameters) { requestCount++; if (!timeoutExpiration) { diff --git a/frontend/src/components/Collections/components/Dataset/components/DownloadDataset/components/Content/components/DownloadLink/components/CopyButton/index.tsx b/frontend/src/components/Collections/components/Dataset/components/DownloadDataset/components/Content/components/DownloadLink/components/CopyButton/index.tsx index 02f1e04e17e58..c32bfd374a65a 100644 --- a/frontend/src/components/Collections/components/Dataset/components/DownloadDataset/components/Content/components/DownloadLink/components/CopyButton/index.tsx +++ b/frontend/src/components/Collections/components/Dataset/components/DownloadDataset/components/Content/components/DownloadLink/components/CopyButton/index.tsx @@ -18,7 +18,7 @@ export default function CopyButton({ const [animationStep, setAnimationStep] = useState( ANIMATION_STEP.IDLE ); - const timeoutRef = useRef(); + const timeoutRef = useRef(); const animation = ANIMATION[animationStep]; // Copy to clipboard, handle analytics, and initiate the copy animation. @@ -35,7 +35,11 @@ export default function CopyButton({ // Executes while copy animation is in progress for "COPY_EXIT", "COPIED_ENTER" and "COPIED_EXIT", "COPY_ENTER". // Increments the animation step. const onUpdateAnimationStep = () => { - timeoutRef.current = setTimeout(() => { + /** + * (thuang): Use window.setTimeout instead of setTimeout to avoid + * NodeJS setTimeout type being used + */ + timeoutRef.current = window.setTimeout(() => { // Executes the next animation progression, after duration of the current animation is complete. setAnimationStep(incrementAnimationState); }, animation.duration); diff --git a/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx b/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx index 4fa8870f58172..f217c00a559f2 100644 --- a/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx +++ b/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx @@ -85,7 +85,7 @@ export default function Description({ number | undefined >(DESCRIPTION_BREAKPOINT_HEIGHT_PX); - const [timerId, setTimerId] = useState(null); // For chatgpt hover event + const [timerId, setTimerId] = useState(null); // For chatgpt hover event const { isPastBreakpoint, containerRef } = useIsComponentPastBreakpointHeight( DESCRIPTION_BREAKPOINT_HEIGHT_PX ); @@ -192,7 +192,11 @@ export default function Description({ { - const id = setTimeout(() => { + /** + * (thuang): Specify window.setTimeout, so Typescript doesn't use + * the Node.js setTimeout type, which is incorrect. + */ + const id = window.setTimeout(() => { track(EVENTS.CG_CHAT_GPT_HOVER); }, 2 * 1000); setTimerId(id); diff --git a/frontend/src/views/CellGuide/components/common/OntologyDagView/components/AnimatedNodes/index.tsx b/frontend/src/views/CellGuide/components/common/OntologyDagView/components/AnimatedNodes/index.tsx index 629f5d2723c20..5ccb6a732794c 100644 --- a/frontend/src/views/CellGuide/components/common/OntologyDagView/components/AnimatedNodes/index.tsx +++ b/frontend/src/views/CellGuide/components/common/OntologyDagView/components/AnimatedNodes/index.tsx @@ -65,7 +65,7 @@ export default function AnimatedNodes({ cellTypesWithMarkerGeneStats, setCellInfoCellType, }: AnimatedNodesProps) { - const [timerId, setTimerId] = useState(null); // For hover event + const [timerId, setTimerId] = useState(null); // For hover event const router = useRouter(); const handleAnimationEnd = (node: HierarchyPointNode) => { // Update the starting position of the node to be its current position @@ -91,7 +91,11 @@ export default function AnimatedNodes({ datum: TreeNodeWithState ) => { if (!timerId) { - const id = setTimeout(() => { + /** + * (thuang): Use window.setTimeout instead of setTimeout to avoid + * NodeJS setTimeout type being used + */ + const id = window.setTimeout(() => { track(EVENTS.CG_TREE_NODE_HOVER, { cell_type: datum.name, }); @@ -233,7 +237,11 @@ export default function AnimatedNodes({ function handleMouseOut() { hideTooltip(); if (timerId) { - clearTimeout(timerId); + /** + * (thuang): Use window.clearTimeout instead of clearTimeout to avoid + * NodeJS clearTimeout type being used + */ + window.clearTimeout(timerId); setTimerId(null); } }