@finos/legend-query-builder 4.14.18 → 4.14.20

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>