@finos/legend-extension-dsl-data-space 8.0.1 → 9.0.1

package/src/components/query/DataSpaceQuerySetup.tsx

@@ -14,229 +14,167 @@
  * limitations under the License.
  */
 
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import { debounce } from '@finos/legend-shared';
 import { useApplicationStore } from '@finos/legend-application';
+import { useDepotServerClient } from '@finos/legend-server-depot';
+import {
+  QueryEditor,
+  QueryEditorStoreContext,
+  useLegendQueryApplicationStore,
+} from '@finos/legend-application-query';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { flowResult } from 'mobx';
+import { QueryBuilderClassSelector } from '@finos/legend-query-builder';
 import {
-  type SelectComponent,
-  BoltIcon,
-  ArrowRightIcon,
-  clsx,
-  BlankPanelContent,
-  TimesCircleIcon,
-  PanelLoadingIndicator,
-  ArrowLeftIcon,
   CustomSelectorInput,
   SearchIcon,
+  type SelectComponent,
 } from '@finos/legend-art';
-import { useQuerySetupStore } from '@finos/legend-application-query';
-import { generateGAVCoordinates } from '@finos/legend-storage';
-import { debounce } from '@finos/legend-shared';
-import { flowResult } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type { DataSpaceQuerySetupState } from '../../stores/query/DataSpaceQuerySetupState.js';
-import { DataSpaceViewer } from '../DataSpaceViewer.js';
-import type { DataSpaceInfo } from '../../stores/query/DataSpaceInfo.js';
+import { DataSpaceIcon } from '../DSL_DataSpace_Icon.js';
+import {
+  type DataSpaceQuerySetupState,
+  DataSpaceQuerySetupStore,
+} from '../../stores/query/DataSpaceQuerySetupStore.js';
+import {
+  buildDataSpaceOption,
+  formatDataSpaceOptionLabel,
+  type DataSpaceOption,
+} from './DataSpaceQueryBuilder.js';
+import { DataSpaceAdvancedSearchModal } from './DataSpaceAdvancedSearchModal.js';
+
+const DataSpaceQuerySetupStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const store = useLocalObservable(
+    () => new DataSpaceQuerySetupStore(applicationStore, depotServerClient),
+  );
+  return (
+    <QueryEditorStoreContext.Provider value={store}>
+      {children}
+    </QueryEditorStoreContext.Provider>
+  );
+};
 
-type DataSpaceOption = { label: string; value: DataSpaceInfo };
-const buildDataSpaceOption = (value: DataSpaceInfo): DataSpaceOption => ({
-  label: value.title ?? value.name,
-  value,
-});
+export const DataSpaceQuerySetup = observer(() => (
+  <DataSpaceQuerySetupStoreProvider>
+    <QueryEditor />
+  </DataSpaceQuerySetupStoreProvider>
+));
 
-export const DataspaceQuerySetup = observer(
-  (props: { querySetupState: DataSpaceQuerySetupState }) => {
-    const { querySetupState } = props;
+/**
+ * This setup panel supports cascading in order: Data-space -> Execution context (-> Runtime) -> Class
+ *
+ * In other words, we will only show:
+ * - 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}
+ */
+const DataSpaceQuerySetupSetupPanelContent = observer(
+  (props: { queryBuilderState: DataSpaceQuerySetupState }) => {
+    const { queryBuilderState } = props;
     const applicationStore = useApplicationStore();
-    const setupStore = useQuerySetupStore();
     const dataSpaceSearchRef = useRef<SelectComponent>(null);
-    const [searchText, setSearchText] = useState('');
-
-    const toggleGetSnapshot = (): void => {
-      querySetupState.setToGetSnapShot(!querySetupState.toGetSnapShot);
-      flowResult(querySetupState.loadDataSpaces(searchText)).catch(
-        applicationStore.alertUnhandledError,
-      );
-    };
-
-    const next = (): void => {
-      if (querySetupState.dataSpaceViewerState) {
-        flowResult(querySetupState.proceedToCreateQuery()).catch(
-          applicationStore.alertUnhandledError,
-        );
-      }
-    };
-    const canProceed = querySetupState.dataSpaceViewerState;
-
-    const back = (): void => {
-      setupStore.setSetupState(undefined);
-    };
+    const [dataSpaceSearchText, setDataSpaceSearchText] = useState('');
 
     // data space
     const dataSpaceOptions =
-      querySetupState.dataSpaces.map(buildDataSpaceOption);
-    const selectedDataSpaceOption = querySetupState.currentDataSpace
-      ? buildDataSpaceOption(querySetupState.currentDataSpace)
-      : null;
-    const onDataSpaceOptionChange = (option: DataSpaceOption | null): void => {
-      querySetupState.setCurrentDataSpace(option?.value);
-      querySetupState.setDataSpaceViewerState(undefined);
+      queryBuilderState.dataSpaces.map(buildDataSpaceOption);
+    const selectedDataSpaceOption = null;
+    const onDataSpaceOptionChange = (option: DataSpaceOption): void => {
+      queryBuilderState.onDataSpaceChange(option.value);
     };
-    const formatDataSpaceOptionLabel = (
-      option: DataSpaceOption,
-    ): React.ReactNode => (
-      <div
-        className="query-setup__data-space__option"
-        title={`${option.label} - ${
-          option.value.path
-        } - ${generateGAVCoordinates(
-          option.value.groupId,
-          option.value.artifactId,
-          option.value.versionId,
-        )}`}
-      >
-        <div className="query-setup__data-space__option__label">
-          {option.label}
-        </div>
-        <div className="query-setup__data-space__option__path">
-          {option.value.path}
-        </div>
-        <div className="query-setup__data-space__option__gav">
-          {generateGAVCoordinates(
-            option.value.groupId,
-            option.value.artifactId,
-            option.value.versionId,
-          )}
-        </div>
-      </div>
-    );
 
-    // search text
+    // data space search text
     const debouncedLoadDataSpaces = useMemo(
       () =>
         debounce((input: string): void => {
-          flowResult(querySetupState.loadDataSpaces(input)).catch(
+          flowResult(queryBuilderState.loadDataSpaces(input)).catch(
             applicationStore.alertUnhandledError,
           );
         }, 500),
-      [applicationStore, querySetupState],
+      [applicationStore, queryBuilderState],
     );
-    const onSearchTextChange = (value: string): void => {
-      if (value !== searchText) {
-        setSearchText(value);
+    const onDataSpaceSearchTextChange = (value: string): void => {
+      if (value !== dataSpaceSearchText) {
+        setDataSpaceSearchText(value);
         debouncedLoadDataSpaces.cancel();
         debouncedLoadDataSpaces(value);
       }
     };
+    const openDataSpaceAdvancedSearch = (): void =>
+      queryBuilderState.showAdvancedSearchPanel();
 
     useEffect(() => {
-      flowResult(querySetupState.loadDataSpaces('')).catch(
+      flowResult(queryBuilderState.loadDataSpaces('')).catch(
         applicationStore.alertUnhandledError,
       );
-    }, [querySetupState, applicationStore]);
+    }, [queryBuilderState, applicationStore]);
 
-    useEffect(() => {
-      if (querySetupState.currentDataSpace) {
-        flowResult(
-          querySetupState.loadDataSpace(querySetupState.currentDataSpace),
-        ).catch(applicationStore.alertUnhandledError);
-      }
-    }, [querySetupState, applicationStore, querySetupState.currentDataSpace]);
-
-    useEffect(() => {
-      dataSpaceSearchRef.current?.focus();
-    }, []);
+    useEffect(() => dataSpaceSearchRef.current?.focus());
 
     return (
-      <div className="query-setup__wizard query-setup__data-space">
-        <div className="query-setup__wizard__header query-setup__data-space__header">
-          <button
-            className="query-setup__wizard__header__btn"
-            onClick={back}
-            title="Back to Main Menu"
-          >
-            <ArrowLeftIcon />
-          </button>
-          <div className="query-setup__wizard__header__title">
-            Creating query from data space...
-          </div>
-          <button
-            className={clsx('query-setup__wizard__header__btn', {
-              'query-setup__wizard__header__btn--ready': canProceed,
-            })}
-            onClick={next}
-            disabled={!canProceed}
-            title="Create a new query"
-          >
-            <ArrowRightIcon />
-          </button>
-        </div>
-        <div className="query-setup__wizard__content">
-          <div className="query-setup__wizard__group query-setup__wizard__group--inline query-setup__data-space__input-group">
-            <div className="query-setup__wizard__group__title">
-              <SearchIcon />
+      <>
+        <div className="query-builder__setup__config-group">
+          <div className="query-builder__setup__config-group__header">
+            <div className="query-builder__setup__config-group__header__title">
+              data space execution context
             </div>
-            <CustomSelectorInput
-              ref={dataSpaceSearchRef}
-              className="query-setup__wizard__selector"
-              options={dataSpaceOptions}
-              isLoading={querySetupState.loadDataSpacesState.isInProgress}
-              onInputChange={onSearchTextChange}
-              inputValue={searchText}
-              onChange={onDataSpaceOptionChange}
-              value={selectedDataSpaceOption}
-              placeholder="Search for data space..."
-              isClearable={true}
-              escapeClearsValue={true}
-              darkMode={true}
-              formatOptionLabel={formatDataSpaceOptionLabel}
-            />
-            <button
-              className={clsx('query-setup__data-space__use-snapshot-btn', {
-                'query-setup__data-space__use-snapshot-btn--active':
-                  querySetupState.toGetSnapShot,
-              })}
-              tabIndex={-1}
-              title={`[${
-                querySetupState.toGetSnapShot ? 'on' : 'off'
-              }] Toggle show data spaces from snapshot releases instead of latest releases`}
-              onClick={toggleGetSnapshot}
-            >
-              <BoltIcon />
-            </button>
           </div>
-          <div className="query-setup__data-space__view">
-            <PanelLoadingIndicator
-              isLoading={querySetupState.loadDataSpaceState.isInProgress}
-            />
-            {querySetupState.dataSpaceViewerState && (
-              <DataSpaceViewer
-                dataSpaceViewerState={querySetupState.dataSpaceViewerState}
+          <div className="query-builder__setup__config-group__content">
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="data space"
+              >
+                <DataSpaceIcon />
+              </div>
+              <CustomSelectorInput
+                ref={dataSpaceSearchRef}
+                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..."
+                escapeClearsValue={true}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                formatOptionLabel={formatDataSpaceOptionLabel}
               />
-            )}
-            {!querySetupState.dataSpaceViewerState && (
-              <>
-                {querySetupState.loadDataSpaceState.isInProgress && (
-                  <BlankPanelContent>
-                    {querySetupState.loadDataSpaceState.message}
-                  </BlankPanelContent>
-                )}
-                {querySetupState.loadDataSpaceState.hasFailed && (
-                  <BlankPanelContent>
-                    <div className="query-setup__data-space__view--failed">
-                      <div className="query-setup__data-space__view--failed__icon">
-                        <TimesCircleIcon />
-                      </div>
-                      <div className="query-setup__data-space__view--failed__text">
-                        Can&apos;t load data space
-                      </div>
-                    </div>
-                  </BlankPanelContent>
-                )}
-              </>
-            )}
+              <button
+                tabIndex={-1}
+                className="query-builder__setup__data-space-searcher__btn btn--dark"
+                onClick={openDataSpaceAdvancedSearch}
+                title="Open advanced search for data space..."
+              >
+                <SearchIcon />
+              </button>
+              {queryBuilderState.advancedSearchState && (
+                <DataSpaceAdvancedSearchModal
+                  searchState={queryBuilderState.advancedSearchState}
+                  onClose={() => queryBuilderState.hideAdvancedSearchPanel()}
+                />
+              )}
+            </div>
           </div>
         </div>
-      </div>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={[]}
+          noMatchMessage="No compatible class found"
+        />
+      </>
     );
   },
 );
+
+export const renderDataSpaceQuerySetupSetupPanelContent = (
+  queryBuilderState: DataSpaceQuerySetupState,
+): React.ReactNode => (
+  <DataSpaceQuerySetupSetupPanelContent queryBuilderState={queryBuilderState} />
+);

package/src/stores/DataSpaceViewerState.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import type { GenericLegendApplicationStore } from '@finos/legend-application';
 import {
   type ClassView,
   type DiagramRenderer,
@@ -42,6 +43,7 @@ export enum DATA_SPACE_VIEWER_ACTIVITY_MODE {
 }
 
 export class DataSpaceViewerState {
+  readonly applicationStore: GenericLegendApplicationStore;
   groupId: string;
   artifactId: string;
   versionId: string;
@@ -51,29 +53,38 @@ export class DataSpaceViewerState {
   currentActivity = DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_OVERVIEW;
   currentExecutionContext: DataSpaceExecutionContextAnalysisResult;
   currentRuntime: PackageableRuntime;
-  viewProject?:
-    | ((
-        groupId: string,
-        artifactId: string,
-        versionId: string,
-        entityPath: string | undefined,
-      ) => void)
-    | undefined;
-  onDiagramClassDoubleClick?: ((classView: ClassView) => void) | undefined;
+  viewProject: (
+    groupId: string,
+    artifactId: string,
+    versionId: string,
+    entityPath: string | undefined,
+  ) => void;
+  viewSDLCProject: (
+    groupId: string,
+    artifactId: string,
+    entityPath: string | undefined,
+  ) => Promise<void>;
+  onDiagramClassDoubleClick: (classView: ClassView) => void;
 
   constructor(
+    applicationStore: GenericLegendApplicationStore,
     groupId: string,
     artifactId: string,
     versionId: string,
     dataSpaceAnalysisResult: DataSpaceAnalysisResult,
-    options?: {
-      viewProject?: (
+    actions: {
+      viewProject: (
         groupId: string,
         artifactId: string,
         versionId: string,
         entityPath: string | undefined,
       ) => void;
-      onDiagramClassDoubleClick?: (classView: ClassView) => void;
+      viewSDLCProject: (
+        groupId: string,
+        artifactId: string,
+        entityPath: string | undefined,
+      ) => Promise<void>;
+      onDiagramClassDoubleClick: (classView: ClassView) => void;
     },
   ) {
     makeObservable(this, {
@@ -90,6 +101,7 @@ export class DataSpaceViewerState {
       setCurrentRuntime: action,
     });
 
+    this.applicationStore = applicationStore;
     this.dataSpaceAnalysisResult = dataSpaceAnalysisResult;
     this.groupId = groupId;
     this.artifactId = artifactId;
@@ -100,8 +112,9 @@ export class DataSpaceViewerState {
     this.currentDiagram = getNullableFirstElement(
       this.dataSpaceAnalysisResult.featuredDiagrams,
     );
-    this.viewProject = options?.viewProject;
-    this.onDiagramClassDoubleClick = options?.onDiagramClassDoubleClick;
+    this.viewProject = actions.viewProject;
+    this.viewSDLCProject = actions.viewSDLCProject;
+    this.onDiagramClassDoubleClick = actions.onDiagramClassDoubleClick;
   }
 
   get renderer(): DiagramRenderer {
@@ -164,6 +177,6 @@ export class DataSpaceViewerState {
   setupRenderer(): void {
     this.renderer.setIsReadOnly(true);
     this.renderer.onClassViewDoubleClick = (classView: ClassView): void =>
-      this.onDiagramClassDoubleClick?.(classView);
+      this.onDiagramClassDoubleClick(classView);
   }
 }

package/src/stores/query/DSL_DataSpace_LegendQueryRouter.ts

@@ -19,6 +19,10 @@ import {
   generatePath,
 } from '@finos/legend-application';
 import { LEGEND_QUERY_PATH_PARAM_TOKEN } from '@finos/legend-application-query';
+import {
+  addQueryParamsStringToUrl,
+  stringifyQueryParams,
+} from '@finos/legend-shared';
 import { generateGAVCoordinates } from '@finos/legend-storage';
 
 export enum DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN {
@@ -41,7 +45,16 @@ export interface DataSpaceQueryEditorQueryParams {
   [DATA_SPACE_QUERY_CREATOR_QUERY_PARAM_TOKEN.CLASS_PATH]?: string;
 }
 
-export const CREATE_QUERY_FROM_DATA_SPACE_ROUTE_PATTERN = `/create-from-dataspace/:${LEGEND_QUERY_PATH_PARAM_TOKEN.GAV}/:${DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.DATA_SPACE_PATH}/:${DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.EXECUTION_CONTEXT}/:${LEGEND_QUERY_PATH_PARAM_TOKEN.RUNTIME_PATH}?`;
+export const DATA_SPACE_QUERY_ROUTE_PATTERN = Object.freeze({
+  SETUP: `/dataspace`,
+  CREATE: `/dataspace/:${LEGEND_QUERY_PATH_PARAM_TOKEN.GAV}/:${DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.DATA_SPACE_PATH}/:${DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.EXECUTION_CONTEXT}/:${LEGEND_QUERY_PATH_PARAM_TOKEN.RUNTIME_PATH}?`,
+});
+
+export const generateDataSpaceQuerySetupRoute = (): string =>
+  generatePath(
+    generateExtensionUrlPattern(DATA_SPACE_QUERY_ROUTE_PATTERN.SETUP),
+    {},
+  );
 
 export const generateDataSpaceQueryCreatorRoute = (
   groupId: string,
@@ -52,22 +65,23 @@ export const generateDataSpaceQueryCreatorRoute = (
   runtimePath?: string | undefined,
   classPath?: string | undefined,
 ): string =>
-  `${generatePath(
-    generateExtensionUrlPattern(CREATE_QUERY_FROM_DATA_SPACE_ROUTE_PATTERN),
-    {
-      [LEGEND_QUERY_PATH_PARAM_TOKEN.GAV]: generateGAVCoordinates(
-        groupId,
-        artifactId,
-        versionId,
-      ),
-      [DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.DATA_SPACE_PATH]:
-        dataSpacePath,
-      [DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.EXECUTION_CONTEXT]:
-        executionContextKey,
-      [LEGEND_QUERY_PATH_PARAM_TOKEN.RUNTIME_PATH]: runtimePath,
-    },
-  )}${
-    classPath
-      ? `?${DATA_SPACE_QUERY_CREATOR_QUERY_PARAM_TOKEN.CLASS_PATH}=${classPath}`
-      : ''
-  }`;
+  addQueryParamsStringToUrl(
+    generatePath(
+      generateExtensionUrlPattern(DATA_SPACE_QUERY_ROUTE_PATTERN.CREATE),
+      {
+        [LEGEND_QUERY_PATH_PARAM_TOKEN.GAV]: generateGAVCoordinates(
+          groupId,
+          artifactId,
+          versionId,
+        ),
+        [DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.DATA_SPACE_PATH]:
+          dataSpacePath,
+        [DATA_SPACE_QUERY_CREATOR_PATH_PARAM_TOKEN.EXECUTION_CONTEXT]:
+          executionContextKey,
+        [LEGEND_QUERY_PATH_PARAM_TOKEN.RUNTIME_PATH]: runtimePath,
+      },
+    ),
+    stringifyQueryParams({
+      [DATA_SPACE_QUERY_CREATOR_QUERY_PARAM_TOKEN.CLASS_PATH]: classPath,
+    }),
+  );