From 7bbcab8ccbacc3a8f79c0890b4a73aeb438941b0 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 25 Sep 2024 10:31:26 +0300
Subject: [PATCH] feat: add permissions page with ability to manage permissions

Fixes #2246

chore: enable hiding resource column

fix: make minor adjustments to resource display
---
 src/App.tsx                                   |  17 ++
 src/api/services/permissions.ts               |  98 ++++++++++
 src/api/types/permissions.ts                  |  40 ++++
 .../Forms/AddPermissionButton.tsx             |  16 ++
 .../Forms/DeletePermission.tsx                |  65 +++++++
 .../FormikPermissionSelectResourceFields.tsx  |  68 +++++++
 .../Forms/PermissionForm.tsx                  | 183 ++++++++++++++++++
 .../Forms/PermissionResource.tsx              |  26 +++
 .../Forms/PermissionSubjectControls.tsx       |  57 ++++++
 .../Permissions/PermissionsTable.tsx          | 142 ++++++++++++++
 .../Permissions/PermissionsView.tsx           |  74 +++++++
 src/context/UserAccessContext/permissions.ts  |   3 +-
 src/pages/Settings/PermissionsPage.tsx        |  60 ++++++
 src/services/permissions/features.ts          |   3 +-
 14 files changed, 850 insertions(+), 2 deletions(-)
 create mode 100644 src/api/services/permissions.ts
 create mode 100644 src/api/types/permissions.ts
 create mode 100644 src/components/Permissions/ManagePermissions/Forms/AddPermissionButton.tsx
 create mode 100644 src/components/Permissions/ManagePermissions/Forms/DeletePermission.tsx
 create mode 100644 src/components/Permissions/ManagePermissions/Forms/FormikPermissionSelectResourceFields.tsx
 create mode 100644 src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx
 create mode 100644 src/components/Permissions/ManagePermissions/Forms/PermissionResource.tsx
 create mode 100644 src/components/Permissions/ManagePermissions/Forms/PermissionSubjectControls.tsx
 create mode 100644 src/components/Permissions/PermissionsTable.tsx
 create mode 100644 src/components/Permissions/PermissionsView.tsx
 create mode 100644 src/pages/Settings/PermissionsPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 86b6b4b23..3d541f768 100644
--- a/src/App.tsx
+++ b/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(
diff --git a/src/api/services/permissions.ts b/src/api/services/permissions.ts
new file mode 100644
index 000000000..d4ba39174
--- /dev/null
+++ b/src/api/services/permissions.ts
@@ -0,0 +1,98 @@
+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)
+  );
+}
+
+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.patch(`/permissions?id=eq.${id}`, {
+    deleted_at: "now()"
+  });
+}
diff --git a/src/api/types/permissions.ts b/src/api/types/permissions.ts
new file mode 100644
index 000000000..5e5edb974
--- /dev/null
+++ b/src/api/types/permissions.ts
@@ -0,0 +1,40 @@
+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;
+  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;
+};
diff --git a/src/components/Permissions/ManagePermissions/Forms/AddPermissionButton.tsx b/src/components/Permissions/ManagePermissions/Forms/AddPermissionButton.tsx
new file mode 100644
index 000000000..17e3343b3
--- /dev/null
+++ b/src/components/Permissions/ManagePermissions/Forms/AddPermissionButton.tsx
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { AiFillPlusCircle } from "react-icons/ai";
+import PermissionForm from "./PermissionForm";
+
+export default function AddPermissionButton() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button type="button" className="" onClick={() => setIsOpen(true)}>
+        <AiFillPlusCircle size={32} className="text-blue-600" />
+      </button>
+      <PermissionForm isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+}
diff --git a/src/components/Permissions/ManagePermissions/Forms/DeletePermission.tsx b/src/components/Permissions/ManagePermissions/Forms/DeletePermission.tsx
new file mode 100644
index 000000000..eb8be9a11
--- /dev/null
+++ b/src/components/Permissions/ManagePermissions/Forms/DeletePermission.tsx
@@ -0,0 +1,65 @@
+import { deletePermission } from "@flanksource-ui/api/services/permissions";
+import {
+  toastError,
+  toastSuccess
+} from "@flanksource-ui/components/Toast/toast";
+import { ConfirmationPromptDialog } from "@flanksource-ui/ui/AlertDialog/ConfirmationPromptDialog";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { useCallback, useState } from "react";
+import { FaCircleNotch, FaTrash } from "react-icons/fa";
+
+export default function DeletePermission({
+  permissionId,
+  onDeleted = () => {}
+}: {
+  permissionId: string;
+  onDeleted: () => void;
+}) {
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+
+  const { mutate: deleteResource, isLoading } = useMutation({
+    mutationFn: async (id: string) => {
+      const res = await deletePermission(id);
+      return res.data;
+    },
+    onSuccess: (_) => {
+      toastSuccess("Permission deleted");
+      onDeleted();
+    },
+    onError: (error: AxiosError) => {
+      toastError(error.message);
+    }
+  });
+
+  const onDeleteResource = useCallback(() => {
+    setIsConfirmDialogOpen(false);
+    deleteResource(permissionId);
+  }, [deleteResource, permissionId]);
+
+  return (
+    <>
+      <Button
+        text="Delete"
+        disabled={isLoading}
+        icon={
+          !isLoading ? <FaTrash /> : <FaCircleNotch className="animate-spin" />
+        }
+        className="btn-danger"
+        onClick={() => setIsConfirmDialogOpen(true)}
+      />
+
+      {isConfirmDialogOpen && (
+        <ConfirmationPromptDialog
+          title="Delete Permission"
+          description="Are you sure you want to permission?"
+          onConfirm={onDeleteResource}
+          isOpen={isConfirmDialogOpen}
+          onClose={() => setIsConfirmDialogOpen(false)}
+          className="z-[9999]"
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/Permissions/ManagePermissions/Forms/FormikPermissionSelectResourceFields.tsx b/src/components/Permissions/ManagePermissions/Forms/FormikPermissionSelectResourceFields.tsx
new file mode 100644
index 000000000..c1f04dec1
--- /dev/null
+++ b/src/components/Permissions/ManagePermissions/Forms/FormikPermissionSelectResourceFields.tsx
@@ -0,0 +1,68 @@
+import FormikCanaryDropdown from "@flanksource-ui/components/Forms/Formik/FormikCanaryDropdown";
+import FormikConnectionField from "@flanksource-ui/components/Forms/Formik/FormikConnectionField";
+import FormikPlaybooksDropdown from "@flanksource-ui/components/Forms/Formik/FormikPlaybooksDropdown";
+import FormikResourceSelectorDropdown from "@flanksource-ui/components/Forms/Formik/FormikResourceSelectorDropdown";
+import { Switch } from "@flanksource-ui/ui/FormControls/Switch";
+import { useFormikContext } from "formik";
+import { useState } from "react";
+
+export default function FormikPermissionSelectResourceFields() {
+  const { setFieldValue } = useFormikContext<Record<string, any>>();
+
+  const [switchOption, setSwitchOption] = useState<
+    "Component" | "Catalog" | "Canary" | "Playbook" | "Connection"
+  >("Catalog");
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className={`form-label`}>Resource</label>
+      <div>
+        <div className="flex w-full flex-row">
+          <Switch
+            options={["Catalog", "Component", "Connection", "Playbook"]}
+            className="w-auto"
+            itemsClassName=""
+            defaultValue="Go Template"
+            value={switchOption}
+            onChange={(v) => {
+              setSwitchOption(v);
+              setFieldValue("config_id", undefined);
+              setFieldValue("check_id", undefined);
+              setFieldValue("canary_id", undefined);
+              setFieldValue("component_id", undefined);
+              setFieldValue("playbook_id", undefined);
+            }}
+          />
+        </div>
+
+        {switchOption === "Catalog" && (
+          <FormikResourceSelectorDropdown
+            required
+            name="config_id"
+            configResourceSelector={[{}]}
+          />
+        )}
+
+        {switchOption === "Component" && (
+          <FormikResourceSelectorDropdown
+            required
+            name="component_id"
+            componentResourceSelector={[{}]}
+          />
+        )}
+
+        {switchOption === "Playbook" && (
+          <FormikPlaybooksDropdown required name="playbook_id" />
+        )}
+
+        {switchOption === "Canary" && (
+          <FormikCanaryDropdown required name="canary_id" />
+        )}
+
+        {switchOption === "Connection" && (
+          <FormikConnectionField required name="connection_id" />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx b/src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx
new file mode 100644
index 000000000..e9e5a9429
--- /dev/null
+++ b/src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx
@@ -0,0 +1,183 @@
+import {
+  addPermission,
+  updatePermission
+} from "@flanksource-ui/api/services/permissions";
+import { PermissionTable } from "@flanksource-ui/api/types/permissions";
+import FormikCheckbox from "@flanksource-ui/components/Forms/Formik/FormikCheckbox";
+import FormikTextArea from "@flanksource-ui/components/Forms/Formik/FormikTextArea";
+import FormikTextInput from "@flanksource-ui/components/Forms/Formik/FormikTextInput";
+import {
+  toastError,
+  toastSuccess
+} from "@flanksource-ui/components/Toast/toast";
+import { useUser } from "@flanksource-ui/context";
+import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import { Modal } from "@flanksource-ui/ui/Modal";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import clsx from "clsx";
+import { Form, Formik } from "formik";
+import { useMemo } from "react";
+import { FaSpinner } from "react-icons/fa";
+import { AuthorizationAccessCheck } from "../../AuthorizationAccessCheck";
+import DeletePermission from "./DeletePermission";
+import FormikPermissionSelectResourceFields from "./FormikPermissionSelectResourceFields";
+import PermissionResource from "./PermissionResource";
+import PermissionsSubjectControls from "./PermissionSubjectControls";
+
+type PermissionFormProps = {
+  onClose: () => void;
+  isOpen: boolean;
+  data?: PermissionTable;
+};
+
+export default function PermissionForm({
+  onClose,
+  isOpen = false,
+  data
+}: PermissionFormProps) {
+  const isResourceIdProvided = useMemo(() => {
+    return (
+      data?.component_id ||
+      data?.config_id ||
+      data?.canary_id ||
+      data?.canary_id ||
+      data?.playbook_id
+    );
+  }, [data]);
+
+  const { user } = useUser();
+
+  const { isLoading: adding, mutate: add } = useMutation({
+    mutationFn: async (data: PermissionTable) => {
+      const res = await addPermission({
+        ...data,
+        created_by: user?.id!
+      });
+      return res.data;
+    },
+    onSuccess: () => {
+      // do something
+      toastSuccess("Permission added");
+      onClose();
+    },
+    onError: (error: AxiosError) => {
+      // do something
+      console.error(error);
+      toastError(error.message);
+    }
+  });
+
+  const { isLoading: updating, mutate: update } = useMutation({
+    mutationFn: async (data: PermissionTable) => {
+      const res = await updatePermission({
+        ...data,
+        updated_by: user?.id!
+      });
+      return res.data;
+    },
+    onSuccess: () => {
+      // do something
+      toastSuccess("Permission updated");
+      onClose();
+    },
+    onError: (error: AxiosError) => {
+      // do something
+      console.error(error);
+      toastError(error.message);
+    }
+  });
+
+  const isLoading = adding || updating;
+
+  return (
+    <Modal
+      title={data?.id ? "Edit Permission" : "Add Permission"}
+      onClose={onClose}
+      open={isOpen}
+      bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto"
+      helpLink="/installation/saas/agent"
+    >
+      <div className="flex flex-1 flex-col gap-2">
+        <Formik<Partial<PermissionTable>>
+          initialValues={{
+            action: data?.action,
+            component_id: data?.component_id,
+            config_id: data?.config_id,
+            canary_id: data?.canary_id,
+            playbook_id: data?.playbook_id,
+            deny: data?.deny,
+            description: data?.description,
+            connection_id: data?.connection_id,
+            created_at: data?.created_at,
+            created_by: data?.created_by,
+            updated_at: data?.updated_at,
+            updated_by: data?.updated_by,
+            id: data?.id,
+            person_id: data?.person_id,
+            team_id: data?.team_id,
+            until: data?.until,
+            source: data?.source || "UI"
+          }}
+          onSubmit={(v) => {
+            if (!data?.id) {
+              return add({
+                ...v
+              } as PermissionTable);
+            } else {
+              return update({
+                ...v
+              } as PermissionTable);
+            }
+          }}
+        >
+          <Form className="flex flex-1 flex-col gap-2 overflow-y-auto">
+            <div className="flex flex-1 flex-col gap-3 p-4">
+              {isResourceIdProvided ? (
+                <div className="flex flex-col gap-2">
+                  <label className="text-sm font-semibold">Resource</label>
+                  <PermissionResource />
+                </div>
+              ) : (
+                <FormikPermissionSelectResourceFields />
+              )}
+              <PermissionsSubjectControls />
+              <FormikTextInput name="action" label="Action" />
+              <FormikCheckbox name="deny" label="Is deny action" />
+              <FormikTextArea name="description" label="Description" />
+            </div>
+            <AuthorizationAccessCheck
+              resource={tables.permissions}
+              action="write"
+            >
+              <div
+                className={clsx(
+                  "flex items-center bg-gray-100 px-5 py-4",
+                  data?.id ? "justify-between" : "justify-end"
+                )}
+              >
+                {data?.id && (
+                  <DeletePermission
+                    permissionId={data.id}
+                    onDeleted={onClose}
+                  />
+                )}
+                <Button
+                  icon={
+                    isLoading ? (
+                      <FaSpinner className="animate-spin" />
+                    ) : undefined
+                  }
+                  type="submit"
+                  text={data?.id ? "Save" : isLoading ? "Saving ..." : "Save"}
+                  className="btn-primary"
+                />
+              </div>
+            </AuthorizationAccessCheck>
+          </Form>
+        </Formik>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/Permissions/ManagePermissions/Forms/PermissionResource.tsx b/src/components/Permissions/ManagePermissions/Forms/PermissionResource.tsx
new file mode 100644
index 000000000..4c1098bfc
--- /dev/null
+++ b/src/components/Permissions/ManagePermissions/Forms/PermissionResource.tsx
@@ -0,0 +1,26 @@
+import ConfigLink from "@flanksource-ui/components/Configs/ConfigLink/ConfigLink";
+import ConnectionLink from "@flanksource-ui/components/Connections/ConnectionLink";
+import { PlaybookSpecLabel } from "@flanksource-ui/components/Playbooks/Settings/PlaybookSpecIcon";
+import { TopologyLink } from "@flanksource-ui/components/Topology/TopologyLink";
+import { useFormikContext } from "formik";
+
+export default function PermissionResource() {
+  const { values } = useFormikContext<Record<string, string>>();
+
+  const componentId = values.component_id;
+  const playbookId = values.playbook_id;
+  const configId = values.config_id;
+  const connectionId = values.connection_id;
+
+  return (
+    <div className="flex flex-row items-center">
+      {componentId && (
+        <TopologyLink viewType="label" topologyId={componentId} />
+      )}
+      {playbookId && <PlaybookSpecLabel playbookId={playbookId} />}
+      {/*  {canaryId && <TopologyLink viewType="label" topology={canaryId} />} */}
+      {configId && <ConfigLink configId={configId} />}
+      {connectionId && <ConnectionLink connectionId={connectionId} />}
+    </div>
+  );
+}
diff --git a/src/components/Permissions/ManagePermissions/Forms/PermissionSubjectControls.tsx b/src/components/Permissions/ManagePermissions/Forms/PermissionSubjectControls.tsx
new file mode 100644
index 000000000..74405b7df
--- /dev/null
+++ b/src/components/Permissions/ManagePermissions/Forms/PermissionSubjectControls.tsx
@@ -0,0 +1,57 @@
+import FormikPeopleDropdown from "@flanksource-ui/components/Forms/Formik/FormikPeopleDropdown";
+import FormikTeamsDropdown from "@flanksource-ui/components/Forms/Formik/FormikTeamsDropdown";
+import { Switch } from "@flanksource-ui/ui/FormControls/Switch";
+import { useFormikContext } from "formik";
+import { useEffect, useState } from "react";
+
+export default function PermissionsSubjectControls() {
+  const { values, setFieldValue } = useFormikContext<Record<string, any>>();
+
+  const teamId = values.team_id;
+  const personId = values.person_id;
+
+  const [switchOption, setSwitchOption] = useState<"Team" | "Person">(() => {
+    if (teamId) return "Team";
+    if (personId) return "Person";
+    return "Team";
+  });
+
+  useEffect(() => {
+    if (teamId) {
+      setSwitchOption("Team");
+    } else if (personId) {
+      setSwitchOption("Person");
+    }
+  }, [teamId, personId]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className={`form-label`}>Subject</label>
+      <div>
+        <div className="flex w-full flex-row">
+          <Switch
+            options={["Team", "Person"]}
+            className="w-auto"
+            itemsClassName=""
+            defaultValue="Go Template"
+            value={switchOption}
+            onChange={(v) => {
+              setSwitchOption(v);
+              if (v === "Team") {
+                setFieldValue("person_id", undefined);
+              } else {
+                setFieldValue("team_id", undefined);
+              }
+            }}
+          />
+        </div>
+
+        {switchOption === "Team" ? (
+          <FormikTeamsDropdown required name="team_id" />
+        ) : (
+          <FormikPeopleDropdown required name="person_id" />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Permissions/PermissionsTable.tsx b/src/components/Permissions/PermissionsTable.tsx
new file mode 100644
index 000000000..caab93772
--- /dev/null
+++ b/src/components/Permissions/PermissionsTable.tsx
@@ -0,0 +1,142 @@
+import { PermissionAPIResponse } from "@flanksource-ui/api/types/permissions";
+import { Avatar } from "@flanksource-ui/ui/Avatar";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { Icon } from "@flanksource-ui/ui/Icons/Icon";
+import { MRTDateCell } from "@flanksource-ui/ui/MRTDataTable/Cells/MRTDateCells";
+import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
+import { MRT_ColumnDef } from "mantine-react-table";
+import ConfigLink from "../Configs/ConfigLink/ConfigLink";
+import ConnectionIcon from "../Connections/ConnectionIcon";
+import PlaybookSpecIcon from "../Playbooks/Settings/PlaybookSpecIcon";
+import { TopologyLink } from "../Topology/TopologyLink";
+
+const permissionsTableColumns: MRT_ColumnDef<PermissionAPIResponse>[] = [
+  {
+    id: "Resource",
+    header: "Resource",
+    enableHiding: true,
+    size: 250,
+    Cell: ({ row }) => {
+      const config = row.original.catalog;
+      // const check = row.original.checks;
+      const playbook = row.original.playbook;
+      const component = row.original.component;
+      const connection = row.original.connection;
+
+      return (
+        <div className="flex flex-col">
+          {config && <ConfigLink config={config} />}
+          {/* {check && <CheckLink check={check} />} */}
+          {playbook && <PlaybookSpecIcon playbook={playbook} showLabel />}
+          {component && (
+            <TopologyLink
+              topology={component}
+              className="h-5 w-5 text-gray-600"
+              linkClassName="text-gray-600"
+              size="md"
+            />
+          )}
+          {connection && <ConnectionIcon connection={connection} showLabel />}
+        </div>
+      );
+    }
+  },
+  {
+    header: "Subject",
+    size: 100,
+    Cell: ({ row }) => {
+      const team = row.original.team;
+      const person = row.original.person;
+
+      if (person) {
+        return (
+          <div className="flex flex-row items-center gap-2">
+            <Avatar user={person} />
+            <span>{person.name}</span>
+          </div>
+        );
+      }
+
+      if (team) {
+        return (
+          <div className="flex flex-row items-center gap-2">
+            <Icon name={team.icon} className="h-5 w-5 text-gray-600" />
+            <span>{team.name}</span>
+          </div>
+        );
+      }
+
+      return null;
+    }
+  },
+  {
+    id: "action",
+    header: "Action",
+    size: 100,
+    Cell: ({ row }) => {
+      const action = row.original.action;
+      const deny = row.original.deny;
+
+      return (
+        <div>
+          <span className="px-2">{action}</span>
+          {deny && <Badge text="deny" />}
+        </div>
+      );
+    }
+  },
+  {
+    id: "updated",
+    size: 100,
+    header: "Updated",
+    accessorFn: (row) => row.updated_at,
+    Cell: MRTDateCell
+  },
+  {
+    id: "created",
+    size: 100,
+    header: "Created",
+    accessorFn: (row) => row.created_at,
+    Cell: MRTDateCell
+  },
+  {
+    id: "createdBy",
+    header: "Created By",
+    size: 100,
+    Cell: ({ row }) => {
+      const createdBy = row.original.createdBy;
+      return <Avatar user={createdBy} />;
+    }
+  }
+];
+
+type PermissionsTableProps = {
+  permissions: PermissionAPIResponse[];
+  isLoading: boolean;
+  pageCount: number;
+  totalEntries: number;
+  handleRowClick?: (row: PermissionAPIResponse) => void;
+  hideResourceColumn?: boolean;
+};
+
+export default function PermissionsTable({
+  permissions,
+  isLoading,
+  pageCount,
+  totalEntries,
+  hideResourceColumn = false,
+  handleRowClick = () => {}
+}: PermissionsTableProps) {
+  return (
+    <MRTDataTable
+      columns={permissionsTableColumns}
+      data={permissions}
+      isLoading={isLoading}
+      manualPageCount={pageCount}
+      totalRowCount={totalEntries}
+      enableServerSidePagination
+      onRowClick={handleRowClick}
+      hiddenColumns={hideResourceColumn ? ["Resource"] : []}
+    />
+  );
+}
diff --git a/src/components/Permissions/PermissionsView.tsx b/src/components/Permissions/PermissionsView.tsx
new file mode 100644
index 000000000..1406fa2a6
--- /dev/null
+++ b/src/components/Permissions/PermissionsView.tsx
@@ -0,0 +1,74 @@
+import {
+  fetchPermissions,
+  FetchPermissionsInput
+} from "@flanksource-ui/api/services/permissions";
+import { PermissionAPIResponse } from "@flanksource-ui/api/types/permissions";
+import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import PermissionForm from "./ManagePermissions/Forms/PermissionForm";
+import PermissionsTable from "./PermissionsTable";
+
+type PermissionsViewProps = {
+  permissionRequest: FetchPermissionsInput;
+  setIsLoading?: (isLoading: boolean) => void;
+  hideResourceColumn?: boolean;
+};
+
+export default function PermissionsView({
+  permissionRequest,
+  setIsLoading = () => {},
+  hideResourceColumn = false
+}: PermissionsViewProps) {
+  const [selectedPermission, setSelectedPermission] =
+    useState<PermissionAPIResponse>();
+  const { pageSize, pageIndex } = useReactTablePaginationState();
+
+  const { isLoading, data, refetch } = useQuery({
+    queryKey: [
+      "permissions",
+      permissionRequest,
+      {
+        pageIndex,
+        pageSize
+      }
+    ],
+    queryFn: () =>
+      fetchPermissions(permissionRequest, {
+        pageIndex,
+        pageSize
+      })
+    // enabled: isEnabled
+  });
+
+  useEffect(() => {
+    setIsLoading(isLoading);
+  }, [isLoading, setIsLoading]);
+
+  const totalEntries = data?.totalEntries || 0;
+  const pageCount = totalEntries ? Math.ceil(totalEntries / pageSize) : -1;
+  const permissions = data?.data || [];
+
+  return (
+    <>
+      <PermissionsTable
+        permissions={permissions}
+        isLoading={isLoading}
+        pageCount={pageCount}
+        totalEntries={totalEntries}
+        handleRowClick={(row) => setSelectedPermission(row)}
+        hideResourceColumn={hideResourceColumn}
+      />
+      {selectedPermission && (
+        <PermissionForm
+          isOpen={!!selectedPermission}
+          onClose={() => {
+            setSelectedPermission(undefined);
+            refetch();
+          }}
+          data={selectedPermission}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/context/UserAccessContext/permissions.ts b/src/context/UserAccessContext/permissions.ts
index 9ddb45728..5dfbd5c93 100644
--- a/src/context/UserAccessContext/permissions.ts
+++ b/src/context/UserAccessContext/permissions.ts
@@ -18,7 +18,8 @@ export const tables = {
   integrations: "integrations",
   notifications: "notifications",
   playbooks: "playbooks",
-  playbook_runs: "playbook_runs"
+  playbook_runs: "playbook_runs",
+  permissions: "permissions"
 };
 
 export const permDefs = {
diff --git a/src/pages/Settings/PermissionsPage.tsx b/src/pages/Settings/PermissionsPage.tsx
new file mode 100644
index 000000000..a6f2ba767
--- /dev/null
+++ b/src/pages/Settings/PermissionsPage.tsx
@@ -0,0 +1,60 @@
+import { SearchLayout } from "@flanksource-ui/components/Layout/SearchLayout";
+import { AuthorizationAccessCheck } from "@flanksource-ui/components/Permissions/AuthorizationAccessCheck";
+import AddPermissionButton from "@flanksource-ui/components/Permissions/ManagePermissions/Forms/AddPermissionButton";
+import PermissionsView from "@flanksource-ui/components/Permissions/PermissionsView";
+import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
+import {
+  BreadcrumbNav,
+  BreadcrumbRoot
+} from "@flanksource-ui/ui/BreadcrumbNav";
+import { Head } from "@flanksource-ui/ui/Head";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+export function PermissionsPage() {
+  const [isLoading, setIsLoading] = useState(false);
+  const client = useQueryClient();
+
+  return (
+    <>
+      <Head prefix="Permissions" />
+      <SearchLayout
+        title={
+          <BreadcrumbNav
+            list={[
+              <BreadcrumbRoot
+                link="/settings/permissions"
+                key="permissions-root-item"
+              >
+                Permissions
+              </BreadcrumbRoot>,
+              <AuthorizationAccessCheck
+                key={"add-button"}
+                resource={tables.permissions}
+                action="write"
+              >
+                <AddPermissionButton />
+              </AuthorizationAccessCheck>
+            ]}
+          />
+        }
+        onRefresh={() =>
+          client.refetchQueries({
+            queryKey: ["permissions"]
+          })
+        }
+        contentClass="p-0 h-full"
+        loading={isLoading}
+      >
+        <div className="flex h-full flex-col overflow-y-auto px-6 pb-0">
+          <div className="flex h-full flex-col overflow-y-auto py-6">
+            <PermissionsView
+              permissionRequest={{}}
+              setIsLoading={setIsLoading}
+            />
+          </div>
+        </div>
+      </SearchLayout>
+    </>
+  );
+}
diff --git a/src/services/permissions/features.ts b/src/services/permissions/features.ts
index 1e157f161..b3a2272e7 100644
--- a/src/services/permissions/features.ts
+++ b/src/services/permissions/features.ts
@@ -20,7 +20,8 @@ export const features = {
   "settings.organization_profile": "settings.organization_profile",
   "settings.notifications": "settings.notifications",
   "settings.playbooks": "settings.playbooks",
-  "settings.integrations": "settings.integrations"
+  "settings.integrations": "settings.integrations",
+  "settings.permissions": "settings.permissions"
 } as const;
 
 export const featureToParentMap = {