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` },
     {
@@ -82,6 +87,16 @@ export function useConfigDetailsTabs(countSummary?: ConfigItem["summary"]): {
       ),
       key: "Checks",
       path: `/catalog/${id}/checks`
+    },
+    {
+      label: (
+        <>
+          Access
+          <Badge className="ml-1" text={accessCount} />
+        </>
+      ),
+      key: "Access",
+      path: `/catalog/${id}/access`
     }
   ];
 

src/pages/config/details/ConfigDetailsAccessPage.tsx

@@ -0,0 +1,128 @@
+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 { DataTable } from "@flanksource-ui/ui/DataTable";
+import { CellContext, ColumnDef } from "@tanstack/table-core";
+import { SortingState } from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+
+const RoleCell = ({ getValue }: CellContext<ConfigAccessSummary, any>) => {
+  const value = getValue();
+  return value ? (
+    <span>{value}</span>
+  ) : (
+    <span className="text-gray-400">—</span>
+  );
+};
+
+const LastSignedInCell = ({
+  getValue
+}: CellContext<ConfigAccessSummary, any>) => {
+  const value = getValue();
+  if (!value) {
+    return <span className="text-gray-400">Never</span>;
+  }
+  return <Age from={value} />;
+};
+
+const OptionalDateCell = ({
+  getValue
+}: CellContext<ConfigAccessSummary, any>) => {
+  const value = getValue();
+  if (!value) {
+    return <span className="text-gray-400">—</span>;
+  }
+  return <Age from={value} />;
+};
+
+const AccessTypeCell = ({ row }: CellContext<ConfigAccessSummary, any>) => {
+  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 [sortBy, setSortBy] = useState<SortingState>([
+    { id: "user", desc: false }
+  ]);
+
+  const columns = useMemo<ColumnDef<ConfigAccessSummary>[]>(
+    () => [
+      {
+        header: "User",
+        accessorKey: "user"
+      },
+      {
+        header: "Email",
+        accessorKey: "email"
+      },
+      {
+        header: "Role",
+        accessorKey: "role",
+        cell: RoleCell
+      },
+      {
+        header: "Access",
+        accessorKey: "external_group_id",
+        cell: AccessTypeCell
+      },
+      {
+        header: "Last Signed In",
+        accessorKey: "last_signed_in_at",
+        cell: LastSignedInCell,
+        sortingFn: "datetime"
+      },
+      {
+        header: "Last Reviewed",
+        accessorKey: "last_reviewed_at",
+        cell: OptionalDateCell,
+        sortingFn: "datetime"
+      },
+      {
+        header: "Granted",
+        accessorKey: "created_at",
+        cell: OptionalDateCell,
+        sortingFn: "datetime"
+      }
+    ],
+    []
+  );
+
+  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">
+          <DataTable
+            stickyHead
+            columns={columns}
+            data={rows}
+            tableStyle={{ borderSpacing: "0" }}
+            isLoading={isLoading}
+            className="table-auto"
+            tableSortByState={sortBy}
+            onTableSortByChanged={setSortBy}
+          />
+        </div>
+      </div>
+    </ConfigDetailsTabs>
+  );
+}