[VW-128] Api Key Connector Table Views

src/app/(dashboard)/(rest)/connectors/assets/page.tsx

@@ -1,18 +1,18 @@
 import {
-  AssetsContainer,
-  AssetsError,
-  AssetsList,
-  AssetsLoading,
-} from "@/features/assets/components/assets";
-import { assetsParamsLoader } from "@/features/assets/server/params-loader";
-import { prefetchAssets } from "@/features/assets/server/prefetch";
+  AssetConnectorList,
+  AssetConnectorsContainer,
+  ConnectorsError,
+  ConnectorsLoading,
+} from "@/features/api-key-connectors/components/connectors";
+import { connectorsParamsLoader } from "@/features/api-key-connectors/server/params-loader";
+import { prefetchAssetConnectors } from "@/features/api-key-connectors/server/prefetch";
 import { createListPage } from "@/lib/page-factory";
 
 export default createListPage({
-  paramsLoader: assetsParamsLoader,
-  prefetch: prefetchAssets,
-  Container: AssetsContainer,
-  List: AssetsList,
-  Loading: AssetsLoading,
-  Error: AssetsError,
+  paramsLoader: connectorsParamsLoader,
+  prefetch: prefetchAssetConnectors,
+  Container: AssetConnectorsContainer,
+  List: AssetConnectorList,
+  Loading: ConnectorsLoading,
+  Error: ConnectorsError,
 });

src/app/(dashboard)/(rest)/connectors/deviceArtifacts/page.tsx

@@ -1,18 +1,18 @@
 import {
-  DeviceArtifactsContainer,
-  DeviceArtifactsError,
-  DeviceArtifactsList,
-  DeviceArtifactsLoading,
-} from "@/features/device-artifacts/components/device-artifacts";
-import { deviceArtifactsParamsLoader } from "@/features/device-artifacts/server/params-loader";
-import { prefetchDeviceArtifacts } from "@/features/device-artifacts/server/prefetch";
+  ConnectorsError,
+  ConnectorsLoading,
+  DeviceArtifactConnectorList,
+  DeviceArtifactConnectorsContainer,
+} from "@/features/api-key-connectors/components/connectors";
+import { connectorsParamsLoader } from "@/features/api-key-connectors/server/params-loader";
+import { prefetchDeviceArtifactConnectors } from "@/features/api-key-connectors/server/prefetch";
 import { createListPage } from "@/lib/page-factory";
 
 export default createListPage({
-  paramsLoader: deviceArtifactsParamsLoader,
-  prefetch: prefetchDeviceArtifacts,
-  Container: DeviceArtifactsContainer,
-  List: DeviceArtifactsList,
-  Loading: DeviceArtifactsLoading,
-  Error: DeviceArtifactsError,
+  paramsLoader: connectorsParamsLoader,
+  prefetch: prefetchDeviceArtifactConnectors,
+  Container: DeviceArtifactConnectorsContainer,
+  List: DeviceArtifactConnectorList,
+  Loading: ConnectorsLoading,
+  Error: ConnectorsError,
 });

src/app/(dashboard)/(rest)/connectors/remediations/page.tsx

@@ -1,18 +1,18 @@
 import {
-  RemediationsContainer,
-  RemediationsError,
-  RemediationsList,
-  RemediationsLoading,
-} from "@/features/remediations/components/remediations";
-import { remediationsParamsLoader } from "@/features/remediations/server/params-loader";
-import { prefetchRemediations } from "@/features/remediations/server/prefetch";
+  ConnectorsError,
+  ConnectorsLoading,
+  RemediationConnectorList,
+  RemediationConnectorsContainer,
+} from "@/features/api-key-connectors/components/connectors";
+import { connectorsParamsLoader } from "@/features/api-key-connectors/server/params-loader";
+import { prefetchRemediationConnectors } from "@/features/api-key-connectors/server/prefetch";
 import { createListPage } from "@/lib/page-factory";
 
 export default createListPage({
-  paramsLoader: remediationsParamsLoader,
-  prefetch: prefetchRemediations,
-  Container: RemediationsContainer,
-  List: RemediationsList,
-  Loading: RemediationsLoading,
-  Error: RemediationsError,
+  paramsLoader: connectorsParamsLoader,
+  prefetch: prefetchRemediationConnectors,
+  Container: RemediationConnectorsContainer,
+  List: RemediationConnectorList,
+  Loading: ConnectorsLoading,
+  Error: ConnectorsError,
 });

src/app/(dashboard)/(rest)/connectors/vulnerabilities/page.tsx

@@ -1,18 +1,18 @@
 import {
-  VulnerabilitiesContainer,
-  VulnerabilitiesError,
-  VulnerabilitiesList,
-  VulnerabilitiesLoading,
-} from "@/features/vulnerabilities/components/vulnerabilities";
-import { vulnerabilitiesParamsLoader } from "@/features/vulnerabilities/server/params-loader";
-import { prefetchVulnerabilities } from "@/features/vulnerabilities/server/prefetch";
+  ConnectorsError,
+  ConnectorsLoading,
+  VulnerabilityConnectorList,
+  VulnerabilityConnectorsContainer,
+} from "@/features/api-key-connectors/components/connectors";
+import { connectorsParamsLoader } from "@/features/api-key-connectors/server/params-loader";
+import { prefetchVulnerabilityConnectors } from "@/features/api-key-connectors/server/prefetch";
 import { createListPage } from "@/lib/page-factory";
 
 export default createListPage({
-  paramsLoader: vulnerabilitiesParamsLoader,
-  prefetch: prefetchVulnerabilities,
-  Container: VulnerabilitiesContainer,
-  List: VulnerabilitiesList,
-  Loading: VulnerabilitiesLoading,
-  Error: VulnerabilitiesError,
+  paramsLoader: connectorsParamsLoader,
+  prefetch: prefetchVulnerabilityConnectors,
+  Container: VulnerabilityConnectorsContainer,
+  List: VulnerabilityConnectorList,
+  Loading: ConnectorsLoading,
+  Error: ConnectorsError,
 });

src/app/api/trpc/[trpc]/route.ts

@@ -9,6 +9,9 @@ const handler = (req: Request) =>
     router: appRouter,
     // @ts-expect-error
     createContext: createTRPCContext,
+    onError: ({ path, error }) => {
+      console.error(path, error);
+    },
   });
 
 export { handler as GET, handler as POST };

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: "Username",
+    meta: { title: "Username" },
+    header: "Username",
+    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>
+      );
+    },
+  },
+];

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

@@ -0,0 +1,159 @@
+"use client";
+
+import {
+  EmptyView,
+  EntityContainer,
+  EntityHeader,
+  EntitySearch,
+  ErrorView,
+  LoadingView,
+} from "@/components/entity-components";
+import { DataTable } from "@/components/ui/data-table";
+import { ResourceType } from "@/generated/prisma";
+import { useEntitySearch } from "@/hooks/use-entity-search";
+import {
+  useConnectorParams,
+  useSuspenseConnectorsByResourceType,
+} from "../hooks/use-connectors";
+import { columns } from "./columns";
+
+export const ConnectorsLoading = () => {
+  return <LoadingView message="Loading connectors..." />;
+};
+
+export const ConnectorsError = () => {
+  return <ErrorView message="Error loading connectors" />;
+};
+
+export const ConnectorsEmpty = () => {
+  return (
+    <EmptyView message="No connectors found. Connectors are typically seeded using the database seed script." />
+  );
+};
+
+const ConnectorsHeader = ({
+  disabled,
+  resourceType,
+}: {
+  disabled?: boolean;
+  resourceType: string;
+}) => {
+  return (
+    <EntityHeader
+      title={`${resourceType} Connectors`}
+      description={`View connectors that others are using`}
+      disabled={disabled}
+    />
+  );
+};
+
+const ConnectorsContainer = ({
+  children,
+  resourceType,
+}: {
+  children: React.ReactNode;
+  resourceType: ResourceType | string;
+}) => {
+  return (
+    <EntityContainer header={<ConnectorsHeader resourceType={resourceType} />}>
+      {children}
+    </EntityContainer>
+  );
+};
+
+const ConnectorsSearch = () => {
+  const [params, setParams] = useConnectorParams();
+  const { searchValue, onSearchChange } = useEntitySearch({
+    params,
+    setParams,
+  });
+
+  return (
+    <EntitySearch
+      value={searchValue}
+      onChange={onSearchChange}
+      placeholder="Search connectors"
+    />
+  );
+};
+
+const ConnectorsList = ({ resourceType }: { resourceType: ResourceType }) => {
+  const { data: connectors, isFetching } = useSuspenseConnectorsByResourceType({
+    resourceType,
+  });
+
+  console.log("useSuspenseConnectorsByResourceType:", connectors);
+
+  return (
+    <DataTable
+      paginatedData={connectors}
+      columns={columns}
+      isLoading={isFetching}
+      search={<ConnectorsSearch />}
+    />
+  );
+};
+
+export const AssetConnectorsContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <ConnectorsContainer resourceType={ResourceType.Asset}>
+      {children}
+    </ConnectorsContainer>
+  );
+};
+
+export const DeviceArtifactConnectorsContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <ConnectorsContainer resourceType={"Device Artifact"}>
+      {children}
+    </ConnectorsContainer>
+  );
+};
+
+export const RemediationConnectorsContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <ConnectorsContainer resourceType={ResourceType.Remediation}>
+      {children}
+    </ConnectorsContainer>
+  );
+};
+
+export const VulnerabilityConnectorsContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <ConnectorsContainer resourceType={ResourceType.Vulnerability}>
+      {children}
+    </ConnectorsContainer>
+  );
+};
+
+export const AssetConnectorList = () => {
+  return <ConnectorsList resourceType={ResourceType.Asset} />;
+};
+
+export const DeviceArtifactConnectorList = () => {
+  return <ConnectorsList resourceType={ResourceType.DeviceArtifact} />;
+};
+
+export const RemediationConnectorList = () => {
+  return <ConnectorsList resourceType={ResourceType.Remediation} />;
+};
+
+export const VulnerabilityConnectorList = () => {
+  return <ConnectorsList resourceType={ResourceType.Vulnerability} />;
+};