fix(web): avoid type definitions errors at build time (#1465)

## Problem

After merging #1456, the build task is failing when running it for the
production environment (`NODE_ENV=production npm run build`).

## Solution

Fix these problems having in mind that most of the complaints will be
solved in a better way when migrating components to TypeScript.

## Testing

- [x] `npm run server` succeed.
- [x] `npm run tests` succeed.
- [x] `NODE_ENV=production npm run build` succeed.

web/.eslintrc.json

@@ -21,14 +21,7 @@
     },
     "sourceType": "module"
   },
-  "plugins": [
-    "agama-i18n",
-    "flowtype",
-    "i18next",
-    "react",
-    "react-hooks",
-    "@typescript-eslint"
-  ],
+  "plugins": ["agama-i18n", "flowtype", "i18next", "react", "react-hooks", "@typescript-eslint"],
   "rules": {
     "agama-i18n/string-literals": "error",
     "i18next/no-literal-string": "error",
@@ -69,19 +62,14 @@
   "overrides": [
     {
       // do not check translations in the testing or development files
-      "files": [
-        "*.test.*",
-        "test-utils.js"
-      ],
+      "files": ["*.test.*", "test-utils.js"],
       "rules": {
         "i18next/no-literal-string": "off"
       }
     },
     {
       // do not check translation arguments in the test, it checks some internals by passing variables
-      "files": [
-        "i18n.test.js"
-      ],
+      "files": ["i18n.test.js"],
       "rules": {
         "agama-i18n/string-literals": "off"
       }

web/.stylelintrc.json

@@ -1,7 +1,5 @@
 {
-  "plugins": [
-    "stylelint-prettier"
-  ],
+  "plugins": ["stylelint-prettier"],
   "extends": [
     "stylelint-config-standard",
     "stylelint-config-standard-scss",

web/package.json

@@ -42,6 +42,7 @@
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.12",
+    "@types/webpack-env": "^1.18.5",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "ajv": "^8.12.0",

web/src/client/network/model.test.js

@@ -43,7 +43,7 @@ describe("createConnection", () => {
 
   it("merges given properties", () => {
     const addresses = [{ address: "192.168.0.1", prefix: 24 }];
-    const connection = createConnection({ addresses, testing: 1 });
+    const connection = createConnection({ addresses });
     expect(connection.method4).toEqual("auto");
     expect(connection.gateway4).toEqual("");
     expect(connection.addresses).toEqual(addresses);

web/src/client/storage.js

@@ -43,7 +43,32 @@ const ZFCP_DISK_IFACE = "org.opensuse.Agama.Storage1.ZFCP.Disk";
 
 /** @fixme Adapt code depending on D-Bus */
 class DBusClient {
-  proxy() {
+  /**
+   * @param {string} service
+   * @param {string|undefined} address
+   */
+  constructor(service, address) {
+    console.warn(`FIXME: Adapt code depending on D-Bus ${service} ${address}`);
+  }
+
+  /**
+   * @param {string} iface
+   * @param {string} [path]
+   * @return {Promise<object,undefined>}
+   */
+  async proxy(iface, path) {
+    console.warn(`FIXME: Adapt code depending on D-Bus ${iface} ${path}`);
+    return Promise.resolve(undefined);
+  }
+
+  /**
+   * @param {string|undefined} iface
+   * @param {string|undefined} path_namespace
+   * @param {object|undefined} options
+   * @return {Promise<any>}
+   */
+  async proxies(iface, path_namespace, options) {
+    console.warn(`FIXME: Adapt code depending on D-Bus ${iface} ${path_namespace} ${options}`);
     return Promise.resolve(undefined);
   }
 }
@@ -1576,7 +1601,9 @@ class StorageBaseClient {
     this.staging = new DevicesManager(this.client, "result");
     this.proposal = new ProposalManager(this.client, this.system);
     this.iscsi = new ISCSIManager(this.client);
+    // @ts-ignore
     this.dasd = new DASDManager(StorageBaseClient.SERVICE, client);
+    // @ts-ignore
     this.zfcp = new ZFCPManager(StorageBaseClient.SERVICE, client);
   }
 

web/src/components/core/CardField.jsx

@@ -43,11 +43,11 @@ import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
  * @todo write documentation
  */
 const CardField = ({
-  label,
-  value,
-  description,
-  actions,
-  children = [],
+  label = undefined,
+  value = undefined,
+  description = undefined,
+  actions = undefined,
+  children,
   cardProps = {},
   cardHeaderProps = {},
   cardDescriptionProps = {},
@@ -58,12 +58,16 @@ const CardField = ({
       <CardHeader {...cardHeaderProps}>
         <CardTitle>
           <Flex alignItems={{ default: "alignItemsCenter" }}>
-            <FlexItem spacer={{ default: "spacerSm" }}>
-              <h3>{label}</h3>
-            </FlexItem>
-            <FlexItem grow={{ default: "grow" }} className={textStyles.fontSizeXl}>
-              {value}
-            </FlexItem>
+            {label && (
+              <FlexItem spacer={{ default: "spacerSm" }}>
+                <h3>{label}</h3>
+              </FlexItem>
+            )}
+            {value && (
+              <FlexItem grow={{ default: "grow" }} className={textStyles.fontSizeXl}>
+                {value}
+              </FlexItem>
+            )}
           </Flex>
         </CardTitle>
       </CardHeader>

web/src/components/core/Drawer.jsx

@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-// @ts-check
+// FIXME: rewrite to .tsx
 
 import React, { forwardRef, useImperativeHandle, useState } from "react";
 import {

web/src/components/core/EmptyState.jsx

@@ -41,10 +41,10 @@ import { Icon } from "~/components/layout";
  * @param {object} props
  * @param {string} props.title
  * @param {IconName} props.icon
- * @param {string} props.color
+ * @param {string} [props.color="color-100"]
  * @param {EmptyStateHeaderProps["headingLevel"]} [props.headingLevel="h4"]
  * @param {boolean} [props.noPadding=false]
- * @param {React.ReactNode} props.children
+ * @param {React.ReactNode} [props.children]
  * @param {EmptyStateProps} [props.rest]
  * @todo write documentation
  */
@@ -57,19 +57,23 @@ export default function EmptyStateWrapper({
   children,
   ...rest
 }) {
+  // @ts-ignore
   if (noPadding) rest.className = [rest.className, "no-padding"].join(" ").trim();
 
   return (
     <EmptyState variant="lg" {...rest}>
       <EmptyStateHeader
         headingLevel={headingLevel}
         titleText={title}
+        // FIXME: Allow more colors, not only PF text utils. See core/Icon.jsx too.
         titleClassName={`pf-v5-u-${color}`}
         icon={<Icon name={icon} size="xxl" color={color} />}
       />
-      <EmptyStateBody>
-        <Stack hasGutter>{children}</Stack>
-      </EmptyStateBody>
+      {children && (
+        <EmptyStateBody>
+          <Stack hasGutter>{children}</Stack>
+        </EmptyStateBody>
+      )}
     </EmptyState>
   );
 }

web/src/components/core/LoginPage.jsx

@@ -87,6 +87,7 @@ user privileges.",
         <Grid>
           <GridItem sm={10} smOffset={1} lg={8} lgOffset={2} xl={6} xlOffset={3}>
             <Card component="section" isRounded>
+              {/** @ts-ignore */}
               <EmptyState title={sectionTitle} icon="lock" color="color-info-200" variant="xl">
                 <p>
                   {rootExplanationStart} <b>{rootUser}</b> {rootExplanationEnd}

web/src/components/core/Page.jsx

@@ -22,7 +22,7 @@
 // @ts-check
 
 import React from "react";
-import { NavLink, Outlet, useNavigate, useMatches, useLocation } from "react-router-dom";
+import { NavLink, Outlet, useNavigate } from "react-router-dom";
 import {
   Button,
   Card,
@@ -85,6 +85,7 @@ const Action = ({ navigateTo, children, ...props }) => {
 
 /**
  * Simple action for navigating back
+ * @param {ActionProps & { text?: string }} props
  */
 const CancelAction = ({ text = _("Cancel"), navigateTo }) => {
   const navigate = useNavigate();
@@ -186,11 +187,6 @@ const CardSection = ({ title, children, ...props }) => {
  * @param {React.ReactNode} [props.children] - The page content.
  */
 const Page = () => {
-  const location = useLocation();
-  const matches = useMatches();
-  const currentRoute = matches.find((r) => r.pathname === location.pathname);
-  const titleFromRoute = currentRoute?.handle?.name;
-
   return (
     <PageGroup>
       <Outlet />

web/src/components/core/Section.jsx

@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-// @ts-check
+// FIXME: Refactor or replace
 
 import React from "react";
 import { Link } from "react-router-dom";

web/src/components/core/Section.test.jsx

@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-// @ts-check
+// FIXME: Refactor or replace
 
 import React from "react";
 import { screen, within } from "@testing-library/react";
@@ -65,7 +65,6 @@ describe.skip("Section", () => {
     });
 
     it("does not render an icon if not valid icon name is given", () => {
-      // @ts-expect-error: Creating the icon name dynamically is unlikely, but let's be safe.
       const { container } = plainRender(
         <Section title="Settings" icon={`fake-${Date.now()}-icon`} />,
       );

web/src/components/layout/Center.jsx

@@ -46,10 +46,9 @@ import React from "react";
  *
  * @param {object} props
  * @param {React.ReactNode} props.children
- * @param {React.HTMLAttributes} props.htmlProps
  */
-const Center = ({ children, ...htmlProps }) => (
-  <div className="vertically-centered" {...htmlProps}>
+const Center = ({ children }) => (
+  <div className="vertically-centered">
     <div className="full-width stack">{children}</div>
   </div>
 );

web/src/components/network/ConnectionsTable.jsx

@@ -30,6 +30,7 @@ import { formatIp } from "~/client/network/utils";
 import { _ } from "~/i18n";
 
 /**
+ * @typedef {import("~/client/network/model").Device} Device
  * @typedef {import("~/client/network/model").Connection} Connection
  */
 
@@ -40,8 +41,8 @@ import { _ } from "~/i18n";
  *
  * @param {object} props
  * @param {Connection[]} props.connections - Connections to be shown
- * @param {function} props.onEdit - function to be called for editing a connection
- * @param {function} props.onForget - function to be called for forgetting a connection
+ * @param {Device[]} props.devices - Connections to be shown
+ * @param {function} [props.onForget] - function to be called for forgetting a connection
  */
 export default function ConnectionsTable({ connections, devices, onForget }) {
   const navigate = useNavigate();

web/src/components/network/NetworkPage.jsx

@@ -38,6 +38,7 @@ import { sprintf } from "sprintf-js";
  */
 export default function NetworkPage() {
   const { network: client } = useInstallerClient();
+  // @ts-ignore
   const { connections: initialConnections, devices: initialDevices, settings } = useLoaderData();
   const [connections, setConnections] = useState(initialConnections);
   const [devices, setDevices] = useState(initialDevices);
@@ -64,6 +65,7 @@ export default function NetworkPage() {
           NetworkEventTypes.DEVICE_ADDED,
           NetworkEventTypes.DEVICE_UPDATED,
           NetworkEventTypes.DEVICE_REMOVED,
+          // @ts-ignore
         ].includes(type)
       ) {
         setUpdateState(true);

web/src/components/storage/BootSelection.jsx

@@ -49,9 +49,19 @@ const BOOT_DISABLED_ID = "boot-disabled";
  * Allows the user to select the boot configuration.
  */
 export default function BootSelectionDialog() {
+  /**
+   * @typedef {object} BootSelectionState
+   * @property {boolean} load
+   * @property {string} [selectedOption]
+   * @property {boolean} [configureBoot]
+   * @property {StorageDevice} [bootDevice]
+   * @property {StorageDevice} [defaultBootDevice]
+   * @property {StorageDevice[]} [availableDevices]
+   */
   const { cancellablePromise } = useCancellablePromise();
   const { storage: client } = useInstallerClient();
-  const [state, setState] = useState({});
+  /** @type ReturnType<typeof useState<BootSelectionState>> */
+  const [state, setState] = useState({ load: false });
   const navigate = useNavigate();
 
   // FIXME: Repeated code, see DeviceSelection. Use a context/hook or whatever

web/src/components/storage/DeviceSelection.jsx

@@ -47,25 +47,31 @@ import { compact, useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
 
 /**
- * @typedef {import ("~/client/storage").ProposalTarget} ProposalTarget
- * @typedef {import ("~/client/storage").ProposalSettings} ProposalSettings
  * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
  */
 
 const SELECT_DISK_ID = "select-disk";
 const CREATE_LVM_ID = "create-lvm";
 const SELECT_DISK_PANEL_ID = "panel-for-disk-selection";
 const CREATE_LVM_PANEL_ID = "panel-for-lvm-creation";
-const OPTIONS_NAME = "selection-mode";
 
 /**
  * Allows the user to select a target device for installation.
  * @component
  */
 export default function DeviceSelection() {
-  const [state, setState] = useState({});
+  /**
+   * @typedef {object} DeviceSelectionState
+   * @property {boolean} load
+   * @property {string} [target]
+   * @property {StorageDevice} [targetDevice]
+   * @property {StorageDevice[]} [targetPVDevices]
+   * @property {StorageDevice[]} [availableDevices]
+   */
   const navigate = useNavigate();
   const { cancellablePromise } = useCancellablePromise();
+  /** @type ReturnType<typeof useState<DeviceSelectionState>> */
+  const [state, setState] = useState({ load: false });
 
   const isTargetDisk = state.target === "DISK";
   const isTargetNewLvmVg = state.target === "NEW_LVM_VG";