feat(identities/k8s): gateway support

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

@@ -3,6 +3,7 @@ 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";
@@ -11,6 +12,8 @@ import {
   FormControl,
   IconButton,
   Input,
+  Select,
+  SelectItem,
   Tab,
   TabList,
   TabPanel,
@@ -19,6 +22,7 @@ import {
 } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
+  gatewaysQueryKeys,
   useAddIdentityKubernetesAuth,
   useGetIdentityKubernetesAuth,
   useUpdateIdentityKubernetesAuth
@@ -32,6 +36,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 +84,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 +103,7 @@ export const IdentityKubernetesAuthForm = ({
       tokenReviewerJwt: "",
       allowedNames: "",
       allowedNamespaces: "",
+      gatewayId: null,
       allowedAudience: "",
       caCert: "",
       accessTokenTTL: "2592000",
@@ -120,6 +128,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 +166,7 @@ export const IdentityKubernetesAuthForm = ({
     accessTokenTTL,
     accessTokenMaxTTL,
     accessTokenNumUsesLimit,
+    gatewayId,
     accessTokenTrustedIps
   }: FormData) => {
     try {
@@ -172,6 +182,7 @@ export const IdentityKubernetesAuthForm = ({
           allowedAudience,
           caCert,
           identityId,
+          gatewayId: gatewayId || null,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -186,6 +197,7 @@ export const IdentityKubernetesAuthForm = ({
           allowedNames: allowedNames || "",
           allowedNamespaces: allowedNamespaces || "",
           allowedAudience: allowedAudience || "",
+          gatewayId: gatewayId || null,
           caCert: caCert || "",
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
@@ -217,6 +229,7 @@ export const IdentityKubernetesAuthForm = ({
           [
             "kubernetesHost",
             "tokenReviewerJwt",
+            "gatewayId",
             "accessTokenTTL",
             "accessTokenMaxTTL",
             "accessTokenNumUsesLimit",
@@ -280,6 +293,40 @@ export const IdentityKubernetesAuthForm = ({
               </FormControl>
             )}
           />
+
+          <Controller
+            control={control}
+            name="gatewayId"
+            defaultValue=""
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <FormControl
+                isError={Boolean(error?.message)}
+                errorText={error?.message}
+                label="Gateway"
+                isOptional
+              >
+                <Select
+                  value={value as string}
+                  onValueChange={onChange}
+                  className="w-full border border-mineshaft-500"
+                  dropdownContainerClassName="max-w-none"
+                  isLoading={isGatewayLoading}
+                  placeholder="Select Gateway"
+                  position="popper"
+                >
+                  <SelectItem value={null as unknown as string} onClick={() => onChange(undefined)}>
+                    Internet Gateway
+                  </SelectItem>
+                  {gateways?.map((el) => (
+                    <SelectItem value={el.id} key={el.id}>
+                      {el.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+
           <Controller
             control={control}
             name="allowedNames"