@finos/legend-application-studio 28.21.11 → 28.21.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.21.11",
+  "version": "28.21.12",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -47,15 +47,15 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@finos/legend-application": "16.0.110",
-    "@finos/legend-art": "7.1.151",
-    "@finos/legend-code-editor": "2.0.176",
-    "@finos/legend-data-cube": "0.3.93",
-    "@finos/legend-extension-dsl-data-product": "0.0.86",
-    "@finos/legend-extension-dsl-diagram": "8.1.240",
+    "@finos/legend-application": "16.0.111",
+    "@finos/legend-art": "7.1.152",
+    "@finos/legend-code-editor": "2.0.177",
+    "@finos/legend-data-cube": "0.3.94",
+    "@finos/legend-extension-dsl-data-product": "0.0.87",
+    "@finos/legend-extension-dsl-diagram": "8.1.241",
     "@finos/legend-graph": "32.6.8",
-    "@finos/legend-lego": "2.0.196",
-    "@finos/legend-query-builder": "4.18.15",
+    "@finos/legend-lego": "2.0.197",
+    "@finos/legend-query-builder": "4.18.16",
     "@finos/legend-server-depot": "6.1.12",
     "@finos/legend-server-lakehouse": "0.3.57",
     "@finos/legend-server-sdlc": "5.4.3",

package/src/components/editor/ActivityBar.tsx

@@ -24,10 +24,13 @@ import {
 import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
 import {
   clsx,
+  CheckIcon,
   ControlledDropdownMenu,
   RepoIcon,
   MenuContent,
   MenuContentItem,
+  MenuContentItemBlankIcon,
+  MenuContentItemIcon,
   MenuContentItemLabel,
   GitPullRequestIcon,
   GitMergeIcon,
@@ -48,10 +51,35 @@ import {
 import { useEditorStore } from './EditorStoreProvider.js';
 import { forwardRef, useEffect, useState } from 'react';
 import {
+  LEGEND_APPLICATION_COLOR_THEME,
   ReleaseLogManager,
   ReleaseNotesManager,
   VIRTUAL_ASSISTANT_TAB,
 } from '@finos/legend-application';
+
+/**
+ * Themes that studio has real SCSS support for. Filters the global theme
+ * registry (which also exposes stubs and app-specific themes like
+ * `legacy-light`) down to what studio can actually render correctly.
+ *
+ * To add a new theme to studio's picker:
+ *   1. Implement its SCSS in `legend-art/style/base/themes/`
+ *   2. Add the key here.
+ */
+const STUDIO_SUPPORTED_COLOR_THEMES: ReadonlySet<string> = new Set([
+  LEGEND_APPLICATION_COLOR_THEME.DEFAULT_DARK,
+  LEGEND_APPLICATION_COLOR_THEME.DEFAULT_LIGHT,
+]);
+
+/**
+ * Subset of supported themes that are still being stabilized and should only be
+ * exposed in non-production environments. These are hidden from the picker
+ * unless the `NonProductionFeatureFlag` config option is enabled, so dev/QA can
+ * test them without shipping the toggle to production users.
+ */
+const STUDIO_NON_PRODUCTION_COLOR_THEMES: ReadonlySet<string> = new Set([
+  LEGEND_APPLICATION_COLOR_THEME.DEFAULT_LIGHT,
+]);
 import { LegendStudioAppInfo } from '../LegendStudioAppInfo.js';
 import { generateSetupRoute } from '../../__lib__/LegendStudioNavigation.js';
 import { useLegendStudioApplicationStore } from '../LegendStudioFrameworkProvider.js';
@@ -69,16 +97,53 @@ import { useAuth, type AuthContextProps } from 'react-oidc-context';
 const SettingsMenu = observer(
   forwardRef<HTMLDivElement, unknown>(function SettingsMenu(props, ref) {
     const editorStore = useEditorStore();
+    const applicationStore = useLegendStudioApplicationStore();
+    const { layoutService } = applicationStore;
     const showDeveloperTool = (): void => {
       editorStore.panelGroupDisplayState.open();
       editorStore.setActivePanelMode(PANEL_MODE.DEV_TOOL);
     };
+    const selectColorTheme = (key: string): void => {
+      layoutService.setColorTheme(key, { persist: true });
+    };
+    // Non-production themes (e.g. the in-progress light theme) are only exposed
+    // when the `NonProductionFeatureFlag` config option is on.
+    const showNonProductionThemes =
+      applicationStore.config.options.NonProductionFeatureFlag;
 
     return (
       <MenuContent ref={ref} className="activity-bar__setting__menu">
         <MenuContentItem onClick={showDeveloperTool}>
+          <MenuContentItemBlankIcon />
           <MenuContentItemLabel>Show Developer Tool</MenuContentItemLabel>
         </MenuContentItem>
+        <MenuContentDivider />
+        <MenuContentItem disabled={true}>
+          <MenuContentItemBlankIcon />
+          <MenuContentItemLabel>Color Theme</MenuContentItemLabel>
+        </MenuContentItem>
+        {layoutService.availableColorThemes
+          .filter(
+            (theme) =>
+              STUDIO_SUPPORTED_COLOR_THEMES.has(theme.key) &&
+              (showNonProductionThemes ||
+                !STUDIO_NON_PRODUCTION_COLOR_THEMES.has(theme.key)),
+          )
+          .map((theme) => (
+            <MenuContentItem
+              key={theme.key}
+              onClick={() => selectColorTheme(theme.key)}
+            >
+              {theme.key === layoutService.currentColorTheme.key ? (
+                <MenuContentItemIcon>
+                  <CheckIcon />
+                </MenuContentItemIcon>
+              ) : (
+                <MenuContentItemBlankIcon />
+              )}
+              <MenuContentItemLabel>{theme.name}</MenuContentItemLabel>
+            </MenuContentItem>
+          ))}
       </MenuContent>
     );
   }),

package/src/components/editor/editor-group/GrammarTextEditor.tsx

@@ -56,7 +56,7 @@ import {
   clearMarkers,
   setErrorMarkers,
   moveCursorToPosition,
-  CODE_EDITOR_THEME,
+  getCodeEditorThemeForAppTheme,
   CODE_EDITOR_LANGUAGE,
   getInlineSnippetSuggestions,
   type PureGrammarTextSuggestion,
@@ -869,7 +869,13 @@ export const GrammarTextEditor = observer(() => {
       const _editor = monacoEditorAPI.create(element, {
         ...getBaseCodeEditorOptions(),
         language: CODE_EDITOR_LANGUAGE.PURE,
-        theme: CODE_EDITOR_THEME.DEFAULT_DARK,
+        // Pick the theme matching the current app theme so the editor doesn't
+        // flash dark before the global theme sync (in configureCodeEditorComponent)
+        // applies. Theme changes after mount are picked up via that global sync.
+        theme: getCodeEditorThemeForAppTheme(
+          editorStore.applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled,
+        ),
         renderValidationDecorations: 'on',
         wordWrap: grammarTextEditorState.wordWrapOtion,
         readOnly: editorStore.editorMode.disableEditing,

package/src/components/editor/editor-group/database-editor/DatabaseDiagramCanvas.tsx

@@ -58,6 +58,7 @@ import {
   resolveJoinFormula,
 } from './DatabaseDiagramHelper.js';
 import type { DatabaseEditorState } from '../../../../stores/editor/editor-state/element-editor-state/DatabaseEditorState.js';
+import { useApplicationStore } from '@finos/legend-application';
 
 const NODE_TYPES = {
   table: DatabaseTableNode,
@@ -107,6 +108,7 @@ const findRelationById = (
 const DatabaseDiagramCanvasInner = observer(
   (props: { editorState: DatabaseEditorState }) => {
     const { editorState } = props;
+    const applicationStore = useApplicationStore();
     const {
       database,
       selectedRelation,
@@ -521,6 +523,15 @@ const DatabaseDiagramCanvasInner = observer(
       <div className="database-diagram__canvas-shell">
         <ReactFlow
           className="database-diagram__canvas"
+          // Drive ReactFlow's built-in light/dark variant from the active app
+          // theme. The chrome (canvas bg, controls, minimap, edges, dot pattern)
+          // then tracks studio's theme without us having to override individual
+          // `--xy-*` variables.
+          colorMode={
+            applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+              ? 'light'
+              : 'dark'
+          }
           nodes={selectionAwareNodes}
           edges={selectionAwareEdges}
           nodeTypes={NODE_TYPES}

package/src/components/editor/editor-group/database-editor/DatabaseEditor.tsx

@@ -20,12 +20,10 @@ import {
   ChevronRightIcon,
   InfoCircleIcon,
   LockIcon,
-  MoonIcon,
   ResizablePanel,
   ResizablePanelGroup,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
-  SunIcon,
   clsx,
   getCollapsiblePanelGroupProps,
 } from '@finos/legend-art';
@@ -90,14 +88,7 @@ export const DatabaseEditor = observer(() => {
   );
 
   return (
-    <div
-      className={clsx('database-editor', {
-        // Local light-theme opt-in. Scoped to this editor only — the rest
-        // of Studio remains in its configured theme. SCSS overrides hang
-        // off this modifier class.
-        'database-editor--light': editorState.theme === 'light',
-      })}
-    >
+    <div className="database-editor">
       <div className="database-editor__tabs__header">
         <div className="database-editor__tabs">
           {TABS.map((tab) => (
@@ -128,24 +119,6 @@ export const DatabaseEditor = observer(() => {
             READ ONLY
           </span>
         </div>
-        {/*
-         * Light/dark theme toggle. Scoped to this editor only — see
-         * `DatabaseEditorState.toggleTheme`. Icon switches to surface the
-         * mode the user would jump TO if they clicked (current=dark shows
-         * a sun, current=light shows a moon).
-         */}
-        <button
-          type="button"
-          className="database-editor__theme-toggle"
-          onClick={() => editorState.toggleTheme()}
-          title={
-            editorState.theme === 'dark'
-              ? 'Switch to light theme (this editor only)'
-              : 'Switch to dark theme'
-          }
-        >
-          {editorState.theme === 'dark' ? <SunIcon /> : <MoonIcon />}
-        </button>
       </div>
       <div className="database-editor__content">
         {database instanceof INTERNAL__LakehouseGeneratedDatabase && (

package/src/components/editor/editor-group/diff-editor/EntityChangeConflictEditor.tsx

@@ -54,7 +54,7 @@ import {
   getCodeEditorValue,
   normalizeLineEnding,
   clearMarkers,
-  CODE_EDITOR_THEME,
+  getCodeEditorThemeForAppTheme,
   CODE_EDITOR_LANGUAGE,
 } from '@finos/legend-code-editor';
 import {
@@ -154,6 +154,7 @@ export const EntityChangeConflictSideBarItem = observer(
 const MergeConflictEditor = observer(
   (props: { conflictEditorState: EntityChangeConflictEditorState }) => {
     const { conflictEditorState } = props;
+    const applicationStore = useApplicationStore();
     const isReadOnly = conflictEditorState.isReadOnly;
     const [editor, setEditor] = useState<
       monacoEditorAPI.IStandaloneCodeEditor | undefined
@@ -189,7 +190,10 @@ const MergeConflictEditor = observer(
         const element = textInputRef.current;
         const _editor = monacoEditorAPI.create(element, {
           ...getBaseCodeEditorOptions(),
-          theme: CODE_EDITOR_THEME.DEFAULT_DARK,
+          // Match the active app theme — see GrammarTextEditor for the rationale.
+          theme: getCodeEditorThemeForAppTheme(
+            applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled,
+          ),
           language: CODE_EDITOR_LANGUAGE.PURE,
           minimap: { enabled: false },
           formatOnType: true,
@@ -198,7 +202,10 @@ const MergeConflictEditor = observer(
         _editor.focus(); // focus on the editor initially so we can correctly compute next/prev conflict chunks
         setEditor(_editor);
       }
-    }, [editor]);
+    }, [
+      editor,
+      applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled,
+    ]);
 
     if (editor) {
       // dispose the old editor content setter in case the `updateInput` handler changes

package/src/components/editor/editor-group/function-activator/FunctionEditor.tsx

@@ -1521,7 +1521,7 @@ export const FunctionEditor = observer(() => {
   return (
     <div
       data-testid={LEGEND_STUDIO_TEST_ID.FUNCTION_EDITOR}
-      className="function-editor uml-editor uml-editor--dark"
+      className="function-editor uml-editor"
     >
       <Panel>
         <div className="panel__header">

package/src/components/editor/editor-group/mapping-editor/MappingEditor.tsx

@@ -220,7 +220,7 @@ const MappingClassMappingEditor = observer(() => {
   );
 
   return (
-    <div className={clsx('mapping-editor', 'mapping__theme__dark')}>
+    <div className="mapping-editor">
       <ResizablePanelGroup orientation="vertical">
         <ResizablePanel size={300} minSize={300}>
           <div className="mapping-editor__side-bar">

package/src/components/editor/editor-group/uml-editor/StereotypeSelector.tsx

@@ -185,11 +185,7 @@ export const StereotypeSelector = observer(
           dragSourceConnector={handleRef}
           isDragging={isBeingDragged}
         />
-        <div
-          className={clsx('stereotype-selector', {
-            'stereotype-selector--dark': darkTheme,
-          })}
-        >
+        <div className="stereotype-selector">
           <div className="stereotype-selector__profile">
             <CustomSelectorInput
               className="stereotype-selector__profile__selector"

package/src/components/editor/editor-group/uml-editor/TaggedValueEditor.tsx

@@ -194,11 +194,7 @@ export const TaggedValueEditor = observer(
           dragSourceConnector={handleRef}
           isDragging={isBeingDragged}
         />
-        <div
-          className={clsx('tagged-value-editor', {
-            'tagged-value-editor--dark': darkTheme,
-          })}
-        >
+        <div className="tagged-value-editor">
           <div className="tagged-value-editor__profile">
             <CustomSelectorInput
               className="tagged-value-editor__profile__selector"

package/src/stores/editor/editor-state/element-editor-state/DatabaseEditorState.ts

@@ -42,7 +42,6 @@ import {
   type View,
 } from '@finos/legend-graph';
 import type { EditorStore } from '../../EditorStore.js';
-import { LegendStudioUserDataHelper } from '../../../../__lib__/LegendStudioUserDataHelper.js';
 
 /**
  * Top-level tabs inside the Database form-mode editor. `VIEW` shows the ERD
@@ -397,19 +396,6 @@ export class DatabaseEditorState extends ElementEditorState {
   // by `react-reflex` and not tracked here — only the binary collapse flag.
   isSidePanelCollapsed = false;
 
-  // ---- Theme --------------------------------------------------------------
-  // The wider Studio app is dark-mode-only today. We allow this editor (and
-  // only this editor) to opt into a light theme via a toolbar toggle. The
-  // setting lives on the editor state so it survives tab switches and
-  // recompiles within the same session, and is persisted per-user via
-  // `UserDataService` (localStorage) so the choice survives reloads.
-  // TODO: when Studio adopts app-wide theming via `LayoutService` (Query
-  // already does this with `setColorTheme(..., { persist: true })`), drop
-  // this local observable + persistence and react to
-  // `applicationStore.layoutService.currentColorTheme` instead so this
-  // editor stays in sync with the rest of the app.
-  theme: 'dark' | 'light' = 'dark';
-
   constructor(editorStore: EditorStore, element: PackageableElement) {
     super(editorStore, element);
 
@@ -435,7 +421,6 @@ export class DatabaseEditorState extends ElementEditorState {
       viewGroupByFormulas: observable,
       isLoadingViewGroupByFormulas: observable,
       isSidePanelCollapsed: observable,
-      theme: observable,
       database: computed,
       setSelectedTab: action,
       setSelectedRelation: action,
@@ -451,7 +436,6 @@ export class DatabaseEditorState extends ElementEditorState {
       collapseAll: action,
       setSidePanelCollapsed: action,
       toggleSidePanelCollapsed: action,
-      toggleTheme: action,
       setSearchText: action,
       requestFitAll: action,
       requestResetLayout: action,
@@ -467,16 +451,6 @@ export class DatabaseEditorState extends ElementEditorState {
       this.expandedSchemaIds.add(getSchemaNodeId(schema.name));
     });
 
-    // Hydrate the persisted theme preference (if any). Falls through to the
-    // default 'dark' when the user has never set it. Done synchronously in
-    // the constructor so the first render already reflects the stored choice.
-    const persistedTheme = LegendStudioUserDataHelper.databaseEditor_getTheme(
-      this.editorStore.applicationStore.userDataService,
-    );
-    if (persistedTheme) {
-      this.theme = persistedTheme;
-    }
-
     // Kick off the formula load eagerly. The flow is async and writes into
     // `viewColumnFormulas` when ready — components render with the placeholder
     // until then, so the UI is never blocked on this. Errors are logged and
@@ -876,21 +850,6 @@ export class DatabaseEditorState extends ElementEditorState {
     this.isSidePanelCollapsed = !this.isSidePanelCollapsed;
   }
 
-  /**
-   * Flip the editor's local theme between dark (the Studio default) and
-   * light. Scoped to this editor only — the rest of Studio remains in its
-   * configured theme. The toggle is exposed via a button in the editor's
-   * tab header. The new value is persisted to `UserDataService` so the
-   * choice survives reloads.
-   */
-  toggleTheme(): void {
-    this.theme = this.theme === 'dark' ? 'light' : 'dark';
-    LegendStudioUserDataHelper.databaseEditor_setTheme(
-      this.editorStore.applicationStore.userDataService,
-      this.theme,
-    );
-  }
-
   /**
    * Set the tree search/filter text. Empty string means \u201cno filter\u201d.
    * The schema-tree consumer derives a lowercase form per render rather
@@ -927,7 +886,6 @@ export class DatabaseEditorState extends ElementEditorState {
     next.expandedSchemaIds = new Set(this.expandedSchemaIds);
     next.expandedRelationIds = new Set(this.expandedRelationIds);
     next.isSidePanelCollapsed = this.isSidePanelCollapsed;
-    next.theme = this.theme;
     // Note: `viewColumnFormulas` and `filterFormulas` deliberately do NOT
     // carry over. They're derived from operations on the new element and may
     // have changed; the constructor's `loadViewColumnFormulas()` and