From ea4bb9aa62f0c403577958a84763833d2a783c6e Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 2 Jul 2025 17:03:34 +0100
Subject: [PATCH] premium tier message for certificates section in integrations
 (#30509)

Fixes #29505

This adds a premium permission tier message to the UI for the
certificates section in the ingrations page

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] Manual QA for all new/changed functionality
---
 changes/issue-29505-premium-tier-certificates |  1 +
 .../CertificateAuthorities.tsx                | 59 ++++++++++++-------
 2 files changed, 39 insertions(+), 21 deletions(-)
 create mode 100644 changes/issue-29505-premium-tier-certificates

diff --git a/changes/issue-29505-premium-tier-certificates b/changes/issue-29505-premium-tier-certificates
new file mode 100644
index 0000000000..21e8c23af7
--- /dev/null
+++ b/changes/issue-29505-premium-tier-certificates
@@ -0,0 +1 @@
+- add premium tier messaging to the certificates section on the integrations page
diff --git a/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/CertificateAuthorities.tsx b/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/CertificateAuthorities.tsx
index d74a2cd4fd..cb6e75caa9 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/CertificateAuthorities.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/CertificateAuthorities.tsx
@@ -7,22 +7,24 @@ import { ICertificateIntegration } from "interfaces/integration";
 
 import SectionHeader from "components/SectionHeader";
 import CustomLink from "components/CustomLink";
+import PremiumFeatureMessage from "components/PremiumFeatureMessage";
 
 import CertificateAuthorityList from "./components/CertificateAuthorityList";
-import {
-  generateListData,
-  getCertificateAuthority,
-  ICertAuthorityListData,
-} from "./helpers";
 import AddCertAuthorityCard from "./components/AddCertAuthorityCard";
 import DeleteCertificateAuthorityModal from "./components/DeleteCertificateAuthorityModal";
 import AddCertAuthorityModal from "./components/AddCertAuthorityModal";
 import EditCertAuthorityModal from "./components/EditCertAuthorityModal";
 
+import {
+  generateListData,
+  getCertificateAuthority,
+  ICertAuthorityListData,
+} from "./helpers";
+
 const baseClass = "certificate-authorities";
 
 const CertificateAuthorities = () => {
-  const { config } = useContext(AppContext);
+  const { config, isPremiumTier } = useContext(AppContext);
 
   const [showAddCertAuthorityModal, setShowAddCertAuthorityModal] = useState(
     false
@@ -81,23 +83,11 @@ const CertificateAuthorities = () => {
   };
 
   const renderContent = () => {
-    if (certificateAuthorities.length === 0) {
-      return <AddCertAuthorityCard onAddCertAuthority={onAddCertAuthority} />;
+    if (!isPremiumTier) {
+      return <PremiumFeatureMessage />;
     }
 
-    return (
-      <CertificateAuthorityList
-        certAuthorities={certificateAuthorities}
-        onAddCertAuthority={onAddCertAuthority}
-        onClickEdit={onEditCertAuthority}
-        onClickDelete={onDeleteCertAuthority}
-      />
-    );
-  };
-
-  return (
-    <div className={baseClass}>
-      <SectionHeader title="Certificates" />
+    const pageDescription = (
       <p className={`${baseClass}__page-description`}>
         To help your end users connect to Wi-Fi or VPNs, you can add your
         certificate authority. Then, head over to{" "}
@@ -111,6 +101,33 @@ const CertificateAuthorities = () => {
           newTab
         />
       </p>
+    );
+
+    if (certificateAuthorities.length === 0) {
+      return (
+        <>
+          {pageDescription}
+          <AddCertAuthorityCard onAddCertAuthority={onAddCertAuthority} />
+        </>
+      );
+    }
+
+    return (
+      <>
+        {pageDescription}
+        <CertificateAuthorityList
+          certAuthorities={certificateAuthorities}
+          onAddCertAuthority={onAddCertAuthority}
+          onClickEdit={onEditCertAuthority}
+          onClickDelete={onDeleteCertAuthority}
+        />
+      </>
+    );
+  };
+
+  return (
+    <div className={baseClass}>
+      <SectionHeader title="Certificates" />
       {renderContent()}
       {showAddCertAuthorityModal && (
         <AddCertAuthorityModal