feat: add permissions tabs for connection and playbooks

Fixes #2246 fix: fix minor issues related to the permissions tab
flanksource · Sep 25, 2024 · 1d2cd40 · 1d2cd40
1 parent f97e2e3
commit 1d2cd40
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 55 deletions.
diff --git a/src/components/Connections/ConnectionFormModal.tsx b/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
@@ -93,35 +97,72 @@ export default function ConnectionFormModal({
     connectionType;
 
   return (
-    <div className="flex flex-col">
-      <Modal
-        title={
-          connectionType ? (
-            <div
-              className="flex flex-row items-center gap-2 overflow-y-auto"
-              key={connectionType.title}
-            >
-              {typeof connectionType?.icon === "string" ? (
-                <Icon name={connectionType?.icon} />
-              ) : (
-                connectionType.icon
-              )}
-              <div className="text-lg font-semibold">
-                {connectionType.title} Connection Details
-              </div>
+    <Modal
+      title={
+        connectionType ? (
+          <div
+            className="flex flex-row items-center gap-2 overflow-y-auto"
+            key={connectionType.title}
+          >
+            {typeof connectionType?.icon === "string" ? (
+              <Icon name={connectionType?.icon} />
+            ) : (
+              connectionType.icon
+            )}
+            <div className="text-lg font-semibold">
+              {connectionType.title} Connection Details
             </div>
-          ) : (
-            <div className="text-lg font-semibold">Select Connection Type</div>
-          )
-        }
-        onClose={() => {
-          setIsOpen(false);
-        }}
-        open={isOpen}
-        bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto"
-        helpLink="reference/connections/"
-      >
-        {type ? (
+          </div>
+        ) : (
+          <div className="text-lg font-semibold">Select Connection Type</div>
+        )
+      }
+      onClose={() => {
+        setIsOpen(false);
+      }}
+      open={isOpen}
+      size="full"
+      bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto"
+      helpLink="reference/connections/"
+      containerClassName="h-full overflow-auto"
+    >
+      {type ? (
+        formValue?.id ? (
+          <Tabs
+            activeTab={activeTab}
+            onSelectTab={(label) => setActiveTab(label)}
+          >
+            <Tab
+              label="Edit Connection"
+              value={"form"}
+              className="flex flex-1 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={"permissions"}
+              className="flex flex-1 flex-col"
+            >
+              <PermissionsView
+                hideResourceColumn
+                permissionRequest={{
+                  connectionId: formValue.id
+                }}
+              />
+            </Tab>
+          </Tabs>
+        ) : (
           <ConnectionForm
             handleBack={() => setConnectionType(undefined)}
             connectionType={type}
@@ -132,20 +173,20 @@ export default function ConnectionFormModal({
             isSubmitting={isSubmitting}
             isDeleting={isDeleting}
           />
-        ) : formValue?.id ? (
-          <ConnectionSpecEditor
-            handleBack={() => setConnectionType(undefined)}
-            onConnectionSubmit={onConnectionSubmit}
-            onConnectionDelete={onConnectionDelete}
-            formValue={formValue}
-            className={className}
-            isSubmitting={isSubmitting}
-            isDeleting={isDeleting}
-          />
-        ) : (
-          <ConnectionListView setConnectionType={setConnectionType} />
-        )}
-      </Modal>
-    </div>
+        )
+      ) : formValue?.id ? (
+        <ConnectionSpecEditor
+          handleBack={() => setConnectionType(undefined)}
+          onConnectionSubmit={onConnectionSubmit}
+          onConnectionDelete={onConnectionDelete}
+          formValue={formValue}
+          className={className}
+          isSubmitting={isSubmitting}
+          isDeleting={isDeleting}
+        />
+      ) : (
+        <ConnectionListView setConnectionType={setConnectionType} />
+      )}
+    </Modal>
   );
 }
diff --git a/src/components/Playbooks/Settings/PlaybookSpecFormModal.tsx b/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" | "permissions">("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={"permissions"}
+            className="flex flex-1 flex-col"
+          >
+            <PermissionsView
+              hideResourceColumn
+              permissionRequest={{
+                playbookId: playbook.id
+              }}
+            />
+          </Tab>
+        </Tabs>
+      ) : (
+        <PlaybookSpecsForm onClose={onClose} {...props} />
+      )}
     </Modal>
   );
 }
diff --git a/src/pages/Settings/ConnectionsPage.tsx b/src/pages/Settings/ConnectionsPage.tsx
@@ -158,18 +158,17 @@ export function ConnectionsPage() {
               setEditedRow(val);
             }}
           />
-
-          <ConnectionFormModal
-            isOpen={isOpen}
-            setIsOpen={setIsOpen}
-            onConnectionSubmit={onSubmit}
-            onConnectionDelete={(data) => deleteConnection(data)}
-            isSubmitting={isSubmitting}
-            isDeleting={isDeleting}
-            formValue={editedRow}
-            key={editedRow?.id || "connection-form"}
-          />
         </div>
+        <ConnectionFormModal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          onConnectionSubmit={onSubmit}
+          onConnectionDelete={(data) => deleteConnection(data)}
+          isSubmitting={isSubmitting}
+          isDeleting={isDeleting}
+          formValue={editedRow}
+          key={editedRow?.id || "connection-form"}
+        />
       </SearchLayout>
     </>
   );