UI: Premium feature message when viewing GitOps Mode toggle on Fleet Free (#28744)

## 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>
This commit is contained in:
jacobshandling 2025-05-02 09:34:37 -07:00 committed by GitHub
parent 19c2e9197d
commit 722f4a03d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 17 deletions

View file

@ -0,0 +1 @@
- Show the premium feature message when viewing the GitOps mode toggle page on Fleet free

View file

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

View file

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