frontend: switch to yarn berry

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9052
Co-authored-by: Samir Talwar <47582+SamirTalwar@users.noreply.github.com>
GitOrigin-RevId: d9c8bc29f9309247944d130d545c6dcaccff366a

frontend/.build.env

@@ -0,0 +1 @@
+NODE_OPTIONS=--max-old-space-size=13312

frontend/.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

frontend/.gitignore

@@ -43,5 +43,14 @@ Thumbs.db
 # Env
 .env
 
-# This is a snapshot generated during npm install, but not needed
-/snapshots.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

frontend/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

frontend/docs/generic-info.md

@@ -37,8 +37,8 @@ git clone https://github.com/<your-user-name>/graphql-engine
 cd graphql-engine
 cd console
 nvm use
-npm ci
-npx nx build-server-assets console-ce
+yarn install
+yarn nx build-server-assets console-ce
 ```
 
 At this point you need to compile and run the graphql-engine (follow the [getting started guide](../../server//CONTRIBUTING.md)), run it, and the console will be served at `http://localhost:8080`.

frontend/libs/console/legacy-ce/src/lib/docs/dev/tooling.stories.mdx

@@ -23,7 +23,7 @@ When there are hooks inside the component (side effects) that fetches the data f
 #### How to start storybook?
 
 ```bash
-npm run storybook
+yarn storybook
 ```
 
 ### React-Query
@@ -70,14 +70,14 @@ Pre-commit git-hook that runs linter and formatter is by default disabled. You c
   If you want to run a linter for all files, you can do:
 
   ```bash
-  npm run lint
+  yarn lint
   ```
 
 - [Prettier](https://prettier.io/) is used as the code formatter on console code.
   To format all files, you can run:
 
   ```bash
-  npm run format
+  yarn format
   ```
 
 ### Testing

frontend/libs/console/legacy-ce/src/lib/features/ControlPlane/README.md

@@ -1,4 +1,4 @@
-To generate GraphQL types, Run `npm run generate-control-plane-gql-types` from the `/frontend` directory
+To generate GraphQL types, Run `yarn generate-control-plane-gql-types` from the `/frontend` directory
 
 Note: The command uses the config file `frontend/control-plane-graphql-codegen.yml`. It uses the lux localdev endpoint and the localdev admin secret. Make sure
 those reflect the current localdev environment. Please update it accordingly if needed.

frontend/libs/console/legacy-ce/src/lib/features/IsFeatureEnabled/README.md

@@ -80,11 +80,7 @@ function Prometheus() {
       ifDisabled={(doNotMatch, current: { hasuraPlan }) => {
         if (doNotMatch.ee) {
           if (hasuraPlan.type === 'ce') {
-            return (
-              <div>
-                Try EE Lite and give all the paid feature a try for free!
-              </div>
-            );
+            return <div>Try EE Lite and give all the paid feature a try for free!</div>;
           }
 
           return <div>Prometheus is enabled for EE Lite only</div>;
@@ -110,9 +106,7 @@ function Prometheus() {
   if (status === 'disabled') {
     if (doNotMatch.ee) {
       if (hasuraPlan.type === 'ce') {
-        return (
-          <div>Try EE Lite and give all the paid feature a try for free!</div>
-        );
+        return <div>Try EE Lite and give all the paid feature a try for free!</div>;
       }
 
       return <div>Prometheus is enabled for EE Lite only</div>;

frontend/package.json

@@ -17,30 +17,13 @@
     "format:write": "nx format:write --base=origin/main",
     "format:write:all": "nx format:write --all",
     "install-git-hooks": "cd .. && husky install frontend/.husky",
-    "generate-control-plane-gql-types": "graphql-codegen --config control-plane-graphql-codegen.yml"
+    "generate-control-plane-gql-types": "graphql-codegen --config control-plane-graphql-codegen.yml",
+    "check-lock-files": "node ./tools/scripts/check-lock-files.js",
+    "postinstall": "yarn check-lock-files"
   },
   "private": true,
-  "overrides": {
-    "codemirror": "5.51.0",
-    "graphql-language-service-utils": "2.4.3",
-    "msw": {
-      "graphql": "14.5.8"
-    },
-    "graphql": "14.5.8",
-    "format-graphql": {
-      "graphql": "14.5.8"
-    },
-    "graphql-language-service-interface": "2.4.2",
-    "graphiql": {
-      "codemirror-graphql": {
-        ".": "0.12.2",
-        "graphql-language-service-parser": "1.6.4",
-        "graphql-language-service-interface": {
-          ".": "2.4.2",
-          "graphql-language-service-types": "1.6.3"
-        }
-      }
-    }
+  "resolutions": {
+    "@types/react": "17.0.39"
   },
   "engines": {
     "node": ">=16",

frontend/tools/scripts/check-lock-files.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+
+function checkLockFiles() {
+  const errors = [];
+  if (fs.existsSync('package-lock.json')) {
+    errors.push(
+      'Invalid occurence of "package-lock.json" file. Please remove it and use only "yarn.lock"'
+    );
+  }
+  if (fs.existsSync('pnpm-lock.yaml')) {
+    errors.push(
+      'Invalid occurence of "pnpm-lock.yaml" file. Please remove it and use only "yarn.lock"'
+    );
+  }
+  try {
+    const content = fs.readFileSync('yarn.lock', 'utf-8');
+    if (content.match(/localhost:487/)) {
+      errors.push(
+        'The "yarn.lock" has reference to local yarn repository ("localhost:4873"). Please use "registry.yarnpkg.com" in "yarn.lock"'
+      );
+    }
+  } catch {
+    errors.push('The "yarn.lock" does not exist or cannot be read');
+  }
+  return errors;
+}
+
+console.log('🔒🔒🔒 Validating lock files 🔒🔒🔒\n');
+const invalid = checkLockFiles();
+if (invalid.length > 0) {
+  invalid.forEach(e => console.log('🚨🚨 ' + e + ' 🚨🚨'));
+  console.log('\nTo fix it, please only use yarn as the package manager.');
+  process.exit(1);
+} else {
+  console.log('Lock file is valid 👍');
+  process.exit(0);
+}

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "graphql-engine-mono",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {}
-}

scripts/dev.sh

@@ -511,7 +511,7 @@ if [ "$MODE" = "graphql-engine" ] || [ "$MODE" = "graphql-engine-pro" ]; then
     echo_pretty ""
     echo_pretty "  If the console was modified since your last build (re)build assets with:"
     echo_pretty "      $ cd \"$PROJECT_ROOT/frontend\""
-    echo_pretty "      $ npm ci && npm run server-build:$EDITION_ABBREV"
+    echo_pretty "      $ yarn install && yarn server-build:$EDITION_ABBREV"
     echo_pretty ""
     echo_pretty "Useful endpoints when compiling with '$EDITION_NAME:developer' and running with '+RTS -T'"
     echo_pretty "   http://127.0.0.1:$HASURA_GRAPHQL_SERVER_PORT/dev/subscriptions"

scripts/make/frontend.mk

@@ -19,19 +19,19 @@ build-console-ee-assets: $(CONSOLE_EE_ASSETS_PATH)
 # `$@` refers to the target.
 
 $(CONSOLE_CE_ASSETS_PATH): frontend/node_modules
-	cd frontend && npm run server-build:ce
+	cd frontend && yarn server-build:ce
 	touch $@
 
 $(CONSOLE_EE_ASSETS_PATH): frontend/node_modules
-	cd frontend && npm run server-build:ee
+	cd frontend && yarn server-build:ee
 	touch $@
 
-# Install node_modules if package-lock.json changes
-frontend/node_modules: frontend/package-lock.json
-	cd frontend && npm install
+# Install node_modules if yarn.lock changes
+frontend/node_modules: frontend/yarn.lock
+	cd frontend && yarn install --immutable
 	touch $@
 
 # Cleanly install node_modules if package.json changes
-frontend/package-lock.json: frontend/package.json
-	cd frontend && npm ci
+frontend/yarn.lock: frontend/package.json
+	cd frontend && yarn install
 	touch $@

scripts/make/lint.mk

@@ -87,25 +87,25 @@ check-format-nix:
 ## format-frontend: auto-format all frontend code
 format-frontend: frontend/node_modules
 	@echo 'running nx format:write'
-	cd frontend && npm run format:write:all
+	cd frontend && yarn format:write:all
 
 .PHONY: format-frontend-changed
 ## format-frontend-changed: auto-format all frontend code (changed files only)
 format-frontend-changed: frontend/node_modules
 	@echo 'running nx format:write'
-	cd frontend && npm run format:write
+	cd frontend && yarn format:write
 
 .PHONY: check-format-frontend
 ## check-format-frontend: check frontend code
 check-format-frontend: frontend/node_modules
 	@echo 'running nx format:check'
-	cd frontend && npx nx format:check --base=origin/main
+	cd frontend && yarn nx format:check --base=origin/main
 
 .PHONY: check-format-frontend-changed
 ## check-format-frontend-changed: check frontend code (changed files only)
 check-format-frontend-changed: frontend/node_modules
 	@echo 'running nx format:check'
-	cd frontend && npx nx format:check --base=origin/main
+	cd frontend && yarn nx format:check --base=origin/main
 
 .PHONY: format
 format: format-hs format-nix format-frontend
@@ -175,13 +175,13 @@ lint-shell-changed:
 ## lint-frontend: lint all frontend code
 lint-frontend: frontend/node_modules
 	@echo 'running nx lint'
-	cd frontend && npm run lint
+	cd frontend && yarn lint
 
 .PHONY: lint-frontend-changed
 ## lint-frontend-changed: lint all frontend code
 lint-frontend-changed: frontend/node_modules
 	@echo 'running nx lint'
-	cd frontend && npx nx affected --target=lint --fix --parallel=3 --base=origin/main
+	cd frontend && yarn nx affected --target=lint --fix --parallel=3 --base=origin/main
 
 .PHONY: lint
 ## lint: run all lint commands, and check formatting