feat(permissions): MCP settings page

package.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",

src/App.tsx

@@ -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/api/services/permissions.ts

@@ -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/playbooks.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 ?? [];
 }