feat: added gateway page in ui for org

2026-10-15 12:38:36 +00:00 · 2025-02-26 20:45:36 +05:30
parent 4bbe80c083
commit 7905017121
14 changed files with 504 additions and 4 deletions
@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { Helmet } from "react-helmet";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faMagnifyingGlass,
+  faPlug,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useQuery } from "@tanstack/react-query";
+import { format } from "date-fns";
+
+import {
+  EmptyState,
+  Input,
+  PageHeader,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import {
+  OrgPermissionAppConnectionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { withPermission } from "@app/hoc";
+import { gatewaysQueryKeys } from "@app/hooks/api/gateways";
+
+export const GatewayListPage = withPermission(
+  () => {
+    const [search, setSearch] = useState("");
+    const { data: gateways, isPending: isGatewayLoading } = useQuery(gatewaysQueryKeys.list());
+
+    const filteredGateway = gateways?.filter((el) =>
+      el.name.toLowerCase().includes(search.toLowerCase())
+    );
+
+    return (
+      <div className="bg-bunker-800">
+        <Helmet>
+          <title>Infisical | Gateways</title>
+          <meta property="og:image" content="/images/message.png" />
+        </Helmet>
+        <div className="flex w-full justify-center bg-bunker-800 text-white">
+          <div className="w-full max-w-7xl">
+            <PageHeader
+              className="w-full"
+              title={
+                <div className="flex w-full items-center">
+                  <span>Gateways</span>
+                  <a
+                    className="-mt-1.5"
+                    href="https://infisical.com/docs/integrations/gateways/overview"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
+                      <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                      <span>Docs</span>
+                      <FontAwesomeIcon
+                        icon={faArrowUpRightFromSquare}
+                        className="mb-[0.07rem] ml-1.5 text-[10px]"
+                      />
+                    </div>
+                  </a>
+                </div>
+              }
+              description="Create and configure connections with third-party apps for re-use across Infisical projects"
+            />
+            <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+              <div>
+                <div className="flex gap-2">
+                  <Input
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                    placeholder="Search connections..."
+                    className="flex-1"
+                  />
+                </div>
+                <TableContainer className="mt-4">
+                  <Table>
+                    <THead>
+                      <Tr>
+                        <Th className="w-1/3">Name</Th>
+                        <Th>Issued At</Th>
+                        <Th>Identity</Th>
+                        <Th className="w-5" />
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {isGatewayLoading && (
+                        <TableSkeleton innerKey="gateway-table" columns={4} key="gateway-table" />
+                      )}
+                      {filteredGateway?.map((el) => (
+                        <Tr key={el.id}>
+                          <Td>{el.name}</Td>
+                          <Td>{format(new Date(el.issuedAt), "yyyy-MM-dd")}</Td>
+                          <Td>{el.identity.name}</Td>
+                          <Td />
+                        </Tr>
+                      ))}
+                    </TBody>
+                  </Table>
+                  {!isGatewayLoading && !filteredGateway?.length && (
+                    <EmptyState
+                      title={
+                        gateways?.length
+                          ? "No Gateways match search..."
+                          : "No Gateways have been configured"
+                      }
+                      icon={gateways?.length ? faSearch : faPlug}
+                    />
+                  )}
+                </TableContainer>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  {
+    action: OrgPermissionAppConnectionActions.Read,
+    subject: OrgPermissionSubjects.AppConnections
+  }
+);
@@ -0,0 +1,23 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GatewayListPage } from "./GatewayListPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/gateways/"
+)({
+  component: GatewayListPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Gateways"
+      }
+    ]
+  })
+});
@@ -3,6 +3,7 @@ import { z } from "zod";

 import { OrgPermissionSubjects } from "@app/context";
 import {
+  OrgGatewayPermissionActions,
  OrgPermissionAppConnectionActions,
  OrgPermissionKmipActions
 } from "@app/context/OrgPermissionContext/types";
@@ -34,6 +35,15 @@ const kmipPermissionSchema = z
  })
  .optional();

+const orgGatewayPermissionSchema = z
+  .object({
+    [OrgGatewayPermissionActions.Read]: z.boolean().optional(),
+    [OrgGatewayPermissionActions.Edit]: z.boolean().optional(),
+    [OrgGatewayPermissionActions.Delete]: z.boolean().optional(),
+    [OrgGatewayPermissionActions.Create]: z.boolean().optional()
+  })
+  .optional();
+
 const adminConsolePermissionSchmea = z
  .object({
    "access-all-projects": z.boolean().optional()
@@ -72,7 +82,8 @@ export const formSchema = z.object({
      [OrgPermissionSubjects.Kms]: generalPermissionSchema,
      [OrgPermissionSubjects.ProjectTemplates]: generalPermissionSchema,
      "app-connections": appConnectionsPermissionSchema,
-      kmip: kmipPermissionSchema
+      kmip: kmipPermissionSchema,
+      [OrgPermissionSubjects.Gateway]: orgGatewayPermissionSchema
    })
    .optional()
 });
@@ -0,0 +1,182 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { OrgGatewayPermissionActions } from "@app/context/OrgPermissionContext/types";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-access",
+  Custom = "custom"
+}
+
+const PERMISSION_ACTIONS = [
+  { action: OrgGatewayPermissionActions.Read, label: "Read" },
+  { action: OrgGatewayPermissionActions.Create, label: "Create" },
+  { action: OrgGatewayPermissionActions.Edit, label: "Modify" },
+  { action: OrgGatewayPermissionActions.Delete, label: "Remove" }
+] as const;
+
+export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.gateway"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const totalActions = PERMISSION_ACTIONS.length;
+    const score = actions.map((key) => (rule?.[key] ? 1 : 0)).reduce((a, b) => a + b, 0 as number);
+
+    if (isCustom) return Permission.Custom;
+    if (score === 0) return Permission.NoAccess;
+    if (score === totalActions) return Permission.FullAccess;
+    if (score === 1 && rule?.[OrgGatewayPermissionActions.Read]) return Permission.ReadOnly;
+
+    return Permission.Custom;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  useEffect(() => {
+    const isRowCustom = selectedPermissionCategory === Permission.Custom;
+    if (isRowCustom) {
+      setIsRowExpanded.on();
+    }
+  }, []);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (!val) return;
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.FullAccess:
+        setValue(
+          "permissions.app-connections",
+          {
+            [OrgGatewayPermissionActions.Read]: true,
+            [OrgGatewayPermissionActions.Edit]: true,
+            [OrgGatewayPermissionActions.Create]: true,
+            [OrgGatewayPermissionActions.Delete]: true
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          "permissions.app-connections",
+          {
+            [OrgGatewayPermissionActions.Read]: true,
+            [OrgGatewayPermissionActions.Edit]: false,
+            [OrgGatewayPermissionActions.Create]: false,
+            [OrgGatewayPermissionActions.Delete]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+
+      case Permission.NoAccess:
+      default:
+        setValue(
+          "permissions.app-connections",
+          {
+            [OrgGatewayPermissionActions.Read]: false,
+            [OrgGatewayPermissionActions.Edit]: false,
+            [OrgGatewayPermissionActions.Create]: false,
+            [OrgGatewayPermissionActions.Delete]: false
+          },
+          { shouldDirty: true }
+        );
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>Gateways</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.gateway.${action}`}
+                    key={`permissions.gateway.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={Boolean(field.value)}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.gateways.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};