From 722f4a03d86414fe340738d7ca00b7ff9304e78a Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 2 May 2025 09:34:37 -0700
Subject: [PATCH] UI: Premium feature message when viewing GitOps Mode toggle
 on Fleet Free (#28744)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## For #28743

<img width="1350" alt="Screenshot 2025-05-01 at 3 19 24 PM"
src="https://github.com/user-attachments/assets/1fb56a1b-ce8c-4e8c-b8b6-be1d23f91380"
/>

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/28743-gom-premium-only                |  1 +
 .../cards/Calendars/Calendars.tsx             |  9 ++----
 .../ChangeManagement/ChangeManagement.tsx     | 31 ++++++++++++-------
 3 files changed, 24 insertions(+), 17 deletions(-)
 create mode 100644 changes/28743-gom-premium-only

diff --git a/changes/28743-gom-premium-only b/changes/28743-gom-premium-only
new file mode 100644
index 0000000000..bf8af9bb90
--- /dev/null
+++ b/changes/28743-gom-premium-only
@@ -0,0 +1 @@
+- Show the premium feature message when viewing the GitOps mode toggle page on Fleet free
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
index 2a6aa255d8..523af3f123 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
@@ -5,8 +5,6 @@ import { IConfig } from "interfaces/config";
 import { NotificationContext } from "context/notification";
 import { AppContext } from "context/app";
 import configAPI from "services/entities/config";
-// @ts-ignore
-import { stringToClipboard } from "utilities/copy_text";
 import paths from "router/paths";
 
 // @ts-ignore
@@ -17,7 +15,6 @@ import CustomLink from "components/CustomLink";
 import Spinner from "components/Spinner";
 import DataError from "components/DataError";
 import PremiumFeatureMessage from "components/PremiumFeatureMessage/PremiumFeatureMessage";
-import Icon from "components/Icon";
 import Card from "components/Card";
 import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";
 import { getPathWithQueryParams } from "utilities/url";
@@ -84,7 +81,6 @@ const Calendars = (): JSX.Element => {
   });
   const [isUpdatingSettings, setIsUpdatingSettings] = useState(false);
   const [formErrors, setFormErrors] = useState<ICalendarsFormErrors>({});
-  const [copyMessage, setCopyMessage] = useState<string>("");
 
   const {
     data: config,
@@ -107,6 +103,7 @@ const Calendars = (): JSX.Element => {
       }
     },
   });
+
   const gomEnabled = config?.gitops.gitops_mode_enabled;
 
   const { apiKeyJson, domain } = formData;
@@ -144,6 +141,8 @@ const Calendars = (): JSX.Element => {
     [formData]
   );
 
+  if (!isPremiumTier) return <PremiumFeatureMessage />;
+
   const onFormSubmit = async (evt: React.MouseEvent<HTMLFormElement>) => {
     setIsUpdatingSettings(true);
 
@@ -405,8 +404,6 @@ const Calendars = (): JSX.Element => {
     );
   };
 
-  if (!isPremiumTier) return <PremiumFeatureMessage />;
-
   if (isLoadingAppConfig) {
     <div className={baseClass}>
       <Spinner includeContainer={false} />
diff --git a/frontend/pages/admin/IntegrationsPage/cards/ChangeManagement/ChangeManagement.tsx b/frontend/pages/admin/IntegrationsPage/cards/ChangeManagement/ChangeManagement.tsx
index 5ad316719a..6b330e7b6a 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/ChangeManagement/ChangeManagement.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/ChangeManagement/ChangeManagement.tsx
@@ -1,24 +1,29 @@
-import Button from "components/buttons/Button";
-import CustomLink from "components/CustomLink";
-import SectionHeader from "components/SectionHeader";
 import React, { useContext, useState } from "react";
+
+import { useQuery } from "react-query";
+
 import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
 
+import { AppContext } from "context/app";
+import { NotificationContext } from "context/notification";
+
+import configAPI from "services/entities/config";
+
+import { IConfig } from "interfaces/config";
+import { IFormField } from "interfaces/form_field";
+import { getErrorReason } from "interfaces/errors";
+
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 import Checkbox from "components/forms/fields/Checkbox";
 import validUrl from "components/forms/validators/valid_url";
 import TooltipWrapper from "components/TooltipWrapper";
-import { IConfig } from "interfaces/config";
-import { IFormField } from "interfaces/form_field";
-import { useQuery } from "react-query";
-
-import configAPI from "services/entities/config";
-import { NotificationContext } from "context/notification";
-import { getErrorReason } from "interfaces/errors";
+import Button from "components/buttons/Button";
+import CustomLink from "components/CustomLink";
+import SectionHeader from "components/SectionHeader";
 import Spinner from "components/Spinner";
 import DataError from "components/DataError";
-import { AppContext } from "context/app";
+import PremiumFeatureMessage from "components/PremiumFeatureMessage";
 
 const baseClass = "change-management";
 
@@ -78,6 +83,10 @@ const ChangeManagement = () => {
     }
   );
 
+  const { isPremiumTier } = useContext(AppContext);
+
+  if (!isPremiumTier) return <PremiumFeatureMessage />;
+
   const { gitOpsModeEnabled, repoURL } = formData;
 
   if (isLoadingConfig) {