@finos/legend-application 7.0.4 → 7.1.2

package/src/components/shared/PackageableElementOptionRenderer.tsx

@@ -14,41 +14,36 @@
  * limitations under the License.
  */
 
-import type {
-  PackageableElement,
-  GraphManagerState,
+import {
+  type PackageableElement,
+  isSystemElement,
+  isGeneratedElement,
+  isDependencyElement,
 } from '@finos/legend-graph';
 import type { PackageableElementOption } from '../../stores/shared/PackageableElementOption.js';
 
-const classifyElementGraphArea = (
-  element: PackageableElement,
-  graphManagerState: GraphManagerState,
-): string =>
-  graphManagerState.isSystemElement(element)
+const getElementColorCode = (element: PackageableElement): string =>
+  isSystemElement(element)
     ? 'system'
-    : graphManagerState.isGeneratedElement(element)
+    : isGeneratedElement(element)
     ? 'generated'
-    : graphManagerState.isMainGraphElement(element)
-    ? 'main'
-    : graphManagerState.isDependencyElement(element)
+    : isDependencyElement(element)
     ? 'dependency'
     : '';
 
 const generateOptionTooltipText = (
   element: PackageableElement,
-  graphManagerState: GraphManagerState,
 ): string | undefined =>
-  graphManagerState.isSystemElement(element)
+  isSystemElement(element)
     ? 'system element'
-    : graphManagerState.isGeneratedElement(element)
+    : isGeneratedElement(element)
     ? 'generated element'
-    : graphManagerState.isDependencyElement(element)
+    : isDependencyElement(element)
     ? 'dependency element'
     : undefined;
 
 export const getPackageableElementOptionFormatter = (props: {
   darkMode?: boolean;
-  graphManagerState: GraphManagerState;
 }): ((
   option: PackageableElementOption<PackageableElement>,
 ) => React.ReactNode) =>
@@ -58,18 +53,17 @@ export const getPackageableElementOptionFormatter = (props: {
     const className = props.darkMode
       ? 'packageable-element-format-option-label--dark'
       : 'packageable-element-format-option-label';
+    const colorCode = getElementColorCode(option.value);
 
     return (
       <div className={className}>
         <div
-          title={`${generateOptionTooltipText(
-            option.value,
-            props.graphManagerState,
-          )}`}
-          className={`packageable-element-format-option-label-type packageable-element-format-option-label-type--${classifyElementGraphArea(
-            option.value,
-            props.graphManagerState,
-          )}`}
+          title={generateOptionTooltipText(option.value)}
+          className={`packageable-element-format-option-label-type ${
+            colorCode
+              ? `packageable-element-format-option-label-type--${colorCode}`
+              : ''
+          } `}
         ></div>
         <div className={`${className}__name`}>{option.label}</div>
         {option.value.package && (

package/src/components/shared/TextInputEditor.tsx

@@ -92,7 +92,9 @@ export const TextInputEditor: React.FC<{
       const element = textInputRef.current;
       const _editor = monacoEditorAPI.create(element, {
         ...baseTextEditorSettings,
-        theme: EDITOR_THEME.LEGEND,
+        theme: applicationStore.TEMPORARY__isLightThemeEnabled
+          ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
+          : EDITOR_THEME.LEGEND,
         formatOnType: true,
         formatOnPaste: true,
       });

package/src/const.ts

@@ -20,6 +20,7 @@ export const MONOSPACED_FONT_FAMILY = 'Roboto Mono';
 
 export enum EDITOR_THEME {
   LEGEND = 'LEGEND',
+  TEMPORARY__VSCODE_LIGHT = 'vs',
 }
 
 export enum EDITOR_LANGUAGE {

package/src/stores/ApplicationStore.ts

@@ -136,6 +136,14 @@ export class ApplicationStore<
   telemetryService = new TelemetryService();
   tracerService = new TracerService();
 
+  // theme
+  /**
+   * NOTE: this is the poor man way of doing theming
+   * we would need to revise this flag later
+   * See https://github.com/finos/legend-studio/issues/264
+   */
+  TEMPORARY__isLightThemeEnabled = false;
+
   constructor(
     config: T,
     navigator: WebApplicationNavigator,
@@ -151,6 +159,7 @@ export class ApplicationStore<
       notifyWarning: action,
       notifyIllegalState: action,
       notifyError: action,
+      TEMPORARY__setIsLightThemeEnabled: action,
     });
 
     this.config = config;
@@ -173,6 +182,10 @@ export class ApplicationStore<
     );
   }
 
+  TEMPORARY__setIsLightThemeEnabled(val: boolean): void {
+    this.TEMPORARY__isLightThemeEnabled = val;
+  }
+
   setBlockingAlert(alertInfo: BlockingAlertInfo | undefined): void {
     this.blockingAlertInfo = alertInfo;
   }

package/src/stores/shared/LambdaParameterState.ts

@@ -90,12 +90,14 @@ export const buildParametersLetLambdaFunc = (
 export class LambdaParameterState {
   readonly uuid = uuid();
   readonly parameter: VariableExpression;
+  readonly graph: PureModel;
   observableContext: ObserverContext;
   value: ValueSpecification | undefined;
 
   constructor(
     variableExpression: VariableExpression,
     observableContext: ObserverContext,
+    graph: PureModel,
   ) {
     makeObservable(this, {
       value: observable,
@@ -104,10 +106,13 @@ export class LambdaParameterState {
     });
     this.observableContext = observableContext;
     this.parameter = observe_VariableExpression(variableExpression);
+    this.graph = graph;
   }
 
   mockParameterValue(): void {
-    this.setValue(generateVariableExpressionMockValue(this.parameter));
+    this.setValue(
+      generateVariableExpressionMockValue(this.parameter, this.graph),
+    );
   }
 
   setValue(value: ValueSpecification | undefined): void {