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

package/src/components/DataSpaceViewer.tsx

@@ -35,6 +35,10 @@ import {
   InfoCircleIcon,
   ExternalLinkIcon,
   useResizeDetector,
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
 } from '@finos/legend-art';
 import {
   type Diagram,
@@ -51,6 +55,7 @@ import {
 } from '../stores/DataSpaceViewerState.js';
 import type { DataSpaceExecutionContextAnalysisResult } from '../graphManager/action/analytics/DataSpaceAnalysis.js';
 import { generateGAVCoordinates } from '@finos/legend-storage';
+import { useApplicationStore } from '@finos/legend-application';
 
 interface DataSpaceViewerActivityConfig {
   mode: DATA_SPACE_VIEWER_ACTIVITY_MODE;
@@ -313,14 +318,14 @@ const DataSpaceInfo = observer(
     const { dataSpaceViewerState } = props;
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
     const viewProject = (): void =>
-      dataSpaceViewerState.viewProject?.(
+      dataSpaceViewerState.viewProject(
         dataSpaceViewerState.groupId,
         dataSpaceViewerState.artifactId,
         dataSpaceViewerState.versionId,
         undefined,
       );
     const viewDataSpaceInProject = (): void =>
-      dataSpaceViewerState.viewProject?.(
+      dataSpaceViewerState.viewProject(
         dataSpaceViewerState.groupId,
         dataSpaceViewerState.artifactId,
         dataSpaceViewerState.versionId,
@@ -475,6 +480,7 @@ const DataSpaceSupportInfoViewerInner = observer(
 export const DataSpaceViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const applicationStore = useApplicationStore();
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
     const changeActivity =
       (activity: DATA_SPACE_VIEWER_ACTIVITY_MODE): (() => void) =>
@@ -520,38 +526,61 @@ export const DataSpaceViewer = observer(
     ];
 
     const viewProject = (): void =>
-      dataSpaceViewerState.viewProject?.(
+      dataSpaceViewerState.viewProject(
         dataSpaceViewerState.groupId,
         dataSpaceViewerState.artifactId,
         dataSpaceViewerState.versionId,
         analysisResult.path,
       );
+    const viewSDLCProject = (): void => {
+      dataSpaceViewerState
+        .viewSDLCProject(
+          dataSpaceViewerState.groupId,
+          dataSpaceViewerState.artifactId,
+          analysisResult.path,
+        )
+        .catch(applicationStore.alertUnhandledError);
+    };
 
     return (
       <div className="data-space__viewer">
         <div className="data-space__viewer__header">
-          <button
-            className="data-space__viewer__title"
-            tabIndex={-1}
-            title={`View Project (${generateGAVCoordinates(
-              dataSpaceViewerState.groupId,
-              dataSpaceViewerState.artifactId,
-              dataSpaceViewerState.versionId,
-            )})`}
-            onClick={viewProject}
-          >
-            <div
-              className="data-space__viewer__title__label"
-              title={`${analysisResult.title ?? analysisResult.name} - ${
-                analysisResult.path
-              }`}
+          <div className="data-space__viewer__title">
+            <button
+              className="data-space__viewer__title__btn"
+              tabIndex={-1}
+              title={`View Project (${generateGAVCoordinates(
+                dataSpaceViewerState.groupId,
+                dataSpaceViewerState.artifactId,
+                dataSpaceViewerState.versionId,
+              )})`}
+              onClick={viewProject}
             >
-              {analysisResult.title ?? analysisResult.name}
-            </div>
-            <div className="data-space__viewer__title__link">
-              <ExternalLinkSquareIcon />
-            </div>
-          </button>
+              <div
+                className="data-space__viewer__title__label"
+                title={`${analysisResult.title ?? analysisResult.name} - ${
+                  analysisResult.path
+                }`}
+              >
+                {analysisResult.title ?? analysisResult.name}
+              </div>
+              <div className="data-space__viewer__title__link">
+                <ExternalLinkSquareIcon />
+              </div>
+            </button>
+            <DropdownMenu
+              className="data-space__viewer__title__dropdown-trigger"
+              content={
+                <MenuContent>
+                  <MenuContentItem onClick={viewSDLCProject}>
+                    View SDLC project
+                  </MenuContentItem>
+                </MenuContent>
+              }
+            >
+              <CaretDownIcon title="Show more options..." />
+            </DropdownMenu>
+          </div>
           <div
             className={clsx('data-space__viewer__description', {
               'data-space__viewer__description--empty':

package/src/components/query/DSL_DataSpace_LegendQueryApplicationPlugin.tsx

@@ -16,38 +16,29 @@
 
 import packageJson from '../../../package.json';
 import {
-  type QueryEditorStore,
-  type QueryEditorHeaderLabeler,
-  type QuerySetupOptionRendererConfiguration,
-  type QuerySetupRenderer,
-  type QuerySetupState,
-  type QuerySetupStore,
+  type QuerySetupActionConfiguration,
   type ExistingQueryEditorStateBuilder,
   type ExistingQueryEditorStore,
   LegendQueryApplicationPlugin,
   generateExistingQueryEditorRoute,
   LegendQueryEventService,
   LEGEND_QUERY_APP_EVENT,
+  createViewProjectHandler,
+  createViewSDLCProjectHandler,
 } from '@finos/legend-application-query';
 import { SquareIcon } from '@finos/legend-art';
-import { DataSpaceQuerySetupState } from '../../stores/query/DataSpaceQuerySetupState.js';
-import { DataspaceQuerySetup } from './DataSpaceQuerySetup.js';
 import {
   ActionAlertActionType,
   ActionAlertType,
   type ApplicationPageEntry,
 } from '@finos/legend-application';
-import { CREATE_QUERY_FROM_DATA_SPACE_ROUTE_PATTERN } from '../../stores/query/DSL_DataSpace_LegendQueryRouter.js';
-import { DataSpaceQueryCreator } from './DataSpaceQueryCreator.js';
-import {
-  createQueryDataSpaceTaggedValue,
-  DataSpaceQueryCreatorStore,
-} from '../../stores/query/DataSpaceQueryCreatorStore.js';
 import {
-  Query,
-  extractElementNameFromPath,
-  isValidFullPath,
-} from '@finos/legend-graph';
+  DATA_SPACE_QUERY_ROUTE_PATTERN,
+  generateDataSpaceQuerySetupRoute,
+} from '../../stores/query/DSL_DataSpace_LegendQueryRouter.js';
+import { DataSpaceQueryCreator } from './DataSpaceQueryCreator.js';
+import { createQueryDataSpaceTaggedValue } from '../../stores/query/DataSpaceQueryCreatorStore.js';
+import { Query, isValidFullPath } from '@finos/legend-graph';
 import {
   QUERY_PROFILE_PATH,
   QUERY_PROFILE_TAG_DATA_SPACE,
@@ -57,6 +48,7 @@ import type { DataSpaceInfo } from '../../stores/query/DataSpaceInfo.js';
 import { getOwnDataSpace } from '../../graphManager/DSL_DataSpace_GraphManagerHelper.js';
 import { assertErrorThrown, LogEvent, uuid } from '@finos/legend-shared';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
+import { DataSpaceQuerySetup } from './DataSpaceQuerySetup.js';
 
 export class DSL_DataSpace_LegendQueryApplicationPlugin extends LegendQueryApplicationPlugin {
   constructor() {
@@ -65,68 +57,37 @@ export class DSL_DataSpace_LegendQueryApplicationPlugin extends LegendQueryAppli
 
   override getExtraApplicationPageEntries(): ApplicationPageEntry[] {
     return [
+      // data space query editor setup
+      {
+        key: 'data-space-query-setup-application-page',
+        urlPatterns: [DATA_SPACE_QUERY_ROUTE_PATTERN.SETUP],
+        renderer: DataSpaceQuerySetup,
+      },
       // data space query editor
       {
         key: 'data-space-query-editor-application-page',
-        urlPatterns: [CREATE_QUERY_FROM_DATA_SPACE_ROUTE_PATTERN],
+        urlPatterns: [DATA_SPACE_QUERY_ROUTE_PATTERN.CREATE],
         renderer: DataSpaceQueryCreator,
       },
     ];
   }
 
-  override getExtraQuerySetupOptionRendererConfigurations(): QuerySetupOptionRendererConfiguration[] {
+  override getExtraQuerySetupActionConfigurations(): QuerySetupActionConfiguration[] {
     return [
       {
-        key: 'data-space-query-option',
-        renderer: (
-          setupStore: QuerySetupStore,
-        ): React.ReactNode | undefined => {
-          const createQuery = (): void =>
-            setupStore.setSetupState(new DataSpaceQuerySetupState(setupStore));
-          return (
-            <button
-              className="query-setup__landing-page__option query-setup__landing-page__option--data-space"
-              onClick={createQuery}
-            >
-              <div className="query-setup__landing-page__option__icon">
-                <SquareIcon className="query-setup__landing-page__icon--data-space" />
-              </div>
-              <div className="query-setup__landing-page__option__label">
-                Create query from data space
-              </div>
-            </button>
+        key: 'create-query-from-data-space',
+        isAdvanced: false,
+        isCreateAction: true,
+        action: async (setupStore) => {
+          setupStore.applicationStore.navigator.goToLocation(
+            generateDataSpaceQuerySetupRoute(),
           );
         },
-      },
-    ];
-  }
-
-  override getExtraQuerySetupRenderers(): QuerySetupRenderer[] {
-    return [
-      (querySetupState: QuerySetupState): React.ReactNode | undefined => {
-        if (querySetupState instanceof DataSpaceQuerySetupState) {
-          return <DataspaceQuerySetup querySetupState={querySetupState} />;
-        }
-        return undefined;
-      },
-    ];
-  }
-
-  override getExtraQueryEditorHeaderLabelers(): QueryEditorHeaderLabeler[] {
-    return [
-      (editorStore: QueryEditorStore): React.ReactNode | undefined => {
-        if (editorStore instanceof DataSpaceQueryCreatorStore) {
-          return (
-            <div className="query-editor__header__label">
-              <SquareIcon className="query-editor__header__label__icon icon--data-space" />
-              {extractElementNameFromPath(editorStore.dataSpacePath)}
-              <div className="query-editor__header__label__tag">
-                {editorStore.executionContext}
-              </div>
-            </div>
-          );
-        }
-        return undefined;
+        label: 'Create query from data space',
+        className: 'query-setup__landing-page__action--data-space',
+        icon: (
+          <SquareIcon className="query-setup__landing-page__icon--data-space" />
+        ),
       },
     ];
   }
@@ -168,6 +129,11 @@ export class DSL_DataSpace_LegendQueryApplicationPlugin extends LegendQueryAppli
             query.groupId,
             query.artifactId,
             query.versionId,
+            createViewProjectHandler(editorStore.applicationStore),
+            createViewSDLCProjectHandler(
+              editorStore.applicationStore,
+              editorStore.depotServerClient,
+            ),
             (dataSpaceInfo: DataSpaceInfo) => {
               if (dataSpaceInfo.defaultExecutionContext) {
                 const persistQuery = async (): Promise<void> => {
@@ -205,7 +171,7 @@ export class DSL_DataSpace_LegendQueryApplicationPlugin extends LegendQueryAppli
                       LegendQueryEventService.create(
                         editorStore.applicationStore.eventService,
                       ).notify_QueryCreated({ queryId: newQuery.id });
-                      editorStore.applicationStore.navigator.reloadToLocation(
+                      editorStore.applicationStore.navigator.goToLocation(
                         generateExistingQueryEditorRoute(newQuery.id),
                       );
                     } else {

package/src/components/query/DataSpaceAdvancedSearchModal.tsx

@@ -0,0 +1,248 @@
+/**
+ * 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 { useApplicationStore } from '@finos/legend-application';
+import {
+  type SelectComponent,
+  BoltIcon,
+  clsx,
+  BlankPanelContent,
+  TimesCircleIcon,
+  PanelLoadingIndicator,
+  CustomSelectorInput,
+  SearchIcon,
+  Dialog,
+  TimesIcon,
+  ArrowRightIcon,
+} from '@finos/legend-art';
+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 { DataSpaceViewer } from '../DataSpaceViewer.js';
+import type { DataSpaceInfo } from '../../stores/query/DataSpaceInfo.js';
+import type { DataSpaceAdvancedSearchState } from '../../stores/query/DataSpaceAdvancedSearchState.js';
+
+type DataSpaceOption = { label: string; value: DataSpaceInfo };
+const buildDataSpaceOption = (value: DataSpaceInfo): DataSpaceOption => ({
+  label: value.title ?? value.name,
+  value,
+});
+
+export const DataSpaceAdvancedSearchModal = observer(
+  (props: {
+    searchState: DataSpaceAdvancedSearchState;
+    onClose: () => void;
+  }) => {
+    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(
+        applicationStore.alertUnhandledError,
+      );
+    };
+
+    // data space
+    const dataSpaceOptions = searchState.dataSpaces.map(buildDataSpaceOption);
+    const selectedDataSpaceOption = searchState.currentDataSpace
+      ? buildDataSpaceOption(searchState.currentDataSpace)
+      : null;
+    const onDataSpaceOptionChange = (option: DataSpaceOption | null): void => {
+      searchState.setCurrentDataSpace(option?.value);
+      searchState.setDataSpaceViewerState(undefined);
+    };
+    const formatDataSpaceOptionLabel = (
+      option: DataSpaceOption,
+    ): React.ReactNode => (
+      <div
+        className="data-space-advanced-search__dialog__option"
+        title={`${option.label} - ${
+          option.value.path
+        } - ${generateGAVCoordinates(
+          option.value.groupId,
+          option.value.artifactId,
+          option.value.versionId,
+        )}`}
+      >
+        <div className="data-space-advanced-search__dialog__option__label">
+          {option.label}
+        </div>
+        <div className="data-space-advanced-search__dialog__option__path">
+          {option.value.path}
+        </div>
+        <div className="data-space-advanced-search__dialog__option__gav">
+          {generateGAVCoordinates(
+            option.value.groupId,
+            option.value.artifactId,
+            option.value.versionId,
+          )}
+        </div>
+      </div>
+    );
+
+    // 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(
+        applicationStore.alertUnhandledError,
+      );
+    }, [searchState, applicationStore]);
+
+    useEffect(() => {
+      if (searchState.currentDataSpace) {
+        flowResult(
+          searchState.loadDataSpace(searchState.currentDataSpace),
+        ).catch(applicationStore.alertUnhandledError);
+      }
+    }, [searchState, applicationStore, searchState.currentDataSpace]);
+
+    return (
+      <Dialog
+        open={true}
+        onClose={onClose}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper:
+            'editor-modal__content data-space-advanced-search__dialog__container__content',
+        }}
+        TransitionProps={{
+          onEnter: handleEnter,
+        }}
+      >
+        <div className="modal modal--dark editor-modal data-space-advanced-search__dialog">
+          <div className="data-space-advanced-search__dialog__header modal__header">
+            <div className="modal__title">Search for data space</div>
+            <div className="modal__header__actions">
+              <button
+                className="modal__header__action"
+                title="Close"
+                onClick={onClose}
+              >
+                <TimesIcon />
+              </button>
+            </div>
+          </div>
+          <div className="data-space-advanced-search__dialog__content">
+            <div className="data-space-advanced-search__dialog__input">
+              <div className="data-space-advanced-search__dialog__input__icon">
+                <SearchIcon />
+              </div>
+              <CustomSelectorInput
+                ref={dataSpaceSearchRef}
+                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..."
+                isClearable={true}
+                escapeClearsValue={true}
+                darkMode={true}
+                formatOptionLabel={formatDataSpaceOptionLabel}
+              />
+              <button
+                className={clsx(
+                  'data-space-advanced-search__dialog__input__use-snapshot-btn',
+                  {
+                    'data-space-advanced-search__dialog__input__use-snapshot-btn--active':
+                      searchState.toGetSnapShot,
+                  },
+                )}
+                tabIndex={-1}
+                title={`[${
+                  searchState.toGetSnapShot ? 'on' : 'off'
+                }] Toggle show data spaces from snapshot releases instead of latest releases`}
+                onClick={toggleGetSnapshot}
+              >
+                <BoltIcon />
+              </button>
+              <button
+                className="data-space-advanced-search__dialog__input__proceed-btn"
+                tabIndex={-1}
+                title="Proceed to create query"
+                onClick={proceedToCreateQuery}
+              >
+                <ArrowRightIcon />
+              </button>
+            </div>
+            <div className="data-space-advanced-search__dialog__view">
+              <PanelLoadingIndicator
+                isLoading={searchState.loadDataSpaceState.isInProgress}
+              />
+              {searchState.dataSpaceViewerState && (
+                <DataSpaceViewer
+                  dataSpaceViewerState={searchState.dataSpaceViewerState}
+                />
+              )}
+              {!searchState.dataSpaceViewerState && (
+                <>
+                  {searchState.loadDataSpaceState.isInProgress && (
+                    <BlankPanelContent>
+                      {searchState.loadDataSpaceState.message}
+                    </BlankPanelContent>
+                  )}
+                  {searchState.loadDataSpaceState.hasFailed && (
+                    <BlankPanelContent>
+                      <div className="data-space-advanced-search__dialog__view--failed">
+                        <div className="data-space-advanced-search__dialog__view--failed__icon">
+                          <TimesCircleIcon />
+                        </div>
+                        <div className="data-space-advanced-search__dialog__view--failed__text">
+                          Can&apos;t load data space
+                        </div>
+                      </div>
+                    </BlankPanelContent>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/components/query/DataSpaceQueryBuilder.tsx

@@ -26,6 +26,7 @@ import {
   MenuContentItemIcon,
   CheckIcon,
   MenuContentItemLabel,
+  SearchIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { useApplicationStore } from '@finos/legend-application';
@@ -49,15 +50,44 @@ import { debounce, guaranteeType } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import type { DataSpaceExecutionContext } from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
 import { DataSpaceIcon } from '../DSL_DataSpace_Icon.js';
+import { DataSpaceAdvancedSearchModal } from './DataSpaceAdvancedSearchModal.js';
 
-type DataSpaceOption = {
+export type DataSpaceOption = {
   label: string;
   value: DataSpaceInfo;
 };
-const buildDataSpaceOption = (value: DataSpaceInfo): DataSpaceOption => ({
+export const buildDataSpaceOption = (
+  value: DataSpaceInfo,
+): DataSpaceOption => ({
   label: value.title ?? value.name,
   value,
 });
+export const formatDataSpaceOptionLabel = (
+  option: DataSpaceOption,
+): React.ReactNode => (
+  <div
+    className="query-builder__setup__data-space__option"
+    title={`${option.label} - ${option.value.path} - ${generateGAVCoordinates(
+      option.value.groupId,
+      option.value.artifactId,
+      option.value.versionId,
+    )}`}
+  >
+    <div className="query-builder__setup__data-space__option__label">
+      {option.label}
+    </div>
+    <div className="query-builder__setup__data-space__option__path">
+      {option.value.path}
+    </div>
+    <div className="query-builder__setup__data-space__option__gav">
+      {generateGAVCoordinates(
+        option.value.groupId,
+        option.value.artifactId,
+        option.value.versionId,
+      )}
+    </div>
+  </div>
+);
 
 type ExecutionContextOption = {
   label: string;
@@ -105,34 +135,6 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
     const onDataSpaceOptionChange = (option: DataSpaceOption): void => {
       queryBuilderState.onDataSpaceChange(option.value);
     };
-    const formatDataSpaceOptionLabel = (
-      option: DataSpaceOption,
-    ): React.ReactNode => (
-      <div
-        className="query-builder__setup__data-space__option"
-        title={`${option.label} - ${
-          option.value.path
-        } - ${generateGAVCoordinates(
-          option.value.groupId,
-          option.value.artifactId,
-          option.value.versionId,
-        )}`}
-      >
-        <div className="query-builder__setup__data-space__option__label">
-          {option.label}
-        </div>
-        <div className="query-builder__setup__data-space__option__path">
-          {option.value.path}
-        </div>
-        <div className="query-builder__setup__data-space__option__gav">
-          {generateGAVCoordinates(
-            option.value.groupId,
-            option.value.artifactId,
-            option.value.versionId,
-          )}
-        </div>
-      </div>
-    );
 
     // data space search text
     const debouncedLoadDataSpaces = useMemo(
@@ -151,6 +153,8 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
         debouncedLoadDataSpaces(value);
       }
     };
+    const openDataSpaceAdvancedSearch = (): void =>
+      queryBuilderState.showAdvancedSearchPanel();
 
     // execution context
     const executionContextOptions =
@@ -219,7 +223,8 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
               data space execution context
             </div>
             <DropdownMenu
-              className="query-builder__setup__config-group__header__dropdown"
+              className="query-builder__setup__config-group__header__dropdown-trigger"
+              title="Show Settings..."
               content={
                 <MenuContent>
                   <MenuContentItem
@@ -245,12 +250,7 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
                 transformOrigin: { vertical: 'top', horizontal: 'right' },
               }}
             >
-              <button
-                className="query-builder__setup__config-group__header__dropdown-trigger"
-                title="Show Settings..."
-              >
-                <MoreHorizontalIcon />
-              </button>
+              <MoreHorizontalIcon />
             </DropdownMenu>
           </div>
           <div className="query-builder__setup__config-group__content">
@@ -274,6 +274,26 @@ const DataSpaceQueryBuilderSetupPanelContent = observer(
                 darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
                 formatOptionLabel={formatDataSpaceOptionLabel}
               />
+              {queryBuilderState.isAdvancedDataSpaceSearchEnabled && (
+                <>
+                  <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 className="query-builder__setup__config-group__item">
               <div