@finos/legend-query-builder 4.0.11 → 4.0.13

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@finos/legend-query-builder",
-    "version": "4.0.11",
+    "version": "4.0.13",
     "description": "Legend query builder core",
     "keywords": [
         "legend",
@@ -50,8 +50,8 @@
         "@finos/legend-shared": "workspace:*",
         "@finos/legend-storage": "workspace:*",
         "@testing-library/react": "14.0.0",
-        "@types/react": "18.2.12",
-        "@types/react-dom": "18.2.5",
+        "@types/react": "18.2.13",
+        "@types/react-dom": "18.2.6",
         "chart.js": "4.3.0",
         "mathjs": "11.8.1",
         "mobx": "6.9.0",
@@ -62,17 +62,17 @@
         "react-dnd": "16.0.1",
         "react-dom": "18.2.0",
         "serializr": "3.0.2",
-        "sql-formatter": "12.2.2"
+        "sql-formatter": "12.2.3"
     },
     "devDependencies": {
         "@finos/legend-dev-utils": "workspace:*",
         "@jest/globals": "29.5.0",
         "cross-env": "7.0.3",
-        "eslint": "8.42.0",
+        "eslint": "8.43.0",
         "jest": "29.5.0",
         "npm-run-all": "4.1.5",
         "rimraf": "5.0.1",
-        "sass": "1.63.3",
+        "sass": "1.63.4",
         "typescript": "5.1.3"
     },
     "peerDependencies": {

package/lib/stores/QueryBuilderResultState.js

@@ -200,7 +200,7 @@ export class QueryBuilderResultState {
             }
         }
         catch (error) {
-            // When user cancels the query by calling the cancelQuery api, it will throw an exeuction failure error.
+            // When user cancels the query by calling the cancelQuery api, it will throw an execution failure error.
             // For now, we don't want to notify users about this failure. Therefore we check to ensure the promise is still the same one.
             // When cancelled the query, we set the queryRunPromise as undefined.
             if (this.queryRunPromise === promise) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.0.11",
+  "version": "4.0.13",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -42,16 +42,16 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.22",
-    "@finos/legend-art": "7.0.22",
-    "@finos/legend-graph": "30.0.7",
-    "@finos/legend-lego": "1.0.20",
-    "@finos/legend-server-depot": "6.0.14",
-    "@finos/legend-shared": "10.0.13",
-    "@finos/legend-storage": "3.0.63",
+    "@finos/legend-application": "15.0.24",
+    "@finos/legend-art": "7.0.24",
+    "@finos/legend-graph": "30.0.9",
+    "@finos/legend-lego": "1.1.0",
+    "@finos/legend-server-depot": "6.0.16",
+    "@finos/legend-shared": "10.0.15",
+    "@finos/legend-storage": "3.0.65",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.2.5",
+    "@types/react": "18.2.13",
+    "@types/react-dom": "18.2.6",
     "chart.js": "4.3.0",
     "mathjs": "11.8.1",
     "mobx": "6.9.0",
@@ -62,17 +62,17 @@
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
     "serializr": "3.0.2",
-    "sql-formatter": "12.2.2"
+    "sql-formatter": "12.2.3"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.67",
+    "@finos/legend-dev-utils": "2.0.69",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
-    "eslint": "8.42.0",
+    "eslint": "8.43.0",
     "jest": "29.5.0",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
-    "sass": "1.63.3",
+    "sass": "1.63.4",
     "typescript": "5.1.3"
   },
   "peerDependencies": {

package/src/components/QueryBuilderResultPanel.tsx

@@ -126,11 +126,11 @@ const QueryBuilderGridResultContextMenu = observer(
   forwardRef<
     HTMLDivElement,
     {
-      event: QueryBuilderTDSResultCellData | null;
+      data: QueryBuilderTDSResultCellData | null;
       tdsState: QueryBuilderTDSState;
     }
   >(function QueryBuilderResultContextMenu(props, ref) {
-    const { event, tdsState } = props;
+    const { data, tdsState } = props;
     const applicationStore = useApplicationStore();
     const postFilterEqualOperator = new QueryBuilderPostFilterOperator_Equal();
     const postFilterInOperator = new QueryBuilderPostFilterOperator_In();
@@ -145,10 +145,10 @@ const QueryBuilderGridResultContextMenu = observer(
     const postFilterState = tdsState.postFilterState;
 
     const projectionColumnState = tdsState.projectionColumns
-      .filter((c) => c.columnName === event?.columnName)
+      .filter((c) => c.columnName === data?.columnName)
       .concat(
         tdsState.aggregationState.columns
-          .filter((c) => c.columnName === event?.columnName)
+          .filter((c) => c.columnName === data?.columnName)
           .map((ag) => ag.projectionColumnState),
       )[0];
     const getExistingPostFilterNode = (
@@ -319,7 +319,7 @@ const QueryBuilderGridResultContextMenu = observer(
                 : (v as InstanceValue).values,
             )
             .flat()
-            .includes(cellData.value ?? event?.value);
+            .includes(cellData.value ?? data?.value);
 
         if (!doesValueAlreadyExist) {
           const newValueSpecification = (
@@ -399,7 +399,7 @@ const QueryBuilderGridResultContextMenu = observer(
 
     const handleCopyCellValue = applicationStore.guardUnhandledError(() =>
       applicationStore.clipboardService.copyTextToClipboard(
-        event?.value?.toString() ?? '',
+        data?.value?.toString() ?? '',
       ),
     );
 
@@ -597,7 +597,7 @@ const QueryResultCellRenderer = observer(
           // NOTE: we only support this functionality for grid result with a projection fetch-structure
           fetchStructureImplementation instanceof QueryBuilderTDSState ? (
             <QueryBuilderGridResultContextMenu
-              event={resultState.mousedOverCell}
+              data={resultState.mousedOverCell}
               tdsState={fetchStructureImplementation}
             />
           ) : null
@@ -960,70 +960,73 @@ export const QueryBuilderResultPanel = observer(
                 />
               </div>
             )}
-            {resultState.isRunningQuery ? (
-              <button
-                className="query-builder__result__stop-btn"
-                onClick={cancelQuery}
-                tabIndex={-1}
-                disabled={!isQueryValid}
-              >
-                <div className="btn--dark btn--caution query-builder__result__stop-btn__label">
-                  <PauseCircleIcon className="query-builder__result__stop-btn__label__icon" />
-                  <div className="query-builder__result__stop-btn__label__title">
-                    Stop
-                  </div>
-                </div>
-              </button>
-            ) : (
-              <div className="query-builder__result__execute-btn">
+
+            <div className="query-builder__result__execute-btn btn__dropdown-combo btn__dropdown-combo--primary">
+              {resultState.isRunningQuery ? (
                 <button
-                  className="query-builder__result__execute-btn__label"
-                  onClick={runQuery}
+                  className="btn__dropdown-combo__canceler"
+                  onClick={cancelQuery}
                   tabIndex={-1}
-                  title={
-                    allValidationIssues.length
-                      ? `Query is not valid:\n${allValidationIssues
-                          .map((issue) => `\u2022 ${issue}`)
-                          .join('\n')}`
-                      : undefined
-                  }
-                  disabled={isRunQueryDisabled}
+                  disabled={!isQueryValid}
                 >
-                  <PlayIcon className="query-builder__result__execute-btn__label__icon" />
-                  <div className="query-builder__result__execute-btn__label__title">
-                    Run Query
+                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
+                    <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
+                    <div className="btn__dropdown-combo__canceler__label__title">
+                      Stop
+                    </div>
                   </div>
                 </button>
-                <DropdownMenu
-                  className="query-builder__result__execute-btn__dropdown-btn"
-                  disabled={isRunQueryDisabled}
-                  content={
-                    <MenuContent>
-                      <MenuContentItem
-                        className="query-builder__result__execute-btn__option"
-                        onClick={generatePlan}
-                        disabled={isRunQueryDisabled}
-                      >
-                        Generate Plan
-                      </MenuContentItem>
-                      <MenuContentItem
-                        className="query-builder__result__execute-btn__option"
-                        onClick={debugPlanGeneration}
-                        disabled={isRunQueryDisabled}
-                      >
-                        Debug
-                      </MenuContentItem>
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                    transformOrigin: { vertical: 'top', horizontal: 'right' },
-                  }}
-                >
-                  <CaretDownIcon />
-                </DropdownMenu>
-              </div>
-            )}
+              ) : (
+                <>
+                  <button
+                    className="btn__dropdown-combo__label"
+                    onClick={runQuery}
+                    tabIndex={-1}
+                    title={
+                      allValidationIssues.length
+                        ? `Query is not valid:\n${allValidationIssues
+                            .map((issue) => `\u2022 ${issue}`)
+                            .join('\n')}`
+                        : undefined
+                    }
+                    disabled={isRunQueryDisabled}
+                  >
+                    <PlayIcon className="btn__dropdown-combo__label__icon" />
+                    <div className="btn__dropdown-combo__label__title">
+                      Run Query
+                    </div>
+                  </button>
+                  <DropdownMenu
+                    className="btn__dropdown-combo__dropdown-btn"
+                    disabled={isRunQueryDisabled}
+                    content={
+                      <MenuContent>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={generatePlan}
+                          disabled={isRunQueryDisabled}
+                        >
+                          Generate Plan
+                        </MenuContentItem>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={debugPlanGeneration}
+                          disabled={isRunQueryDisabled}
+                        >
+                          Debug
+                        </MenuContentItem>
+                      </MenuContent>
+                    }
+                    menuProps={{
+                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                      transformOrigin: { vertical: 'top', horizontal: 'right' },
+                    }}
+                  >
+                    <CaretDownIcon />
+                  </DropdownMenu>
+                </>
+              )}
+            </div>
             <DropdownMenu
               className="query-builder__result__export__dropdown"
               title="Export"

package/src/components/data-access/DataAccessOverview.tsx

@@ -72,6 +72,17 @@ const DataAccessOverviewChart = observer(
             <RefreshIcon />
           </button>
         </div>
+        {Boolean(
+          dataAccessState.datasets.find(
+            (dataset) =>
+              dataset.entitlementReport instanceof
+              DatasetEntitlementUnsupportedReport,
+          ),
+        ) && (
+          <div className="data-access-overview__chart__warning">
+            Use case is not fully supported!
+          </div>
+        )}
         <div className="data-access-overview__chart__container">
           <Doughnut
             data={{
@@ -109,7 +120,7 @@ const DataAccessOverviewChart = observer(
           />
           <div className="data-access-overview__chart__stats">
             <div className="data-access-overview__chart__stats__percentage">
-              {accessGrantedPercentage}%
+              {total === 0 ? 0 : accessGrantedPercentage}%
             </div>
             <div className="data-access-overview__chart__stats__tally">
               {total === 0 ? 0 : accessGrantedCount}/{total}
@@ -285,7 +296,10 @@ export const DataAccessOverview = observer(
     const applicationStore = useApplicationStore();
 
     useEffect(() => {
-      dataAccessState.intialize().catch(applicationStore.alertUnhandledError);
+      // NOTE: @YannanGao-gs - force refresh for now, let's investigate why the data is empty
+      // when we fetched it from cache
+      dataAccessState.refresh().catch(applicationStore.alertUnhandledError);
+      // dataAccessState.intialize().catch(applicationStore.alertUnhandledError);
     }, [applicationStore, dataAccessState]);
 
     return (

package/src/components/execution-plan/SQLExecutionNodeViewer.tsx

@@ -28,6 +28,10 @@ import {
   PanelContent,
 } from '@finos/legend-art';
 import { tryToFormatSql } from '../QueryBuilderResultPanel.js';
+import {
+  CodeEditor,
+  CODE_EDITOR_LANGUAGE,
+} from '@finos/legend-lego/code-editor';
 
 /**
  * TODO: Create a new `AbstractPlugin` for this, called `ExecutionPlanViewerPlugin`
@@ -81,9 +85,12 @@ export const SQLExecutionNodeViewer: React.FC<{
               </div>
             </PanelListItem>
           </div>
-          <PanelListItem className="query-builder__sql__container__item">
-            <pre>{tryToFormatSql(query)} </pre>
-          </PanelListItem>
+          <div className="query-builder__sql__container__code-editor">
+            <CodeEditor
+              inputValue={tryToFormatSql(query)}
+              language={CODE_EDITOR_LANGUAGE.SQL}
+            />
+          </div>
           <PanelDivider />
         </div>
       </div>

package/src/components/explorer/QueryBuilderMilestoningEditor.tsx

@@ -271,9 +271,11 @@ export const MilestoningParametersEditor = observer(
           <ModalHeader title="Milestoning Parameters" />
           <ModalBody className="query-builder__variables__modal__body">
             <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
-            <div className="panel__content__form__section__header__label">
-              List of compatible milestoning parameters
-            </div>
+            <PanelFormSection>
+              <div className="panel__content__form__section__header__label">
+                List of compatible milestoning parameters
+              </div>
+            </PanelFormSection>
             <div className="panel__content__form__section__list__items">
               <VariableSelector
                 queryBuilderState={queryBuilderState}

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

@@ -1075,8 +1075,7 @@ const QueryBuilderPostFilterPanelContent = observer(
                 <QueryBuilderPostFilterTree tdsState={tdsState} />
               </>
             )}
-
-            {showDroppableSuggestion && (
+            {showDroppableSuggestion && !postFilterState.isEmpty && (
               <div
                 ref={dropTargetConnector}
                 className={clsx(

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

@@ -1186,8 +1186,8 @@ export const QueryBuilderTDSWindowPanel = observer(
         >
           <PanelHeader>
             <div className="panel__header__title">
-              <div className="panel__header__title__label">Window Function</div>
-              {tdsWindowState.windowValidationIssues.length && (
+              <div className="panel__header__title__label">window function</div>
+              {tdsWindowState.windowValidationIssues.length > 0 && (
                 <QueryBuilderPanelIssueCountBadge
                   issues={tdsWindowState.windowValidationIssues}
                 />

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -665,7 +665,8 @@ const CollectionValueInstanceValueEditor = observer(
       setValueSpecification,
       obseverContext,
     } = props;
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+
     const [text, setText] = useState(stringifyValue(valueSpecification.values));
     const [editable, setEditable] = useState(false);
     const [showAdvancedEditorPopover, setShowAdvancedEditorPopover] =
@@ -697,9 +698,7 @@ const CollectionValueInstanceValueEditor = observer(
       setText(stringifyValue(valueSpecification.values));
       setValueSpecification(valueSpecification);
     };
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      setText(event.target.value);
-    };
+
     const changeValueTextArea: React.ChangeEventHandler<HTMLTextAreaElement> = (
       event,
     ) => {
@@ -742,15 +741,20 @@ const CollectionValueInstanceValueEditor = observer(
             </BasePopover>
           )}
           <div className={clsx('value-spec-editor', className)}>
-            <input
+            <textarea
               ref={inputRef}
               className={clsx(
-                'panel__content__form__section__input value-spec-editor__input',
+                'panel__content__form__section__input value-spec-editor__input value-spec-editor__textarea ',
               )}
               spellCheck={false}
               value={text}
               placeholder={text === '' ? '(empty)' : undefined}
-              onChange={changeValue}
+              onChange={changeValueTextArea}
+              onKeyDown={(event): void => {
+                if (event.key === 'Enter' && !event.shiftKey) {
+                  saveEdit();
+                }
+              }}
             />
             <button
               className="value-spec-editor__list-editor__expand-button btn--dark"

package/src/stores/QueryBuilderResultState.ts

@@ -345,7 +345,7 @@ export class QueryBuilderResultState {
         );
       }
     } catch (error) {
-      // When user cancels the query by calling the cancelQuery api, it will throw an exeuction failure error.
+      // When user cancels the query by calling the cancelQuery api, it will throw an execution failure error.
       // For now, we don't want to notify users about this failure. Therefore we check to ensure the promise is still the same one.
       // When cancelled the query, we set the queryRunPromise as undefined.
       if (this.queryRunPromise === promise) {