[release-4.20] OCPNETUI-180: migrate to @kubevirt-ui-ext/kubevirt-api

.prettierignore

@@ -0,0 +1,17 @@
+# .gitignore:
+node_modules/
+dist/
+cypress/videos
+cypress/screenshots
+.DS_Store
+.env
+
+#legacy
+i18n-scripts/
+#generated
+package-lock.json
+locales/
+src/nmstate-types
+# YAML files
+*.yaml
+*.yml

README.md

@@ -37,7 +37,7 @@ nmstate-console-plugin development require web development tools, and a kubernet
 | -------------------------------------------------- | ------------------------------------------------------------------------------------ |
 | [nodejs](https://nodejs.org/)                      | JavaScript runtime environment                                                       |
 | [npm](https://www.npmjs.com/)                      | package manager for nodejs (comes with nodejs)                                       |
-| [kubernetes]()                                     | An [Openshift](<(https://www.openshift.com/)>) or kubernetes cluster for development |
+| [kubernetes](<>)                                   | An [Openshift](<(https://www.openshift.com/)>) or kubernetes cluster for development |
 | [kubectl](https://kubernetes.io/docs/tasks/tools/) | The Kubernetes command-line tool                                                     |
 
 ### Spin your own small kubernetes

cypress/e2e/NewPolicy.spec.cy.ts

@@ -4,7 +4,8 @@ const deletePolicyFromDetailsPage = (policyName: string) => {
 
   cy.contains('button[disabled]', 'Delete');
 
-  cy.get('input#text-confirmation').clear().type(`${policyName}`);
+  cy.get('input#text-confirmation').clear();
+  cy.get('input#text-confirmation').type(`${policyName}`);
 
   cy.contains('button', 'Delete').click();
 
@@ -25,9 +26,11 @@ describe('Create new policy with form', () => {
 
     cy.contains('h1', 'Create NodeNetworkConfigurationPolicy', { matchCase: false });
 
-    cy.get('input[name="policy-name"]').clear().type(`${testPolicyName}`);
+    cy.get('input[name="policy-name"]').clear();
+    cy.get('input[name="policy-name"]').type(`${testPolicyName}`);
 
-    cy.get('input[name="policy-description"]').clear().type('test-policy-description');
+    cy.get('input[name="policy-description"]').clear();
+    cy.get('input[name="policy-description"]').type('test-policy-description');
 
     cy.get('input#policy-interface-port-0').type('eth0');
     cy.get('input#policy-interface-ip-0').check();
@@ -48,9 +51,11 @@ describe('Create new policy with form', () => {
 
     cy.contains('h1', 'Create NodeNetworkConfigurationPolicy', { matchCase: false });
 
-    cy.get('input[name="policy-name"]').clear().type(`${testPolicyName}`);
+    cy.get('input[name="policy-name"]').clear();
+    cy.get('input[name="policy-name"]').type(`${testPolicyName}`);
 
-    cy.get('input[name="policy-description"]').clear().type('test-policy-description');
+    cy.get('input[name="policy-description"]').clear();
+    cy.get('input[name="policy-description"]').type('test-policy-description');
 
     cy.get('input#policy-interface-port-0').type('eth0');
     cy.get('input#policy-interface-ip-0').check();

cypress/support/commands.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-namespace */
 /// <reference types="cypress" />
 import { KUBEADMIN_IDP, KUBEADMIN_USERNAME } from './constants';
 import { ConsoleWindowType } from './types';

eslint.config.mjs

@@ -0,0 +1,122 @@
+import prettierConfig from 'eslint-config-prettier';
+import cypressPlugin from 'eslint-plugin-cypress';
+import importPlugin from 'eslint-plugin-import';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+import js from '@eslint/js';
+
+export default tseslint.config(
+  {
+    ignores: [
+      // .gitignore:
+      '**/node_modules/',
+      '**/dist/',
+      'cypress/videos',
+      'cypress/screenshots',
+      '**/.DS_Store',
+      '.env',
+      // legacy
+      'i18n-scripts/',
+      // generated
+      'package-lock.json',
+      'locales/',
+      'src/nmstate-types/',
+    ],
+  },
+
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+      },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      import: importPlugin,
+      'react-hooks': reactHooksPlugin,
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-shadow': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_' }],
+
+      'import/no-cycle': 'off',
+      'import/no-duplicates': 'error',
+
+      'no-console': 'error',
+      'no-nested-ternary': 'error',
+
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react/display-name': 'off',
+      'react/prop-types': 'off',
+
+      'simple-import-sort/exports': 'error',
+      'simple-import-sort/imports': [
+        'warn',
+        {
+          groups: [
+            [
+              '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
+            ],
+            ['^react', '^\\w'],
+            ['^(@|config/)(/*|$)'],
+            ['^\\u0000'],
+            ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+            ['^.+\\.s?css$'],
+          ],
+        },
+      ],
+    },
+    settings: {
+      react: { version: 'detect' },
+    },
+  },
+
+  {
+    files: ['**/*.{js,cjs}', 'webpack.config.ts', 'jest.config.ts', 'cypress.config.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+
+  {
+    files: ['cypress/**/*.{js,ts,jsx,tsx}'],
+    ...cypressPlugin.configs.recommended,
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...cypressPlugin.configs.globals.languageOptions.globals,
+      },
+    },
+    rules: {
+      ...cypressPlugin.configs.recommended.rules,
+      '@typescript-eslint/no-namespace': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
+      'no-console': 'off',
+      'no-redeclare': 'off',
+    },
+  },
+
+  // last to disable conflicting rules
+  prettierConfig,
+);

i18n-scripts/i18n-to-po.js

@@ -114,4 +114,4 @@ async function main() {
   }
 }
 
-main().catch((e) => console.error(e));
+main().catch((e) => console.error(e));

jest.config.ts

@@ -1,9 +1,10 @@
 import { pathsToModuleNameMapper } from 'ts-jest';
+import { readConfigFile, sys } from 'typescript';
 
 import type { Config } from '@jest/types';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { compilerOptions } = require('./tsconfig');
+const { config: tsconfig } = readConfigFile('./tsconfig.json', sys.readFile);
+const { compilerOptions } = tsconfig;
 
 // Sync object
 const config: Config.InitialOptions = {
@@ -22,13 +23,11 @@ const config: Config.InitialOptions = {
   modulePaths: ['<rootDir>'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   transform: {
-    '^.+\\.[t|j]sx?$': 'ts-jest',
+    '^.+\\.[t|j]sx?$': [
+      'ts-jest',
+      { tsconfig: { ...compilerOptions, module: 'commonjs', moduleResolution: 'node' } },
+    ],
   },
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!(@patternfly|@openshift-console\\S*?)/.*)'],
-  globals: {
-    'ts-jest': {
-      isolatedModules: true,
-    },
-  },
 };
 export default config;