Move to tarantool frontend tools (#1555)

* Update dependencies and configuration files
* Update the code to follow the new style rules.
* Setup node-version=16.8.0 in github workflows
* Fix graphqlgen command

Author: usenko-timur

.eslintignore

@@ -0,0 +1,9 @@
+node_modules
+webui/node_modules
+webui/build
+webui/flow-typed
+webui/public
+webui/scripts
+webui/src/generated
+webui/config
+webui/scripts

.github/workflows/backend-test.yml

@@ -19,6 +19,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
+        with:
+          node-version: '16.8.0'
       - uses: actions/setup-python@v2
 
       # Setup sphinx

.github/workflows/frontend-test.yml

@@ -32,6 +32,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
+        with:
+          node-version: '16.8.0'
 
       - uses: tarantool/setup-tarantool@v1
         with:

.github/workflows/publish.yml

@@ -25,6 +25,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
+        with:
+          node-version: '16.8.0'
       - uses: actions/setup-python@v2
       - run: python -m pip install -r rst/requirements.txt
 

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+webui/node_modules
+webui/src/generated

cartridge-scm-1.rockspec

@@ -12,7 +12,7 @@ dependencies = {
     'errors == 2.2.1-1',
     'vshard == 0.1.18-1',
     'membership == 2.4.0-1',
-    'frontend-core == 7.10.0-1',
+    'frontend-core == 7.11.0-1',
     'graphql == 0.1.1-1',
 }
 

webui/.babelrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: [
+    [
+      "react-app",
+      {
+        flow: true,
+      },
+    ],
+  ],
+  plugins: [
+    [
+      "@emotion",
+      {
+        autoLabel: "never",
+      },
+    ],
+  ],
+};

webui/.eslintignore

@@ -6,4 +6,3 @@
 /src/generated
 /config
 /scripts
-/src/start.js

webui/.eslintrc

@@ -0,0 +1,29 @@
+const { join } = require('path');
+
+module.exports = {
+  extends: [
+    '@tarantool.io/eslint-config',
+    '@tarantool.io/eslint-config/react',
+    '@tarantool.io/eslint-config/emotion',
+    '@tarantool.io/eslint-config/cypress',
+  ],
+  settings: {
+    'import/resolver': {
+      alias: [
+        ['src', join(__dirname, 'src')],
+        ['~', join(__dirname, 'src')],
+      ],
+    },
+  },
+  overrides: [
+    {
+      files: ['*.test.js', '*.spec.js'],
+      rules: {
+        'sonarjs/no-duplicate-string': 'off',
+      },
+    },
+  ],
+  rules: {
+    'sonarjs/cognitive-complexity': 'off',
+  },
+};

webui/.eslintrc.js

@@ -1,13 +1,18 @@
 [ignore]
+*.ts
+*.tsx
 .*broken.json.*
+
 [include]
 
 [libs]
 .*flow-typed.*
+
 [lints]
 
 [options]
 module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=.
 module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/src/helpers/SVGModule.js'
+
 [strict]

webui/.flowconfig

@@ -0,0 +1 @@
+module.exports = require("@tarantool.io/import-sort-style/config");

webui/.importsortrc.js

@@ -0,0 +1,2 @@
+node_modules
+src/generated

webui/.prettierignore

@@ -0,0 +1 @@
+module.exports = require('@tarantool.io/prettier-config/with-import-sort');

webui/.prettierrc.js

@@ -40,9 +40,7 @@ check_hash(${HASH_FILE} "${BASE_DIR}/package-lock.json")
 if (REBUILD)
     message(STATUS "Installing node_modules")
     execute_process(
-        COMMAND ${CMAKE_COMMAND} -E
-            env NODE_ENV=production
-            npm ci  --no-audit --no-progress --prefer-offline
+        COMMAND npm ci --no-audit --no-progress --prefer-offline
         WORKING_DIRECTORY "${BASE_DIR}"
         RESULT_VARIABLE _result
     )
@@ -67,11 +65,16 @@ file(GLOB_RECURSE FRONTEND_FILES
 list(APPEND FRONTEND_FILES
     "${BASE_DIR}/.env"
     "${BASE_DIR}/.env.production"
-    "${BASE_DIR}/.eslintrc"
+    "${BASE_DIR}/.eslintignore"
+    "${BASE_DIR}/.eslintrc.js"
+    "${BASE_DIR}/.prettierignore"
+    "${BASE_DIR}/.prettierrc.js"
+    "${BASE_DIR}/.importsortrc.js"
     "${BASE_DIR}/.flowconfig"
     "${BASE_DIR}/codegen.yml"
     "${BASE_DIR}/scripts/build.js"
     "${BASE_DIR}/package-lock.json"
+    "${BASE_DIR}/tsconfig.json"
 )
 check_hash(${HASH_FILE} "${FRONTEND_FILES}")
 

webui/BuildFrontend.cmake

@@ -7,7 +7,7 @@ const url = require('url');
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
 const envPublicUrl = process.env.PUBLIC_URL;
 
@@ -22,8 +22,7 @@ function ensureSlash(path, needsSlash) {
   }
 }
 
-const getPublicUrl = appPackageJson =>
-  envPublicUrl || require(appPackageJson).homepage;
+const getPublicUrl = (appPackageJson) => envPublicUrl || require(appPackageJson).homepage;
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 // "public path" at which the app is served.
@@ -33,8 +32,7 @@ const getPublicUrl = appPackageJson =>
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 function getServedPath(appPackageJson) {
   const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl =
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+  const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
   return ensureSlash(servedUrl, true);
 }