@finos/legend-application 4.0.3 → 5.1.0

package/src/components/{BasicValueSpecificationEditor.tsx → shared/BasicValueSpecificationEditor.tsx}

@@ -60,7 +60,7 @@ import { useEffect, useRef, useState } from 'react';
 import {
   instanceValue_changeValue,
   instanceValue_changeValues,
-} from '../stores/ValueSpecificationModifierHelper.js';
+} from '../../stores/shared/ValueSpecificationModifierHelper.js';
 import { CustomDatePicker } from './CustomDatePicker.js';
 
 type TypeCheckOption = {
@@ -168,13 +168,16 @@ const StringPrimitiveInstanceValueEditor = observer(
   (props: {
     valueSpecification: PrimitiveInstanceValue;
     className?: string | undefined;
+    setValueSpecification: (val: ValueSpecification) => void;
     resetValue: () => void;
   }) => {
-    const { valueSpecification, className, resetValue } = props;
+    const { valueSpecification, className, resetValue, setValueSpecification } =
+      props;
     const value = valueSpecification.values[0] as string;
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       instanceValue_changeValue(valueSpecification, event.target.value, 0);
-
+      setValueSpecification(valueSpecification);
+    };
     return (
       <div className={clsx('value-spec-editor', className)}>
         <input
@@ -201,11 +204,15 @@ const BooleanPrimitiveInstanceValueEditor = observer(
     valueSpecification: PrimitiveInstanceValue;
     className?: string | undefined;
     resetValue: () => void;
+    setValueSpecification: (val: ValueSpecification) => void;
   }) => {
-    const { valueSpecification, className, resetValue } = props;
+    const { valueSpecification, className, resetValue, setValueSpecification } =
+      props;
     const value = valueSpecification.values[0] as boolean;
-    const toggleValue = (): void =>
+    const toggleValue = (): void => {
       instanceValue_changeValue(valueSpecification, !value, 0);
+      setValueSpecification(valueSpecification);
+    };
 
     return (
       <div className={clsx('value-spec-editor', className)}>
@@ -235,8 +242,15 @@ const NumberPrimitiveInstanceValueEditor = observer(
     isInteger: boolean;
     className?: string | undefined;
     resetValue: () => void;
+    setValueSpecification: (val: ValueSpecification) => void;
   }) => {
-    const { valueSpecification, isInteger, className, resetValue } = props;
+    const {
+      valueSpecification,
+      isInteger,
+      className,
+      resetValue,
+      setValueSpecification,
+    } = props;
     const value = valueSpecification.values[0] as number;
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       let inputVal = isInteger
@@ -244,6 +258,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
         : parseFloat(event.target.value);
       inputVal = isNaN(inputVal) ? 0 : inputVal;
       instanceValue_changeValue(valueSpecification, inputVal, 0);
+      setValueSpecification(valueSpecification);
     };
 
     return (
@@ -271,9 +286,11 @@ const EnumValueInstanceValueEditor = observer(
   (props: {
     valueSpecification: EnumValueInstanceValue;
     className?: string | undefined;
+    setValueSpecification: (val: ValueSpecification) => void;
     resetValue: () => void;
   }) => {
-    const { valueSpecification, className, resetValue } = props;
+    const { valueSpecification, className, resetValue, setValueSpecification } =
+      props;
     const enumValueRef = guaranteeNonNullable(valueSpecification.values[0]);
     const enumValue = enumValueRef.value;
     const options = enumValue._OWNER.values.map((value) => ({
@@ -286,6 +303,7 @@ const EnumValueInstanceValueEditor = observer(
         EnumValueExplicitReference.create(val.value),
         0,
       );
+      setValueSpecification(valueSpecification);
     };
 
     return (
@@ -441,9 +459,16 @@ const CollectionValueInstanceValueEditor = observer(
     expectedType: Type;
     className?: string | undefined;
     resetValue: () => void;
+    setValueSpecification: (val: ValueSpecification) => void;
   }) => {
-    const { valueSpecification, graph, expectedType, className, resetValue } =
-      props;
+    const {
+      valueSpecification,
+      graph,
+      expectedType,
+      className,
+      resetValue,
+      setValueSpecification,
+    } = props;
     const inputRef = useRef<HTMLInputElement>(null);
     const [text, setText] = useState(stringifyValue(valueSpecification.values));
     const [editable, setEditable] = useState(false);
@@ -466,6 +491,7 @@ const CollectionValueInstanceValueEditor = observer(
       setEditable(false);
       setCollectionValue(valueSpecification, graph, expectedType, text);
       setText(stringifyValue(valueSpecification.values));
+      setValueSpecification(valueSpecification);
     };
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
       setText(event.target.value);
@@ -534,12 +560,12 @@ const DateInstanceValueEditor = observer(
     graph: PureModel;
     typeCheckOption: TypeCheckOption;
     className?: string | undefined;
-    updateValue: (val: ValueSpecification) => void;
+    setValueSpecification: (val: ValueSpecification) => void;
     resetValue: () => void;
   }) => {
     const {
       valueSpecification,
-      updateValue,
+      setValueSpecification,
       graph,
       typeCheckOption,
       resetValue,
@@ -551,7 +577,7 @@ const DateInstanceValueEditor = observer(
           valueSpecification={valueSpecification}
           graph={graph}
           typeCheckOption={typeCheckOption}
-          updateValue={updateValue}
+          setValueSpecification={setValueSpecification}
         />
         <button
           className="value-spec-editor__reset-btn"
@@ -566,7 +592,7 @@ const DateInstanceValueEditor = observer(
 );
 
 /**
- * TODO we should pass in the props `setValueSpecification` and `resetValueSpecification`. Reset
+ * TODO we should pass in the props `resetValueSpecification`. Reset
  * should be part of this editor. Also through here we can call `observe_` accordingly.
  *
  * See https://github.com/finos/legend-studio/pull/1021
@@ -576,7 +602,7 @@ export const BasicValueSpecificationEditor: React.FC<{
   graph: PureModel;
   typeCheckOption: TypeCheckOption;
   className?: string | undefined;
-  updateValue: (val: ValueSpecification) => void;
+  setValueSpecification: (val: ValueSpecification) => void;
   resetValue: () => void;
 }> = (props) => {
   const {
@@ -584,7 +610,7 @@ export const BasicValueSpecificationEditor: React.FC<{
     valueSpecification,
     graph,
     typeCheckOption,
-    updateValue,
+    setValueSpecification,
     resetValue,
   } = props;
   if (valueSpecification instanceof PrimitiveInstanceValue) {
@@ -594,6 +620,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         return (
           <StringPrimitiveInstanceValueEditor
             valueSpecification={valueSpecification}
+            setValueSpecification={setValueSpecification}
             className={className}
             resetValue={resetValue}
           />
@@ -602,6 +629,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         return (
           <BooleanPrimitiveInstanceValueEditor
             valueSpecification={valueSpecification}
+            setValueSpecification={setValueSpecification}
             className={className}
             resetValue={resetValue}
           />
@@ -614,6 +642,7 @@ export const BasicValueSpecificationEditor: React.FC<{
           <NumberPrimitiveInstanceValueEditor
             valueSpecification={valueSpecification}
             isInteger={_type.path === PRIMITIVE_TYPE.INTEGER}
+            setValueSpecification={setValueSpecification}
             className={className}
             resetValue={resetValue}
           />
@@ -628,7 +657,7 @@ export const BasicValueSpecificationEditor: React.FC<{
             graph={graph}
             typeCheckOption={typeCheckOption}
             className={className}
-            updateValue={updateValue}
+            setValueSpecification={setValueSpecification}
             resetValue={resetValue}
           />
         );
@@ -641,6 +670,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         valueSpecification={valueSpecification}
         className={className}
         resetValue={resetValue}
+        setValueSpecification={setValueSpecification}
       />
     );
   } else if (
@@ -657,6 +687,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         expectedType={typeCheckOption.expectedType}
         className={className}
         resetValue={resetValue}
+        setValueSpecification={setValueSpecification}
       />
     );
   }
@@ -675,7 +706,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         valueSpecification={valueSpecification.getValue()}
         graph={graph}
         typeCheckOption={typeCheckOption}
-        updateValue={updateValue}
+        setValueSpecification={setValueSpecification}
         resetValue={resetValue}
       />
     );
@@ -694,7 +725,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         graph={graph}
         typeCheckOption={typeCheckOption}
         className={className}
-        updateValue={updateValue}
+        setValueSpecification={setValueSpecification}
         resetValue={resetValue}
       />
     );

package/src/components/{CustomDatePicker.tsx → shared/CustomDatePicker.tsx}

@@ -47,7 +47,7 @@ import { useEffect, useState } from 'react';
 import {
   genericType_setRawType,
   instanceValue_changeValue,
-} from '../stores/ValueSpecificationModifierHelper.js';
+} from '../../stores/shared/ValueSpecificationModifierHelper.js';
 
 enum CUSTOM_DATE_PICKER_OPTION {
   ABSOLUTE_DATE = 'Absolute Date',
@@ -673,10 +673,15 @@ const buildDatePickerOption = (
 const AbsoluteDateValueSpecificationEditor: React.FC<{
   valueSpecification: SimpleFunctionExpression | PrimitiveInstanceValue;
   graph: PureModel;
-  updateValue: (val: ValueSpecification) => void;
+  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
 }> = (props) => {
-  const { valueSpecification, graph, updateValue, setDatePickerOption } = props;
+  const {
+    valueSpecification,
+    graph,
+    setValueSpecification,
+    setDatePickerOption,
+  } = props;
   const absoluteDateValue =
     valueSpecification instanceof SimpleFunctionExpression
       ? ''
@@ -685,7 +690,7 @@ const AbsoluteDateValueSpecificationEditor: React.FC<{
     event,
   ) => {
     if (valueSpecification instanceof SimpleFunctionExpression) {
-      updateValue(
+      setValueSpecification(
         buildPrimitiveInstanceValue(
           graph,
           PRIMITIVE_TYPE.STRICTDATE,
@@ -727,10 +732,15 @@ const AbsoluteDateValueSpecificationEditor: React.FC<{
 const AbsoluteTimeValueSpecificationEditor: React.FC<{
   valueSpecification: SimpleFunctionExpression | PrimitiveInstanceValue;
   graph: PureModel;
-  updateValue: (val: ValueSpecification) => void;
+  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
 }> = (props) => {
-  const { valueSpecification, graph, updateValue, setDatePickerOption } = props;
+  const {
+    valueSpecification,
+    graph,
+    setValueSpecification,
+    setDatePickerOption,
+  } = props;
   const absoluteTimeValue =
     valueSpecification instanceof SimpleFunctionExpression
       ? ''
@@ -739,7 +749,7 @@ const AbsoluteTimeValueSpecificationEditor: React.FC<{
     event,
   ) => {
     if (valueSpecification instanceof SimpleFunctionExpression) {
-      updateValue(
+      setValueSpecification(
         buildPrimitiveInstanceValue(
           graph,
           PRIMITIVE_TYPE.DATETIME,
@@ -783,11 +793,15 @@ const AbsoluteTimeValueSpecificationEditor: React.FC<{
 const CustomDateInstanceValueEditor: React.FC<{
   customDateOptionValue: CustomDateOption;
   graph: PureModel;
-  updateValue: (val: ValueSpecification) => void;
+  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
 }> = (props) => {
-  const { customDateOptionValue, graph, updateValue, setDatePickerOption } =
-    props;
+  const {
+    customDateOptionValue,
+    graph,
+    setValueSpecification,
+    setDatePickerOption,
+  } = props;
   const [durationValue, setDurationValue] = useState(
     customDateOptionValue.duration,
   );
@@ -821,7 +835,7 @@ const CustomDateInstanceValueEditor: React.FC<{
         latestDirectionValue as CUSTOM_DATE_OPTION_DIRECTION,
         latestReferenceMomentValue as CUSTOM_DATE_OPTION_REFERENCE_MOMENT,
       );
-      updateValue(buildPureAdjustDateFunction(dateOption, graph));
+      setValueSpecification(buildPureAdjustDateFunction(dateOption, graph));
       const matchedPreservedCustomAdjustDates =
         reservedCustomDateOptions.filter(
           (t) => t.generateDisplayLabel() === dateOption.generateDisplayLabel(),
@@ -933,13 +947,13 @@ const CustomDateInstanceValueEditor: React.FC<{
 const CustomFirstDayOfValueSpecificationEditor: React.FC<{
   customDateAdjustOptionValue: DatePickerOption;
   graph: PureModel;
-  updateValue: (val: ValueSpecification) => void;
+  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
 }> = (props) => {
   const {
     customDateAdjustOptionValue,
     graph,
-    updateValue,
+    setValueSpecification,
     setDatePickerOption,
   } = props;
   const [unitValue, setUnitValue] = useState(
@@ -959,7 +973,9 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
               latestUnitValue as CUSTOM_DATE_FIRST_DAY_OF_UNIT,
             )
           : new CustomFirstDayOfOption('', undefined);
-      updateValue(buildPureDateFunctionExpression(startDayOfDateOption, graph));
+      setValueSpecification(
+        buildPureDateFunctionExpression(startDayOfDateOption, graph),
+      );
       setDatePickerOption(startDayOfDateOption);
     }
   };
@@ -991,13 +1007,13 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
 const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
   customDateAdjustOptionValue: DatePickerOption;
   graph: PureModel;
-  updateValue: (val: ValueSpecification) => void;
+  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
 }> = (props) => {
   const {
     customDateAdjustOptionValue,
     graph,
-    updateValue,
+    setValueSpecification,
     setDatePickerOption,
   } = props;
   const [dayOfWeekValue, setDayOfWeekValue] = useState(
@@ -1011,7 +1027,7 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
         `Previous ${latestDurationUnitValue}`,
         latestDurationUnitValue as CUSTOM_DATE_DAY_OF_WEEK,
       );
-      updateValue(
+      setValueSpecification(
         buildPureDateFunctionExpression(previousDayOfWeekDateOption, graph),
       );
       setDatePickerOption(previousDayOfWeekDateOption);
@@ -1064,9 +1080,10 @@ export const CustomDatePicker: React.FC<{
      */
     match?: boolean;
   };
-  updateValue: (val: ValueSpecification) => void;
+  setValueSpecification: (val: ValueSpecification) => void;
 }> = (props) => {
-  const { valueSpecification, updateValue, graph, typeCheckOption } = props;
+  const { valueSpecification, setValueSpecification, graph, typeCheckOption } =
+    props;
   // For some cases where types need to be matched strictly.
   // Some options need to be filtered out for DateTime.
   const targetDateOptionsEnum = typeCheckOption.match
@@ -1102,7 +1119,7 @@ export const CustomDatePicker: React.FC<{
     if (
       CUSTOM_DATE_PICKER_OPTION.LATEST_DATE === chosenDatePickerOption.value
     ) {
-      updateValue(
+      setValueSpecification(
         buildPrimitiveInstanceValue(
           graph,
           PRIMITIVE_TYPE.LATESTDATE,
@@ -1123,13 +1140,13 @@ export const CustomDatePicker: React.FC<{
         (d) => d.value === chosenDatePickerOption.value,
       );
       theReservedCustomDateOption.length > 0
-        ? updateValue(
+        ? setValueSpecification(
             buildPureAdjustDateFunction(
               guaranteeNonNullable(theReservedCustomDateOption[0]),
               graph,
             ),
           )
-        : updateValue(
+        : setValueSpecification(
             buildPureDateFunctionExpression(chosenDatePickerOption, graph),
           );
     }
@@ -1142,7 +1159,7 @@ export const CustomDatePicker: React.FC<{
           <AbsoluteDateValueSpecificationEditor
             graph={graph}
             valueSpecification={valueSpecification}
-            updateValue={updateValue}
+            setValueSpecification={setValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );
@@ -1151,7 +1168,7 @@ export const CustomDatePicker: React.FC<{
           <AbsoluteTimeValueSpecificationEditor
             graph={graph}
             valueSpecification={valueSpecification}
-            updateValue={updateValue}
+            setValueSpecification={setValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );
@@ -1160,7 +1177,7 @@ export const CustomDatePicker: React.FC<{
           <CustomDateInstanceValueEditor
             graph={graph}
             customDateOptionValue={buildCustomDateOption(valueSpecification)}
-            updateValue={updateValue}
+            setValueSpecification={setValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );
@@ -1171,7 +1188,7 @@ export const CustomDatePicker: React.FC<{
             customDateAdjustOptionValue={buildDatePickerOption(
               valueSpecification,
             )}
-            updateValue={updateValue}
+            setValueSpecification={setValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );
@@ -1182,7 +1199,7 @@ export const CustomDatePicker: React.FC<{
             customDateAdjustOptionValue={buildDatePickerOption(
               valueSpecification,
             )}
-            updateValue={updateValue}
+            setValueSpecification={setValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );

package/src/components/{DocumentationLink.tsx → shared/DocumentationLink.tsx}

@@ -15,7 +15,7 @@
  */
 
 import { clsx, QuestionCircleIcon } from '@finos/legend-art';
-import { useApplicationStore } from './ApplicationStoreProvider.js';
+import { useApplicationStore } from '../ApplicationStoreProvider.js';
 
 export const DocumentationLink: React.FC<{
   documentationKey: string;

package/src/components/{LambdaEditor.tsx → shared/LambdaEditor.tsx}

@@ -35,7 +35,7 @@ import {
   LongArrowAltUpIcon,
   Dialog,
 } from '@finos/legend-art';
-import type { LambdaEditorState } from '../stores/LambdaEditorState.js';
+import type { LambdaEditorState } from '../../stores/shared/LambdaEditorState.js';
 import {
   debounce,
   noop,
@@ -44,9 +44,9 @@ import {
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { ParserError, type EngineError, type Type } from '@finos/legend-graph';
-import { APPLICATION_TEST_ID } from './ApplicationTestID.js';
-import { useApplicationStore } from './ApplicationStoreProvider.js';
-import { EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../const.js';
+import { APPLICATION_TEST_ID } from '../ApplicationTestID.js';
+import { useApplicationStore } from '../ApplicationStoreProvider.js';
+import { EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../../const.js';
 
 export type LambdaEditorOnKeyDownEventHandler = {
   matcher: (event: IKeyboardEvent) => boolean;

package/src/components/{LambdaParameterValuesEditor.tsx → shared/LambdaParameterValuesEditor.tsx}

@@ -22,8 +22,8 @@ import {
 } from '@finos/legend-graph';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import type { LambdaParametersState } from '../stores/LambdaParameterState.js';
-import { useApplicationStore } from './ApplicationStoreProvider.js';
+import type { LambdaParametersState } from '../../stores/shared/LambdaParameterState.js';
+import { useApplicationStore } from '../ApplicationStoreProvider.js';
 import { BasicValueSpecificationEditor } from './BasicValueSpecificationEditor.js';
 
 // TODO we may want to further componentize this by removing the dialog wrapper
@@ -75,7 +75,9 @@ export const LambdaParameterValuesEditor = observer(
                   {paramState.value && (
                     <BasicValueSpecificationEditor
                       valueSpecification={paramState.value}
-                      updateValue={(val: ValueSpecification): void => {
+                      setValueSpecification={(
+                        val: ValueSpecification,
+                      ): void => {
                         paramState.setValue(val);
                       }}
                       graph={graph}

package/src/components/shared/PackageableElementOptionRenderer.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 type { PackageableElement } from '@finos/legend-graph';
+import type { PackageableElementOption } from '../../index.js';
+
+export const getPackageableElementOptionalFormatter = (props?: {
+  darkMode?: boolean;
+}): ((
+  option: PackageableElementOption<PackageableElement>,
+) => React.ReactNode) =>
+  function PackageableElementOptionLabel(
+    option: PackageableElementOption<PackageableElement>,
+  ): React.ReactNode {
+    const className = props?.darkMode
+      ? 'packageable-element-format-option-label--dark'
+      : 'packageable-element-format-option-label';
+
+    return (
+      <div className={className}>
+        <div className={`${className}__name`}>{option.label}</div>
+        {option.value.package && (
+          <div className={`${className}__tag`}>{option.value.path}</div>
+        )}
+      </div>
+    );
+  };

package/src/components/{TextInputEditor.tsx → shared/TextInputEditor.tsx}

@@ -29,8 +29,8 @@ import {
   getEditorValue,
   normalizeLineEnding,
 } from '@finos/legend-art';
-import { type EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../const.js';
-import { useApplicationStore } from './ApplicationStoreProvider.js';
+import { type EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../../const.js';
+import { useApplicationStore } from '../ApplicationStoreProvider.js';
 
 export type TextInputEditorOnKeyDownEventHandler = {
   matcher: (event: IKeyboardEvent) => boolean;