diff --git a/apps/admin-x-settings/src/App.tsx b/apps/admin-x-settings/src/App.tsx index a0a1cf249c..87cf0ea84f 100644 --- a/apps/admin-x-settings/src/App.tsx +++ b/apps/admin-x-settings/src/App.tsx @@ -14,6 +14,7 @@ interface AppProps { officialThemes: OfficialTheme[]; zapierTemplates: ZapierTemplate[]; externalNavigate: (link: ExternalLink) => void; + toggleFeatureFlag: (flag: string, enabled: boolean) => void; darkMode?: boolean; } @@ -27,7 +28,7 @@ const queryClient = new QueryClient({ } }); -function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, darkMode = false}: AppProps) { +function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, toggleFeatureFlag, darkMode = false}: AppProps) { const appClassName = clsx( 'admin-x-settings h-[100vh] w-full overflow-y-auto overflow-x-hidden', darkMode && 'dark' @@ -35,7 +36,7 @@ function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, d return ( - + diff --git a/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx b/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx index 8c985a67c6..9ce6e993d9 100644 --- a/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx +++ b/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx @@ -15,7 +15,8 @@ interface ServicesContextProps { ghostVersion: string officialThemes: OfficialTheme[]; zapierTemplates: ZapierTemplate[]; - search: SearchService + search: SearchService; + toggleFeatureFlag: (flag: string, enabled: boolean) => void; } interface ServicesProviderProps { @@ -23,16 +24,18 @@ interface ServicesProviderProps { ghostVersion: string; zapierTemplates: ZapierTemplate[]; officialThemes: OfficialTheme[]; + toggleFeatureFlag: (flag: string, enabled: boolean) => void; } const ServicesContext = createContext({ ghostVersion: '', officialThemes: [], zapierTemplates: [], - search: {filter: '', setFilter: () => {}, checkVisible: () => true} + search: {filter: '', setFilter: () => {}, checkVisible: () => true}, + toggleFeatureFlag: () => {} }); -const ServicesProvider: React.FC = ({children, ghostVersion, zapierTemplates, officialThemes}) => { +const ServicesProvider: React.FC = ({children, ghostVersion, zapierTemplates, officialThemes, toggleFeatureFlag}) => { const search = useSearchService(); return ( @@ -40,7 +43,8 @@ const ServicesProvider: React.FC = ({children, ghostVersi ghostVersion, officialThemes, zapierTemplates, - search + search, + toggleFeatureFlag }}> {children} diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx index 4f16d6a470..a9b79cdb64 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx @@ -4,12 +4,14 @@ import {ConfigResponseType, configDataType} from '../../../../api/config'; import {getSettingValue, useEditSettings} from '../../../../api/settings'; import {useGlobalData} from '../../../providers/GlobalDataProvider'; import {useQueryClient} from '@tanstack/react-query'; +import {useServices} from '../../../providers/ServiceProvider'; const FeatureToggle: React.FC<{ flag: string; }> = ({flag}) => { const {settings} = useGlobalData(); const labs = JSON.parse(getSettingValue(settings, 'labs') || '{}'); const {mutateAsync: editSettings} = useEditSettings(); const client = useQueryClient(); + const {toggleFeatureFlag} = useServices(); return { const newValue = !labs[flag]; @@ -17,6 +19,7 @@ const FeatureToggle: React.FC<{ flag: string; }> = ({flag}) => { key: 'labs', value: JSON.stringify({...labs, [flag]: newValue}) }]); + toggleFeatureFlag(flag, newValue); client.setQueriesData([configDataType], current => ({ config: { ...(current as ConfigResponseType).config, diff --git a/apps/admin-x-settings/src/main.tsx b/apps/admin-x-settings/src/main.tsx index 3f250ef457..a8af546822 100644 --- a/apps/admin-x-settings/src/main.tsx +++ b/apps/admin-x-settings/src/main.tsx @@ -29,6 +29,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( ref: 'TryGhost/Edition', image: 'assets/img/themes/Edition.png' }]} + toggleFeatureFlag={() => {}} zapierTemplates={[]} /> diff --git a/ghost/admin/app/components/admin-x/settings.js b/ghost/admin/app/components/admin-x/settings.js index f2a1f730a4..067f5ac5fb 100644 --- a/ghost/admin/app/components/admin-x/settings.js +++ b/ghost/admin/app/components/admin-x/settings.js @@ -275,6 +275,10 @@ export default class AdminXSettings extends Component { this.router.transitionTo(route, ...models); }; + toggleFeatureFlag = (flag, value) => { + this.feature.set(flag, value); + }; + editorResource = fetchSettings(); AdminXApp = (props) => { @@ -310,6 +314,7 @@ export default class AdminXSettings extends Component { officialThemes={officialThemes} zapierTemplates={zapierTemplates} externalNavigate={this.externalNavigate} + toggleFeatureFlag={this.toggleFeatureFlag} darkMode={this.feature.nightShift} />