2246-Permissions

src/App.tsx

@@ -12,6 +12,7 @@ import {
   MdOutlineIntegrationInstructions,
   MdOutlineSupportAgent
 } from "react-icons/md";
+import { RiShieldUserFill } from "react-icons/ri";
 import { VscJson } from "react-icons/vsc";
 import {
   BrowserRouter,
@@ -53,6 +54,7 @@ import {
 import { ConnectionsPage } from "./pages/Settings/ConnectionsPage";
 import { EventQueueStatusPage } from "./pages/Settings/EventQueueStatus";
 import { FeatureFlagsPage } from "./pages/Settings/FeatureFlagsPage";
+import { PermissionsPage } from "./pages/Settings/PermissionsPage";
 import NotificationSilencedAddPage from "./pages/Settings/notifications/NotificationSilencedAddPage";
 import NotificationsPage from "./pages/Settings/notifications/NotificationsPage";
 import NotificationRulesPage from "./pages/Settings/notifications/NotificationsRulesPage";
@@ -164,6 +166,13 @@ const settingsNav: SettingsNavigationItems = {
       featureName: features["settings.connections"],
       resourceName: tables.connections
     },
+    {
+      name: "Permissions",
+      href: "/settings/permissions",
+      icon: RiShieldUserFill,
+      featureName: features["settings.permissions"],
+      resourceName: tables.permissions
+    },
     ...(process.env.NEXT_PUBLIC_AUTH_IS_CLERK === "true"
       ? []
       : [
@@ -397,6 +406,14 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
             true
           )}
         />
+        <Route
+          path="permissions"
+          element={withAuthorizationAccessCheck(
+            <PermissionsPage />,
+            tables.permissions,
+            "read"
+          )}
+        />
         <Route
           path="users"
           element={withAuthorizationAccessCheck(

src/api/services/connections.ts

@@ -1,7 +1,15 @@
-import { apiBase } from "../axios";
+import { Connection } from "@flanksource-ui/components/Connections/ConnectionFormModal";
+import { apiBase, IncidentCommander } from "../axios";
 
 export async function testConnection(id: string) {
   return apiBase.post<{ message?: string; error?: string } | null>(
     `/connection/test/${id}`
   );
 }
+
+export async function getConnectionByID(id: string) {
+  const res = await IncidentCommander.get<
+    Pick<Connection, "id" | "name" | "type">[]
+  >(`/connections?id=eq.${id}&select=id,name,type`);
+  return res?.data?.[0] ?? undefined;
+}

src/api/services/permissions.ts

@@ -0,0 +1,100 @@
+import { AVATAR_INFO } from "@flanksource-ui/constants";
+import { IncidentCommander } from "../axios";
+import { resolvePostGrestRequestWithPagination } from "../resolve";
+import { PermissionAPIResponse, PermissionTable } from "../types/permissions";
+
+export type FetchPermissionsInput = {
+  componentId?: string;
+  personId?: string;
+  teamId?: string;
+  configId?: string;
+  checkId?: string;
+  canaryId?: string;
+  playbookId?: string;
+  connectionId?: string;
+};
+
+function composeQueryParamForFetchPermissions({
+  componentId,
+  personId,
+  teamId,
+  configId,
+  checkId,
+  canaryId,
+  playbookId,
+  connectionId
+}: FetchPermissionsInput) {
+  if (componentId) {
+    return `component_id=eq.${componentId}`;
+  }
+  if (personId) {
+    return `person_id=eq.${personId}`;
+  }
+  if (teamId) {
+    return `team_id=eq.${teamId}`;
+  }
+  if (configId) {
+    return `config_id=eq.${configId}`;
+  }
+  if (checkId) {
+    return `check_id=eq.${checkId}`;
+  }
+  if (canaryId) {
+    return `canary_id=eq.${canaryId}`;
+  }
+  if (playbookId) {
+    return `playbook_id=eq.${playbookId}`;
+  }
+  if (connectionId) {
+    return `connection_id=eq.${connectionId}`;
+  }
+  return "";
+}
+
+export function fetchPermissions(
+  input: FetchPermissionsInput,
+  pagination: {
+    pageSize: number;
+    pageIndex: number;
+  }
+) {
+  const queryParam = composeQueryParamForFetchPermissions(input);
+  const selectFields = [
+    "*",
+    // "checks:check_id(id, name, status, type)",
+    "catalog:config_id(id, name, type, config_class)",
+    "component:component_id(id, name, icon)",
+    "canary:canary_id(id, name)",
+    "playbook:playbook_id(id, title, name, icon)",
+    "team:team_id(id, name, icon)",
+    `person:person_id(${AVATAR_INFO})`,
+    `createdBy:created_by(${AVATAR_INFO})`,
+    `connection:connection_id(id,name,type)`
+  ];
+
+  const { pageSize, pageIndex } = pagination;
+
+  const url = `/permissions?${queryParam}&select=${selectFields.join(",")}&limit=${pageSize}&offset=${pageIndex * pageSize}`;
+  return resolvePostGrestRequestWithPagination(
+    IncidentCommander.get<PermissionAPIResponse[]>(url, {
+      headers: {
+        Prefer: "count=exact"
+      }
+    })
+  );
+}
+
+export function addPermission(permission: PermissionTable) {
+  return IncidentCommander.post<PermissionTable>("/permissions", permission);
+}
+
+export function updatePermission(permission: PermissionTable) {
+  return IncidentCommander.patch<PermissionTable>(
+    `/permissions?id=eq.${permission.id}`,
+    permission
+  );
+}
+
+export function deletePermission(id: string) {
+  return IncidentCommander.delete(`/permissions?id=eq.${id}`);
+}

src/api/types/permissions.ts

@@ -0,0 +1,41 @@
+import { Connection } from "@flanksource-ui/components/Connections/ConnectionFormModal";
+import { ConfigItem } from "./configs";
+import { PlaybookSpec } from "./playbooks";
+import { Topology } from "./topology";
+import { Team, User } from "./users";
+
+export type PermissionTable = {
+  id: string;
+  description: string;
+  action: string;
+  deny?: boolean;
+  object?: string;
+  component_id?: string;
+  config_id?: string;
+  canary_id?: string;
+  playbook_id?: string;
+  created_by: string;
+  connection_id?: string;
+  person_id?: string;
+  team_id?: string;
+  updated_by: string;
+  created_at: string;
+  updated_at: string;
+  until?: string;
+  source?: string;
+};
+
+export type PermissionAPIResponse = PermissionTable & {
+  // checks: Pick<HealthCheck, "id" | "name" | "type" | "status">;
+  catalog: Pick<ConfigItem, "id" | "name" | "type" | "config_class">;
+  component: Pick<Topology, "id" | "name" | "icon">;
+  canary: {
+    id: string;
+    name: string;
+  };
+  playbook: Pick<PlaybookSpec, "id" | "name" | "icon" | "title">;
+  team: Pick<Team, "id" | "name" | "icon">;
+  connection: Pick<Connection, "id" | "name" | "type">;
+  person: User;
+  createdBy: User;
+};

src/components/Canary/CanaryLink.tsx

@@ -0,0 +1,24 @@
+import { Icon } from "@flanksource-ui/ui/Icons/Icon";
+import { Link } from "react-router-dom";
+
+type CanaryLinkProps = {
+  canary: {
+    id: string;
+    name: string;
+    icon?: string;
+  };
+};
+
+export default function CanaryLink({ canary }: CanaryLinkProps) {
+  return (
+    <Link
+      className="flex flex-row items-center gap-1"
+      to={{
+        pathname: `/settings/canaries/${canary.id}`
+      }}
+    >
+      {canary.icon && <Icon name={canary.icon} className="h-5" />}
+      <span>{canary.name}</span>
+    </Link>
+  );
+}

src/components/Configs/ConfigLink/ConfigLink.tsx

@@ -34,6 +34,10 @@ export default function ConfigLink({
 
   const data = config || configFromRequest;
 
+  // if (isLoading) {
+  //   return <TextSkeletonLoader className="h-5 w-24" />;
+  // }
+
   if (!data) {
     return null;
   }

src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx

@@ -4,10 +4,11 @@ import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
 import { ConfigItem } from "../../../../api/types/configs";
 
-type ConfigListTagsCellProps<T extends Pick<ConfigItem, "tags" | "id">> = Pick<
-  CellContext<Pick<T, "tags" | "id">, any>,
-  "getValue" | "row"
-> & {
+type ConfigListTagsCellProps<
+  T extends {
+    tags?: Record<string, any>;
+  }
+> = Pick<CellContext<T, any>, "getValue" | "row"> & {
   hideGroupByView?: boolean;
   label?: string;
   enableFilterByTag?: boolean;