Merge pull request #2671 from Infisical/daniel/hsm

feat: hardware security module's support

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

@@ -2,6 +2,12 @@ export {
   useAdminDeleteUser,
   useCreateAdminUser,
   useUpdateAdminSlackConfig,
-  useUpdateServerConfig
+  useUpdateServerConfig,
+  useUpdateServerEncryptionStrategy
 } from "./mutation";
-export { useAdminGetUsers, useGetAdminSlackConfig, useGetServerConfig } from "./queries";
+export {
+  useAdminGetUsers,
+  useGetAdminSlackConfig,
+  useGetServerConfig,
+  useGetServerRootKmsEncryptionDetails
+} from "./queries";

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

@@ -7,6 +7,7 @@ import { User } from "../users/types";
 import { adminQueryKeys, adminStandaloneKeys } from "./queries";
 import {
   AdminSlackConfig,
+  RootKeyEncryptionStrategy,
   TCreateAdminUserDTO,
   TServerConfig,
   TUpdateAdminSlackConfigDTO
@@ -85,3 +86,15 @@ export const useUpdateAdminSlackConfig = () => {
     }
   });
 };
+
+export const useUpdateServerEncryptionStrategy = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (strategy: RootKeyEncryptionStrategy) => {
+      await apiRequest.patch("/api/v1/admin/encryption-strategies", { strategy });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(adminQueryKeys.getServerEncryptionStrategies());
+    }
+  });
+};

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

@@ -3,7 +3,12 @@ import { useInfiniteQuery, useQuery, UseQueryOptions } from "@tanstack/react-que
 import { apiRequest } from "@app/config/request";
 
 import { User } from "../types";
-import { AdminGetUsersFilters, AdminSlackConfig, TServerConfig } from "./types";
+import {
+  AdminGetUsersFilters,
+  AdminSlackConfig,
+  TGetServerRootKmsEncryptionDetails,
+  TServerConfig
+} from "./types";
 
 export const adminStandaloneKeys = {
   getUsers: "get-users"
@@ -12,7 +17,8 @@ export const adminStandaloneKeys = {
 export const adminQueryKeys = {
   serverConfig: () => ["server-config"] as const,
   getUsers: (filters: AdminGetUsersFilters) => [adminStandaloneKeys.getUsers, { filters }] as const,
-  getAdminSlackConfig: () => ["admin-slack-config"] as const
+  getAdminSlackConfig: () => ["admin-slack-config"] as const,
+  getServerEncryptionStrategies: () => ["server-encryption-strategies"] as const
 };
 
 const fetchServerConfig = async () => {
@@ -61,8 +67,8 @@ export const useAdminGetUsers = (filters: AdminGetUsersFilters) => {
   });
 };
 
-export const useGetAdminSlackConfig = () =>
-  useQuery({
+export const useGetAdminSlackConfig = () => {
+  return useQuery({
     queryKey: adminQueryKeys.getAdminSlackConfig(),
     queryFn: async () => {
       const { data } = await apiRequest.get<AdminSlackConfig>(
@@ -72,3 +78,17 @@ export const useGetAdminSlackConfig = () =>
       return data;
     }
   });
+};
+
+export const useGetServerRootKmsEncryptionDetails = () => {
+  return useQuery({
+    queryKey: adminQueryKeys.getServerEncryptionStrategies(),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TGetServerRootKmsEncryptionDetails>(
+        "/api/v1/admin/encryption-strategies"
+      );
+
+      return data;
+    }
+  });
+};

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

@@ -54,3 +54,15 @@ export type AdminSlackConfig = {
   clientId: string;
   clientSecret: string;
 };
+
+export type TGetServerRootKmsEncryptionDetails = {
+  strategies: {
+    strategy: RootKeyEncryptionStrategy;
+    enabled: boolean;
+  }[];
+};
+
+export enum RootKeyEncryptionStrategy {
+  Software = "SOFTWARE",
+  HSM = "HSM"
+}

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

@@ -23,6 +23,7 @@ export type SubscriptionPlan = {
   workspacesUsed: number;
   environmentLimit: number;
   samlSSO: boolean;
+  hsm: boolean;
   oidcSSO: boolean;
   scim: boolean;
   ldap: boolean;

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -22,15 +22,21 @@ import {
   Tabs
 } from "@app/components/v2";
 import { useOrganization, useServerConfig, useUser } from "@app/context";
-import { useGetOrganizations, useUpdateServerConfig } from "@app/hooks/api";
+import {
+  useGetOrganizations,
+  useGetServerRootKmsEncryptionDetails,
+  useUpdateServerConfig
+} from "@app/hooks/api";
 
 import { AuthPanel } from "./AuthPanel";
+import { EncryptionPanel } from "./EncryptionPanel";
 import { IntegrationPanel } from "./IntegrationPanel";
 import { RateLimitPanel } from "./RateLimitPanel";
 import { UserPanel } from "./UserPanel";
 
 enum TabSections {
   Settings = "settings",
+  Encryption = "encryption",
   Auth = "auth",
   RateLimit = "rate-limit",
   Integrations = "integrations",
@@ -55,6 +61,7 @@ type TDashboardForm = z.infer<typeof formSchema>;
 export const AdminDashboardPage = () => {
   const router = useRouter();
   const data = useServerConfig();
+  const { data: serverRootKmsDetails } = useGetServerRootKmsEncryptionDetails();
   const { config } = data;
 
   const {
@@ -137,6 +144,7 @@ export const AdminDashboardPage = () => {
             <TabList>
               <div className="flex w-full flex-row border-b border-mineshaft-600">
                 <Tab value={TabSections.Settings}>General</Tab>
+                <Tab value={TabSections.Encryption}>Encryption</Tab>
                 <Tab value={TabSections.Auth}>Authentication</Tab>
                 <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
                 <Tab value={TabSections.Integrations}>Integrations</Tab>
@@ -321,6 +329,9 @@ export const AdminDashboardPage = () => {
                 </Button>
               </form>
             </TabPanel>
+            <TabPanel value={TabSections.Encryption}>
+              <EncryptionPanel rootKmsDetails={serverRootKmsDetails} />
+            </TabPanel>
             <TabPanel value={TabSections.Auth}>
               <AuthPanel />
             </TabPanel>

frontend/src/views/admin/DashboardPage/EncryptionPanel.tsx

@@ -0,0 +1,137 @@
+import { useCallback } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Select, SelectItem, UpgradePlanModal } from "@app/components/v2";
+import { useSubscription } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useUpdateServerEncryptionStrategy } from "@app/hooks/api";
+import {
+  RootKeyEncryptionStrategy,
+  TGetServerRootKmsEncryptionDetails
+} from "@app/hooks/api/admin/types";
+
+const formSchema = z.object({
+  encryptionStrategy: z.nativeEnum(RootKeyEncryptionStrategy)
+});
+
+const strategies: Record<RootKeyEncryptionStrategy, string> = {
+  [RootKeyEncryptionStrategy.Software]: "Software-based Encryption",
+  [RootKeyEncryptionStrategy.HSM]: "Hardware Security Module (HSM)"
+};
+
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  rootKmsDetails?: TGetServerRootKmsEncryptionDetails;
+};
+
+export const EncryptionPanel = ({ rootKmsDetails }: Props) => {
+  const { mutateAsync: updateEncryptionStrategy } = useUpdateServerEncryptionStrategy();
+  const { subscription } = useSubscription();
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      encryptionStrategy:
+        rootKmsDetails?.strategies?.find((s) => s.enabled)?.strategy ??
+        RootKeyEncryptionStrategy.Software
+    }
+  });
+
+  const onSubmit = useCallback(async (formData: TForm) => {
+    if (!subscription) return;
+
+    if (!subscription.hsm) {
+      handlePopUpOpen("upgradePlan", {
+        description: "Hardware Security Module's (HSM's), are only available on Enterprise plans."
+      });
+      return;
+    }
+
+    try {
+      await updateEncryptionStrategy(formData.encryptionStrategy);
+
+      createNotification({
+        type: "success",
+        text: "Encryption strategy updated successfully"
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to update encryption strategy"
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <form
+        className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="flex flex-col justify-start">
+          <div className="flex w-full justify-between">
+            <div className="mb-2 text-xl font-semibold text-mineshaft-100">
+              KMS Encryption Strategy
+            </div>
+          </div>
+          <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+            Select which type of encryption strategy you want to use for your KMS root key. HSM is
+            supported on Enterprise plans.
+          </div>
+
+          {!!rootKmsDetails && (
+            <Controller
+              control={control}
+              name="encryptionStrategy"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  className="max-w-sm"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    className="w-full bg-mineshaft-700"
+                    dropdownContainerClassName="bg-mineshaft-800"
+                    defaultValue={field.value}
+                    onValueChange={(e) => onChange(e)}
+                    {...field}
+                  >
+                    {rootKmsDetails.strategies?.map((strategy) => (
+                      <SelectItem key={strategy.strategy} value={strategy.strategy}>
+                        {strategies[strategy.strategy]}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+          )}
+        </div>
+
+        <Button
+          className="mt-2"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting || !isDirty}
+        >
+          Save
+        </Button>
+      </form>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
+    </>
+  );
+};