@finos/legend-query-builder 4.14.16 → 4.14.19

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { useCallback } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from 'react';
 import {
   clsx,
   Dialog,
@@ -26,6 +32,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalFooterButton,
+  InputWithInlineValidation,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -301,6 +308,8 @@ const DerivedPropertyExpressionEditor = observer(
 export const QueryBuilderPropertyExpressionEditor = observer(
   (props: { propertyExpressionState: QueryBuilderPropertyExpressionState }) => {
     const { propertyExpressionState } = props;
+    const applicationStore =
+      propertyExpressionState.queryBuilderState.applicationStore;
     const handleClose = (): void =>
       propertyExpressionState.setIsEditingDerivedProperty(false);
     const isParameterCompatibleWithDerivedProperty = (
@@ -334,7 +343,9 @@ export const QueryBuilderPropertyExpressionEditor = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal query-builder-property-editor"
         >
           <ModalHeader title="Derived Property" />
@@ -368,6 +379,72 @@ export const QueryBuilderPropertyExpressionEditor = observer(
   },
 );
 
+export const QueryBuilderEditablePropertyName = observer(
+  (props: {
+    columnName: string;
+    changeColumnName?:
+      | ((event: ChangeEvent<HTMLInputElement>) => void)
+      | undefined;
+    error: string | undefined;
+    title: string;
+  }) => {
+    const { columnName, changeColumnName, error, title } = props;
+
+    const [isEditingColumnName, setIsEditingColumnName] = useState(false);
+    const columnNameInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      if (isEditingColumnName) {
+        columnNameInputRef.current?.focus();
+      }
+    }, [isEditingColumnName, columnNameInputRef]);
+
+    return isEditingColumnName ? (
+      <div className="query-builder__property__name__editor">
+        <InputWithInlineValidation
+          className="query-builder__property__name__editor__input input-group__input"
+          spellCheck={false}
+          value={columnName}
+          onChange={changeColumnName}
+          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+            if (event.key === 'Enter') {
+              setIsEditingColumnName(false);
+            }
+          }}
+          onBlur={() => {
+            setIsEditingColumnName(false);
+          }}
+          error={error}
+          ref={columnNameInputRef}
+          draggable={true}
+          onDragStart={(e: React.DragEvent<HTMLInputElement>) => {
+            // The below 2 lines are to allow dragging to select text in the input instead of
+            // dragging the draggable element containing the input.
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        />
+      </div>
+    ) : (
+      <div className="query-builder__property__name__display" title={title}>
+        <span
+          className={clsx('query-builder__property__name__display__content', {
+            'query-builder__property__name__display__content--error': error,
+            'editable-value': changeColumnName,
+          })}
+          onClick={() => {
+            if (changeColumnName) {
+              setIsEditingColumnName(true);
+            }
+          }}
+        >
+          {columnName}
+        </span>
+      </div>
+    );
+  },
+);
+
 export const QueryBuilderPropertyExpressionBadge = observer(
   (props: {
     columnName?: string;
@@ -375,14 +452,14 @@ export const QueryBuilderPropertyExpressionBadge = observer(
     onPropertyExpressionChange: (
       node: QueryBuilderExplorerTreePropertyNodeData,
     ) => void;
-    setIsEditingColumnName?: (isEditing: boolean) => void;
-    error?: boolean | undefined;
+    changeColumnName?: (event: ChangeEvent<HTMLInputElement>) => void;
+    error?: string | undefined;
   }) => {
     const {
       columnName,
       propertyExpressionState,
       onPropertyExpressionChange,
-      setIsEditingColumnName,
+      changeColumnName,
       error,
     } = props;
     const type =
@@ -446,26 +523,12 @@ export const QueryBuilderPropertyExpressionBadge = observer(
               },
             )}
           >
-            <div
-              className="query-builder-property-expression-badge__property"
+            <QueryBuilderEditablePropertyName
+              columnName={columnName ?? propertyExpressionState.title}
+              changeColumnName={changeColumnName}
+              error={error}
               title={`${propertyExpressionState.title} - ${propertyExpressionState.path}`}
-            >
-              <span
-                className={clsx(
-                  'query-builder-property-expression-badge__property__content',
-                  {
-                    'query-builder-property-expression-badge__property__content--error':
-                      error,
-                    'editable-value': !!setIsEditingColumnName,
-                  },
-                )}
-                onClick={() => {
-                  setIsEditingColumnName?.(true);
-                }}
-              >
-                {columnName ?? propertyExpressionState.title}
-              </span>
-            </div>
+            />
             {hasDerivedPropertyInExpression && (
               <button
                 className={clsx(

package/src/components/QueryBuilderSideBar.tsx

@@ -49,6 +49,7 @@ import {
   type PackageableElementOption,
 } from '@finos/legend-lego/graph-editor';
 import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoningEditor.js';
+import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
 
 export const getParameterValue = (
   parameter: ValueSpecification | undefined,
@@ -602,6 +603,22 @@ export const QueryBuilderSidebar = observer(
     children: React.ReactNode;
   }) => {
     const { queryBuilderState, children } = props;
+    const applicationStore = useApplicationStore();
+    const extraTemplateQueryPanelContentRenderer =
+      applicationStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            (
+              plugin as QueryBuilder_LegendApplicationPlugin_Extension
+            ).getExtraTemplateQueryPanelContentRenderer?.() ?? [],
+        );
+    const templateQueryPanelContentTab =
+      extraTemplateQueryPanelContentRenderer[0] ? (
+        extraTemplateQueryPanelContentRenderer[0](queryBuilderState)
+      ) : (
+        <></>
+      );
 
     return (
       <div
@@ -620,6 +637,9 @@ export const QueryBuilderSidebar = observer(
             )}
           </div>
         </div>
+        <div className="query-builder__template-query">
+          {templateQueryPanelContentTab}
+        </div>
         <div className="query-builder__side-bar__content">{children}</div>
       </div>
     );

package/src/components/QueryBuilderTextEditor.tsx

@@ -71,7 +71,9 @@ export const QueryBuilderTextEditor = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx('editor-modal query-builder-text-mode__modal', {
             'query-builder-text-mode__modal--has-error': Boolean(
               queryTextEditorState.parserError,
@@ -135,13 +137,13 @@ export const QueryBuilderTextEditor = observer(
                 text="Discard Changes"
               />
             )}
-            <button
-              className="btn btn--dark"
+            <ModalFooterButton
               onClick={close}
               disabled={
                 Boolean(queryTextEditorState.parserError) ||
                 queryBuilderState.textEditorState.closingQueryState.isInProgress
               }
+              type="secondary"
             >
               {queryBuilderState.textEditorState.closingQueryState
                 .isInProgress ? (
@@ -154,7 +156,7 @@ export const QueryBuilderTextEditor = observer(
               ) : (
                 <> Close </>
               )}
-            </button>
+            </ModalFooterButton>
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/QueryLoader.tsx

@@ -59,6 +59,7 @@ import {
 const QueryPreviewViewer = observer(
   (props: { queryLoaderState: QueryLoaderState }) => {
     const { queryLoaderState } = props;
+    const applicationStore = queryLoaderState.applicationStore;
     const close = (): void => {
       queryLoaderState.setShowPreviewViewer(false);
     };
@@ -72,7 +73,12 @@ const QueryPreviewViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal className="editor-modal" darkMode={true}>
+        <Modal
+          className="editor-modal"
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader
             title={
               guaranteeNonNullable(queryLoaderState.queryPreviewContent).name
@@ -89,7 +95,7 @@ const QueryPreviewViewer = observer(
             />
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -456,6 +462,7 @@ export const QueryLoaderDialog = observer(
     loadActionLabel?: string | undefined;
   }) => {
     const { queryLoaderState, title, loadActionLabel } = props;
+    const applicationStore = queryLoaderState.applicationStore;
 
     const close = (): void => {
       queryLoaderState.setQueryLoaderDialogOpen(false);
@@ -475,7 +482,9 @@ export const QueryLoaderDialog = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="modal query-loader__dialog__body__content"
         >
           <div className="modal query-loader__dialog__header">

package/src/components/QueryUsageViewer.tsx

@@ -56,7 +56,12 @@ export const QueryUsageViewer = observer(
         open={resultState.isQueryUsageViewerOpened}
         onClose={() => resultState.setIsQueryUsageViewerOpened(false)}
       >
-        <Modal className="query-builder__usage-viewer__modal" darkMode={true}>
+        <Modal
+          className="query-builder__usage-viewer__modal"
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader title="Query Usage" />
           <ModalBody className="query-builder__usage-viewer__body">
             <>
@@ -102,6 +107,7 @@ export const QueryUsageViewer = observer(
             <ModalFooterButton
               onClick={() => resultState.setIsQueryUsageViewerOpened(false)}
               text="Close"
+              type="secondary"
             />
           </ModalFooter>
         </Modal>

package/src/components/__test-utils__/QueryBuilderComponentTestUtils.tsx

@@ -52,15 +52,19 @@ import {
 import { STYLE_PREFIX, STYLE_PREFIX__DARK } from '@finos/legend-art';
 import { expect } from '@jest/globals';
 
+const getSelectorContainerClassName = (lightMode?: boolean): string =>
+  '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__value-container`;
+
+const getSelectorInputClassName = (lightMode?: boolean): string =>
+  '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__single-value`;
+
 export const selectFromCustomSelectorInput = (
   selectorContainer: HTMLElement,
   optionText: string,
   lightMode?: boolean,
 ): void => {
-  const selectorContainerClassName =
-    '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__value-container`;
-  const selectorInputValue =
-    '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__single-value`;
+  const selectorContainerClassName = getSelectorContainerClassName(lightMode);
+  const selectorInputValue = getSelectorInputClassName(lightMode);
 
   let foundOptionText = false;
   const selector = selectorContainer.querySelector(
@@ -106,6 +110,38 @@ export const selectFromCustomSelectorInput = (
   }
 };
 
+export const selectFirstOptionFromCustomSelectorInput = (
+  selectorContainer: HTMLElement,
+  lightMode?: boolean,
+): void => {
+  const selectorContainerClassName = getSelectorContainerClassName(lightMode);
+  const selectorInputValue = getSelectorInputClassName(lightMode);
+
+  const selector = selectorContainer.querySelector(
+    selectorContainerClassName,
+  ) as HTMLSelectElement;
+
+  fireEvent.keyDown(selector, { key: 'ArrowDown' });
+  fireEvent.keyDown(selector, { key: 'Enter' });
+  expect(selector.querySelector(selectorInputValue)).not.toBeNull();
+};
+
+export const getCustomSelectorInputValue = (
+  selectorContainer: HTMLElement,
+  lightMode?: boolean,
+): string | null => {
+  const selectorContainerClassName = getSelectorContainerClassName(lightMode);
+  const selectorInputValue = getSelectorInputClassName(lightMode);
+
+  const selector = guaranteeNonNullable(
+    selectorContainer.querySelector(selectorContainerClassName),
+  ) as HTMLSelectElement;
+  const selectorInput = guaranteeNonNullable(
+    selector.querySelector(selectorInputValue),
+  );
+  return selectorInput.textContent;
+};
+
 export const dragAndDrop = async (
   source: HTMLElement,
   drop: HTMLElement,

package/src/components/data-access/DataAccessOverview.tsx

@@ -217,9 +217,17 @@ const AccessStatusCellRenderer = observer(
 const DataAccessOverviewGrid = observer(
   (props: { dataAccessState: DataAccessState }) => {
     const { dataAccessState } = props;
+    const darkMode =
+      !dataAccessState.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
 
     return (
-      <div className="data-access-overview__grid ag-theme-balham-dark">
+      <div
+        className={clsx('data-access-overview__grid', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
+      >
         <DataGrid
           rowData={dataAccessState.datasets}
           gridOptions={{

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}