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

frontend/src/context/OrgPermissionContext/types.ts

@@ -24,7 +24,8 @@ export enum OrgPermissionSubjects {
   AdminConsole = "organization-admin-console",
   AuditLogs = "audit-logs",
   ProjectTemplates = "project-templates",
-  AppConnections = "app-connections"
+  AppConnections = "app-connections",
+  Kmip = "kmip"
 }
 
 export enum OrgPermissionAdminConsoleAction {
@@ -39,6 +40,11 @@ export enum OrgPermissionAppConnectionActions {
   Connect = "connect"
 }
 
+export enum OrgPermissionKmipActions {
+  Proxy = "proxy",
+  Setup = "setup"
+}
+
 export type AppConnectionSubjectFields = {
   connectionId: string;
 };
@@ -61,7 +67,8 @@ export type OrgPermissionSet =
   | [OrgPermissionAdminConsoleAction, OrgPermissionSubjects.AdminConsole]
   | [OrgPermissionActions, OrgPermissionSubjects.AuditLogs]
   | [OrgPermissionActions, OrgPermissionSubjects.ProjectTemplates]
-  | [OrgPermissionAppConnectionActions, OrgPermissionSubjects.AppConnections];
+  | [OrgPermissionAppConnectionActions, OrgPermissionSubjects.AppConnections]
+  | [OrgPermissionKmipActions, OrgPermissionSubjects.Kmip];
 // TODO(scott): add back once org UI refactored
 // | [
 //     OrgPermissionAppConnectionActions,

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

@@ -1,7 +1,6 @@
 export {
   useAdminDeleteUser,
   useCreateAdminUser,
-  useSetupInstanceKmip,
   useUpdateAdminSlackConfig,
   useUpdateServerConfig,
   useUpdateServerEncryptionStrategy
@@ -9,7 +8,6 @@ export {
 export {
   useAdminGetUsers,
   useGetAdminSlackConfig,
-  useGetInstanceKmipConfig,
   useGetServerConfig,
   useGetServerRootKmsEncryptionDetails
 } from "./queries";

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

@@ -7,12 +7,9 @@ import { User } from "../users/types";
 import { adminQueryKeys, adminStandaloneKeys } from "./queries";
 import {
   AdminSlackConfig,
-  InstanceKmipServerCert,
   RootKeyEncryptionStrategy,
   TCreateAdminUserDTO,
-  TGenerateInstanceKmipServerCertDTO,
   TServerConfig,
-  TSetupInstanceKmipDTO,
   TUpdateAdminSlackConfigDTO
 } from "./types";
 
@@ -101,26 +98,3 @@ export const useUpdateServerEncryptionStrategy = () => {
     }
   });
 };
-
-export const useSetupInstanceKmip = () => {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async (payload: TSetupInstanceKmipDTO) => {
-      await apiRequest.post("/api/v1/admin/kmip", payload);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: adminQueryKeys.getInstanceKmip() });
-    }
-  });
-};
-
-export const useGenerateInstanceKmipServerCert = () => {
-  return useMutation({
-    mutationFn: async (payload: TGenerateInstanceKmipServerCertDTO) => {
-      return apiRequest.post<InstanceKmipServerCert>(
-        "/api/v1/admin/kmip/server-certificates",
-        payload
-      );
-    }
-  });
-};

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

@@ -6,7 +6,6 @@ import { User } from "../types";
 import {
   AdminGetUsersFilters,
   AdminSlackConfig,
-  InstanceKmipConfig,
   TGetServerRootKmsEncryptionDetails,
   TServerConfig
 } from "./types";
@@ -95,14 +94,3 @@ export const useGetServerRootKmsEncryptionDetails = () => {
     }
   });
 };
-
-export const useGetInstanceKmipConfig = () => {
-  return useQuery({
-    queryKey: adminQueryKeys.getInstanceKmip(),
-    queryFn: async () => {
-      const { data } = await apiRequest.get<InstanceKmipConfig>("/api/v1/admin/kmip");
-
-      return data;
-    }
-  });
-};

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

@@ -1,5 +1,3 @@
-import { CertKeyAlgorithm } from "../certificates/enums";
-
 export enum LoginMethod {
   EMAIL = "email",
   GOOGLE = "google",
@@ -64,30 +62,7 @@ export type TGetServerRootKmsEncryptionDetails = {
   }[];
 };
 
-export type InstanceKmipConfig = {
-  serverCertificateChain: string;
-  clientCertificateChain: string;
-};
-
 export enum RootKeyEncryptionStrategy {
   Software = "SOFTWARE",
   HSM = "HSM"
 }
-
-export type TSetupInstanceKmipDTO = {
-  caKeyAlgorithm: CertKeyAlgorithm;
-};
-
-export type TGenerateInstanceKmipServerCertDTO = {
-  commonName: string;
-  keyAlgorithm: CertKeyAlgorithm;
-  altNames: string;
-  ttl: string;
-};
-
-export type InstanceKmipServerCert = {
-  serialNumber: string;
-  certificate: string;
-  certificateChain: string;
-  privateKey: string;
-};

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

@@ -5,9 +5,12 @@ import { apiRequest } from "@app/config/request";
 import { kmipKeys } from "./queries";
 import {
   KmipClientCertificate,
+  OrgKmipServerCert,
   TCreateKmipClient,
   TDeleteKmipClient,
   TGenerateKmipClientCertificate,
+  TGenerateOrgKmipServerCertDTO,
+  TSetupOrgKmipDTO,
   TUpdateKmipClient
 } from "./types";
 
@@ -75,3 +78,23 @@ export const useGenerateKmipClientCertificate = () => {
     }
   });
 };
+
+export const useSetupOrgKmip = (orgId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload: TSetupOrgKmipDTO) => {
+      await apiRequest.post("/api/v1/kmip", payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: kmipKeys.getOrgKmip(orgId) });
+    }
+  });
+};
+
+export const useGenerateOrgKmipServerCert = () => {
+  return useMutation({
+    mutationFn: async (payload: TGenerateOrgKmipServerCertDTO) => {
+      return apiRequest.post<OrgKmipServerCert>("/api/v1/kmip/server-certificates", payload);
+    }
+  });
+};

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

@@ -3,11 +3,17 @@ import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { OrderByDirection } from "../generic/types";
-import { KmipClientOrderBy, TListProjectKmipClientsDTO, TProjectKmipClientList } from "./types";
+import {
+  KmipClientOrderBy,
+  OrgKmipConfig,
+  TListProjectKmipClientsDTO,
+  TProjectKmipClientList
+} from "./types";
 
 export const kmipKeys = {
   getKmipClientsByProjectId: ({ projectId, ...filters }: TListProjectKmipClientsDTO) =>
-    [projectId, filters] as const
+    [projectId, filters] as const,
+  getOrgKmip: (orgId: string) => [{ orgId }, "org-kmip-config"] as const
 };
 
 export const useGetKmipClientsByProjectId = (
@@ -50,3 +56,14 @@ export const useGetKmipClientsByProjectId = (
     ...options
   });
 };
+
+export const useGetOrgKmipConfig = (orgId: string) => {
+  return useQuery({
+    queryKey: kmipKeys.getOrgKmip(orgId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<OrgKmipConfig>("/api/v1/kmip");
+
+      return data;
+    }
+  });
+};

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

@@ -63,3 +63,26 @@ export type TListProjectKmipClientsDTO = {
 export enum KmipClientOrderBy {
   Name = "name"
 }
+
+export type OrgKmipConfig = {
+  serverCertificateChain: string;
+  clientCertificateChain: string;
+};
+
+export type TSetupOrgKmipDTO = {
+  caKeyAlgorithm: CertKeyAlgorithm;
+};
+
+export type TGenerateOrgKmipServerCertDTO = {
+  commonName: string;
+  keyAlgorithm: CertKeyAlgorithm;
+  altNames: string;
+  ttl: string;
+};
+
+export type OrgKmipServerCert = {
+  serialNumber: string;
+  certificate: string;
+  certificateChain: string;
+  privateKey: string;
+};

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

@@ -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>
           )}

frontend/src/pages/organization/RoleByIDPage/components/OrgRoleModifySection.utils.ts

@@ -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()
 });

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx

@@ -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>
+      )}
+    </>
+  );
+};

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx

@@ -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>

frontend/src/pages/organization/SettingsPage/components/KmipTab/OrgKmipTab.tsx

@@ -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>
   );

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -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);