fix: add table empty state for all tables on MAAS-UI (#5189)

src/app/base/components/DHCPTable/DHCPTable.test.tsx

@@ -3,7 +3,7 @@ import { MemoryRouter } from "react-router-dom";
 import { CompatRouter } from "react-router-dom-v5-compat";
 import configureStore from "redux-mock-store";
 
-import DHCPTable, { Labels, TestIds } from "./DHCPTable";
+import DHCPTable, { TestIds } from "./DHCPTable";
 
 import { Labels as FormLabels } from "app/base/components/DhcpForm";
 import { MachineMeta } from "app/store/machine/types";
@@ -69,9 +69,7 @@ describe("DHCPTable", () => {
       </Provider>
     );
 
-    expect(
-      screen.getByRole("alert", { name: Labels.LoadingData })
-    ).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
   it("shows snippets for a machine", () => {

src/app/base/components/DHCPTable/DHCPTable.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { List, MainTable, Spinner } from "@canonical/react-components";
+import { List, MainTable } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom-v5-compat";
 
@@ -21,7 +21,7 @@ import { getIpRangeDisplayName } from "app/store/iprange/utils";
 import type { RootState } from "app/store/root/types";
 import type { Subnet } from "app/store/subnet/types";
 import type { Node } from "app/store/types/node";
-import { isId } from "app/utils";
+import { generateEmptyStateMsg, getTableStatus, isId } from "app/utils";
 
 type BaseProps = {
   className?: string;
@@ -149,6 +149,7 @@ const DHCPTable = ({
   );
 
   useFetchActions([dhcpsnippetActions.fetch]);
+  const tableStatus = getTableStatus({ isLoading: dhcpsnippetLoading });
 
   return (
     <TitledSection className={className} title={Labels.SectionTitle}>
@@ -158,13 +159,9 @@ const DHCPTable = ({
             className="dhcp-snippets-table p-table-expanding--light"
             defaultSort="name"
             defaultSortDirection="descending"
-            emptyStateMsg={
-              dhcpsnippetLoading ? (
-                <Spinner aria-label={Labels.LoadingData} text="Loading..." />
-              ) : (
-                `No DHCP snippets applied to this ${modelName}.`
-              )
-            }
+            emptyStateMsg={generateEmptyStateMsg(tableStatus, {
+              default: `No DHCP snippets applied to this ${modelName}.`,
+            })}
             expanding
             headers={[
               {

src/app/base/components/SSHKeyList/SSHKeyList.test.tsx

@@ -191,4 +191,15 @@ describe("SSHKeyList", () => {
     );
     expect(actions.some((action) => action.type === "message/add")).toBe(true);
   });
+
+  it("displays a message if there are no SSH keys", () => {
+    state.sshkey.items = [];
+    const store = mockStore(state);
+    renderWithBrowserRouter(<SSHKeyList />, {
+      route: "/account/prefs/ssh-keys",
+      store,
+    });
+
+    expect(screen.getByText("No SSH keys available.")).toBeInTheDocument();
+  });
 });

src/app/base/components/SSHKeyList/SSHKeyList.tsx

@@ -182,6 +182,7 @@ const SSHKeyList = ({ sidebar = true, ...tableProps }: Props): JSX.Element => {
       )}
       <SettingsTable
         aria-label="SSH keys"
+        emptyStateMsg="No SSH keys available."
         headers={[
           {
             content: "Source",

src/app/base/components/node/NodeLogs/EventLogs/EventLogsTable/EventLogsTable.test.tsx

@@ -33,4 +33,12 @@ describe("EventLogsTable", () => {
     });
     expect(screen.getByLabelText(Label.Title)).toBeInTheDocument();
   });
+
+  it("displays a message if there is no data", () => {
+    renderWithMockStore(<EventLogsTable events={[]} />, {
+      state,
+    });
+
+    expect(screen.getByText("No event logs available.")).toBeInTheDocument();
+  });
 });

src/app/base/components/node/NodeLogs/EventLogs/EventLogsTable/EventLogsTable.tsx

@@ -60,6 +60,7 @@ const EventLogsTable = ({ events }: Props): JSX.Element => {
     <MainTable
       aria-label={Label.Title}
       className="event-logs-table"
+      emptyStateMsg="No event logs available."
       headers={[
         {
           content: "Time",

src/app/base/components/node/NodeTestsTable/NodeTestsTable.test.tsx

@@ -263,4 +263,13 @@ describe("NodeTestsTable", () => {
       "Unsuppress",
     ]);
   });
+
+  it("displays a message when there is no script result", () => {
+    renderWithBrowserRouter(
+      <NodeTestsTable node={machine} scriptResults={[]} />,
+      { route: "/machine/abc123", state }
+    );
+
+    expect(screen.getByText("No results available.")).toBeInTheDocument();
+  });
 });

src/app/base/components/node/NodeTestsTable/NodeTestsTable.tsx

@@ -176,6 +176,7 @@ const NodeTestsTable = ({ node, scriptResults }: Props): JSX.Element => {
       <MainTable
         aria-label="Test results"
         className="node-tests-table p-table-expanding--light"
+        emptyStateMsg="No results available."
         expanding
         headers={[
           ...(showSuppressCol

src/app/base/components/node/StorageTables/CacheSetsTable/CacheSetsTable.tsx

@@ -115,6 +115,7 @@ const CacheSetsTable = ({ canEditStorage, node }: Props): JSX.Element => {
   return (
     <MainTable
       className="p-table-expanding--light"
+      emptyStateMsg="No cache set available."
       expanding
       headers={isMachine ? headers : headers.slice(0, -1)}
       responsive

src/app/base/components/node/networking/NetworkTable/NetworkTable.test.tsx

@@ -136,6 +136,26 @@ describe("NetworkTable", () => {
     expect(within(ipPrimary).getByText("1.2.3.99")).toBeInTheDocument();
   });
 
+  it("displays a message when empty", () => {
+    state.subnet.items = [];
+    state.fabric.items = [];
+    state.vlan.items = [];
+    state.machine.items = [machine];
+
+    renderWithBrowserRouter(
+      <NetworkTable
+        expanded={null}
+        node={machine}
+        selected={[]}
+        setExpanded={jest.fn()}
+        setSelected={jest.fn()}
+      />,
+      { state }
+    );
+
+    expect(screen.getByText(Label.EmptyList)).toBeInTheDocument();
+  });
+
   it("can display an interface that is an alias", () => {
     const fabric = fabricFactory({ name: "fabric-name" });
     state.fabric.items = [fabric];

src/app/base/components/node/networking/NetworkTable/NetworkTable.tsx

@@ -64,6 +64,7 @@ export enum Label {
   Actions = "Actions",
   ActionsMenu = "Interface actions",
   DHCP = "DHCP",
+  EmptyList = "No interfaces availaable",
   Fabric = "Fabric",
   IP = "IP Address",
   MAC = "MAC",
@@ -494,6 +495,7 @@ const NetworkTable = ({
       })}
       defaultSort="name"
       defaultSortDirection="descending"
+      emptyStateMsg={Label.EmptyList}
       expanding
       headers={[
         {

src/app/controllers/views/ControllerList/ControllerListTable/ControllerListTable.test.tsx

@@ -1,4 +1,4 @@
-import ControllerListTable from "./ControllerListTable";
+import ControllerListTable, { Label } from "./ControllerListTable";
 
 import urls from "app/base/urls";
 import type { Controller } from "app/store/controller/types";
@@ -378,4 +378,17 @@ describe("ControllerListTable", () => {
       ).not.toBeInTheDocument();
     });
   });
+
+  it("displays message for empty state", () => {
+    renderWithBrowserRouter(
+      <ControllerListTable
+        controllers={[]}
+        onSelectedChange={jest.fn()}
+        selectedIDs={[]}
+      />,
+      { state }
+    );
+
+    expect(screen.getByText(Label.EmptyList)).toBeInTheDocument();
+  });
 });

src/app/controllers/views/ControllerList/ControllerListTable/ControllerListTable.tsx

@@ -1,4 +1,4 @@
-import { MainTable, Spinner, Link } from "@canonical/react-components";
+import { MainTable, Link } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
 import StatusColumn from "./StatusColumn";
@@ -22,7 +22,12 @@ import { actions as generalActions } from "app/store/general";
 import { vaultEnabled as vaultEnabledSelectors } from "app/store/general/selectors";
 import type { RootState } from "app/store/root/types";
 import { NodeType } from "app/store/types/node";
-import { generateCheckboxHandlers, isComparable } from "app/utils";
+import {
+  generateEmptyStateMsg,
+  generateCheckboxHandlers,
+  isComparable,
+  getTableStatus,
+} from "app/utils";
 import type { CheckboxHandlers } from "app/utils/generateCheckboxHandlers";
 
 type Props = {
@@ -35,6 +40,11 @@ type Props = {
 
 type SortKey = keyof Controller | "version";
 
+export enum Label {
+  NoResults = "No controllers match the search criteria.",
+  EmptyList = "No controllers available.",
+}
+
 const getSortValue = (sortKey: SortKey, controller: Controller) => {
   switch (sortKey) {
     case "version":
@@ -233,18 +243,16 @@ const ControllerListTable = ({
   const vaultEnabled = useSelector(vaultEnabledSelectors.get);
 
   useFetchActions([generalActions.fetchVaultEnabled, controllerActions.fetch]);
+  const tableStatus = getTableStatus({ isLoading: loading, hasFilter });
 
   return (
     <MainTable
       aria-label="controllers list"
       className="controller-list-table"
-      emptyStateMsg={
-        loading ? (
-          <Spinner text="Loading..." />
-        ) : hasFilter ? (
-          "No controllers match the search criteria."
-        ) : null
-      }
+      emptyStateMsg={generateEmptyStateMsg(tableStatus, {
+        default: Label.EmptyList,
+        filtered: Label.NoResults,
+      })}
       headers={[
         {
           className: "fqdn-col",

src/app/dashboard/views/DiscoveriesList/DiscoveriesList.tsx

@@ -6,7 +6,6 @@ import {
   ContextualMenu,
   MainTable,
   Row,
-  Spinner,
 } from "@canonical/react-components";
 import classNames from "classnames";
 import { useSelector, useDispatch } from "react-redux";
@@ -27,13 +26,16 @@ import discoverySelectors from "app/store/discovery/selectors";
 import type { Discovery } from "app/store/discovery/types";
 import { DiscoveryMeta } from "app/store/discovery/types";
 import type { RootState } from "app/store/root/types";
+import { generateEmptyStateMsg, getTableStatus } from "app/utils";
 
 export enum Labels {
   DiscoveriesList = "Discoveries list",
   Loading = "Loading...",
   NoNewDiscoveries = "No new discoveries.",
   AddDiscovery = "Add discovery...",
   DeleteDiscovery = "Delete discovery...",
+  NoResults = "No discoveries match the search criteria.",
+  EmptyList = "No discoveries available.",
 }
 
 enum ExpandedType {
@@ -225,6 +227,11 @@ const DiscoveriesList = (): JSX.Element => {
     },
   ];
 
+  const tableStatus = getTableStatus({
+    isLoading: loading,
+    hasFilter: !!searchString,
+  });
+
   return (
     <div aria-label={Labels.DiscoveriesList}>
       <Row>
@@ -248,13 +255,10 @@ const DiscoveriesList = (): JSX.Element => {
         data-testid="discoveries-table"
         defaultSort="lastSeen"
         defaultSortDirection="ascending"
-        emptyStateMsg={
-          loading ? (
-            <Spinner text="Loading..." />
-          ) : (
-            "No discoveries match the search criteria."
-          )
-        }
+        emptyStateMsg={generateEmptyStateMsg(tableStatus, {
+          default: Labels.EmptyList,
+          filtered: Labels.NoResults,
+        })}
         expanding
         headers={headers}
         rows={generateRows(

src/app/devices/views/DeviceDetails/DeviceNetwork/DeviceNetworkTable/DeviceNetworkTable.test.tsx

@@ -204,4 +204,23 @@ describe("DeviceNetworkTable", () => {
     const rows = screen.getAllByRole("row");
     expect(rows[1]).toHaveClass("is-active");
   });
+
+  it("displays an empty table description", () => {
+    state.device.items = [
+      deviceDetailsFactory({
+        interfaces: [],
+        system_id: "abc123",
+      }),
+    ];
+    const store = mockStore(state);
+    renderWithBrowserRouter(
+      <DeviceNetworkTable
+        expanded={null}
+        setExpanded={jest.fn()}
+        systemId="abc123"
+      />,
+      { store }
+    );
+    expect(screen.getByText("No interfaces available.")).toBeInTheDocument();
+  });
 });

src/app/devices/views/DeviceDetails/DeviceNetwork/DeviceNetworkTable/DeviceNetworkTable.tsx

@@ -269,6 +269,7 @@ const DeviceNetworkTable = ({
       className="p-table-expanding--light device-network-table"
       defaultSort="name"
       defaultSortDirection="descending"
+      emptyStateMsg="No interfaces available."
       expanding
       headers={[
         {

src/app/devices/views/DeviceList/DeviceListTable/DeviceListTable.test.tsx

@@ -1,4 +1,4 @@
-import DeviceListTable from "./DeviceListTable";
+import DeviceListTable, { Labels } from "./DeviceListTable";
 
 import urls from "app/base/urls";
 import type { Device } from "app/store/device/types";
@@ -294,4 +294,18 @@ describe("DeviceListTable", () => {
       expect(onSelectedChange).toHaveBeenCalledWith([]);
     });
   });
+
+  it("displays a message when empty", () => {
+    const onSelectedChange = jest.fn();
+    renderWithBrowserRouter(
+      <DeviceListTable
+        devices={[]}
+        onSelectedChange={onSelectedChange}
+        selectedIDs={[]}
+      />,
+      { state }
+    );
+
+    expect(screen.getByText(Labels.EmptyList)).toBeInTheDocument();
+  });
 });