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

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 && (