@finos/legend-application 7.0.3 → 7.1.1

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -16,6 +16,7 @@
 
 import {
   type TooltipPlacement,
+  type InputActionMeta,
   Tooltip,
   DollarIcon,
   clsx,
@@ -49,11 +50,14 @@ import {
   getMultiplicityDescription,
 } from '@finos/legend-graph';
 import {
+  type DebouncedFunc,
+  type GeneratorFn,
   guaranteeNonNullable,
   isNonNullable,
   returnUndefOnError,
   uniq,
 } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import CSVParser from 'papaparse';
 import { useEffect, useRef, useState } from 'react';
@@ -61,6 +65,7 @@ import {
   instanceValue_changeValue,
   instanceValue_changeValues,
 } from '../../stores/shared/ValueSpecificationModifierHelper.js';
+import { useApplicationStore } from '../ApplicationStoreProvider.js';
 import { CustomDatePicker } from './CustomDatePicker.js';
 
 type TypeCheckOption = {
@@ -170,23 +175,100 @@ const StringPrimitiveInstanceValueEditor = observer(
     className?: string | undefined;
     setValueSpecification: (val: ValueSpecification) => void;
     resetValue: () => void;
+    selectorConfig?:
+      | {
+          values: string[] | undefined;
+          isLoading: boolean;
+          reloadValues:
+            | DebouncedFunc<(inputValue: string) => GeneratorFn<void>>
+            | undefined;
+          cleanUpReloadValues?: () => void;
+        }
+      | undefined;
   }) => {
-    const { valueSpecification, className, resetValue, setValueSpecification } =
-      props;
+    const {
+      valueSpecification,
+      className,
+      resetValue,
+      setValueSpecification,
+      selectorConfig,
+    } = props;
+    const useSelector = Boolean(selectorConfig);
+    const applicationStore = useApplicationStore();
     const value = valueSpecification.values[0] as string;
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      instanceValue_changeValue(valueSpecification, event.target.value, 0);
+    const updateValueSpec = (val: string): void => {
+      instanceValue_changeValue(valueSpecification, val, 0);
       setValueSpecification(valueSpecification);
     };
+    const changeInputValue: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      updateValueSpec(event.target.value);
+    };
+    // custom select
+    const selectedValue = { value: value, label: value };
+    const reloadValuesFunc = selectorConfig?.reloadValues;
+    const changeValue = (
+      val: null | { value: number | string; label: string },
+    ): void => {
+      const newValue = val === null ? '' : val.value.toString();
+      updateValueSpec(newValue);
+    };
+    const handleInputChange = (
+      inputValue: string,
+      actionChange: InputActionMeta,
+    ): void => {
+      if (actionChange.action === 'input-change') {
+        updateValueSpec(inputValue);
+        reloadValuesFunc?.cancel();
+        const reloadValuesFuncTransformation = reloadValuesFunc?.(inputValue);
+        if (reloadValuesFuncTransformation) {
+          flowResult(reloadValuesFuncTransformation).catch(
+            applicationStore.alertUnhandledError,
+          );
+        }
+      }
+      if (actionChange.action === 'input-blur') {
+        reloadValuesFunc?.cancel();
+        selectorConfig?.cleanUpReloadValues?.();
+      }
+    };
+    const isLoading = selectorConfig?.isLoading;
+    const queryOptions = selectorConfig?.values?.length
+      ? selectorConfig.values.map((e) => ({
+          value: e,
+          label: e.toString(),
+        }))
+      : undefined;
+    const noOptionsMessage =
+      selectorConfig?.values === undefined ? (): null => null : undefined;
+
     return (
       <div className={clsx('value-spec-editor', className)}>
-        <input
-          className="panel__content__form__section__input value-spec-editor__input"
-          spellCheck={false}
-          value={value}
-          placeholder={value === '' ? '(empty)' : undefined}
-          onChange={changeValue}
-        />
+        {useSelector ? (
+          <CustomSelectorInput
+            className="value-spec-editor__enum-selector"
+            options={queryOptions}
+            onChange={changeValue}
+            value={selectedValue}
+            onInputChange={handleInputChange}
+            darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+            isLoading={isLoading}
+            allowCreateWhileLoading={true}
+            noOptionsMessage={noOptionsMessage}
+            components={{
+              DropdownIndicator: null,
+            }}
+          />
+        ) : (
+          <input
+            className="panel__content__form__section__input value-spec-editor__input"
+            spellCheck={false}
+            value={value}
+            placeholder={value === '' ? '(empty)' : undefined}
+            onChange={changeInputValue}
+          />
+        )}
         <button
           className="value-spec-editor__reset-btn"
           title="Reset"
@@ -604,6 +686,16 @@ export const BasicValueSpecificationEditor: React.FC<{
   className?: string | undefined;
   setValueSpecification: (val: ValueSpecification) => void;
   resetValue: () => void;
+  selectorConfig?:
+    | {
+        values: string[] | undefined;
+        isLoading: boolean;
+        reloadValues:
+          | DebouncedFunc<(inputValue: string) => GeneratorFn<void>>
+          | undefined;
+        cleanUpReloadValues?: () => void;
+      }
+    | undefined;
 }> = (props) => {
   const {
     className,
@@ -612,6 +704,7 @@ export const BasicValueSpecificationEditor: React.FC<{
     typeCheckOption,
     setValueSpecification,
     resetValue,
+    selectorConfig,
   } = props;
   if (valueSpecification instanceof PrimitiveInstanceValue) {
     const _type = valueSpecification.genericType.value.rawType;
@@ -623,6 +716,7 @@ export const BasicValueSpecificationEditor: React.FC<{
             setValueSpecification={setValueSpecification}
             className={className}
             resetValue={resetValue}
+            selectorConfig={selectorConfig}
           />
         );
       case PRIMITIVE_TYPE.BOOLEAN:

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/index.ts

@@ -40,6 +40,7 @@ export * from './stores/ApplicationNavigationContextService.js';
 export * from './stores/LegendApplicationPlugin.js';
 
 export * from './stores/ApplicationStoreTestUtils.js';
+export * from './stores/LegendApplicationSDLCSetupState.js';
 
 // ------------------------------------------- Shared components -------------------------------------------
 

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/LegendApplicationSDLCSetupState.ts

@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SDLCServerClient, User } from '@finos/legend-server-sdlc';
+import {
+  type GeneratorFn,
+  assertErrorThrown,
+  HttpStatus,
+  LogEvent,
+  NetworkClientError,
+  type PlainObject,
+} from '@finos/legend-shared';
+import {
+  action,
+  computed,
+  flow,
+  flowResult,
+  makeObservable,
+  observable,
+} from 'mobx';
+import { APPLICATION_EVENT } from './ApplicationEvent.js';
+import {
+  type GenericLegendApplicationStore,
+  ActionAlertActionType,
+  ActionAlertType,
+} from './ApplicationStore.js';
+
+export class LegendApplicationSDLCSetupState {
+  applicationStore: GenericLegendApplicationStore;
+  sdlcServerClient: SDLCServerClient;
+  isSDLCAuthorized = false;
+  SDLCServerTermsOfServicesUrlsToView: string[] = [];
+
+  constructor(
+    applicationStore: GenericLegendApplicationStore,
+    sdlcServerClient: SDLCServerClient,
+  ) {
+    makeObservable(this, {
+      isSDLCAuthorized: observable,
+      SDLCServerTermsOfServicesUrlsToView: observable,
+      dismissSDLCServerTermsOfServicesAlert: action,
+      needsToAcceptSDLCServerTermsOfServices: computed,
+      initializeSDLCServerClient: flow,
+      fetchCurrentUser: flow,
+    });
+    this.applicationStore = applicationStore;
+    this.sdlcServerClient = sdlcServerClient;
+  }
+
+  *initializeSDLCServerClient(): GeneratorFn<void> {
+    try {
+      this.isSDLCAuthorized =
+        (yield this.sdlcServerClient.isAuthorized()) as boolean;
+      if (!this.isSDLCAuthorized) {
+        this.applicationStore.navigator.jumpTo(
+          SDLCServerClient.authorizeCallbackUrl(
+            this.sdlcServerClient.baseUrl ?? '',
+            this.applicationStore.navigator.getCurrentLocation(),
+          ),
+        );
+      } else {
+        // Only proceed intialization after passing authorization check
+
+        // check terms of service agreement status
+        this.SDLCServerTermsOfServicesUrlsToView =
+          (yield this.sdlcServerClient.hasAcceptedTermsOfService()) as string[];
+        if (this.SDLCServerTermsOfServicesUrlsToView.length) {
+          this.applicationStore.setActionAlertInfo({
+            message: `Please read and accept the SDLC servers' terms of service`,
+            prompt: `Click 'Done' when you have accepted all the terms`,
+            type: ActionAlertType.CAUTION,
+            actions: [
+              {
+                label: 'See terms of services',
+                default: true,
+                handler: (): void =>
+                  this.SDLCServerTermsOfServicesUrlsToView.forEach((url) =>
+                    this.applicationStore.navigator.openNewWindow(url),
+                  ),
+                type: ActionAlertActionType.PROCEED,
+              },
+              {
+                label: 'Done',
+                type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+                handler: (): void => {
+                  this.dismissSDLCServerTermsOfServicesAlert();
+                  this.applicationStore.navigator.reload();
+                },
+              },
+            ],
+          });
+        }
+
+        // fetch server features config + current user
+        yield this.sdlcServerClient.fetchServerFeaturesConfiguration();
+        yield flowResult(this.fetchCurrentUser());
+      }
+    } catch (error) {
+      assertErrorThrown(error);
+      if (
+        // eslint-disable-next-line no-process-env
+        process.env.NODE_ENV === 'development' &&
+        error instanceof NetworkClientError &&
+        error.response.status === HttpStatus.UNAUTHORIZED
+      ) {
+        this.applicationStore.setActionAlertInfo({
+          message:
+            'The first time the application starts in development mode, the developer would need to authenticate using SDLC server. Please do so then manually reload the app',
+          type: ActionAlertType.STANDARD,
+          actions: [
+            {
+              label: 'Authenticate using SDLC',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+              handler: (): void => {
+                this.applicationStore.navigator.openNewWindow(
+                  this.sdlcServerClient.currentUserUrl,
+                );
+                this.applicationStore.setBlockingAlert({
+                  message:
+                    'Waiting for the developer to authenticate using SDLC server',
+                  prompt:
+                    'Please manually reload the application after authentication',
+                });
+              },
+            },
+          ],
+        });
+      } else {
+        this.applicationStore.log.error(
+          LogEvent.create(APPLICATION_EVENT.APPLICATION_SETUP_FAILURE),
+          error,
+        );
+        this.applicationStore.notifyError(error);
+      }
+    }
+  }
+
+  *fetchCurrentUser(): GeneratorFn<void> {
+    try {
+      const currentUser = User.serialization.fromJson(
+        (yield this.sdlcServerClient.getCurrentUser()) as PlainObject<User>,
+      );
+      this.sdlcServerClient.setCurrentUser(currentUser);
+    } catch (error) {
+      assertErrorThrown(error);
+      this.applicationStore.log.error(
+        LogEvent.create(APPLICATION_EVENT.APPLICATION_SETUP_FAILURE),
+        error,
+      );
+      this.applicationStore.notifyWarning(error.message);
+    }
+  }
+
+  get needsToAcceptSDLCServerTermsOfServices(): boolean {
+    return Boolean(this.SDLCServerTermsOfServicesUrlsToView.length);
+  }
+
+  dismissSDLCServerTermsOfServicesAlert(): void {
+    this.SDLCServerTermsOfServicesUrlsToView = [];
+  }
+}

package/tsconfig.json

@@ -41,6 +41,7 @@
     "./src/stores/DocumentationService.ts",
     "./src/stores/EventService.ts",
     "./src/stores/LegendApplicationPlugin.ts",
+    "./src/stores/LegendApplicationSDLCSetupState.ts",
     "./src/stores/PureLanguageSupport.ts",
     "./src/stores/WebApplicationNavigator.ts",
     "./src/stores/shared/ExecutionPlanState.ts",