chore: migrate to pnpm (#23937)

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

.github/workflows/ci-build.yaml

@@ -362,24 +362,24 @@ jobs:
           egress-policy: audit      
       - name: Checkout code
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - name: Install pnpm
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          package_json_file: ui/package.json
       - name: Setup NodeJS
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           # renovate: datasource=node-version packageName=node versioning=node
           node-version: '22.9.0'
-      - name: Restore node dependency cache
+          cache: 'pnpm'
-        id: cache-dependencies
+          cache-dependency-path: '**/pnpm-lock.yaml'
-        uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
-        with:
-          path: ui/node_modules
-          key: ${{ runner.os }}-node-dep-v2-${{ hashFiles('**/yarn.lock') }}
       - name: Install node dependencies
         run: |
-          cd ui && yarn install --frozen-lockfile --ignore-optional --non-interactive
+          cd ui && pnpm i --frozen-lockfile
       - name: Build UI code
         run: |
-          yarn test
+          pnpm test
-          yarn build
+          pnpm build
         env:
           NODE_ENV: production
           NODE_ONLINE_ENV: online
@@ -388,7 +388,7 @@ jobs:
           CODECOV_TOKEN: ${{ github.ref == 'refs/heads/master' && secrets.CODECOV_TOKEN || '' }}
         working-directory: ui/
       - name: Run ESLint
-        run: yarn lint
+        run: pnpm lint
         working-directory: ui/
 
   shellcheck:
@@ -422,15 +422,6 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
-      - name: Restore node dependency cache
-        id: cache-dependencies
-        uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
-        with:
-          path: ui/node_modules
-          key: ${{ runner.os }}-node-dep-v2-${{ hashFiles('**/yarn.lock') }}
-      - name: Remove other node_modules directory
-        run: |
-          rm -rf ui/node_modules/argo-ui/node_modules
       - name: Get e2e code coverage
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
@@ -524,6 +515,15 @@ jobs:
       - name: Set GOPATH
         run: |
           echo "GOPATH=$HOME/go" >> $GITHUB_ENV
+      - name: Setup NodeJS
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          # renovate: datasource=node-version packageName=node versioning=node
+          node-version: '22.9.0'
+      - name: Install pnpm
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          package_json_file: ui/package.json
       - name: GH actions workaround - Kill XSP4 process
         run: |
           sudo pkill mono || true

.github/workflows/release.yaml

@@ -225,6 +225,11 @@ jobs:
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          package_json_file: ui/package.json
+
       - name: Setup Golang
         uses: actions/setup-go@4a3601121dd01d1626a1e23e37211e3254c1c06c # v6.4.0
         with:
@@ -239,12 +244,12 @@ jobs:
           # defines the sigs.k8s.io/bom version to use.
           SIGS_BOM_VERSION: v0.2.1
           # comma delimited list of project relative folders to inspect for package
-          # managers (gomod, yarn, npm).
+          # managers (gomod, pnpm, npm).
           PROJECT_FOLDERS: '.,./ui'
           # full qualified name of the docker image to be inspected
           DOCKER_IMAGE: ${{ needs.setup-variables.outputs.quay_image_name }}
         run: |
-          yarn install --cwd ./ui
+          pnpm install --dir ./ui --frozen-lockfile
           go install github.com/spdx/spdx-sbom-generator/cmd/generator@$SPDX_GEN_VERSION
           go install sigs.k8s.io/bom/cmd/bom@$SIGS_BOM_VERSION
 

Dockerfile

@@ -95,17 +95,16 @@ WORKDIR /home/argocd
 FROM --platform=$BUILDPLATFORM docker.io/library/node:23.0.0@sha256:9d09fa506f5b8465c5221cbd6f980e29ae0ce9a3119e2b9bc0842e6a3f37bb59 AS argocd-ui
 
 WORKDIR /src
-COPY ["ui/package.json", "ui/yarn.lock", "./"]
+COPY ["ui/package.json", "ui/pnpm-lock.yaml", "./"]
 
-RUN yarn install --network-timeout 200000 && \
+RUN npm install -g corepack@0.34.6 && corepack enable && pnpm install --frozen-lockfile
-    yarn cache clean
 
 COPY ["ui/", "."]
 
 ARG ARGO_VERSION=latest
 ENV ARGO_VERSION=$ARGO_VERSION
 ARG TARGETARCH
-RUN HOST_ARCH=$TARGETARCH NODE_ENV='production' NODE_ONLINE_ENV='online' NODE_OPTIONS=--max_old_space_size=8192 yarn build
+RUN HOST_ARCH=$TARGETARCH NODE_ENV='production' NODE_ONLINE_ENV='online' NODE_OPTIONS=--max_old_space_size=8192 pnpm build
 
 ####################################################################################################
 # Argo CD Build stage which performs the actual build of Argo CD binaries

Dockerfile.ui.tilt

@@ -4,6 +4,6 @@ WORKDIR /app/ui
 
 COPY ui /app/ui
 
-RUN yarn install
+RUN npm install -g corepack@0.34.6 && corepack enable && pnpm install
 
-ENTRYPOINT ["yarn", "start"]
+ENTRYPOINT ["pnpm", "start"]

Makefile

@@ -74,7 +74,7 @@ ARGOCD_E2E_APISERVER_PORT?=8080
 ARGOCD_E2E_REPOSERVER_PORT?=8081
 ARGOCD_E2E_REDIS_PORT?=6379
 ARGOCD_E2E_DEX_PORT?=5556
-ARGOCD_E2E_YARN_HOST?=localhost
+ARGOCD_E2E_JS_HOST?=localhost
 ARGOCD_E2E_DISABLE_AUTH?=
 ARGOCD_E2E_DIR?=/tmp/argo-e2e
 
@@ -113,7 +113,7 @@ define run-in-test-server
 		-e GOCACHE=/tmp/go-build-cache \
 		-e ARGOCD_IN_CI=$(ARGOCD_IN_CI) \
 		-e ARGOCD_E2E_TEST=$(ARGOCD_E2E_TEST) \
-		-e ARGOCD_E2E_YARN_HOST=$(ARGOCD_E2E_YARN_HOST) \
+		-e ARGOCD_E2E_JS_HOST=$(ARGOCD_E2E_JS_HOST) \
 		-e ARGOCD_E2E_DISABLE_AUTH=$(ARGOCD_E2E_DISABLE_AUTH) \
 		-e ARGOCD_TLS_DATA_PATH=${ARGOCD_TLS_DATA_PATH:-/tmp/argocd-local/tls} \
 		-e ARGOCD_SSH_DATA_PATH=${ARGOCD_SSH_DATA_PATH:-/tmp/argocd-local/ssh} \
@@ -419,7 +419,7 @@ lint-ui: test-tools-image
 
 .PHONY: lint-ui-local
 lint-ui-local:
-	cd ui && yarn lint
+	cd ui && pnpm lint
 
 # Build all Go code
 .PHONY: build
@@ -663,7 +663,7 @@ dep-ui: test-tools-image
 	$(call run-in-test-client,make dep-ui-local)
 
 dep-ui-local:
-	cd ui && yarn install
+	cd ui && pnpm install
 
 start-test-k8s:
 	go run ./hack/k8s

Procfile

@@ -5,7 +5,7 @@ redis: hack/start-redis-with-password.sh
 repo-server: [ "$BIN_MODE" = 'true' ] && COMMAND=./dist/argocd || COMMAND='go run ./cmd/main.go' && sh -c "export PATH=\$(pwd)/dist:\$PATH && [ -n \"\$ARGOCD_GIT_CONFIG\" ] && export GIT_CONFIG_GLOBAL=\$ARGOCD_GIT_CONFIG && export GIT_CONFIG_NOSYSTEM=1; GOCOVERDIR=${ARGOCD_COVERAGE_DIR:-/tmp/coverage/repo-server} FORCE_LOG_COLORS=1 ARGOCD_FAKE_IN_CLUSTER=true ARGOCD_GNUPGHOME=${ARGOCD_GNUPGHOME:-/tmp/argocd-local/gpg/keys} ARGOCD_PLUGINSOCKFILEPATH=${ARGOCD_PLUGINSOCKFILEPATH:-./test/cmp}  ARGOCD_GPG_DATA_PATH=${ARGOCD_GPG_DATA_PATH:-/tmp/argocd-local/gpg/source} ARGOCD_TLS_DATA_PATH=${ARGOCD_TLS_DATA_PATH:-/tmp/argocd-local/tls} ARGOCD_SSH_DATA_PATH=${ARGOCD_SSH_DATA_PATH:-/tmp/argocd-local/ssh} ARGOCD_BINARY_NAME=argocd-repo-server ARGOCD_GPG_ENABLED=${ARGOCD_GPG_ENABLED:-false} $COMMAND --loglevel debug --port ${ARGOCD_E2E_REPOSERVER_PORT:-8081} --redis localhost:${ARGOCD_E2E_REDIS_PORT:-6379} --otlp-address=${ARGOCD_OTLP_ADDRESS}"
 cmp-server: [ "$ARGOCD_E2E_TEST" = 'true' ] && exit 0 || [ "$BIN_MODE" = 'true' ] && COMMAND=./dist/argocd || COMMAND='go run ./cmd/main.go' && sh -c "FORCE_LOG_COLORS=1 ARGOCD_FAKE_IN_CLUSTER=true ARGOCD_BINARY_NAME=argocd-cmp-server ARGOCD_PLUGINSOCKFILEPATH=${ARGOCD_PLUGINSOCKFILEPATH:-./test/cmp} $COMMAND --config-dir-path ./test/cmp --loglevel debug --otlp-address=${ARGOCD_OTLP_ADDRESS}"
 commit-server: [ "$BIN_MODE" = 'true' ] && COMMAND=./dist/argocd || COMMAND='go run ./cmd/main.go' && sh -c "GOCOVERDIR=${ARGOCD_COVERAGE_DIR:-/tmp/coverage/commit-server} FORCE_LOG_COLORS=1 ARGOCD_BINARY_NAME=argocd-commit-server $COMMAND --loglevel debug --port ${ARGOCD_E2E_COMMITSERVER_PORT:-8086}"
-ui: sh -c 'cd ui && ${ARGOCD_E2E_YARN_CMD:-yarn} start'
+ui: sh -c 'cd ui && ${ARGOCD_E2E_PNPM_CMD:-pnpm} start'
 git-server: test/fixture/testrepos/start-git.sh
 helm-registry: test/fixture/testrepos/start-helm-registry.sh
 oci-registry: test/fixture/testrepos/start-authenticated-helm-registry.sh

Tiltfile

@@ -257,11 +257,11 @@ k8s_resource(
 # ui dependencies
 local_resource(
     'node-modules',
-    'yarn',
+    'pnpm install',
     dir='ui',
     deps = [
         'ui/package.json',
-        'ui/yarn.lock',
+        'ui/pnpm-lock.yaml',
     ],
     allow_parallel=True,
 )
@@ -271,11 +271,11 @@ docker_build(
     'argocd-ui',
     context='.',
     dockerfile='Dockerfile.ui.tilt',
-    entrypoint=['sh', '-c', 'cd /app/ui && yarn start'], 
+    entrypoint=['sh', '-c', 'cd /app/ui && pnpm start'],
     only=['ui'],
     live_update=[
         sync('ui', '/app/ui'),
-        run('sh -c "cd /app/ui && yarn install"', trigger=['/app/ui/package.json', '/app/ui/yarn.lock']),
+        run('sh -c "cd /app/ui && pnpm install"', trigger=['/app/ui/package.json', '/app/ui/pnpm-lock.yaml']),
     ],
 )
 

docs/developer-guide/dependencies.md

@@ -38,23 +38,23 @@ and others. Although you can make changes to these files and run them locally, i
 
 1. Fork and clone the [Argo UI repository](https://github.com/argoproj/argo-ui).
 
-2. `cd` into your `argo-ui` directory, and then run `yarn install`. 
+2. `cd` into your `argo-ui` directory, and then run `pnpm install`. 
 
 3. Make your file changes.
 
-4. Run `yarn start` to start a [storybook](https://storybook.js.org/) dev server and view the components in your browser. Make sure all your changes work as expected. 
+4. Run `pnpm start` to start a [storybook](https://storybook.js.org/) dev server and view the components in your browser. Make sure all your changes work as expected. 
 
-5. Use [yarn link](https://classic.yarnpkg.com/en/docs/cli/link/) to link Argo UI package to your Argo CD repository. (Commands below assume that `argo-ui` and `argo-cd` are both located within the same parent folder)
+5. Use [pnpm link](https://pnpm.io/cli/link) to link Argo UI package to your Argo CD repository. (Commands below assume that `argo-ui` and `argo-cd` are both located within the same parent folder)
 
     * `cd argo-ui`
-    * `yarn link`
+    * `pnpm link`
     * `cd ../argo-cd/ui`
-    * `yarn link argo-ui`
+    * `pnpm link argo-ui`
 
     Once the `argo-ui` package has been successfully linked, test changes in your local development environment. 
 
 6. Commit changes and open a PR to [Argo UI](https://github.com/argoproj/argo-ui). 
 
-7. Once your PR has been merged in Argo UI, `cd` into your `argo-cd/ui` folder and run `yarn add git+https://github.com/argoproj/argo-ui.git`. This will update the commit SHA in the `ui/yarn.lock` file to use the latest master commit for argo-ui. 
+7. Once your PR has been merged in Argo UI, `cd` into your `argo-cd/ui` folder and run `pnpm add git+https://github.com/argoproj/argo-ui.git`. This will update the commit SHA in the `ui/pnpm-lock.yaml` file to use the latest master commit for argo-ui. 
 
-8. Submit changes to `ui/yarn.lock`in a PR to Argo CD. 
+8. Submit changes to `ui/pnpm-lock.yaml` in a PR to Argo CD. 

docs/developer-guide/development-cycle.md

@@ -60,7 +60,7 @@ The Linter might make some automatic changes to your code, such as indentation f
 * Finally, after the Linter reports no errors, run `git status` or `git diff` to check for any changes made automatically by Lint
 * If there were automatic changes, commit them to your local branch
 
-If you touched UI code, you should also run the Yarn linter on it:
+If you touched UI code, you should also run the linter on it:
 
 * Run `make lint-ui` or `make lint-ui-local`
 * Fix any of the errors reported by it

docs/developer-guide/test-e2e.md

@@ -45,7 +45,7 @@ The Makefile's `start-e2e` target starts instances of ArgoCD on your local machi
 - `ARGOCD_E2E_REPOSERVER_PORT`: Listener port for `argocd-reposerver` (default: `8081`)
 - `ARGOCD_E2E_DEX_PORT`: Listener port for `dex` (default: `5556`)
 - `ARGOCD_E2E_REDIS_PORT`: Listener port for `redis` (default: `6379`)
-- `ARGOCD_E2E_YARN_CMD`: Command to use for starting the UI via Yarn (default: `yarn`)
+- `ARGOCD_E2E_PNPM_CMD`: Command to use for starting the UI via pnpm (default: `pnpm`)
 - `ARGOCD_E2E_DIR`: Local path to the repository to use for ephemeral test data
 
 If you have changed the port for `argocd-server`, be sure to also set `ARGOCD_SERVER` environment variable to point to that port, e.g. `export ARGOCD_SERVER=localhost:8888` before running `make test-e2e` so that the test will communicate to the correct server component.

docs/developer-guide/toolchain-guide.md

@@ -117,9 +117,9 @@ you should edit your `~/.kube/config` and modify the `server` option to point to
 
 <https://nodejs.org/en/download>
 
-#### Install `yarn`
+#### Install `pnpm`
 
-<https://classic.yarnpkg.com/lang/en/docs/install/>
+<https://pnpm.io/installation>
 
 #### Install `goreman`
 
@@ -130,7 +130,7 @@ Goreman is used to start all needed processes to get a working Argo CD developme
 #### Install required dependencies and build-tools
 
 > [!NOTE]
-> The installations instructions are valid for Linux hosts only. Mac instructions will follow shortly.
+> The installation instructions are valid for Linux hosts only. Mac instructions will follow shortly.
 
 For installing the tools required to build and test Argo CD on your local system, we provide convenient installer scripts. By default, they will install binaries to `/usr/local/bin` on your system, which might require `root` privileges.
 

hack/snyk-report.sh

@@ -92,7 +92,7 @@ for version in $versions; do
         }
       )
       # Hack to make sure even if there are no vulnerabilities, a row is added to the table.
-      + [{displayTargetFile: "go.mod"}, {displayTargetFile: "ui/yarn.lock"}]
+      + [{displayTargetFile: "go.mod"}, {displayTargetFile: "ui/pnpm-lock.yaml"}]
       # Group by target file (e.g. go.mod) so we can see where the vulnerabilities are.
       | group_by(.displayTargetFile)
       | map(

manifests/dev-tilt/ui-deployment.yaml

@@ -17,7 +17,7 @@ spec:
           env:
             - name: ARGOCD_API_URL
               value: https://argocd-server
-            - name: ARGOCD_E2E_YARN_HOST
+            - name: ARGOCD_E2E_JS_HOST
               value: "0.0.0.0"
           ports:
             - containerPort: 4000

test/container/Dockerfile

@@ -102,7 +102,6 @@ COPY --from=registry /etc/distribution/config.yml /etc/docker/registry/config.ym
 # Copy node binaries
 COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
 COPY --from=node /usr/local/bin/node /usr/local/bin
-COPY --from=node /opt/yarn-v1.22.22 /opt/yarn-v1.22.22
 
 # Entrypoint is required for container's user management
 COPY ./test/container/entrypoint.sh /usr/local/bin
@@ -135,8 +134,8 @@ RUN userdel -r ubuntu && \
     ln -s /usr/local/bin/node /usr/local/bin/nodejs && \
     ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm && \
     ln -s /usr/local/lib/node_modules/npm/bin/npx-cli.js /usr/local/bin/npx && \
-    ln -s /opt/yarn-v1.22.22/bin/yarn /usr/local/bin/yarn && \
+    npm install -g corepack@0.34.6 && \
-    ln -s /opt/yarn-v1.22.22/bin/yarnpkg /usr/local/bin/yarnpkg && \
+    corepack enable && \
     mkdir -p /var/lib/registry
 
 ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]

test/container/Procfile

@@ -4,7 +4,7 @@ dex: sh -c "test $ARGOCD_IN_CI = true && exit 0; ARGOCD_BINARY_NAME=argocd-dex g
 redis: sh -c "/usr/local/bin/redis-server --save "" --appendonly no --port ${ARGOCD_E2E_REDIS_PORT:-6379}"
 repo-server: [ "$BIN_MODE" = 'true' ] && COMMAND=./dist/argocd || COMMAND='go run ./cmd/main.go' && sh -c "FORCE_LOG_COLORS=1 ARGOCD_FAKE_IN_CLUSTER=true ARGOCD_GNUPGHOME=${ARGOCD_GNUPGHOME:-/tmp/argocd-local/gpg/keys} ARGOCD_PLUGINSOCKFILEPATH=${ARGOCD_PLUGINSOCKFILEPATH:-./test/cmp}  ARGOCD_GPG_DATA_PATH=${ARGOCD_GPG_DATA_PATH:-/tmp/argocd-local/gpg/source} ARGOCD_BINARY_NAME=argocd-repo-server $COMMAND --loglevel debug --port ${ARGOCD_E2E_REPOSERVER_PORT:-8081} --redis localhost:${ARGOCD_E2E_REDIS_PORT:-6379}"
 commit-server: [ "$BIN_MODE" = 'true' ] && COMMAND=./dist/argocd || COMMAND='go run ./cmd/main.go' && sh -c "FORCE_LOG_COLORS=1 ARGOCD_BINARY_NAME=argocd-commit-server $COMMAND --loglevel debug --port ${ARGOCD_E2E_COMMITSERVER_PORT:-8086}"
-ui: sh -c "test $ARGOCD_IN_CI = true && exit 0; cd ui && ARGOCD_E2E_YARN_HOST=0.0.0.0 ${ARGOCD_E2E_YARN_CMD:-yarn} start"
+ui: sh -c "test $ARGOCD_IN_CI = true && exit 0; cd ui && ARGOCD_E2E_JS_HOST=0.0.0.0 ${ARGOCD_E2E_PNPM_CMD:-pnpm} start"
 reaper: ./test/container/reaper.sh
 sshd: sudo sh -c "test $ARGOCD_E2E_TEST = true && /usr/sbin/sshd -p 2222 -D -e"
 fcgiwrap: sudo sh -c "test $ARGOCD_E2E_TEST = true && (fcgiwrap -s unix:/var/run/fcgiwrap.socket & sleep 1 && chmod 777 /var/run/fcgiwrap.socket && wait)"

ui-test/Dockerfile

@@ -19,7 +19,7 @@ RUN dpkg-divert --add --rename --divert /opt/google/chrome/google-chrome.real /o
 
 WORKDIR /usr/src/app
 COPY package*.json ./
-COPY yarn.lock ./
+COPY pnpm-lock.yaml ./
-RUN yarn install && yarn cache clean
+RUN npm install -g corepack@0.34.6 && corepack enable && pnpm install
 COPY . .
 

ui-test/package.json

@@ -11,6 +11,7 @@
   },
   "author": "Keith Chong",
   "license": "Apache-2.0",
+  "packageManager": "pnpm@10.28.1",
   "dependencies": {
     "@types/selenium-webdriver": "^4.1.28",
     "assert": "^2.1.0",
@@ -26,7 +27,6 @@
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^5.8.3",
+    "typescript": "^5.8.3"
-    "yarn": "^1.22.22"
   }
 }

ui/.gitignore

@@ -2,6 +2,6 @@ node_modules
 .vscode
 junit.xml
 coverage
-/yarn-error.log
+/pnpm-error.log
 .yalc
 yalc.lock

ui/README.md

@@ -6,21 +6,21 @@ Web UI for [Argo CD](https://github.com/argoproj/argo-cd).
 
 ## Getting started
 
-  1. Install [NodeJS](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com).  On macOS with [Homebrew](https://brew.sh/), running `brew install node yarn` will accomplish this.
+  1. Install [NodeJS](https://nodejs.org/en/download/) and [pnpm](https://pnpm.io).  On macOS with [Homebrew](https://brew.sh/), running `brew install node pnpm` will accomplish this.
-  2. Run `yarn install` to install local prerequisites.
+  2. Run `pnpm install` to install local prerequisites.
-  3. Run `yarn start` to launch the webpack dev UI server.
+  3. Run `pnpm start` to launch the webpack dev UI server.
-  4. Run `yarn build` to bundle static resources into the `./dist` directory.
+  4. Run `pnpm build` to bundle static resources into the `./dist` directory.
 
-To build a Docker image, run `IMAGE_NAMESPACE=yourimagerepo IMAGE_TAG=latest yarn docker`.
+To build a Docker image, run `IMAGE_NAMESPACE=yourimagerepo IMAGE_TAG=latest pnpm docker`.
 
-To do the same and push to a Docker registry, run `IMAGE_NAMESPACE=yourimagerepo IMAGE_TAG=latest DOCKER_PUSH=true yarn docker`.
+To do the same and push to a Docker registry, run `IMAGE_NAMESPACE=yourimagerepo IMAGE_TAG=latest DOCKER_PUSH=true pnpm docker`.
 
 ## Pre-commit Checks
 
 Make sure your code passes the lint checks:
 
-```bash
+```sh
-yarn lint --fix
+pnpm lint --fix
 ```
 
 If you are using VSCode, add this configuration to `.vscode/settings.json` in the root of this repository to identify and fix lint issues automatically before you save file.

ui/jest.config.js

@@ -3,11 +3,9 @@ module.exports = {
   testEnvironment: 'jsdom',
   reporters: ['default', 'jest-junit'],
   collectCoverage: true,
-  transformIgnorePatterns: ['node_modules/(?!(argo-ui)/)'],
+  transformIgnorePatterns: ['node_modules/(?!(argo-ui|.*\\.pnpm.*argo-ui.*)/)'],
   transform: {
-    '^.+\\.tsx?$': ['ts-jest', {
+    '^.+\\.tsx?$': ['ts-jest']
-      isolatedModules: true,
-    }]
   },
   globals: {
     'self': {}

ui/package.json

@@ -2,6 +2,7 @@
   "name": "argo-cd-ui",
   "version": "1.0.0",
   "license": "Apache-2.0",
+  "packageManager": "pnpm@10.28.1",
   "scripts": {
     "start": "webpack-dev-server --config ./src/app/webpack.config.js --mode development",
     "docker": "./scripts/build_docker.sh",
@@ -57,11 +58,14 @@
     "xterm": "^4.19.0",
     "xterm-addon-fit": "^0.5.0"
   },
-  "resolutions": {
+  "pnpm": {
-    "@types/react": "^16.9.3",
+    "overrides": {
-    "@types/react-dom": "^16.8.2",
+      "@types/react": "^16.9.3",
-    "normalize-url": "4.5.1",
+      "@types/react-dom": "^16.8.2",
-    "rxjs": "6.6.7"
+      "normalize-url": "4.5.1",
+      "rxjs": "6.6.7",
+      "formidable": "2.1.2"
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -72,14 +76,16 @@
     "@eslint/js": "^9.1.1",
     "@types/classnames": "^2.2.3",
     "@types/cookie": "^0.5.1",
-    "@types/dagre": "^0.7.40",
+    "@types/dagre": "0.7.42",
     "@types/deepmerge": "^2.2.0",
     "@types/git-url-parse": "^9.0.1",
+    "@types/history": "^4.7.2",
     "@types/jest": "^29.5.14",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.6",
     "@types/minimatch": "^3.0.3",
     "@types/node": "20.14.12",
+    "@types/popper.js": "^1.11.0",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^16.8.5",
     "@types/react-autocomplete": "^1.8.10",
@@ -92,6 +98,7 @@
     "@types/react-test-renderer": "^16.8.3",
     "@types/uuid": "^9.0.1",
     "add": "^2.0.6",
+    "ajv": "^7.2.4",
     "babel-jest": "^29.7.0",
     "babel-loader": "^8.0.6",
     "codecov": "^3.8.3",
@@ -108,6 +115,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^6.4.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
+    "popper.js": "^1.16.1",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "raw-loader": "^0.5.1",
@@ -122,7 +130,6 @@
     "typescript-eslint": "^7.8.0",
     "webpack": "^5.105.4",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
+    "webpack-dev-server": "^4.7.4"
-    "yarn": "^1.22.22"
   }
 }

ui/src/app/applications/components/application-details/application-details.tsx

@@ -1,5 +1,5 @@
 import {NotificationType, SlidingPanel, Tooltip, SplitButtonAction} from 'argo-ui';
-import * as classNames from 'classnames';
+import classNames from 'classnames';
 import React, {useState, useEffect, useCallback, useRef, useContext, FC} from 'react';
 import * as ReactDOM from 'react-dom';
 import * as models from '../../../shared/models';

ui/src/app/applications/components/application-pod-view/pod-view.tsx

@@ -190,7 +190,9 @@ export function PodView(props: PodViewProps) {
                                                                 </Moment>
                                                             </div>
                                                         ) : null}
-                                                        {group.info?.map(infoItem => <div key={infoItem.name}>{infoItem.value}</div>)}
+                                                        {group.info?.map(infoItem => (
+                                                            <div key={infoItem.name}>{infoItem.value}</div>
+                                                        ))}
                                                     </div>
                                                 )}
                                             </div>

ui/src/app/tsconfig.json

@@ -11,6 +11,7 @@
         "allowSyntheticDefaultImports": true,
         "noUnusedLocals": true,
         "declaration": false,
+        "isolatedModules": true,
         "lib": [
             "es2017",
             "dom"

ui/src/app/webpack.config.js

@@ -50,7 +50,20 @@ const config = {
             },
             {
                 test: /\.scss$/,
-                use: ['style-loader', 'raw-loader', 'sass-loader']
+                use: [
+                    'style-loader',
+                    'raw-loader',
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sassOptions: {
+                                includePaths: ['node_modules'],
+                                quietDeps: true,
+                                silenceDeprecations: ['import', 'legacy-js-api', 'global-builtin', 'color-functions', 'mixed-decls']
+                            }
+                        }
+                    }
+                ]
             },
             {
                 test: /\.css$/,
@@ -108,7 +121,23 @@ const config = {
             disableDotRule: true
         },
         port: 4000,
-        host: process.env.ARGOCD_E2E_YARN_HOST || 'localhost',
+        host: process.env.ARGOCD_E2E_JS_HOST || 'localhost',
+        client: {
+            overlay: {
+                errors: true,
+                warnings: false,
+                // Filter out 401 unauthorized errors from overlay
+                runtimeErrors: (error) => {
+                    if (error.message && error.message.includes('Unauthorized')) {
+                        return false;
+                    }
+                    if (error.message && error.message.includes('401')) {
+                        return false;
+                    }
+                    return true;
+                }
+            }
+        },
         proxy: {
             '/extensions': proxyConf,
             '/api': proxyConf,