diff --git a/src/app/images/components/GenericTable/GenericTable.test.tsx b/src/app/base/components/GenericTable/GenericTable.test.tsx similarity index 100% rename from src/app/images/components/GenericTable/GenericTable.test.tsx rename to src/app/base/components/GenericTable/GenericTable.test.tsx diff --git a/src/app/images/components/GenericTable/GenericTable.tsx b/src/app/base/components/GenericTable/GenericTable.tsx similarity index 99% rename from src/app/images/components/GenericTable/GenericTable.tsx rename to src/app/base/components/GenericTable/GenericTable.tsx index 091c0e3bd9..31182b802f 100644 --- a/src/app/images/components/GenericTable/GenericTable.tsx +++ b/src/app/base/components/GenericTable/GenericTable.tsx @@ -140,7 +140,7 @@ const GenericTable = ({ ))} {table.getRowModel().rows.length < 1 ? ( -
{noData}
+ noData ) : ( {table.getRowModel().rows.map((row) => { diff --git a/src/app/images/components/GenericTable/GroupRowActions/GroupRowActions.test.tsx b/src/app/base/components/GenericTable/GroupRowActions/GroupRowActions.test.tsx similarity index 100% rename from src/app/images/components/GenericTable/GroupRowActions/GroupRowActions.test.tsx rename to src/app/base/components/GenericTable/GroupRowActions/GroupRowActions.test.tsx diff --git a/src/app/images/components/GenericTable/GroupRowActions/GroupRowActions.tsx b/src/app/base/components/GenericTable/GroupRowActions/GroupRowActions.tsx similarity index 100% rename from src/app/images/components/GenericTable/GroupRowActions/GroupRowActions.tsx rename to src/app/base/components/GenericTable/GroupRowActions/GroupRowActions.tsx diff --git a/src/app/images/components/GenericTable/GroupRowActions/index.ts b/src/app/base/components/GenericTable/GroupRowActions/index.ts similarity index 100% rename from src/app/images/components/GenericTable/GroupRowActions/index.ts rename to src/app/base/components/GenericTable/GroupRowActions/index.ts diff --git a/src/app/images/components/GenericTable/SortingIndicator/SortingIndicator.tsx b/src/app/base/components/GenericTable/SortingIndicator/SortingIndicator.tsx similarity index 100% rename from src/app/images/components/GenericTable/SortingIndicator/SortingIndicator.tsx rename to src/app/base/components/GenericTable/SortingIndicator/SortingIndicator.tsx diff --git a/src/app/images/components/GenericTable/SortingIndicator/index.ts b/src/app/base/components/GenericTable/SortingIndicator/index.ts similarity index 100% rename from src/app/images/components/GenericTable/SortingIndicator/index.ts rename to src/app/base/components/GenericTable/SortingIndicator/index.ts diff --git a/src/app/images/components/GenericTable/TableCheckbox/TableCheckbox.test.tsx b/src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.test.tsx similarity index 98% rename from src/app/images/components/GenericTable/TableCheckbox/TableCheckbox.test.tsx rename to src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.test.tsx index e3ad01cc77..afd7c10f29 100644 --- a/src/app/images/components/GenericTable/TableCheckbox/TableCheckbox.test.tsx +++ b/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"; diff --git a/src/app/images/components/GenericTable/TableCheckbox/TableCheckbox.tsx b/src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.tsx similarity index 100% rename from src/app/images/components/GenericTable/TableCheckbox/TableCheckbox.tsx rename to src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.tsx diff --git a/src/app/images/components/GenericTable/TableCheckbox/index.ts b/src/app/base/components/GenericTable/TableCheckbox/index.ts similarity index 100% rename from src/app/images/components/GenericTable/TableCheckbox/index.ts rename to src/app/base/components/GenericTable/TableCheckbox/index.ts diff --git a/src/app/base/components/GenericTable/_index.scss b/src/app/base/components/GenericTable/_index.scss new file mode 100644 index 0000000000..b183c4d39d --- /dev/null +++ b/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; + } +} diff --git a/src/app/images/components/GenericTable/index.ts b/src/app/base/components/GenericTable/index.ts similarity index 100% rename from src/app/images/components/GenericTable/index.ts rename to src/app/base/components/GenericTable/index.ts diff --git a/src/app/images/components/GenericTable/_index.scss b/src/app/images/components/GenericTable/_index.scss deleted file mode 100644 index 493fd9ec3b..0000000000 --- a/src/app/images/components/GenericTable/_index.scss +++ /dev/null @@ -1,22 +0,0 @@ -.generic-table { - th.release { - width: 12rem; - } - - td.release { - width: 11rem; - } - - .architecture, .size { - width: 9rem; - } - - .status { - width: 17rem; - } - - .individual-row { - width: calc(100% - 1rem); - margin-left: 1rem; - } -} diff --git a/src/app/images/components/SMImagesTable/SMImagesTable.tsx b/src/app/images/components/SMImagesTable/SMImagesTable.tsx index 5628f81b2e..9600b27f19 100644 --- a/src/app/images/components/SMImagesTable/SMImagesTable.tsx +++ b/src/app/images/components/SMImagesTable/SMImagesTable.tsx @@ -10,8 +10,8 @@ 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"; @@ -19,6 +19,8 @@ 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); diff --git a/src/app/images/components/SMImagesTable/_index.scss b/src/app/images/components/SMImagesTable/_index.scss new file mode 100644 index 0000000000..d1afe6b447 --- /dev/null +++ b/src/app/images/components/SMImagesTable/_index.scss @@ -0,0 +1,5 @@ +.generic-table { + .status { + width: 13rem; + } +} \ No newline at end of file diff --git a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx b/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx index 529274a641..06385e462f 100644 --- a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx +++ b/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", ]); }); diff --git a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx b/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx index ad50b3ec12..c09cbb6d59 100644 --- a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx +++ b/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>; @@ -101,6 +101,30 @@ const useImageTableColumns = ({ enableSorting: false, header: () => "Size", }, + { + id: "canDeployToMemory", + accessorKey: "canDeployToMemory", + enableSorting: false, + header: () => "Deployable", + cell: ({ + getValue, + }: { + getValue: Getter; + }) => + getValue() ? ( + + ) : ( + + ), + }, { id: "status", accessorKey: "status", @@ -126,30 +150,6 @@ const useImageTableColumns = ({ ); }, }, - { - id: "canDeployToMemory", - accessorKey: "canDeployToMemory", - enableSorting: false, - header: () => "Deployable", - cell: ({ - getValue, - }: { - getValue: Getter; - }) => - getValue() ? ( - - ) : ( - - ), - }, { id: "action", accessorKey: "id",