misc: migrated KMIP PKI to be scoped at the org level

2026-10-15 12:38:36 +00:00 · 2025-02-17 15:54:02 +08:00
parent af652f7e52
commit 603b740bbe
33 changed files with 835 additions and 645 deletions
@@ -31,7 +31,6 @@ import {
 import { AuthPanel } from "./components/AuthPanel";
 import { EncryptionPanel } from "./components/EncryptionPanel";
 import { IntegrationPanel } from "./components/IntegrationPanel";
-import { KmipPanel } from "./components/KmipPanel";
 import { RateLimitPanel } from "./components/RateLimitPanel";
 import { UserPanel } from "./components/UserPanel";

@@ -151,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.Kmip}>KMIP</Tab>
                  </div>
                </TabList>
                <TabPanel value={TabSections.Settings}>
@@ -350,9 +348,6 @@ export const OverviewPage = () => {
                <TabPanel value={TabSections.Users}>
                  <UserPanel />
                </TabPanel>
-                <TabPanel value={TabSections.Kmip}>
-                  <KmipPanel />
-                </TabPanel>
              </Tabs>
            </div>
          )}
@@ -2,7 +2,10 @@
 import { z } from "zod";

 import { OrgPermissionSubjects } from "@app/context";
-import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
+import {
+  OrgPermissionAppConnectionActions,
+  OrgPermissionKmipActions
+} from "@app/context/OrgPermissionContext/types";
 import { TPermission } from "@app/hooks/api/roles/types";

 const generalPermissionSchema = z
@@ -24,6 +27,13 @@ const appConnectionsPermissionSchema = z
  })
  .optional();

+const kmipPermissionSchema = z
+  .object({
+    [OrgPermissionKmipActions.Proxy]: z.boolean().optional(),
+    [OrgPermissionKmipActions.Setup]: z.boolean().optional()
+  })
+  .optional();
+
 const adminConsolePermissionSchmea = z
  .object({
    "access-all-projects": z.boolean().optional()
@@ -61,7 +71,8 @@ export const formSchema = z.object({
      "organization-admin-console": adminConsolePermissionSchmea,
      [OrgPermissionSubjects.Kms]: generalPermissionSchema,
      [OrgPermissionSubjects.ProjectTemplates]: generalPermissionSchema,
-      "app-connections": appConnectionsPermissionSchema
+      "app-connections": appConnectionsPermissionSchema,
+      kmip: kmipPermissionSchema
    })
    .optional()
 });
@@ -0,0 +1,133 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  Custom = "custom"
+}
+
+const PERMISSION_ACTIONS = [
+  { action: "proxy", label: "Proxy KMIP requests" },
+  { action: "setup", label: "Setup KMIP" }
+] as const;
+
+export const OrgPermissionKmipRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.kmip"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    if (rule?.proxy || rule?.setup) {
+      return Permission.Custom;
+    }
+    return Permission.NoAccess;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  useEffect(() => {
+    const isRowCustom = selectedPermissionCategory === Permission.Custom;
+    if (isRowCustom) {
+      setIsRowExpanded.on();
+    }
+  }, []);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (!val) return;
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    if (val === Permission.NoAccess) {
+      setValue("permissions.kmip", { proxy: false, setup: false }, { shouldDirty: true });
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>KMIP</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.kmip.${action}`}
+                    key={`permissions.kmip.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={field.value}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.kmip.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};
@@ -14,6 +14,7 @@ import {
  TFormSchema
 } from "../OrgRoleModifySection.utils";
 import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
+import { OrgPermissionKmipRow } from "./OrgPermissionKmipRow";
 import { OrgRoleWorkspaceRow } from "./OrgRoleWorkspaceRow";
 import { RolePermissionRow } from "./RolePermissionRow";

@@ -180,6 +181,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                setValue={setValue}
                isEditable={isCustomRole}
              />
+              <OrgPermissionKmipRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
            </TBody>
          </Table>
        </TableContainer>
@@ -18,26 +18,30 @@ import {
  TextArea,
  Tooltip
 } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { downloadTxtFile } from "@app/helpers/download";
 import { usePopUp, useTimedReset } from "@app/hooks";
-import { useGetInstanceKmipConfig, useSetupInstanceKmip } from "@app/hooks/api";
-import { useGenerateInstanceKmipServerCert } from "@app/hooks/api/admin/mutation";
-import { InstanceKmipConfig } from "@app/hooks/api/admin/types";
 import { certKeyAlgorithms } from "@app/hooks/api/certificates/constants";
 import { CertKeyAlgorithm } from "@app/hooks/api/certificates/enums";
+import {
+  useGenerateOrgKmipServerCert,
+  useGetOrgKmipConfig,
+  useSetupOrgKmip
+} from "@app/hooks/api/kmip";
+import { OrgKmipConfig } from "@app/hooks/api/kmip/types";
 import { CertificateContent } from "@app/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateContent";

-const kmipInstanceConfigFormSchema = z.object({
+const orgConfigFormSchema = z.object({
  caKeyAlgorithm: z.nativeEnum(CertKeyAlgorithm)
 });

-type TKmipInstanceConfigForm = z.infer<typeof kmipInstanceConfigFormSchema>;
+type TKmipOrgConfigForm = z.infer<typeof orgConfigFormSchema>;

-const KmipInstanceConfigSection = ({
+const OrgConfigSection = ({
  kmipConfig,
  isKmipConfigLoading
 }: {
-  kmipConfig?: InstanceKmipConfig;
+  kmipConfig?: OrgKmipConfig;
  isKmipConfigLoading: boolean;
 }) => {
  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
@@ -47,13 +51,15 @@ const KmipInstanceConfigSection = ({
    handleSubmit,
    control,
    formState: { isSubmitting }
-  } = useForm<TKmipInstanceConfigForm>({
-    resolver: zodResolver(kmipInstanceConfigFormSchema)
+  } = useForm<TKmipOrgConfigForm>({
+    resolver: zodResolver(orgConfigFormSchema)
  });
-  const { mutateAsync: setupInstanceKmip } = useSetupInstanceKmip();

-  const onFormSubmit = async (formData: TKmipInstanceConfigForm) => {
-    await setupInstanceKmip(formData);
+  const { currentOrg } = useOrganization();
+  const { mutateAsync: setupOrgKmip } = useSetupOrgKmip(currentOrg.id);
+
+  const onFormSubmit = async (formData: TKmipOrgConfigForm) => {
+    await setupOrgKmip(formData);

    createNotification({
      type: "success",
@@ -171,7 +177,7 @@ const KmipInstanceConfigSection = ({
        )}
        {!isKmipConfigLoading && !kmipConfig && (
          <div className="mt-2">
-            <div>KMIP has not yet been configured for the instance.</div>
+            <div>KMIP has not yet been configured for the organization.</div>
            <Button
              className="mt-2"
              onClick={() => {
@@ -187,7 +193,7 @@ const KmipInstanceConfigSection = ({
        isOpen={popUp.configureKmip.isOpen}
        onOpenChange={(state) => handlePopUpToggle("configureKmip", state)}
      >
-        <ModalContent title="Configure KMIP for the instance">
+        <ModalContent title="Configure KMIP for the organization">
          <form onSubmit={handleSubmit(onFormSubmit)}>
            <Controller
              control={control}
@@ -242,14 +248,14 @@ const KmipInstanceConfigSection = ({
  );
 };

-const kmipInstanceServerCertFormSchema = z.object({
+const orgServerCertFormSchema = z.object({
  commonName: z.string(),
  altNames: z.string(),
  keyAlgorithm: z.nativeEnum(CertKeyAlgorithm),
  ttl: z.string()
 });

-type TKmipInstanceServerCertForm = z.infer<typeof kmipInstanceServerCertFormSchema>;
+type TOrgServerCertForm = z.infer<typeof orgServerCertFormSchema>;

 export const KmipServerConfigSection = () => {
  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
@@ -268,13 +274,13 @@ export const KmipServerConfigSection = () => {
    handleSubmit,
    control,
    formState: { isSubmitting }
-  } = useForm<TKmipInstanceServerCertForm>({
-    resolver: zodResolver(kmipInstanceServerCertFormSchema)
+  } = useForm<TOrgServerCertForm>({
+    resolver: zodResolver(orgServerCertFormSchema)
  });

-  const { mutateAsync: generateKmipServerCert } = useGenerateInstanceKmipServerCert();
+  const { mutateAsync: generateKmipServerCert } = useGenerateOrgKmipServerCert();

-  const onFormSubmit = async (formData: TKmipInstanceServerCertForm) => {
+  const onFormSubmit = async (formData: TOrgServerCertForm) => {
    const { data: certificate } = await generateKmipServerCert(formData);
    handlePopUpOpen("showCertificate", certificate);

@@ -304,7 +310,7 @@ export const KmipServerConfigSection = () => {
        isOpen={popUp.configureKmipServerCert.isOpen}
        onOpenChange={(state) => handlePopUpToggle("configureKmipServerCert", state)}
      >
-        <ModalContent title="Configure KMIP for the instance">
+        <ModalContent title="Configure KMIP for the organization">
          <form onSubmit={handleSubmit(onFormSubmit)}>
            <Controller
              control={control}
@@ -402,7 +408,7 @@ export const KmipServerConfigSection = () => {
        isOpen={popUp.showCertificate.isOpen}
        onOpenChange={(state) => handlePopUpToggle("showCertificate", state)}
      >
-        <ModalContent title="Configure KMIP for the instance">
+        <ModalContent title="Configure KMIP for the organization">
          <CertificateContent {...certificateData} />
        </ModalContent>
      </Modal>
@@ -410,12 +416,13 @@ export const KmipServerConfigSection = () => {
  );
 };

-export const KmipPanel = () => {
-  const { data: kmipConfig, isPending } = useGetInstanceKmipConfig();
+export const KmipTab = () => {
+  const { currentOrg } = useOrganization();
+  const { data: kmipConfig, isPending } = useGetOrgKmipConfig(currentOrg.id);

  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <KmipInstanceConfigSection kmipConfig={kmipConfig} isKmipConfigLoading={isPending} />
+      <OrgConfigSection kmipConfig={kmipConfig} isKmipConfigLoading={isPending} />
      {kmipConfig && <KmipServerConfigSection />}
    </div>
  );
@@ -7,6 +7,7 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { AppConnectionsTab } from "../AppConnectionsTab";
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { ImportTab } from "../ImportTab";
+import { KmipTab } from "../KmipTab/OrgKmipTab";
 import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
@@ -29,7 +30,8 @@ export const OrgTabGroup = () => {
    { name: "App Connections", key: "app-connections", component: AppConnectionsTab },
    { name: "Audit Log Streams", key: "tag-audit-log-streams", component: AuditLogStreamsTab },
    { name: "Import", key: "tab-import", component: ImportTab },
-    { name: "Project Templates", key: "project-templates", component: ProjectTemplatesTab }
+    { name: "Project Templates", key: "project-templates", component: ProjectTemplatesTab },
+    { name: "KMIP", key: "kmip", component: KmipTab }
  ];

  const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key);