feat: frontend changes for connector management

docker-compose.prod.yml

@@ -56,4 +56,3 @@ volumes:
 
 networks:
   infisical:
-

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

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

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

@@ -9,7 +9,6 @@ import {
   AdminSlackConfig,
   RootKeyEncryptionStrategy,
   TCreateAdminUserDTO,
-  TDisableInstanceGatewayConfigDTO,
   TServerConfig,
   TUpdateAdminSlackConfigDTO
 } from "./types";
@@ -99,27 +98,3 @@ 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,5 +1,4 @@
-import { queryOptions, useInfiniteQuery, useQuery, UseQueryOptions } from "@tanstack/react-query";
-import { AxiosError } from "axios";
+import { useInfiniteQuery, useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
@@ -8,7 +7,6 @@ import {
   AdminGetUsersFilters,
   AdminSlackConfig,
   TGetServerRootKmsEncryptionDetails,
-  TInstanceGatewayConfig,
   TServerConfig
 } from "./types";
 
@@ -20,21 +18,7 @@ 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,
-
-  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;
-      }
-    })
+  getServerEncryptionStrategies: () => ["server-encryption-strategies"] as const
 };
 
 export const fetchServerConfig = async () => {

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

@@ -66,14 +66,3 @@ 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/gateways/mutation.tsx

@@ -1,5 +1,7 @@
-import { apiRequest } from "@app/config/request";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
 import { gatewaysQueryKeys } from "./queries";
 
 export const useDeleteGateway = () => {

frontend/src/hooks/api/gateways/queries.tsx

@@ -1,5 +1,7 @@
-import { apiRequest } from "@app/config/request";
 import { queryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
 import { TGateway } from "./types";
 
 export const gatewaysQueryKeys = {

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

@@ -1,114 +0,0 @@
-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,7 +33,6 @@ 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",
@@ -42,8 +41,7 @@ enum TabSections {
   RateLimit = "rate-limit",
   Integrations = "integrations",
   Users = "users",
-  Kmip = "kmip",
-  Gateway = "gateway"
+  Kmip = "kmip"
 }
 
 enum SignUpModes {
@@ -152,7 +150,6 @@ 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}>
@@ -351,9 +348,6 @@ export const OverviewPage = () => {
                 <TabPanel value={TabSections.Users}>
                   <UserPanel />
                 </TabPanel>
-                <TabPanel value={TabSections.Gateway}>
-                  <GatewayPanel />
-                </TabPanel>
               </Tabs>
             </div>
           )}