@finos/legend-query-builder 2.0.0 → 2.1.0

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

@@ -29,7 +29,6 @@ import {
   clsx,
   PanelEntryDropZonePlaceholder,
   ContextMenu,
-  VerticalDragHandleIcon,
   TimesIcon,
   useDragPreviewLayer,
   SortIcon,
@@ -43,6 +42,8 @@ import {
   ModalFooter,
   PanelFormSection,
   ModalFooterButton,
+  PanelDnDEntryDragHandle,
+  PanelDnDEntry,
 } from '@finos/legend-art';
 import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -63,6 +64,7 @@ import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/td
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { COLUMN_SORT_TYPE } from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
+import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 
 // helpers
 const createWindowColumnState = (
@@ -190,7 +192,9 @@ const QueryBuilderWindowColumnModalEditor = observer(
     const close = (): void => {
       windowState.setEditColumn(undefined);
     };
-    const isDuplicatedColumnName = createNewWindow
+    const isDuplicatedColumnName = !windowState.windowColumns.includes(
+      windowColumnState,
+    )
       ? windowState.tdsState.tdsColumns
           .map((c) => c.columnName)
           .includes(windowColumnState.columnName)
@@ -666,6 +670,8 @@ const QueryBuilderWindowColumnEditor = observer(
     const operators = windowState.operators;
     // state
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const [windowAnchor, setWindowAnchor] = useState<HTMLButtonElement | null>(
       null,
     );
@@ -793,7 +799,8 @@ const QueryBuilderWindowColumnEditor = observer(
         [windowColumnState],
       );
     const isBeingDragged = windowColumnState === olapColumnBeingDragged;
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     const handleOpDrop = (val: QueryBuilderTDSColumnState): void => {
@@ -843,273 +850,272 @@ const QueryBuilderWindowColumnEditor = observer(
     );
 
     return (
-      <div ref={ref} className="query-builder__olap__column">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isBeingDragged}
-          className="query-builder__dnd__placeholder"
+      <PanelDnDEntry
+        ref={ref}
+        className="query-builder__olap__column"
+        showPlaceholder={isBeingDragged}
+      >
+        <ContextMenu
+          content={
+            <QueryBuilderWindowColumnContextMenu
+              columnState={windowColumnState}
+            />
+          }
+          className={clsx('query-builder__olap__column__context-menu', {
+            'query-builder__olap__column--selected-from-context-menu':
+              isSelectedFromContextMenu,
+          })}
+          menuProps={{ elevation: 7 }}
+          onOpen={onContextMenuOpen}
+          onClose={onContextMenuClose}
         >
-          <ContextMenu
-            content={
-              <QueryBuilderWindowColumnContextMenu
-                columnState={windowColumnState}
-              />
-            }
-            className={clsx('query-builder__olap__column__context-menu', {
-              'query-builder__olap__column--selected-from-context-menu':
-                isSelectedFromContextMenu,
-            })}
-            menuProps={{ elevation: 7 }}
-            onOpen={onContextMenuOpen}
-            onClose={onContextMenuClose}
-          >
-            <div className="query-builder__olap__column__drag-handle__container">
-              <div className="query-builder__olap__column__drag-handle">
-                <VerticalDragHandleIcon />
+          <PanelDnDEntryDragHandle
+            isBeingDragged={isBeingDragged}
+            className="query-builder__olap__column__drag-handle__container"
+            dropTargetConnector={handleRef}
+          />
+          <div className="query-builder__olap__column__operation">
+            <div className="query-builder__olap__column__operation__operator">
+              <div
+                className={clsx(
+                  'query-builder__olap__column__operation__operator__label',
+                  {
+                    'query-builder__olap__column__operation__operator__label__agg':
+                      !aggregateColumn,
+                  },
+                )}
+              >
+                {operationState.operator.getLabel()}
               </div>
+              {aggregateColumn && (
+                <TDSColumnReferenceEditor
+                  tdsColumn={aggregateColumn}
+                  handleChange={handleOpDrop}
+                  selectionEditor={{
+                    options: windowColumnState.possibleReferencedColumns,
+                  }}
+                />
+              )}
+              <DropdownMenu
+                className="query-builder__olap__column__operation__operator__dropdown"
+                disabled={!operators.length}
+                content={
+                  <MenuContent>
+                    {operators.map((op) => (
+                      <MenuContentItem
+                        key={op.uuid}
+                        className="query-builder__olap__column__operation__operator__dropdown__option"
+                        onClick={changeOperator(op)}
+                      >
+                        {op.getLabel()}
+                      </MenuContentItem>
+                    ))}
+                  </MenuContent>
+                }
+                menuProps={{
+                  anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+                  transformOrigin: { vertical: 'top', horizontal: 'left' },
+                  elevation: 7,
+                }}
+              >
+                <button
+                  className="query-builder__olap__column__operation__operator__badge"
+                  tabIndex={-1}
+                  title="Choose Window Function Operator..."
+                >
+                  <SigmaIcon />
+                </button>
+                <button
+                  className="query-builder__olap__column__operation__operator__dropdown__trigger"
+                  tabIndex={-1}
+                  title="Choose Window Function Operator..."
+                >
+                  <CaretDownIcon />
+                </button>
+              </DropdownMenu>
             </div>
-            <div className="query-builder__olap__column__operation">
-              <div className="query-builder__olap__column__operation__operator">
+          </div>
+          <div className="query-builder__olap__column__window">
+            <button
+              ref={dropOpConnector}
+              title="Click to edit or drag and drop columns"
+              onClick={openWindowPopover}
+              className="query-builder__olap__column__window__content"
+            >
+              <PanelEntryDropZonePlaceholder
+                showPlaceholder={isDragOver}
+                label="Add"
+                className="query-builder__dnd__placeholder"
+              >
+                <div
+                  title={`${windowColumnState.windowColumns.length} columns partitioned`}
+                  className="query-builder__olap__column__window__content__label"
+                >
+                  ({windowColumnState.windowColumns.length})
+                </div>
                 <div
                   className={clsx(
-                    'query-builder__olap__column__operation__operator__label',
-                    {
-                      'query-builder__olap__column__operation__operator__label__agg':
-                        !aggregateColumn,
-                    },
+                    'query-builder__olap__column__window__operator__badge',
                   )}
+                  tabIndex={-1}
+                  title="Edit window columns..."
                 >
-                  {operationState.operator.getLabel()}
+                  <WindowIcon />
                 </div>
-                {aggregateColumn && (
-                  <TDSColumnReferenceEditor
-                    tdsColumn={aggregateColumn}
-                    handleChange={handleOpDrop}
-                    selectionEditor={{
-                      options: windowColumnState.possibleReferencedColumns,
-                    }}
-                  />
-                )}
-                <DropdownMenu
-                  className="query-builder__olap__column__operation__operator__dropdown"
-                  disabled={!operators.length}
-                  content={
-                    <MenuContent>
-                      {operators.map((op) => (
-                        <MenuContentItem
-                          key={op.uuid}
-                          className="query-builder__olap__column__operation__operator__dropdown__option"
-                          onClick={changeOperator(op)}
-                        >
-                          {op.getLabel()}
-                        </MenuContentItem>
-                      ))}
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-                    transformOrigin: { vertical: 'top', horizontal: 'left' },
-                    elevation: 7,
-                  }}
-                >
-                  <button
-                    className="query-builder__olap__column__operation__operator__badge"
-                    tabIndex={-1}
-                    title="Choose Window Function Operator..."
-                  >
-                    <SigmaIcon />
-                  </button>
-                  <button
-                    className="query-builder__olap__column__operation__operator__dropdown__trigger"
-                    tabIndex={-1}
-                    title="Choose Window Function Operator..."
-                  >
-                    <CaretDownIcon />
-                  </button>
-                </DropdownMenu>
-              </div>
-            </div>
-            <div className="query-builder__olap__column__window">
-              <button
-                ref={dropOpConnector}
-                title="Click to edit or drag and drop columns"
-                onClick={openWindowPopover}
-                className="query-builder__olap__column__window__content"
-              >
-                <PanelEntryDropZonePlaceholder
-                  showPlaceholder={isDragOver}
-                  label="Add"
-                  className="query-builder__dnd__placeholder"
-                >
-                  <div
-                    title={`${windowColumnState.windowColumns.length} columns partitioned`}
-                    className="query-builder__olap__column__window__content__label"
-                  >
-                    ({windowColumnState.windowColumns.length})
-                  </div>
-                  <div
-                    className={clsx(
-                      'query-builder__olap__column__window__operator__badge',
-                    )}
-                    tabIndex={-1}
-                    title="Edit window columns..."
-                  >
-                    <WindowIcon />
+              </PanelEntryDropZonePlaceholder>
+            </button>
+            <BasePopover
+              open={Boolean(windowAnchor)}
+              anchorEl={windowAnchor}
+              onClose={closeWindowPopover}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <div className="query-builder__olap__column__window__popover">
+                <div className="panel__content__form__section__list">
+                  <div className="panel__content__form__section__list__items">
+                    {windowColumnState.windowColumns.map((value, idx) => (
+                      <TDSColumnSelectorEditor
+                        key={value.uuid}
+                        colValue={value}
+                        setColumn={(v: QueryBuilderTDSColumnState) =>
+                          windowColumnState.changeWindow(v, idx)
+                        }
+                        deleteColumn={(v: QueryBuilderTDSColumnState): void =>
+                          windowColumnState.deleteWindow(v)
+                        }
+                        tdsColOptions={windowOptions}
+                      />
+                    ))}
                   </div>
-                </PanelEntryDropZonePlaceholder>
-              </button>
-              <BasePopover
-                open={Boolean(windowAnchor)}
-                anchorEl={windowAnchor}
-                onClose={closeWindowPopover}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'center',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'center',
-                }}
-              >
-                <div className="query-builder__olap__column__window__popover">
-                  <div className="panel__content__form__section__list">
-                    <div className="panel__content__form__section__list__items">
-                      {windowColumnState.windowColumns.map((value, idx) => (
-                        <TDSColumnSelectorEditor
-                          key={value.uuid}
-                          colValue={value}
-                          setColumn={(v: QueryBuilderTDSColumnState) =>
-                            windowColumnState.changeWindow(v, idx)
-                          }
-                          deleteColumn={(v: QueryBuilderTDSColumnState): void =>
-                            windowColumnState.deleteWindow(v)
-                          }
-                          tdsColOptions={windowOptions}
-                        />
-                      ))}
-                    </div>
-                    <div className="panel__content__form__section__list__new-item__add">
-                      <button
-                        className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                        disabled={!addWindowOptions.length}
-                        onClick={addWindowValue}
-                        tabIndex={-1}
-                      >
-                        Add Value
-                      </button>
-                    </div>
+                  <div className="panel__content__form__section__list__new-item__add">
+                    <button
+                      className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                      disabled={!addWindowOptions.length}
+                      onClick={addWindowValue}
+                      tabIndex={-1}
+                    >
+                      Add Value
+                    </button>
                   </div>
                 </div>
-              </BasePopover>
-            </div>
-            <div className="query-builder__olap__column__sortby">
-              <div className="query-builder__olap__column__sortby__operator">
-                {sortByState && (
-                  <div className="query-builder__olap__column__sortby__operator__label">
-                    {sortByState.sortType.toLowerCase()}
-                  </div>
-                )}
-                {sortByState && (
-                  <TDSColumnReferenceEditor
-                    tdsColumn={sortByState.columnState}
-                    handleChange={handleSortDrop}
-                    selectionEditor={{
-                      options: windowColumnState.possibleReferencedColumns,
-                    }}
-                  />
-                )}
-                {!sortByState && (
-                  <div className="query-builder__olap__column__sortby__none">
-                    (none)
-                  </div>
-                )}
-                <DropdownMenu
-                  className="query-builder__olap__column__sortby__operator__dropdown"
-                  content={
-                    <MenuContent>
+              </div>
+            </BasePopover>
+          </div>
+          <div className="query-builder__olap__column__sortby">
+            <div className="query-builder__olap__column__sortby__operator">
+              {sortByState && (
+                <div className="query-builder__olap__column__sortby__operator__label">
+                  {sortByState.sortType.toLowerCase()}
+                </div>
+              )}
+              {sortByState && (
+                <TDSColumnReferenceEditor
+                  tdsColumn={sortByState.columnState}
+                  handleChange={handleSortDrop}
+                  selectionEditor={{
+                    options: windowColumnState.possibleReferencedColumns,
+                  }}
+                />
+              )}
+              {!sortByState && (
+                <div className="query-builder__olap__column__sortby__none">
+                  (none)
+                </div>
+              )}
+              <DropdownMenu
+                className="query-builder__olap__column__sortby__operator__dropdown"
+                content={
+                  <MenuContent>
+                    <MenuContentItem
+                      key="none"
+                      className="query-builder__olap__column__sortby__operator__dropdown__option"
+                      onClick={changeSortBy(undefined)}
+                    >
+                      (none)
+                    </MenuContentItem>
+
+                    {Object.values(COLUMN_SORT_TYPE).map((op) => (
                       <MenuContentItem
-                        key="none"
+                        key={op}
                         className="query-builder__olap__column__sortby__operator__dropdown__option"
-                        onClick={changeSortBy(undefined)}
+                        onClick={changeSortBy(op)}
                       >
-                        (none)
+                        {op.toLowerCase()}
                       </MenuContentItem>
-
-                      {Object.values(COLUMN_SORT_TYPE).map((op) => (
-                        <MenuContentItem
-                          key={op}
-                          className="query-builder__olap__column__sortby__operator__dropdown__option"
-                          onClick={changeSortBy(op)}
-                        >
-                          {op.toLowerCase()}
-                        </MenuContentItem>
-                      ))}
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-                    transformOrigin: { vertical: 'top', horizontal: 'left' },
-                    elevation: 7,
-                  }}
-                >
-                  <button
-                    className={clsx(
-                      'query-builder__olap__column__sortby__operator__badge',
-                      {
-                        'query-builder__olap__column__sortby__operator__badge--activated':
-                          Boolean(sortByState),
-                      },
-                    )}
-                    tabIndex={-1}
-                    title="Choose Window Function SortBy Operator..."
-                  >
-                    <SortIcon />
-                  </button>
-                  <button
-                    className="query-builder__olap__column__sortby__operator__dropdown__trigger"
-                    tabIndex={-1}
-                    title="Choose Window Function SortBy Operator..."
-                  >
-                    <CaretDownIcon />
-                  </button>
-                </DropdownMenu>
-              </div>
-            </div>
-            <div className="query-builder__olap__column__name">
-              <InputWithInlineValidation
-                className="query-builder__olap__column__name__input input-group__input"
-                spellCheck={false}
-                value={windowColumnState.columnName}
-                onChange={changeColumnName}
-                validationErrorMessage={
-                  isDuplicatedColumnName ? 'Duplicated column' : undefined
-                }
-              />
-            </div>
-            <div className="query-builder__olap__column__actions">
-              <button
-                className="query-builder__olap__column__action"
-                tabIndex={-1}
-                onClick={editoColumn}
-              >
-                <EditIcon />
-              </button>
-              <button
-                className="query-builder__olap__column__action"
-                tabIndex={-1}
-                onClick={removeColumn}
-                disabled={isRemovalDisabled}
-                title={
-                  isRemovalDisabled
-                    ? "This column is used in the post filter and can't be removed"
-                    : 'Remove'
+                    ))}
+                  </MenuContent>
                 }
+                menuProps={{
+                  anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+                  transformOrigin: { vertical: 'top', horizontal: 'left' },
+                  elevation: 7,
+                }}
               >
-                <TimesIcon />
-              </button>
+                <button
+                  className={clsx(
+                    'query-builder__olap__column__sortby__operator__badge',
+                    {
+                      'query-builder__olap__column__sortby__operator__badge--activated':
+                        Boolean(sortByState),
+                    },
+                  )}
+                  tabIndex={-1}
+                  title="Choose Window Function SortBy Operator..."
+                >
+                  <SortIcon />
+                </button>
+                <button
+                  className="query-builder__olap__column__sortby__operator__dropdown__trigger"
+                  tabIndex={-1}
+                  title="Choose Window Function SortBy Operator..."
+                >
+                  <CaretDownIcon />
+                </button>
+              </DropdownMenu>
             </div>
-          </ContextMenu>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+          </div>
+          <div className="query-builder__olap__column__name">
+            <InputWithInlineValidation
+              className="query-builder__olap__column__name__input input-group__input"
+              spellCheck={false}
+              value={windowColumnState.columnName}
+              onChange={changeColumnName}
+              validationErrorMessage={
+                isDuplicatedColumnName ? 'Duplicated column' : undefined
+              }
+            />
+          </div>
+          <div className="query-builder__olap__column__actions">
+            <button
+              className="query-builder__olap__column__action"
+              tabIndex={-1}
+              onClick={editoColumn}
+            >
+              <EditIcon />
+            </button>
+            <button
+              className="query-builder__olap__column__action"
+              tabIndex={-1}
+              onClick={removeColumn}
+              disabled={isRemovalDisabled}
+              title={
+                isRemovalDisabled
+                  ? "This column is used in the post filter and can't be removed"
+                  : 'Remove'
+              }
+            >
+              <TimesIcon />
+            </button>
+          </div>
+        </ContextMenu>
+      </PanelDnDEntry>
     );
   },
 );
@@ -1167,10 +1173,7 @@ export const QueryBuilderTDSWindowPanel = observer(
       [applicationStore, handleDrop],
     );
     return (
-      <div
-        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_WINDOW_GROUPBY}
-        className="panel"
-      >
+      <div className="panel">
         <div
           data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_WINDOW_GROUPBY}
           className="panel"
@@ -1178,6 +1181,9 @@ export const QueryBuilderTDSWindowPanel = observer(
           <div className="panel__header">
             <div className="panel__header__title">
               <div className="panel__header__title__label">Window Function</div>
+              <QueryBuilderPanelIssueCountBadge
+                issues={tdsWindowState.validationIssues}
+              />
             </div>
             <div className="panel__header__actions">
               <button