@finos/legend-query-builder 4.14.18 → 4.14.20

package/src/components/execution-plan/ExecutionPlanViewer.tsx

@@ -148,11 +148,13 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
   executionPlanState: ExecutionPlanState;
 }> = observer((props) => {
   const { executionPlanState } = props;
-  const applicationStore = executionPlanState.applicationStore;
   const globalImplementationSupport =
     executionPlanState.plan?.globalImplementationSupport;
   const templateFunctions =
     executionPlanState.plan?.processingTemplateFunctions ?? [];
+  const isDarkMode =
+    !executionPlanState.applicationStore.layoutService
+      .TEMPORARY__isLightColorThemeEnabled;
 
   if (
     globalImplementationSupport &&
@@ -210,10 +212,7 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
             <ResizablePanelGroup orientation="vertical">
               <ResizablePanel minSize={30} size={400}>
                 <PanelContent
-                  darkMode={
-                    !applicationStore.layoutService
-                      .TEMPORARY__isLightColorThemeEnabled
-                  }
+                  darkMode={isDarkMode}
                   className="query-builder__java__container__panel"
                 >
                   <div className="query-builder__java__container">
@@ -773,7 +772,7 @@ const ExecutionPlanViewerContent = observer(
             <ResizablePanel size={300} minSize={300}>
               <div className="panel execution-plan-viewer__explorer">
                 <PanelSideBarHeader
-                  darkMode={true}
+                  darkMode={isDarkMode}
                   title="execution plan explorer"
                 />
                 <div className="panel__content execution-plan-viewer__explorer__content__container">
@@ -846,7 +845,7 @@ export const ExecutionPlanViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal className="editor-modal" darkMode={true}>
+        <Modal className="editor-modal" darkMode={isDarkMode}>
           <ModalHeader title="Execution Plan" />
           <ModalBody>
             {executionPlanState.debugText ? (
@@ -891,7 +890,11 @@ export const ExecutionPlanViewer = observer(
             )}
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={closePlanViewer} text="Close" />
+            <ModalFooterButton
+              onClick={closePlanViewer}
+              text="Close"
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -217,6 +217,7 @@ export const QueryBuilderSubclassInfoTooltip: React.FC<{
 const QueryBuilderExplorerPreviewDataModal = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const applicationStore = queryBuilderState.applicationStore;
     const previewDataState = queryBuilderState.explorerState.previewDataState;
     const close = (): void => previewDataState.setPreviewData(undefined);
 
@@ -234,7 +235,9 @@ const QueryBuilderExplorerPreviewDataModal = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal query-builder__explorer__preview-data-modal"
         >
           <ModalHeader title={prettyCONSTName(previewDataState.propertyName)} />
@@ -276,7 +279,7 @@ const QueryBuilderExplorerPreviewDataModal = observer(
             )}
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton text="Close" onClick={close} />
+            <ModalFooterButton text="Close" onClick={close} type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/explorer/QueryBuilderMilestoningEditor.tsx

@@ -281,6 +281,7 @@ const AllVersionsInRangelMilestoningParametersEditor = observer(
 export const MilestoningParametersEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const applicationStore = queryBuilderState.applicationStore;
     const milestoningState = queryBuilderState.milestoningState;
     const close = (): void => milestoningState.setShowMilestoningEditor(false);
     const isCompatibleMilestoningParameter = (
@@ -302,7 +303,9 @@ export const MilestoningParametersEditor = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal query-builder__variables__modal"
         >
           <ModalHeader title="Milestoning Parameters" />
@@ -352,7 +355,7 @@ export const MilestoningParametersEditor = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton text="Close" onClick={close} />
+            <ModalFooterButton text="Close" onClick={close} type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>

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

@@ -346,12 +346,13 @@ const PureSerializationConfigModal = observer(
                 onClick={removeConfig}
               />
             )}
-            <button
-              className="btn modal__footer__close-btn btn--dark"
+            <ModalFooterButton
+              className="modal__footer__close-btn"
               onClick={handleAction}
+              type={toAdd ? 'primary' : 'secondary'}
             >
               {toAdd ? 'Add Config' : 'Close'}
-            </button>
+            </ModalFooterButton>
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -379,6 +380,7 @@ export const QueryBuilderGraphFetchExternalConfig = observer(
       value: serializationState.targetBinding,
       label: serializationState.targetBinding.name,
     };
+    const applicationStore = graphFetchState.queryBuilderState.applicationStore;
     const onBindingChange = (
       val: PackageableElementOption<Binding> | null,
     ): void => {
@@ -423,9 +425,14 @@ export const QueryBuilderGraphFetchExternalConfig = observer(
               onChange={onBindingChange}
               value={selectedBinding}
               formatOptionLabel={getBindingFormatter({
-                darkMode: true,
+                darkMode:
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled,
               })}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           <div className="service-execution-editor__configuration__item">

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

@@ -227,8 +227,10 @@ const cloneSortColumnStateArray = (
 
 export const QueryResultModifierModal = observer(
   (props: { tdsState: QueryBuilderTDSState }) => {
-    // Read current state
     const { tdsState } = props;
+    const applicationStore = tdsState.queryBuilderState.applicationStore;
+
+    // Read current state
     const resultSetModifierState = tdsState.resultSetModifierState;
     const stateSortColumns = resultSetModifierState.sortColumns;
     const stateDistinct = resultSetModifierState.distinct;
@@ -331,7 +333,9 @@ export const QueryResultModifierModal = observer(
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal query-builder__projection__modal"
         >
           <ModalHeader title="Result Set Modifier" />
@@ -403,7 +407,7 @@ export const QueryResultModifierModal = observer(
                   <div className="query-builder__result__slice__input__wrapper">
                     <InputWithInlineValidation
                       id="query-builder__projection__modal__slice-start-input"
-                      className="input--dark query-builder__result__slice__input"
+                      className="input--dark query-builder__result__slice__input panel__content__form__section__input"
                       spellCheck={false}
                       value={slice[0] ?? ''}
                       onChange={changeSliceStart}
@@ -414,7 +418,7 @@ export const QueryResultModifierModal = observer(
                   <div className="query-builder__result__slice__range">..</div>
                   <div className="query-builder__result__slice__input__wrapper">
                     <InputWithInlineValidation
-                      className="input--dark query-builder__result__slice__input"
+                      className="input--dark query-builder__result__slice__input panel__content__form__section__input"
                       spellCheck={false}
                       value={slice[1] ?? ''}
                       onChange={changeSliceEnd}

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