@finos/legend-query-builder 4.14.18 → 4.14.19

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -14,18 +14,25 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useCallback, useState, forwardRef } from 'react';
+import {
+  useEffect,
+  useRef,
+  useCallback,
+  useState,
+  forwardRef,
+  type ChangeEvent,
+} from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
   BlankPanelPlaceholder,
+  CalculatorIcon,
   TimesIcon,
   DropdownMenu,
   MenuContent,
   MenuContentItem,
   CaretDownIcon,
   ContextMenu,
-  InputWithInlineValidation,
   SigmaIcon,
   PanelDropZone,
   DragPreviewLayer,
@@ -34,7 +41,6 @@ import {
   PanelContent,
   TrashIcon,
   PanelDnDEntry,
-  PanelEntryDragHandle,
   CalendarIcon,
   CalendarClockIcon,
   CustomSelectorInput,
@@ -62,7 +68,10 @@ import {
   QueryBuilderSimpleProjectionColumnState,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
-import { QueryBuilderPropertyExpressionBadge } from '../QueryBuilderPropertyExpressionEditor.js';
+import {
+  QueryBuilderEditablePropertyName,
+  QueryBuilderPropertyExpressionBadge,
+} from '../QueryBuilderPropertyExpressionEditor.js';
 import { QueryResultModifierModal } from './QueryBuilderResultModifierPanel.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
 import { flowResult } from 'mobx';
@@ -110,7 +119,10 @@ import {
 } from '../../stores/QueryBuilderPropertyEditorState.js';
 import { generateDefaultValueForPrimitiveType } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_CALENDAR_TYPE } from '../../graph-manager/QueryBuilderConst.js';
-import { QueryBuilderPropertyInfoTooltip } from '../shared/QueryBuilderPropertyInfoTooltip.js';
+import {
+  QueryBuilderDerivationInfoTooltip,
+  QueryBuilderPropertyInfoTooltip,
+} from '../shared/QueryBuilderPropertyInfoTooltip.js';
 
 const QueryBuilderProjectionColumnContextMenu = observer(
   forwardRef<
@@ -149,10 +161,10 @@ const QueryBuilderProjectionColumnContextMenu = observer(
 const QueryBuilderSimpleProjectionColumnEditor = observer(
   (props: {
     projectionColumnState: QueryBuilderSimpleProjectionColumnState;
-    setIsEditingColumnName: (isEditing: boolean) => void;
-    error?: boolean | undefined;
+    changeColumnName: (event: ChangeEvent<HTMLInputElement>) => void;
+    error?: string | undefined;
   }) => {
-    const { projectionColumnState, setIsEditingColumnName, error } = props;
+    const { projectionColumnState, changeColumnName, error } = props;
     const onPropertyExpressionChange = (
       node: QueryBuilderExplorerTreePropertyNodeData,
     ): void =>
@@ -163,17 +175,13 @@ const QueryBuilderSimpleProjectionColumnEditor = observer(
       );
 
     return (
-      <div className="query-builder__projection__column__value__property">
-        <QueryBuilderPropertyExpressionBadge
-          columnName={projectionColumnState.columnName}
-          propertyExpressionState={
-            projectionColumnState.propertyExpressionState
-          }
-          onPropertyExpressionChange={onPropertyExpressionChange}
-          setIsEditingColumnName={setIsEditingColumnName}
-          error={error}
-        />
-      </div>
+      <QueryBuilderPropertyExpressionBadge
+        columnName={projectionColumnState.columnName}
+        propertyExpressionState={projectionColumnState.propertyExpressionState}
+        onPropertyExpressionChange={onPropertyExpressionChange}
+        changeColumnName={changeColumnName}
+        error={error}
+      />
     );
   },
 );
@@ -388,13 +396,6 @@ const QueryBuilderProjectionColumnEditor = observer(
     ) => projectionColumnState.setColumnName(event.target.value);
     const isDuplicatedColumnName =
       projectionColumnState.tdsState.isDuplicateColumn(projectionColumnState);
-    const [isEditingColumnName, setIsEditingColumnName] = useState(false);
-    const columnNameInputRef = useRef<HTMLInputElement>(null);
-    useEffect(() => {
-      if (isEditingColumnName) {
-        columnNameInputRef.current?.focus();
-      }
-    }, [isEditingColumnName, columnNameInputRef]);
 
     // aggregation
     const aggregateColumnState = tdsState.aggregationState.columns.find(
@@ -705,6 +706,7 @@ const QueryBuilderProjectionColumnEditor = observer(
       }),
       [handleDrop],
     );
+
     return (
       <PanelDnDEntry
         ref={ref}
@@ -752,13 +754,12 @@ const QueryBuilderProjectionColumnEditor = observer(
             data-testid={
               QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_PROJECTION_COLUMN
             }
-            className="query-builder__projection__column__container"
+            ref={dragHandleRef}
+            className={clsx('query-builder__projection__column__container', {
+              'query-builder__projection__column__container--dragging':
+                projectionColumnBeingDragged !== undefined,
+            })}
           >
-            <PanelEntryDragHandle
-              isDragging={false}
-              dragSourceConnector={dragHandleRef}
-              className="query-builder__projection__column__drag-handle__container"
-            />
             {projectionColumnState instanceof
               QueryBuilderSimpleProjectionColumnState && (
               <>
@@ -783,55 +784,38 @@ const QueryBuilderProjectionColumnEditor = observer(
                     <InfoCircleIcon />
                   </div>
                 </QueryBuilderPropertyInfoTooltip>
-                {isEditingColumnName ? (
-                  <div className="query-builder__projection__column__name">
-                    <InputWithInlineValidation
-                      className="query-builder__projection__column__name__input input-group__input"
-                      spellCheck={false}
-                      value={projectionColumnState.columnName}
-                      onChange={changeColumnName}
-                      onKeyDown={(
-                        event: React.KeyboardEvent<HTMLInputElement>,
-                      ) => {
-                        if (event.key === 'Enter') {
-                          setIsEditingColumnName(false);
-                        }
-                      }}
-                      onBlur={() => {
-                        setIsEditingColumnName(false);
-                      }}
-                      error={
-                        isDuplicatedColumnName ? 'Duplicated column' : undefined
-                      }
-                      ref={columnNameInputRef}
-                    />
-                  </div>
-                ) : (
-                  <div className="query-builder__projection__column__value">
-                    <QueryBuilderSimpleProjectionColumnEditor
-                      projectionColumnState={projectionColumnState}
-                      setIsEditingColumnName={setIsEditingColumnName}
-                      error={isDuplicatedColumnName}
-                    />
-                  </div>
-                )}
+                <div className="query-builder__projection__column__value">
+                  <QueryBuilderSimpleProjectionColumnEditor
+                    projectionColumnState={projectionColumnState}
+                    changeColumnName={changeColumnName}
+                    error={
+                      isDuplicatedColumnName ? 'Duplicated column' : undefined
+                    }
+                  />
+                </div>
               </>
             )}
             {projectionColumnState instanceof
               QueryBuilderDerivationProjectionColumnState && (
               <>
-                <div className="query-builder__projection__column__name query-builder__projection__column__name__derivation">
-                  <InputWithInlineValidation
-                    className="query-builder__projection__column__name__input input-group__input"
-                    spellCheck={false}
-                    value={projectionColumnState.columnName}
-                    onChange={changeColumnName}
+                <QueryBuilderDerivationInfoTooltip
+                  title={projectionColumnState.columnName}
+                  type={projectionColumnState.returnType}
+                  placement="bottom-start"
+                >
+                  <div className="query-builder-property-expression-badge__property__info">
+                    <CalculatorIcon />
+                  </div>
+                </QueryBuilderDerivationInfoTooltip>
+                <div className="query-builder__projection__column__value">
+                  <QueryBuilderEditablePropertyName
+                    columnName={projectionColumnState.columnName}
+                    changeColumnName={changeColumnName}
                     error={
                       isDuplicatedColumnName ? 'Duplicated column' : undefined
                     }
+                    title={projectionColumnState.columnName}
                   />
-                </div>
-                <div className="query-builder__projection__column__value">
                   <QueryBuilderDerivationProjectionColumnEditor
                     projectionColumnState={projectionColumnState}
                   />

package/src/components/fetch-structure/QueryBuilderTDSWindowPanel.tsx

@@ -274,7 +274,9 @@ const QueryBuilderWindowColumnModalEditor = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx([
             'query-builder__olap__modal',
             {
@@ -525,7 +527,11 @@ const QueryBuilderWindowColumnModalEditor = observer(
             {createNewWindow ? (
               <ModalFooterButton text="Create" onClick={create} />
             ) : (
-              <ModalFooterButton text="Close" onClick={close} />
+              <ModalFooterButton
+                text="Close"
+                onClick={close}
+                type="secondary"
+              />
             )}
           </ModalFooter>
         </Modal>

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -316,7 +316,13 @@ export const QueryBuilderResultPanel = observer(
             open={Boolean(showSqlModal)}
             onClose={() => setShowSqlModal(false)}
           >
-            <Modal className="editor-modal" darkMode={true}>
+            <Modal
+              className="editor-modal"
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+            >
               <ModalHeader title="Executed SQL Query" />
               <ModalBody className="query-builder__sql__modal">
                 <>
@@ -340,6 +346,7 @@ export const QueryBuilderResultPanel = observer(
                 <ModalFooterButton
                   onClick={() => setShowSqlModal(false)}
                   text="Close"
+                  type="secondary"
                 />
               </ModalFooter>
             </Modal>

package/src/components/result/tds/QueryBuilderTDSGridResult.tsx

@@ -230,6 +230,8 @@ export const QueryBuilderTDSGridResult = observer(
     const colDefs = isLocalModeEnabled
       ? getLocalColDefs(executionResult, resultState)
       : getColDefs(executionResult, resultState);
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
     const onSaveGridColumnState = (): void => {
       if (!columnAPi) {
@@ -338,9 +340,10 @@ export const QueryBuilderTDSGridResult = observer(
         className="query-builder__result__values__table"
       >
         <div
-          className={clsx(
-            'ag-theme-balham-dark query-builder__result__tds-grid',
-          )}
+          className={clsx('query-builder__result__tds-grid', {
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
+          })}
         >
           {isLocalModeEnabled ? (
             <DataGrid

package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx

@@ -49,6 +49,9 @@ const QueryResultCellRenderer = observer(
       resultState.queryBuilderState.fetchStructureState.implementation;
     const applicationStore = resultState.queryBuilderState.applicationStore;
     const cellValue = params.value as QueryBuilderTDSResultCellDataType;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+
     const formattedCellValue = (): QueryBuilderTDSResultCellDataType => {
       if (isNumber(cellValue)) {
         return Intl.NumberFormat(DEFAULT_LOCALE, {
@@ -311,7 +314,10 @@ const QueryResultCellRenderer = observer(
           !resultState.mousedOverCell
         }
         menuProps={{ elevation: 7 }}
-        className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
+        className={clsx('query-builder__result__tds-grid', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
       >
         <div
           className={clsx('query-builder__result__values__table__cell', {
@@ -342,6 +348,9 @@ export const QueryBuilderTDSSimpleGridResult = observer(
   }) => {
     const { executionResult, queryBuilderState } = props;
     const resultState = queryBuilderState.resultState;
+    const darkMode =
+      !queryBuilderState.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
     const colDefs = executionResult.result.columns.map(
       (colName) =>
         ({
@@ -364,9 +373,10 @@ export const QueryBuilderTDSSimpleGridResult = observer(
         className="query-builder__result__values__table"
       >
         <div
-          className={clsx(
-            'ag-theme-balham-dark query-builder__result__tds-grid',
-          )}
+          className={clsx('query-builder__result__tds-grid', {
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
+          })}
         >
           <DataGrid
             rowData={getRowDataFromExecutionResult(executionResult)}

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -190,6 +190,7 @@ const VariableExpressionParameterEditor = observer(
 
             <button
               className="value-spec-editor__variable__reset-btn"
+              name="Reset"
               title="Reset"
               onClick={resetValue}
             >
@@ -310,6 +311,7 @@ const StringPrimitiveInstanceValueEditor = observer(
         )}
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -353,6 +355,7 @@ const BooleanPrimitiveInstanceValueEditor = observer(
         </button>
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -388,8 +391,26 @@ const NumberPrimitiveInstanceValueEditor = observer(
       ? Number.parseInt(Number(value).toString(), 10)
       : Number(value);
 
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const updateValueSpecIfValid = (val: string): void => {
+      const parsedValue = isInteger
+        ? Number.parseInt(Number(val).toString(), 10)
+        : Number(val);
+      if (!isNaN(parsedValue) && parsedValue !== valueSpecification.values[0]) {
+        instanceValue_setValue(
+          valueSpecification,
+          parsedValue,
+          0,
+          obseverContext,
+        );
+        setValueSpecification(valueSpecification);
+      }
+    };
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
       setValue(event.target.value);
+      updateValueSpecIfValid(event.target.value);
     };
 
     // Support expression evaluation
@@ -397,15 +418,16 @@ const NumberPrimitiveInstanceValueEditor = observer(
       if (isNaN(numericValue)) {
         try {
           const calculatedValue = guaranteeIsNumber(evaluate(value));
-          setValue(
-            isInteger
-              ? Number.parseInt(calculatedValue.toString(), 10).toString()
-              : Number(calculatedValue).toString(),
-          );
+          updateValueSpecIfValid(calculatedValue.toString());
+          setValue(calculatedValue.toString());
         } catch {
+          updateValueSpecIfValid(
+            (valueSpecification.values[0] as number).toString(),
+          );
           setValue((valueSpecification.values[0] as number).toString());
         }
       } else {
+        updateValueSpecIfValid(numericValue.toString());
         setValue(numericValue.toString());
       }
     };
@@ -419,29 +441,14 @@ const NumberPrimitiveInstanceValueEditor = observer(
       }
     };
 
-    useEffect(() => {
-      setValue((valueSpecification.values[0] as number).toString());
-    }, [valueSpecification]);
-
     useEffect(() => {
       if (
         !isNaN(numericValue) &&
         numericValue !== valueSpecification.values[0]
       ) {
-        instanceValue_setValue(
-          valueSpecification,
-          numericValue,
-          0,
-          obseverContext,
-        );
-        setValueSpecification(valueSpecification);
+        setValue((valueSpecification.values[0] as number).toString());
       }
-    }, [
-      numericValue,
-      valueSpecification,
-      setValueSpecification,
-      obseverContext,
-    ]);
+    }, [numericValue, valueSpecification]);
 
     return (
       <div className={clsx('value-spec-editor', className)}>
@@ -453,7 +460,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
             type="text" // NOTE: we leave this as text so that we can support expression evaluation
             inputMode="numeric"
             value={value}
-            onChange={changeValue}
+            onChange={handleInputChange}
             onBlur={calculateExpression}
             onKeyDown={onKeyDown}
           />
@@ -469,6 +476,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
         </div>
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -494,6 +502,7 @@ const EnumValueInstanceValueEditor = observer(
       setValueSpecification,
       obseverContext,
     } = props;
+    const applicationStore = useApplicationStore();
     const enumValueRef = guaranteeNonNullable(valueSpecification.values[0]);
     const enumValue = enumValueRef.value;
     const options = enumValue._OWNER.values.map((value) => ({
@@ -517,10 +526,13 @@ const EnumValueInstanceValueEditor = observer(
           options={options}
           onChange={changeValue}
           value={{ value: enumValue, label: enumValue.name }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -857,6 +869,7 @@ const CollectionValueInstanceValueEditor = observer(
             </button>
             <button
               className="value-spec-editor__reset-btn"
+              name="Reset"
               title="Reset"
               onClick={resetValue}
             >
@@ -917,6 +930,7 @@ const DateInstanceValueEditor = observer(
         />
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >

package/src/components/shared/CustomDatePicker.tsx

@@ -913,6 +913,7 @@ const CustomDateInstanceValueEditor: React.FC<{
     setDatePickerOption,
     observerContext,
   } = props;
+  const applicationStore = useApplicationStore();
   const inputRef = useRef<HTMLInputElement>(null);
   const [durationValue, setDurationValue] = useState(
     customDateOptionValue.duration,
@@ -1015,7 +1016,9 @@ const CustomDateInstanceValueEditor: React.FC<{
             );
           }}
           value={{ value: unitValue, label: unitValue }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="value-spec-editor__date-picker__custom-date__input">
@@ -1038,7 +1041,9 @@ const CustomDateInstanceValueEditor: React.FC<{
             );
           }}
           value={{ value: directionValue, label: directionValue }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="value-spec-editor__date-picker__custom-date__input">
@@ -1058,7 +1063,9 @@ const CustomDateInstanceValueEditor: React.FC<{
             changeValue(durationValue, unitValue, directionValue, val.value);
           }}
           value={{ value: referenceMomentValue, label: referenceMomentValue }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
     </div>
@@ -1079,6 +1086,7 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const applicationStore = useApplicationStore();
   const selectorRef = useRef<SelectComponent>(null);
   const [unitValue, setUnitValue] = useState(
     customDateAdjustOptionValue instanceof CustomFirstDayOfOption
@@ -1130,7 +1138,9 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
             }
           }}
           value={unitValue ? { value: unitValue, label: unitValue } : null}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
     </div>
@@ -1151,6 +1161,7 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const applicationStore = useApplicationStore();
   const selectorRef = useRef<SelectComponent>(null);
   const [dayOfWeekValue, setDayOfWeekValue] = useState(
     customDateAdjustOptionValue instanceof CustomPreviousDayOfWeekOption
@@ -1200,7 +1211,9 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
               ? { value: dayOfWeekValue, label: dayOfWeekValue }
               : null
           }
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
     </div>

package/src/components/shared/LambdaEditor.tsx

@@ -28,6 +28,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalTitle,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import {
   disposeCodeEditor,
@@ -224,6 +225,21 @@ const LambdaEditor_Inner = observer(
       }
     }, [editor, isExpanded]);
 
+    // set styling when theme changes
+    useEffect(() => {
+      if (editor) {
+        editor.updateOptions({
+          theme: applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled
+            ? CODE_EDITOR_THEME.BUILT_IN__VSCODE_LIGHT
+            : CODE_EDITOR_THEME.DEFAULT_DARK,
+        });
+      }
+    }, [
+      editor,
+      applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled,
+    ]);
+
     // set backdrop to force user to fix parser error when it happens
     useEffect(() => {
       if (parserError) {
@@ -605,7 +621,9 @@ const LambdaEditor_PopUp = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx(
             'editor-modal lambda-editor__popup__modal',
             {
@@ -639,19 +657,17 @@ const LambdaEditor_PopUp = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <button
-              className="btn btn--dark btn--caution"
+            <ModalFooterButton
+              className="btn--caution"
+              text="Discard changes"
               onClick={discardChanges}
-            >
-              Discard changes
-            </button>
-            <button
-              className="btn btn--dark"
+            />
+            <ModalFooterButton
+              text="Close"
               onClick={onClose}
               disabled={Boolean(lambdaEditorState.parserError)}
-            >
-              Close
-            </button>
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/shared/LambdaParameterValuesEditor.tsx

@@ -71,7 +71,9 @@ export const LambdaParameterValuesEditor = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal lambda-parameter-values__modal"
         >
           <ModalHeader title="Set Parameter Values" />
@@ -131,6 +133,7 @@ export const LambdaParameterValuesEditor = observer(
               inProgressText={isClosingAction ? 'Closing...' : undefined}
               onClick={close}
               text="Close"
+              type="secondary"
             />
           </ModalFooter>
         </Modal>