@finos/legend-query-builder 3.0.7 → 3.1.0

package/src/components/QueryBuilder.tsx

@@ -40,6 +40,7 @@ import {
   ModalHeader,
   BlankPanelContent,
   ModalFooterButton,
+  CalendarIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -56,6 +57,8 @@ import {
   BackdropContainer,
   useApplicationStore,
   useCommands,
+  ActionAlertActionType,
+  ActionAlertType,
 } from '@finos/legend-application';
 import { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
 import { QueryBuilderFunctionsExplorerPanel } from './explorer/QueryBuilderFunctionsExplorerPanel.js';
@@ -69,7 +72,6 @@ import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpre
 import { QueryBuilder_LegendApplicationPlugin } from './QueryBuilder_LegendApplicationPlugin.js';
 import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
-import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -250,18 +252,6 @@ export const QueryBuilder = observer(
     const applicationStore = queryBuilderState.applicationStore;
     const openLambdaEditor = (mode: QueryBuilderTextEditorMode): void =>
       queryBuilderState.textEditorState.openModal(mode);
-    const toggleAssistant = (): void =>
-      applicationStore.assistantService.toggleAssistant();
-    const queryDocEntry = applicationStore.documentationService.getDocEntry(
-      QUERY_BUILDER_DOCUMENTATION_KEY.TUTORIAL_QUERY_BUILDER,
-    );
-    const openQueryTutorial = (): void => {
-      if (queryDocEntry?.url) {
-        applicationStore.navigationService.navigator.visitAddress(
-          queryDocEntry.url,
-        );
-      }
-    };
     const toggleShowFunctionPanel = (): void => {
       queryBuilderState.setShowFunctionsExplorerPanel(
         !queryBuilderState.showFunctionsExplorerPanel,
@@ -299,6 +289,56 @@ export const QueryBuilder = observer(
     const openWatermark = (): void => {
       queryBuilderState.watermarkState.setIsEditingWatermark(true);
     };
+
+    const toggleEnableCalendar = (): void => {
+      if (queryBuilderState.isCalendarEnabled) {
+        queryBuilderState.applicationStore.alertService.setActionAlertInfo({
+          message:
+            'You are about to disable calendar aggregation operations. This will remove all the calendar aggreagtions you added to the query.',
+          prompt: ' Do you want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void => {
+                if (
+                  queryBuilderState.fetchStructureState
+                    .implementation instanceof QueryBuilderTDSState
+                ) {
+                  queryBuilderState.fetchStructureState.implementation.aggregationState.disableCalendar();
+                }
+              },
+            },
+            {
+              label: 'Cancel',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      } else {
+        queryBuilderState.applicationStore.alertService.setActionAlertInfo({
+          message:
+            'You are about to enable calendar aggregation operations. This will let you add calendar functions to the aggregation operations that you perform on projection columns, but this would require your calendar database to be included in your database.',
+          prompt: ' Do you want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void => queryBuilderState.setIsCalendarEnabled(true),
+            },
+            {
+              label: 'Cancel',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      }
+    };
+
     const editQueryInPure = (): void => {
       openLambdaEditor(QueryBuilderTextEditorMode.TEXT);
     };
@@ -366,6 +406,13 @@ export const QueryBuilder = observer(
                     </button>
                   </>
                 )}
+                {queryBuilderState.isCalendarEnabled && (
+                  <>
+                    <div className="query-builder__sub-header__content__icon">
+                      <CalendarIcon />
+                    </div>
+                  </>
+                )}
                 {queryBuilderState.watermarkState.isEditingWatermark && (
                   <QueryBuilderWatermarkEditor
                     queryBuilderState={queryBuilderState}
@@ -373,206 +420,197 @@ export const QueryBuilder = observer(
                 )}
               </div>
               <div className="query-builder__sub-header__content__actions">
-                <div
-                  title="Query title"
-                  className="query-builder__sub-header__query__title"
-                >
-                  {queryBuilderState.titleOfQuery}
-                </div>
-                <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={toggleConstantPanel}
-                            disabled={
-                              !queryBuilderState.isQuerySupported ||
-                              queryBuilderState.constantState.constants.length >
-                                0
-                            }
-                          >
-                            <MenuContentItemIcon>
-                              {queryBuilderState.constantState
-                                .showConstantPanel ? (
-                                <CheckIcon />
-                              ) : null}
-                            </MenuContentItemIcon>
-                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                              Show Constant(s)
-                            </MenuContentItemLabel>
-                          </MenuContentItem>
-                        }
+                <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={toggleShowFilterPanel}
+                          onClick={toggleShowParameterPanel}
                           disabled={
                             !queryBuilderState.isQuerySupported ||
-                            Array.from(
-                              queryBuilderState.filterState.nodes.values(),
-                            ).length > 0
+                            queryBuilderState.parametersState.parameterStates
+                              .length > 0
                           }
                         >
                           <MenuContentItemIcon>
-                            {queryBuilderState.filterState.showPanel ? (
+                            {queryBuilderState.showParametersPanel ? (
                               <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
-                              .windowState.windowColumns.length > 0
-                          }
-                        >
-                          <MenuContentItemIcon>
-                            {isTDSState &&
-                            guaranteeType(
-                              queryBuilderState.fetchStructureState
-                                .implementation,
-                              QueryBuilderTDSState,
-                            ).showWindowFuncPanel ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Window Func(s)
+                            Show Parameter(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
+                      )}
+                      {
                         <MenuContentItem
-                          onClick={toggleShowPostFilterPanel}
+                          onClick={toggleConstantPanel}
                           disabled={
                             !queryBuilderState.isQuerySupported ||
-                            !(
-                              queryBuilderState.fetchStructureState
-                                .implementation instanceof QueryBuilderTDSState
-                            ) ||
-                            Array.from(
-                              queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
-                            ).length > 0
+                            queryBuilderState.constantState.constants.length > 0
                           }
                         >
                           <MenuContentItemIcon>
-                            {queryBuilderState.fetchStructureState
-                              .implementation instanceof QueryBuilderTDSState &&
-                            queryBuilderState.fetchStructureState.implementation
-                              .showPostFilterPanel ? (
+                            {queryBuilderState.constantState
+                              .showConstantPanel ? (
                               <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">
-                            Show Watermark
+                            Show Constant(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
-                        <MenuContentDivider />
-                        <MenuContentItem
-                          onClick={openCheckEntitlmentsEditor}
-                          disabled={
-                            queryBuilderState.isQuerySupported &&
+                      }
+                      <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
-                              .projectionColumns.length === 0
-                          }
-                        >
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Check Entitlements
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem onClick={editQueryInPure}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Edit Query in Pure
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem onClick={showQueryProtocol}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Query Protocol
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentDivider />
-                        {queryDocEntry && (
-                          <MenuContentItem onClick={openQueryTutorial}>
-                            <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                              Open Documentation
-                            </MenuContentItemLabel>
-                          </MenuContentItem>
-                        )}
-                        <MenuContentItem onClick={toggleAssistant}>
-                          <MenuContentItemIcon>
-                            {!applicationStore.assistantService.isHidden ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Virtual Assistant
-                          </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>
+                              .implementation instanceof QueryBuilderTDSState
+                          ) ||
+                          queryBuilderState.fetchStructureState.implementation
+                            .windowState.windowColumns.length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {isTDSState &&
+                          guaranteeType(
+                            queryBuilderState.fetchStructureState
+                              .implementation,
+                            QueryBuilderTDSState,
+                          ).showWindowFuncPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Window Func(s)
+                        </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">
+                          Show Watermark
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem
+                        onClick={toggleEnableCalendar}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          !(
+                            queryBuilderState.fetchStructureState
+                              .implementation instanceof QueryBuilderTDSState
+                          )
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.isCalendarEnabled ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Enable Calendar
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentDivider />
+                      <MenuContentItem
+                        onClick={openCheckEntitlmentsEditor}
+                        disabled={
+                          queryBuilderState.isQuerySupported &&
+                          queryBuilderState.fetchStructureState
+                            .implementation instanceof QueryBuilderTDSState &&
+                          queryBuilderState.fetchStructureState.implementation
+                            .projectionColumns.length === 0
+                        }
+                      >
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Check Entitlements
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={editQueryInPure}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Edit Query in Pure
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={showQueryProtocol}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Query Protocol
+                        </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 className="query-builder__main">