refactor(ui-imports): migrate to absolute imports from src directory

webapp/.eslintrc.cjs

@@ -14,15 +14,8 @@ module.exports = {
     "plugin:jsdoc/recommended-typescript",
     "plugin:prettier/recommended", // Must be the last one
   ],
-  plugins: [
-    "license-header",
-    "react-refresh",
-  ],
-  ignorePatterns: [
-    "dist", 
-    "license-header.js", 
-    ".eslintrc.cjs",
-  ],
+  plugins: ["license-header", "react-refresh", "simple-import-sort"],
+  ignorePatterns: ["dist", "license-header.js", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     // `ecmaVersion` is automatically sets by `esXXXX` in `env`
@@ -85,5 +78,32 @@ module.exports = {
     "react/prop-types": "off",
     "react/self-closing-comp": "error",
     "require-await": "warn", // TODO: switch to "error" when the quantity of warning will be low
+    "simple-import-sort/imports": [
+      "error",
+      {
+        groups: [
+          // React first, then packages starting with a character
+          ["^react$", "^[a-z]"],
+
+          // Packages starting with `@` (except our internal @/)
+          ["^@(?!/)"],
+
+          // Internal imports from src using @/, sorted alphabetically
+          ["^@/.*"],
+
+          // Imports starting with `../`
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+
+          // Imports starting with `./`
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+
+          // Style imports
+          ["^.+\\.s?css$"],
+
+          // Side effect imports
+          ["^\\u0000"],
+        ],
+      },
+    ],
   },
 };

webapp/package.json

@@ -9,6 +9,7 @@
     "coverage": "vitest run --coverage",
     "dev": "vite",
     "lint": "tsc --noEmit && eslint . --ext ts,tsx --report-unused-disable-directives",
+    "lint:fix": "eslint . --fix",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui"
@@ -114,6 +115,7 @@
     "eslint-plugin-react": "7.37.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-react-refresh": "0.4.12",
+    "eslint-plugin-simple-import-sort": "12.1.1",
     "husky": "9.1.6",
     "jsdom": "25.0.1",
     "prettier": "3.3.3",

webapp/src/components/App/Settings/utils.ts → webapp/src/common/constants.ts

@@ -12,12 +12,11 @@
  * This file is part of the Antares project.
  */
 
-import * as RA from "ramda-adjunct";
-import { RoleType } from "../../../common/types";
+import { RoleType } from "./types";
 
+export const APP_NAME = "antares-web";
 export const RESERVED_USER_NAMES = ["admin"];
 export const RESERVED_GROUP_NAMES = ["admin"];
-
 export const ROLE_TYPE_KEYS = Object.values(RoleType).filter(
-  RA.isString,
-) as Array<keyof typeof RoleType>;
+  (value): value is keyof typeof RoleType => typeof value === "string",
+);

webapp/src/components/App/Api.tsx

@@ -12,10 +12,13 @@
  * This file is part of the Antares project.
  */
 
-import { Box } from "@mui/material";
 import SwaggerUI from "swagger-ui-react";
+
+import { Box } from "@mui/material";
+
+import { getConfig } from "@/services/config";
+
 import "swagger-ui-react/swagger-ui.css";
-import { getConfig } from "../../services/config";
 
 function Api() {
   return (

webapp/src/components/App/Data/DataListing.tsx

@@ -13,11 +13,13 @@
  */
 
 import { memo } from "react";
-import { Typography, Box, styled } from "@mui/material";
 import AutoSizer from "react-virtualized-auto-sizer";
-import { FixedSizeList, areEqual, ListChildComponentProps } from "react-window";
+import { areEqual, FixedSizeList, ListChildComponentProps } from "react-window";
+
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
-import { MatrixDataSetDTO } from "../../../common/types";
+import { Box, styled, Typography } from "@mui/material";
+
+import { MatrixDataSetDTO } from "@/common/types";
 
 const ROW_ITEM_SIZE = 45;
 const BUTTONS_SIZE = 40;

webapp/src/components/App/Data/DataPropsView.tsx

@@ -13,8 +13,10 @@
  */
 
 import { useState } from "react";
-import { MatrixDataSetDTO, MatrixInfoDTO } from "../../../common/types";
-import PropertiesView from "../../common/PropertiesView";
+
+import { MatrixDataSetDTO, MatrixInfoDTO } from "@/common/types";
+import PropertiesView from "@/components/common/PropertiesView";
+
 import DataListing from "./DataListing";
 import { StyledListingBox } from "./styles";
 
@@ -39,7 +41,7 @@ function DataPropsView(props: PropTypes) {
     );
   };
 
-  const onChange = async (currentName: string) => {
+  const onChange = (currentName: string) => {
     if (currentName !== "") {
       const f = filter(currentName);
       setFilteredDatas(f);

webapp/src/components/App/Data/DatasetCreationDialog.tsx

@@ -12,27 +12,30 @@
  * This file is part of the Antares project.
  */
 
-import { useState, useEffect, forwardRef, ChangeEvent } from "react";
+import { ChangeEvent, forwardRef, useEffect, useState } from "react";
+import axios, { AxiosError } from "axios";
+import { useSnackbar } from "notistack";
+import { useTranslation } from "react-i18next";
+
+import HelpIcon from "@mui/icons-material/Help";
 import {
   Box,
-  TextField,
-  Typography,
   Button,
   Checkbox,
   Chip,
+  TextField,
   Tooltip,
+  Typography,
 } from "@mui/material";
-import { useSnackbar } from "notistack";
-import { useTranslation } from "react-i18next";
-import axios, { AxiosError } from "axios";
-import HelpIcon from "@mui/icons-material/Help";
-import { getGroups } from "../../../services/api/user";
-import { GroupDTO, MatrixDataSetDTO } from "../../../common/types";
+
+import { GroupDTO, MatrixDataSetDTO } from "@/common/types";
+import BasicDialog from "@/components/common/dialogs/BasicDialog";
+import SimpleLoader from "@/components/common/loaders/SimpleLoader";
+import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
+import { getGroups } from "@/services/api/user";
+
+import { BoxParam, BoxParamHeader, ParamTitle } from "./styles";
 import { saveMatrix } from "./utils";
-import useEnqueueErrorSnackbar from "../../../hooks/useEnqueueErrorSnackbar";
-import SimpleLoader from "../../common/loaders/SimpleLoader";
-import BasicDialog from "../../common/dialogs/BasicDialog";
-import { BoxParamHeader, BoxParam, ParamTitle } from "./styles";
 
 interface PropTypes {
   open: boolean;

webapp/src/components/App/Data/MatrixDialog.tsx

@@ -12,13 +12,14 @@
  * This file is part of the Antares project.
  */
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
-import { MatrixInfoDTO, MatrixType } from "../../../common/types";
-import { getMatrix } from "../../../services/api/matrix";
-import useEnqueueErrorSnackbar from "../../../hooks/useEnqueueErrorSnackbar";
-import DataViewerDialog from "../../common/dialogs/DataViewerDialog";
+
+import { MatrixInfoDTO, MatrixType } from "@/common/types";
+import DataViewerDialog from "@/components/common/dialogs/DataViewerDialog";
+import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
+import { getMatrix } from "@/services/api/matrix";
 
 interface PropTypes {
   matrixInfo: MatrixInfoDTO;

webapp/src/components/App/Data/index.tsx

@@ -12,33 +12,36 @@
  * This file is part of the Antares project.
  */
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { AxiosError } from "axios";
 import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
+
 import DeleteIcon from "@mui/icons-material/Delete";
-import StorageIcon from "@mui/icons-material/Storage";
-import { Box, Typography, IconButton, Tooltip } from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
 import DownloadIcon from "@mui/icons-material/Download";
-import DataPropsView from "./DataPropsView";
+import EditIcon from "@mui/icons-material/Edit";
+import StorageIcon from "@mui/icons-material/Storage";
+import { Box, IconButton, Tooltip, Typography } from "@mui/material";
+
+import { MatrixDataSetDTO, MatrixInfoDTO } from "@/common/types";
+import ConfirmationDialog from "@/components/common/dialogs/ConfirmationDialog";
+import FileTable from "@/components/common/FileTable";
+import SimpleLoader from "@/components/common/loaders/SimpleLoader";
+import RootPage from "@/components/common/page/RootPage";
+import SplitView from "@/components/common/SplitView";
+import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
+import useAppSelector from "@/redux/hooks/useAppSelector";
+import { getAuthUser } from "@/redux/selectors";
 import {
   deleteDataSet,
   exportMatrixDataset,
-  getMatrixList,
   getExportMatrixUrl,
-} from "../../../services/api/matrix";
-import { MatrixInfoDTO, MatrixDataSetDTO } from "../../../common/types";
+  getMatrixList,
+} from "@/services/api/matrix";
+
+import DataPropsView from "./DataPropsView";
 import DatasetCreationDialog from "./DatasetCreationDialog";
-import ConfirmationDialog from "../../common/dialogs/ConfirmationDialog";
-import RootPage from "../../common/page/RootPage";
 import MatrixDialog from "./MatrixDialog";
-import useEnqueueErrorSnackbar from "../../../hooks/useEnqueueErrorSnackbar";
-import SimpleLoader from "../../common/loaders/SimpleLoader";
-import FileTable from "../../common/FileTable";
-import { getAuthUser } from "../../../redux/selectors";
-import useAppSelector from "../../../redux/hooks/useAppSelector";
-import SplitView from "../../common/SplitView";
 
 function Data() {
   const [t] = useTranslation();
@@ -72,7 +75,7 @@
     setOpenModal(true);
   };
 
   const handleDelete = async (id: string) => {
     setIdForDeletion(id);
     setOpenConfirmationModal(true);
   };
@@ -111,7 +114,7 @@
     }
   };
 
   const onMatrixClick = async (id: string) => {
     if (selectedItem) {
       const tmp = dataList.find((o) => o.id === selectedItem);
       if (tmp) {

webapp/src/components/App/Data/styles.ts

@@ -12,8 +12,8 @@
  * This file is part of the Antares project.
  */
 
-import { styled, Box, Typography } from "@mui/material";
 import DownloadIcon from "@mui/icons-material/Download";
+import { Box, styled, Typography } from "@mui/material";
 
 export const BoxParamHeader = styled(Box)({
   width: "100%",

webapp/src/components/App/Data/utils.tsx

@@ -17,12 +17,12 @@ import {
   MatrixDataSetDTO,
   MatrixDataSetUpdateDTO,
   MatrixInfoDTO,
-} from "../../../common/types";
+} from "@/common/types";
 import {
+  createDataSet,
   createMatrixByImportation,
   updateDataSet,
-  createDataSet,
-} from "../../../services/api/matrix";
+} from "@/services/api/matrix";
 
 const updateMatrix = async (
   data: MatrixDataSetDTO,

webapp/src/components/App/Settings/Groups/Header.tsx

@@ -12,15 +12,18 @@
  * This file is part of the Antares project.
  */
 
-import { Box, Button } from "@mui/material";
-import GroupAddIcon from "@mui/icons-material/GroupAdd";
-import { useTranslation } from "react-i18next";
 import { useState } from "react";
-import { GroupDetailsDTO } from "../../../../common/types";
+import { useTranslation } from "react-i18next";
+
+import GroupAddIcon from "@mui/icons-material/GroupAdd";
+import { Box, Button } from "@mui/material";
+
+import { GroupDetailsDTO } from "@/common/types";
+import SearchFE from "@/components/common/fieldEditors/SearchFE";
+import useAppSelector from "@/redux/hooks/useAppSelector";
+import { isAuthUserAdmin } from "@/redux/selectors";
+
 import CreateGroupDialog from "./dialog/CreateGroupDialog";
-import { isAuthUserAdmin } from "../../../../redux/selectors";
-import useAppSelector from "../../../../redux/hooks/useAppSelector";
-import SearchFE from "../../../common/fieldEditors/SearchFE";
 
 interface Props {
   setSearchValue: (v: string) => void;

webapp/src/components/App/Settings/Groups/dialog/CreateGroupDialog.tsx

@@ -12,19 +12,22 @@
  * This file is part of the Antares project.
  */
 
-import GroupAddIcon from "@mui/icons-material/GroupAdd";
 import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
 import { usePromise as usePromiseWrapper } from "react-use";
+
+import GroupAddIcon from "@mui/icons-material/GroupAdd";
+
 import {
   GroupDetailsDTO,
   GroupDTO,
   RoleDetailsDTO,
   UserDTO,
-} from "../../../../../common/types";
-import useEnqueueErrorSnackbar from "../../../../../hooks/useEnqueueErrorSnackbar";
-import { createGroup, createRole } from "../../../../../services/api/user";
-import { SubmitHandlerPlus } from "../../../../common/Form/types";
+} from "@/common/types";
+import { SubmitHandlerPlus } from "@/components/common/Form/types";
+import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
+import { createGroup, createRole } from "@/services/api/user";
+
 import GroupFormDialog, { GroupFormDialogProps } from "./GroupFormDialog";
 
 type InheritPropsToOmit = "title" | "titleIcon" | "onSubmit" | "onCancel";