@finos/legend-query-builder 0.3.0 → 0.4.0

package/src/components/QueryBuilder.tsx

@@ -30,6 +30,7 @@ import {
   CheckIcon,
   CaretDownIcon,
   DiffIcon,
+  WaterDropIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -54,6 +55,7 @@ import { QueryBuilderDiffViewPanel } from './QueryBuilderDiffPanel.js';
 import { guaranteeType } from '@finos/legend-shared';
 import { QueryBuilderGraphFetchTreeState } from '../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderPostTDSPanel } from './fetch-structure/QueryBuilderPostTDSPanel.js';
+import { QueryBuilderWatermarkEditor } from './watermark/QueryBuilderWatermark.js';
 
 export const QUERY_BUILDER_BACKDROP_CONTAINER_ID =
   'query-builder.backdrop-container';
@@ -200,6 +202,10 @@ export const QueryBuilder = observer(
       }
     };
 
+    const openWatermark = (): void => {
+      queryBuilderState.watermarkState.setIsEditingWatermark(true);
+    };
+
     useCommands(queryBuilderState);
     const toggleShowOlapGroupByPanel = (): void => {
       if (isTDSState) {
@@ -241,127 +247,153 @@ export const QueryBuilder = observer(
         <div className="query-builder__body">
           <div className="query-builder__content">
             <div className="query-builder__sub-header">
-              <div className="query-builder__sub-header__actions">
-                <DropdownMenu
-                  className="query-builder__sub-header__custom-action"
-                  title="Show Advanced Menu..."
-                  content={
-                    <MenuContent>
-                      <MenuContentItem
-                        onClick={toggleShowFunctionPanel}
-                        disabled={!queryBuilderState.isQuerySupported}
-                      >
-                        <MenuContentItemIcon>
-                          {queryBuilderState.showFunctionsExplorerPanel ? (
-                            <CheckIcon />
-                          ) : null}
-                        </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show Function(s)
-                        </MenuContentItemLabel>
-                      </MenuContentItem>
-                      {/* TODO?: consider hiding this menu option when the fetch-structure is not TDS */}
-                      {!queryBuilderState.isParameterSupportDisabled && (
+              <div className="query-builder__sub-header__content__icons">
+                {queryBuilderState.watermarkState.value && (
+                  <>
+                    <button
+                      className="panel__header__action"
+                      onClick={openWatermark}
+                      tabIndex={-1}
+                      title="Edit Watermark"
+                    >
+                      <WaterDropIcon />
+                    </button>
+                  </>
+                )}
+                {queryBuilderState.watermarkState.isEditingWatermark && (
+                  <QueryBuilderWatermarkEditor
+                    queryBuilderState={queryBuilderState}
+                  />
+                )}
+              </div>
+              <div className="query-builder__sub-header__content__actions">
+                <div className="query-builder__sub-header__actions">
+                  <DropdownMenu
+                    className="query-builder__sub-header__custom-action"
+                    title="Show Advanced Menu..."
+                    content={
+                      <MenuContent>
+                        <MenuContentItem
+                          onClick={toggleShowFunctionPanel}
+                          disabled={!queryBuilderState.isQuerySupported}
+                        >
+                          <MenuContentItemIcon>
+                            {queryBuilderState.showFunctionsExplorerPanel ? (
+                              <CheckIcon />
+                            ) : null}
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                            Show Function(s)
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                        {!queryBuilderState.isParameterSupportDisabled && (
+                          <MenuContentItem
+                            onClick={toggleShowParameterPanel}
+                            disabled={
+                              !queryBuilderState.isQuerySupported ||
+                              queryBuilderState.parametersState.parameterStates
+                                .length > 0
+                            }
+                          >
+                            <MenuContentItemIcon>
+                              {queryBuilderState.showParametersPanel ? (
+                                <CheckIcon />
+                              ) : null}
+                            </MenuContentItemIcon>
+                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                              Show Parameter(s)
+                            </MenuContentItemLabel>
+                          </MenuContentItem>
+                        )}
                         <MenuContentItem
-                          onClick={toggleShowParameterPanel}
+                          onClick={toggleShowFilterPanel}
                           disabled={
                             !queryBuilderState.isQuerySupported ||
-                            queryBuilderState.parametersState.parameterStates
-                              .length > 0
+                            Array.from(
+                              queryBuilderState.filterState.nodes.values(),
+                            ).length > 0
                           }
                         >
                           <MenuContentItemIcon>
-                            {queryBuilderState.showParametersPanel ? (
+                            {queryBuilderState.filterState.showPanel ? (
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
                           <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Parameter(s)
+                            Show Filter
                           </MenuContentItemLabel>
                         </MenuContentItem>
-                      )}
-                      <MenuContentItem
-                        onClick={toggleShowFilterPanel}
-                        disabled={
-                          !queryBuilderState.isQuerySupported ||
-                          Array.from(
-                            queryBuilderState.filterState.nodes.values(),
-                          ).length > 0
-                        }
-                      >
-                        <MenuContentItemIcon>
-                          {queryBuilderState.filterState.showPanel ? (
-                            <CheckIcon />
-                          ) : null}
-                        </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show Filter
-                        </MenuContentItemLabel>
-                      </MenuContentItem>
-                      <MenuContentItem
-                        onClick={toggleShowOlapGroupByPanel}
-                        disabled={
-                          !queryBuilderState.isQuerySupported ||
-                          !(
-                            queryBuilderState.fetchStructureState
-                              .implementation instanceof QueryBuilderTDSState
-                          ) ||
-                          queryBuilderState.fetchStructureState.implementation
-                            .olapGroupByState.olapColumns.length > 0
-                        }
-                      >
-                        <MenuContentItemIcon>
-                          {isTDSState &&
-                          guaranteeType(
-                            queryBuilderState.fetchStructureState
-                              .implementation,
-                            QueryBuilderTDSState,
-                          ).showOlapGroupByPanel ? (
-                            <CheckIcon />
-                          ) : null}
-                        </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show OLAP GroupBy
-                        </MenuContentItemLabel>
-                      </MenuContentItem>
-                      <MenuContentItem
-                        onClick={toggleShowPostFilterPanel}
-                        disabled={
-                          !queryBuilderState.isQuerySupported ||
-                          !(
-                            queryBuilderState.fetchStructureState
-                              .implementation instanceof QueryBuilderTDSState
-                          ) ||
-                          Array.from(
-                            queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
-                          ).length > 0
-                        }
-                      >
-                        <MenuContentItemIcon>
-                          {queryBuilderState.fetchStructureState
-                            .implementation instanceof QueryBuilderTDSState &&
-                          queryBuilderState.fetchStructureState.implementation
-                            .showPostFilterPanel ? (
-                            <CheckIcon />
-                          ) : null}
-                        </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show Post-Filter
-                        </MenuContentItemLabel>
-                      </MenuContentItem>
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                    transformOrigin: { vertical: 'top', horizontal: 'right' },
-                    elevation: 7,
-                  }}
-                >
-                  <div className="query-builder__sub-header__custom-action__label">
-                    Advanced
-                  </div>
-                  <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
-                </DropdownMenu>
+                        <MenuContentItem
+                          onClick={toggleShowOlapGroupByPanel}
+                          disabled={
+                            !queryBuilderState.isQuerySupported ||
+                            !(
+                              queryBuilderState.fetchStructureState
+                                .implementation instanceof QueryBuilderTDSState
+                            ) ||
+                            queryBuilderState.fetchStructureState.implementation
+                              .olapGroupByState.olapColumns.length > 0
+                          }
+                        >
+                          <MenuContentItemIcon>
+                            {isTDSState &&
+                            guaranteeType(
+                              queryBuilderState.fetchStructureState
+                                .implementation,
+                              QueryBuilderTDSState,
+                            ).showOlapGroupByPanel ? (
+                              <CheckIcon />
+                            ) : null}
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                            Show OLAP GroupBy
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                        <MenuContentItem
+                          onClick={toggleShowPostFilterPanel}
+                          disabled={
+                            !queryBuilderState.isQuerySupported ||
+                            !(
+                              queryBuilderState.fetchStructureState
+                                .implementation instanceof QueryBuilderTDSState
+                            ) ||
+                            Array.from(
+                              queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
+                            ).length > 0
+                          }
+                        >
+                          <MenuContentItemIcon>
+                            {queryBuilderState.fetchStructureState
+                              .implementation instanceof QueryBuilderTDSState &&
+                            queryBuilderState.fetchStructureState.implementation
+                              .showPostFilterPanel ? (
+                              <CheckIcon />
+                            ) : null}
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                            Show Post-Filter
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                        <MenuContentItem onClick={openWatermark}>
+                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                            Edit Watermark
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                      </MenuContent>
+                    }
+                    menuProps={{
+                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                      transformOrigin: { vertical: 'top', horizontal: 'right' },
+                      elevation: 7,
+                    }}
+                  >
+                    <div className="query-builder__sub-header__custom-action__label">
+                      Advanced
+                    </div>
+                    <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
+                  </DropdownMenu>
+                </div>
               </div>
             </div>
             <div className="query-builder__main">

package/src/components/QueryBuilderParametersPanel.tsx

@@ -25,10 +25,14 @@ import {
   TimesIcon,
   DollarIcon,
   PlusIcon,
-  InputWithInlineValidation,
   DragPreviewLayer,
   useDragPreviewLayer,
   BlankPanelPlaceholder,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  PanelFormTextField,
 } from '@finos/legend-art';
 import {
   type QueryBuilderParameterDragSource,
@@ -81,13 +85,6 @@ const VariableExpressionEditor = observer(
       ? 'Parameter name already exists'
       : undefined;
 
-    // variable
-    const changeVariableName: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      variableExpression_setName(varState, event.target.value);
-    };
-
     // type
     const stringType =
       queryBuilderState.graphManagerState.graph.getPrimitiveType(
@@ -164,30 +161,25 @@ const VariableExpressionEditor = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div className="modal modal--dark editor-modal query-builder__parameters__modal">
-          <div className="modal__header">
-            <div className="modal__title">
-              {`${isCreating ? 'Create ' : 'Update '}`}Parameter
-            </div>
-          </div>
-          <div className="modal__body query-builder__parameters__modal__body">
+        <Modal
+          darkMode={true}
+          className="editor-modal query-builder__parameters__modal"
+        >
+          <ModalHeader
+            title={`${isCreating ? 'Create Parameter' : 'Update Parameter'}`}
+          />
+          <ModalBody className="query-builder__parameters__modal__body">
             <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                Parameter Name
-              </div>
-              <div className="panel__content__form__section__header__prompt">
-                Name of the parameter. Should be descriptive of its purpose.
-              </div>
-              <div className="query-builder__parameters__parameter__name">
-                <InputWithInlineValidation
-                  className="query-builder__parameters__parameter__name__input input-group__input"
-                  spellCheck={false}
-                  value={varState.name}
-                  onChange={changeVariableName}
-                  placeholder="Parameter name"
-                  validationErrorMessage={validationMessage}
-                />
-              </div>
+              <PanelFormTextField
+                name="Parameter Name"
+                prompt="Name of the parameter. Should be descriptive of its purpose."
+                update={(value: string | undefined): void =>
+                  variableExpression_setName(varState, value ?? '')
+                }
+                value={varState.name}
+                errorMessage={validationMessage}
+                isReadOnly={false}
+              />
             </div>
             <div className="panel__content__form__section">
               <div className="panel__content__form__section__header__label">
@@ -230,8 +222,8 @@ const VariableExpressionEditor = observer(
                 onChange={changeUpperBound}
               />
             </div>
-          </div>
-          <div className="modal__footer">
+          </ModalBody>
+          <ModalFooter>
             {isCreating && (
               <button
                 className="btn modal__footer__close-btn btn--dark"
@@ -244,8 +236,8 @@ const VariableExpressionEditor = observer(
             <button className="btn modal__footer__close-btn" onClick={close}>
               Close
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -21,6 +21,10 @@ import {
   PanelDropZone,
   InfoCircleIcon,
   PanelEntryDropZonePlaceholder,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -218,11 +222,12 @@ export const QueryBuilderPropertyExpressionEditor = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div className="modal modal--dark editor-modal query-builder-property-editor">
-          <div className="modal__header">
-            <div className="modal__title">Derived Property</div>
-          </div>
-          <div className="modal__body query-builder-property-editor__content">
+        <Modal
+          darkMode={true}
+          className="editor-modal query-builder-property-editor"
+        >
+          <ModalHeader title="Derived Property" />
+          <ModalBody className="query-builder-property-editor__content">
             {propertyExpressionState.derivedPropertyExpressionStates.map(
               (pe) => (
                 <DerivedPropertyExpressionEditor
@@ -231,7 +236,7 @@ export const QueryBuilderPropertyExpressionEditor = observer(
                 />
               ),
             )}
-            <div className="modal__body query-builder__parameters__modal__body">
+            <ModalBody className="query-builder__parameters__modal__body">
               <div className="panel__content__form__section__header__label">
                 List of available parameters
               </div>
@@ -250,17 +255,17 @@ export const QueryBuilderPropertyExpressionEditor = observer(
                   ),
                 )}
               </div>
-            </div>
-          </div>
-          <div className="modal__footer">
+            </ModalBody>
+          </ModalBody>
+          <ModalFooter>
             <button
               className="btn modal__footer__close-btn"
               onClick={handleClose}
             >
               Done
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/QueryBuilderResultPanel.tsx

@@ -28,6 +28,7 @@ import {
   PauseCircleIcon,
   ExclamationTriangleIcon,
   PanelContent,
+  MenuContentDivider,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -272,6 +273,16 @@ const QueryBuilderGridResultContextMenu = observer(
           );
     };
 
+    const handleCopyCellValue = applicationStore.guardUnhandledError(() =>
+      applicationStore.copyTextToClipboard(event?.value),
+    );
+
+    const handleCopyRowValue = applicationStore.guardUnhandledError(() =>
+      applicationStore.copyTextToClipboard(
+        Object.values(event?.data).toString(),
+      ),
+    );
+
     return (
       <MenuContent ref={ref}>
         <MenuContentItem
@@ -288,6 +299,13 @@ const QueryBuilderGridResultContextMenu = observer(
         >
           Filter Out
         </MenuContentItem>
+        <MenuContentDivider />
+        <MenuContentItem onClick={handleCopyCellValue}>
+          Copy Cell Value
+        </MenuContentItem>
+        <MenuContentItem onClick={handleCopyRowValue}>
+          Copy Row Value
+        </MenuContentItem>
       </MenuContent>
     );
   }),

package/src/components/QueryBuilderTextEditor.tsx

@@ -16,7 +16,14 @@
 
 import { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { clsx, Dialog } from '@finos/legend-art';
+import {
+  clsx,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '@finos/legend-art';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QueryBuilderTextEditorMode } from '../stores/QueryBuilderTextEditorState.js';
 import { flowResult } from 'mobx';
@@ -57,25 +64,23 @@ export const QueryBuilderTextEditor = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div
-          className={clsx(
-            'modal modal--dark editor-modal query-builder-text-mode__modal',
-            {
-              'query-builder-text-mode__modal--has-error': Boolean(
-                queryTextEditorState.parserError,
-              ),
-            },
-          )}
+        <Modal
+          darkMode={true}
+          className={clsx('editor-modal query-builder-text-mode__modal', {
+            'query-builder-text-mode__modal--has-error': Boolean(
+              queryTextEditorState.parserError,
+            ),
+          })}
         >
-          <div className="modal__header">
+          <ModalHeader>
             <div className="modal__title">Query</div>
             {queryTextEditorState.parserError && (
               <div className="modal__title__error-badge">
                 Failed to parse query
               </div>
             )}
-          </div>
-          <div className="modal__body">
+          </ModalHeader>
+          <ModalBody>
             <div
               className={clsx('query-builder-text-mode__modal__content', {
                 backdrop__element: Boolean(queryTextEditorState.parserError),
@@ -101,8 +106,8 @@ export const QueryBuilderTextEditor = observer(
                 />
               )}
             </div>
-          </div>
-          <div className="modal__footer">
+          </ModalBody>
+          <ModalFooter>
             {mode === QueryBuilderTextEditorMode.TEXT && (
               <button
                 className="btn btn--dark btn--caution"
@@ -118,8 +123,8 @@ export const QueryBuilderTextEditor = observer(
             >
               Close
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -48,6 +48,10 @@ import {
   PanelLoadingIndicator,
   DragPreviewLayer,
   useDragPreviewLayer,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -208,13 +212,14 @@ const QueryBuilderExplorerPreviewDataModal = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div className="modal modal--dark editor-modal query-builder__explorer__preview-data-modal">
-          <div className="modal__header">
-            <div className="modal__title">
-              {prettyPropertyName(previewDataState.propertyName)}
-            </div>
-          </div>
-          <div className="modal__body query-builder__explorer__preview-data-modal__body">
+        <Modal
+          darkMode={true}
+          className="editor-modal query-builder__explorer__preview-data-modal"
+        >
+          <ModalHeader
+            title={prettyPropertyName(previewDataState.propertyName)}
+          />
+          <ModalBody className="query-builder__explorer__preview-data-modal__body">
             {previewDataState.previewData && (
               <table className="table">
                 <thead>
@@ -242,13 +247,13 @@ const QueryBuilderExplorerPreviewDataModal = observer(
                 </tbody>
               </table>
             )}
-          </div>
-          <div className="modal__footer">
+          </ModalBody>
+          <ModalFooter>
             <button className="btn modal__footer__close-btn" onClick={close}>
               Close
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },