feat: add permissions view for connections

Author: mainawycliffe

src/api/services/permissions.ts

@@ -11,6 +11,7 @@ export type FetchPermissionsInput = {
   checkId?: string;
   canaryId?: string;
   playbookId?: string;
+  permissionId?: string;
 };
 
 function composeQueryParamForFetchPermissions({
@@ -20,7 +21,8 @@ function composeQueryParamForFetchPermissions({
   configId,
   checkId,
   canaryId,
-  playbookId
+  playbookId,
+  permissionId
 }: FetchPermissionsInput) {
   if (componentId) {
     return `component_id=eq.${componentId}`;
@@ -43,6 +45,9 @@ function composeQueryParamForFetchPermissions({
   if (playbookId) {
     return `playbook_id=eq.${playbookId}`;
   }
+  if (permissionId) {
+    return `id=eq.${permissionId}`;
+  }
   return undefined;
 }
 
@@ -63,7 +68,8 @@ export function fetchPermissions(
     "playbook:playbook_id(id, title, name, icon)",
     "team:team_id(id, name, icon)",
     `person:person_id(${AVATAR_INFO})`,
-    `createdBy:created_by(${AVATAR_INFO})`
+    `createdBy:created_by(${AVATAR_INFO})`,
+    `permissions:permissions(id,name,type)`
   ];
 
   const { pageSize, pageIndex } = pagination;

src/api/types/permissions.ts

@@ -1,5 +1,5 @@
+import { Connection } from "@flanksource-ui/components/Connections/ConnectionFormModal";
 import { ConfigItem } from "./configs";
-import { HealthCheck } from "./health";
 import { PlaybookSpec } from "./playbooks";
 import { Topology } from "./topology";
 import { Team, User } from "./users";
@@ -23,12 +23,13 @@ export type PermissionTable = {
 };
 
 export type PermissionAPIResponse = PermissionTable & {
-  checks: Pick<HealthCheck, "id" | "name" | "type" | "status">;
+  // checks: Pick<HealthCheck, "id" | "name" | "type" | "status">;
   catalog: Pick<ConfigItem, "id" | "name" | "type" | "config_class">;
   component: Pick<Topology, "id" | "name" | "icon">;
   canary: Pick<Topology, "id" | "name" | "icon">;
   playbook: Pick<PlaybookSpec, "id" | "name" | "icon" | "title">;
   team: Pick<Team, "id" | "name" | "icon">;
+  connection: Pick<Connection, "id" | "name" | "type">;
   person: User;
   createdBy: User;
 };

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,53 @@ 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
+                  permissionRequest={{
+                    permissionId: 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/Connections/ConnectionIcon.tsx

@@ -0,0 +1,30 @@
+import { Icon } from "@flanksource-ui/ui/Icons/Icon";
+import { useMemo } from "react";
+import { Connection } from "./ConnectionFormModal";
+import { connectionTypes } from "./connectionTypes";
+
+type ConnectionIconProps = {
+  connection: Pick<Connection, "type" | "name" | "id">;
+  showLabel?: boolean;
+};
+export default function ConnectionIcon({
+  connection,
+  showLabel = false
+}: ConnectionIconProps) {
+  const icon = useMemo(() => {
+    return connectionTypes.find((item) => item.value === connection.type)?.icon;
+  }, [connection.type]);
+
+  return (
+    <div className="flex flex-row items-center gap-1">
+      {typeof icon === "string" ? (
+        <Icon name={icon} className="h-5" />
+      ) : (
+        // if not a string, it's a react component
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        icon && <>{icon}</>
+      )}
+      {showLabel && <span>{connection.name}</span>}
+    </div>
+  );
+}

src/components/Connections/connectionTypes.tsx

@@ -96,7 +96,7 @@ export const enum ConnectionValueType {
 export type ConnectionType = {
   title: string;
   value: ConnectionValueType;
-  icon?: React.ReactNode | string | null;
+  icon?: JSX.Element | string | null;
   fields: ConnectionFormFields[];
   convertToFormSpecificValue?: (data: Record<string, string>) => Connection;
   preSubmitConverter?: (data: Record<string, string>) => object;

src/components/Permissions/PermissionsTable.tsx

@@ -5,8 +5,8 @@ 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 CanaryLink from "../Canary/CanaryLink";
-import { CheckLink } from "../Canary/HealthChecks/CheckLink";
 import ConfigLink from "../Configs/ConfigLink/ConfigLink";
+import ConnectionIcon from "../Connections/ConnectionIcon";
 import PlaybookSpecIcon from "../Playbooks/Settings/PlaybookSpecIcon";
 import { TopologyLink } from "../Topology/TopologyLink";
 
@@ -16,18 +16,20 @@ const permissionsTableColumns: MRT_ColumnDef<PermissionAPIResponse>[] = [
     header: "Resource",
     Cell: ({ row }) => {
       const config = row.original.catalog;
-      const check = row.original.checks;
+      // const check = row.original.checks;
       const playbook = row.original.playbook;
       const canary = row.original.canary;
       const component = row.original.component;
+      const connection = row.original.connection;
 
       return (
         <div className="flex flex-col">
           {config && <ConfigLink config={config} />}
-          {check && <CheckLink check={check} />}
+          {/* {check && <CheckLink check={check} />} */}
           {playbook && <PlaybookSpecIcon playbook={playbook} showLabel />}
           {canary && <CanaryLink canary={canary} />}
           {component && <TopologyLink topology={component} />}
+          {connection && <ConnectionIcon connection={connection} showLabel />}
         </div>
       );
     }