@finos/legend-query-builder 3.1.0 → 3.2.1

package/src/__lib__/QueryBuilderTelemetryHelper.ts

@@ -27,176 +27,157 @@ type QueryExecution_TelemetryData = GraphManagerOperationReport & {
 };
 
 export class QueryBuilderTelemetryHelper {
-  static logEvent_QueryRunLaunched(telemetryService: TelemetryService): void {
-    telemetryService.logEvent(QUERY_BUILDER_EVENT.RUN_QUERY__LAUNCH, {});
+  static logEvent_QueryRunLaunched(service: TelemetryService): void {
+    service.logEvent(QUERY_BUILDER_EVENT.RUN_QUERY__LAUNCH, {});
   }
 
   static logEvent_ExecutionPlanGenerationLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
-      QUERY_BUILDER_EVENT.GENERATE_EXECUTION_PLAN__LAUNCH,
-      {},
-    );
+    service.logEvent(QUERY_BUILDER_EVENT.GENERATE_EXECUTION_PLAN__LAUNCH, {});
   }
 
-  static logEvent_ExecutionPlanDebugLaunched(
-    telemetryService: TelemetryService,
-  ): void {
-    telemetryService.logEvent(
-      QUERY_BUILDER_EVENT.DEBUG_EXECUTION_PLAN__LAUNCH,
-      {},
-    );
+  static logEvent_ExecutionPlanDebugLaunched(service: TelemetryService): void {
+    service.logEvent(QUERY_BUILDER_EVENT.DEBUG_EXECUTION_PLAN__LAUNCH, {});
   }
 
   static logEvent_QueryRunSucceeded(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
     data: QueryExecution_TelemetryData,
   ): void {
-    telemetryService.logEvent(QUERY_BUILDER_EVENT.RUN_QUERY__SUCCESS, data);
+    service.logEvent(QUERY_BUILDER_EVENT.RUN_QUERY__SUCCESS, data);
   }
 
   static logEvent_ExecutionPlanGenerationSucceeded(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
     data: QueryExecution_TelemetryData,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_EVENT.GENERATE_EXECUTION_PLAN__SUCCESS,
       data,
     );
   }
 
   static logEvent_ExecutionPlanDebugSucceeded(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
     data: QueryExecution_TelemetryData,
   ): void {
-    telemetryService.logEvent(
-      QUERY_BUILDER_EVENT.DEBUG_EXECUTION_PLAN__SUCCESS,
-      data,
-    );
+    service.logEvent(QUERY_BUILDER_EVENT.DEBUG_EXECUTION_PLAN__SUCCESS, data);
   }
 
   static logEvent_FilterCreateConditionLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_FILTER_EVENT.FILTER__CREATE__CONDITION__LAUNCH,
       {},
     );
   }
 
-  static logEvent_FilterCleanupTreeLaunched(
-    telemetryService: TelemetryService,
-  ): void {
-    telemetryService.logEvent(
+  static logEvent_FilterCleanupTreeLaunched(service: TelemetryService): void {
+    service.logEvent(
       QUERY_BUILDER_FILTER_EVENT.FILTER__CLEANUP__TREE__LAUNCH,
       {},
     );
   }
 
-  static logEvent_FilterCollapseTreeLaunched(
-    telemetryService: TelemetryService,
-  ): void {
-    telemetryService.logEvent(
+  static logEvent_FilterCollapseTreeLaunched(service: TelemetryService): void {
+    service.logEvent(
       QUERY_BUILDER_FILTER_EVENT.FILTER__COLLAPSE__TREE__LAUNCH,
       {},
     );
   }
 
   static logEvent_FilterCreateGroupFromConditionLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_FILTER_EVENT.FILTER__CREATE__GROUP__FROM__CONDITION__LAUNCH,
       {},
     );
   }
 
   static logEvent_FilterCreateLogicalGroupLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_FILTER_EVENT.FILTER__CREATE__LOGICAL__GROUP__LAUNCH,
       {},
     );
   }
 
-  static logEvent_FilterExpandTreeLaunched(
-    telemetryService: TelemetryService,
-  ): void {
-    telemetryService.logEvent(
+  static logEvent_FilterExpandTreeLaunched(service: TelemetryService): void {
+    service.logEvent(
       QUERY_BUILDER_FILTER_EVENT.FILTER__EXPAND__TREE__LAUNCH,
       {},
     );
   }
 
-  static logEvent_FilterSimplifyTreeLaunched(
-    telemetryService: TelemetryService,
-  ): void {
-    telemetryService.logEvent(
+  static logEvent_FilterSimplifyTreeLaunched(service: TelemetryService): void {
+    service.logEvent(
       QUERY_BUILDER_FILTER_EVENT.FILTER__SIMPLIFY__TREE__LAUNCH,
       {},
     );
   }
 
   static logEvent_PostFilterCreateConditionLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_POST_FILTER_EVENT.FILTER__CREATE__CONDITION__LAUNCH,
       {},
     );
   }
 
   static logEvent_PostFilterCleanupTreeLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_POST_FILTER_EVENT.FILTER__CLEANUP__TREE__LAUNCH,
       {},
     );
   }
 
   static logEvent_PostFilterCollapseTreeLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_POST_FILTER_EVENT.FILTER__COLLAPSE__TREE__LAUNCH,
       {},
     );
   }
 
   static logEvent_PostFilterCreateGroupFromConditionLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_POST_FILTER_EVENT.FILTER__CREATE__GROUP__FROM__CONDITION__LAUNCH,
       {},
     );
   }
 
   static logEvent_PostFilterCreateLogicalGroupLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_POST_FILTER_EVENT.FILTER__CREATE__LOGICAL__GROUP__LAUNCH,
       {},
     );
   }
 
   static logEvent_PostFilterExpandTreeLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_POST_FILTER_EVENT.FILTER__EXPAND__TREE__LAUNCH,
       {},
     );
   }
 
   static logEvent_PostFilterSimplifyTreeLaunched(
-    telemetryService: TelemetryService,
+    service: TelemetryService,
   ): void {
-    telemetryService.logEvent(
+    service.logEvent(
       QUERY_BUILDER_POST_FILTER_EVENT.FILTER__SIMPLIFY__TREE__LAUNCH,
       {},
     );

package/src/components/QueryBuilder.tsx

@@ -40,7 +40,7 @@ import {
   ModalHeader,
   BlankPanelContent,
   ModalFooterButton,
-  CalendarIcon,
+  CalendarClockIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -72,6 +72,7 @@ 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 { DataAccessOverview } from './data-access/DataAccessOverview.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -214,12 +215,16 @@ const renderCheckEntitlementsEditor = (
   }
 
   const handleClose = (): void => {
-    queryBuilderState.checkEntitlementsState.setIsCheckingEntitlements(false);
+    queryBuilderState.checkEntitlementsState.setShowCheckEntitlementsViewer(
+      false,
+    );
   };
 
   return (
     <Dialog
-      open={queryBuilderState.checkEntitlementsState.isCheckingEntitlements}
+      open={
+        queryBuilderState.checkEntitlementsState.showCheckEntitlementsViewer
+      }
       onClose={handleClose}
       classes={{
         root: 'editor-modal__root-container',
@@ -229,10 +234,20 @@ const renderCheckEntitlementsEditor = (
     >
       <Modal darkMode={true} className="editor-modal">
         <ModalHeader title="Query Entitlements" />
-        <ModalBody>
-          <BlankPanelContent>
-            Check Entitlements is not supported yet
-          </BlankPanelContent>
+        <ModalBody className="query-builder__data-access-overview">
+          <div className="query-builder__data-access-overview__container">
+            {queryBuilderState.checkEntitlementsState.dataAccessState ? (
+              <DataAccessOverview
+                dataAccessState={
+                  queryBuilderState.checkEntitlementsState.dataAccessState
+                }
+              />
+            ) : (
+              <BlankPanelContent>
+                No data access information available
+              </BlankPanelContent>
+            )}
+          </div>
         </ModalBody>
         <ModalFooter>
           <ModalFooterButton text="Close" onClick={handleClose} />
@@ -347,7 +362,9 @@ export const QueryBuilder = observer(
     };
 
     const openCheckEntitlmentsEditor = (): void => {
-      queryBuilderState.checkEntitlementsState.setIsCheckingEntitlements(true);
+      queryBuilderState.checkEntitlementsState.setShowCheckEntitlementsViewer(
+        true,
+      );
     };
 
     useCommands(queryBuilderState);
@@ -392,26 +409,25 @@ 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__content__icons">
+            <div className="query-builder__header">
+              <div className="query-builder__header__statuses">
                 {queryBuilderState.watermarkState.value && (
-                  <>
-                    <button
-                      className="panel__header__action"
-                      onClick={openWatermark}
-                      tabIndex={-1}
-                      title="Show Watermark"
-                    >
-                      <WaterDropIcon />
-                    </button>
-                  </>
+                  <button
+                    className="query-builder__header__status query-builder__header__status--action"
+                    onClick={openWatermark}
+                    tabIndex={-1}
+                    title="Used watermark"
+                  >
+                    <WaterDropIcon />
+                  </button>
                 )}
                 {queryBuilderState.isCalendarEnabled && (
-                  <>
-                    <div className="query-builder__sub-header__content__icon">
-                      <CalendarIcon />
-                    </div>
-                  </>
+                  <div
+                    className="query-builder__header__status"
+                    title="Used calendar aggregation"
+                  >
+                    <CalendarClockIcon className="query-builder__header__status__icon--calendar" />
+                  </div>
                 )}
                 {queryBuilderState.watermarkState.isEditingWatermark && (
                   <QueryBuilderWatermarkEditor
@@ -419,9 +435,9 @@ export const QueryBuilder = observer(
                   />
                 )}
               </div>
-              <div className="query-builder__sub-header__content__actions">
+              <div className="query-builder__header__actions">
                 <DropdownMenu
-                  className="query-builder__sub-header__custom-action"
+                  className="query-builder__header__advanced-dropdown"
                   title="Show Advanced Menu..."
                   content={
                     <MenuContent>
@@ -434,7 +450,7 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Show Function(s)
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -452,7 +468,7 @@ export const QueryBuilder = observer(
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          <MenuContentItemLabel>
                             Show Parameter(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
@@ -471,7 +487,7 @@ export const QueryBuilder = observer(
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          <MenuContentItemLabel>
                             Show Constant(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
@@ -490,10 +506,9 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show Filter
-                        </MenuContentItemLabel>
+                        <MenuContentItemLabel>Show Filter</MenuContentItemLabel>
                       </MenuContentItem>
+                      <MenuContentDivider />
                       <MenuContentItem
                         onClick={toggleShowOLAPGroupByPanel}
                         disabled={
@@ -516,8 +531,8 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show Window Func(s)
+                        <MenuContentItemLabel>
+                          Show Window Function(s)
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem
@@ -541,13 +556,13 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Show Post-Filter
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={openWatermark}>
                         <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Show Watermark
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -566,7 +581,7 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Enable Calendar
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -581,20 +596,20 @@ export const QueryBuilder = observer(
                             .projectionColumns.length === 0
                         }
                       >
-                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemIcon />
+                        <MenuContentItemLabel>
                           Check Entitlements
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={editQueryInPure}>
-                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemIcon />
+                        <MenuContentItemLabel>
                           Edit Query in Pure
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={showQueryProtocol}>
-                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemIcon />
+                        <MenuContentItemLabel>
                           Show Query Protocol
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -606,10 +621,10 @@ export const QueryBuilder = observer(
                     elevation: 7,
                   }}
                 >
-                  <div className="query-builder__sub-header__custom-action__label">
+                  <div className="query-builder__header__advanced-dropdown__label">
                     Advanced
                   </div>
-                  <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
+                  <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
                 </DropdownMenu>
               </div>
             </div>
@@ -709,7 +724,8 @@ export const QueryBuilder = observer(
           {queryBuilderState.textEditorState.mode && (
             <QueryBuilderTextEditor queryBuilderState={queryBuilderState} />
           )}
-          {queryBuilderState.checkEntitlementsState.isCheckingEntitlements &&
+          {queryBuilderState.checkEntitlementsState
+            .showCheckEntitlementsViewer &&
             renderCheckEntitlementsEditor(
               queryBuilderState,
               applicationStore.pluginManager

package/src/components/QueryBuilder_LegendApplicationPlugin.ts

@@ -28,6 +28,7 @@ import { QUERY_BUILDER_SETTING_CONFIG } from '../__lib__/QueryBuilderSetting.js'
 import { QUERY_BUILDER_COMMAND_CONFIG } from '../stores/QueryBuilderCommand.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { configureDataGridComponent } from '@finos/legend-lego/data-grid';
+import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js';
 
 export type CheckEntitlementEditorRender = (
   queryBuilderState: QueryBuilderState,
@@ -50,6 +51,9 @@ export class QueryBuilder_LegendApplicationPlugin extends LegendApplicationPlugi
     return [
       async (applicationStore) => {
         configureDataGridComponent();
+
+        // configure chart component
+        ChartJS.register(ArcElement, Tooltip);
       },
     ];
   }