feat: added instance gateway setup ui

frontend/src/hooks/api/admin/index.ts

@@ -1,7 +1,9 @@
 export {
   useAdminDeleteUser,
   useCreateAdminUser,
+  useSetupInstanceGatewayConfig,
   useUpdateAdminSlackConfig,
+  useUpdateInstanceGatewayConfig,
   useUpdateServerConfig,
   useUpdateServerEncryptionStrategy
 } from "./mutation";

frontend/src/hooks/api/admin/mutation.ts

@@ -9,6 +9,7 @@ import {
   AdminSlackConfig,
   RootKeyEncryptionStrategy,
   TCreateAdminUserDTO,
+  TDisableInstanceGatewayConfigDTO,
   TServerConfig,
   TUpdateAdminSlackConfigDTO
 } from "./types";
@@ -98,3 +99,27 @@ export const useUpdateServerEncryptionStrategy = () => {
     }
   });
 };
+
+export const useSetupInstanceGatewayConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => {
+      await apiRequest.post("/api/v1/admin/gateway");
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(adminQueryKeys.getInstanceGatewayConfig());
+    }
+  });
+};
+
+export const useUpdateInstanceGatewayConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (dto: TDisableInstanceGatewayConfigDTO) => {
+      await apiRequest.patch("/api/v1/admin/gateway", dto);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(adminQueryKeys.getInstanceGatewayConfig());
+    }
+  });
+};

frontend/src/hooks/api/admin/queries.ts

@@ -1,4 +1,5 @@
-import { useInfiniteQuery, useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { queryOptions, useInfiniteQuery, useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 
 import { apiRequest } from "@app/config/request";
 
@@ -7,6 +8,7 @@ import {
   AdminGetUsersFilters,
   AdminSlackConfig,
   TGetServerRootKmsEncryptionDetails,
+  TInstanceGatewayConfig,
   TServerConfig
 } from "./types";
 
@@ -18,7 +20,21 @@ export const adminQueryKeys = {
   serverConfig: () => ["server-config"] as const,
   getUsers: (filters: AdminGetUsersFilters) => [adminStandaloneKeys.getUsers, { filters }] as const,
   getAdminSlackConfig: () => ["admin-slack-config"] as const,
-  getServerEncryptionStrategies: () => ["server-encryption-strategies"] as const
+  getServerEncryptionStrategies: () => ["server-encryption-strategies"] as const,
+
+  getInstanceGatewayConfig: () =>
+    queryOptions({
+      queryKey: ["instance-gateway-config"],
+      queryFn: async () => {
+        const { data } = await apiRequest
+          .get<{ gateway: TInstanceGatewayConfig }>("/api/v1/admin/gateway")
+          .catch((err: AxiosError) => {
+            if (err.response?.status === 404) return { data: { gateway: false as const } };
+            throw err;
+          });
+        return data.gateway;
+      }
+    })
 };
 
 export const fetchServerConfig = async () => {

frontend/src/hooks/api/admin/types.ts

@@ -66,3 +66,14 @@ export enum RootKeyEncryptionStrategy {
   Software = "SOFTWARE",
   HSM = "HSM"
 }
+
+export type TInstanceGatewayConfig = {
+  isDisabled: boolean;
+  infisicalClientCaIssuedAt: string;
+  infisicalClientCaSerialNumber: string;
+  caKeyAlgorithm: string;
+};
+
+export type TDisableInstanceGatewayConfigDTO = {
+  isDisabled?: boolean;
+};

frontend/src/hooks/api/subscriptions/types.ts

@@ -42,6 +42,7 @@ export type SubscriptionPlan = {
   has_used_trial: boolean;
   caCrl: boolean;
   instanceUserManagement: boolean;
+  gateway: boolean;
   externalKms: boolean;
   pkiEst: boolean;
   enforceMfa: boolean;

frontend/src/pages/admin/OverviewPage/GatewayPanel.tsx

@@ -0,0 +1,114 @@
+import { useQuery } from "@tanstack/react-query";
+import { format } from "date-fns";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { Button, EmptyState, Tooltip } from "@app/components/v2";
+import { useSubscription } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useSetupInstanceGatewayConfig, useUpdateInstanceGatewayConfig } from "@app/hooks/api";
+import { adminQueryKeys } from "@app/hooks/api/admin/queries";
+
+export const GatewayPanel = () => {
+  const { subscription } = useSubscription();
+  const { data } = useQuery(adminQueryKeys.getInstanceGatewayConfig());
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["upgradePlan"] as const);
+
+  const setupInstanceConfig = useSetupInstanceGatewayConfig();
+  const updateInstanceConfig = useUpdateInstanceGatewayConfig();
+
+  const handleSetupInstance = () => {
+    if (!subscription.gateway) {
+      handlePopUpOpen("upgradePlan");
+      return;
+    }
+
+    if (!setupInstanceConfig.isPending) {
+      setupInstanceConfig.mutate(undefined, {
+        onSuccess: () => {
+          createNotification({
+            type: "success",
+            text: "Instance gateway setup completed"
+          });
+        }
+      });
+    }
+  };
+
+  const handleUpdateGatewayStatus = ({ isDisabled }: { isDisabled?: boolean }) => {
+    if (!updateInstanceConfig.isPending) {
+      updateInstanceConfig.mutate(
+        { isDisabled },
+        {
+          onSuccess: () => {
+            createNotification({
+              type: "success",
+              text: "Instance gateway updated"
+            });
+          }
+        }
+      );
+    }
+  };
+
+  if (!data) {
+    return (
+      <div>
+        <EmptyState
+          iconSize="3x"
+          className="py-12"
+          title="The gateway, for instance, has not been set up."
+        >
+          <Button
+            className="mt-4"
+            colorSchema="primary"
+            size="sm"
+            onClick={handleSetupInstance}
+            isLoading={setupInstanceConfig.isPending}
+          >
+            Start Gateway
+          </Button>
+        </EmptyState>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center gap-2">
+        <div className="text-xl font-semibold text-mineshaft-100">Gateway</div>
+        {data?.isDisabled && (
+          <Tooltip content="Gateway is disabled">
+            <div className="h-2 w-2 rounded-full bg-red" />
+          </Tooltip>
+        )}
+      </div>
+      <div className="mb-4">
+        <div className="mb-2 max-w-sm text-sm text-mineshaft-300">
+          Infisical Client Root CA Issued At
+        </div>
+        <div>{format(new Date(data.infisicalClientCaIssuedAt), "yyyy-MM-dd")}</div>
+      </div>
+      <div>
+        <div className="mb-2 max-w-sm text-sm text-mineshaft-300">
+          Infisical Client Root CA Seriial Number
+        </div>
+        <div>{data.infisicalClientCaSerialNumber}</div>
+      </div>
+      <Button
+        className="mt-4"
+        colorSchema={data.isDisabled ? "primary" : "danger"}
+        size="sm"
+        onClick={() => handleUpdateGatewayStatus({ isDisabled: !data?.isDisabled })}
+        isLoading={updateInstanceConfig.isPending}
+      >
+        {data.isDisabled ? "Enable" : "Disable"}
+      </Button>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use Gateway if you switch to Infisical's Enterprise plan."
+      />
+    </div>
+  );
+};

frontend/src/pages/admin/OverviewPage/OverviewPage.tsx

@@ -33,6 +33,7 @@ import { EncryptionPanel } from "./components/EncryptionPanel";
 import { IntegrationPanel } from "./components/IntegrationPanel";
 import { RateLimitPanel } from "./components/RateLimitPanel";
 import { UserPanel } from "./components/UserPanel";
+import { GatewayPanel } from "./GatewayPanel";
 
 enum TabSections {
   Settings = "settings",
@@ -41,7 +42,8 @@ enum TabSections {
   RateLimit = "rate-limit",
   Integrations = "integrations",
   Users = "users",
-  Kmip = "kmip"
+  Kmip = "kmip",
+  Gateway = "gateway"
 }
 
 enum SignUpModes {
@@ -150,6 +152,7 @@ export const OverviewPage = () => {
                     <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
                     <Tab value={TabSections.Integrations}>Integrations</Tab>
                     <Tab value={TabSections.Users}>Users</Tab>
+                    <Tab value={TabSections.Gateway}>Gateway</Tab>
                   </div>
                 </TabList>
                 <TabPanel value={TabSections.Settings}>
@@ -348,6 +351,9 @@ export const OverviewPage = () => {
                 <TabPanel value={TabSections.Users}>
                   <UserPanel />
                 </TabPanel>
+                <TabPanel value={TabSections.Gateway}>
+                  <GatewayPanel />
+                </TabPanel>
               </Tabs>
             </div>
           )}