@finos/legend-application-query 13.7.193 → 13.7.196

package/src/components/QueryEditor.tsx

@@ -33,7 +33,6 @@ import {
   ModalTitle,
   ModalFooterButton,
   ExclamationTriangleIcon,
-  PanelListItem,
   clsx,
   ModalHeaderActions,
   TimesIcon,
@@ -57,7 +56,6 @@ import {
 } from '../__lib__/LegendQueryNavigation.js';
 import { ExistingQueryEditorStore } from '../stores/QueryEditorStore.js';
 import { LegendQueryTelemetryHelper } from '../__lib__/LegendQueryTelemetryHelper.js';
-import { DataSpaceQuerySetupState } from './../stores/data-space/DataSpaceQuerySetupState.js';
 import {
   LEGEND_APPLICATION_COLOR_THEME,
   ReleaseLogManager,
@@ -97,6 +95,7 @@ import {
 import { LegendQueryInfo } from './LegendQueryAppInfo.js';
 import { QueryEditorDataspaceInfoModal } from './data-space/DataSpaceInfo.js';
 import { DataSpaceQueryBuilderState } from '@finos/legend-extension-dsl-data-space/application';
+import { LegendQueryBareQueryBuilderState } from '../stores/data-space/LegendQueryBareQueryBuilderState.js';
 
 const CreateQueryDialog = observer(() => {
   const editorStore = useQueryEditorStore();
@@ -297,35 +296,27 @@ const SaveQueryDialog = observer(
   },
 );
 
-export const QueryEditorExistingQueryHeader = observer(
-  (props: {
-    queryBuilderState: QueryBuilderState;
-    existingEditorStore: ExistingQueryEditorStore;
-  }) => {
+const RenameQueryDialog = observer(
+  (props: { existingEditorStore: ExistingQueryEditorStore }) => {
     const { existingEditorStore } = props;
     const updateState = existingEditorStore.updateState;
-    const isRenaming = updateState.queryRenamer;
     const applicationStore = existingEditorStore.applicationStore;
-    const renameRef = useRef<HTMLInputElement>(null);
+    const handleClose = (): void =>
+      updateState.setIsQueryRenameDialogOpen(false);
+
     const [queryRenameName, setQueryRenameName] = useState<string>(
       existingEditorStore.lightQuery.name,
     );
+    const [queryDescription, setQueryDescription] = useState<string>(
+      existingEditorStore.lightQuery.description ?? '',
+    );
 
-    const enableRename = (): void => {
-      setQueryRenameName(existingEditorStore.lightQuery.name);
-      existingEditorStore.updateState.setQueryRenamer(true);
-    };
-    const renameQuery = (val: string): void => {
-      if (queryRenameName !== existingEditorStore.lightQuery.name) {
-        flowResult(updateState.updateQuery(val, undefined)).catch(
-          applicationStore.alertUnhandledError,
-        );
-      }
-    };
+    const nameInputRef = useRef<HTMLInputElement>(null);
 
-    const changeQueryName: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => setQueryRenameName(event.target.value);
+    const isEmptyName = !queryRenameName;
+    const isExistingQueryName =
+      existingEditorStore.existingQueryName &&
+      queryRenameName !== existingEditorStore.lightQuery.name;
 
     const debouncedLoadQueries = useMemo(
       () =>
@@ -337,106 +328,157 @@ export const QueryEditorExistingQueryHeader = observer(
       [applicationStore.alertUnhandledError, existingEditorStore],
     );
 
-    useEffect(() => {
-      if (isRenaming) {
-        existingEditorStore.setExistingQueryName(undefined);
+    const changeName: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      setQueryRenameName(event.target.value);
+    };
+
+    const changeDescription: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      setQueryDescription(event.target.value);
+    };
+
+    const renameQuery = (): void => {
+      const nameChanged =
+        queryRenameName !== existingEditorStore.lightQuery.name;
+      const descriptionChanged =
+        queryDescription !== (existingEditorStore.lightQuery.description ?? '');
+      if (nameChanged || descriptionChanged) {
+        flowResult(
+          updateState.updateQuery(
+            nameChanged ? queryRenameName : undefined,
+            undefined,
+            descriptionChanged ? queryDescription : undefined,
+          ),
+        ).catch(applicationStore.alertUnhandledError);
       }
+      handleClose();
+    };
+
+    useEffect(() => {
+      nameInputRef.current?.focus();
+    }, []);
+
+    useEffect(() => {
+      existingEditorStore.setExistingQueryName(undefined);
       const searchText = queryRenameName;
       debouncedLoadQueries.cancel();
       debouncedLoadQueries(searchText);
-    }, [
-      queryRenameName,
-      debouncedLoadQueries,
-      isRenaming,
-      existingEditorStore,
-    ]);
-
-    const isExistingQueryName =
-      existingEditorStore.existingQueryName &&
-      queryRenameName !== existingEditorStore.lightQuery.name;
+    }, [queryRenameName, debouncedLoadQueries, existingEditorStore]);
 
     return (
-      <>
-        {isRenaming ? (
-          <div className="query-editor__header__content__main query-editor__header__content__title">
-            <PanelListItem>
+      <Dialog
+        open={updateState.isQueryRenameDialogOpen}
+        onClose={handleClose}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="query-export"
+        >
+          <ModalHeader title="Rename Query" />
+          <ModalBody>
+            <PanelLoadingIndicator
+              isLoading={updateState.updateQueryState.isInProgress}
+            />
+            <div className="input-section">
+              <div className="input-label">Update Query Name</div>
               <div className="input--with-validation">
                 <input
-                  ref={renameRef}
-                  className={clsx(
-                    'input input--dark query-editor__rename__input',
-                    {
-                      'input--caution': isExistingQueryName,
-                    },
-                  )}
-                  onChange={changeQueryName}
-                  onKeyDown={(event) => {
-                    if (
-                      event.code === 'Enter' ||
-                      event.code === 'NumpadEnter'
-                    ) {
-                      event.stopPropagation();
-                      updateState.setQueryRenamer(false);
-                      existingEditorStore.setExistingQueryName(undefined);
-                      renameQuery(queryRenameName);
-                    } else if (event.code === 'Escape') {
-                      event.stopPropagation();
-                      updateState.setQueryRenamer(false);
-                      existingEditorStore.setExistingQueryName(undefined);
-                    }
-                  }}
+                  ref={nameInputRef}
+                  className={clsx('input input--dark', {
+                    'input--caution': isExistingQueryName,
+                  })}
+                  spellCheck={false}
                   value={queryRenameName}
+                  onChange={changeName}
+                  title="Query Name"
+                  placeholder='(e.g. "MyQuery")'
                 />
                 {isExistingQueryName && (
                   <div
                     className="input--with-validation__caution"
-                    title={`Query with name '${queryRenameName}' already exists`}
+                    title={`Query named '${queryRenameName}' already exists`}
                   >
                     <ExclamationTriangleIcon className="input--with-validation__caution__indicator" />
                   </div>
                 )}
               </div>
-              <div className="query-editor__header__content__title__actions">
-                <button
-                  className="query-editor__header__content__title__actions__action"
-                  tabIndex={-1}
-                  onClick={() => {
-                    updateState.setQueryRenamer(false);
-                    existingEditorStore.setExistingQueryName(undefined);
-                    renameQuery(queryRenameName);
-                  }}
-                >
-                  <CheckIcon />
-                </button>
-                <button
-                  className="query-editor__header__content__title__actions__action"
-                  tabIndex={-1}
-                  onClick={() => {
-                    updateState.setQueryRenamer(false);
-                    existingEditorStore.setExistingQueryName(undefined);
-                  }}
-                >
-                  <TimesIcon />
-                </button>
+            </div>
+            <div className="input-section" style={{ marginTop: '1rem' }}>
+              <div className="input-label">Update Query Description</div>
+              <div className="input--with-validation">
+                <input
+                  className="input input--dark"
+                  spellCheck={true}
+                  value={queryDescription}
+                  onChange={changeDescription}
+                  title="Query Description"
+                  placeholder="Add details about what this query retrieves"
+                />
               </div>
-            </PanelListItem>
-          </div>
-        ) : (
-          <div
-            onDoubleClick={enableRename}
-            className="query-editor__header__content__main query-editor__header__content__title"
-            title="Double-click to rename query"
-          >
-            <div className="query-editor__header__content__title__text">
-              {existingEditorStore.lightQuery.name}
             </div>
-            <button
-              className="query-editor__header__conten__title__btn panel__content__form__section__list__item__edit-btn"
-              onClick={enableRename}
-            >
-              <PencilIcon />
-            </button>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              text="Update Query"
+              title="Update query name and description"
+              disabled={
+                existingEditorStore.isPerformingBlockingAction ||
+                Boolean(isExistingQueryName) ||
+                isEmptyName
+              }
+              onClick={renameQuery}
+            />
+            <ModalFooterButton
+              text="Cancel"
+              onClick={handleClose}
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+export const QueryEditorExistingQueryHeader = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    existingEditorStore: ExistingQueryEditorStore;
+  }) => {
+    const { existingEditorStore } = props;
+    const updateState = existingEditorStore.updateState;
+
+    const enableRename = (): void => {
+      existingEditorStore.updateState.setIsQueryRenameDialogOpen(true);
+    };
+
+    return (
+      <>
+        <div
+          onDoubleClick={enableRename}
+          className="query-editor__header__content__main query-editor__header__content__title"
+          title="Double-click to rename query"
+        >
+          <div className="query-editor__header__content__title__text">
+            {existingEditorStore.lightQuery.name}
           </div>
+          <button
+            className="query-editor__header__conten__title__btn panel__content__form__section__list__item__edit-btn"
+            onClick={enableRename}
+          >
+            <PencilIcon />
+          </button>
+        </div>
+        {updateState.isQueryRenameDialogOpen && (
+          <RenameQueryDialog existingEditorStore={existingEditorStore} />
         )}
         {existingEditorStore.updateState.saveModal && (
           <SaveQueryDialog existingEditorStore={existingEditorStore} />
@@ -774,7 +816,7 @@ export const QueryEditor = observer(() => {
             (editorStore.queryBuilderState instanceof
               DataSpaceQueryBuilderState ||
               editorStore.queryBuilderState instanceof
-                DataSpaceQuerySetupState) &&
+                LegendQueryBareQueryBuilderState) &&
             editorStore.queryBuilderState.canBuildQuery && (
               <button
                 title="Open Query Chat."

package/src/components/data-space/DataSpaceQueryCreator.tsx

@@ -24,7 +24,7 @@ import {
 } from '../LegendQueryFrameworkProvider.js';
 import {
   DataSpaceQueryCreatorStore,
-  type QueryableDataSpace,
+  type QueryableDataProduct,
 } from '../../stores/data-space/DataSpaceQueryCreatorStore.js';
 import { QueryEditorStoreContext } from '../QueryEditorStoreProvider.js';
 import {
@@ -35,6 +35,7 @@ import {
 import { QueryEditor } from '../QueryEditor.js';
 import { LEGEND_QUERY_ROUTE_PATTERN } from '../../__lib__/LegendQueryNavigation.js';
 import { useEffect } from 'react';
+import { DATA_SPACE_ELEMENT_CLASSIFIER_PATH } from '@finos/legend-extension-dsl-data-space/graph';
 
 const DataSpaceQueryCreatorStoreProvider: React.FC<{
   children: React.ReactNode;
@@ -51,7 +52,7 @@ const DataSpaceQueryCreatorStoreProvider: React.FC<{
   runtimePath,
   classPath,
 }) => {
-  let queryableDataSpace: QueryableDataSpace | undefined = undefined;
+  let queryableDataSpace: QueryableDataProduct | undefined = undefined;
   if (gav && dataSpacePath && executionContext) {
     const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
     queryableDataSpace = {
@@ -62,6 +63,7 @@ const DataSpaceQueryCreatorStoreProvider: React.FC<{
       executionContext,
       runtimePath,
       classPath,
+      classifier: DATA_SPACE_ELEMENT_CLASSIFIER_PATH,
     };
   }
   const applicationStore = useLegendQueryApplicationStore();

package/src/components/data-space/DataSpaceQuerySetup.tsx

@@ -17,7 +17,6 @@
 import { observer } from 'mobx-react-lite';
 import { useApplicationStore } from '@finos/legend-application';
 import { useEffect, useRef } from 'react';
-import { flowResult } from 'mobx';
 import { QueryBuilderClassSelector } from '@finos/legend-query-builder';
 import {
   CustomSelectorInput,
@@ -26,13 +25,44 @@ import {
   compareLabelFn,
   type SelectComponent,
 } from '@finos/legend-art';
-import { type DataSpaceQuerySetupState } from '../../stores/data-space/DataSpaceQuerySetupState.js';
 import {
   DataSpaceAdvancedSearchModal,
-  buildDataSpaceOption,
   formatDataSpaceOptionLabel,
   type DataSpaceOption,
 } from '@finos/legend-extension-dsl-data-space/application-query';
+import { ResolvedDataSpaceEntityWithOrigin } from '@finos/legend-extension-dsl-data-space/application';
+import type { LegendQueryBareQueryBuilderState } from '../../stores/data-space/LegendQueryBareQueryBuilderState.js';
+import type {
+  DataProductOption,
+  DataProductWithLegacyOption,
+} from '../../stores/data-space/DataSpaceQueryCreatorStore.js';
+import { flowResult } from 'mobx';
+import { DepotEntityWithOrigin } from '@finos/legend-storage';
+
+// Custom format function to handle both DataSpace and DataProduct options
+const formatDataSpaceOrProductOptionLabel = (
+  option: DataProductWithLegacyOption,
+): React.ReactNode => {
+  // If it's a DataSpace (ResolvedDataSpaceEntityWithOrigin), use the standard formatter
+  if (option.value instanceof ResolvedDataSpaceEntityWithOrigin) {
+    return formatDataSpaceOptionLabel(option as DataSpaceOption);
+  }
+  // For DataProduct (DepotEntityWithOrigin), render a simpler label
+  return (
+    <div
+      className="query-builder__setup__data-space__option"
+      title={`${option.label} - ${option.value.path} - ${
+        option.value.origin
+          ? `${option.value.origin.groupId}:${option.value.origin.artifactId}:${option.value.origin.versionId}`
+          : ''
+      }`}
+    >
+      <div className="query-builder__setup__data-space__option__label">
+        {option.label}
+      </div>
+    </div>
+  );
+};
 
 /**
  * This setup panel supports cascading in order: Data-space -> Execution context (-> Runtime) -> Class
@@ -41,34 +71,42 @@ import {
  * - For runtime selector: the list of compatible runtimes with the selected execution context mapping
  * - For class selector: the list of compatible class with the selected execution context mapping
  *
- * See details on propagation/cascading in {@link DataSpaceQuerySetupState}
+ * See details on propagation/cascading in {@link LegendQueryBareQueryBuilderState}
  */
-const DataSpaceQuerySetupSetupPanelContent = observer(
-  (props: { queryBuilderState: DataSpaceQuerySetupState }) => {
+const DataProductQuerySetupSetupPanelContent = observer(
+  (props: { queryBuilderState: LegendQueryBareQueryBuilderState }) => {
     const { queryBuilderState } = props;
     const applicationStore = useApplicationStore();
     const dataSpaceSearchRef = useRef<SelectComponent>(null);
-    // data product
-    const dataSpaceOptions = queryBuilderState.dataSpaces
-      .map(buildDataSpaceOption)
-      .sort(compareLabelFn);
+    // Combine data spaces and data products
+    const dataProductOptions =
+      queryBuilderState.productSelectorState.dataProductOptions.sort(
+        compareLabelFn,
+      );
     const selectedDataSpaceOption = null;
-    const onDataSpaceOptionChange = (option: DataSpaceOption): void => {
+    const onDataSpaceOptionChange = (
+      option: DataSpaceOption | DataProductOption | null,
+    ): void => {
       queryBuilderState.queryChatState?.abort();
-      queryBuilderState.onDataSpaceChange(option.value);
+      const value = option?.value;
+      if (value instanceof ResolvedDataSpaceEntityWithOrigin) {
+        queryBuilderState.changeHandlers.onDataSpaceChange(value);
+      } else if (value instanceof DepotEntityWithOrigin) {
+        queryBuilderState.changeHandlers.onDataProductChange(value);
+      }
     };
 
     const openDataSpaceAdvancedSearch = (): void =>
       queryBuilderState.showAdvancedSearchPanel();
 
+    useEffect(() => dataSpaceSearchRef.current?.focus());
+
     useEffect(() => {
-      flowResult(queryBuilderState.initializeDataSpaceSetup()).catch(
+      flowResult(queryBuilderState.productSelectorState.loadProducts()).catch(
         applicationStore.alertUnhandledError,
       );
     }, [queryBuilderState, applicationStore]);
 
-    useEffect(() => dataSpaceSearchRef.current?.focus());
-
     return (
       <div className="query-builder__setup__config-group">
         <PanelHeader title="properties" />
@@ -85,8 +123,11 @@ const DataSpaceQuerySetupSetupPanelContent = observer(
               inputId="query-builder__setup__data-space-selector"
               inputRef={dataSpaceSearchRef}
               className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
-              options={dataSpaceOptions}
-              isLoading={queryBuilderState.loadDataSpacesState.isInProgress}
+              options={dataProductOptions}
+              isLoading={
+                queryBuilderState.productSelectorState.loadProductsState
+                  .isInProgress
+              }
               onChange={onDataSpaceOptionChange}
               value={selectedDataSpaceOption}
               placeholder="Search for data product..."
@@ -95,7 +136,7 @@ const DataSpaceQuerySetupSetupPanelContent = observer(
                 !applicationStore.layoutService
                   .TEMPORARY__isLightColorThemeEnabled
               }
-              formatOptionLabel={formatDataSpaceOptionLabel}
+              formatOptionLabel={formatDataSpaceOrProductOptionLabel}
             />
             <button
               tabIndex={-1}
@@ -126,7 +167,9 @@ const DataSpaceQuerySetupSetupPanelContent = observer(
 );
 
 export const renderDataSpaceQuerySetupSetupPanelContent = (
-  queryBuilderState: DataSpaceQuerySetupState,
+  queryBuilderState: LegendQueryBareQueryBuilderState,
 ): React.ReactNode => (
-  <DataSpaceQuerySetupSetupPanelContent queryBuilderState={queryBuilderState} />
+  <DataProductQuerySetupSetupPanelContent
+    queryBuilderState={queryBuilderState}
+  />
 );

package/src/index.ts

@@ -45,7 +45,7 @@ export {
   createViewProjectHandler,
   createViewSDLCProjectHandler,
 } from './stores/data-space/DataSpaceQueryBuilderHelper.js';
-export { DataSpaceQuerySetupState } from './stores/data-space/DataSpaceQuerySetupState.js';
+export { LegendQueryBareQueryBuilderState } from './stores/data-space/LegendQueryBareQueryBuilderState.js';
 
 // components
 export {