feat(images): moved GenericTable.tsx and subcomponents to base/compon…

…ents, fixed th-td alignment for SMImagesTable.tsx

src/app/images/components/GenericTable/GenericTable.tsx → src/app/base/components/GenericTable/GenericTable.tsx

@@ -140,7 +140,7 @@ const GenericTable = <T,>({
         ))}
       </thead>
       {table.getRowModel().rows.length < 1 ? (
-        <div data-testid="no-data">{noData}</div>
+        noData
       ) : (
         <DynamicTable.Body>
           {table.getRowModel().rows.map((row) => {

src/app/images/components/GenericTable/TableCheckbox/TableCheckbox.test.tsx → src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.test.tsx

@@ -2,7 +2,8 @@ import type { Row } from "@tanstack/react-table";
 import type { Mock } from "vitest";
 import { describe } from "vitest";
 
-import TableCheckbox from "@/app/images/components/GenericTable/TableCheckbox/TableCheckbox";
+import TableCheckbox from "./TableCheckbox";
+
 import type { Image } from "@/app/images/types";
 import * as factory from "@/testing/factories";
 import { render, userEvent, screen } from "@/testing/utils";

src/app/base/components/GenericTable/_index.scss

@@ -0,0 +1,11 @@
+.generic-table {
+  table-layout: auto;
+  th:not(th:nth-of-type(1), th:nth-of-type(2), th:last-of-type) {
+    padding-left: 1.5rem;
+  }
+
+  .individual-row {
+    width: calc(100% - 1rem);
+    margin-left: 1rem;
+  }
+}

src/app/images/components/SMImagesTable/SMImagesTable.tsx

@@ -10,15 +10,17 @@ import useImageTableColumns, {
   filterHeaders,
 } from "./useImageTableColumns/useImageTableColumns";
 
+import GenericTable from "@/app/base/components/GenericTable";
 import { useSidePanel } from "@/app/base/side-panel-context";
-import GenericTable from "@/app/images/components/GenericTable";
 import { ImageSidePanelViews } from "@/app/images/constants";
 import type { Image } from "@/app/images/types";
 import bootResourceSelectors from "@/app/store/bootresource/selectors";
 import type { BootResource } from "@/app/store/bootresource/types";
 import { splitResourceName } from "@/app/store/bootresource/utils";
 import configSelectors from "@/app/store/config/selectors";
 
+import "./_index.scss";
+
 const getImages = (resources: BootResource[]): Image[] => {
   return resources.map((resource) => {
     const { os } = splitResourceName(resource.name);

src/app/images/components/SMImagesTable/_index.scss

@@ -0,0 +1,5 @@
+.generic-table {
+  .status {
+    width: 13rem;
+  }
+}

src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx

@@ -46,8 +46,8 @@ it("returns the correct number of columns", () => {
     "release",
     "architecture",
     "size",
-    "status",
     "canDeployToMemory",
+    "status",
     "action",
   ]);
 });

src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx

@@ -11,10 +11,10 @@ import type {
 import pluralize from "pluralize";
 
 import DoubleRow from "@/app/base/components/DoubleRow";
+import GroupRowActions from "@/app/base/components/GenericTable/GroupRowActions";
+import TableCheckbox from "@/app/base/components/GenericTable/TableCheckbox";
 import TableActions from "@/app/base/components/TableActions";
 import TooltipButton from "@/app/base/components/TooltipButton";
-import GroupRowActions from "@/app/images/components/GenericTable/GroupRowActions";
-import TableCheckbox from "@/app/images/components/GenericTable/TableCheckbox";
 import type { Image } from "@/app/images/types";
 
 export type ImageColumnDef = ColumnDef<Image, Partial<Image>>;
@@ -101,6 +101,30 @@ const useImageTableColumns = ({
           enableSorting: false,
           header: () => "Size",
         },
+        {
+          id: "canDeployToMemory",
+          accessorKey: "canDeployToMemory",
+          enableSorting: false,
+          header: () => "Deployable",
+          cell: ({
+            getValue,
+          }: {
+            getValue: Getter<Image["canDeployToMemory"]>;
+          }) =>
+            getValue() ? (
+              <TooltipButton
+                iconName="task-outstanding"
+                iconProps={{ "aria-label": "supported" }}
+                message="This image can be deployed in memory."
+              />
+            ) : (
+              <TooltipButton
+                iconName="close"
+                iconProps={{ "aria-label": "not supported" }}
+                message="This image cannot be deployed in memory."
+              />
+            ),
+        },
         {
           id: "status",
           accessorKey: "status",
@@ -126,30 +150,6 @@ const useImageTableColumns = ({
             );
           },
         },
-        {
-          id: "canDeployToMemory",
-          accessorKey: "canDeployToMemory",
-          enableSorting: false,
-          header: () => "Deployable",
-          cell: ({
-            getValue,
-          }: {
-            getValue: Getter<Image["canDeployToMemory"]>;
-          }) =>
-            getValue() ? (
-              <TooltipButton
-                iconName="task-outstanding"
-                iconProps={{ "aria-label": "supported" }}
-                message="This image can be deployed in memory."
-              />
-            ) : (
-              <TooltipButton
-                iconName="close"
-                iconProps={{ "aria-label": "not supported" }}
-                message="This image cannot be deployed in memory."
-              />
-            ),
-        },
         {
           id: "action",
           accessorKey: "id",