Merge branch 'leipert-make-package-json-scripts-consistent' into 'master'

Make package json scripts more consistent

See merge request gitlab-org/gitlab!54340

.prettierignore

 /app/assets/javascripts/locale/**/app.js
+/fixtures/lib/gitlab/graphql/
 /node_modules/
 /public/
 /vendor/

doc/development/contributing/style_guides.md

@@ -56,7 +56,7 @@ The current Lefthook configuration can be found in [`lefthook.yml`](https://gitl
 Before you push your changes, Lefthook automatically runs the following checks:
 
 - Danger: Runs a subset of checks that `danger-review` runs on your merge requests.
-- ES lint: Run `yarn eslint` checks (with the [`.eslintrc.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.eslintrc.yml) configuration) on the modified `*.{js,vue}` files. Tags: `frontend`, `style`.
+- ES lint: Run `yarn run internal:eslint` checks (with the [`.eslintrc.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.eslintrc.yml) configuration) on the modified `*.{js,vue}` files. Tags: `frontend`, `style`.
 - HAML lint: Run `bundle exec haml-lint` checks (with the [`.haml-lint.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.haml-lint.yml) configuration) on the modified `*.html.haml` files. Tags: `view`, `haml`, `style`.
 - Markdown lint: Run `yarn markdownlint` checks on the modified `*.md` files. Tags: `documentation`, `style`.
 - SCSS lint: Run `bundle exec scss-lint` checks (with the [`.scss-lint.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.scss-lint.yml) configuration) on the modified `*.scss{,.css}` files. Tags: `stylesheet`, `css`, `style`.

doc/development/fe_guide/style/javascript.md

@@ -14,7 +14,7 @@ In addition to the style guidelines set by Airbnb, we also have a few specific r
 listed below.
 
 NOTE:
-You can run ESLint locally by running `yarn eslint`
+You can run ESLint locally by running `yarn run lint:eslint`
 
 ## Avoid forEach
 

doc/development/fe_guide/tooling.md

@@ -17,7 +17,7 @@ This section describes yarn scripts that are available to validate and apply aut
 To check all staged files (based on `git diff`) with ESLint, run the following script:
 
 ```shell
-yarn eslint-staged
+yarn run lint:eslint:staged
 ```
 
 A list of problems found are logged to the console.
@@ -25,7 +25,7 @@ A list of problems found are logged to the console.
 To apply automatic ESLint fixes to all staged files (based on `git diff`), run the following script:
 
 ```shell
-yarn eslint-staged-fix
+yarn run lint:eslint:staged:fix
 ```
 
 If manual changes are required, a list of changes are sent to the console.
@@ -33,7 +33,7 @@ If manual changes are required, a list of changes are sent to the console.
 To check **all** files in the repository with ESLint, run the following script:
 
 ```shell
-yarn eslint
+yarn run lint:eslint
 ```
 
 A list of problems found are logged to the console.
@@ -41,7 +41,7 @@ A list of problems found are logged to the console.
 To apply automatic ESLint fixes to **all** files in the repository, run the following script:
 
 ```shell
-yarn eslint-fix
+yarn run lint:eslint:fix
 ```
 
 If manual changes are required, a list of changes are sent to the console.
@@ -125,44 +125,28 @@ Please take care that you only let Prettier format the same file types as the gl
 The following yarn scripts are available to do global formatting:
 
 ```shell
-yarn prettier-staged-save
+yarn run lint:prettier:staged:fix
 ```
 
 Updates all staged files (based on `git diff`) with Prettier and saves the needed changes.
 
 ```shell
-yarn prettier-staged
+yarn run lint:prettier:staged
 ```
 
 Checks all staged files (based on `git diff`) with Prettier and log which files would need manual updating to the console.
 
 ```shell
-yarn prettier-all
+yarn run lint:prettier
 ```
 
 Checks all files with Prettier and logs which files need manual updating to the console.
 
 ```shell
-yarn prettier-all-save
+yarn run lint:prettier:fix
 ```
 
-Formats all files in the repository with Prettier. (This should only be used to test global rule updates otherwise you would end up with huge MR's).
-
-The source of these Yarn scripts can be found in `/scripts/frontend/prettier.js`.
-
-#### Scripts during Conversion period
-
-```shell
-node ./scripts/frontend/prettier.js check-all ./vendor/
-```
-
-This iterates over all files in a specific folder, and checks them.
-
-```shell
-node ./scripts/frontend/prettier.js save-all ./vendor/
-```
-
-This iterates over all files in a specific folder and saves them.
+Formats all files in the repository with Prettier.
 
 ### VSCode Settings
 

lefthook.yml

@@ -7,7 +7,7 @@ pre-push:
       tags: frontend style
       files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD
       glob: "*.{js,vue}"
-      run: yarn eslint --cache --max-warnings 0 --report-unused-disable-directives {files}
+      run: yarn run internal:eslint {files}
     haml-lint:
       tags: view haml style
       files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD
@@ -24,6 +24,11 @@ pre-push:
       glob: "*.scss{,.css}"
       exclude: "app/assets/stylesheets/pages/emojis.scss"
       run: bundle exec scss-lint --config .scss-lint.yml {files}
+    prettier:
+      tags: frontend style
+      files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD
+      glob: "*.{js,vue,graphql}"
+      run: yarn run prettier --check {files}
     rubocop:
       tags: backend style
       files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD

lib/tasks/eslint.rake

@@ -3,7 +3,7 @@
 unless Rails.env.production?
   desc "GitLab | Run ESLint"
   task eslint: ['yarn:check'] do
-    unless system('yarn run eslint')
+    unless system('yarn run lint:eslint')
       abort('rake eslint failed')
     end
   end

package.json

@@ -5,13 +5,13 @@
     "block-dependencies": "node scripts/frontend/block_dependencies.js",
     "clean": "rm -rf public/assets tmp/cache/*-loader",
     "dev-server": "NODE_OPTIONS=\"--max-old-space-size=3584\" node scripts/frontend/webpack_dev_server.js",
-    "eslint": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue .",
-    "eslint-fix": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue --fix .",
-    "eslint-staged": "git diff --diff-filter=d --cached --name-only | grep -E \"(.*)\\.(js|vue)$\" | xargs eslint --cache --max-warnings 0 --report-unused-disable-directives",
-    "eslint-staged-fix": "git diff --diff-filter=d --cached --name-only | grep -E \"(.*)\\.(js|vue)$\" | xargs eslint --cache --max-warnings 0 --report-unused-disable-directives --fix",
-    "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html --no-inline-config .",
+    "eslint-fix": "echo 'Please use lint:eslint:fix instead' && exit 1",
+    "eslint-staged": "echo 'Please use lint:eslint:staged instead' && exit 1",
+    "eslint-staged-fix": "echo 'Please use lint:eslint:staged:fix instead' && exit 1",
+    "eslint-report": "echo 'Please use lint:eslint:report instead' && exit 1",
     "file-coverage": "scripts/frontend/file_test_coverage.js",
     "lint-docs": "scripts/lint-doc.sh",
+    "internal:eslint": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue",
     "prejest": "yarn check-dependencies",
     "jest": "jest --config jest.config.js",
     "jest-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
@@ -21,12 +21,21 @@
     "karma": "BABEL_ENV=${BABEL_ENV:=karma} karma start --single-run true config/karma.config.js",
     "karma-coverage": "BABEL_ENV=coverage karma start --single-run true config/karma.config.js",
     "karma-start": "BABEL_ENV=karma karma start config/karma.config.js",
+    "lint:eslint": "yarn run internal:eslint .",
+    "lint:eslint:fix": "yarn run lint:eslint --fix",
+    "lint:eslint:report": "yarn run internal:eslint --format html --output-file ./eslint-report.html --no-inline-config .",
+    "lint:eslint:staged": "scripts/frontend/execute-on-staged-files.sh internal:eslint '(js|vue)'",
+    "lint:eslint:staged:fix": "yarn run lint:eslint:staged --fix",
+    "lint:prettier": "yarn run prettier --check '**/*.{graphql,js,vue}'",
+    "lint:prettier:fix": "yarn run prettier --write '**/*.{graphql,js,vue}'",
+    "lint:prettier:staged": "scripts/frontend/execute-on-staged-files.sh prettier '(graphql|js|vue)' --check",
+    "lint:prettier:staged:fix": "scripts/frontend/execute-on-staged-files.sh prettier '(graphql|js|vue)' --write",
     "markdownlint": "markdownlint --config .markdownlint.json",
     "postinstall": "node ./scripts/frontend/postinstall.js",
-    "prettier-staged": "node ./scripts/frontend/prettier.js check",
-    "prettier-staged-save": "node ./scripts/frontend/prettier.js save",
-    "prettier-all": "node ./scripts/frontend/prettier.js check-all",
-    "prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
+    "prettier-all": "echo 'Please use lint:prettier instead' && exit 1",
+    "prettier-all-save": "echo 'Please use lint:prettier:fix instead' && exit 1",
+    "prettier-staged": "echo 'Please use lint:prettier:staged instead' && exit 1",
+    "prettier-staged-save": "echo 'Please use lint:prettier:staged:fixed instead' && exit 1",
     "stylelint": "yarn stylelint-file 'app/assets/stylesheets/**/*.*'  'ee/app/assets/stylesheets/**/*.*' '!app/assets/stylesheets/startup/startup-*.scss' '!**/vendors/**'",
     "stylelint-file": "BROWSERSLIST_IGNORE_OLD_DATA=true node node_modules/stylelint/bin/stylelint.js",
     "stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",

scripts/frontend/execute-on-staged-files.sh

+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+# The yarn run command we'd like to run
+command="$1"
+# The file types we'd like to target, use something like '(js|vue)'
+file_types="$2"
+
+# Removing first two arguments
+shift
+shift
+
+# Read all staged non-deleted files into an array
+staged_files=()
+while IFS= read -r line; do
+    staged_files+=( "$line" )
+done < <( git diff --diff-filter=d --cached --name-only | { grep -E ".$file_types$" || true; })
+
+if [ "${#staged_files[@]}" == "0" ]; then
+    echo "No staged '$file_types' files"
+else
+    echo "Running $command on ${#staged_files[@]} staged '$file_types' files"
+    yarn run "$command" "$@" "${staged_files[@]}"
+fi

scripts/frontend/frontend_script_utils.js

-const execFileSync = require('child_process').execFileSync;
-
-const exec = (command, args) => {
-  const options = {
-    cwd: process.cwd(),
-    env: process.env,
-    encoding: 'utf-8',
-  };
-  return execFileSync(command, args, options);
-};
-
-const execGitCmd = (args) => exec('git', args).trim().toString().split('\n').filter(Boolean);
-
-module.exports = {
-  getStagedFiles: (fileExtensionFilter) => {
-    const gitOptions = ['diff', '--name-only', '--cached', '--diff-filter=ACMRTUB'];
-    if (fileExtensionFilter) gitOptions.push(...fileExtensionFilter);
-    return execGitCmd(gitOptions);
-  },
-};

scripts/frontend/prettier.js

-const glob = require('glob');
-const prettier = require('prettier');
-const fs = require('fs');
-const { getStagedFiles } = require('./frontend_script_utils');
-
-const matchExtensions = ['js', 'vue', 'graphql'];
-
-// This will improve glob performance by excluding certain directories.
-// The .prettierignore file will also be respected, but after the glob has executed.
-const globIgnore = ['**/node_modules/**', 'vendor/**', 'public/**', 'fixtures/**'];
-
-const readFileAsync = (file, options) =>
-  new Promise((resolve, reject) => {
-    fs.readFile(file, options, function (err, data) {
-      if (err) reject(err);
-      else resolve(data);
-    });
-  });
-
-const writeFileAsync = (file, data, options) =>
-  new Promise((resolve, reject) => {
-    fs.writeFile(file, data, options, function (err) {
-      if (err) reject(err);
-      else resolve();
-    });
-  });
-
-const mode = process.argv[2] || 'check';
-const shouldSave = mode === 'save' || mode === 'save-all';
-const allFiles = mode === 'check-all' || mode === 'save-all';
-let globDir = process.argv[3] || '';
-if (globDir && globDir.charAt(globDir.length - 1) !== '/') globDir += '/';
-
-console.log(
-  `Loading all ${allFiles ? '' : 'staged '}files ${globDir ? `within ${globDir} ` : ''}...`,
-);
-
-const globPatterns = matchExtensions.map((ext) => `${globDir}**/*.${ext}`);
-const matchedFiles = allFiles
-  ? glob.sync(`{${globPatterns.join(',')}}`, { ignore: globIgnore })
-  : getStagedFiles(globPatterns);
-const matchedCount = matchedFiles.length;
-
-if (!matchedCount) {
-  console.log('No files found to process with prettier');
-  process.exit(0);
-}
-
-let didWarn = false;
-let passedCount = 0;
-let failedCount = 0;
-let ignoredCount = 0;
-
-console.log(`${shouldSave ? 'Updating' : 'Checking'} ${matchedCount} file(s)`);
-
-const fixCommand = `yarn prettier-${allFiles ? 'all' : 'staged'}-save`;
-const warningMessage = `
-===============================
-GitLab uses Prettier to format all JavaScript code.
-Please format each file listed below or run "${fixCommand}"
-===============================
-`;
-
-const checkFileWithOptions = (filePath, options) =>
-  readFileAsync(filePath, 'utf8').then((input) => {
-    if (shouldSave) {
-      const output = prettier.format(input, options);
-      if (input === output) {
-        passedCount += 1;
-      } else {
-        return writeFileAsync(filePath, output, 'utf8').then(() => {
-          console.log(`Prettified : ${filePath}`);
-          failedCount += 1;
-        });
-      }
-    } else {
-      if (prettier.check(input, options)) {
-        passedCount += 1;
-      } else {
-        if (!didWarn) {
-          // \x1b[31m  make text red
-          // \x1b[1m   make text bold
-          // %s        warningMessage
-          // \x1b[0m   reset text color (so logs after aren't red)
-          const redBoldText = '\x1b[1m\x1b[31;1m%s\x1b[0m';
-          console.log(redBoldText, warningMessage);
-          didWarn = true;
-        }
-        console.log(`yarn prettier --write ${filePath}`);
-        failedCount += 1;
-      }
-    }
-  });
-
-const checkFileWithPrettierConfig = (filePath) =>
-  prettier
-    .getFileInfo(filePath, { ignorePath: '.prettierignore' })
-    .then(({ ignored, inferredParser }) => {
-      if (ignored || !inferredParser) {
-        ignoredCount += 1;
-        return;
-      }
-      return prettier.resolveConfig(filePath).then((fileOptions) => {
-        const options = { ...fileOptions, parser: inferredParser };
-        return checkFileWithOptions(filePath, options);
-      });
-    });
-
-Promise.all(matchedFiles.map(checkFileWithPrettierConfig))
-  .then(() => {
-    const failAction = shouldSave ? 'fixed' : 'failed';
-    console.log(
-      `\nSummary:\n  ${matchedCount} files processed (${passedCount} passed, ${failedCount} ${failAction}, ${ignoredCount} ignored)\n`,
-    );
-
-    if (didWarn) process.exit(1);
-  })
-  .catch((e) => {
-    console.log(`\nAn error occurred while processing files with prettier: ${e.message}\n`);
-    process.exit(1);
-  });

scripts/static-analysis

@@ -25,8 +25,8 @@ class StaticAnalysis
     # Most of the time, RuboCop finishes in 30 seconds, but sometimes it can take around 1200 seconds so we set a
     # duration of 300 to lower the likelihood that it will run in the same job as another long task...
     %w[bundle exec rubocop --parallel] => 300,
-    %w[yarn run eslint] => 197,
-    %w[yarn run prettier-all] => 124,
+    %w[yarn run lint:eslint] => 197,
+    %w[yarn run lint:prettier] => 124,
     %w[bin/rake gettext:lint] => 96,
     %w[bundle exec license_finder] => 49,
     %w[bin/rake scss_lint] => 38,