feat: add permissions tabs for connection and playbooks

Fixes #2246

Author: mainawycliffe

src/components/Connections/ConnectionFormModal.tsx

@@ -1,6 +1,8 @@
+import { Tab, Tabs } from "@flanksource-ui/ui/Tabs/Tabs";
 import React, { useEffect, useState } from "react";
 import { Icon } from "../../ui/Icons/Icon";
 import { Modal } from "../../ui/Modal";
+import PermissionsView from "../Permissions/PermissionsView";
 import ConnectionForm from "./ConnectionForm";
 import ConnectionListView from "./ConnectionListView";
 import ConnectionSpecEditor from "./ConnectionSpecEditor";
@@ -81,6 +83,8 @@ export default function ConnectionFormModal({
     ConnectionType | undefined
   >(() => connectionTypes.find((item) => item.title === formValue?.type));
 
+  const [activeTab, setActiveTab] = useState<"form" | "permissions">("form");
+
   useEffect(() => {
     let connection = connectionTypes.find(
       (item) => item.value === formValue?.type
@@ -122,16 +126,54 @@ export default function ConnectionFormModal({
         helpLink="reference/connections/"
       >
         {type ? (
-          <ConnectionForm
-            handleBack={() => setConnectionType(undefined)}
-            connectionType={type}
-            onConnectionSubmit={onConnectionSubmit}
-            onConnectionDelete={onConnectionDelete}
-            formValue={formValue}
-            className={className}
-            isSubmitting={isSubmitting}
-            isDeleting={isDeleting}
-          />
+          formValue?.id ? (
+            <Tabs
+              activeTab={activeTab}
+              onSelectTab={(label) => setActiveTab(label)}
+              className="flex-1"
+            >
+              <Tab
+                label="Edit Connection"
+                value={"form"}
+                className="flex flex-col"
+              >
+                <ConnectionForm
+                  handleBack={() => setConnectionType(undefined)}
+                  connectionType={type}
+                  onConnectionSubmit={onConnectionSubmit}
+                  onConnectionDelete={onConnectionDelete}
+                  formValue={formValue}
+                  className={className}
+                  isSubmitting={isSubmitting}
+                  isDeleting={isDeleting}
+                />
+              </Tab>
+
+              <Tab
+                label="Permissions"
+                value={"connections"}
+                className="flex flex-col"
+              >
+                <PermissionsView
+                  hideResourceColumn
+                  permissionRequest={{
+                    connectionId: formValue.id
+                  }}
+                />
+              </Tab>
+            </Tabs>
+          ) : (
+            <ConnectionForm
+              handleBack={() => setConnectionType(undefined)}
+              connectionType={type}
+              onConnectionSubmit={onConnectionSubmit}
+              onConnectionDelete={onConnectionDelete}
+              formValue={formValue}
+              className={className}
+              isSubmitting={isSubmitting}
+              isDeleting={isDeleting}
+            />
+          )
         ) : formValue?.id ? (
           <ConnectionSpecEditor
             handleBack={() => setConnectionType(undefined)}

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,35 @@ 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
+              hideResourceColumn
+              permissionRequest={{
+                playbookId: playbook.id
+              }}
+            />
+          </Tab>
+        </Tabs>
+      ) : (
+        <PlaybookSpecsForm onClose={onClose} {...props} />
+      )}
     </Modal>
   );
 }