From c3e4eb5ae3d0aa47e57e89d80c69a61862748a19 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 25 Sep 2024 17:52:39 +0300
Subject: [PATCH] fix: don't allow deleting of crd source permissions

fix: fix failing test

feat: add form for adding permissions in resource and fix form issues

Fixes #2246
---
 .../Connections/ConnectionFormModal.tsx       |  4 ++
 .../Forms/PermissionForm.tsx                  | 66 +++++++++++--------
 .../Permissions/PermissionsView.tsx           | 34 +++++++++-
 .../Settings/PlaybookSpecFormModal.tsx        |  4 ++
 .../SchemaResourcePage/resourceTypes.tsx      |  6 +-
 src/components/Settings/ResourceTable.tsx     |  3 +-
 6 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/src/components/Connections/ConnectionFormModal.tsx b/src/components/Connections/ConnectionFormModal.tsx
index 5e4a69d00..66eb9c9b7 100644
--- a/src/components/Connections/ConnectionFormModal.tsx
+++ b/src/components/Connections/ConnectionFormModal.tsx
@@ -159,6 +159,10 @@ export default function ConnectionFormModal({
                 permissionRequest={{
                   connectionId: formValue.id
                 }}
+                showAddPermission
+                newPermissionData={{
+                  connection_id: formValue.id
+                }}
               />
             </Tab>
           </Tabs>
diff --git a/src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx b/src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx
index e9e5a9429..d788d5553 100644
--- a/src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx
+++ b/src/components/Permissions/ManagePermissions/Forms/PermissionForm.tsx
@@ -6,6 +6,7 @@ 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 CanEditResource from "@flanksource-ui/components/Settings/CanEditResource";
 import {
   toastError,
   toastSuccess
@@ -29,7 +30,7 @@ import PermissionsSubjectControls from "./PermissionSubjectControls";
 type PermissionFormProps = {
   onClose: () => void;
   isOpen: boolean;
-  data?: PermissionTable;
+  data?: Partial<PermissionTable>;
 };
 
 export default function PermissionForm({
@@ -43,7 +44,8 @@ export default function PermissionForm({
       data?.config_id ||
       data?.canary_id ||
       data?.canary_id ||
-      data?.playbook_id
+      data?.playbook_id ||
+      data?.connection_id
     );
   }, [data]);
 
@@ -107,7 +109,7 @@ export default function PermissionForm({
             config_id: data?.config_id,
             canary_id: data?.canary_id,
             playbook_id: data?.playbook_id,
-            deny: data?.deny,
+            deny: data?.deny ?? false,
             description: data?.description,
             connection_id: data?.connection_id,
             created_at: data?.created_at,
@@ -147,34 +149,42 @@ export default function PermissionForm({
               <FormikCheckbox name="deny" label="Is deny action" />
               <FormikTextArea name="description" label="Description" />
             </div>
-            <AuthorizationAccessCheck
-              resource={tables.permissions}
-              action="write"
+            <CanEditResource
+              id={data?.id}
+              name={"Permission"}
+              resourceType={"permissions"}
+              source={data?.source}
+              className="flex flex-col"
             >
-              <div
-                className={clsx(
-                  "flex items-center bg-gray-100 px-5 py-4",
-                  data?.id ? "justify-between" : "justify-end"
-                )}
+              <AuthorizationAccessCheck
+                resource={tables.permissions}
+                action="write"
               >
-                {data?.id && (
-                  <DeletePermission
-                    permissionId={data.id}
-                    onDeleted={onClose}
+                <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"
                   />
-                )}
-                <Button
-                  icon={
-                    isLoading ? (
-                      <FaSpinner className="animate-spin" />
-                    ) : undefined
-                  }
-                  type="submit"
-                  text={data?.id ? "Save" : isLoading ? "Saving ..." : "Save"}
-                  className="btn-primary"
-                />
-              </div>
-            </AuthorizationAccessCheck>
+                </div>
+              </AuthorizationAccessCheck>
+            </CanEditResource>
           </Form>
         </Formik>
       </div>
diff --git a/src/components/Permissions/PermissionsView.tsx b/src/components/Permissions/PermissionsView.tsx
index 1406fa2a6..557278631 100644
--- a/src/components/Permissions/PermissionsView.tsx
+++ b/src/components/Permissions/PermissionsView.tsx
@@ -2,10 +2,14 @@ import {
   fetchPermissions,
   FetchPermissionsInput
 } from "@flanksource-ui/api/services/permissions";
-import { PermissionAPIResponse } from "@flanksource-ui/api/types/permissions";
+import {
+  PermissionAPIResponse,
+  PermissionTable
+} 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 { Button } from "..";
 import PermissionForm from "./ManagePermissions/Forms/PermissionForm";
 import PermissionsTable from "./PermissionsTable";
 
@@ -13,16 +17,21 @@ type PermissionsViewProps = {
   permissionRequest: FetchPermissionsInput;
   setIsLoading?: (isLoading: boolean) => void;
   hideResourceColumn?: boolean;
+  newPermissionData?: Partial<PermissionTable>;
+  showAddPermission?: boolean;
 };
 
 export default function PermissionsView({
   permissionRequest,
   setIsLoading = () => {},
-  hideResourceColumn = false
+  hideResourceColumn = false,
+  newPermissionData,
+  showAddPermission = false
 }: PermissionsViewProps) {
   const [selectedPermission, setSelectedPermission] =
     useState<PermissionAPIResponse>();
   const { pageSize, pageIndex } = useReactTablePaginationState();
+  const [isPermissionModalOpen, setIsPermissionModalOpen] = useState(false);
 
   const { isLoading, data, refetch } = useQuery({
     queryKey: [
@@ -51,6 +60,17 @@ export default function PermissionsView({
 
   return (
     <>
+      {showAddPermission && (
+        <div className="flex flex-row items-center justify-between p-2">
+          <Button
+            onClick={() => {
+              setIsPermissionModalOpen(true);
+            }}
+          >
+            Add Permission
+          </Button>
+        </div>
+      )}
       <PermissionsTable
         permissions={permissions}
         isLoading={isLoading}
@@ -69,6 +89,16 @@ export default function PermissionsView({
           data={selectedPermission}
         />
       )}
+      {showAddPermission && (
+        <PermissionForm
+          data={newPermissionData}
+          isOpen={isPermissionModalOpen}
+          onClose={() => {
+            setIsPermissionModalOpen(false);
+            refetch();
+          }}
+        />
+      )}
     </>
   );
 }
diff --git a/src/components/Playbooks/Settings/PlaybookSpecFormModal.tsx b/src/components/Playbooks/Settings/PlaybookSpecFormModal.tsx
index 5ddfb9848..92f49b47a 100644
--- a/src/components/Playbooks/Settings/PlaybookSpecFormModal.tsx
+++ b/src/components/Playbooks/Settings/PlaybookSpecFormModal.tsx
@@ -59,6 +59,10 @@ export default function PlaybookSpecFormModal({
               permissionRequest={{
                 playbookId: playbook.id
               }}
+              showAddPermission
+              newPermissionData={{
+                playbook_id: playbook.id
+              }}
             />
           </Tab>
         </Tabs>
diff --git a/src/components/SchemaResourcePage/resourceTypes.tsx b/src/components/SchemaResourcePage/resourceTypes.tsx
index faa8d88b2..b9461a134 100644
--- a/src/components/SchemaResourcePage/resourceTypes.tsx
+++ b/src/components/SchemaResourcePage/resourceTypes.tsx
@@ -19,7 +19,8 @@ export type SchemaResourceType = {
     | "Connections"
     | "Log Backends"
     | "Notifications"
-    | "Feature Flags";
+    | "Feature Flags"
+    | "Permissions";
   table:
     | "teams"
     | "incident_rules"
@@ -29,7 +30,8 @@ export type SchemaResourceType = {
     | "connections"
     | "logging_backends"
     | "notifications"
-    | "properties";
+    | "properties"
+    | "permissions";
   api: "incident-commander" | "canary-checker" | "config-db";
   featureName: string;
   resourceName: string;
diff --git a/src/components/Settings/ResourceTable.tsx b/src/components/Settings/ResourceTable.tsx
index a463b3fe0..0c8c52d8f 100644
--- a/src/components/Settings/ResourceTable.tsx
+++ b/src/components/Settings/ResourceTable.tsx
@@ -266,7 +266,8 @@ const permanentlyHiddenColumnsForTableMap: Record<
   canaries: ["namespace"],
   config_scrapers: ["schedule", "namespace"],
   incident_rules: ["schedule", "namespace"],
-  teams: ["schedule", "namespace"]
+  teams: ["schedule", "namespace"],
+  permissions: ["schedule", "namespace"]
 };
 
 type ResourceTableProps = {