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: 16
   NPM_REGISTRY: https://registry.npmjs.org
 jobs:
   test:
@@ -27,15 +27,15 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: ${{ env.NPM_REGISTRY }}
       - name: Install node dependencies
-        run: yarn --cwd cassandra-distributed-task-queue-ui install --frozen-lockfile
+        run: cd ./cassandra-distributed-task-queue-ui && yarn set version berry && yarn install --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

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,7 @@
+networkConcurrency: 16
+
+nodeLinker: node-modules
+
+npmRegistryServer: "https://registry.npmjs.org"
+
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

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"
   },
   "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]"
 }

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/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";

cassandra-distributed-task-queue-ui/src/containers/TaskChainsTreeContainer.tsx

@@ -1,6 +1,6 @@
 import { Loader } from "@skbkontur/react-ui";
 import _ from "lodash";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Location, useLocation } from "react-router-dom";
 
 import { IRtqMonitoringApi } from "../Domain/Api/RtqMonitoringApi";

cassandra-distributed-task-queue-ui/src/containers/TaskDetailsPageContainer.tsx

@@ -1,5 +1,5 @@
 import { Loader } from "@skbkontur/react-ui";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useLocation, Location, useParams } from "react-router-dom";
 
 import { IRtqMonitoringApi } from "../Domain/Api/RtqMonitoringApi";

cassandra-distributed-task-queue-ui/src/containers/TasksPageContainer.tsx

@@ -1,6 +1,6 @@
 import { ColumnStack, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Loader, Paging } from "@skbkontur/react-ui";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Location, useLocation, useNavigate } from "react-router-dom";
 
 import { IRtqMonitoringApi } from "../Domain/Api/RtqMonitoringApi";

cassandra-distributed-task-queue-ui/src/index.ts

@@ -1,3 +1,5 @@
 export { RemoteTaskQueueApplication } from "./RemoteTaskQueueApplication";
-export { IRtqMonitoringApi, RtqMonitoringApi } from "./Domain/Api/RtqMonitoringApi";
-export { ICustomRenderer, NullCustomRenderer } from "./Domain/CustomRenderer";
+export { RtqMonitoringApi } from "./Domain/Api/RtqMonitoringApi";
+export type { IRtqMonitoringApi } from "./Domain/Api/RtqMonitoringApi";
+export { NullCustomRenderer } from "./Domain/CustomRenderer";
+export type { ICustomRenderer } from "./Domain/CustomRenderer";