fix(ci): run yarn install with --frozen-lockfile (cherry-pick #27099 for 3.1) (#27356)

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

Dockerfile.ui.tilt

@@ -4,6 +4,6 @@ WORKDIR /app/ui
 
 COPY ui /app/ui
 
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
-ENTRYPOINT ["yarn", "start"]
+ENTRYPOINT ["yarn", "start"]

Makefile

@@ -615,8 +615,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 && yarn install
+	cd ui && yarn install --frozen-lockfile
+
+.PHONY: run-yarn
+run-yarn: test-tools-image
+	$(call run-in-test-client,make 'YARN_COMMAND=$(YARN_COMMAND)' run-yarn-local)
+
+.PHONY: run-yarn-local
+run-yarn-local:
+	cd ui && yarn $(YARN_COMMAND)
 
 start-test-k8s:
 	go run ./hack/k8s

Tiltfile

@@ -242,7 +242,7 @@ docker_build(
     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 && yarn install --frozen-lockfile"', trigger=['/app/ui/package.json', '/app/ui/yarn.lock']),
     ],
 )
 

docs/developer-guide/development-cycle.md

@@ -25,15 +25,40 @@ kubectl config set-context --current --namespace=argocd
 
 ### Pull in all 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 `yarn install --frozen-lockfile` command, which only brings package versions that are defined in the `yarn.lock` file without trying to resolve and download new package versions.
+
 Argo CD recently migrated to Go modules. Usually, dependencies will be downloaded at build time, but the Makefile provides two targets to download and vendor all dependencies:
 
 * `make mod-download` or `make mod-download-local` will download all required Go modules and
 * `make mod-vendor` or `make mod-vendor-local` will vendor those dependencies into the Argo CD source tree
 
+### Updating UI build dependencies
+
+If you need to add new UI dependencies or update existing ones you need
+to run a `yarn` command in the ./ui directory to resolve and download new packages.
+
+You can run it in the docker container using the `make run-yarn` make target.
+
+For example, to add new dependency `newpackage` you may run command like
+
+```shell
+make run-yarn YARN_COMMAND="add newpackage --ignore-scripts"
+```
+
+To upgrade an existing package:
+
+```shell
+make run-yarn YARN_COMMAND="upgrade 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

@@ -20,6 +20,7 @@ RUN dpkg-divert --add --rename --divert /opt/google/chrome/google-chrome.real /o
 WORKDIR /usr/src/app
 COPY package*.json ./
 COPY yarn.lock ./
-RUN yarn install && yarn cache clean
+RUN yarn install --frozen-lockfile && yarn cache clean
+
 COPY . .
 

ui/README.md

@@ -8,7 +8,7 @@ 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.
-  2. Run `yarn install` to install local prerequisites.
+  2. Run `yarn install --frozen-lockfile` to install local prerequisites.
   3. Run `yarn start` to launch the webpack dev UI server.
   4. Run `yarn build` to bundle static resources into the `./dist` directory.