Plumb experimental editor toolbar env var to client-side

Author: wwwillchen

demo/text.py

@@ -12,6 +12,7 @@ def text():
   me.text(text="headline-2: Hello, world!", type="headline-2")
   me.text(text="headline-3: Hello, world!", type="headline-3")
   me.text(text="headline-4: Hello, world!", type="headline-4")
+  me.button("Button", type="flat")  # Added button here
   me.text(text="headline-5: Hello, world!", type="headline-5")
   me.text(text="headline-6: Hello, world!", type="headline-6")
   me.text(text="subtitle-1: Hello, world!", type="subtitle-1")

mesop/protos/ui.proto

@@ -143,6 +143,12 @@ message RenderEvent {
 
     // Only sent in editor mode:
     repeated ComponentConfig component_configs = 5;
+    // Only sent in initial render:
+    optional ExperimentSettings experiment_settings = 7;
+}
+
+message ExperimentSettings {
+    optional bool experimental_editor_toolbar_enabled = 1;
 }
 
 // UI response event for updating state.

mesop/server/server.py

@@ -30,6 +30,9 @@
   os.environ.get("MESOP_EXPERIMENTAL_EDITOR_TOOLBAR", "false").lower() == "true"
 )
 
+print(
+  "EXPERIMENTAL_EDITOR_TOOLBAR_ENABLED", EXPERIMENTAL_EDITOR_TOOLBAR_ENABLED
+)
 
 LOCALHOSTS = (
   # For IPv4 localhost
@@ -92,6 +95,11 @@ def render_loop(
             f"/{WEB_COMPONENTS_PATH_SEGMENT}{js_module}"
             for js_module in js_modules
           ],
+          experiment_settings=pb.ExperimentSettings(
+            experimental_editor_toolbar_enabled=EXPERIMENTAL_EDITOR_TOOLBAR_ENABLED,
+          )
+          if init_request
+          else None,
         )
       )
       yield serialize(data)

mesop/web/src/editor/editor.ts

@@ -36,6 +36,7 @@ import {
   DebugErrorDialogService,
   ErrorDialogService,
 } from '../services/error_dialog_service';
+import {ExperimentService} from '../services/experiment_service';
 // Keep the following comment to ensure there's a hook for adding TS imports in the downstream sync.
 // ADD_TS_IMPORT_HERE
 
@@ -80,6 +81,7 @@ class Editor {
     private router: Router,
     private editorService: EditorService,
     private channel: Channel,
+    private experimentService: ExperimentService,
   ) {
     iconRegistry.setDefaultFontSetClass('material-symbols-rounded');
     this.renderer.setAttribute(
@@ -163,7 +165,7 @@ class Editor {
   }
 
   showEditorToolbar(): boolean {
-    return Boolean(window.localStorage.getItem('MESOP://SHOW_EDITOR_TOOLBAR'));
+    return this.experimentService.experimentalEditorToolbarEnabled;
   }
 }
 

mesop/web/src/services/channel.ts

@@ -19,6 +19,7 @@ import {applyComponentDiff, applyStateDiff} from '../utils/diff';
 import {getViewportSize} from '../utils/viewport_size';
 import {ThemeService} from './theme_service';
 import {getQueryParams} from '../utils/query_params';
+import {ExperimentService} from './experiment_service';
 
 // Pick 500ms as the minimum duration before showing a progress/busy indicator
 // for the channel.
@@ -63,6 +64,7 @@ export class Channel {
     private logger: Logger,
     private title: Title,
     private themeService: ThemeService,
+    private experimentService: ExperimentService,
   ) {
     this.themeService.setOnChangePrefersColorScheme(() => {
       const userEvent = new UserEvent();
@@ -199,6 +201,15 @@ export class Channel {
               this.rootComponent = rootComponent;
             }
 
+            const experimentSettings = uiResponse
+              .getRender()!
+              .getExperimentSettings();
+            if (experimentSettings) {
+              this.experimentService.experimentalEditorToolbarEnabled =
+                experimentSettings.getExperimentalEditorToolbarEnabled() ??
+                false;
+            }
+
             this.componentConfigs = uiResponse
               .getRender()!
               .getComponentConfigsList();

mesop/web/src/services/experiment_service.ts

@@ -0,0 +1,8 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ExperimentService {
+  experimentalEditorToolbarEnabled = false;
+}