feat: config access tab

[adityathebe]

Dummy data example:

Summary by CodeRabbit

• New Features
  • Added "Access" tab in configuration details view to see who has access to each configuration. The tab displays a sortable table showing user name, email address, assigned role, access type (with external group indicator), last sign-in time, last review date, and when access was originally granted. The tab appears only when access information is available.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
aws-preview	Ready	Preview	Jan 2, 2026 11:37am
flanksource-ui	Ready	Preview	Jan 2, 2026 11:37am

[coderabbitai]

Walkthrough

This pull request introduces a new configuration access details feature. A new route and page component display access information for a configuration, including API endpoints to fetch access summaries, a React Query hook to manage the data, new type definitions, and UI updates to add an Access tab to the config details view.

Changes

Cohort / File(s)	Summary
Configuration Access Feature - API & Types src/api/types/configs.ts, src/api/services/configs.ts, src/api/query-hooks/useConfigAccessSummaryQuery.tsx	Added ConfigAccessSummary type with user, email, role, external_group_id, and access timeline fields. Introduced getConfigAccessSummary() API service that fetches paginated access data from database. Created useConfigAccessSummaryQuery() React Query hook to manage access summary data fetching with proper caching and conditional enabling.
Configuration Access Page src/pages/config/details/ConfigDetailsAccessPage.tsx	New page component that renders access summary data in a table with custom cell formatters for role, last signed-in date, optional dates, and access type badges. Integrates loading states and refetch capability.
Configuration Details Navigation & Routing src/App.tsx, src/components/Configs/ConfigDetailsTabs.tsx, src/components/Configs/ConfigTabsLinks.tsx	Added new protected route "access" under ConfigDetails flow with authorization checks. Extended ConfigDetailsTabsProps to include "Access" as a valid tab name. Modified tab rendering logic to conditionally display Access tab when data is available, showing count via badge.

Sequence Diagram

sequenceDiagram
    actor User
    participant Page as ConfigDetailsAccessPage
    participant Hook as useConfigAccessSummaryQuery
    participant API as getConfigAccessSummary
    participant DB as Database

    User->>Page: Navigate to config/:id/access
    activate Page
    Page->>Hook: useConfigAccessSummaryQuery(configId)
    activate Hook
    Hook->>API: getConfigAccessSummary(configId)
    activate API
    API->>DB: Query access summary records
    activate DB
    DB-->>API: Return access records with pagination
    deactivate DB
    API-->>Hook: Return resolved data
    deactivate API
    Hook-->>Page: Return { data, isLoading }
    deactivate Hook
    Page->>Page: Render access table with formatters
    Page-->>User: Display access summary table
    deactivate Page

Loading

Possibly related PRs

• fix: Navigate to the view tab on config page view #2802: Modifies config tabs code and the hook's return shape in useConfigDetailsTabs, affecting the same tab-rendering logic that is updated here for the new Access tab.

Suggested reviewers

• moshloop

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding a new access tab to the config details view, which is the primary feature introduced across all modified files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/config-access-tab

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/api/services/configs.ts (1)

166-180: Simplify the order parameter encoding.

The implementation correctly encodes the configId parameter, but the encodeURIComponent call on line 171-172 for the static string "user.asc" is unnecessary. Static sort parameters don't require encoding and other similar functions in this file (e.g., getConfigChanges, getAllConfigsMatchingQuery) don't encode their order parameters.

🔎 Proposed simplification

 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"
-      )}`,
+      )}&select=user,email,role,external_group_id,last_signed_in_at,last_reviewed_at,created_at&order=user.asc`,
       {
         headers: {
           Prefer: "count=exact"
         }
       }
     )
   );

src/pages/config/details/ConfigDetailsAccessPage.tsx (1)

46-124: Consider adding error state handling.

The component correctly uses the React Query hook and renders loading states, but it doesn't handle error scenarios. If the API call fails, users may see an indefinite loading state or an empty table without explanation.

🔎 Proposed error handling

   const {
     data: accessSummary,
     isLoading,
+    isError,
+    error,
     refetch
   } = useConfigAccessSummaryQuery(id);

   const columns = useMemo<MRT_ColumnDef<ConfigAccessSummary>[]>(
     // ... column definitions
   );

   const rows = accessSummary?.data ?? [];

+  if (isError) {
+    return (
+      <ConfigDetailsTabs
+        pageTitlePrefix={"Catalog Access"}
+        isLoading={false}
+        refetch={refetch}
+        activeTabName="Access"
+      >
+        <div className="flex h-full items-center justify-center">
+          <p className="text-red-600">Failed to load access data. Please try again.</p>
+        </div>
+      </ConfigDetailsTabs>
+    );
+  }
+
   return (
     <ConfigDetailsTabs
       // ... rest of component

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2934ba9 and 460c8e1.

📒 Files selected for processing (7)

• src/App.tsx
• src/api/query-hooks/useConfigAccessSummaryQuery.tsx
• src/api/services/configs.ts
• src/api/types/configs.ts
• src/components/Configs/ConfigDetailsTabs.tsx
• src/components/Configs/ConfigTabsLinks.tsx
• src/pages/config/details/ConfigDetailsAccessPage.tsx

🧰 Additional context used

🧬 Code graph analysis (5)

src/api/query-hooks/useConfigAccessSummaryQuery.tsx (1)

src/api/services/configs.ts (1)

• getConfigAccessSummary (166-180)

src/api/services/configs.ts (3)

src/api/resolve.ts (1)

• resolvePostGrestRequestWithPagination (24-33)

src/api/types/configs.ts (1)

• ConfigAccessSummary (100-108)

src/api/axios.ts (1)

• ConfigDB (27-34)

src/components/Configs/ConfigTabsLinks.tsx (2)

src/api/query-hooks/useConfigAccessSummaryQuery.tsx (1)

• useConfigAccessSummaryQuery (4-13)

src/ui/Badge/Badge.tsx (1)

• Badge (15-59)

src/pages/config/details/ConfigDetailsAccessPage.tsx (6)

src/ui/MRTDataTable/MRTCellProps.ts (1)

• MRTCellProps (9-16)

src/api/types/configs.ts (1)

• ConfigAccessSummary (100-108)

src/ui/Age/Age.tsx (1)

• Age (24-105)

src/api/query-hooks/useConfigAccessSummaryQuery.tsx (1)

• useConfigAccessSummaryQuery (4-13)

src/components/Configs/ConfigDetailsTabs.tsx (1)

• ConfigDetailsTabs (33-95)

src/ui/MRTDataTable/MRTDataTable.tsx (1)

• MRTDataTable (58-203)

src/App.tsx (3)

src/pages/config/details/ConfigDetailsAccessPage.tsx (1)

• ConfigDetailsAccessPage (46-125)

src/components/Permissions/AuthorizationAccessCheck.tsx (1)

• withAuthorizationAccessCheck (58-73)

src/context/UserAccessContext/permissions.ts (1)

• tables (1-27)

🔇 Additional comments (8)

src/api/types/configs.ts (1)

100-108: LGTM! Clean type definition.

The ConfigAccessSummary interface is well-structured with appropriate optional fields and consistent naming conventions.

src/components/Configs/ConfigDetailsTabs.tsx (1)

27-27: LGTM! Consistent with existing tab pattern.

The addition of "Access" to the activeTabName union type properly enables the new Access tab functionality.

src/App.tsx (1)

230-234: LGTM! Follows the established dynamic import pattern.

The dynamic import for ConfigDetailsAccessPage is consistent with other page imports in the file.

src/api/query-hooks/useConfigAccessSummaryQuery.tsx (1)

4-12: LGTM! Solid React Query hook implementation.

The hook correctly uses enabled: !!configId to prevent queries with undefined IDs, and keepPreviousData: true provides smooth UX during navigation. The non-null assertion in the queryFn is safe given the enabled guard.

src/components/Configs/ConfigTabsLinks.tsx (3)

8-8: LGTM! Clean import.

---

35-37: Good fallback chain for computing access count.

The implementation correctly handles different response formats by checking both totalEntries and data.length with appropriate fallbacks.

---

93-104: LGTM! Conditional tab rendering provides clean UX.

The Access tab only appears when there's access data (accessCount > 0), which prevents showing empty tabs. The Badge component effectively displays the count, consistent with other tabs like Changes and Insights.

Note: The current implementation silently hides the tab if the query fails. This is acceptable for a "Chill" review, but consider whether error states should be surfaced to users in future iterations.

src/pages/config/details/ConfigDetailsAccessPage.tsx (1)

12-44: LGTM! Well-structured cell renderers.

The cell renderer implementations handle null values appropriately and provide clear visual feedback. The AccessTypeCell correctly distinguishes between group-based and direct access with appropriate badges and tooltips.