@finos/legend-application 7.0.2 → 7.1.0

package/src/components/shared/LambdaEditor.tsx

@@ -100,6 +100,7 @@ const LambdaEditorInline = observer(
     backdropSetter?: ((val: boolean) => void) | undefined;
     onKeyDownEventHandlers: LambdaEditorOnKeyDownEventHandler[];
     openInPopUp: () => void;
+    onEditorFocusEventHandler?: (() => void) | undefined;
   }) => {
     const {
       className,
@@ -118,12 +119,16 @@ const LambdaEditorInline = observer(
       hideErrorBar,
       onKeyDownEventHandlers,
       openInPopUp,
+      onEditorFocusEventHandler,
     } = props;
     const applicationStore = useApplicationStore();
     const onDidChangeModelContentEventDisposer = useRef<
       IDisposable | undefined
     >(undefined);
     const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
+    const onDidFocusEditorWidgetDisposer = useRef<IDisposable | undefined>(
+      undefined,
+    );
     const value = normalizeLineEnding(lambdaEditorState.lambdaString);
     const parserError = lambdaEditorState.parserError;
     const compilationError = lambdaEditorState.compilationError;
@@ -183,13 +188,15 @@ const LambdaEditorInline = observer(
         const _editor = monacoEditorAPI.create(element, {
           ...baseTextEditorSettings,
           language: EDITOR_LANGUAGE.PURE,
-          theme: EDITOR_THEME.LEGEND,
+          theme: applicationStore.TEMPORARY__isLightThemeEnabled
+            ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
+            : EDITOR_THEME.LEGEND,
           ...lambdaEditorOptions,
         });
         disableEditorHotKeys(_editor);
         setEditor(_editor);
       }
-    }, [editor, useBaseTextEditorSettings]);
+    }, [editor, applicationStore, useBaseTextEditorSettings]);
 
     // set styling for expanded mode
     useEffect(() => {
@@ -305,6 +312,13 @@ const LambdaEditorInline = observer(
         });
       });
 
+      onDidFocusEditorWidgetDisposer.current?.dispose();
+      onDidFocusEditorWidgetDisposer.current = editor.onDidFocusEditorWidget(
+        () => {
+          onEditorFocusEventHandler?.();
+        },
+      );
+
       // Set the text value
       const currentValue = getEditorValue(editor);
       const editorModel = editor.getModel();
@@ -738,6 +752,7 @@ export const LambdaEditor = observer(
      * to allow activating global hotkeys while typing in the editor
      */
     onKeyDownEventHandlers?: LambdaEditorOnKeyDownEventHandler[];
+    onEditorFocusEventHandler?: (() => void) | undefined;
   }) => {
     const {
       className,
@@ -754,6 +769,7 @@ export const LambdaEditor = observer(
       useBaseTextEditorSettings,
       hideErrorBar,
       onKeyDownEventHandlers,
+      onEditorFocusEventHandler,
     } = props;
     const [showPopUp, setShowPopUp] = useState(false);
     const openInPopUp = (): void => setShowPopUp(true);
@@ -831,6 +847,7 @@ export const LambdaEditor = observer(
         hideErrorBar={hideErrorBar}
         onKeyDownEventHandlers={onKeyDownEventHandlers ?? []}
         openInPopUp={openInPopUp}
+        onEditorFocusEventHandler={onEditorFocusEventHandler}
       />
     );
   },

package/src/components/shared/LambdaParameterValuesEditor.tsx

@@ -53,11 +53,11 @@ export const LambdaParameterValuesEditor = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div className="modal modal--dark editor-modal lambda__parameters__editor__modal">
+        <div className="modal modal--dark editor-modal lambda-parameter-values__modal">
           <div className="modal__header">
             <div className="modal__title">Set Parameter Values</div>
           </div>
-          <div className="modal__body lambda__parameters__editor__modal__body">
+          <div className="modal__body lambda-parameter-values__modal__body">
             {lambdaParametersState.parameterStates.map((paramState) => {
               const stringType = graph.getPrimitiveType(PRIMITIVE_TYPE.STRING);
               const variableType = paramState.variableType ?? stringType;
@@ -66,9 +66,11 @@ export const LambdaParameterValuesEditor = observer(
                   key={paramState.uuid}
                   className="panel__content__form__section"
                 >
-                  <div className="lambda__parameters__editor__value__label">
-                    <div>{paramState.parameter.name}</div>
-                    <div className="lambda__parameters__editor__value__name">
+                  <div className="lambda-parameter-values__value__label">
+                    <div className="lambda-parameter-values__value__label__name">
+                      {paramState.parameter.name}
+                    </div>
+                    <div className="lambda-parameter-values__value__label__type">
                       {variableType.name}
                     </div>
                   </div>

package/src/components/shared/PackageableElementOptionRenderer.tsx

@@ -14,10 +14,35 @@
  * limitations under the License.
  */
 
-import type { PackageableElement } from '@finos/legend-graph';
+import {
+  type PackageableElement,
+  isSystemElement,
+  isGeneratedElement,
+  isDependencyElement,
+} from '@finos/legend-graph';
 import type { PackageableElementOption } from '../../stores/shared/PackageableElementOption.js';
 
-export const getPackageableElementOptionalFormatter = (props?: {
+const getElementColorCode = (element: PackageableElement): string =>
+  isSystemElement(element)
+    ? 'system'
+    : isGeneratedElement(element)
+    ? 'generated'
+    : isDependencyElement(element)
+    ? 'dependency'
+    : '';
+
+const generateOptionTooltipText = (
+  element: PackageableElement,
+): string | undefined =>
+  isSystemElement(element)
+    ? 'system element'
+    : isGeneratedElement(element)
+    ? 'generated element'
+    : isDependencyElement(element)
+    ? 'dependency element'
+    : undefined;
+
+export const getPackageableElementOptionFormatter = (props: {
   darkMode?: boolean;
 }): ((
   option: PackageableElementOption<PackageableElement>,
@@ -25,12 +50,21 @@ export const getPackageableElementOptionalFormatter = (props?: {
   function PackageableElementOptionLabel(
     option: PackageableElementOption<PackageableElement>,
   ): React.ReactNode {
-    const className = props?.darkMode
+    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)}
+          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 && (
           <div className={`${className}__tag`}>{option.value.path}</div>

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;
   }