feat: config access tab

Author: adityathebe

src/App.tsx

@@ -227,6 +227,12 @@ const ConfigDetailsRelationshipsPage = dynamic(() =>
   ).then((mod) => mod.ConfigDetailsRelationshipsPage)
 );
 
+const ConfigDetailsAccessPage = dynamic(() =>
+  import("@flanksource-ui/pages/config/details/ConfigDetailsAccessPage").then(
+    (mod) => mod.ConfigDetailsAccessPage
+  )
+);
+
 const ConfigDetailsViewPage = dynamic(() =>
   import("@flanksource-ui/pages/config/details/ConfigDetailsViewPage").then(
     (mod) => mod.ConfigDetailsViewPage
@@ -994,6 +1000,14 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
               "read"
             )}
           />
+          <Route
+            path="access"
+            element={withAuthorizationAccessCheck(
+              <ConfigDetailsAccessPage />,
+              tables.database,
+              "read"
+            )}
+          />
           <Route
             path="view/:viewId"
             element={withAuthorizationAccessCheck(

src/api/query-hooks/useConfigAccessSummaryQuery.tsx

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { getConfigAccessSummary } from "../services/configs";
+
+export default function useConfigAccessSummaryQuery(
+  configId: string | undefined
+) {
+  return useQuery({
+    queryKey: ["config", "access-summary", configId],
+    queryFn: () => getConfigAccessSummary(configId!),
+    enabled: !!configId,
+    keepPreviousData: true
+  });
+}

src/api/services/configs.ts

@@ -8,6 +8,7 @@ import { resolvePostGrestRequestWithPagination } from "../resolve";
 import { PaginationInfo } from "../types/common";
 import {
   ConfigAnalysis,
+  ConfigAccessSummary,
   ConfigChange,
   ConfigHealthCheckView,
   ConfigItem,
@@ -162,6 +163,22 @@ export const getConfig = (id: string) =>
     ConfigDB.get(`/config_detail?id=eq.${id}&select=*`)
   );
 
+export const getConfigAccessSummary = (configId: string) =>
+  resolvePostGrestRequestWithPagination<ConfigAccessSummary[]>(
+    ConfigDB.get(
+      `/config_access_summary?config_id=eq.${encodeURIComponent(
+        configId
+      )}&select=user,email,role,external_group_id,last_signed_in_at,last_reviewed_at,created_at&order=${encodeURIComponent(
+        "user.asc"
+      )}`,
+      {
+        headers: {
+          Prefer: "count=exact"
+        }
+      }
+    )
+  );
+
 export type ConfigsTagList = {
   key: string;
   value: any;

src/api/types/configs.ts

@@ -97,6 +97,16 @@ export interface ConfigItemGraphData extends ConfigItem {
   isIntermediaryNode?: boolean;
 }
 
+export interface ConfigAccessSummary {
+  user: string;
+  email: string;
+  role?: string | null;
+  external_group_id?: string | null;
+  last_signed_in_at?: string | null;
+  last_reviewed_at?: string | null;
+  created_at: string;
+}
+
 export interface ConfigTypeRelationships extends Timestamped {
   config_id: string;
   related_id: string;

src/components/Configs/ConfigDetailsTabs.tsx

@@ -24,6 +24,7 @@ type ConfigDetailsTabsProps = {
     | "Relationships"
     | "Playbooks"
     | "Checks"
+    | "Access"
     | string; // Views
   className?: string;
   extra?: ReactNode;

src/components/Configs/ConfigTabsLinks.tsx

@@ -5,6 +5,7 @@ import { getViewsByConfigId } from "../../api/services/views";
 import { useQuery } from "@tanstack/react-query";
 import { Icon } from "@flanksource-ui/ui/Icons/Icon";
 import { ReactNode } from "react";
+import useConfigAccessSummaryQuery from "@flanksource-ui/api/query-hooks/useConfigAccessSummaryQuery";
 
 type ConfigDetailsTab = {
   label: ReactNode;
@@ -31,6 +32,10 @@ export function useConfigDetailsTabs(countSummary?: ConfigItem["summary"]): {
     enabled: !!id
   });
 
+  const { data: accessSummary } = useConfigAccessSummaryQuery(id);
+  const accessCount =
+    accessSummary?.totalEntries ?? accessSummary?.data?.length ?? 0;
+
   const staticTabs: ConfigDetailsTab[] = [
     { label: "Spec", key: "Spec", path: `/catalog/${id}/spec` },
     {
@@ -85,6 +90,19 @@ export function useConfigDetailsTabs(countSummary?: ConfigItem["summary"]): {
     }
   ];
 
+  if (accessCount > 0) {
+    staticTabs.push({
+      label: (
+        <>
+          Access
+          <Badge className="ml-1" text={accessCount} />
+        </>
+      ),
+      key: "Access",
+      path: `/catalog/${id}/access`
+    });
+  }
+
   const hasExplicitOrdering = views.some((view) => view.ordinal != null);
 
   const orderedViews = hasExplicitOrdering

src/pages/config/details/ConfigDetailsAccessPage.tsx

@@ -0,0 +1,125 @@
+import useConfigAccessSummaryQuery from "@flanksource-ui/api/query-hooks/useConfigAccessSummaryQuery";
+import { ConfigAccessSummary } from "@flanksource-ui/api/types/configs";
+import { ConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigDetailsTabs";
+import { Age } from "@flanksource-ui/ui/Age";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
+import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+
+const RoleCell = ({ cell }: MRTCellProps<ConfigAccessSummary>) => {
+  const value = cell.getValue<string | null>();
+  return value ? (
+    <span>{value}</span>
+  ) : (
+    <span className="text-gray-400">—</span>
+  );
+};
+
+const LastSignedInCell = ({ cell }: MRTCellProps<ConfigAccessSummary>) => {
+  const value = cell.getValue<string | null>();
+  if (!value) {
+    return <span className="text-gray-400">Never</span>;
+  }
+  return <Age from={value} />;
+};
+
+const OptionalDateCell = ({ cell }: MRTCellProps<ConfigAccessSummary>) => {
+  const value = cell.getValue<string | null>();
+  if (!value) {
+    return <span className="text-gray-400">—</span>;
+  }
+  return <Age from={value} />;
+};
+
+const AccessTypeCell = ({ row }: MRTCellProps<ConfigAccessSummary>) => {
+  const groupId = row.original.external_group_id;
+  if (groupId) {
+    return <Badge text="Group" color="yellow" title={`Group ID: ${groupId}`} />;
+  }
+
+  return <Badge text="Direct" color="gray" />;
+};
+
+export function ConfigDetailsAccessPage() {
+  const { id } = useParams();
+  const {
+    data: accessSummary,
+    isLoading,
+    refetch
+  } = useConfigAccessSummaryQuery(id);
+
+  const columns = useMemo<MRT_ColumnDef<ConfigAccessSummary>[]>(
+    () => [
+      {
+        header: "User",
+        accessorKey: "user",
+        size: 160
+      },
+      {
+        header: "Email",
+        accessorKey: "email",
+        size: 220
+      },
+      {
+        header: "Role",
+        accessorKey: "role",
+        Cell: RoleCell,
+        size: 120
+      },
+      {
+        header: "Access",
+        accessorKey: "external_group_id",
+        Cell: AccessTypeCell,
+        size: 120
+      },
+      {
+        header: "Last Signed In",
+        accessorKey: "last_signed_in_at",
+        Cell: LastSignedInCell,
+        sortingFn: "datetime",
+        size: 160
+      },
+      {
+        header: "Last Reviewed",
+        accessorKey: "last_reviewed_at",
+        Cell: OptionalDateCell,
+        sortingFn: "datetime",
+        size: 160
+      },
+      {
+        header: "Granted",
+        accessorKey: "created_at",
+        Cell: OptionalDateCell,
+        sortingFn: "datetime",
+        size: 140
+      }
+    ],
+    []
+  );
+
+  const rows = accessSummary?.data ?? [];
+
+  return (
+    <ConfigDetailsTabs
+      pageTitlePrefix={"Catalog Access"}
+      isLoading={isLoading}
+      refetch={refetch}
+      activeTabName="Access"
+    >
+      <div className="flex h-full flex-1 flex-col gap-2 overflow-y-auto">
+        <div className="flex flex-1 flex-col overflow-y-auto">
+          <MRTDataTable
+            columns={columns}
+            data={rows}
+            isLoading={isLoading}
+            disablePagination
+            defaultSorting={[{ id: "user", desc: false }]}
+          />
+        </div>
+      </div>
+    </ConfigDetailsTabs>
+  );
+}