diff --git a/src/api/services/permissions.ts b/src/api/services/permissions.ts index 4daca0a9a..5a1aaf404 100644 --- a/src/api/services/permissions.ts +++ b/src/api/services/permissions.ts @@ -11,6 +11,7 @@ export type FetchPermissionsInput = { checkId?: string; canaryId?: string; playbookId?: string; + connectionId?: string; }; function composeQueryParamForFetchPermissions({ @@ -20,7 +21,8 @@ function composeQueryParamForFetchPermissions({ configId, checkId, canaryId, - playbookId + playbookId, + connectionId }: FetchPermissionsInput) { if (componentId) { return `component_id=eq.${componentId}`; @@ -43,6 +45,9 @@ function composeQueryParamForFetchPermissions({ if (playbookId) { return `playbook_id=eq.${playbookId}`; } + if (connectionId) { + return `connection_id=eq.${connectionId}`; + } return undefined; } @@ -56,14 +61,15 @@ export function fetchPermissions( const queryParam = composeQueryParamForFetchPermissions(input); const selectFields = [ "*", - "checks:check_id(id, name, status, type)", + // "checks:check_id(id, name, status, type)", "catalog:config_id(id, name, type, config_class)", "component:component_id(id, name, icon)", - "canary:canary_id(id, name, icon)", + "canary:canary_id(id, name)", "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})`, + `connection:connection_id(id,name,type)` ]; const { pageSize, pageIndex } = pagination; diff --git a/src/api/types/permissions.ts b/src/api/types/permissions.ts index 291d1edc7..2251fdf02 100644 --- a/src/api/types/permissions.ts +++ b/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,16 @@ export type PermissionTable = { }; export type PermissionAPIResponse = PermissionTable & { - checks: Pick; + // checks: Pick; catalog: Pick; component: Pick; - canary: Pick; + canary: { + id: string; + name: string; + }; playbook: Pick; team: Pick; + connection: Pick; person: User; createdBy: User; }; diff --git a/src/components/Connections/ConnectionFormModal.tsx b/src/components/Connections/ConnectionFormModal.tsx index 8db2a6dd4..56b592e32 100644 --- 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 @@ -122,16 +126,53 @@ export default function ConnectionFormModal({ helpLink="reference/connections/" > {type ? ( - setConnectionType(undefined)} - connectionType={type} - onConnectionSubmit={onConnectionSubmit} - onConnectionDelete={onConnectionDelete} - formValue={formValue} - className={className} - isSubmitting={isSubmitting} - isDeleting={isDeleting} - /> + formValue?.id ? ( + setActiveTab(label)} + className="flex-1" + > + + setConnectionType(undefined)} + connectionType={type} + onConnectionSubmit={onConnectionSubmit} + onConnectionDelete={onConnectionDelete} + formValue={formValue} + className={className} + isSubmitting={isSubmitting} + isDeleting={isDeleting} + /> + + + + + + + ) : ( + setConnectionType(undefined)} + connectionType={type} + onConnectionSubmit={onConnectionSubmit} + onConnectionDelete={onConnectionDelete} + formValue={formValue} + className={className} + isSubmitting={isSubmitting} + isDeleting={isDeleting} + /> + ) ) : formValue?.id ? ( setConnectionType(undefined)} diff --git a/src/components/Connections/ConnectionIcon.tsx b/src/components/Connections/ConnectionIcon.tsx new file mode 100644 index 000000000..a4f7d9f9e --- /dev/null +++ b/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; + 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 ( +
+ {typeof icon === "string" ? ( + + ) : ( + // if not a string, it's a react component + // eslint-disable-next-line react/jsx-no-useless-fragment + icon && <>{icon} + )} + {showLabel && {connection.name}} +
+ ); +} diff --git a/src/components/Connections/connectionTypes.tsx b/src/components/Connections/connectionTypes.tsx index 891eaa1a4..3e0a8df14 100644 --- a/src/components/Connections/connectionTypes.tsx +++ b/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) => Connection; preSubmitConverter?: (data: Record) => object; diff --git a/src/components/Permissions/PermissionsTable.tsx b/src/components/Permissions/PermissionsTable.tsx index b82473f52..4bd93c202 100644 --- a/src/components/Permissions/PermissionsTable.tsx +++ b/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"; @@ -17,18 +17,20 @@ const permissionsTableColumns: MRT_ColumnDef[] = [ size: 250, 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 (
{config && } - {check && } + {/* {check && } */} {playbook && } {canary && } {component && } + {connection && }
); }