Fix storage UI tests

web/src/components/core/ChangeProductOption.test.tsx

@@ -23,7 +23,7 @@
 import React from "react";
 import { screen } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
-import { useSystem } from "~/hooks/api";
+import { useSystem } from "~/hooks/api/system";
 import { PRODUCT as PATHS } from "~/routes/paths";
 import { Product } from "~/types/software";
 import ChangeProductOption from "./ChangeProductOption";
@@ -59,8 +59,8 @@ const network: System = {
 // let registrationInfoMock: RegistrationInfo;
 const mockSystemProducts: jest.Mock<Product[]> = jest.fn();
 
-jest.mock("~/hooks/api", () => ({
-  ...jest.requireActual("~/hooks/api"),
+jest.mock("~/hooks/api/system", () => ({
+  ...jest.requireActual("~/hooks/api/system"),
   useSystem: (): ReturnType<typeof useSystem> => ({
     products: mockSystemProducts(),
     network,

web/src/components/core/InstallButton.test.tsx

@@ -25,7 +25,7 @@ import { screen, waitFor, within } from "@testing-library/react";
 import { installerRender, mockRoutes } from "~/test-utils";
 import { InstallButton } from "~/components/core";
 import { PRODUCT, ROOT } from "~/routes/paths";
-import { Issue, IssueSeverity, IssueSource } from "~/api/issue";
+import { Issue } from "~/api/issue";
 
 const mockStartInstallationFn = jest.fn();
 let mockIssuesList: Issue[];
@@ -55,9 +55,7 @@ describe("InstallButton", () => {
       mockIssuesList = [
         {
           description: "Fake Issue",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Error,
+          class: "error",
           details: "Fake Issue details",
           scope: "product",
         },
@@ -133,9 +131,7 @@ describe("InstallButton", () => {
       mockIssuesList = [
         {
           description: "Fake warning",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Warn,
+          class: "warn",
           details: "Fake Issue details",
           scope: "product",
         },

web/src/components/core/InstallationFinished.test.tsx

@@ -84,8 +84,8 @@ const mockStorageConfig = (
   }
 };
 
-jest.mock("~/queries/storage", () => ({
-  ...jest.requireActual("~/queries/storage"),
+jest.mock("~/hooks/api/config/storage", () => ({
+  ...jest.requireActual("~/hooks/api/config/storage"),
   useConfig: () => mockStorageConfig(mockType, mockEncryption),
 }));
 

web/src/components/core/IssuesAlert.test.tsx

@@ -24,16 +24,14 @@ import React from "react";
 import { screen } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
 import { IssuesAlert } from "~/components/core";
-import { Issue, IssueSeverity, IssueSource } from "~/api/issue";
+import { Issue } from "~/api/issue";
 import { SOFTWARE } from "~/routes/paths";
 
 describe("IssueAlert", () => {
   it("renders a list of issues", () => {
     const issue: Issue = {
       description: "A generic issue",
-      source: IssueSource.Config,
-      severity: IssueSeverity.Error,
-      kind: "generic",
+      class: "generic",
       scope: "software",
     };
     installerRender(<IssuesAlert issues={[issue]} />);
@@ -43,9 +41,7 @@ describe("IssueAlert", () => {
   it("renders a link to conflict resolution when there is a 'solver' issue", () => {
     const issue: Issue = {
       description: "Conflicts found",
-      source: IssueSource.Config,
-      severity: IssueSeverity.Error,
-      kind: "solver",
+      class: "solver",
       scope: "software",
     };
     installerRender(<IssuesAlert issues={[issue]} />);

web/src/components/core/IssuesDrawer.test.tsx

@@ -24,16 +24,16 @@ import React from "react";
 import { screen, within } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
 import { InstallationPhase } from "~/types/status";
-import { Issue, IssueSeverity, IssueSource } from "~/api/issue";
+import { Issue } from "~/api/issue";
 import IssuesDrawer from "./IssuesDrawer";
 
 let phase = InstallationPhase.Config;
 let mockIssuesList: Issue[];
 const onCloseFn = jest.fn();
 
-jest.mock("~/queries/issues", () => ({
-  ...jest.requireActual("~/queries/issues"),
-  useAllIssues: () => mockIssuesList,
+jest.mock("~/hooks/api/issue", () => ({
+  ...jest.requireActual("~/hooks/api/issue"),
+  useIssues: () => mockIssuesList,
 }));
 
 jest.mock("~/queries/status", () => ({
@@ -62,58 +62,49 @@ describe("IssuesDrawer", () => {
       mockIssuesList = [
         {
           description: "Registration Fake Warning",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Warn,
+          class: "warn",
           details: "Registration Fake Issue details",
           scope: "product",
         },
       ];
     });
 
-    itRendersNothing();
+    it("renders the drawer with a warning", () => {
+      installerRender(<IssuesDrawer onClose={onCloseFn} />);
+      expect(screen.getByText("Registration Fake Warning")).toBeInTheDocument();
+    });
   });
 
   describe("when there are installation issues", () => {
     beforeEach(() => {
       mockIssuesList = [
         {
           description: "Registration Fake Issue",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Error,
+          class: "error",
           details: "Registration Fake Issue details",
           scope: "product",
         },
         {
           description: "Software Fake Issue",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Error,
+          class: "error",
           details: "Software Fake Issue details",
           scope: "software",
         },
         {
           description: "Storage Fake Issue 1",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Error,
+          class: "error",
           details: "Storage Fake Issue 1 details",
           scope: "storage",
         },
         {
           description: "Storage Fake Issue 2",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Error,
+          class: "error",
           details: "Storage Fake Issue 2 details",
           scope: "storage",
         },
         {
           description: "Users Fake Issue",
-          kind: "generic",
-          source: IssueSource.Unknown,
-          severity: IssueSeverity.Error,
+          class: "error",
           details: "Users Fake Issue details",
           scope: "users",
         },

web/src/components/core/ProgressStatusMonitor.test.tsx

@@ -23,12 +23,12 @@
 import React from "react";
 import { screen, within } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
-import { useStatus } from "~/hooks/api";
+import { useStatus } from "~/hooks/api/status";
 import ProgressStatusMonitor from "./ProgressStatusMonitor";
 
-let mockProgress: jest.Mock<ReturnType<typeof useStatus>["progresses"]> = jest.fn();
+const mockProgress: jest.Mock<ReturnType<typeof useStatus>["progresses"]> = jest.fn();
 
-jest.mock("~/hooks/api", () => ({
+jest.mock("~/hooks/api/status", () => ({
   useStatus: () => ({ progresses: mockProgress() }),
 }));
 

web/src/components/core/SelectableDataTable.tsx

@@ -90,7 +90,7 @@ export type SelectableDataTableColumn = {
    * If defined, marks the column as sortable and specifies the key used for
    * sorting.
    */
-  sortingKey?: string;
+  sortingKey?: string | ((item: object) => string | number);
 
   /**
    * A space-separated string of additional CSS class names to apply to the column's cells.

web/src/components/network/WifiConnectionForm.test.tsx

@@ -28,6 +28,21 @@ import { Connection, SecurityProtocols, WifiNetworkStatus, Wireless } from "~/ty
 
 const mockUpdateConnection = jest.fn();
 
+const mockConnection = new Connection("Visible Network", {
+  wireless: new Wireless({ ssid: "Visible Network" }),
+});
+
+const mockSystem = {
+  connections: [mockConnection],
+  state: {
+    connectivity: true,
+    wiredEnabled: true,
+    wirelessEnabled: false,
+    persistNetwork: true,
+    copyEnabled: false,
+  },
+};
+
 jest.mock("~/hooks/api/config/network", () => ({
   ...jest.requireActual("~/hooks/api/config/network"),
   useConnectionMutation: () => ({
@@ -51,21 +66,6 @@ jest.mock("~/hooks/api/system/network", () => ({
   useConnections: () => mockSystem.connections,
 }));
 
-const mockConnection = new Connection("Visible Network", {
-  wireless: new Wireless({ ssid: "Visible Network" }),
-});
-
-const mockSystem = {
-  connections: [mockConnection],
-  state: {
-    connectivity: true,
-    wiredEnabled: true,
-    wirelessEnabled: false,
-    persistNetwork: true,
-    copyEnabled: false,
-  },
-};
-
 const networkMock = {
   ssid: "Visible Network",
   hidden: false,

web/src/components/overview/L10nSection.test.tsx

@@ -24,22 +24,22 @@ import React from "react";
 import { screen } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 import { L10nSection } from "~/components/overview";
-import { Locale } from "~/api/system";
+import type { Locale } from "~/api/system/l10n";
 
 const locales: Locale[] = [
-  { id: "en_US.UTF-8", name: "English", territory: "United States" },
-  { id: "de_DE.UTF-8", name: "German", territory: "Germany" },
+  { id: "en_US.UTF-8", language: "English", territory: "United States" },
+  { id: "de_DE.UTF-8", language: "German", territory: "Germany" },
 ];
 
-jest.mock("~/queries/system", () => ({
-  ...jest.requireActual("~/queries/system"),
+jest.mock("~/hooks/api/system", () => ({
+  ...jest.requireActual("~/hooks/api/system"),
   useSystem: () => ({
     l10n: { locale: "en_US.UTF-8", locales, keymap: "us" },
   }),
 }));
 
-jest.mock("~/queries/proposal", () => ({
-  ...jest.requireActual("~/queries/proposal"),
+jest.mock("~/hooks/api/proposal", () => ({
+  ...jest.requireActual("~/hooks/api/proposal"),
   useProposal: () => ({
     l10n: { locale: "en_US.UTF-8", keymap: "us" },
   }),

web/src/components/overview/StorageSection.test.tsx

@@ -24,7 +24,7 @@ import React from "react";
 import { screen } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 import { StorageSection } from "~/components/overview";
-import { IssueSeverity, IssueSource } from "~/api/issue";
+import type { storage } from "~/api/system";
 
 let mockModel = {
   drives: [],
@@ -62,30 +62,18 @@ const sdb = {
   udevPaths: [],
 };
 
-jest.mock("~/queries/storage/config-model", () => ({
-  ...jest.requireActual("~/queries/storage/config-model"),
-  useConfigModel: () => mockModel,
+jest.mock("~/hooks/api/storage", () => ({
+  useStorageModel: () => mockModel,
 }));
 
 const mockDevices = [sda, sdb];
-
-jest.mock("~/queries/storage", () => ({
-  ...jest.requireActual("~/queries/storage"),
-  useDevices: () => mockDevices,
-}));
-
 let mockAvailableDevices = [sda, sdb];
+let mockSystemErrors: storage.Issue[] = [];
 
-jest.mock("~/hooks/storage/system", () => ({
-  ...jest.requireActual("~/hooks/storage/system"),
+jest.mock("~/hooks/api/system/storage", () => ({
+  useDevices: () => mockDevices,
   useAvailableDevices: () => mockAvailableDevices,
-}));
-
-let mockSystemErrors = [];
-
-jest.mock("~/queries/issues", () => ({
-  ...jest.requireActual("~/queries/issues"),
-  useSystemErrors: () => mockSystemErrors,
+  useIssues: () => mockSystemErrors,
 }));
 
 beforeEach(() => {
@@ -247,11 +235,8 @@ describe("when there is no configuration model (unsupported features)", () => {
       mockSystemErrors = [
         {
           description: "System error",
-          kind: "storage",
+          class: "storage",
           details: "",
-          source: IssueSource.System,
-          severity: IssueSeverity.Error,
-          scope: "storage",
         },
       ];
     });

web/src/components/questions/LuksActivationQuestion.test.tsx

@@ -27,7 +27,7 @@ import { AnswerCallback, Question, FieldType } from "~/api/question";
 import { InstallationPhase } from "~/types/status";
 import { Product } from "~/types/software";
 import LuksActivationQuestion from "~/components/questions/LuksActivationQuestion";
-import { Locale, Keymap } from "~/api/system";
+import type { Locale, Keymap } from "~/api/system/l10n";
 
 let question: Question;
 const questionMock: Question = {
@@ -51,12 +51,12 @@ const tumbleweed: Product = {
 };
 
 const locales: Locale[] = [
-  { id: "en_US.UTF-8", name: "English", territory: "United States" },
-  { id: "es_ES.UTF-8", name: "Spanish", territory: "Spain" },
+  { id: "en_US.UTF-8", language: "English", territory: "United States" },
+  { id: "es_ES.UTF-8", language: "Spanish", territory: "Spain" },
 ];
 const keymaps: Keymap[] = [
-  { id: "us", name: "English" },
-  { id: "es", name: "Spanish" },
+  { id: "us", description: "English" },
+  { id: "es", description: "Spanish" },
 ];
 
 jest.mock("~/queries/system", () => ({

web/src/components/questions/QuestionWithPassword.test.tsx

@@ -27,7 +27,7 @@ import { Question, FieldType } from "~/api/question";
 import { Product } from "~/types/software";
 import { InstallationPhase } from "~/types/status";
 import QuestionWithPassword from "~/components/questions/QuestionWithPassword";
-import { Locale, Keymap } from "~/api/system";
+import type { Locale, Keymap } from "~/api/system/l10n";
 
 const answerFn = jest.fn();
 const question: Question = {
@@ -51,13 +51,13 @@ const tumbleweed: Product = {
 };
 
 const locales: Locale[] = [
-  { id: "en_US.UTF-8", name: "English", territory: "United States" },
-  { id: "es_ES.UTF-8", name: "Spanish", territory: "Spain" },
+  { id: "en_US.UTF-8", language: "English", territory: "United States" },
+  { id: "es_ES.UTF-8", language: "Spanish", territory: "Spain" },
 ];
 
 const keymaps: Keymap[] = [
-  { id: "us", name: "English" },
-  { id: "es", name: "Spanish" },
+  { id: "us", description: "English" },
+  { id: "es", description: "Spanish" },
 ];
 
 jest.mock("~/queries/status", () => ({