@finos/legend-query-builder 4.14.18 → 4.14.20

package/src/components/QueryLoader.tsx

@@ -41,11 +41,12 @@ import {
   ThinChevronRightIcon,
   InfoCircleIcon,
 } from '@finos/legend-art';
-import type { LightQuery } from '@finos/legend-graph';
+import type { LightQuery, RawLambda } from '@finos/legend-graph';
 import {
   debounce,
   formatDistanceToNow,
   guaranteeNonNullable,
+  isNonNullable,
   quantifyList,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -59,6 +60,7 @@ import {
 const QueryPreviewViewer = observer(
   (props: { queryLoaderState: QueryLoaderState }) => {
     const { queryLoaderState } = props;
+    const applicationStore = queryLoaderState.applicationStore;
     const close = (): void => {
       queryLoaderState.setShowPreviewViewer(false);
     };
@@ -72,7 +74,12 @@ const QueryPreviewViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal className="editor-modal" darkMode={true}>
+        <Modal
+          className="editor-modal"
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader
             title={
               guaranteeNonNullable(queryLoaderState.queryPreviewContent).name
@@ -89,7 +96,7 @@ const QueryPreviewViewer = observer(
             />
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -104,6 +111,21 @@ export const QueryLoader = observer(
     const searchInputRef = useRef<HTMLInputElement>(null);
     const queryRenameInputRef = useRef<HTMLInputElement>(null);
     const results = queryLoaderState.queries;
+    const curatedTemplateQueries =
+      queryLoaderState.curatedTemplateQuerySepcifications
+        .map((s) =>
+          queryLoaderState.queryBuilderState
+            ? s.getCuratedTemplateQueries(queryLoaderState.queryBuilderState)
+            : [],
+        )
+        .flat();
+    const loadCuratedTemplateQuery =
+      queryLoaderState.curatedTemplateQuerySepcifications
+        // already using an arrow function suggested by @typescript-eslint/unbound-method
+        // eslint-disable-next-line
+        .map((s) => () => s.loadCuratedTemplateQuery)
+        .filter(isNonNullable)[0];
+
     const [isMineOnly, setIsMineOnly] = useState(false);
     const [showQueryNameEditInput, setShowQueryNameEditInput] = useState<
       number | undefined
@@ -167,7 +189,25 @@ export const QueryLoader = observer(
       debouncedLoadQueries.cancel();
       debouncedLoadQueries(queryLoaderState.searchText);
     };
-
+    const toggleCuratedTemplate = (): void => {
+      Array.from(queryLoaderState.extraFilters).map(([key, value]) =>
+        queryLoaderState.extraFilters.set(key, false),
+      );
+      queryLoaderState.setShowCurrentUserQueriesOnly(false);
+      setIsMineOnly(false);
+      queryLoaderState.extraQueryFilterOptionsRelatedToTemplateQuery.forEach(
+        (op) =>
+          queryLoaderState.extraFilters.set(
+            op,
+            !queryLoaderState.isCuratedTemplateToggled,
+          ),
+      );
+      queryLoaderState.showingDefaultQueries =
+        queryLoaderState.isCuratedTemplateToggled;
+      queryLoaderState.setIsCuratedTemplateToggled(
+        !queryLoaderState.isCuratedTemplateToggled,
+      );
+    };
     useEffect(() => {
       flowResult(queryLoaderState.searchQueries('')).catch(
         applicationStore.alertUnhandledError,
@@ -201,10 +241,16 @@ export const QueryLoader = observer(
         }
       };
 
-    const showPreview = (queryId: string): void => {
-      flowResult(queryLoaderState.getPreviewQueryContent(queryId)).catch(
-        applicationStore.alertUnhandledError,
-      );
+    const showPreview = (
+      queryId: string | undefined,
+      template?: {
+        queryName: string;
+        queryContent: RawLambda;
+      },
+    ): void => {
+      flowResult(
+        queryLoaderState.getPreviewQueryContent(queryId, template),
+      ).catch(applicationStore.alertUnhandledError);
       queryLoaderState.setShowPreviewViewer(true);
     };
 
@@ -248,6 +294,12 @@ export const QueryLoader = observer(
                   'query-loader__filter__toggler__btn--toggled': isMineOnly,
                 })}
                 onClick={toggleShowCurrentUserQueriesOnly}
+                disabled={queryLoaderState.isCuratedTemplateToggled}
+                title={
+                  queryLoaderState.isCuratedTemplateToggled
+                    ? 'current fitler is disabled when `Curated Template Query` is on'
+                    : 'click to add filter'
+                }
                 tabIndex={-1}
               >
                 Mine Only
@@ -261,6 +313,12 @@ export const QueryLoader = observer(
                         className={clsx('query-loader__filter__toggler__btn', {
                           'query-loader__filter__toggler__btn--toggled': value,
                         })}
+                        disabled={queryLoaderState.isCuratedTemplateToggled}
+                        title={
+                          queryLoaderState.isCuratedTemplateToggled
+                            ? 'current fitler is disabled when `Curated Template Query` is on'
+                            : 'click to add filter'
+                        }
                         onClick={(): void => toggleExtraFilters(key)}
                         tabIndex={-1}
                       >
@@ -270,6 +328,21 @@ export const QueryLoader = observer(
                   )}
                 </div>
               )}
+              {queryLoaderState.extraQueryFilterOptionsRelatedToTemplateQuery
+                .length > 0 && (
+                <div className="query-loader__filter__extra__filters">
+                  <button
+                    className={clsx('query-loader__filter__toggler__btn', {
+                      'query-loader__filter__toggler__btn--toggled':
+                        queryLoaderState.isCuratedTemplateToggled,
+                    })}
+                    onClick={toggleCuratedTemplate}
+                    tabIndex={-1}
+                  >
+                    Curated Template Query
+                  </button>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -291,7 +364,20 @@ export const QueryLoader = observer(
                     queryLoaderState.generateDefaultQueriesSummaryText?.(
                       results,
                     ) ?? 'Refine your search to get better matches'
-                  ) : results.length >= QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT ? (
+                  ) : !queryLoaderState.isCuratedTemplateToggled ? (
+                    results.length >= QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT ? (
+                      <>
+                        {`Found ${QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT}+ matches`}{' '}
+                        <InfoCircleIcon
+                          title="Some queries are not listed, refine your search to get better matches"
+                          className="query-loader__results__summary__info"
+                        />
+                      </>
+                    ) : (
+                      `Found ${quantifyList(results, 'match', 'matches')}`
+                    )
+                  ) : curatedTemplateQueries.length >=
+                    QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT ? (
                     <>
                       {`Found ${QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT}+ matches`}{' '}
                       <InfoCircleIcon
@@ -300,139 +386,211 @@ export const QueryLoader = observer(
                       />
                     </>
                   ) : (
-                    `Found ${quantifyList(results, 'match', 'matches')}`
+                    `Found ${quantifyList(
+                      curatedTemplateQueries,
+                      'match',
+                      'matches',
+                    )}`
                   )}
                 </div>
-                {results
-                  .slice(0, QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT)
-                  .map((query, idx) => (
-                    <div
-                      className="query-loader__result"
-                      title={`Click to ${loadActionLabel}...`}
-                      key={query.id}
-                      onClick={() => queryLoaderState.loadQuery(query)}
-                    >
-                      <div className="query-loader__result__content">
-                        {showQueryNameEditInput === idx ? (
-                          <div className="query-loader__result__title__editor">
-                            <input
-                              className="query-loader__result__title__editor__input input--dark"
-                              spellCheck={false}
-                              ref={queryRenameInputRef}
-                              value={queryNameInputValue}
-                              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()}
-                            />
+                {!queryLoaderState.isCuratedTemplateToggled &&
+                  results
+                    .slice(0, QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT)
+                    .map((query, idx) => (
+                      <div
+                        className="query-loader__result"
+                        title={`Click to ${loadActionLabel}...`}
+                        key={query.id}
+                        onClick={() => queryLoaderState.loadQuery(query)}
+                      >
+                        <div className="query-loader__result__content">
+                          {showQueryNameEditInput === idx ? (
+                            <div className="query-loader__result__title__editor">
+                              <input
+                                className="query-loader__result__title__editor__input input--dark"
+                                spellCheck={false}
+                                ref={queryRenameInputRef}
+                                value={queryNameInputValue}
+                                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>
+                          ) : (
+                            <div
+                              className="query-loader__result__title"
+                              title={query.name}
+                            >
+                              {query.name}
+                            </div>
+                          )}
+                          <div className="query-loader__result__description">
+                            <div className="query-loader__result__description__date__icon">
+                              <LastModifiedIcon />
+                            </div>
+                            <div className="query-loader__result__description__date">
+                              {query.lastUpdatedAt
+                                ? formatDistanceToNow(
+                                    new Date(query.lastUpdatedAt),
+                                    {
+                                      includeSeconds: true,
+                                      addSuffix: true,
+                                    },
+                                  )
+                                : '(unknown)'}
+                            </div>
+                            <div
+                              className={clsx(
+                                'query-loader__result__description__author__icon',
+                                {
+                                  'query-loader__result__description__author__icon--owner':
+                                    query.isCurrentUserQuery,
+                                },
+                              )}
+                            >
+                              <UserIcon />
+                            </div>
+                            <div className="query-loader__result__description__author__name">
+                              {query.isCurrentUserQuery ? (
+                                <div
+                                  title={query.owner}
+                                  className="query-loader__result__description__owner"
+                                >
+                                  Me
+                                </div>
+                              ) : (
+                                query.owner
+                              )}
+                            </div>
                           </div>
-                        ) : (
+                        </div>
+                        <DropdownMenu
+                          className="query-loader__result__actions-menu"
+                          title="More Actions..."
+                          content={
+                            <MenuContent>
+                              <MenuContentItem
+                                onClick={(): void => showPreview(query.id)}
+                              >
+                                Show Query Preview
+                              </MenuContentItem>
+                              {!queryLoaderState.isReadOnly && (
+                                <MenuContentItem
+                                  disabled={!query.isCurrentUserQuery}
+                                  onClick={deleteQuery(query)}
+                                >
+                                  Delete
+                                </MenuContentItem>
+                              )}
+                              {!queryLoaderState.isReadOnly && (
+                                <MenuContentItem
+                                  disabled={!query.isCurrentUserQuery}
+                                  onClick={showEditQueryNameInput(
+                                    query.name,
+                                    idx,
+                                  )}
+                                >
+                                  Rename
+                                </MenuContentItem>
+                              )}
+                            </MenuContent>
+                          }
+                          menuProps={{
+                            anchorOrigin: {
+                              vertical: 'bottom',
+                              horizontal: 'left',
+                            },
+                            transformOrigin: {
+                              vertical: 'top',
+                              horizontal: 'left',
+                            },
+                            elevation: 7,
+                          }}
+                        >
+                          <MoreVerticalIcon />
+                        </DropdownMenu>
+                        <div className="query-loader__result__arrow">
+                          <ThinChevronRightIcon />
+                        </div>
+                      </div>
+                    ))}
+                {queryLoaderState.queryBuilderState &&
+                  queryLoaderState.isCuratedTemplateToggled &&
+                  loadCuratedTemplateQuery &&
+                  curatedTemplateQueries
+                    .slice(0, QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT)
+                    .map((templateQuery, idx) => (
+                      <div
+                        className="query-loader__result"
+                        title={`Click to ${loadActionLabel}...`}
+                        key={templateQuery.title}
+                        onClick={() => {
+                          loadCuratedTemplateQuery()(
+                            templateQuery,
+                            guaranteeNonNullable(
+                              queryLoaderState.queryBuilderState,
+                            ),
+                          );
+                          queryLoaderState.setQueryLoaderDialogOpen(false);
+                        }}
+                      >
+                        <div className="query-loader__result__content">
                           <div
                             className="query-loader__result__title"
-                            title={query.name}
+                            title={templateQuery.title}
                           >
-                            {query.name}
-                          </div>
-                        )}
-                        <div className="query-loader__result__description">
-                          <div className="query-loader__result__description__date__icon">
-                            <LastModifiedIcon />
-                          </div>
-                          <div className="query-loader__result__description__date">
-                            {query.lastUpdatedAt
-                              ? formatDistanceToNow(
-                                  new Date(query.lastUpdatedAt),
-                                  {
-                                    includeSeconds: true,
-                                    addSuffix: true,
-                                  },
-                                )
-                              : '(unknown)'}
+                            {templateQuery.title}
                           </div>
-                          <div
-                            className={clsx(
-                              'query-loader__result__description__author__icon',
-                              {
-                                'query-loader__result__description__author__icon--owner':
-                                  query.isCurrentUserQuery,
-                              },
-                            )}
-                          >
-                            <UserIcon />
-                          </div>
-                          <div className="query-loader__result__description__author__name">
-                            {query.isCurrentUserQuery ? (
-                              <div
-                                title={query.owner}
-                                className="query-loader__result__description__owner"
-                              >
-                                Me
-                              </div>
-                            ) : (
-                              query.owner
-                            )}
+                          <div className="query-loader__result__description">
+                            {templateQuery.description}
                           </div>
                         </div>
-                      </div>
-                      <DropdownMenu
-                        className="query-loader__result__actions-menu"
-                        title="More Actions..."
-                        content={
-                          <MenuContent>
-                            <MenuContentItem
-                              onClick={(): void => showPreview(query.id)}
-                            >
-                              Show Query Preview
-                            </MenuContentItem>
-                            {!queryLoaderState.isReadOnly && (
-                              <MenuContentItem
-                                disabled={!query.isCurrentUserQuery}
-                                onClick={deleteQuery(query)}
-                              >
-                                Delete
-                              </MenuContentItem>
-                            )}
-                            {!queryLoaderState.isReadOnly && (
+                        <DropdownMenu
+                          className="query-loader__result__actions-menu"
+                          title="More Actions..."
+                          content={
+                            <MenuContent>
                               <MenuContentItem
-                                disabled={!query.isCurrentUserQuery}
-                                onClick={showEditQueryNameInput(
-                                  query.name,
-                                  idx,
-                                )}
+                                onClick={(): void =>
+                                  showPreview(undefined, {
+                                    queryContent: templateQuery.query,
+                                    queryName: templateQuery.title,
+                                  })
+                                }
                               >
-                                Rename
+                                Show Query Preview
                               </MenuContentItem>
-                            )}
-                          </MenuContent>
-                        }
-                        menuProps={{
-                          anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'left',
-                          },
-                          transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'left',
-                          },
-                          elevation: 7,
-                        }}
-                      >
-                        <MoreVerticalIcon />
-                      </DropdownMenu>
-                      <div className="query-loader__result__arrow">
-                        <ThinChevronRightIcon />
+                            </MenuContent>
+                          }
+                          menuProps={{
+                            anchorOrigin: {
+                              vertical: 'bottom',
+                              horizontal: 'left',
+                            },
+                            transformOrigin: {
+                              vertical: 'top',
+                              horizontal: 'left',
+                            },
+                            elevation: 7,
+                          }}
+                        >
+                          <MoreVerticalIcon />
+                        </DropdownMenu>
+                        <div className="query-loader__result__arrow">
+                          <ThinChevronRightIcon />
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    ))}
               </>
             )}
             {!queryLoaderState.searchQueriesState.hasCompleted && (
@@ -456,6 +614,7 @@ export const QueryLoaderDialog = observer(
     loadActionLabel?: string | undefined;
   }) => {
     const { queryLoaderState, title, loadActionLabel } = props;
+    const applicationStore = queryLoaderState.applicationStore;
 
     const close = (): void => {
       queryLoaderState.setQueryLoaderDialogOpen(false);
@@ -475,7 +634,9 @@ export const QueryLoaderDialog = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="modal query-loader__dialog__body__content"
         >
           <div className="modal query-loader__dialog__header">

package/src/components/QueryUsageViewer.tsx

@@ -56,7 +56,12 @@ export const QueryUsageViewer = observer(
         open={resultState.isQueryUsageViewerOpened}
         onClose={() => resultState.setIsQueryUsageViewerOpened(false)}
       >
-        <Modal className="query-builder__usage-viewer__modal" darkMode={true}>
+        <Modal
+          className="query-builder__usage-viewer__modal"
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader title="Query Usage" />
           <ModalBody className="query-builder__usage-viewer__body">
             <>
@@ -102,6 +107,7 @@ export const QueryUsageViewer = observer(
             <ModalFooterButton
               onClick={() => resultState.setIsQueryUsageViewerOpened(false)}
               text="Close"
+              type="secondary"
             />
           </ModalFooter>
         </Modal>

package/src/components/__test-utils__/QueryBuilderComponentTestUtils.tsx

@@ -52,15 +52,19 @@ import {
 import { STYLE_PREFIX, STYLE_PREFIX__DARK } from '@finos/legend-art';
 import { expect } from '@jest/globals';
 
+const getSelectorContainerClassName = (lightMode?: boolean): string =>
+  '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__value-container`;
+
+const getSelectorInputClassName = (lightMode?: boolean): string =>
+  '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__single-value`;
+
 export const selectFromCustomSelectorInput = (
   selectorContainer: HTMLElement,
   optionText: string,
   lightMode?: boolean,
 ): void => {
-  const selectorContainerClassName =
-    '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__value-container`;
-  const selectorInputValue =
-    '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__single-value`;
+  const selectorContainerClassName = getSelectorContainerClassName(lightMode);
+  const selectorInputValue = getSelectorInputClassName(lightMode);
 
   let foundOptionText = false;
   const selector = selectorContainer.querySelector(
@@ -106,6 +110,38 @@ export const selectFromCustomSelectorInput = (
   }
 };
 
+export const selectFirstOptionFromCustomSelectorInput = (
+  selectorContainer: HTMLElement,
+  lightMode?: boolean,
+): void => {
+  const selectorContainerClassName = getSelectorContainerClassName(lightMode);
+  const selectorInputValue = getSelectorInputClassName(lightMode);
+
+  const selector = selectorContainer.querySelector(
+    selectorContainerClassName,
+  ) as HTMLSelectElement;
+
+  fireEvent.keyDown(selector, { key: 'ArrowDown' });
+  fireEvent.keyDown(selector, { key: 'Enter' });
+  expect(selector.querySelector(selectorInputValue)).not.toBeNull();
+};
+
+export const getCustomSelectorInputValue = (
+  selectorContainer: HTMLElement,
+  lightMode?: boolean,
+): string | null => {
+  const selectorContainerClassName = getSelectorContainerClassName(lightMode);
+  const selectorInputValue = getSelectorInputClassName(lightMode);
+
+  const selector = guaranteeNonNullable(
+    selectorContainer.querySelector(selectorContainerClassName),
+  ) as HTMLSelectElement;
+  const selectorInput = guaranteeNonNullable(
+    selector.querySelector(selectorInputValue),
+  );
+  return selectorInput.textContent;
+};
+
 export const dragAndDrop = async (
   source: HTMLElement,
   drop: HTMLElement,

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

@@ -217,9 +217,17 @@ const AccessStatusCellRenderer = observer(
 const DataAccessOverviewGrid = observer(
   (props: { dataAccessState: DataAccessState }) => {
     const { dataAccessState } = props;
+    const darkMode =
+      !dataAccessState.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
 
     return (
-      <div className="data-access-overview__grid ag-theme-balham-dark">
+      <div
+        className={clsx('data-access-overview__grid', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
+      >
         <DataGrid
           rowData={dataAccessState.datasets}
           gridOptions={{