Merge branch 'heads/main' into daniel/ms-teams-integration

frontend/src/const/routes.ts

@@ -281,6 +281,14 @@ export const ROUTE_PATHS = Object.freeze({
       "/cert-manager/$projectId/overview",
       "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview"
     ),
+    CertificateAuthoritiesPage: setRoute(
+      "/cert-manager/$projectId/certificate-authorities",
+      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities"
+    ),
+    AlertingPage: setRoute(
+      "/cert-manager/$projectId/alerting",
+      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting"
+    ),
     PkiCollectionDetailsByIDPage: setRoute(
       "/cert-manager/$projectId/pki-collections/$collectionId",
       "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId"

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -84,6 +84,7 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.ADD_PKI_COLLECTION_ITEM]: "Add PKI collection item",
   [EventType.DELETE_PKI_COLLECTION_ITEM]: "Delete PKI collection item",
   [EventType.ORG_ADMIN_ACCESS_PROJECT]: "Org admin accessed project",
+  [EventType.ORG_ADMIN_BYPASS_SSO]: "Org admin bypassed SSO enforcement",
   [EventType.CREATE_CERTIFICATE_TEMPLATE]: "Create certificate template",
   [EventType.UPDATE_CERTIFICATE_TEMPLATE]: "Update certificate template",
   [EventType.DELETE_CERTIFICATE_TEMPLATE]: "Delete certificate template",

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -90,6 +90,7 @@ export enum EventType {
   ADD_PKI_COLLECTION_ITEM = "add-pki-collection-item",
   DELETE_PKI_COLLECTION_ITEM = "delete-pki-collection-item",
   ORG_ADMIN_ACCESS_PROJECT = "org-admin-accessed-project",
+  ORG_ADMIN_BYPASS_SSO = "org-admin-bypassed-sso",
   CREATE_CERTIFICATE_TEMPLATE = "create-certificate-template",
   UPDATE_CERTIFICATE_TEMPLATE = "update-certificate-template",
   DELETE_CERTIFICATE_TEMPLATE = "delete-certificate-template",

frontend/src/hooks/api/auditLogs/types.tsx

@@ -719,6 +719,11 @@ interface OrgAdminAccessProjectEvent {
   }; // no metadata yet
 }
 
+interface OrgAdminBypassSSOEvent {
+  type: EventType.ORG_ADMIN_BYPASS_SSO;
+  metadata: Record<string, string>; // no metadata yet
+}
+
 interface CreateCertificateTemplate {
   type: EventType.CREATE_CERTIFICATE_TEMPLATE;
   metadata: {
@@ -888,6 +893,7 @@ export type Event =
   | AddPkiCollectionItem
   | DeletePkiCollectionItem
   | OrgAdminAccessProjectEvent
+  | OrgAdminBypassSSOEvent
   | CreateCertificateTemplate
   | UpdateCertificateTemplate
   | GetCertificateTemplate

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -57,7 +57,7 @@ import { MenuIconButton } from "../MenuIconButton";
 import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
 
 const getPlan = (subscription: SubscriptionPlan) => {
-  if (subscription.dynamicSecret) return "Enterprise Plan";
+  if (subscription.groups) return "Enterprise Plan";
   if (subscription.pitRecovery) return "Pro Plan";
   return "Free Plan";
 };

frontend/src/layouts/OrganizationLayout/components/SidebarHeader/SidebarHeader.tsx

@@ -2,7 +2,7 @@ import { useOrganization, useSubscription } from "@app/context";
 import { SubscriptionPlan } from "@app/hooks/api/types";
 
 const getPlan = (subscription: SubscriptionPlan) => {
-  if (subscription.dynamicSecret) return "Enterprise Plan";
+  if (subscription.groups) return "Enterprise Plan";
   if (subscription.pitRecovery) return "Pro Plan";
   return "Free Plan";
 };

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -1,10 +1,9 @@
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet, useNavigate, useRouterState } from "@tanstack/react-router";
+import { Link, Outlet, useRouterState } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
-import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import {
   BreadcrumbContainer,
   Menu,
@@ -33,18 +32,6 @@ export const ProjectLayout = () => {
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
   const { subscription } = useSubscription();
-  const navigate = useNavigate();
-  const hasIdentityLimitCrossed =
-    subscription?.identityLimit && subscription?.identitiesUsed > subscription.identityLimit + 10;
-  const hasUserLimitCrossed =
-    subscription?.memberLimit && subscription?.membersUsed > subscription.memberLimit + 10;
-  const shouldUpgrade = Boolean(hasUserLimitCrossed || hasIdentityLimitCrossed);
-  let upgradeText = "";
-  if (hasUserLimitCrossed) {
-    upgradeText = `You've reached the maximum number of organisation users (${subscription?.memberLimit}).`;
-  } else if (hasIdentityLimitCrossed) {
-    upgradeText = `You've reached the maximum number of organisation identities (${subscription?.identityLimit}).`;
-  }
 
   const isSecretManager = currentWorkspace?.type === ProjectType.SecretManager;
   const isCertManager = currentWorkspace?.type === ProjectType.CertificateManager;
@@ -105,18 +92,46 @@ export const ProjectLayout = () => {
                         </Link>
                       )}
                       {isCertManager && (
-                        <Link
-                          to={`/${ProjectType.CertificateManager}/$projectId/overview` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="lock-closed">
-                              Overview
-                            </MenuItem>
-                          )}
-                        </Link>
+                        <>
+                          <Link
+                            to={`/${ProjectType.CertificateManager}/$projectId/overview` as const}
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="certificate">
+                                Certificates
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/certificate-authorities` as const
+                            }
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="certificate-authority">
+                                Certificate Authorities
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={`/${ProjectType.CertificateManager}/$projectId/alerting` as const}
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="notification-bell">
+                                Alerting
+                              </MenuItem>
+                            )}
+                          </Link>
+                        </>
                       )}
                       {isCmek && (
                         <Link
@@ -280,17 +295,6 @@ export const ProjectLayout = () => {
           </div>
         </div>
       </div>
-      {shouldUpgrade && (
-        <UpgradePlanModal
-          isOpen={shouldUpgrade}
-          text={upgradeText}
-          onOpenChange={(isOpen) => {
-            if (!isOpen) {
-              navigate({ to: "/organization/access-management" });
-            }
-          }}
-        />
-      )}
       <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">

frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx

@@ -0,0 +1,29 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { PageHeader } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { PkiAlertsSection } from "./components";
+
+export const AlertingPage = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Alerting" })}</title>
+      </Helmet>
+      <div className="mx-auto mb-6 w-full max-w-7xl">
+        <PageHeader title="Alerting" />
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionActions.Read}
+          a={ProjectPermissionSub.PkiAlerts}
+        >
+          <PkiAlertsSection />
+        </ProjectPermissionCan>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/AlertingPage/route.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AlertingPage } from "./AlertingPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting"
+)({
+  component: AlertingPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Alerting"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx

@@ -20,9 +20,9 @@ import { useDeleteCa, useGetCaById } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { CaInstallCertModal } from "../CertificatesPage/components/CaTab/components/CaInstallCertModal";
-import { CaModal } from "../CertificatesPage/components/CaTab/components/CaModal";
-import { CertificateTemplatesSection } from "../CertificatesPage/components/CertificatesTab/components/CertificateTemplatesSection";
+import { CaInstallCertModal } from "../CertificateAuthoritiesPage/components/CaInstallCertModal";
+import { CaModal } from "../CertificateAuthoritiesPage/components/CaModal";
+import { CertificateTemplatesSection } from "../CertificatesPage/components/CertificateTemplatesSection";
 import {
   CaCertificatesSection,
   CaCrlsSection,

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/route.tsx

@@ -13,7 +13,7 @@ export const Route = createFileRoute(
         {
           label: "Certificate Authorities",
           link: linkOptions({
-            to: "/cert-manager/$projectId/overview",
+            to: "/cert-manager/$projectId/certificate-authorities",
             params: {
               projectId: params.projectId
             }

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx

@@ -0,0 +1,29 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { PageHeader } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { CaSection } from "./components";
+
+export const CertificateAuthoritiesPage = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificate Authorities" })}</title>
+      </Helmet>
+      <div className="mx-auto mb-6 w-full max-w-7xl">
+        <PageHeader title="Certificate Authorities" />
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionActions.Read}
+          a={ProjectPermissionSub.CertificateAuthorities}
+        >
+          <CaSection />
+        </ProjectPermissionCan>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaCertModal.tsx

@@ -2,7 +2,7 @@ import { Modal, ModalContent } from "@app/components/v2";
 import { useGetCaCert } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { CertificateContent } from "../../CertificatesTab/components/CertificateContent";
+import { CertificateContent } from "../../CertificatesPage/components/CertificateContent";
 
 type Props = {
   popUp: UsePopUpState<["caCert"]>;

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/route.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { CertificateAuthoritiesPage } from "./CertificateAuthoritiesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities"
+)({
+  component: CertificateAuthoritiesPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Certificate Authorities"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx

@@ -2,63 +2,49 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { PageHeader } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 
-import { CaTab, CertificatesTab, PkiAlertsTab } from "./components";
-
-enum TabSections {
-  Ca = "certificate-authorities",
-  Certificates = "certificates",
-  Alerting = "alerting"
-}
+import { PkiCollectionSection } from "../AlertingPage/components";
+import { CertificatesSection } from "./components";
 
 export const CertificatesPage = () => {
   const { t } = useTranslation();
+  const { permission } = useProjectPermission();
+
+  const canAccessPkiColl = permission.can(
+    ProjectPermissionActions.Read,
+    ProjectPermissionSub.PkiCollections
+  );
+  const canAccessCerts = permission.can(
+    ProjectPermissionActions.Read,
+    ProjectPermissionSub.Certificates
+  );
+
   return (
     <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
       <Helmet>
         <title>{t("common.head-title", { title: "Certificates" })}</title>
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
-        <PageHeader title="Overview" />
-        <Tabs defaultValue={TabSections.Certificates}>
-          <TabList>
-            <Tab value={TabSections.Certificates}>Certificates</Tab>
-            <Tab value={TabSections.Ca}>Certificate Authorities</Tab>
-            <Tab value={TabSections.Alerting}>Alerting</Tab>
-          </TabList>
-          <TabPanel value={TabSections.Certificates}>
-            <ProjectPermissionCan
-              renderGuardBanner
-              passThrough={false}
-              I={ProjectPermissionActions.Read}
-              a={ProjectPermissionSub.Certificates}
-            >
-              <CertificatesTab />
-            </ProjectPermissionCan>
-          </TabPanel>
-          <TabPanel value={TabSections.Ca}>
-            <ProjectPermissionCan
-              renderGuardBanner
-              passThrough={false}
-              I={ProjectPermissionActions.Read}
-              a={ProjectPermissionSub.CertificateAuthorities}
-            >
-              <CaTab />
-            </ProjectPermissionCan>
-          </TabPanel>
-          <TabPanel value={TabSections.Alerting}>
-            <ProjectPermissionCan
-              renderGuardBanner
-              passThrough={false}
-              I={ProjectPermissionActions.Read}
-              a={ProjectPermissionSub.PkiAlerts}
-            >
-              <PkiAlertsTab />
-            </ProjectPermissionCan>
-          </TabPanel>
-        </Tabs>
+        <PageHeader title="Certificates" />
+        {/* If both are false, the section does not render. This is to prevent duplicate banners. */}
+        {(canAccessCerts || canAccessPkiColl) && (
+          <ProjectPermissionCan
+            renderGuardBanner
+            I={ProjectPermissionActions.Read}
+            a={ProjectPermissionSub.PkiCollections}
+          >
+            <PkiCollectionSection />
+          </ProjectPermissionCan>
+        )}
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionActions.Read}
+          a={ProjectPermissionSub.Certificates}
+        >
+          <CertificatesSection />
+        </ProjectPermissionCan>
       </div>
     </div>
   );

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/CaTab.tsx

@@ -1,17 +0,0 @@
-import { motion } from "framer-motion";
-
-import { CaSection } from "./components";
-
-export const CaTab = () => {
-  return (
-    <motion.div
-      key="panel-certificate-authorities"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <CaSection />
-    </motion.div>
-  );
-};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/index.tsx

@@ -1 +0,0 @@
-export { CaTab } from "./CaTab";

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/CertificatesTab.tsx

@@ -1,21 +0,0 @@
-import { motion } from "framer-motion";
-
-import { PkiCollectionSection } from "../PkiAlertsTab/components";
-// import { CertificateTemplatesSection } from "./components/CertificateTemplatesSection";
-import { CertificatesSection } from "./components";
-
-export const CertificatesTab = () => {
-  return (
-    <motion.div
-      key="panel-certificates"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <PkiCollectionSection />
-      {/* <CertificateTemplatesSection /> */}
-      <CertificatesSection />
-    </motion.div>
-  );
-};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/index.tsx

@@ -1 +0,0 @@
-export { CertificatesSection } from "./CertificatesSection";

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/index.tsx

@@ -1 +0,0 @@
-export { CertificatesTab } from "./CertificatesTab";

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/PkiAlertsTab.tsx

@@ -1,17 +0,0 @@
-import { motion } from "framer-motion";
-
-import { PkiAlertsSection } from "./components";
-
-export const PkiAlertsTab = () => {
-  return (
-    <motion.div
-      key="panel-alerts"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <PkiAlertsSection />
-    </motion.div>
-  );
-};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/index.tsx

@@ -1 +0,0 @@
-export { PkiAlertsTab } from "./PkiAlertsTab";

frontend/src/pages/cert-manager/CertificatesPage/components/index.tsx

@@ -1,3 +1 @@
-export { CaTab } from "./CaTab";
-export { CertificatesTab } from "./CertificatesTab";
-export { PkiAlertsTab } from "./PkiAlertsTab";
+export { CertificatesSection } from "./CertificatesSection";

frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx

@@ -22,7 +22,7 @@ import { PkiItemType } from "@app/hooks/api/pkiCollections/constants";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { PkiCollectionModal } from "../CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal";
+import { PkiCollectionModal } from "../AlertingPage/components/PkiCollectionModal";
 import { PkiCollectionDetailsSection, PkiCollectionItemsSection } from "./components";
 
 export const PkiCollectionPage = () => {

frontend/src/pages/kms/KmipPage/components/KmipClientCertificateModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, ModalContent } from "@app/components/v2";
 import { KmipClientCertificate } from "@app/hooks/api/kmip/types";
-import { CertificateContent } from "@app/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateContent";
+import { CertificateContent } from "@app/pages/cert-manager/CertificatesPage/components/CertificateContent";
 
 type Props = {
   isOpen: boolean;

frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx

@@ -0,0 +1,152 @@
+import { faAws, faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faCheck, faCopy, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions/OrgPermissionCan";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@app/components/v2/Dropdown";
+import { IconButton } from "@app/components/v2/IconButton";
+import { Td, Tr } from "@app/components/v2/Table";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context/OrgPermissionContext";
+import { useToggle } from "@app/hooks";
+import { ExternalKmsProvider, KmsListEntry } from "@app/hooks/api/kms/types";
+import { SubscriptionPlan } from "@app/hooks/api/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  kms: KmsListEntry;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["editExternalKms", "removeExternalKms", "upgradePlan"]>,
+    data?: {
+      kmsId?: string;
+      name?: string;
+      provider?: string;
+    }
+  ) => void;
+  subscription: SubscriptionPlan;
+};
+
+export const ExternalKmsItem = ({ kms, handlePopUpOpen, subscription }: Props) => {
+  const [isKmsIdCopied, { timedToggle: toggleKmsIdCopied }] = useToggle(false);
+  const [isKmsAliasCopied, { timedToggle: toggleKmsAliasCopied }] = useToggle(false);
+
+  return (
+    <Tr key={kms.id}>
+      <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+        {kms.externalKms.provider === ExternalKmsProvider.Aws && <FontAwesomeIcon icon={faAws} />}
+        {kms.externalKms.provider === ExternalKmsProvider.Gcp && (
+          <FontAwesomeIcon icon={faGoogle} />
+        )}
+        <div className="ml-2">{kms.externalKms.provider.toUpperCase()}</div>
+      </Td>
+      <Td>
+        <div className="group flex items-center gap-2">
+          {kms.name}
+          <IconButton
+            size="xs"
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="relative rounded-md opacity-0 group-hover:opacity-100"
+            onClick={() => {
+              if (isKmsAliasCopied) {
+                return;
+              }
+              navigator.clipboard.writeText(kms.name);
+              createNotification({
+                text: "KMS alias copied to clipboard",
+                type: "success"
+              });
+              toggleKmsAliasCopied(2000);
+            }}
+          >
+            <FontAwesomeIcon icon={isKmsAliasCopied ? faCheck : faCopy} />
+          </IconButton>
+        </div>
+      </Td>
+      <Td>
+        <div className="group flex items-center gap-2">
+          {kms.id}
+          <IconButton
+            size="xs"
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="relative rounded-md opacity-0 group-hover:opacity-100"
+            onClick={() => {
+              if (isKmsIdCopied) {
+                return;
+              }
+              navigator.clipboard.writeText(kms.id);
+              createNotification({
+                text: "KMS ID copied to clipboard",
+                type: "success"
+              });
+              toggleKmsIdCopied(2000);
+            }}
+          >
+            <FontAwesomeIcon icon={isKmsIdCopied ? faCheck : faCopy} />
+          </IconButton>
+        </div>
+      </Td>
+      <Td>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="rounded-lg">
+            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-1">
+            <OrgPermissionCan I={OrgPermissionActions.Edit} an={OrgPermissionSubjects.Kms}>
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  disabled={!isAllowed}
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (subscription && !subscription?.externalKms) {
+                      handlePopUpOpen("upgradePlan");
+                      return;
+                    }
+
+                    handlePopUpOpen("editExternalKms", {
+                      kmsId: kms.id
+                    });
+                  }}
+                >
+                  Edit
+                </DropdownMenuItem>
+              )}
+            </OrgPermissionCan>
+            <OrgPermissionCan I={OrgPermissionActions.Delete} an={OrgPermissionSubjects.Kms}>
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  disabled={!isAllowed}
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("removeExternalKms", {
+                      name: kms.name,
+                      kmsId: kms.id,
+                      provider: kms.externalKms.provider
+                    });
+                  }}
+                >
+                  Delete
+                </DropdownMenuItem>
+              )}
+            </OrgPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};

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

@@ -1,7 +1,5 @@
-import { faAws, faGoogle } from "@fortawesome/free-brands-svg-icons";
-import { faEllipsis, faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
@@ -9,10 +7,6 @@ import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
   EmptyState,
   Table,
   TableContainer,
@@ -31,9 +25,9 @@ import {
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useGetExternalKmsList, useRemoveExternalKms } from "@app/hooks/api";
-import { ExternalKmsProvider } from "@app/hooks/api/kms/types";
 
 import { AddExternalKmsForm } from "./AddExternalKmsForm";
+import { ExternalKmsItem } from "./ExternalKmsItem";
 import { UpdateExternalKmsForm } from "./UpdateExternalKmsForm";
 
 export const OrgEncryptionTab = withPermission(
@@ -102,6 +96,7 @@ export const OrgEncryptionTab = withPermission(
               <Tr>
                 <Td>Provider</Td>
                 <Td>Alias</Td>
+                <Td>ID</Td>
               </Tr>
             </THead>
             <TBody>
@@ -115,78 +110,12 @@ export const OrgEncryptionTab = withPermission(
               )}
               {!isExternalKmsListLoading &&
                 externalKmsList?.map((kms) => (
-                  <Tr key={kms.id}>
-                    <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
-                      {kms.externalKms.provider === ExternalKmsProvider.Aws && (
-                        <FontAwesomeIcon icon={faAws} />
-                      )}
-                      {kms.externalKms.provider === ExternalKmsProvider.Gcp && (
-                        <FontAwesomeIcon icon={faGoogle} />
-                      )}
-                      <div className="ml-2">{kms.externalKms.provider.toUpperCase()}</div>
-                    </Td>
-                    <Td>{kms.name}</Td>
-                    <Td>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                          </div>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            an={OrgPermissionSubjects.Kms}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                disabled={!isAllowed}
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  if (subscription && !subscription?.externalKms) {
-                                    handlePopUpOpen("upgradePlan");
-                                    return;
-                                  }
-
-                                  handlePopUpOpen("editExternalKms", {
-                                    kmsId: kms.id
-                                  });
-                                }}
-                              >
-                                Edit
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            an={OrgPermissionSubjects.Kms}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                disabled={!isAllowed}
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("removeExternalKms", {
-                                    name: kms.name,
-                                    kmsId: kms.id,
-                                    provider: kms.externalKms.provider
-                                  });
-                                }}
-                              >
-                                Delete
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </Td>
-                  </Tr>
+                  <ExternalKmsItem
+                    key={kms.id}
+                    kms={kms}
+                    handlePopUpOpen={handlePopUpOpen}
+                    subscription={subscription}
+                  />
                 ))}
             </TBody>
           </Table>

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "@tanstack/react-router";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
+import { Button, DeleteActionModal, Tooltip } from "@app/components/v2";
 import { LeaveProjectModal } from "@app/components/v2/LeaveProjectModal";
 import {
   ProjectPermissionActions,
@@ -142,16 +142,22 @@ export const DeleteProjectSection = () => {
       <div className="space-x-4">
         <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Project}>
           {(isAllowed) => (
-            <Button
-              isLoading={isDeleting}
-              isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
-              colorSchema="danger"
-              variant="outline_bg"
-              type="submit"
-              onClick={() => handlePopUpOpen("deleteWorkspace")}
+            <Tooltip
+              className="max-w-sm"
+              content="This project is protected from deletion. To delete it, disable delete protection first."
+              isDisabled={!currentWorkspace?.hasDeleteProtection}
             >
-              {`Delete ${currentWorkspace?.name}`}
-            </Button>
+              <Button
+                isLoading={isDeleting}
+                isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
+                colorSchema="danger"
+                variant="outline_bg"
+                type="submit"
+                onClick={() => handlePopUpOpen("deleteWorkspace")}
+              >
+                {`Delete ${currentWorkspace?.name}`}
+              </Button>
+            </Tooltip>
           )}
         </ProjectPermissionCan>
         {!isOnlyAdminMember && (

frontend/src/routeTree.gen.ts

@@ -92,6 +92,8 @@ import { Route as kmsOverviewPageRouteImport } from './pages/kms/OverviewPage/ro
 import { Route as kmsKmipPageRouteImport } from './pages/kms/KmipPage/route'
 import { Route as certManagerSettingsPageRouteImport } from './pages/cert-manager/SettingsPage/route'
 import { Route as certManagerCertificatesPageRouteImport } from './pages/cert-manager/CertificatesPage/route'
+import { Route as certManagerCertificateAuthoritiesPageRouteImport } from './pages/cert-manager/CertificateAuthoritiesPage/route'
+import { Route as certManagerAlertingPageRouteImport } from './pages/cert-manager/AlertingPage/route'
 import { Route as projectRoleDetailsBySlugPageRouteSshImport } from './pages/project/RoleDetailsBySlugPage/route-ssh'
 import { Route as projectMemberDetailsByIDPageRouteSshImport } from './pages/project/MemberDetailsByIDPage/route-ssh'
 import { Route as projectIdentityDetailsByIDPageRouteSshImport } from './pages/project/IdentityDetailsByIDPage/route-ssh'
@@ -894,6 +896,20 @@ const certManagerCertificatesPageRouteRoute =
     getParentRoute: () => certManagerLayoutRoute,
   } as any)
 
+const certManagerCertificateAuthoritiesPageRouteRoute =
+  certManagerCertificateAuthoritiesPageRouteImport.update({
+    id: '/certificate-authorities',
+    path: '/certificate-authorities',
+    getParentRoute: () => certManagerLayoutRoute,
+  } as any)
+
+const certManagerAlertingPageRouteRoute =
+  certManagerAlertingPageRouteImport.update({
+    id: '/alerting',
+    path: '/alerting',
+    getParentRoute: () => certManagerLayoutRoute,
+  } as any)
+
 const projectRoleDetailsBySlugPageRouteSshRoute =
   projectRoleDetailsBySlugPageRouteSshImport.update({
     id: '/roles/$roleSlug',
@@ -2104,6 +2120,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof sshLayoutImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSshProjectIdImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting': {
+      id: '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting'
+      path: '/alerting'
+      fullPath: '/cert-manager/$projectId/alerting'
+      preLoaderRoute: typeof certManagerAlertingPageRouteImport
+      parentRoute: typeof certManagerLayoutImport
+    }
+    '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities': {
+      id: '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities'
+      path: '/certificate-authorities'
+      fullPath: '/cert-manager/$projectId/certificate-authorities'
+      preLoaderRoute: typeof certManagerCertificateAuthoritiesPageRouteImport
+      parentRoute: typeof certManagerLayoutImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview': {
       id: '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview'
       path: '/overview'
@@ -3119,6 +3149,8 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteWithChildren =
   )
 
 interface certManagerLayoutRouteChildren {
+  certManagerAlertingPageRouteRoute: typeof certManagerAlertingPageRouteRoute
+  certManagerCertificateAuthoritiesPageRouteRoute: typeof certManagerCertificateAuthoritiesPageRouteRoute
   certManagerCertificatesPageRouteRoute: typeof certManagerCertificatesPageRouteRoute
   certManagerSettingsPageRouteRoute: typeof certManagerSettingsPageRouteRoute
   projectAccessControlPageRouteCertManagerRoute: typeof projectAccessControlPageRouteCertManagerRoute
@@ -3130,6 +3162,9 @@ interface certManagerLayoutRouteChildren {
 }
 
 const certManagerLayoutRouteChildren: certManagerLayoutRouteChildren = {
+  certManagerAlertingPageRouteRoute: certManagerAlertingPageRouteRoute,
+  certManagerCertificateAuthoritiesPageRouteRoute:
+    certManagerCertificateAuthoritiesPageRouteRoute,
   certManagerCertificatesPageRouteRoute: certManagerCertificatesPageRouteRoute,
   certManagerSettingsPageRouteRoute: certManagerSettingsPageRouteRoute,
   projectAccessControlPageRouteCertManagerRoute:
@@ -3794,6 +3829,8 @@ export interface FileRoutesByFullPath {
   '/organization/secret-manager/overview': typeof organizationSecretManagerOverviewPageRouteRoute
   '/organization/secret-sharing/settings': typeof organizationSecretSharingSettingsPageRouteRoute
   '/organization/ssh/overview': typeof organizationSshOverviewPageRouteRoute
+  '/cert-manager/$projectId/alerting': typeof certManagerAlertingPageRouteRoute
+  '/cert-manager/$projectId/certificate-authorities': typeof certManagerCertificateAuthoritiesPageRouteRoute
   '/cert-manager/$projectId/overview': typeof certManagerCertificatesPageRouteRoute
   '/cert-manager/$projectId/settings': typeof certManagerSettingsPageRouteRoute
   '/kms/$projectId/kmip': typeof kmsKmipPageRouteRoute
@@ -3969,6 +4006,8 @@ export interface FileRoutesByTo {
   '/organization/secret-manager/overview': typeof organizationSecretManagerOverviewPageRouteRoute
   '/organization/secret-sharing/settings': typeof organizationSecretSharingSettingsPageRouteRoute
   '/organization/ssh/overview': typeof organizationSshOverviewPageRouteRoute
+  '/cert-manager/$projectId/alerting': typeof certManagerAlertingPageRouteRoute
+  '/cert-manager/$projectId/certificate-authorities': typeof certManagerCertificateAuthoritiesPageRouteRoute
   '/cert-manager/$projectId/overview': typeof certManagerCertificatesPageRouteRoute
   '/cert-manager/$projectId/settings': typeof certManagerSettingsPageRouteRoute
   '/kms/$projectId/kmip': typeof kmsKmipPageRouteRoute
@@ -4160,6 +4199,8 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout': typeof kmsLayoutRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout': typeof secretManagerLayoutRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout': typeof sshLayoutRouteWithChildren
+  '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting': typeof certManagerAlertingPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities': typeof certManagerCertificateAuthoritiesPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview': typeof certManagerCertificatesPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings': typeof certManagerSettingsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip': typeof kmsKmipPageRouteRoute
@@ -4344,6 +4385,8 @@ export interface FileRouteTypes {
     | '/organization/secret-manager/overview'
     | '/organization/secret-sharing/settings'
     | '/organization/ssh/overview'
+    | '/cert-manager/$projectId/alerting'
+    | '/cert-manager/$projectId/certificate-authorities'
     | '/cert-manager/$projectId/overview'
     | '/cert-manager/$projectId/settings'
     | '/kms/$projectId/kmip'
@@ -4518,6 +4561,8 @@ export interface FileRouteTypes {
     | '/organization/secret-manager/overview'
     | '/organization/secret-sharing/settings'
     | '/organization/ssh/overview'
+    | '/cert-manager/$projectId/alerting'
+    | '/cert-manager/$projectId/certificate-authorities'
     | '/cert-manager/$projectId/overview'
     | '/cert-manager/$projectId/settings'
     | '/kms/$projectId/kmip'
@@ -4707,6 +4752,8 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout'
+    | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting'
+    | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings'
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip'
@@ -5222,6 +5269,8 @@ export const routeTree = rootRoute
       "filePath": "cert-manager/layout.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId",
       "children": [
+        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting",
+        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/access-management",
@@ -5277,6 +5326,14 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/roles/$roleSlug"
       ]
     },
+    "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting": {
+      "filePath": "cert-manager/AlertingPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
+    },
+    "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities": {
+      "filePath": "cert-manager/CertificateAuthoritiesPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
+    },
     "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview": {
       "filePath": "cert-manager/CertificatesPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"

frontend/src/routes.ts

@@ -282,6 +282,8 @@ const secretManagerIntegrationsRedirect = route("/integrations", [
 const certManagerRoutes = route("/cert-manager/$projectId", [
   layout("cert-manager-layout", "cert-manager/layout.tsx", [
     route("/overview", "cert-manager/CertificatesPage/route.tsx"),
+    route("/certificate-authorities", "cert-manager/CertificateAuthoritiesPage/route.tsx"),
+    route("/alerting", "cert-manager/AlertingPage/route.tsx"),
     route("/ca/$caId", "cert-manager/CertAuthDetailsByIDPage/route.tsx"),
     route("/pki-collections/$collectionId", "cert-manager/PkiCollectionDetailsByIDPage/routes.tsx"),
     route("/settings", "cert-manager/SettingsPage/route.tsx"),