Update labs settings in Ember when changed in AdminX (#18231)

refs https://github.com/TryGhost/Product/issues/3832

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 (
         <QueryClientProvider client={queryClient}>
-            <ServicesProvider ghostVersion={ghostVersion} officialThemes={officialThemes} zapierTemplates={zapierTemplates}>
+            <ServicesProvider ghostVersion={ghostVersion} officialThemes={officialThemes} toggleFeatureFlag={toggleFeatureFlag} zapierTemplates={zapierTemplates}>
                 <GlobalDataProvider>
                     <RoutingProvider externalNavigate={externalNavigate}>
                         <GlobalDirtyStateProvider>

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<ServicesContextProps>({
     ghostVersion: '',
     officialThemes: [],
     zapierTemplates: [],
-    search: {filter: '', setFilter: () => {}, checkVisible: () => true}
+    search: {filter: '', setFilter: () => {}, checkVisible: () => true},
+    toggleFeatureFlag: () => {}
 });
 
-const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersion, zapierTemplates, officialThemes}) => {
+const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersion, zapierTemplates, officialThemes, toggleFeatureFlag}) => {
     const search = useSearchService();
 
     return (
@@ -40,7 +43,8 @@ const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersi
             ghostVersion,
             officialThemes,
             zapierTemplates,
-            search
+            search,
+            toggleFeatureFlag
         }}>
             {children}
         </ServicesContext.Provider>

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<string>(settings, 'labs') || '{}');
     const {mutateAsync: editSettings} = useEditSettings();
     const client = useQueryClient();
+    const {toggleFeatureFlag} = useServices();
 
     return <Toggle checked={labs[flag]} onChange={async () => {
         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,

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={[]}
         />
     </React.StrictMode>

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