@finos/legend-query-builder 3.2.0 → 3.2.1

package/lib/stores/entitlements/QueryBuilderCheckEntitlementsState.js

@@ -16,24 +16,38 @@
 import { hashArray } from '@finos/legend-shared';
 import { makeObservable, observable, action, computed } from 'mobx';
 import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from '../QueryBuilderStateHashUtils.js';
+import { DataAccessState } from '../data-access/DataAccessState.js';
+import { RuntimePointer, InMemoryGraphData, } from '@finos/legend-graph';
 export class QueryBuilderCheckEntitlementsState {
     queryBuilderState;
-    isCheckingEntitlements = false;
+    dataAccessState;
+    showCheckEntitlementsViewer = false;
     constructor(queryBuilderState) {
         makeObservable(this, {
-            isCheckingEntitlements: observable,
-            setIsCheckingEntitlements: action,
+            showCheckEntitlementsViewer: observable,
+            dataAccessState: observable,
+            setShowCheckEntitlementsViewer: action,
             hashCode: computed,
         });
         this.queryBuilderState = queryBuilderState;
     }
-    setIsCheckingEntitlements(val) {
-        this.isCheckingEntitlements = val;
+    setShowCheckEntitlementsViewer(val) {
+        this.showCheckEntitlementsViewer = val;
+        this.dataAccessState = undefined;
+        if (this.queryBuilderState.mapping &&
+            this.queryBuilderState.runtimeValue instanceof RuntimePointer) {
+            const mappingPath = this.queryBuilderState.mapping.path;
+            const runtimePath = this.queryBuilderState.runtimeValue.packageableRuntime.value.path;
+            this.dataAccessState = new DataAccessState(this.queryBuilderState.applicationStore, this.queryBuilderState.graphManagerState, {
+                surveyDatasets: async () => this.queryBuilderState.graphManagerState.graphManager.surveyDatasets(mappingPath, runtimePath, this.queryBuilderState.buildQuery(), new InMemoryGraphData(this.queryBuilderState.graphManagerState.graph)),
+                checkDatasetEntitlements: async (datasets) => this.queryBuilderState.graphManagerState.graphManager.checkDatasetEntitlements(datasets, mappingPath, runtimePath, this.queryBuilderState.buildQuery(), new InMemoryGraphData(this.queryBuilderState.graphManagerState.graph)),
+            });
+        }
     }
     get hashCode() {
         return hashArray([
             QUERY_BUILDER_STATE_HASH_STRUCTURE.CHECK_ENTITLEMENTS_STATE,
-            this.isCheckingEntitlements,
+            this.showCheckEntitlementsViewer,
         ]);
     }
 }

package/lib/stores/entitlements/QueryBuilderCheckEntitlementsState.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilderCheckEntitlementsState.js","sourceRoot":"","sources":["../../../src/stores/entitlements/QueryBuilderCheckEntitlementsState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAiB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACpE,OAAO,EAAE,kCAAkC,EAAE,MAAM,kCAAkC,CAAC;AAGtF,MAAM,OAAO,kCAAkC;IACpC,iBAAiB,CAAoB;IAC9C,sBAAsB,GAAG,KAAK,CAAC;IAE/B,YAAY,iBAAoC;QAC9C,cAAc,CAAC,IAAI,EAAE;YACnB,sBAAsB,EAAE,UAAU;YAClC,yBAAyB,EAAE,MAAM;YACjC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC7C,CAAC;IAED,yBAAyB,CAAC,GAAY;QACpC,IAAI,CAAC,sBAAsB,GAAG,GAAG,CAAC;IACpC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,SAAS,CAAC;YACf,kCAAkC,CAAC,wBAAwB;YAC3D,IAAI,CAAC,sBAAsB;SAC5B,CAAC,CAAC;IACL,CAAC;CACF"}
+{"version":3,"file":"QueryBuilderCheckEntitlementsState.js","sourceRoot":"","sources":["../../../src/stores/entitlements/QueryBuilderCheckEntitlementsState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAiB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACpE,OAAO,EAAE,kCAAkC,EAAE,MAAM,kCAAkC,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EACL,cAAc,EAGd,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,OAAO,kCAAkC;IACpC,iBAAiB,CAAoB;IAE9C,eAAe,CAA+B;IAC9C,2BAA2B,GAAG,KAAK,CAAC;IAEpC,YAAY,iBAAoC;QAC9C,cAAc,CAAC,IAAI,EAAE;YACnB,2BAA2B,EAAE,UAAU;YACvC,eAAe,EAAE,UAAU;YAC3B,8BAA8B,EAAE,MAAM;YACtC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC7C,CAAC;IAED,8BAA8B,CAAC,GAAY;QACzC,IAAI,CAAC,2BAA2B,GAAG,GAAG,CAAC;QAEvC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACjC,IACE,IAAI,CAAC,iBAAiB,CAAC,OAAO;YAC9B,IAAI,CAAC,iBAAiB,CAAC,YAAY,YAAY,cAAc,EAC7D;YACA,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC;YACxD,MAAM,WAAW,GACf,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;YACpE,IAAI,CAAC,eAAe,GAAG,IAAI,eAAe,CACxC,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,EACvC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,EACxC;gBACE,cAAc,EAAE,KAAK,IAAqC,EAAE,CAC1D,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,cAAc,CAClE,WAAW,EACX,WAAW,EACX,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,EACnC,IAAI,iBAAiB,CACnB,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,KAAK,CAC/C,CACF;gBACH,wBAAwB,EAAE,KAAK,EAC7B,QAAgC,EACK,EAAE,CACvC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,wBAAwB,CAC5E,QAAQ,EACR,WAAW,EACX,WAAW,EACX,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,EACnC,IAAI,iBAAiB,CACnB,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,KAAK,CAC/C,CACF;aACJ,CACF,CAAC;SACH;IACH,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,SAAS,CAAC;YACf,kCAAkC,CAAC,wBAAwB;YAC3D,IAAI,CAAC,2BAA2B;SACjC,CAAC,CAAC;IACL,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -42,20 +42,20 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.7",
-    "@finos/legend-art": "7.0.8",
-    "@finos/legend-graph": "28.1.4",
-    "@finos/legend-lego": "0.1.13",
-    "@finos/legend-server-depot": "6.0.4",
-    "@finos/legend-shared": "10.0.3",
-    "@finos/legend-storage": "3.0.53",
+    "@finos/legend-application": "15.0.8",
+    "@finos/legend-art": "7.0.9",
+    "@finos/legend-graph": "28.1.5",
+    "@finos/legend-lego": "1.0.0",
+    "@finos/legend-server-depot": "6.0.5",
+    "@finos/legend-shared": "10.0.4",
+    "@finos/legend-storage": "3.0.54",
     "@testing-library/react": "14.0.0",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
     "mathjs": "11.8.0",
     "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
-    "monaco-editor": "0.37.1",
+    "monaco-editor": "0.38.0",
     "react": "18.2.0",
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
@@ -63,12 +63,14 @@
     "sql-formatter": "12.2.0"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.57",
+    "@finos/legend-dev-utils": "2.0.58",
     "@jest/globals": "29.5.0",
+    "chart.js": "4.3.0",
     "cross-env": "7.0.3",
     "eslint": "8.39.0",
     "jest": "29.5.0",
     "npm-run-all": "4.1.5",
+    "react-chartjs-2": "5.2.0",
     "rimraf": "5.0.0",
     "sass": "1.62.1",
     "typescript": "5.0.4"

package/src/__lib__/QueryBuilderColorTheme.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum QUERY_BUILDER_COLOR_THEME_KEY {
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_GRANTED = 'data-access-overview.chart.access-granted',
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_APPROVED = 'data-access-overview.chart.access-approved',
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_REQUESTED = 'data-access-overview.chart.access-requested',
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_NOT_GRANTED = 'data-access-overview.chart.access-not-granted',
+  DATA_ACCESS_OVERVIEW__CHART__UNSUPPORTED_ACCESS = 'data-access-overview.chart.unsupported-access',
+}

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);
       },
     ];
   }

package/src/components/QueryLoader.tsx

@@ -86,7 +86,6 @@ const QueryPreviewViewer = observer(
               }
               isReadOnly={true}
               language={CODE_EDITOR_LANGUAGE.PURE}
-              showMiniMap={true}
             />
           </ModalBody>
           <ModalFooter>
@@ -324,12 +323,16 @@ export const QueryLoader = observer(
                               onChange={changeQueryNameInputValue}
                               onKeyDown={(event) => {
                                 if (event.code === 'Enter') {
+                                  event.stopPropagation();
                                   renameQuery(query)();
                                 } else if (event.code === 'Escape') {
+                                  event.stopPropagation();
                                   hideEditQueryNameInput();
                                 }
                               }}
                               onBlur={() => hideEditQueryNameInput()}
+                              // avoid clicking on the input causing the call to load query
+                              onClick={(event) => event.stopPropagation()}
                             />
                           </div>
                         ) : (