New cluster page (#1578)

.prettierignore

@@ -1,3 +1,4 @@
-node_modules
-webui/node_modules
-webui/src/generated
+/node_modules
+/webui/node_modules
+/webui/src/generated/*
+!/webui/src/generated/graphql-typing-ts.ts

CHANGELOG.rst

@@ -18,12 +18,18 @@ Added
 
 - Add ``swim_period`` argument to the test-helpers.
 
+- Add unit tests for the Failover modal.
+
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Changed
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 - Update ``http`` dependency to 1.1.1
 
+- Use effector for business logic and storing Cluster page data (models folder).
+
+- Rewrite all Cluster page components using typescript.
+
 -------------------------------------------------------------------------------
 [2.7.3] - 2021-10-27
 -------------------------------------------------------------------------------

webui/.babelrc.js

@@ -1,18 +1 @@
-module.exports = {
-  presets: [
-    [
-      "react-app",
-      {
-        flow: true,
-      },
-    ],
-  ],
-  plugins: [
-    [
-      "@emotion",
-      {
-        autoLabel: "never",
-      },
-    ],
-  ],
-};
+module.exports = require('@tarantool.io/babel-config')({});

webui/.browserslistrc

@@ -0,0 +1,8 @@
+opera >= 65
+chrome >= 75
+edge >= 80
+bb >= 10
+android >= 80
+firefox >= 65
+safari >= 12
+ios_saf >= 12

webui/.env.development

@@ -1,2 +1,3 @@
-WEBPACK_DEV_SERVER_PROXY=true
 REACT_APP_API_ENTRY=http://localhost:8081
+WEBPACK_DEV_SERVER_PROXY=true
+WEBPACK_APP_ENTRY=start.js

webui/.eslintrc.js

@@ -1,5 +1,3 @@
-const { join } = require('path');
-
 module.exports = {
   extends: [
     '@tarantool.io/eslint-config',
@@ -9,10 +7,10 @@ module.exports = {
   ],
   settings: {
     'import/resolver': {
-      alias: [
-        ['src', join(__dirname, 'src')],
-        ['~', join(__dirname, 'src')],
-      ],
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        moduleDirectory: ['node_modules', '.'],
+      },
     },
   },
   overrides: [
@@ -25,5 +23,6 @@ module.exports = {
   ],
   rules: {
     'sonarjs/cognitive-complexity': 'off',
+    'no-console': 'off',
   },
 };

webui/.flowconfig

@@ -2,6 +2,7 @@
 *.ts
 *.tsx
 .*broken.json.*
+.*/node_modules/tiny-invariant/.*
 
 [include]
 
@@ -11,6 +12,8 @@
 [lints]
 
 [options]
+module.file_ext=.ts
+module.file_ext=.tsx
 module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=.
 module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/src/helpers/SVGModule.js'

webui/.prettierignore

@@ -1,2 +1,3 @@
-node_modules
-src/generated
+/node_modules
+/src/generated/*
+!/src/generated/graphql-typing-ts.ts

webui/BuildFrontend.cmake

@@ -63,6 +63,8 @@ file(GLOB_RECURSE FRONTEND_FILES
     "${BASE_DIR}/public/*"
 )
 list(APPEND FRONTEND_FILES
+    "${BASE_DIR}/.babelrc.js"
+    "${BASE_DIR}/.browserslistrc"
     "${BASE_DIR}/.env"
     "${BASE_DIR}/.env.production"
     "${BASE_DIR}/.eslintignore"
@@ -72,8 +74,10 @@ list(APPEND FRONTEND_FILES
     "${BASE_DIR}/.importsortrc.js"
     "${BASE_DIR}/.flowconfig"
     "${BASE_DIR}/codegen.yml"
-    "${BASE_DIR}/scripts/build.js"
     "${BASE_DIR}/package-lock.json"
+    "${BASE_DIR}/package.json"
+    "${BASE_DIR}/webpack.config.js"
+    "${BASE_DIR}/webpack.config.prod.js"
     "${BASE_DIR}/tsconfig.json"
 )
 check_hash(${HASH_FILE} "${FRONTEND_FILES}")

webui/codegen.yml

@@ -2,10 +2,23 @@ overwrite: true
 schema: "../doc/schema.graphql"
 documents: "**/*.graphql.js"
 generates:
-  src/generated/graphql-typing.js:
+  src/generated/graphql-typing-flow.js:
     plugins:
       - "flow"
       - "flow-operations"
+  src/generated/graphql-typing-ts.ts:
+    hooks:
+      afterOneFileWrite:
+        - prettier --write
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+    config:
+      skipTypename: false
+      documentMode: documentNode
+      dedupeOperationSuffix: true
+      pureMagicComment: true
+      useTypeImports: true
   ./graphql.schema.json:
     plugins:
       - "introspection"

webui/config/polyfills.js

@@ -1,22 +1,3 @@
 'use strict';
 
-if (typeof Promise === 'undefined') {
-  // Rejection tracking prevents a common issue where React gets into an
-  // inconsistent state due to an error, but it gets swallowed by a Promise,
-  // and the user has no idea what causes React's erratic future behavior.
-  require('promise/lib/rejection-tracking').enable();
-  window.Promise = require('promise/lib/es6-extensions.js');
-}
-
-// fetch() polyfill for making API calls.
-require('whatwg-fetch');
-
-// Object.assign() is commonly used with React.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');
-
-// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
-// We don't polyfill it in the browser--this is user's responsibility.
-if (process.env.NODE_ENV === 'test') {
-  require('raf').polyfill(global);
-}
+require('@tarantool.io/webpack-config/polyfills');

webui/cypress/integration/bootstrap.spec.js

@@ -115,7 +115,11 @@ describe('Replicaset configuration & Bootstrap Vshard', () => {
     cy.get('.meta-test__configureBtn:visible').should('have.length', 1).click();
     cy.get('.meta-test__ConfigureServerModal').contains('Join Replica Set').should('not.exist');
 
-    cy.get('form').contains('dummy-1').closest('li').find('.meta-test__youAreHereIcon').should('exist');
+    cy.get('.meta-test__ConfigureServerModal')
+      .contains('dummy-1')
+      .closest('li')
+      .find('.meta-test__youAreHereIcon')
+      .should('exist');
 
     // Open create replicaset dialog
     cy.get('form input[name="weight"]').should('be.disabled');
@@ -203,11 +207,7 @@ describe('Replicaset configuration & Bootstrap Vshard', () => {
     cy.get('.meta-test__configureBtn:visible').should('have.length', 2);
     cy.contains('dummy-2').closest('li').find('.meta-test__configureBtn').click();
 
-    cy.get('form input[name="alias"]')
-
-      .type('test-storage')
-      .should('have.value', 'test-storage');
-
+    cy.get('form input[name="alias"]').type('test-storage').should('have.value', 'test-storage');
     cy.get('form input[value="vshard-storage"]').check({ force: true });
     cy.get('form input[value="default"]').should('be.enabled').should('be.checked');
 

webui/jest.config.js

@@ -1,18 +1,22 @@
 module.exports = {
-  collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx,mjs}'],
   setupFiles: ['<rootDir>/config/polyfills.js'],
-  testMatch: ['<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}', '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}'],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx,mjs}',
+    '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx,mjs}',
+  ],
   testEnvironment: 'node',
   testURL: 'http://localhost',
   transform: {
     '^.+\\.(js|jsx|mjs)$': 'babel-jest',
+    '^.+\\.(ts|tsx)$': 'ts-jest',
     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(js|jsx|mjs|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
+    '^(?!.*\\.(js|jsx|ts|tsx|mjs|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'],
   moduleNameMapper: {
     '^src/(.*)$': '<rootDir>/src/$1',
     '^~/(.*)$': '<rootDir>/src/$1',
   },
-  moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'node', 'mjs'],
+  moduleFileExtensions: ['web.js', 'js', 'ts', 'json', 'web.jsx', 'jsx', 'tsx', 'node', 'mjs'],
 };