[VW-128] Api Key Connector Table Views

src/app/(dashboard)/(rest)/connectors/[resourceTypeUrl]/items/page.tsx

@@ -0,0 +1,100 @@
+import { notFound } from "next/navigation";
+import type React from "react";
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import {
+  AssetsError,
+  AssetsList,
+  AssetsLoading,
+} from "@/features/assets/components/assets";
+import { prefetchAssets } from "@/features/assets/server/prefetch";
+import {
+  DeviceArtifactsDataList,
+  DeviceArtifactsError,
+} from "@/features/device-artifacts/components/device-artifacts";
+import { prefetchDeviceArtifacts } from "@/features/device-artifacts/server/prefetch";
+import { paginationParamsLoader } from "@/features/integrations/server/params-loader";
+import {
+  integrationsMapping,
+  isValidResourceTypeKey,
+} from "@/features/integrations/types";
+import {
+  RemediationsDataList,
+  RemediationsError,
+  RemediationsLoading,
+} from "@/features/remediations/components/remediations";
+import { prefetchRemediations } from "@/features/remediations/server/prefetch";
+import {
+  VulnerabilitiesError,
+  VulnerabilitiesList,
+  VulnerabilitiesLoading,
+} from "@/features/vulnerabilities/components/vulnerabilities";
+import { prefetchVulnerabilities } from "@/features/vulnerabilities/server/prefetch";
+import { ResourceType } from "@/generated/prisma";
+import { requireAuth } from "@/lib/auth-utils";
+import type { CombinedPageProps } from "@/lib/page-types";
+import type { PaginationInput } from "@/lib/pagination";
+import { HydrateClient } from "@/trpc/server";
+
+interface ConnectorResourceTypeConfig {
+  errorElement: () => React.ReactNode;
+  listElement: React.FC;
+  loadingElement: () => React.ReactNode;
+  prefetch: (params: PaginationInput) => void;
+}
+
+const LIST_MAPPING: Record<string, ConnectorResourceTypeConfig> = {
+  [ResourceType.Asset]: {
+    errorElement: AssetsError,
+    listElement: AssetsList,
+    loadingElement: AssetsLoading,
+    prefetch: prefetchAssets,
+  },
+  [ResourceType.DeviceArtifact]: {
+    errorElement: DeviceArtifactsError,
+    listElement: DeviceArtifactsDataList,
+    loadingElement: VulnerabilitiesLoading,
+    prefetch: prefetchDeviceArtifacts,
+  },
+  [ResourceType.Remediation]: {
+    errorElement: RemediationsError,
+    listElement: RemediationsDataList,
+    loadingElement: RemediationsLoading,
+    prefetch: prefetchRemediations,
+  },
+  [ResourceType.Vulnerability]: {
+    errorElement: VulnerabilitiesError,
+    listElement: VulnerabilitiesList,
+    loadingElement: VulnerabilitiesLoading,
+    prefetch: prefetchVulnerabilities,
+  },
+};
+
+const Page = async ({
+  params,
+  searchParams,
+}: CombinedPageProps<"resourceTypeUrl">) => {
+  await requireAuth();
+  const { resourceTypeUrl } = await params;
+
+  if (!isValidResourceTypeKey(resourceTypeUrl)) {
+    return notFound();
+  }
+
+  const resourceType = integrationsMapping[resourceTypeUrl].type;
+  const config = LIST_MAPPING[resourceType];
+  const paginationParams = await paginationParamsLoader(searchParams);
+  await config.prefetch({ ...paginationParams });
+
+  return (
+    <HydrateClient>
+      <ErrorBoundary fallback={<config.errorElement />}>
+        <Suspense fallback={<config.loadingElement />}>
+          <config.listElement />
+        </Suspense>
+      </ErrorBoundary>
+    </HydrateClient>
+  );
+};
+
+export default Page;

src/app/(dashboard)/(rest)/connectors/[resourceTypeUrl]/layout.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { ConnectorsLayout } from "@/features/api-key-connectors/components/connectors-layout";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <ConnectorsLayout>{children}</ConnectorsLayout>;
+};
+
+export default Layout;

src/app/(dashboard)/(rest)/connectors/[resourceTypeUrl]/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { notFound, usePathname } from "next/navigation";
+import { ConnectorsList } from "@/features/api-key-connectors/components/connectors";
+import {
+  integrationsMapping,
+  isValidResourceTypeKey,
+} from "@/features/integrations/types";
+
+const Page = () => {
+  const pathname = usePathname();
+  const resourceTypePlural = pathname.split("/").pop();
+
+  if (!resourceTypePlural || !isValidResourceTypeKey(resourceTypePlural)) {
+    return notFound();
+  }
+
+  const resourceType = integrationsMapping[resourceTypePlural].type;
+
+  return <ConnectorsList resourceType={resourceType} />;
+};
+
+export default Page;

src/app/(dashboard)/(rest)/settings/integrations/[resourceTypeUrl]/page.tsx

@@ -10,7 +10,7 @@ import { paginationParamsLoader } from "@/features/integrations/server/params-lo
 import { prefetchIntegrations } from "@/features/integrations/server/prefetch";
 import {
   integrationsMapping,
-  isValidIntegrationKey,
+  isValidResourceTypeKey,
 } from "@/features/integrations/types";
 import { requireAuth } from "@/lib/auth-utils";
 import type { CombinedPageProps } from "@/lib/page-types";
@@ -24,7 +24,7 @@ const Page = async ({
   const { resourceTypeUrl } = await params;
 
   // Validate resourceType
-  if (!isValidIntegrationKey(resourceTypeUrl)) {
+  if (!isValidResourceTypeKey(resourceTypeUrl)) {
     notFound();
   }
 

src/features/api-key-connectors/components/columns.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import { formatDistanceToNow } from "date-fns";
+import { Badge } from "@/components/ui/badge";
+import { SortableHeader } from "@/components/ui/data-table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { ConnectorResponse } from "../types";
+
+export const columns: ColumnDef<ConnectorResponse>[] = [
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => (
+      <SortableHeader header="Connector Name" column={column} />
+    ),
+  },
+  {
+    accessorKey: "userId",
+    meta: { title: "Source Tool" },
+    header: "Source Tool",
+    accessorFn: (row) => row.user.name,
+  },
+  {
+    id: "lastRequest",
+    accessorKey: "lastRequest",
+    header: ({ column }) => (
+      <SortableHeader header="Last Used" column={column} />
+    ),
+    cell: ({ row }) => {
+      const value = row.original.lastRequest;
+      return (
+        <Tooltip>
+          <TooltipTrigger>
+            {value ? `${formatDistanceToNow(value)} ago` : "Never"}
+          </TooltipTrigger>
+          <TooltipContent>
+            {value ? value.toLocaleString() : "Never"}
+          </TooltipContent>
+        </Tooltip>
+      );
+    },
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => {
+      let text = "Expired";
+      let color = "bg-red-400";
+      if (row.original.apiKeyId || row.original.integrationId) {
+        text = "Active";
+        color = "bg-green-300";
+      }
+
+      return (
+        <Badge variant="outline" className={color}>
+          {text}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: "type",
+    accessorKey: "type",
+    header: "Type",
+    cell: ({ row }) => {
+      let text = "API Key";
+      let color = "bg-blue-300";
+      if (row.original.integrationId) {
+        text = "Integration";
+        color = "bg-yellow-300";
+      }
+
+      return (
+        <Badge variant="outline" className={color}>
+          {text}
+        </Badge>
+      );
+    },
+  },
+];