diff --git a/frontend/app/dashboard/assets/components/AssetTable.test.tsx b/frontend/app/dashboard/assets/components/AssetTable.test.tsx
index 381493a..45e0c39 100644
--- a/frontend/app/dashboard/assets/components/AssetTable.test.tsx
+++ b/frontend/app/dashboard/assets/components/AssetTable.test.tsx
@@ -1,29 +1,35 @@
import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
import AssetTable from "./AssetTable";
-import { MOCK_ASSETS, DigitalAsset } from "@/services/assetsMock";
-
-const mockAssets: DigitalAsset[] = [
- ...MOCK_ASSETS,
- { id: 'asset-9', name: 'Zebra Stripes', type: 'Image', owner: 'user-1', contentHash: 'hash9', kmsEncryptionStatus: 'encrypted', status: 'verified', sizeBytes: 1024, verifiedAt: '2023-01-09' },
- { id: 'asset-10', name: 'Apple Logo', type: 'Image', owner: 'user-1', contentHash: 'hash10', kmsEncryptionStatus: 'encrypted', status: 'verified', sizeBytes: 2048, verifiedAt: '2023-01-10' },
- { id: 'asset-11', name: 'Google Banner', type: 'Image', owner: 'user-1', contentHash: 'hash11', kmsEncryptionStatus: 'encrypted', status: 'verified', sizeBytes: 4096, verifiedAt: '2023-01-11' },
- { id: 'asset-12', name: 'Microsoft Word Doc', type: 'Document', owner: 'user-1', contentHash: 'hash12', kmsEncryptionStatus: 'unencrypted', status: 'pending', sizeBytes: 8192, verifiedAt: '2023-01-12' },
-];
+import { MOCK_ASSETS } from "@/services/assetsMock";
describe("AssetTable", () => {
it("renders a header for every column", () => {
- render(
);
- ["Asset", "Type", "Owner", "Content Hash", "KMS Encryption", "Verified At", "Status", "Size"].forEach((heading) => {
- const header = screen.getByText(heading);
- expect(header).toBeInTheDocument();
- expect(header.tagName).toBe('TH');
+ render(
);
+
+ [
+ "Asset",
+ "Type",
+ "Owner",
+ "Content Hash",
+ "KMS Encryption",
+ "Verified At",
+ "Status",
+ "Size",
+ ].forEach((heading) => {
+ expect(
+ screen.getByRole("columnheader", { name: heading })
+ ).toBeInTheDocument();
});
});
- it("renders a row for every asset on the first page", () => {
- render(
);
- expect(screen.getAllByRole("row")).toHaveLength(11); // 1 header + 10 rows
+ it("renders a row for every asset with its KMS status and verification info", () => {
+ render(
);
+
+ expect(screen.getAllByRole("row")).toHaveLength(MOCK_ASSETS.length + 1);
+ expect(screen.getByText("Limited Edition Digital Artwork")).toBeInTheDocument();
+ expect(screen.getAllByText(/encrypted/i).length).toBeGreaterThan(0);
+ expect(screen.getByText(/unencrypted/i)).toBeInTheDocument();
});
it("renders a loading skeleton", () => {
@@ -35,45 +41,4 @@ describe("AssetTable", () => {
render(
);
expect(screen.getByText(/no assets found/i)).toBeInTheDocument();
});
-
- it("sorts by asset name when header is clicked", () => {
- render(
);
- const assetHeader = screen.getByText("Asset");
-
- // Initial render (unsorted)
- let rows = screen.getAllByRole("row");
- expect(rows[1]).toHaveTextContent(mockAssets[0].name);
-
- // Sort ascending
- fireEvent.click(assetHeader);
- rows = screen.getAllByRole("row");
- expect(rows[1]).toHaveTextContent("Apple Logo");
-
- // Sort descending
- fireEvent.click(assetHeader);
- rows = screen.getAllByRole("row");
- expect(rows[1]).toHaveTextContent("Zebra Stripes");
- });
-
- it("paginates through the assets", () => {
- render(
);
-
- // Check initial page
- expect(screen.getByText("Page 1 of 2")).toBeInTheDocument();
- expect(screen.getByText(mockAssets[0].name)).toBeInTheDocument();
- expect(screen.queryByText(mockAssets[10].name)).not.toBeInTheDocument();
- expect(screen.getByText("Previous")).toBeDisabled();
-
- // Go to next page
- fireEvent.click(screen.getByText("Next"));
- expect(screen.getByText("Page 2 of 2")).toBeInTheDocument();
- expect(screen.queryByText(mockAssets[0].name)).not.toBeInTheDocument();
- expect(screen.getByText(mockAssets[10].name)).toBeInTheDocument();
- expect(screen.getByText("Next")).toBeDisabled();
-
- // Go back to previous page
- fireEvent.click(screen.getByText("Previous"));
- expect(screen.getByText("Page 1 of 2")).toBeInTheDocument();
- expect(screen.getByText(mockAssets[0].name)).toBeInTheDocument();
- });
});
diff --git a/frontend/app/dashboard/assets/components/AssetTable.tsx b/frontend/app/dashboard/assets/components/AssetTable.tsx
index aef519d..1798fd6 100644
--- a/frontend/app/dashboard/assets/components/AssetTable.tsx
+++ b/frontend/app/dashboard/assets/components/AssetTable.tsx
@@ -1,7 +1,7 @@
"use client";
-import React, { useState, useMemo } from "react";
-import { ShieldCheck, ShieldAlert, ShieldOff, ChevronUp, ChevronDown, ArrowUpDown } from "lucide-react";
+import React from "react";
+import { ShieldCheck, ShieldAlert, ShieldOff } from "lucide-react";
import { cn } from "@/utils/cn";
import { TableSkeleton } from "@/components/ui/Skeleton";
import type {
@@ -16,23 +16,15 @@ export interface AssetTableProps {
className?: string;
}
-type SortableColumn = "name" | "type" | "status" | "sizeBytes";
-type SortDirection = "asc" | "dsc";
-
-interface SortConfig {
- key: SortableColumn;
- direction: SortDirection;
-}
-
-const COLUMNS: { key: SortableColumn | string; label: string; sortable: boolean }[] = [
- { key: "name", label: "Asset", sortable: true },
- { key: "type", label: "Type", sortable: true },
- { key: "owner", label: "Owner", sortable: false },
- { key: "contentHash", label: "Content Hash", sortable: false },
- { key: "kmsEncryptionStatus", label: "KMS Encryption", sortable: false },
- { key: "verifiedAt", label: "Verified At", sortable: false },
- { key: "status", label: "Status", sortable: true },
- { key: "sizeBytes", label: "Size", sortable: true },
+const COLUMNS = [
+ "Asset",
+ "Type",
+ "Owner",
+ "Content Hash",
+ "KMS Encryption",
+ "Verified At",
+ "Status",
+ "Size",
];
const STATUS_STYLES: Record
= {
@@ -145,51 +137,6 @@ export default function AssetTable({
isLoading = false,
className,
}: AssetTableProps) {
- const [sortConfig, setSortConfig] = useState(null);
- const [currentPage, setCurrentPage] = useState(1);
- const itemsPerPage = 10;
-
- const sortedAssets = useMemo(() => {
- let sortableItems = [...assets];
- if (sortConfig !== null) {
- sortableItems.sort((a, b) => {
- if (a[sortConfig.key] < b[sortConfig.key]) {
- return sortConfig.direction === "asc" ? -1 : 1;
- }
- if (a[sortConfig.key] > b[sortConfig.key]) {
- return sortConfig.direction === "asc" ? 1 : -1;
- }
- return 0;
- });
- }
- return sortableItems;
- }, [assets, sortConfig]);
-
- const paginatedAssets = useMemo(() => {
- const startIndex = (currentPage - 1) * itemsPerPage;
- return sortedAssets.slice(startIndex, startIndex + itemsPerPage);
- }, [sortedAssets, currentPage, itemsPerPage]);
-
- const totalPages = Math.ceil(sortedAssets.length / itemsPerPage);
-
- const requestSort = (key: SortableColumn) => {
- let direction: SortDirection = "asc";
- if (sortConfig && sortConfig.key === key && sortConfig.direction === "asc") {
- direction = "dsc";
- }
- setSortConfig({ key, direction });
- };
-
- const SortIcon = ({ columnKey }: { columnKey: SortableColumn | string }) => {
- if (!sortConfig || sortConfig.key !== columnKey) {
- return ;
- }
- if (sortConfig.direction === 'asc') {
- return ;
- }
- return ;
- };
-
return (
) : (
- <>
-
-
-
-
- {COLUMNS.map((column) => (
- |
- {column.sortable ? (
-
- ) : (
- column.label
- )}
- |
- ))}
-
-
-
- {paginatedAssets.map((asset) => (
-
+
+
+
+
+ {COLUMNS.map((heading) => (
+ |
+ {heading}
+ |
))}
-
-
-
-
-
- Page {currentPage} of {totalPages}
-
-
-
- )}
-
+
+
+
+ {assets.map((asset) => (
+
+ ))}
+
+
+