Merge pull request #38 from skbkontur/semke/vite-yarn3

Semke/vite yarn3

.dockerignore

@@ -23,4 +23,6 @@
 **/values.dev.yaml
 cassandra-distributed-task-queue-ui
 LICENSE
-README.md
+README.md
+.yarn/cache
+.yarn/install-state.gz

.github/workflows/actions.yml

@@ -5,7 +5,7 @@ on:
   pull_request:
   workflow_dispatch:
 env:
-  NODE_VERSION: 14
+  NODE_VERSION: 20
   NPM_REGISTRY: https://registry.npmjs.org
 jobs:
   test:
@@ -26,22 +26,26 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: ${{ env.NPM_REGISTRY }}
+      - name: Install yarn
+        run: corepack enable && corepack prepare [email protected] --activate
       - name: Install node dependencies
-        run: yarn --cwd cassandra-distributed-task-queue-ui install --frozen-lockfile
+        run: corepack yarn --cwd cassandra-distributed-task-queue-ui --immutable
       - name: Restore dotnet tools
         run: dotnet tool restore
       - name: Build dotnet
         run: dotnet build --configuration Release --verbosity minimal
       - name: Build front
         run: yarn --cwd cassandra-distributed-task-queue-ui build
       - name: Check C# code style
-        run: dotnet jb cleanupcode Cassandra.DistributedTaskQueue.sln --profile=CatalogueCleanup --verbosity=WARN && git diff --exit-code
+        run: dotnet jb cleanupcode Cassandra.DistributedTaskQueue.sln --profile=CatalogueCleanup --verbosity=WARN && git diff --exit-code -- ':!./cassandra-distributed-task-queue-ui/.yarn'
       - name: Check front code
         run: yarn --cwd cassandra-distributed-task-queue-ui lint
       - name: Build docker-compose environment
         run: docker-compose -f docker-compose.yaml up -d --build
         env:
           ES_VERSION: ${{ matrix.es-version }}
+      - name: Run front tests
+        run: yarn --cwd cassandra-distributed-task-queue-ui test
       - name: Run tests
         run: dotnet test --no-build --configuration Release
         env:

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v3.0.0 - 2023.10.23
+- Add new bundler Vite instead of WebPack
+- Update Node to v20
+- Update yarn to v4
+
 ## v2.2.1 - 2023.08.15
 - Update back link arrows
 

cassandra-distributed-task-queue-ui/.eslintrc.json

@@ -17,6 +17,10 @@
     "plugin:prettier/recommended"
   ],
   "rules": {
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "react/jsx-uses-react": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/ban-types": [
       "error",
       {

cassandra-distributed-task-queue-ui/.gitignore

@@ -5,4 +5,12 @@ yarn-debug.log*
 yarn-error.log*
 coverage
 dist
+.eslintcache
 src/Domain/Api/
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

cassandra-distributed-task-queue-ui/.storybook/main.js

@@ -1,43 +1,5 @@
-const path = require("path");
-const fs = require("fs");
-
-const babelConfig = JSON.parse(fs.readFileSync(path.resolve(__dirname, "../.babelrc")));
-
 module.exports = {
     stories: ["../stories/**/*.stories.tsx"],
-    addons: [require.resolve("@storybook/addon-actions")],
-    webpackFinal: config => {
-        config.module.rules = [
-            {
-                test: /\.[jt]sx?$/,
-                use: {
-                    loader: require.resolve("babel-loader"),
-                    options: babelConfig,
-                },
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.css$/,
-                use: [
-                    require.resolve("style-loader"),
-                    {
-                        loader: require.resolve("css-loader"),
-                        options: {
-                            modules: {
-                                localIdentName: "[name]-[local]-[hash:base64:4]",
-                            },
-                        },
-                    },
-                ],
-            },
-            {
-                test: /\.(woff|woff2|eot|ttf|svg|gif|png)$/,
-                loader: require.resolve("url-loader"),
-            },
-        ];
-
-        config.resolve.extensions = [".js", ".jsx", ".ts", ".tsx"];
-
-        return config;
-    },
+    addons: ["@storybook/addon-actions"],
+    framework: "@storybook/react-vite",
 };

cassandra-distributed-task-queue-ui/.storybook/preview.js

@@ -1 +1 @@
-import '../public/index.css';
+import '../index.css';

cassandra-distributed-task-queue-ui/.yarnrc.yml

@@ -0,0 +1,9 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+networkConcurrency: 16
+
+nodeLinker: node-modules
+
+npmRegistryServer: "https://registry.npmjs.org"

cassandra-distributed-task-queue-ui/public/index.html → cassandra-distributed-task-queue-ui/index.html

@@ -41,7 +41,7 @@
 
 <body>
     <div id="content"></div>
-    <script src="/dist/root.js"></script>
+    <script type="module" src="/index.tsx"></script>
 </body>
 
 </html>

cassandra-distributed-task-queue-ui/index.tsx

@@ -1,44 +1,16 @@
 import "./react-selenium-testing";
-import React from "react";
 import ReactDom from "react-dom";
 import { Route, Navigate, Routes, BrowserRouter } from "react-router-dom";
 
-import { RemoteTaskQueueApplication, RtqMonitoringApi, ICustomRenderer } from "./src";
-import { RtqMonitoringSearchRequest } from "./src/Domain/Api/RtqMonitoringSearchRequest";
-import { RtqMonitoringTaskModel } from "./src/Domain/Api/RtqMonitoringTaskModel";
-import { TimeUtils } from "./src/Domain/Utils/TimeUtils";
-import { RangeSelector } from "./src/components/DateTimeRangePicker/RangeSelector";
+import { RemoteTaskQueueApplication, RtqMonitoringApi } from "./src";
+import { CustomRenderer } from "./src/Domain/CustomRenderer";
 import { RtqMonitoringApiFake } from "./stories/Api/RtqMonitoringApiFake";
 
 const rtqApiPrefix = "/remote-task-queue/";
 
 export const rtqMonitoringApi =
     process.env.API === "fake" ? new RtqMonitoringApiFake() : new RtqMonitoringApi(rtqApiPrefix);
 
-export class CustomRenderer implements ICustomRenderer {
-    public getRelatedTasksLocation(taskDetails: RtqMonitoringTaskModel): Nullable<RtqMonitoringSearchRequest> {
-        const documentCirculationId =
-            taskDetails.taskData && typeof taskDetails.taskData["DocumentCirculationId"] === "string"
-                ? taskDetails.taskData["DocumentCirculationId"]
-                : null;
-        if (documentCirculationId != null && taskDetails.taskMeta.ticks != null) {
-            const rangeSelector = new RangeSelector(TimeUtils.TimeZones.UTC);
-
-            return {
-                enqueueTimestampRange: rangeSelector.getMonthOf(TimeUtils.ticksToDate(taskDetails.taskMeta.ticks)),
-                queryString: `Data.\\*.DocumentCirculationId:"${documentCirculationId || ""}"`,
-                names: [],
-                states: [],
-            };
-        }
-        return null;
-    }
-
-    public renderDetails(target: any, path: string[]): null | JSX.Element {
-        return null;
-    }
-}
-
 const AdminRedirect = (): JSX.Element => {
     localStorage.setItem("isSuperUser", "true");
     return <Navigate to="../Tasks" replace />;

cassandra-distributed-task-queue-ui/package.json

@@ -27,13 +27,13 @@
     "build:copy:meta": "copyfiles --flat package.json \"../*.md\" ../LICENSE dist",
     "build:pack": "cd dist && npm pack",
     "build:types": "dotnet ts-gen --assembly ./../Cassandra.DistributedTaskQueue.Monitoring.TestService/bin/net6.0/SkbKontur.Cassandra.DistributedTaskQueue.Monitoring.TestService.dll --outputDir ./src/Domain/Api --nullabilityMode Pessimistic",
-    "start": "webpack serve --env api=fake",
-    "start:prod": "webpack serve --env api=real",
-    "storybook": "start-storybook -p 6006 -s .",
+    "start": "vite --mode dev",
+    "start:prod": "vite",
+    "storybook": "sb dev -p 6006",
     "lint": "run-s \"lint:*\"",
     "lint:tsc": "tsc --noEmit",
-    "lint:eslint": "eslint ./ --ext .js,.jsx,.ts,.tsx",
-    "test": "mocha **/*.test.ts"
+    "lint:eslint": "eslint ./ --ext .js,.jsx,.ts,.tsx --cache --quiet",
+    "test": "vitest --run --reporter dot"
   },
   "peerDependencies": {
     "@skbkontur/icons": ">=1 <2",
@@ -48,58 +48,44 @@
     "date-fns": "^2.29.2",
     "decimal.js": "^10.2.1",
     "lodash": "^4.17.20",
-    "qs": "^6.9.6",
+    "qs": "^6.11.2",
     "tslib": "^2.4.0",
     "whatwg-fetch": "^3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.8",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.14.5",
-    "@babel/runtime": "^7.14.8",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@skbkontur/icons": "^1.3.0",
     "@skbkontur/react-ui": "^4.1.0",
-    "@storybook/addon-actions": "^6.3.5",
-    "@storybook/addons": "^6.3.5",
-    "@storybook/react": "^6.3.5",
-    "@types/chai": "^4.2.21",
+    "@storybook/addon-actions": "^7.0.7",
+    "@storybook/addons": "^7.0.7",
+    "@storybook/cli": "^7.4.6",
+    "@storybook/react": "^7.0.7",
+    "@storybook/react-vite": "^7.4.6",
     "@types/lodash": "^4.14.171",
-    "@types/mocha": "^9.0.0",
-    "@types/qs": "^6.9.7",
+    "@types/qs": "^6.9.8",
     "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^17.0.15",
     "@types/react-router-dom": "^5.1.8",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "babel-loader": "^8.2.2",
-    "chai": "^4.3.4",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "@vitejs/plugin-react": "^3.1.0",
     "copyfiles": "^2.4.1",
-    "css-loader": "^5.0.1",
-    "eslint": "^7.31.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-node": "^0.3.4",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.24.0",
-    "mocha": "^9.0.2",
+    "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
+    "prettier": "^3.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-refresh": "^0.10.0",
     "react-router-dom": "^6.11.0",
     "rimraf": "^3.0.2",
-    "storybook-addon-react-router-v6": "^0.3.6",
-    "style-loader": "^2.0.0",
+    "storybook-addon-react-router-v6": "^2.0.7",
     "typescript": "^4.3.5",
-    "url-loader": "^4.1.1",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
-  }
+    "vite": "^4.4.11",
+    "vitest": "^0.34.6"
+  },
+  "packageManager": "[email protected]+sha256.6d855253732ba8d231b6cd917961654f6c8439164c962a4e355c9c58360ebe44"
 }

cassandra-distributed-task-queue-ui/patch-version.js

@@ -20,7 +20,7 @@ async function setPackageVersion(packageDirectory) {
         throw versionText.stderr;
     }
 
-    const npmPackageVersion = versionText.stdout;
+    const npmPackageVersion = versionText.stdout.trim();
     console.log(`Setting package version to ${npmPackageVersion}`);
     const result = await execAsync(`npm version ${npmPackageVersion} --no-git-tag-version --allow-same-version`, {
         cwd: packageDirectory,

cassandra-distributed-task-queue-ui/src/Domain/CustomRenderer.ts

@@ -1,5 +1,8 @@
+import { RangeSelector } from "../components/DateTimeRangePicker/RangeSelector";
+
 import { RtqMonitoringSearchRequest } from "./Api/RtqMonitoringSearchRequest";
 import { RtqMonitoringTaskModel } from "./Api/RtqMonitoringTaskModel";
+import { TimeUtils } from "./Utils/TimeUtils";
 
 export interface ICustomRenderer {
     renderDetails: (target: any, path: string[]) => null | JSX.Element;
@@ -15,3 +18,27 @@ export class NullCustomRenderer implements ICustomRenderer {
         return null;
     }
 }
+
+export class CustomRenderer implements ICustomRenderer {
+    public getRelatedTasksLocation(taskDetails: RtqMonitoringTaskModel): Nullable<RtqMonitoringSearchRequest> {
+        const documentCirculationId =
+            taskDetails.taskData && typeof taskDetails.taskData["DocumentCirculationId"] === "string"
+                ? taskDetails.taskData["DocumentCirculationId"]
+                : null;
+        if (documentCirculationId != null && taskDetails.taskMeta.ticks != null) {
+            const rangeSelector = new RangeSelector(TimeUtils.TimeZones.UTC);
+
+            return {
+                enqueueTimestampRange: rangeSelector.getMonthOf(TimeUtils.ticksToDate(taskDetails.taskMeta.ticks)),
+                queryString: `Data.\\*.DocumentCirculationId:"${documentCirculationId || ""}"`,
+                names: [],
+                states: [],
+            };
+        }
+        return null;
+    }
+
+    public renderDetails(target: any, path: string[]): null | JSX.Element {
+        return null;
+    }
+}

cassandra-distributed-task-queue-ui/src/Domain/QueryStringMapping/Mappers.ts

@@ -1,5 +1,5 @@
 import { isValid, parse as parseDateInternal } from "date-fns";
-import _ from "lodash";
+import difference from "lodash/difference";
 
 import { DateTimeRange } from "../DataTypes/DateTimeRange";
 import { DateUtils } from "../Utils/DateUtils";
@@ -255,7 +255,7 @@ export class SetMapper<T> extends PlainValueMapper<T[]> {
         let values;
         if (this.allowNegationOperator && parameterValue[0] === "!") {
             const negatedValues = parameterValue.replace(/^!/, "").split(" ");
-            values = _.difference(this.getKeys(), negatedValues);
+            values = difference(this.getKeys(), negatedValues);
         } else {
             values = parameterValue.split(" ");
         }
@@ -271,7 +271,7 @@ export class SetMapper<T> extends PlainValueMapper<T[]> {
 
     public buildNegativeValuesString(values: T[]): string {
         const positiveValues = values.map(x => this.getString(x)).filter(x => x !== null);
-        const negativeValues = _.difference(this.getKeys(), positiveValues);
+        const negativeValues = difference(this.getKeys(), positiveValues);
         return "!" + negativeValues.join(" ");
     }
 

cassandra-distributed-task-queue-ui/src/Domain/lens.ts

@@ -11,7 +11,7 @@ export interface Lens<T, TResult> {
 export function pathLens<TTarget extends {}, TProp>(propertyPicker: (target: TTarget) => TProp): Lens<TTarget, TProp> {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    const fieldsString = /return [^\{\}\(\)]*?\.([^\{\}\(\)]*?)\s*[;\}]/.exec(propertyPicker.toString())[1];
+    const fieldsString = /(?:return|=>) [^{}()]*?\.([^{}()]*?)[;}]*$/.exec(propertyPicker.toString())[1];
     return {
         get: (x: TTarget) => get(x, fieldsString),
         set: (x: TTarget, value: TProp) => {

cassandra-distributed-task-queue-ui/src/RemoteTaskQueueApplication.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Routes, Route } from "react-router-dom";
 
 import { IRtqMonitoringApi } from "./Domain/Api/RtqMonitoringApi";