feat: add permissions tabs for playbooks

Author: mainawycliffe

src/components/Playbooks/Settings/PlaybookSpecFormModal.tsx

@@ -1,5 +1,8 @@
 import { PlaybookSpec } from "@flanksource-ui/api/types/playbooks";
+import PermissionsView from "@flanksource-ui/components/Permissions/PermissionsView";
 import { Modal } from "@flanksource-ui/ui/Modal";
+import { Tab, Tabs } from "@flanksource-ui/ui/Tabs/Tabs";
+import { useState } from "react";
 import PlaybookSpecModalTitle from "../PlaybookSpecModalTitle";
 import PlaybookSpecsForm from "./PlaybookSpecsForm";
 
@@ -16,6 +19,8 @@ export default function PlaybookSpecFormModal({
   onClose,
   ...props
 }: PlaybookSpecFormModalProps) {
+  const [activeTab, setActiveTab] = useState<"form" | "state">("form");
+
   return (
     <Modal
       title={
@@ -31,7 +36,34 @@ export default function PlaybookSpecFormModal({
       bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto"
       helpLink="playbooks"
     >
-      <PlaybookSpecsForm onClose={onClose} playbook={playbook} {...props} />
+      {playbook?.id ? (
+        <Tabs
+          activeTab={activeTab}
+          onSelectTab={(label) => setActiveTab(label)}
+        >
+          <Tab label="Edit" value={"form"} className="flex flex-1 flex-col">
+            <PlaybookSpecsForm
+              onClose={onClose}
+              {...props}
+              playbook={playbook}
+            />
+          </Tab>
+
+          <Tab
+            label="Permissions"
+            value={"connections"}
+            className="flex flex-1 flex-col"
+          >
+            <PermissionsView
+              permissionRequest={{
+                playbookId: playbook.id
+              }}
+            />
+          </Tab>
+        </Tabs>
+      ) : (
+        <PlaybookSpecsForm onClose={onClose} {...props} />
+      )}
     </Modal>
   );
 }