UI: Replace yarn by npm (#4564)

Signed-off-by: Augustin Husson <[email protected]>

Author: Nexucis

.github/workflows/react.yml

@@ -15,19 +15,14 @@ jobs:
     name: React UI test on Node ${{ matrix.node }}
     steps:
       - uses: actions/checkout@v2
-      - name: Setup node
-        uses: actions/setup-node@v1
+      - name: install nodejs
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
-        id: yarn-cache
+      - uses: actions/cache@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('pkg/ui/react-app/yarn.lock') }}
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-node-
       - run: make react-app-test

CONTRIBUTING.md

@@ -68,7 +68,7 @@ The following section explains various suggestions and procedures to note during
 
 * It is strongly recommended that you use Linux distributions systems or OSX for development.
 * Go 1.13.9 or newer installed.
-* For React UI, you will need a working NodeJS environment and the Yarn package manager to compile the Web UI assets.
+* For React UI, you will need a working NodeJS environment and the npm package manager to compile the Web UI assets.
 
 ### First Steps
 

Makefile

@@ -88,8 +88,8 @@ help: ## Displays help.
 .PHONY: all
 all: format build
 
-$(REACT_APP_NODE_MODULES_PATH): $(REACT_APP_PATH)/package.json $(REACT_APP_PATH)/yarn.lock
-	   cd $(REACT_APP_PATH) && yarn --frozen-lockfile
+$(REACT_APP_NODE_MODULES_PATH): $(REACT_APP_PATH)/package.json $(REACT_APP_PATH)/package-lock.json
+	   cd $(REACT_APP_PATH) && npm ci
 
 $(REACT_APP_OUTPUT_DIR): $(REACT_APP_NODE_MODULES_PATH) $(REACT_APP_SOURCE_FILES)
 	   @echo ">> building React app"
@@ -107,22 +107,22 @@ assets: $(GO_BINDATA) $(REACT_APP_OUTPUT_DIR)
 .PHONY: react-app-lint
 react-app-lint: $(REACT_APP_NODE_MODULES_PATH)
 	   @echo ">> running React app linting"
-	   cd $(REACT_APP_PATH) && yarn lint:ci
+	   cd $(REACT_APP_PATH) && npm run lint:ci
 
 .PHONY: react-app-lint-fix
 react-app-lint-fix:
 	@echo ">> running React app linting and fixing errors where possible"
-	cd $(REACT_APP_PATH) && yarn lint
+	cd $(REACT_APP_PATH) && npm run lint
 
 .PHONY: react-app-test
 react-app-test: | $(REACT_APP_NODE_MODULES_PATH) react-app-lint
 	@echo ">> running React app tests"
-	cd $(REACT_APP_PATH) && export CI=true && yarn test --no-watch
+	cd $(REACT_APP_PATH) && export CI=true && npm test --no-watch
 
 .PHONY: react-app-start
 react-app-start: $(REACT_APP_NODE_MODULES_PATH)
 	@echo ">> running React app"
-	cd $(REACT_APP_PATH) && yarn start
+	cd $(REACT_APP_PATH) && npm start
 
 .PHONY: build
 build: ## Builds Thanos binary using `promu`.

pkg/ui/react-app/README.md

@@ -13,24 +13,24 @@ Instead of plain JavaScript, we use [TypeScript](https://www.typescriptlang.org/
 To work with the React UI code, you will need to have the following tools installed:
 
 * The [Node.js](https://nodejs.org/) JavaScript runtime.
-* The [Yarn](https://yarnpkg.com/) package manager.
+* The [npm](https://www.npmjs.com/) package manager. Once you installed Node, npm should already be available.
 * *Recommended:* An editor with TypeScript, React, and [ESLint](https://eslint.org/) linting support. See e.g. [Create React App's editor setup instructions](https://create-react-app.dev/docs/setting-up-your-editor/). If you are not sure which editor to use, we recommend using [Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript). Make sure that [the editor uses the project's TypeScript version rather than its own](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
 
 **NOTE**: When using Visual Studio Code, be sure to open the `pkg/ui/react-app` directory in the editor instead of the root of the repository. This way, the right ESLint and TypeScript configuration will be picked up from the React workspace.
 
 ## Installing npm dependencies
 
-The React UI depends on a large number of [npm](https://www.npmjs.com/) packages. These are not checked in, so you will need to download and install them locally via the Yarn package manager:
+The React UI depends on a large number of [npm](https://www.npmjs.com/) packages. These are not checked in, so you will need to download and install them locally via the npm package manager:
 
-    yarn
+    npm install 
 
-Yarn consults the `package.json` and `yarn.lock` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.
+npm consults the `package.json` and `package-lock.json` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.
 
 ## Running a local development server
 
 You can start a development server for the React UI outside of a running Thanos server by running:
 
-    yarn start
+    npm start
 
 This will open a browser window with the React app running on http://localhost:3000/. The page will reload if you make edits to the source code. You will also see any lint errors in the console.
 
@@ -42,11 +42,11 @@ Due to a `"proxy": "http://localhost:10902"` setting in the `package.json` file,
 
 Create React App uses the [Jest](https://jestjs.io/) framework for running tests. To run tests in interactive watch mode:
 
-    yarn test
+    npm test
 
 To generate an HTML-based test coverage report, run:
 
-    CI=true yarn test --coverage
+    CI=true npm test --coverage
 
 This creates a `coverage` subdirectory with the generated report. Open `coverage/lcov-report/index.html` in the browser to view it.
 
@@ -60,15 +60,15 @@ We define linting rules for the [ESLint](https://eslint.org/) linter. We recomme
 
 To detect and automatically fix lint errors, run:
 
-    yarn lint
+    npm run lint
 
 This is also available via the `react-app-lint-fix` target in the main Thanos `Makefile`.
 
 ## Building the app for production
 
 To build a production-optimized version of the React app to a `build` subdirectory, run:
 
-    yarn build
+    npm run build
 
 **NOTE:** You will likely not need to do this directly. Instead, this is taken care of by the `assets` target in the main Thanos `Makefile` when building the full binary.