feat(permissions): MCP settings page (#2978)

* feat: MCP settings paget pu

* chore: remove playbook and view table for MCP

* chore: refactor file paths

* fix(permissions): fix SubjectSelectorModal bugs and UX issues

- Fix re-render loop: init selected state only on open transition via prevOpenRef, read preselectedSubjectIds through a stable ref so parent re-renders don't wipe user selections
- Fix incomplete onAllow payload: add fetchPermissionSubjectsByIds and seed selectedSubjects upfront so preselected subjects on other pages are always included
- Allow applying empty selection (remove last subject) by disabling Apply only when selection is unchanged from initial, not when count is zero
- Debounce search input with useDebouncedValue(300ms) to avoid per-keystroke API calls
- Remove unnecessary useMemo around selectedCount
- Add PAGE_SIZE to query key
- Replace Avatar with type-appropriate icon for team/group subjects
- Replace typeLabel function with a TYPE_LABELS record map
- Wrap subjects derivation in useMemo to fix exhaustive-deps lint warning

* fix(permissions): improve PermissionAccessCard UX and correctness

* feat(mcp): redesign overview subject access controls

* fix(mcp): use playbook object selectors and dedupe overrides

* fix(mcp): centralize and enforce mcp settings source

* fix(mcp): resolve ambiguous view-name permission matching

* chore: refactor access card -> permission matching

* fix(mcp): centralize tab-body loading and avoid blank switch

* fix(mcp): cap card subjects and scope queries to mcp source

* feat(mcp): show effective access verdicts in subject viewer

* modify subject selector access modal

* remove card design

* feat(permissions): compact MCP access rows and add switch sizes

* feat(mcp): move subject selector to sticky side panel

* fix: mcp overview page

* fix: width of cards

* fix: type error in test

* fix: review

* chore: refactor

* feat: Display setup MCP token button in mcp settings

* fix(permissions): address PR review issues in MCP permission UI

* fix(permissions): handle missing subjects and always refetch overrides

* fix: show MCP token creation error inside the modal

* Add playbook permission access check modal with shared resource selector

* fix(permissions): allow mouse selection in access-check modal

* refactor(permissions): centralize subject avatar rendering

* fix: highlight selected rows

* feat: grouping playbooks by category

* fix(mcp-permissions): improve subject selector switch feedback

* feat(mcp): add check access tab with conditional resources

* feat(permissions): support access-token subjects in selector UI

* fix(mcp): reduce subject avatar size in overview list

* feat: Subject -> mcp settings

* parity between playbooks and users page

* feat(permissions): add effective access checks across MCP tabs

* fix(mcp): reuse tokens table on overview without layout gap

* fix(permissions): align selector panel bulk-lock UX

* fix(permissions): match effective access and mode control widths

* sorting

* sorting animation

* change sort menu

* feat(permissions): add subject sort controls with direction toggle

* feat(permissions): split resource selector lists by type

Extract ResourceList, ResourceRow, and EffectiveAccessBadge from ResourceSelectorPanel.

Add independent bulk access switches for Playbooks and Views.

* perf(permissions): localize list sorting to reduce flicker

Move sort state and sorting logic into each ResourceList so sorting one list does not rerender the sibling list.

Memoize ResourceList and ResourceRow and stabilize bulk handlers in the parent.

* feat(permissions): add subjects tab with shared subject panel

Author: adityathebe

package-lock.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@storybook/client-api": "^7.6.17",

package.json

@@ -47,6 +47,12 @@ import { UserAccessStateContextProvider } from "./context/UserAccessContext/User
 import { tables } from "./context/UserAccessContext/permissions";
 
 import { PermissionsPage } from "./pages/Settings/PermissionsPage";
+import { PermissionsSubjectsPage } from "./pages/Settings/PermissionsSubjectsPage";
+import McpOverviewPage from "./pages/Settings/mcp/McpOverviewPage";
+import McpPlaybooksPage from "./pages/Settings/mcp/McpPlaybooksPage";
+import McpViewsPage from "./pages/Settings/mcp/McpViewsPage";
+import McpSubjectAccessPage from "./pages/Settings/mcp/McpSubjectAccessPage";
+import McpCheckAccessPage from "./pages/Settings/mcp/McpCheckAccessPage";
 import ScopesPage from "./pages/Settings/ScopesPage";
 import { features } from "./services/permissions/features";
 import { getViewsForSidebar, ViewSummary } from "./api/services/views";
@@ -427,6 +433,15 @@ const settingsNav: SettingsNavigationItems = {
       featureName: features["settings.job_history"],
       resourceName: tables.database
     },
+    {
+      name: "MCP",
+      href: "/settings/mcp",
+      icon: ({ className }: { className: string }) => (
+        <Icon name="mcp" className={`${className} [&_path]:!fill-white`} />
+      ),
+      featureName: features["settings.mcp"],
+      resourceName: tables.database
+    },
     {
       name: "Feature Flags",
       href: "/settings/feature-flags",
@@ -735,6 +750,14 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
             "read"
           )}
         />
+        <Route
+          path="permissions/subjects"
+          element={withAuthorizationAccessCheck(
+            <PermissionsSubjectsPage />,
+            tables.permissions,
+            "read"
+          )}
+        />
         <Route
           path="scopes"
           element={withAuthorizationAccessCheck(
@@ -841,6 +864,55 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
           />
         </Route>
 
+        <Route path="mcp">
+          <Route index element={<Navigate to="/settings/mcp/overview" />} />
+          <Route
+            path="overview"
+            element={withAuthorizationAccessCheck(
+              <McpOverviewPage />,
+              tables.database,
+              "write",
+              true
+            )}
+          />
+          <Route
+            path="playbooks"
+            element={withAuthorizationAccessCheck(
+              <McpPlaybooksPage />,
+              tables.database,
+              "write",
+              true
+            )}
+          />
+          <Route
+            path="views"
+            element={withAuthorizationAccessCheck(
+              <McpViewsPage />,
+              tables.database,
+              "write",
+              true
+            )}
+          />
+          <Route
+            path="subject-access"
+            element={withAuthorizationAccessCheck(
+              <McpSubjectAccessPage />,
+              tables.database,
+              "write",
+              true
+            )}
+          />
+          <Route
+            path="check-access"
+            element={withAuthorizationAccessCheck(
+              <McpCheckAccessPage />,
+              tables.database,
+              "write",
+              true
+            )}
+          />
+        </Route>
+
         {settingsNav.submenu
           .filter((v) => (v as SchemaResourceType).table)
           .map((x) => {

src/App.tsx

@@ -17,8 +17,15 @@ export type FetchPermissionsInput = {
   connectionId?: string;
   subject?: string;
   action?: string;
-  subject_type?: "playbook" | "team" | "person" | "notification" | "component";
   direction?: "inbound" | "outbound";
+  subject_type?:
+    | "playbook"
+    | "team"
+    | "person"
+    | "notification"
+    | "component"
+    | "role"
+    | "access_token_person";
 };
 
 function composeQueryParamForFetchPermissions({
@@ -149,3 +156,87 @@ export function recheckPermission(id: string) {
     error: null
   });
 }
+
+// Source marker used by the MCP Settings UI for permissions it creates/manages.
+export const MCP_SETTINGS_PERMISSION_SOURCE = "mcp_settings" as const;
+
+export async function fetchMcpRunPermissions() {
+  const response = await IncidentCommander.get<PermissionsSummary[] | null>(
+    `/permissions_summary?select=*&action=eq.mcp:run&source=eq.${MCP_SETTINGS_PERMISSION_SOURCE}&deleted_at=is.null&limit=5000`
+  );
+
+  return response.data ?? [];
+}
+
+export async function fetchMcpUserPermissions() {
+  const response = await IncidentCommander.get<PermissionsSummary[] | null>(
+    `/permissions_summary?select=*&action=eq.mcp:use&object=eq.mcp&source=eq.${MCP_SETTINGS_PERMISSION_SOURCE}&deleted_at=is.null&limit=5000`
+  );
+
+  return response.data ?? [];
+}
+
+export type PermissionSubject = {
+  id: string;
+  name: string;
+  type:
+    | "team"
+    | "permission_subject_group"
+    | "person"
+    | "role"
+    | "access_token_person";
+  owner?: string | null;
+};
+
+export async function fetchPermissionSubjectsPaginated({
+  search = "",
+  pageIndex = 0,
+  pageSize = 20
+}: {
+  search?: string;
+  pageIndex?: number;
+  pageSize?: number;
+}) {
+  const query = search.trim();
+
+  let url = "/permission_subjects?select=id,name,type,owner&order=name.asc";
+  url += `&limit=${pageSize}&offset=${pageIndex * pageSize}`;
+
+  if (query) {
+    url += `&name=ilike.*${encodeURIComponent(query)}*`;
+  }
+
+  return resolvePostGrestRequestWithPagination<PermissionSubject[]>(
+    IncidentCommander.get(url, {
+      headers: {
+        Prefer: "count=exact"
+      }
+    })
+  );
+}
+
+export async function fetchPermissionSubjectsByIds(ids: string[]) {
+  if (ids.length === 0) {
+    return [];
+  }
+  const response = await IncidentCommander.get<PermissionSubject[] | null>(
+    `/permission_subjects?select=id,name,type,owner&id=in.(${ids.join(",")})&limit=${ids.length}`
+  );
+  return response.data ?? [];
+}
+
+async function fetchPermissionSubjectsWithOrder(order: string) {
+  const response = await IncidentCommander.get<PermissionSubject[] | null>(
+    `/permission_subjects?select=id,name,type,owner&order=${order}&limit=5000`
+  );
+
+  return response.data ?? [];
+}
+
+export async function fetchPermissionSubjects() {
+  return fetchPermissionSubjectsWithOrder("name.asc");
+}
+
+export async function fetchAllPermissionSubjects() {
+  return fetchPermissionSubjectsWithOrder("type.asc,name.asc");
+}

src/api/services/permissions.ts

@@ -27,7 +27,7 @@ export async function getAllPlaybooksSpecs() {
 
 export async function getAllPlaybookNames() {
   const res = await IncidentCommander.get<PlaybookNames[] | null>(
-    `/playbook_names?select=id,name,title,icon,category&order=title.asc`
+    `/playbook_names?select=id,name,namespace,title,icon,category,description&order=title.asc`
   );
   return res.data ?? [];
 }