@finos/legend-query-builder 3.2.0 → 3.2.2

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

@@ -0,0 +1,308 @@
+/**
+ * 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.
+ */
+
+import { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useApplicationStore } from '@finos/legend-application';
+import type {
+  DataAccessState,
+  DatasetAccessInfo,
+} from '../../stores/data-access/DataAccessState.js';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  MinusCircleIcon,
+  PanelLoadingIndicator,
+  RefreshIcon,
+  TimesCircleIcon,
+  clsx,
+} from '@finos/legend-art';
+import {
+  DataGrid,
+  type DataGridCellRendererParams,
+} from '@finos/legend-lego/data-grid';
+import {
+  DatasetEntitlementAccessApprovedReport,
+  DatasetEntitlementAccessGrantedReport,
+  DatasetEntitlementAccessNotGrantedReport,
+  DatasetEntitlementAccessRequestedReport,
+  DatasetEntitlementUnsupportedReport,
+} from '@finos/legend-graph';
+import { Doughnut } from 'react-chartjs-2';
+import { getNullableFirstEntry } from '@finos/legend-shared';
+import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
+
+const DataAccessOverviewChart = observer(
+  (props: { dataAccessState: DataAccessState }) => {
+    const { dataAccessState } = props;
+    const applicationStore = useApplicationStore();
+    const entitlementCheckInfo = dataAccessState.entitlementCheckInfo;
+    const total = entitlementCheckInfo.total;
+    const accessGrantedCount =
+      getNullableFirstEntry(entitlementCheckInfo.data)?.count ?? 0;
+    const accessGrantedPercentage =
+      getNullableFirstEntry(entitlementCheckInfo.data)?.percentage ?? 0;
+
+    return (
+      <div className="data-access-overview__chart">
+        <div className="data-access-overview__chart__actions">
+          <button
+            className="data-access-overview__chart__actions__refresh-btn btn--dark"
+            tabIndex={-1}
+            title="Refresh"
+            onClick={() => {
+              dataAccessState
+                .refresh()
+                .catch(applicationStore.alertUnhandledError);
+            }}
+          >
+            <RefreshIcon />
+          </button>
+        </div>
+        <div className="data-access-overview__chart__container">
+          <Doughnut
+            data={{
+              labels: entitlementCheckInfo.data.map((item) => item.label),
+              datasets: [
+                {
+                  data: entitlementCheckInfo.data.map((item) => item.count),
+                  backgroundColor: entitlementCheckInfo.data.map(
+                    (item) => item.color,
+                  ),
+                  hoverBorderWidth: 0,
+                  borderWidth: 0,
+                },
+              ],
+            }}
+            options={{
+              responsive: true,
+              resizeDelay: 0,
+              maintainAspectRatio: false,
+              cutout: '75%',
+              plugins: {
+                tooltip: {
+                  enabled: total !== 0,
+                  usePointStyle: false,
+                  boxPadding: 5,
+                  callbacks: {
+                    labelPointStyle: () => ({
+                      pointStyle: 'rectRounded',
+                      rotation: 0,
+                    }),
+                  },
+                },
+              },
+            }}
+          />
+          <div className="data-access-overview__chart__stats">
+            <div className="data-access-overview__chart__stats__percentage">
+              {accessGrantedPercentage}%
+            </div>
+            <div className="data-access-overview__chart__stats__tally">
+              {total === 0 ? 0 : accessGrantedCount}/{total}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const AccessStatusCellRenderer = observer(
+  (
+    params: DataGridCellRendererParams<DatasetAccessInfo> & {
+      dataAccessState: DataAccessState;
+    },
+  ) => {
+    const { data } = params;
+    const applicationStore = useApplicationStore();
+
+    if (!data) {
+      return null;
+    }
+
+    if (
+      data.entitlementReport instanceof DatasetEntitlementAccessGrantedReport
+    ) {
+      return (
+        <div className="data-access-overview__grid__access-status-cell">
+          <div className="data-access-overview__grid__access-status-cell__content">
+            <div className="data-access-overview__grid__access-status-cell__icon data-access-overview__grid__access-status-cell__icon--access-granted">
+              <CheckCircleIcon />
+            </div>
+            <div className="data-access-overview__grid__access-status-cell__text">
+              Access Granted
+            </div>
+          </div>
+        </div>
+      );
+    } else if (
+      data.entitlementReport instanceof DatasetEntitlementAccessApprovedReport
+    ) {
+      return (
+        <div className="data-access-overview__grid__access-status-cell">
+          <div className="data-access-overview__grid__access-status-cell__content">
+            <div className="data-access-overview__grid__access-status-cell__icon data-access-overview__grid__access-status-cell__icon--access-approved">
+              <MinusCircleIcon />
+            </div>
+            <div className="data-access-overview__grid__access-status-cell__text">
+              Access Approved
+            </div>
+          </div>
+        </div>
+      );
+    } else if (
+      data.entitlementReport instanceof DatasetEntitlementAccessRequestedReport
+    ) {
+      return (
+        <div className="data-access-overview__grid__access-status-cell">
+          <div className="data-access-overview__grid__access-status-cell__content">
+            <div className="data-access-overview__grid__access-status-cell__icon data-access-overview__grid__access-status-cell__icon--access-requested">
+              <ExclamationCircleIcon />
+            </div>
+            <div className="data-access-overview__grid__access-status-cell__text">
+              Access Requested
+            </div>
+          </div>
+        </div>
+      );
+    } else if (
+      data.entitlementReport instanceof DatasetEntitlementAccessNotGrantedReport
+    ) {
+      const plugins = applicationStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            (
+              plugin as QueryBuilder_LegendApplicationPlugin_Extension
+            ).getExtraDatasetEntitlementAccessNotGrantedReportActionConfigurations?.() ??
+            [],
+        );
+      let action: React.ReactNode | undefined;
+      for (const plugin of plugins) {
+        action = plugin.renderer(data);
+        if (action) {
+          break;
+        }
+      }
+      return (
+        <div className="data-access-overview__grid__access-status-cell">
+          <div className="data-access-overview__grid__access-status-cell__content">
+            <div className="data-access-overview__grid__access-status-cell__icon data-access-overview__grid__access-status-cell__icon--access-not-granted">
+              <TimesCircleIcon />
+            </div>
+            <div className="data-access-overview__grid__access-status-cell__text">
+              Access Not Granted
+            </div>
+          </div>
+          {action && (
+            <div className="data-access-overview__grid__access-status-cell__action">
+              {action}
+            </div>
+          )}
+        </div>
+      );
+    } else if (
+      data.entitlementReport instanceof DatasetEntitlementUnsupportedReport
+    ) {
+      return (
+        <div className="data-access-overview__grid__empty-cell">
+          (unsupported)
+        </div>
+      );
+    }
+
+    return null;
+  },
+);
+
+const DataAccessOverviewGrid = observer(
+  (props: { dataAccessState: DataAccessState }) => {
+    const { dataAccessState } = props;
+
+    return (
+      <div className="data-access-overview__grid ag-theme-balham-dark">
+        <DataGrid
+          rowData={dataAccessState.datasets}
+          gridOptions={{
+            suppressScrollOnNewData: true,
+            getRowId: (rowData) => rowData.data.uuid,
+          }}
+          columnDefs={[
+            {
+              minWidth: 50,
+              sortable: true,
+              resizable: true,
+              field: 'specification.name',
+              headerName: 'Dataset',
+              flex: 1,
+            },
+            {
+              minWidth: 50,
+              sortable: true,
+              resizable: true,
+              field: 'specification.type',
+              headerName: 'Type',
+              flex: 1,
+            },
+            {
+              minWidth: 50,
+              sortable: true,
+              resizable: true,
+              headerName: 'Access Status',
+              cellRendererParams: {
+                dataAccessState,
+              },
+              cellRenderer: AccessStatusCellRenderer,
+              flex: 1,
+            },
+          ]}
+        />
+      </div>
+    );
+  },
+);
+
+export const DataAccessOverview = observer(
+  (props: {
+    dataAccessState: DataAccessState;
+    compact?: boolean | undefined;
+  }) => {
+    const { dataAccessState, compact } = props;
+    const applicationStore = useApplicationStore();
+
+    useEffect(() => {
+      dataAccessState.intialize().catch(applicationStore.alertUnhandledError);
+    }, [applicationStore, dataAccessState]);
+
+    return (
+      <div
+        className={clsx('data-access-overview', {
+          'data-access-overview--compact': Boolean(compact),
+        })}
+      >
+        <PanelLoadingIndicator
+          isLoading={
+            dataAccessState.surveyDatasetsState.isInProgress ||
+            dataAccessState.checkEntitlementsState.isInProgress
+          }
+        />
+        <DataAccessOverviewChart dataAccessState={dataAccessState} />
+        <DataAccessOverviewGrid dataAccessState={dataAccessState} />
+      </div>
+    );
+  },
+);

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

@@ -380,7 +380,7 @@ const ExecutionPlanViewPanel = observer(
                     inputValue={displayData}
                     isReadOnly={true}
                     language={CODE_EDITOR_LANGUAGE.JSON}
-                    showMiniMap={false}
+                    hideMinimap={true}
                   />
                 )}
               {executionPlanState.viewMode ===
@@ -462,7 +462,6 @@ const ExecutionPlanViewerContent = observer(
             inputValue={JSON.stringify(rawPlan, undefined, DEFAULT_TAB_SIZE)}
             isReadOnly={true}
             language={CODE_EDITOR_LANGUAGE.JSON}
-            showMiniMap={true}
           />
         )}
       </div>
@@ -523,7 +522,6 @@ export const ExecutionPlanViewer = observer(
                         inputValue={executionPlanState.debugText}
                         isReadOnly={true}
                         language={CODE_EDITOR_LANGUAGE.TEXT}
-                        showMiniMap={true}
                       />
                     </PanelContent>
                   </div>

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

@@ -42,7 +42,7 @@ export const SQLExecutionNodeViewer: React.FC<{
       inputValue={formatSQL(query)}
       isReadOnly={true}
       language={CODE_EDITOR_LANGUAGE.SQL}
-      showMiniMap={false}
+      hideMinimap={true}
     />
   );
 });

package/src/components/explorer/QueryBuilderPropertySearchPanel.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import {
   clsx,
   CheckSquareIcon,

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

@@ -30,6 +30,7 @@ import {
   DropdownMenu,
   MenuContent,
   MenuContentItem,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import {
   COLUMN_SORT_TYPE,
@@ -262,9 +263,7 @@ export const QueryResultModifierModal = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <button className="btn modal__footer__close-btn" onClick={close}>
-              Close
-            </button>
+            <ModalFooterButton onClick={close} text="Close" />
           </ModalFooter>
         </Modal>
       </Dialog>

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

@@ -39,8 +39,8 @@ import {
   CalendarIcon,
   CalendarClockIcon,
   CustomSelectorInput,
-  PURE_FunctionIcon,
   PanelEntryDropZonePlaceholder,
+  FunctionIcon,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -102,62 +102,6 @@ import { getPropertyChainName } from '../../stores/QueryBuilderPropertyEditorSta
 import { generateDefaultValueForPrimitiveType } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_CALENDAR_TYPE } from '../../graph-manager/QueryBuilderConst.js';
 
-export type CalendarFunctionOption = {
-  label: string | React.ReactNode;
-  value: QueryBuilderAggregateCalendarFunction;
-};
-
-export const buildCalendarFunctionOption = (
-  calendarFunction: QueryBuilderAggregateCalendarFunction,
-): CalendarFunctionOption => ({
-  label: (
-    <div
-      className="query-builder__projection__calendar__function__label"
-      title={calendarFunction.getLabel()}
-    >
-      <PURE_FunctionIcon />
-      <div className="query-builder__projection__calendar__function__label__title">
-        {calendarFunction.getLabel()}
-      </div>
-    </div>
-  ),
-  value: calendarFunction,
-});
-
-export type CalendarFunctionDateColumnOption = {
-  label: string;
-  value: AbstractPropertyExpression;
-};
-
-export const buildCalendarFunctionDateColumnOption = (
-  dateColumn: Property | AbstractPropertyExpression,
-  parameter: VariableExpression,
-  humanizeLabel: boolean,
-): CalendarFunctionDateColumnOption => {
-  if (dateColumn instanceof Property) {
-    const propertyExpression = new AbstractPropertyExpression('');
-    propertyExpression_setFunc(
-      propertyExpression,
-      PropertyExplicitReference.create(guaranteeNonNullable(dateColumn)),
-    );
-    propertyExpression.parametersValues = [parameter];
-    return {
-      label: getPropertyChainName(propertyExpression, humanizeLabel),
-      value: propertyExpression,
-    };
-  } else {
-    return {
-      label: getPropertyChainName(dateColumn, humanizeLabel),
-      value: dateColumn,
-    };
-  }
-};
-
-export type CalendarTypeOption = {
-  label: string;
-  value: QUERY_BUILDER_CALENDAR_TYPE;
-};
-
 const QueryBuilderProjectionColumnContextMenu = observer(
   forwardRef<
     HTMLDivElement,
@@ -304,6 +248,76 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
   },
 );
 
+type CalendarFunctionOption = {
+  label: string | React.ReactNode;
+  value: QueryBuilderAggregateCalendarFunction;
+};
+
+const buildCalendarFunctionOption = (
+  calendarFunction: QueryBuilderAggregateCalendarFunction,
+): CalendarFunctionOption => ({
+  label: (
+    <div
+      className="query-builder__projection__calendar__function__label"
+      title={calendarFunction.getLabel()}
+    >
+      <FunctionIcon className="query-builder__projection__calendar__function__label__icon" />
+      <div className="query-builder__projection__calendar__function__label__title">
+        {calendarFunction.getLabel()}
+      </div>
+    </div>
+  ),
+  value: calendarFunction,
+});
+
+type CalendarFunctionDateColumnOption = {
+  label: React.ReactNode;
+  value: AbstractPropertyExpression;
+};
+
+const buildCalendarFunctionDateColumnOption = (
+  dateColumn: Property | AbstractPropertyExpression,
+  parameter: VariableExpression,
+  humanizeLabel: boolean,
+): CalendarFunctionDateColumnOption => {
+  if (dateColumn instanceof Property) {
+    const propertyExpression = new AbstractPropertyExpression('');
+    propertyExpression_setFunc(
+      propertyExpression,
+      PropertyExplicitReference.create(guaranteeNonNullable(dateColumn)),
+    );
+    propertyExpression.parametersValues = [parameter];
+    return {
+      label: getPropertyChainName(propertyExpression, humanizeLabel),
+      value: propertyExpression,
+    };
+  } else {
+    return {
+      label: getPropertyChainName(dateColumn, humanizeLabel),
+      value: dateColumn,
+    };
+  }
+};
+
+type CalendarTypeOption = {
+  label: React.ReactNode;
+  value: QUERY_BUILDER_CALENDAR_TYPE;
+};
+
+const buildCalendarTypeOption = (
+  val: QUERY_BUILDER_CALENDAR_TYPE,
+): CalendarTypeOption => ({
+  label: (
+    <div className="query-builder__projection__calendar__type__option">
+      <CalendarIcon className="query-builder__projection__calendar__type__option__icon" />
+      <div className="query-builder__projection__calendar__type__option__title">
+        {val}
+      </div>
+    </div>
+  ),
+  value: val,
+});
+
 const QueryBuilderProjectionColumnEditor = observer(
   (props: { projectionColumnState: QueryBuilderProjectionColumnState }) => {
     const handleRef = useRef<HTMLDivElement>(null);
@@ -369,31 +383,13 @@ const QueryBuilderProjectionColumnEditor = observer(
         ),
       );
     const calendarTypeOptions = Object.values(QUERY_BUILDER_CALENDAR_TYPE).map(
-      (ct) => ({
-        label: (
-          <div className="query-builder__projection__calendar__type__option">
-            <CalendarIcon />
-            <div className="query-builder__projection__calendar__type__option__title">
-              {ct}
-            </div>
-          </div>
-        ),
-        value: ct,
-      }),
+      buildCalendarTypeOption,
     );
     const selectedCalendarTypeOption = aggregateColumnState?.calendarFunction
       ?.calendarType
-      ? {
-          label: (
-            <div className="query-builder__projection__calendar__type__option">
-              <CalendarIcon />
-              <div className="query-builder__projection__calendar__type__option__title">
-                {aggregateColumnState.calendarFunction.calendarType}
-              </div>
-            </div>
-          ),
-          value: aggregateColumnState.calendarFunction.calendarType,
-        }
+      ? buildCalendarTypeOption(
+          aggregateColumnState.calendarFunction.calendarType,
+        )
       : null;
     const onCalendarTypeOptionChange = (option: CalendarTypeOption): void => {
       if (
@@ -661,13 +657,15 @@ const QueryBuilderProjectionColumnEditor = observer(
                   aggregateColumnState &&
                   aggregateCalendarFunctions.length > 0 && (
                     <div
-                      className={
-                        aggregateColumnState.hideCalendarColumnState
-                          ? 'query-builder__projection__column__aggregate__calendar--clock--icon__hidden'
-                          : 'query-builder__projection__column__aggregate__calendar--clock--icon'
-                      }
+                      className={clsx(
+                        'query-builder__projection__column__aggregate__calendar__toggler',
+                        {
+                          'query-builder__projection__column__aggregate__calendar__toggler--active':
+                            !aggregateColumnState.hideCalendarColumnState,
+                        },
+                      )}
                       onClick={toggleHideCalendarColumnState}
-                      title="Click to select calendar function"
+                      title="Toggle calendar aggregation"
                     >
                       <CalendarClockIcon />
                     </div>
@@ -749,21 +747,19 @@ const QueryBuilderProjectionColumnEditor = observer(
                   },
                 )}
               >
-                <div data-testid="test">
-                  <CustomSelectorInput
-                    className="query-builder__projection__calendar__function"
-                    options={calendarFunctionOptions}
-                    onChange={onCalendarFunctionOptionChange}
-                    value={selectedCalendarFunctionOption}
-                    placeholder={'Select Calendar Function'}
-                    isClearable={true}
-                    escapeClearsValue={true}
-                    darkMode={
-                      !applicationStore.layoutService
-                        .TEMPORARY__isLightColorThemeEnabled
-                    }
-                  />
-                </div>
+                <CustomSelectorInput
+                  className="query-builder__projection__calendar__function"
+                  options={calendarFunctionOptions}
+                  onChange={onCalendarFunctionOptionChange}
+                  value={selectedCalendarFunctionOption}
+                  placeholder="Select Calendar Function"
+                  isClearable={true}
+                  escapeClearsValue={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
+                />
                 <div className="query-builder__projection__calendar__value">
                   <BasicValueSpecificationEditor
                     valueSpecification={
@@ -807,7 +803,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                         </div>
                       </div>
                     ) : (
-                      <div className="query-builder__projection__calendar__date__column__dnd__placeholder">
+                      <div className="query-builder__projection__calendar__date__column__placeholder">
                         Drag and drop date column here
                       </div>
                     )}
@@ -818,7 +814,8 @@ const QueryBuilderProjectionColumnEditor = observer(
                   options={calendarTypeOptions}
                   onChange={onCalendarTypeOptionChange}
                   value={selectedCalendarTypeOption ?? calendarTypeOptions[0]}
-                  placeholder={'Select calendar type'}
+                  placeholder="Select calendar type"
+                  disabled={!aggregateColumnState.calendarFunction}
                   darkMode={
                     !applicationStore.layoutService
                       .TEMPORARY__isLightColorThemeEnabled