Merge pull request #3590 from Infisical/daniel/k8s-auth-gateway

feat(gateway): gateway support for identities

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -3,22 +3,32 @@ import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   FormControl,
   IconButton,
   Input,
+  Select,
+  SelectItem,
   Tab,
   TabList,
   TabPanel,
   Tabs,
-  TextArea
+  TextArea,
+  Tooltip
 } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import {
+  gatewaysQueryKeys,
   useAddIdentityKubernetesAuth,
   useGetIdentityKubernetesAuth,
   useUpdateIdentityKubernetesAuth
@@ -32,6 +42,7 @@ const schema = z
   .object({
     kubernetesHost: z.string().min(1),
     tokenReviewerJwt: z.string().optional(),
+    gatewayId: z.string().optional().nullable(),
     allowedNames: z.string(),
     allowedNamespaces: z.string(),
     allowedAudience: z.string(),
@@ -79,6 +90,8 @@ export const IdentityKubernetesAuthForm = ({
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityKubernetesAuth();
   const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
+  const { data: gateways, isPending: isGatewayLoading } = useQuery(gatewaysQueryKeys.list());
+
   const { data } = useGetIdentityKubernetesAuth(identityId ?? "", {
     enabled: isUpdate
   });
@@ -96,6 +109,7 @@ export const IdentityKubernetesAuthForm = ({
       tokenReviewerJwt: "",
       allowedNames: "",
       allowedNamespaces: "",
+      gatewayId: "",
       allowedAudience: "",
       caCert: "",
       accessTokenTTL: "2592000",
@@ -120,6 +134,7 @@ export const IdentityKubernetesAuthForm = ({
         allowedNamespaces: data.allowedNamespaces,
         allowedAudience: data.allowedAudience,
         caCert: data.caCert,
+        gatewayId: data.gatewayId || null,
         accessTokenTTL: String(data.accessTokenTTL),
         accessTokenMaxTTL: String(data.accessTokenMaxTTL),
         accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
@@ -157,6 +172,7 @@ export const IdentityKubernetesAuthForm = ({
     accessTokenTTL,
     accessTokenMaxTTL,
     accessTokenNumUsesLimit,
+    gatewayId,
     accessTokenTrustedIps
   }: FormData) => {
     try {
@@ -172,6 +188,7 @@ export const IdentityKubernetesAuthForm = ({
           allowedAudience,
           caCert,
           identityId,
+          gatewayId: gatewayId || null,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -186,6 +203,7 @@ export const IdentityKubernetesAuthForm = ({
           allowedNames: allowedNames || "",
           allowedNamespaces: allowedNamespaces || "",
           allowedAudience: allowedAudience || "",
+          gatewayId: gatewayId || null,
           caCert: caCert || "",
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
@@ -217,6 +235,7 @@ export const IdentityKubernetesAuthForm = ({
           [
             "kubernetesHost",
             "tokenReviewerJwt",
+            "gatewayId",
             "accessTokenTTL",
             "accessTokenMaxTTL",
             "accessTokenNumUsesLimit",
@@ -280,6 +299,62 @@ export const IdentityKubernetesAuthForm = ({
               </FormControl>
             )}
           />
+
+          <OrgPermissionCan
+            I={OrgGatewayPermissionActions.AttachGateways}
+            a={OrgPermissionSubjects.Gateway}
+          >
+            {(isAllowed) => (
+              <Controller
+                control={control}
+                name="gatewayId"
+                defaultValue=""
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                    isOptional
+                  >
+                    <Tooltip
+                      isDisabled={isAllowed}
+                      content="Restricted access. You don't have permission to attach gateways to resources."
+                    >
+                      <div>
+                        <Select
+                          isDisabled={!isAllowed}
+                          value={value as string}
+                          onValueChange={(v) => {
+                            if (v !== "") {
+                              onChange(v);
+                            }
+                          }}
+                          className="w-full border border-mineshaft-500"
+                          dropdownContainerClassName="max-w-none"
+                          isLoading={isGatewayLoading}
+                          placeholder="Default: Internet Gateway"
+                          position="popper"
+                        >
+                          <SelectItem
+                            value={null as unknown as string}
+                            onClick={() => onChange(null)}
+                          >
+                            Internet Gateway
+                          </SelectItem>
+                          {gateways?.map((el) => (
+                            <SelectItem value={el.id} key={el.id}>
+                              {el.name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </div>
+                    </Tooltip>
+                  </FormControl>
+                )}
+              />
+            )}
+          </OrgPermissionCan>
+
           <Controller
             control={control}
             name="allowedNames"

frontend/src/pages/organization/Gateways/GatewayListPage/GatewayListPage.tsx

@@ -32,7 +32,6 @@ import {
   Table,
   TableContainer,
   TableSkeleton,
-  Tag,
   TBody,
   Td,
   Th,
@@ -128,7 +127,6 @@ export const GatewayListPage = withPermission(
                       <Tr>
                         <Th className="w-1/3">Name</Th>
                         <Th>Cert Issued At</Th>
-                        <Th>Projects</Th>
                         <Th>Identity</Th>
                         <Th>
                           Health Check
@@ -151,13 +149,6 @@ export const GatewayListPage = withPermission(
                         <Tr key={el.id}>
                           <Td>{el.name}</Td>
                           <Td>{format(new Date(el.issuedAt), "yyyy-MM-dd hh:mm:ss aaa")}</Td>
-                          <Td>
-                            {el.projects.map((projectDetails) => (
-                              <Tag key={projectDetails.id} size="xs">
-                                {projectDetails.name}
-                              </Tag>
-                            ))}
-                          </Td>
                           <Td>{el.identity.name}</Td>
                           <Td>
                             {el.heartbeat

frontend/src/pages/organization/Gateways/GatewayListPage/components/EditGatewayDetailsModal.tsx

@@ -3,10 +3,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
-import { useGetUserWorkspaces, useUpdateGatewayById } from "@app/hooks/api";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { useUpdateGatewayById } from "@app/hooks/api";
 import { TGateway } from "@app/hooks/api/gateways/types";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 type Props = {
   gatewayDetails: TGateway;
@@ -14,13 +14,7 @@ type Props = {
 };
 
 const schema = z.object({
-  name: z.string(),
-  projects: z
-    .object({
-      id: z.string(),
-      name: z.string()
-    })
-    .array()
+  name: z.string()
 });
 
 export type FormData = z.infer<typeof schema>;
@@ -38,20 +32,13 @@ export const EditGatewayDetailsModal = ({ gatewayDetails, onClose }: Props) => {
   });
 
   const updateGatewayById = useUpdateGatewayById();
-  // when gateway goes to other products switch to all
-  const { data: secretManagerWorkspaces, isLoading: isSecretManagerLoading } = useGetUserWorkspaces(
-    {
-      type: ProjectType.SecretManager
-    }
-  );
 
-  const onFormSubmit = ({ name, projects }: FormData) => {
+  const onFormSubmit = ({ name }: FormData) => {
     if (isSubmitting) return;
     updateGatewayById.mutate(
       {
         id: gatewayDetails.id,
-        name,
-        projectIds: projects.map((el) => el.id)
+        name
       },
       {
         onSuccess: () => {
@@ -67,6 +54,16 @@ export const EditGatewayDetailsModal = ({ gatewayDetails, onClose }: Props) => {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
+      <NoticeBannerV2 className="mx-auto mb-4" title="Project Linking">
+        <p className="mt-1 text-xs text-mineshaft-300">
+          Since the 15th May 2025, all gateways are automatically available for use in all projects
+          and you no longer need to link them.
+          <br />
+          Organization members with the &quot;Attach Gateways&quot; permission can use gateways
+          anywhere within the organization.
+        </p>
+      </NoticeBannerV2>
+
       <Controller
         control={control}
         name="name"
@@ -76,30 +73,6 @@ export const EditGatewayDetailsModal = ({ gatewayDetails, onClose }: Props) => {
           </FormControl>
         )}
       />
-      <Controller
-        control={control}
-        name="projects"
-        render={({ field: { onChange, value }, fieldState: { error } }) => (
-          <FormControl
-            className="w-full"
-            label="Projects"
-            tooltipText="Select the project(s) that you'd like to add this gateway to"
-            errorText={error?.message}
-            isError={Boolean(error)}
-          >
-            <FilterableSelect
-              options={secretManagerWorkspaces}
-              placeholder="Select projects..."
-              value={value}
-              onChange={onChange}
-              isMulti
-              isLoading={isSecretManagerLoading}
-              getOptionValue={(option) => option.id}
-              getOptionLabel={(option) => option.name}
-            />
-          </FormControl>
-        )}
-      />
       <div className="mt-4 flex items-center">
         <Button className="mr-4" size="sm" type="submit" isLoading={isSubmitting}>
           Update

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx

@@ -1,8 +1,10 @@
+import { useMemo } from "react";
 import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useQuery } from "@tanstack/react-query";
 
 import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
-import { useGetIdentityKubernetesAuth } from "@app/hooks/api";
+import { gatewaysQueryKeys, useGetIdentityKubernetesAuth } from "@app/hooks/api";
 import { IdentityKubernetesAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
@@ -16,8 +18,14 @@ export const ViewIdentityKubernetesAuthContent = ({
   onDelete,
   popUp
 }: ViewAuthMethodProps) => {
+  const { data: gateways } = useQuery(gatewaysQueryKeys.list());
+
   const { data, isPending } = useGetIdentityKubernetesAuth(identityId);
 
+  const selectedGateway = useMemo(() => {
+    return gateways?.find((gateway) => gateway.id === data?.gatewayId) || null;
+  }, [gateways, data?.gatewayId]);
+
   if (isPending) {
     return (
       <div className="flex w-full items-center justify-center">
@@ -69,6 +77,7 @@ export const ViewIdentityKubernetesAuthContent = ({
       >
         {data.kubernetesHost}
       </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Gateway">{selectedGateway?.name}</IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="Token Reviewer JWT">
         {data.tokenReviewerJwt ? (
           <Tooltip

frontend/src/pages/organization/RoleByIDPage/components/OrgRoleModifySection.utils.ts

@@ -69,7 +69,8 @@ const orgGatewayPermissionSchema = z
     [OrgGatewayPermissionActions.ListGateways]: z.boolean().optional(),
     [OrgGatewayPermissionActions.EditGateways]: z.boolean().optional(),
     [OrgGatewayPermissionActions.DeleteGateways]: z.boolean().optional(),
-    [OrgGatewayPermissionActions.CreateGateways]: z.boolean().optional()
+    [OrgGatewayPermissionActions.CreateGateways]: z.boolean().optional(),
+    [OrgGatewayPermissionActions.AttachGateways]: z.boolean().optional()
   })
   .optional();
 

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx

@@ -27,7 +27,8 @@ const PERMISSION_ACTIONS = [
   { action: OrgGatewayPermissionActions.ListGateways, label: "List Gateways" },
   { action: OrgGatewayPermissionActions.CreateGateways, label: "Create Gateways" },
   { action: OrgGatewayPermissionActions.EditGateways, label: "Edit Gateways" },
-  { action: OrgGatewayPermissionActions.DeleteGateways, label: "Delete Gateways" }
+  { action: OrgGatewayPermissionActions.DeleteGateways, label: "Delete Gateways" },
+  { action: OrgGatewayPermissionActions.AttachGateways, label: "Attach Gateways" }
 ] as const;
 
 export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props) => {