@finos/legend-extension-dsl-data-space 10.1.96 → 10.2.1

package/src/components/query/DSL_DataSpace_LegendQueryApplicationPlugin.tsx

@@ -16,15 +16,17 @@
 
 import packageJson from '../../../package.json' assert { type: 'json' };
 import {
-  type QuerySetupActionConfiguration,
   type ExistingQueryEditorStateBuilder,
-  type ExistingQueryEditorStore,
+  type QueryEditorStore,
+  type QuerySetupActionConfiguration,
+  ExistingQueryEditorStore,
   LegendQueryApplicationPlugin,
   LEGEND_QUERY_APP_EVENT,
   createViewProjectHandler,
   createViewSDLCProjectHandler,
+  type QueryEditorActionConfiguration,
 } from '@finos/legend-application-query';
-import { SquareIcon } from '@finos/legend-art';
+import { ArrowCircleUpIcon, SquareIcon } from '@finos/legend-art';
 import {
   ActionAlertActionType,
   ActionAlertType,
@@ -34,6 +36,7 @@ import {
   DATA_SPACE_QUERY_ROUTE_PATTERN,
   generateDataSpaceQueryCreatorRoute,
   generateDataSpaceQuerySetupRoute,
+  generateDataSpaceTemplateQueryPromotionRoute,
 } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
 import { DataSpaceQueryCreator } from './DataSpaceQueryCreator.js';
 import {
@@ -54,6 +57,7 @@ import type { DataSpaceInfo } from '../../stores/query/DataSpaceInfo.js';
 import { getOwnDataSpace } from '../../graph-manager/DSL_DataSpace_GraphManagerHelper.js';
 import {
   assertErrorThrown,
+  buildUrl,
   guaranteeNonNullable,
   LogEvent,
 } from '@finos/legend-shared';
@@ -71,6 +75,8 @@ import type {
   DataSpaceExecutionContext,
 } from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
 import { DataSpaceTemplateQueryCreator } from './DataSpaceTemplateQueryCreator.js';
+import { DataSpaceTemplateQueryCreatorStore } from '../../stores/query/DataSpaceTemplateQueryCreatorStore.js';
+import { parseProjectIdentifier } from '@finos/legend-storage';
 
 const resolveExecutionContext = (
   dataSpace: DataSpace,
@@ -305,4 +311,112 @@ export class DSL_DataSpace_LegendQueryApplicationPlugin extends LegendQueryAppli
       },
     ];
   }
+
+  override getExtraQueryHeaders(): ((
+    editorStore: QueryEditorStore,
+  ) => React.ReactNode | undefined)[] {
+    return [
+      (editorStore: QueryEditorStore): React.ReactNode | undefined => {
+        if (editorStore instanceof DataSpaceTemplateQueryCreatorStore) {
+          return (
+            <div className="query-editor__dataspace__header">
+              <div className="query-editor__header__content__main query-editor__header__content__title__text query-editor__dataspace__header__title__text">
+                {editorStore.templateQueryTitle}
+              </div>
+              <div className="query-editor__dataspace__header__title__tag">
+                template
+              </div>
+            </div>
+          );
+        }
+        return undefined;
+      },
+    ];
+  }
+
+  override getExtraQueryEditorActionConfigurations(): QueryEditorActionConfiguration[] {
+    return [
+      {
+        key: 'promote-as-curated-template-query',
+        renderer: (editorStore, queryBuilderState) => {
+          const proceedCuratedTemplateQueryPromotion =
+            async (): Promise<void> => {
+              if (
+                !(
+                  editorStore instanceof ExistingQueryEditorStore &&
+                  queryBuilderState instanceof DataSpaceQueryBuilderState
+                )
+              ) {
+                return;
+              }
+              // fetch project data
+              const project = StoreProjectData.serialization.fromJson(
+                await editorStore.depotServerClient.getProject(
+                  editorStore.lightQuery.groupId,
+                  editorStore.lightQuery.artifactId,
+                ),
+              );
+
+              // find the matching SDLC instance
+              const projectIDPrefix = parseProjectIdentifier(
+                project.projectId,
+              ).prefix;
+              const matchingSDLCEntry =
+                editorStore.applicationStore.config.studioInstances.find(
+                  (entry) => entry.sdlcProjectIDPrefix === projectIDPrefix,
+                );
+              if (matchingSDLCEntry) {
+                editorStore.applicationStore.navigationService.navigator.visitAddress(
+                  buildUrl([
+                    editorStore.applicationStore.config.studioApplicationUrl,
+                    generateDataSpaceTemplateQueryPromotionRoute(
+                      editorStore.lightQuery.groupId,
+                      editorStore.lightQuery.artifactId,
+                      editorStore.lightQuery.versionId,
+                      queryBuilderState.dataSpace.path,
+                      editorStore.lightQuery.id,
+                    ),
+                  ]),
+                );
+              } else {
+                editorStore.applicationStore.notificationService.notifyWarning(
+                  `Can't find the corresponding SDLC instance to productionize the query`,
+                );
+              }
+            };
+
+          const proceed = (): void => {
+            queryBuilderState.changeDetectionState.alertUnsavedChanges(() => {
+              proceedCuratedTemplateQueryPromotion().catch(
+                editorStore.applicationStore.alertUnhandledError,
+              );
+            });
+          };
+
+          return (
+            <>
+              {editorStore instanceof ExistingQueryEditorStore &&
+                queryBuilderState instanceof DataSpaceQueryBuilderState && (
+                  <button
+                    className="query-editor__header__action btn--dark"
+                    tabIndex={-1}
+                    onClick={proceed}
+                    title={
+                      !(editorStore instanceof ExistingQueryEditorStore)
+                        ? 'Please save your query first before promoting'
+                        : 'Promote Curated Template query...'
+                    }
+                  >
+                    <ArrowCircleUpIcon className="query-editor__header__action__icon--productionize" />
+                    <div className="query-editor__header__action__label">
+                      Promote as Template Query
+                    </div>
+                  </button>
+                )}
+            </>
+          );
+        },
+      },
+    ];
+  }
 }

package/src/components/query/DataSpaceAdvancedSearchModal.tsx

@@ -33,10 +33,10 @@ import {
   ModalHeaderActions,
 } from '@finos/legend-art';
 import { generateGAVCoordinates } from '@finos/legend-storage';
-import { debounce, guaranteeNonNullable } from '@finos/legend-shared';
+import { guaranteeNonNullable } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { DataSpaceViewer } from '../DataSpaceViewer.js';
 import type { DataSpaceInfo } from '../../stores/query/DataSpaceInfo.js';
 import type { DataSpaceAdvancedSearchState } from '../../stores/query/DataSpaceAdvancedSearchState.js';
@@ -55,17 +55,15 @@ export const DataSpaceAdvancedSearchModal = observer(
     const { searchState, onClose } = props;
     const applicationStore = useApplicationStore();
     const dataSpaceSearchRef = useRef<SelectComponent>(null);
-    const [searchText, setSearchText] = useState('');
     const handleEnter = (): void => dataSpaceSearchRef.current?.focus();
     const proceedToCreateQuery = (): void => {
       flowResult(searchState.proceedToCreateQuery()).catch(
         applicationStore.alertUnhandledError,
       );
     };
-
     const toggleGetSnapshot = (): void => {
       searchState.setToGetSnapShot(!searchState.toGetSnapShot);
-      flowResult(searchState.loadDataSpaces(searchText)).catch(
+      flowResult(searchState.loadDataSpaces()).catch(
         applicationStore.alertUnhandledError,
       );
     };
@@ -106,26 +104,9 @@ export const DataSpaceAdvancedSearchModal = observer(
     };
 
     // search text
-    const debouncedLoadDataSpaces = useMemo(
-      () =>
-        debounce((input: string): void => {
-          flowResult(searchState.loadDataSpaces(input)).catch(
-            applicationStore.alertUnhandledError,
-          );
-        }, 500),
-      [applicationStore, searchState],
-    );
-    const onSearchTextChange = (value: string): void => {
-      if (value !== searchText) {
-        setSearchText(value);
-        debouncedLoadDataSpaces.cancel();
-        debouncedLoadDataSpaces(value);
-      }
-    };
 
     useEffect(() => {
-      searchState.loadDataSpaces('');
-      flowResult(searchState.loadDataSpaces('')).catch(
+      flowResult(searchState.loadDataSpaces()).catch(
         applicationStore.alertUnhandledError,
       );
     }, [searchState, applicationStore]);
@@ -180,8 +161,6 @@ export const DataSpaceAdvancedSearchModal = observer(
                 className="data-space-advanced-search__dialog__input__selector"
                 options={dataSpaceOptions}
                 isLoading={searchState.loadDataSpacesState.isInProgress}
-                onInputChange={onSearchTextChange}
-                inputValue={searchText}
                 onChange={onDataSpaceOptionChange}
                 value={selectedDataSpaceOption}
                 placeholder="Search for data space by name..."

package/src/components/query/DataSpaceQueryBuilder.tsx

@@ -47,8 +47,8 @@ import {
 } from '@finos/legend-graph';
 import type { DataSpaceInfo } from '../../stores/query/DataSpaceInfo.js';
 import { generateGAVCoordinates } from '@finos/legend-storage';
-import { useEffect, useMemo, useState } from 'react';
-import { debounce, guaranteeType } from '@finos/legend-shared';
+import { useEffect } from 'react';
+import { guaranteeType } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import {
   DataSpace,
@@ -129,7 +129,6 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
   (props: { queryBuilderState: DataSpaceQueryBuilderState }) => {
     const { queryBuilderState } = props;
     const applicationStore = useApplicationStore();
-    const [dataSpaceSearchText, setDataSpaceSearchText] = useState('');
 
     // data space
     const dataSpaceOptions =
@@ -152,23 +151,6 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
       queryBuilderState.onDataSpaceChange(option.value);
     };
 
-    // data space search text
-    const debouncedLoadDataSpaces = useMemo(
-      () =>
-        debounce((input: string): void => {
-          flowResult(queryBuilderState.loadDataSpaces(input)).catch(
-            applicationStore.alertUnhandledError,
-          );
-        }, 500),
-      [applicationStore, queryBuilderState],
-    );
-    const onDataSpaceSearchTextChange = (value: string): void => {
-      if (value !== dataSpaceSearchText) {
-        setDataSpaceSearchText(value);
-        debouncedLoadDataSpaces.cancel();
-        debouncedLoadDataSpaces(value);
-      }
-    };
     const openDataSpaceAdvancedSearch = (): void =>
       queryBuilderState.showAdvancedSearchPanel();
 
@@ -232,7 +214,7 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
     );
 
     useEffect(() => {
-      flowResult(queryBuilderState.loadDataSpaces('')).catch(
+      flowResult(queryBuilderState.loadDataSpaces()).catch(
         applicationStore.alertUnhandledError,
       );
     }, [queryBuilderState, applicationStore]);
@@ -287,8 +269,6 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
                 className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
                 options={dataSpaceOptions}
                 isLoading={queryBuilderState.loadDataSpacesState.isInProgress}
-                onInputChange={onDataSpaceSearchTextChange}
-                inputValue={dataSpaceSearchText}
                 onChange={onDataSpaceOptionChange}
                 value={selectedDataSpaceOption}
                 placeholder="Search for data space..."

package/src/components/query/DataSpaceQueryBuilderTemplateQueryPanelContent.tsx

@@ -100,7 +100,7 @@ const DataSpaceTemplateQueryDialog = observer(
               queryBuilderState.projectInfo.artifactId,
               queryBuilderState.projectInfo.versionId,
               queryBuilderState.dataSpace.path,
-              template.title,
+              template.id,
             ),
           ),
         );

package/src/components/query/DataSpaceQuerySetup.tsx

@@ -15,7 +15,6 @@
  */
 
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import { debounce } from '@finos/legend-shared';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   QueryEditor,
@@ -23,7 +22,7 @@ import {
   useLegendQueryApplicationStore,
   useLegendQueryBaseStore,
 } from '@finos/legend-application-query';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { flowResult } from 'mobx';
 import { QueryBuilderClassSelector } from '@finos/legend-query-builder';
 import {
@@ -82,8 +81,6 @@ const DataSpaceQuerySetupSetupPanelContent = observer(
     const { queryBuilderState } = props;
     const applicationStore = useApplicationStore();
     const dataSpaceSearchRef = useRef<SelectComponent>(null);
-    const [dataSpaceSearchText, setDataSpaceSearchText] = useState('');
-
     // data space
     const dataSpaceOptions =
       queryBuilderState.dataSpaces.map(buildDataSpaceOption);
@@ -92,28 +89,11 @@ const DataSpaceQuerySetupSetupPanelContent = observer(
       queryBuilderState.onDataSpaceChange(option.value);
     };
 
-    // data space search text
-    const debouncedLoadDataSpaces = useMemo(
-      () =>
-        debounce((input: string): void => {
-          flowResult(queryBuilderState.loadDataSpaces(input)).catch(
-            applicationStore.alertUnhandledError,
-          );
-        }, 500),
-      [applicationStore, queryBuilderState],
-    );
-    const onDataSpaceSearchTextChange = (value: string): void => {
-      if (value !== dataSpaceSearchText) {
-        setDataSpaceSearchText(value);
-        debouncedLoadDataSpaces.cancel();
-        debouncedLoadDataSpaces(value);
-      }
-    };
     const openDataSpaceAdvancedSearch = (): void =>
       queryBuilderState.showAdvancedSearchPanel();
 
     useEffect(() => {
-      flowResult(queryBuilderState.loadDataSpaces('')).catch(
+      flowResult(queryBuilderState.loadDataSpaces()).catch(
         applicationStore.alertUnhandledError,
       );
     }, [queryBuilderState, applicationStore]);
@@ -141,8 +121,6 @@ const DataSpaceQuerySetupSetupPanelContent = observer(
                 className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
                 options={dataSpaceOptions}
                 isLoading={queryBuilderState.loadDataSpacesState.isInProgress}
-                onInputChange={onDataSpaceSearchTextChange}
-                inputValue={dataSpaceSearchText}
                 onChange={onDataSpaceOptionChange}
                 value={selectedDataSpaceOption}
                 placeholder="Search for data space..."

package/src/components/query/DataSpaceTemplateQueryCreator.tsx

@@ -33,8 +33,8 @@ const DataSpaceTemplateQueryCreatorStoreProvider: React.FC<{
   children: React.ReactNode;
   gav: string;
   dataSpacePath: string;
-  templateQueryTitle: string;
-}> = ({ children, gav, dataSpacePath, templateQueryTitle }) => {
+  templateQueryId: string;
+}> = ({ children, gav, dataSpacePath, templateQueryId }) => {
   const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
   const applicationStore = useLegendQueryApplicationStore();
   const baseStore = useLegendQueryBaseStore();
@@ -47,7 +47,7 @@ const DataSpaceTemplateQueryCreatorStoreProvider: React.FC<{
         artifactId,
         versionId,
         dataSpacePath,
-        templateQueryTitle,
+        templateQueryId,
       ),
   );
   return (
@@ -65,16 +65,16 @@ export const DataSpaceTemplateQueryCreator = observer(() => {
     parameters[
       DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_SPACE_PATH
     ];
-  const templateQueryTitle =
+  const templateQueryId =
     parameters[
-      DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE_QUERY_TITLE
+      DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE_QUERY_ID
     ];
 
   return (
     <DataSpaceTemplateQueryCreatorStoreProvider
       gav={gav}
       dataSpacePath={dataSpacePath}
-      templateQueryTitle={templateQueryTitle}
+      templateQueryId={templateQueryId}
     >
       <QueryEditor />
     </DataSpaceTemplateQueryCreatorStoreProvider>

package/src/components/studio/DSL_DataSpace_LegendStudioApplicationPlugin.tsx

@@ -48,7 +48,10 @@ import {
 } from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
 import { DSL_DATA_SPACE_LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../__lib__/studio/DSL_DataSpace_LegendStudioDocumentation.js';
 import { SIMPLE_DATA_SPACE_SNIPPET } from '../../__lib__/studio/DSL_DataSpace_LegendStudioCodeSnippet.js';
-import type { DocumentationEntry } from '@finos/legend-application';
+import type {
+  ApplicationPageEntry,
+  DocumentationEntry,
+} from '@finos/legend-application';
 import { DataSpaceIcon } from '../DSL_DataSpace_Icon.js';
 import { DataSpacePreviewState } from '../../stores/studio/DataSpacePreviewState.js';
 import {
@@ -57,6 +60,8 @@ import {
 } from './DataSpacePreviewAction.js';
 import type { PureGrammarTextSuggestion } from '@finos/legend-lego/code-editor';
 import { DataSpaceQueryAction } from './DataSpaceQueryAction.js';
+import { DataSpaceTemplateQueryPromotionReviewer } from './DataSpaceTemplateQueryPromoteReview.js';
+import { DATA_SPACE_QUERY_ROUTE_PATTERN } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
 
 const DATA_SPACE_ELEMENT_TYPE = 'DATA SPACE';
 const DATA_SPACE_ELEMENT_PROJECT_EXPLORER_DND_TYPE =
@@ -80,6 +85,18 @@ export class DSL_DataSpace_LegendStudioApplicationPlugin
     ];
   }
 
+  override getExtraApplicationPageEntries(): ApplicationPageEntry[] {
+    return [
+      {
+        key: 'promote-as-curated-template-query-page',
+        addressPatterns: [
+          DATA_SPACE_QUERY_ROUTE_PATTERN.PROMOTE_TEMPLATE_QUERY,
+        ],
+        renderer: DataSpaceTemplateQueryPromotionReviewer,
+      },
+    ];
+  }
+
   override getExtraExplorerContextMenuItemRendererConfigurations(): ExplorerContextMenuItemRendererConfiguration[] {
     return [
       {