@finos/legend-query-builder 0.6.23 → 0.6.26

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

@@ -34,7 +34,7 @@ import {
   ExpandIcon,
   CompressIcon,
   CircleIcon,
-  BrushIcon,
+  TrashIcon,
   NewFolderIcon,
   PlusCircleIcon,
   InfoCircleIcon,
@@ -93,9 +93,9 @@ import {
   renderPropertyTypeIcon,
 } from './QueryBuilderTDSComponentHelper.js';
 import {
-  type QueryBuilderOLAPColumnDragSource,
-  QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
-} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState.js';
+  type QueryBuilderWindowColumnDragSource,
+  QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
+} from '../../stores/fetch-structure/tds/window/QueryBuilderWindowState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
@@ -218,7 +218,7 @@ export const QueryBuilderColumnBadge = observer(
       () => ({
         accept: [
           QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
@@ -486,12 +486,12 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       (item: QueryBuilderPostFilterDropTarget, type: string): void => {
         if (
           type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
-          type === QUERY_BUILDER_OLAP_COLUMN_DND_TYPE
+          type === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE
         ) {
           const columnState = (
             item as
               | QueryBuilderProjectionColumnDragSource
-              | QueryBuilderOLAPColumnDragSource
+              | QueryBuilderWindowColumnDragSource
           ).columnState as QueryBuilderTDSColumnState;
           let conditionState: PostFilterConditionState;
           try {
@@ -553,7 +553,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
         accept: [
           ...Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE),
           QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
@@ -865,7 +865,7 @@ const QueryBuilderPostFilterPanelContent = observer(
       () => ({
         accept: [
           QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
@@ -926,7 +926,7 @@ const QueryBuilderPostFilterPanelContent = observer(
               tabIndex={-1}
               title="Cleanup Tree"
             >
-              <BrushIcon />
+              <TrashIcon />
             </button>
             <button
               className="panel__header__action"

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

@@ -21,7 +21,7 @@ import {
   ResizablePanelSplitter,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from '../filter/QueryBuilderFilterPanel.js';
-import { QueryBuilderOlapGroupByPanel } from './QueryBuilderOLAPGroupByPanel.js';
+import { QueryBuilderTDSWindowPanel } from './QueryBuilderTDSWindowPanel.js';
 import { QueryBuilderPostFilterPanel } from './QueryBuilderPostFilterPanel.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 
@@ -29,7 +29,7 @@ export const QueryBuilderPostTDSPanel = observer(
   (props: { tdsState: QueryBuilderTDSState }) => {
     const { tdsState } = props;
     const showFilterPanel = tdsState.queryBuilderState.filterState.showPanel;
-    const showOLAPGroupByPanel = tdsState.showOlapGroupByPanel;
+    const showWindowFuncPanel = tdsState.showWindowFuncPanel;
     const showPostFilterPanel = tdsState.showPostFilterPanel;
     if (!tdsState.TEMPORARY__showPostFetchStructurePanel) {
       return null;
@@ -43,17 +43,15 @@ export const QueryBuilderPostTDSPanel = observer(
             />
           </ResizablePanel>
         )}
-        {showFilterPanel && (showOLAPGroupByPanel || showPostFilterPanel) && (
+        {showFilterPanel && (showWindowFuncPanel || showPostFilterPanel) && (
           <ResizablePanelSplitter />
         )}
-        {showOLAPGroupByPanel && (
+        {showWindowFuncPanel && (
           <ResizablePanel minSize={40}>
-            <QueryBuilderOlapGroupByPanel
-              olapGroupByState={tdsState.olapGroupByState}
-            />
+            <QueryBuilderTDSWindowPanel tdsWindowState={tdsState.windowState} />
           </ResizablePanel>
         )}
-        {showOLAPGroupByPanel && showPostFilterPanel && (
+        {showWindowFuncPanel && showPostFilterPanel && (
           <ResizablePanelSplitter />
         )}
         {showPostFilterPanel && (

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

@@ -27,6 +27,9 @@ import {
   ModalFooter,
   ModalHeader,
   SortIcon,
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
 } from '@finos/legend-art';
 import {
   COLUMN_SORT_TYPE,
@@ -64,16 +67,12 @@ const ColumnSortEditor = observer(
       }
     };
     const sortType = sortState.sortType;
-    const toggleSortType = (): void => {
-      sortState.setSortType(
-        sortType === COLUMN_SORT_TYPE.ASC
-          ? COLUMN_SORT_TYPE.DESC
-          : COLUMN_SORT_TYPE.ASC,
-      );
-    };
+
     const deleteColumnSort = (): void =>
       tdsState.resultSetModifierState.deleteSortColumn(sortState);
-
+    const changeSortBy = (sortOp: COLUMN_SORT_TYPE) => (): void => {
+      sortState.setSortType(sortOp);
+    };
     return (
       <div className="panel__content__form__section__list__item query-builder__projection__options__sort">
         <CustomSelectorInput
@@ -87,13 +86,34 @@ const ColumnSortEditor = observer(
           value={value}
           darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
         />
-        <button
-          className="btn--dark btn--sm query-builder__projection__options__sort__type-btn"
-          tabIndex={-1}
-          onClick={toggleSortType}
+        <div className="query-builder__projection__options__sort__sortby">
+          {sortType.toLowerCase()}
+        </div>
+        <DropdownMenu
+          content={
+            <MenuContent>
+              {Object.values(COLUMN_SORT_TYPE).map((op) => (
+                <MenuContentItem key={op} onClick={changeSortBy(op)}>
+                  {op.toLowerCase()}
+                </MenuContentItem>
+              ))}
+            </MenuContent>
+          }
+          menuProps={{
+            anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+            transformOrigin: { vertical: 'top', horizontal: 'left' },
+            elevation: 7,
+          }}
         >
-          <SortIcon />
-        </button>
+          <div
+            className="query-builder__projection__options__sort__sortby--btn"
+            tabIndex={-1}
+            title="Choose SortBy Operator..."
+          >
+            <SortIcon />
+          </div>
+        </DropdownMenu>
+
         <button
           className="query-builder__projection__options__sort__remove-btn btn--dark btn--caution"
           onClick={deleteColumnSort}

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

@@ -35,7 +35,7 @@ import {
   OptionsIcon,
   PlusIcon,
   PanelContent,
-  BrushIcon,
+  TrashIcon,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -583,7 +583,7 @@ export const QueryBuilderTDSPanel = observer(
                 : 'Clear all projection columns'
             }
           >
-            <BrushIcon className="query-builder__icon query-builder__icon__query-option--small" />
+            <TrashIcon className="query-builder__icon query-builder__icon__query-option--small" />
           </button>
           <button
             className="panel__header__action"