[web] Restructure src by creating a module per installer area

web/jest.config.js

@@ -3,6 +3,9 @@
  * https://jestjs.io/docs/configuration
  */
 
+const { pathsToModuleNameMapper } = require('ts-jest');
+const { compilerOptions } = require('./tsconfig');
+
 module.exports = {
   // All imported modules in your tests should be mocked automatically
   // automock: false,
@@ -86,7 +89,8 @@ module.exports = {
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   // moduleNameMapper: {},
   moduleNameMapper: {
-    "\\.(css|scss)$": "identity-obj-proxy"
+    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/" }),
+    "\\.(css|scss)$": "identity-obj-proxy",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

web/package.json

@@ -18,12 +18,13 @@
     "@babel/eslint-parser": "^7.13.14",
     "@babel/preset-env": "^7.5.4",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.1.1",
+    "@types/jest": "^29.2.3",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "^29.3.1",
     "babel-loader": "^8.0.6",
     "chrome-remote-interface": "^0.31.0",
     "compression-webpack-plugin": "^9.0.0",
@@ -45,7 +46,8 @@
     "htmlparser": "^1.7.7",
     "identity-obj-proxy": "^3.0.0",
     "jed": "^1.1.1",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "jest-transform-stub": "^2.0.0",
     "jsdoc": "^3.6.10",
     "mini-css-extract-plugin": "^2.5.3",
@@ -58,6 +60,8 @@
     "string-replace-loader": "^3.0.0",
     "surge": "^0.23.1",
     "terser-webpack-plugin": "^5.1.4",
+    "ts-jest": "^29.0.3",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typedoc": "^0.23.15",
     "typedoc-plugin-missing-exports": "^1.0.0",
     "typescript": "^4.8.4",

web/src/App.jsx

@@ -21,16 +21,14 @@
 
 import React, { useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
-import Layout, { Title, AdditionalInfo } from "./Layout";
-import About from "./About";
-import TargetIpsPopup from "./TargetIpsPopup";
-import LoadingEnvironment from "./LoadingEnvironment";
-import DBusError from "./DBusError";
-import InstallationProgress from "./InstallationProgress";
-import InstallationFinished from "./InstallationFinished";
-import { useInstallerClient } from "./context/installer";
-import { STARTUP, INSTALL } from "./client/phase";
-import { BUSY } from "./client/status";
+
+import { useInstallerClient } from "@context/installer";
+import { STARTUP, INSTALL } from "@client/phase";
+import { BUSY } from "@client/status";
+
+import { Layout, Title, AdditionalInfo, LoadingEnvironment, DBusError } from "@components/layout";
+import { About, InstallationProgress, InstallationFinished } from "@components/core";
+import { TargetIpsPopup } from "@components/network";
 
 function App() {
   const client = useInstallerClient();

web/src/App.test.jsx

@@ -21,23 +21,23 @@
 
 import React from "react";
 import { act, screen } from "@testing-library/react";
-import { installerRender } from "./test-utils";
-import { createClient } from "./client";
+import { installerRender } from "@/test-utils";
+import { createClient } from "@client";
 import App from "./App";
-import { STARTUP, CONFIG, INSTALL } from "./client/phase";
-import { IDLE, BUSY } from "./client/status";
+import { STARTUP, CONFIG, INSTALL } from "@client/phase";
+import { IDLE, BUSY } from "@client/status";
 
-jest.mock("./client");
+jest.mock("@client");
 
 // Mock some components,
 // See https://www.chakshunyu.com/blog/how-to-mock-a-react-component-in-jest/#default-export
 
-jest.mock("./Questions", () => () => <div>Questions Mock</div>);
-jest.mock("./DBusError", () => () => <div>D-BusError Mock</div>);
-jest.mock("./InstallationProgress", () => () => "InstallationProgress Mock");
-jest.mock("./InstallationFinished", () => () => "InstallationFinished Mock");
-jest.mock("./LoadingEnvironment", () => () => "LoadingEnvironment Mock");
-jest.mock("./TargetIpsPopup", () => () => "Target IPs Mock");
+jest.mock("@components/questions/Questions", () => () => <div>Questions Mock</div>);
+jest.mock("@components/layout/DBusError", () => () => <div>D-BusError Mock</div>);
+jest.mock("@components/layout/LoadingEnvironment", () => () => "LoadingEnvironment Mock");
+jest.mock("@components/core/InstallationProgress", () => () => "InstallationProgress Mock");
+jest.mock("@components/core/InstallationFinished", () => () => "InstallationFinished Mock");
+jest.mock("@components/network/TargetIpsPopup", () => () => "Target IPs Mock");
 jest.mock('react-router-dom', () => ({
   Outlet: () => <div>Content</div>,
 }));

web/src/Main.jsx

@@ -21,7 +21,7 @@
 
 import React from "react";
 import { Outlet } from "react-router-dom";
-import Questions from "./Questions";
+import { Questions } from "@components/questions";
 
 function Main() {
   return (

web/src/Main.test.jsx

@@ -21,11 +21,11 @@
 
 import React from "react";
 import { screen } from "@testing-library/react";
-import { installerRender } from "./test-utils";
+import { installerRender } from "@/test-utils";
 
-import Main from "./Main";
+import Main from "@/Main";
 
-jest.mock("./Questions", () => () => <div>Questions Mock</div>);
+jest.mock("@components/questions/Questions", () => () => <div>Questions Mock</div>);
 jest.mock('react-router-dom', () => ({
   Outlet: () => <div>Content</div>,
 }));

web/src/About.jsx → web/src/components/core/About.jsx

@@ -21,7 +21,7 @@
 
 import React, { useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
-import Popup from "./Popup";
+import { Popup } from "@components/core";
 
 export default function About() {
   const [isOpen, setIsOpen] = useState(false);

web/src/About.test.jsx → web/src/components/core/About.test.jsx

@@ -22,7 +22,7 @@
 import React from "react";
 
 import { screen, waitFor, within } from "@testing-library/react";
-import { installerRender } from "./test-utils";
+import { installerRender } from "@/test-utils";
 
 import About from "./About";
 

web/src/Category.jsx → web/src/components/core/Category.jsx

@@ -32,7 +32,7 @@ import {
   TextVariants
 } from "@patternfly/react-core";
 
-import ValidationErrors from "./ValidationErrors";
+import { ValidationErrors } from "@components/core";
 
 /**
  * Displays an installation section
@@ -45,7 +45,7 @@ import ValidationErrors from "./ValidationErrors";
  * @param {object} props
  * @param {React.FunctionComponent} props.icon - Category icon
  * @param {string} props.title - Category title
- * @param {import("./client/mixins").ValidationError[]} props.errors - Validation errors
+ * @param {import("@client/mixins").ValidationError[]} props.errors - Validation errors
  * @param {JSX.Element} props.children - Category content
  */
 export default function Category({ icon, title, errors, children }) {

web/src/InstallButton.jsx → web/src/components/core/InstallButton.jsx

@@ -20,10 +20,10 @@
  */
 
 import React, { useState } from "react";
-import { useInstallerClient } from "./context/installer";
+import { useInstallerClient } from "@context/installer";
 
 import { Button, Text } from "@patternfly/react-core";
-import Popup from "./Popup";
+import { Popup } from "@components/core";
 
 const InstallConfirmationPopup = ({ onAccept, onClose }) => (
   <Popup

web/src/InstallButton.test.jsx → web/src/components/core/InstallButton.test.jsx

@@ -21,13 +21,13 @@
 
 import React from "react";
 import { screen, waitFor } from "@testing-library/react";
-import { installerRender } from "./test-utils";
-import InstallButton from "./InstallButton";
-import { createClient } from "./client";
+import { installerRender } from "@/test-utils";
+import { createClient } from "@client";
+import { InstallButton } from "@components/core";
 
 const startInstallationFn = jest.fn().mockName("startInstallation");
 
-jest.mock("./client", () => ({
+jest.mock("@client", () => ({
   createClient: jest.fn()
 }));
 

web/src/InstallationFinished.jsx → web/src/components/core/InstallationFinished.jsx

@@ -29,9 +29,8 @@ import {
   EmptyStateBody
 } from "@patternfly/react-core";
 
-import { Title as SectionTitle, PageIcon, MainActions } from "./Layout";
-import Center from "./Center";
-import { useInstallerClient } from "./context/installer";
+import { Center, Title as SectionTitle, PageIcon, MainActions } from "@components/layout";
+import { useInstallerClient } from "@context/installer";
 
 import {
   EOS_TASK_ALT as InstallationFinishedIcon,

web/src/InstallationFinished.test.jsx → web/src/components/core/InstallationFinished.test.jsx

@@ -22,12 +22,12 @@
 import React from "react";
 
 import { screen } from "@testing-library/react";
-import { installerRender } from "./test-utils";
-import { createClient } from "./client";
+import { installerRender } from "@/test-utils";
+import { createClient } from "@client";
 
 import InstallationFinished from "./InstallationFinished";
 
-jest.mock("./client");
+jest.mock("@client");
 
 const rebootSystemFn = jest.fn();
 

web/src/InstallationProgress.jsx → web/src/components/core/InstallationProgress.jsx

@@ -21,9 +21,8 @@
 
 import React from "react";
 
-import Center from "./Center";
-import { Title, PageIcon } from "./Layout";
 import ProgressReport from "./ProgressReport";
+import { Center, Title, PageIcon } from "@components/layout";
 
 import { EOS_DOWNLOADING as Icon } from "eos-icons-react";
 

web/src/InstallationProgress.test.jsx → web/src/components/core/InstallationProgress.test.jsx

@@ -22,11 +22,11 @@
 import React from "react";
 
 import { screen } from "@testing-library/react";
-import { installerRender } from "./test-utils";
+import { installerRender } from "@/test-utils";
 
 import InstallationProgress from "./InstallationProgress";
 
-jest.mock("./ProgressReport", () => () => "ProgressReport Mock");
+jest.mock("@components/core/ProgressReport", () => () => "ProgressReport Mock");
 
 describe("InstallationProgress", () => {
   it("uses 'Installing' as title", async () => {

web/src/Overview.jsx → web/src/components/core/Overview.jsx

@@ -20,18 +20,17 @@
  */
 
 import React, { useState } from "react";
-import { useSoftware } from "./context/software";
 import { useNavigate, Navigate } from "react-router-dom";
+import { useSoftware } from "@context/software";
 
 import { Button, Flex, FlexItem } from "@patternfly/react-core";
 
-import { Title, PageIcon, PageActions, MainActions } from "./Layout";
-import Category from "./Category";
-import LanguageSelector from "./LanguageSelector";
-import Storage from "./Storage";
-import Users from "./Users";
-import Network from "./Network";
-import InstallButton from "./InstallButton";
+import { Title, PageIcon, PageActions, MainActions } from "@components/layout";
+import { Category, InstallButton } from "@components/core";
+import { LanguageSelector } from "@components/language";
+import { Storage } from "@components/storage";
+import { Users } from "@components/users";
+import { Network } from "@components/network";
 
 import {
   EOS_SOFTWARE as OverviewIcon,

web/src/Overview.test.jsx → web/src/components/core/Overview.test.jsx

@@ -21,9 +21,9 @@
 
 import React from "react";
 import { screen } from "@testing-library/react";
-import { installerRender } from "./test-utils";
+import { installerRender } from "@/test-utils";
 import Overview from "./Overview";
-import { createClient } from "./client";
+import { createClient } from "@client";
 
 let mockProduct;
 let mockProducts = [
@@ -32,10 +32,10 @@ let mockProducts = [
 ];
 const startInstallationFn = jest.fn();
 
-jest.mock("./client");
+jest.mock("@client");
 
-jest.mock("./context/software", () => ({
-  ...jest.requireActual("./context/software"),
+jest.mock("@context/software", () => ({
+  ...jest.requireActual("@context/software"),
   useSoftware: () => {
     return {
       products: mockProducts,
@@ -50,11 +50,11 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => jest.fn()
 }));
 
-jest.mock("./LanguageSelector", () => () => "Language Selector");
-jest.mock("./Storage", () => () => "Storage Configuration");
-jest.mock("./Network", () => () => "Network Configuration");
-jest.mock("./Users", () => () => "Users Configuration");
-jest.mock("./InstallButton", () => () => "Install Button");
+jest.mock("@components/language/LanguageSelector", () => () => "Language Selector");
+jest.mock("@components/storage/Storage", () => () => "Storage Configuration");
+jest.mock("@components/network/Network", () => () => "Network Configuration");
+jest.mock("@components/users/Users", () => () => "Users Configuration");
+jest.mock("@components/core/InstallButton", () => () => "Install Button");
 
 beforeEach(() => {
   mockProduct = { id: "openSUSE", name: "openSUSE Tumbleweed" };

web/src/Popup.jsx → web/src/components/core/Popup.jsx

@@ -21,7 +21,7 @@
 
 import React from "react";
 import { Button, Modal } from "@patternfly/react-core";
-import { partition } from "./utils";
+import { partition } from "@/utils";
 
 /**
  * Wrapper component for holding Popup actions

web/src/Popup.test.jsx → web/src/components/core/Popup.test.jsx

@@ -22,9 +22,9 @@
 import React from "react";
 
 import { screen, within } from "@testing-library/react";
-import { installerRender } from "./test-utils";
+import { installerRender } from "@/test-utils";
 
-import Popup from "./Popup";
+import { Popup } from "@components/core";
 
 let isOpen;
 const confirmFn = jest.fn();

web/src/ProgressReport.jsx → web/src/components/core/ProgressReport.jsx

@@ -20,8 +20,8 @@
  */
 
 import React, { useState, useEffect } from "react";
-import { useCancellablePromise } from "./utils";
-import { useInstallerClient } from "./context/installer";
+import { useCancellablePromise } from "@/utils";
+import { useInstallerClient } from "@context/installer";
 
 import { Progress, Stack, StackItem, Text } from "@patternfly/react-core";
 

web/src/ProgressReport.test.jsx → web/src/components/core/ProgressReport.test.jsx

@@ -22,12 +22,12 @@
 import React from "react";
 
 import { act, screen } from "@testing-library/react";
-import { installerRender } from "./test-utils";
-import { createClient } from "./client";
+import { installerRender } from "@/test-utils";
+import { createClient } from "@client";
 
-import ProgressReport from "./ProgressReport";
+import { ProgressReport } from "@components/core";
 
-jest.mock("./client");
+jest.mock("@client");
 
 let callbacks;
 let onManagerProgressChange = jest.fn();

web/src/ValidationErrors.jsx → web/src/components/core/ValidationErrors.jsx

@@ -33,7 +33,7 @@ import {
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 
 /**
- * @param {import("./client/mixins").ValidationError[]} errors - Validation errors
+ * @param {import("@client/mixins").ValidationError[]} errors - Validation errors
  * @return React.JSX
  */
 const popoverContent = (errors) => {
@@ -56,7 +56,7 @@ const popoverContent = (errors) => {
  *
  * @param {object} props
  * @param {string} props.title - A title for the Popover
- * @param {import("./client/mixins").ValidationError[]} props.errors - Validation errors
+ * @param {import("@client/mixins").ValidationError[]} props.errors - Validation errors
  */
 const ValidationErrors = ({ title = "Errors", errors }) => {
   const [popoverVisible, setPopoverVisible] = useState(false);