fix(ci): run yarn install with --frozen-lockfile (#27098) (#27099)

Signed-off-by: Eugene Doudine <eugene.doudine@octopus.com>

Dockerfile.ui.tilt

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

Makefile

@@ -662,8 +662,17 @@ install-go-tools-local:
 dep-ui: test-tools-image
 	$(call run-in-test-client,make dep-ui-local)
 
+.PHONY: dep-ui-local
 dep-ui-local:
-	cd ui && pnpm install
+	cd ui && pnpm install --frozen-lockfile
+
+.PHONY: run-pnpm
+run-pnpm: test-tools-image
+	$(call run-in-test-client,make 'PNPM_COMMAND=$(PNPM_COMMAND)' run-pnpm-local)
+
+.PHONY: run-pnpm-local
+run-pnpm-local:
+	cd ui && pnpm $(PNPM_COMMAND)
 
 start-test-k8s:
 	go run ./hack/k8s

Tiltfile

@@ -275,7 +275,7 @@ docker_build(
     only=['ui'],
     live_update=[
         sync('ui', '/app/ui'),
-        run('sh -c "cd /app/ui && pnpm install"', trigger=['/app/ui/package.json', '/app/ui/pnpm-lock.yaml']),
+        run('sh -c "cd /app/ui && pnpm install --frozen-lockfile"', trigger=['/app/ui/package.json', '/app/ui/pnpm-lock.yaml']),
     ],
 )
 

docs/developer-guide/development-cycle.md

@@ -23,12 +23,37 @@ All following commands in this guide assume the namespace is already set.
 kubectl config set-context --current --namespace=argocd
 ```
 
-### Pull in all build dependencies
+### Pull in all UI build dependencies
 
-As build dependencies change over time, you have to synchronize your development environment with the current specification. In order to pull in all required dependencies, issue:
+As build dependencies change over time, you have to synchronize your development environment with the current specification. In order to pull in all required UI dependencies (NPM packages), issue:
 
 * `make dep-ui` or `make dep-ui-local`
 
+These commands run `pnpm install --frozen-lockfile` command, which only brings package versions that are defined in the `pnpm-lock.yaml` file without trying to resolve and download new package versions.
+
+### Updating UI build dependencies
+
+If you need to add new UI dependencies or update existing ones you need 
+to run a `pnpm` command in the ./ui directory to resolve and download new packages. 
+
+You can run it in the docker container using the `make run-pnpm` make target.
+
+For example, to add new dependency `newpackage` you may run command like
+
+```shell
+make run-pnpm PNPM_COMMAND="add newpackage --ignore-scripts"
+```
+
+To upgrade an existing package:
+
+```shell
+make run-pnpm PNPM_COMMAND="update existingpackage@1.0.2 --ignore-scripts"
+```
+
+Please consider using best security practices when adding or upgrading
+NPM dependencies, such as this
+[guide](https://github.com/lirantal/npm-security-best-practices/blob/main/README.md).
+
 ### Generate API glue code and other assets
 
 Argo CD relies on Google's [Protocol Buffers](https://developers.google.com/protocol-buffers) for its API, and this makes heavy use of auto-generated glue code and stubs. Whenever you touched parts of the API code, you must re-generate the auto generated code.

ui-test/Dockerfile

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

ui/README.md

@@ -7,7 +7,7 @@ Web UI for [Argo CD](https://github.com/argoproj/argo-cd).
 ## Getting started
 
   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 `pnpm install` to install local prerequisites.
+  2. Run `pnpm install --frozen-lockfile` to install local prerequisites.
   3. Run `pnpm start` to launch the webpack dev UI server.
   4. Run `pnpm build` to bundle static resources into the `./dist` directory.