@finos/legend-application-query 8.1.2 → 9.0.0

package/lib/components/QuerySetup.js

@@ -14,493 +14,89 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ArrowLeftIcon, ArrowRightIcon, BlankPanelContent, clsx, CustomSelectorInput, PanelLoadingIndicator, PlusIcon, RobotIcon, SearchIcon, UserIcon, QuestionCircleIcon, DroidIcon, ManageSearchIcon, ArrowCirceUpIcon, } from '@finos/legend-art';
-import { debounce, getNullableFirstElement, isNonNullable, } from '@finos/legend-shared';
-import { flowResult } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
-import { generateMappingQueryCreatorRoute, generateExistingQueryEditorRoute, generateServiceQueryCreatorRoute, } from '../stores/LegendQueryRouter.js';
-import { CreateMappingQuerySetupState, EditExistingQuerySetupState, CloneServiceQuerySetupState, UpdateExistingServiceQuerySetupState, LoadProjectServiceQuerySetupState, QueryProductionizationSetupState, } from '../stores/QuerySetupStore.js';
-import { useQuerySetupStore, withQuerySetupStore, } from './QuerySetupStoreProvider.js';
-import { LATEST_VERSION_ALIAS, SNAPSHOT_VERSION_ALIAS, } from '@finos/legend-server-depot';
-import { compareSemVerVersions } from '@finos/legend-storage';
-import { useApplicationStore, buildElementOption, EDITOR_LANGUAGE, TextInputEditor, } from '@finos/legend-application';
-import { buildServiceOption, formatServiceOptionLabel, buildQueryOption, } from '@finos/legend-query-builder';
+import { clsx, PanelLoadingIndicator, QuestionCircleIcon, CogIcon, MoreHorizontalIcon, DropdownMenu, PencilIcon, ChevronDownThinIcon, CircleIcon, MenuContent, MenuContentItem, MenuContentItemIcon, MenuContentItemLabel, CheckIcon, MenuContentDivider, } from '@finos/legend-art';
+import { getQueryParameters, guaranteeNonNullable } from '@finos/legend-shared';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import { createContext, useContext, useEffect } from 'react';
+import { LEGEND_QUERY_SETUP_QUERY_PARAM_TOKEN, } from '../stores/LegendQueryRouter.js';
+import { QuerySetupLandingPageStore, } from '../stores/QuerySetupStore.js';
+import { useApplicationStore } from '@finos/legend-application';
 import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
-const EditExistingQuerySetup = observer((props) => {
-    const { querySetupState } = props;
-    const applicationStore = useApplicationStore();
-    const setupStore = useQuerySetupStore();
-    const querySearchRef = useRef(null);
-    const [searchText, setSearchText] = useState('');
-    // actions
-    const back = () => {
-        setupStore.setSetupState(undefined);
-    };
-    const next = () => {
-        if (querySetupState.currentQuery) {
-            applicationStore.navigator.goToLocation(generateExistingQueryEditorRoute(querySetupState.currentQuery.id));
-        }
-    };
-    const canProceed = querySetupState.currentQuery;
-    // query
-    const queryOptions = querySetupState.queries.map(buildQueryOption);
-    const selectedQueryOption = querySetupState.currentQuery
-        ? buildQueryOption(querySetupState.currentQuery)
-        : null;
-    const onQueryOptionChange = (option) => {
-        if (option?.value !== querySetupState.currentQuery) {
-            querySetupState.setCurrentQuery(option?.value.id);
-        }
-    };
-    const formatQueryOptionLabel = (option) => {
-        const deleteQuery = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setupStore.graphManagerState.graphManager
-                .deleteQuery(option.value.id)
-                .then(() => flowResult(querySetupState.loadQueries('')).catch(applicationStore.alertUnhandledError))
-                .catch(applicationStore.alertUnhandledError);
-        };
-        if (option.value.id === querySetupState.currentQuery?.id) {
-            return option.label;
-        }
-        return (_jsxs("div", { className: "query-setup__existing-query__query-option", children: [_jsx("div", { className: "query-setup__existing-query__query-option__label", title: option.label, children: option.label }), querySetupState.showCurrentUserQueriesOnly && (_jsx("button", { className: "query-setup__existing-query__query-option__action", tabIndex: -1, onClick: deleteQuery, children: "Delete" })), !querySetupState.showCurrentUserQueriesOnly &&
-                    Boolean(option.value.owner) && (_jsx("div", { className: clsx('query-setup__existing-query__query-option__user', {
-                        'query-setup__existing-query__query-option__user--mine': option.value.isCurrentUserQuery,
-                    }), children: option.value.isCurrentUserQuery ? 'mine' : option.value.owner }))] }));
-    };
-    // search text
-    const debouncedLoadQueries = useMemo(() => debounce((input) => {
-        flowResult(querySetupState.loadQueries(input)).catch(applicationStore.alertUnhandledError);
-    }, 500), [applicationStore, querySetupState]);
-    const onSearchTextChange = (value) => {
-        if (value !== searchText) {
-            setSearchText(value);
-            debouncedLoadQueries.cancel();
-            debouncedLoadQueries(value);
-        }
-    };
-    // show current user queries only
-    const toggleShowCurrentUserQueriesOnly = () => {
-        querySetupState.setShowCurrentUserQueriesOnly(!querySetupState.showCurrentUserQueriesOnly);
-        debouncedLoadQueries.cancel();
-        debouncedLoadQueries(searchText);
-    };
-    useEffect(() => {
-        flowResult(querySetupState.loadQueries('')).catch(applicationStore.alertUnhandledError);
-    }, [querySetupState, applicationStore]);
-    useEffect(() => {
-        querySearchRef.current?.focus();
-    }, []);
-    return (_jsxs("div", { className: "query-setup__wizard query-setup__existing-query", children: [_jsxs("div", { className: "query-setup__wizard__header query-setup__existing-query__header", children: [_jsx("button", { className: "query-setup__wizard__header__btn", onClick: back, title: "Back to Main Menu", children: _jsx(ArrowLeftIcon, {}) }), _jsx("div", { className: "query-setup__wizard__header__title", children: "Loading an existing query..." }), _jsx("button", { className: clsx('query-setup__wizard__header__btn', {
-                            'query-setup__wizard__header__btn--ready': canProceed,
-                        }), onClick: next, disabled: !canProceed, title: "Edit query", children: _jsx(ArrowRightIcon, {}) })] }), _jsxs("div", { className: "query-setup__wizard__content", children: [_jsxs("div", { className: "query-setup__wizard__group query-setup__wizard__group--inline", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: _jsx(SearchIcon, {}) }), _jsxs("div", { className: "query-setup__existing-query__input", children: [_jsx(CustomSelectorInput, { ref: querySearchRef, className: "query-setup__wizard__selector", options: queryOptions, isLoading: querySetupState.loadQueriesState.isInProgress, onInputChange: onSearchTextChange, inputValue: searchText, onChange: onQueryOptionChange, value: selectedQueryOption, placeholder: "Search for query by name...", isClearable: true, escapeClearsValue: true, darkMode: true, formatOptionLabel: formatQueryOptionLabel }), _jsx("button", { className: clsx('query-setup__existing-query__btn', {
-                                            'query-setup__existing-query__btn--active': querySetupState.showCurrentUserQueriesOnly,
-                                        }), tabIndex: -1, title: `[${querySetupState.showCurrentUserQueriesOnly ? 'on' : 'off'}] Toggle show only queries of current user`, onClick: toggleShowCurrentUserQueriesOnly, children: _jsx(UserIcon, {}) })] })] }), _jsxs("div", { className: "query-setup__existing-query__preview", children: [_jsx(PanelLoadingIndicator, { isLoading: querySetupState.loadQueryState.isInProgress }), querySetupState.currentQuery && (_jsxs(_Fragment, { children: [!querySetupState.currentQueryInfo && (_jsx(BlankPanelContent, { children: `Can't preview query` })), querySetupState.currentQueryInfo && (_jsx(TextInputEditor, { inputValue: querySetupState.currentQueryInfo.content, isReadOnly: true, language: EDITOR_LANGUAGE.PURE, showMiniMap: false, hideGutter: true }))] })), !querySetupState.currentQuery && (_jsx(BlankPanelContent, { children: "No query to preview" }))] })] })] }));
-});
-const QueryProductionizationSetup = observer((props) => {
-    const { querySetupState } = props;
-    const applicationStore = useApplicationStore();
-    const setupStore = useQuerySetupStore();
-    const querySearchRef = useRef(null);
-    const [searchText, setSearchText] = useState('');
-    // actions
-    const back = () => {
-        setupStore.setSetupState(undefined);
-    };
-    const next = () => {
-        if (querySetupState.currentQuery) {
-            querySetupState
-                .loadQueryProductionizer()
-                .catch(applicationStore.alertUnhandledError);
-        }
-    };
-    const canProceed = querySetupState.currentQuery;
-    // query
-    const queryOptions = querySetupState.queries.map(buildQueryOption);
-    const selectedQueryOption = querySetupState.currentQuery
-        ? buildQueryOption(querySetupState.currentQuery)
-        : null;
-    const onQueryOptionChange = (option) => {
-        if (option?.value !== querySetupState.currentQuery) {
-            querySetupState.setCurrentQuery(option?.value.id);
-        }
-    };
-    // search text
-    const debouncedLoadQueries = useMemo(() => debounce((input) => {
-        flowResult(querySetupState.loadQueries(input)).catch(applicationStore.alertUnhandledError);
-    }, 500), [applicationStore, querySetupState]);
-    const onSearchTextChange = (value) => {
-        if (value !== searchText) {
-            setSearchText(value);
-            debouncedLoadQueries.cancel();
-            debouncedLoadQueries(value);
-        }
-    };
-    useEffect(() => {
-        flowResult(querySetupState.loadQueries('')).catch(applicationStore.alertUnhandledError);
-    }, [querySetupState, applicationStore]);
-    useEffect(() => {
-        querySearchRef.current?.focus();
-    }, []);
-    return (_jsxs("div", { className: "query-setup__wizard query-setup__productionize-query", children: [_jsxs("div", { className: "query-setup__wizard__header query-setup__productionize-query__header", children: [_jsx("button", { className: "query-setup__wizard__header__btn", onClick: back, title: "Back to Main Menu", children: _jsx(ArrowLeftIcon, {}) }), _jsx("div", { className: "query-setup__wizard__header__title", children: "Productionizing an existing query..." }), _jsx("button", { className: clsx('query-setup__wizard__header__btn', {
-                            'query-setup__wizard__header__btn--ready': canProceed,
-                        }), onClick: next, disabled: !canProceed, title: "Productionize query", children: _jsx(ArrowRightIcon, {}) })] }), _jsxs("div", { className: "query-setup__wizard__content", children: [_jsxs("div", { className: "query-setup__wizard__group query-setup__wizard__group--inline", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: _jsx(SearchIcon, {}) }), _jsx(CustomSelectorInput, { ref: querySearchRef, className: "query-setup__wizard__selector", options: queryOptions, isLoading: querySetupState.loadQueriesState.isInProgress, onInputChange: onSearchTextChange, inputValue: searchText, onChange: onQueryOptionChange, value: selectedQueryOption, placeholder: "Search for query by name...", isClearable: true, escapeClearsValue: true, darkMode: true })] }), _jsxs("div", { className: "query-setup__productionize-query__preview", children: [_jsx(PanelLoadingIndicator, { isLoading: querySetupState.loadQueryState.isInProgress }), querySetupState.currentQuery && (_jsxs(_Fragment, { children: [!querySetupState.currentQueryInfo && (_jsx(BlankPanelContent, { children: `Can't preview query` })), querySetupState.currentQueryInfo && (_jsx(TextInputEditor, { inputValue: querySetupState.currentQueryInfo.content, isReadOnly: true, language: EDITOR_LANGUAGE.PURE, showMiniMap: false, hideGutter: true }))] })), !querySetupState.currentQuery && (_jsx(BlankPanelContent, { children: "No query to preview" }))] })] })] }));
-});
-export const UpdateExistingServiceQuerySetup = observer((props) => {
-    const { querySetupState } = props;
-    const applicationStore = useLegendQueryApplicationStore();
-    const setupStore = useQuerySetupStore();
-    const serviceSearchRef = useRef(null);
-    const [searchText, setSearchText] = useState('');
-    const back = () => {
-        setupStore.setSetupState(undefined);
-    };
-    const serviceOptions = querySetupState.services.map(buildServiceOption);
-    const onServiceOptionChange = (option) => {
-        querySetupState
-            .loadServiceUpdater(option.value)
-            .catch(applicationStore.alertUnhandledError);
-    };
-    // search text
-    const debouncedLoadServices = useMemo(() => debounce((input) => {
-        flowResult(querySetupState.loadServices(input)).catch(applicationStore.alertUnhandledError);
-    }, 500), [applicationStore, querySetupState]);
-    const onSearchTextChange = (value) => {
-        if (value !== searchText) {
-            setSearchText(value);
-            debouncedLoadServices.cancel();
-            debouncedLoadServices(value);
-        }
-    };
-    useEffect(() => {
-        flowResult(querySetupState.loadServices('')).catch(applicationStore.alertUnhandledError);
-    }, [querySetupState, applicationStore]);
-    useEffect(() => {
-        serviceSearchRef.current?.focus();
-    }, []);
-    return (_jsxs("div", { className: "query-setup__wizard query-setup__existing-service-query", children: [_jsxs("div", { className: "query-setup__wizard__header query-setup__existing-service-query__header", children: [_jsx("button", { className: "query-setup__wizard__header__btn", onClick: back, title: "Back to Main Menu", children: _jsx(ArrowLeftIcon, {}) }), _jsx("div", { className: "query-setup__wizard__header__title", children: "Updating an existing service query..." })] }), _jsx("div", { className: "query-setup__wizard__content", children: _jsxs("div", { className: "query-setup__wizard__group query-setup__wizard__group--inline query-setup__existing-service-query__search-bar", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: _jsx(SearchIcon, {}) }), _jsx(CustomSelectorInput, { ref: serviceSearchRef, className: "query-setup__wizard__selector", options: serviceOptions, isLoading: querySetupState.loadServicesState.isInProgress, onInputChange: onSearchTextChange, inputValue: searchText, onChange: onServiceOptionChange, placeholder: "Search for service...", darkMode: true, formatOptionLabel: formatServiceOptionLabel })] }) })] }));
-});
-const buildProjectOption = (project) => ({
+export const buildProjectOption = (project) => ({
     label: `${project.groupId}.${project.artifactId}`,
     value: project,
 });
-const buildVersionOption = (version) => ({
+export const buildVersionOption = (version) => ({
     label: version,
     value: version,
 });
-const LoadProjectServiceQuerySetup = observer((props) => {
-    const { querySetupState } = props;
+const QuerySetupLandingPageStoreContext = createContext(undefined);
+const QuerySetupLandingPageStoreProvider = ({ children }) => {
+    const applicationStore = useLegendQueryApplicationStore();
+    const store = useLocalObservable(() => new QuerySetupLandingPageStore(applicationStore));
+    return (_jsx(QuerySetupLandingPageStoreContext.Provider, { value: store, children: children }));
+};
+export const useQuerySetupLandingPageStore = () => guaranteeNonNullable(useContext(QuerySetupLandingPageStoreContext), `Can't find query setup landing page store in context`);
+export const withQuerySetupLandingPageStore = (WrappedComponent) => function WithQuerySetupLandingPageStore() {
+    return (_jsx(QuerySetupLandingPageStoreProvider, { children: _jsx(WrappedComponent, {}) }));
+};
+const QuerySetupAction = observer((props) => {
+    const { action } = props;
+    const setupStore = useQuerySetupLandingPageStore();
     const applicationStore = useApplicationStore();
-    const setupStore = useQuerySetupStore();
-    const back = () => {
-        setupStore.setSetupState(undefined);
-    };
-    // project
-    const projectOptions = querySetupState.projects.map(buildProjectOption);
-    const projectSelectorPlaceholder = querySetupState.loadProjectsState
-        .isInProgress
-        ? 'Loading projects'
-        : querySetupState.loadProjectsState.hasFailed
-            ? 'Error fetching projects'
-            : querySetupState.projects.length
-                ? 'Choose a project'
-                : 'You have no projects, please create or acquire access for at least one';
-    const onProjectOptionChange = (option) => {
-        querySetupState
-            .loadProjectServiceUpdater(option.value)
-            .catch(applicationStore.alertUnhandledError);
+    const onClick = () => {
+        action.action(setupStore).catch(applicationStore.alertUnhandledError);
     };
-    useEffect(() => {
-        flowResult(querySetupState.loadProjects()).catch(applicationStore.alertUnhandledError);
-    }, [querySetupState, applicationStore]);
-    return (_jsxs("div", { className: "query-setup__wizard query-setup__existing-service-query", children: [_jsxs("div", { className: "query-setup__wizard__header query-setup__service-query__header", children: [_jsx("button", { className: "query-setup__wizard__header__btn", onClick: back, title: "Back to Main Menu", children: _jsx(ArrowLeftIcon, {}) }), _jsx("div", { className: "query-setup__wizard__header__title", children: "Load service query from a project..." })] }), _jsx("div", { className: "query-setup__wizard__content", children: _jsx("div", { className: "query-setup__wizard__group query-setup__wizard__group--inline query-setup__existing-service-query__search-bar", children: _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: projectOptions, disabled: querySetupState.loadProjectsState.isInProgress ||
-                            !projectOptions.length, isLoading: querySetupState.loadProjectsState.isInProgress, onChange: onProjectOptionChange, placeholder: projectSelectorPlaceholder, darkMode: true }) }) })] }));
+    if (!setupStore.showAdvancedActions && action.isAdvanced) {
+        return null;
+    }
+    return (_jsxs("button", { className: clsx('query-setup__landing-page__action', action.className, {
+            'query-setup__landing-page__action--advanced': action.isAdvanced,
+        }), tabIndex: -1, onClick: onClick, children: [_jsx("div", { className: "query-setup__landing-page__action__icon", children: action.icon }), _jsx("div", { className: "query-setup__landing-page__action__label", children: action.label })] }));
 });
-const CloneServiceQuerySetup = observer((props) => {
-    const { querySetupState } = props;
-    const applicationStore = useApplicationStore();
-    const setupStore = useQuerySetupStore();
-    // actions
-    const back = () => {
-        setupStore.setSetupState(undefined);
-    };
-    const next = () => {
-        if (querySetupState.currentProject &&
-            querySetupState.currentVersionId &&
-            querySetupState.currentServiceExecutionOption) {
-            applicationStore.navigator.goToLocation(generateServiceQueryCreatorRoute(querySetupState.currentProject.groupId, querySetupState.currentProject.artifactId, querySetupState.currentVersionId, querySetupState.currentServiceExecutionOption.service.path, querySetupState.currentServiceExecutionOption.key));
-        }
-    };
-    const canProceed = querySetupState.currentProject &&
-        querySetupState.currentVersionId &&
-        querySetupState.currentServiceExecutionOption;
-    // project
-    const projectOptions = querySetupState.projects.map(buildProjectOption);
-    const selectedProjectOption = querySetupState.currentProject
-        ? buildProjectOption(querySetupState.currentProject)
-        : null;
-    const projectSelectorPlaceholder = querySetupState.loadProjectsState
-        .isInProgress
-        ? 'Loading projects'
-        : querySetupState.loadProjectsState.hasFailed
-            ? 'Error fetching projects'
-            : querySetupState.projects.length
-                ? 'Choose a project'
-                : 'You have no projects, please create or acquire access for at least one';
-    const onProjectOptionChange = (option) => {
-        if (option?.value !== querySetupState.currentProject) {
-            querySetupState.setCurrentProject(option?.value);
-            // cascade
-            querySetupState.setCurrentVersionId(undefined);
-            querySetupState.setCurrentServiceExecutionOption(undefined);
-        }
-    };
-    // version
-    const versionOptions = [
-        LATEST_VERSION_ALIAS,
-        SNAPSHOT_VERSION_ALIAS,
-        ...(querySetupState.currentProject?.versions ?? []),
-    ]
-        .slice()
-        .sort((v1, v2) => compareSemVerVersions(v2, v1))
-        .map(buildVersionOption);
-    const selectedVersionOption = querySetupState.currentVersionId
-        ? buildVersionOption(querySetupState.currentVersionId)
-        : null;
-    const versionSelectorPlaceholder = !querySetupState.currentProject
-        ? 'No project selected'
-        : 'Choose a version';
-    const onVersionOptionChange = async (option) => {
-        if (option?.value !== querySetupState.currentVersionId) {
-            querySetupState.setCurrentVersionId(option?.value);
-            // cascade
-            querySetupState.setCurrentServiceExecutionOption(undefined);
-            if (querySetupState.currentProject &&
-                querySetupState.currentVersionId) {
-                await flowResult(querySetupState.loadServiceExecutionOptions(querySetupState.currentProject, querySetupState.currentVersionId)).catch(applicationStore.alertUnhandledError);
-            }
-        }
-    };
-    // service and key
-    const serviceExecutionOptions = querySetupState.serviceExecutionOptions.map((option) => ({
-        label: `${option.service.name}${option.key ? ` [${option.key}]` : ''}`,
-        value: option,
-    }));
-    const selectedServiceExecutionOption = querySetupState.currentServiceExecutionOption
-        ? {
-            label: `${querySetupState.currentServiceExecutionOption.service.name}${querySetupState.currentServiceExecutionOption.key
-                ? ` [${querySetupState.currentServiceExecutionOption.key}]`
-                : ''}`,
-            value: querySetupState.currentServiceExecutionOption,
-        }
-        : null;
-    const serviceExecutionSelectorPlaceholder = serviceExecutionOptions.length
-        ? 'Choose a service'
-        : 'No service available';
-    const onServiceExecutionOptionChange = (option) => {
-        querySetupState.setCurrentServiceExecutionOption(option?.value ?? undefined);
-    };
-    useEffect(() => {
-        flowResult(querySetupState.loadProjects()).catch(applicationStore.alertUnhandledError);
-    }, [querySetupState, applicationStore]);
-    return (_jsxs("div", { className: "query-setup__wizard query-setup__service-query", children: [_jsxs("div", { className: "query-setup__wizard__header query-setup__service-query__header", children: [_jsx("button", { className: "query-setup__wizard__header__btn", onClick: back, title: "Back to Main Menu", children: _jsx(ArrowLeftIcon, {}) }), _jsx("div", { className: "query-setup__wizard__header__title", children: "Clone an existing service query..." }), _jsx("button", { className: clsx('query-setup__wizard__header__btn', {
-                            'query-setup__wizard__header__btn--ready': canProceed,
-                        }), onClick: next, disabled: !canProceed, title: "Create a new query", children: _jsx(ArrowRightIcon, {}) })] }), _jsxs("div", { className: "query-setup__wizard__content", children: [_jsxs("div", { className: "query-setup__service-query__project", children: [_jsxs("div", { className: "query-setup__wizard__group", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: "Project" }), _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: projectOptions, disabled: querySetupState.loadProjectsState.isInProgress ||
-                                            !projectOptions.length, isLoading: querySetupState.loadProjectsState.isInProgress, onChange: onProjectOptionChange, value: selectedProjectOption, placeholder: projectSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] }), _jsxs("div", { className: "query-setup__wizard__group", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: "Version" }), _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: versionOptions, disabled: !querySetupState.currentProject, onChange: onVersionOptionChange, value: selectedVersionOption, placeholder: versionSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] })] }), _jsxs("div", { className: "query-setup__service-query__graph", children: [(!querySetupState.currentProject ||
-                                !querySetupState.currentVersionId ||
-                                !querySetupState.loadServiceExecutionsState.hasSucceeded) && (_jsxs("div", { className: "query-setup__service-query__graph__loader", children: [_jsx(PanelLoadingIndicator, { isLoading: Boolean(querySetupState.currentProject) &&
-                                            Boolean(querySetupState.currentVersionId) &&
-                                            !querySetupState.loadServiceExecutionsState.isInProgress }), _jsx(BlankPanelContent, { children: querySetupState.loadServiceExecutionsState.isInProgress
-                                            ? `Surveying service executions...`
-                                            : querySetupState.loadServiceExecutionsState.hasFailed
-                                                ? `Can't load service executions`
-                                                : 'Project and version must be specified' })] })), querySetupState.currentProject &&
-                                querySetupState.currentVersionId &&
-                                querySetupState.loadServiceExecutionsState.hasSucceeded && (_jsx(_Fragment, { children: _jsxs("div", { className: "query-setup__wizard__group", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: "Service" }), _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: serviceExecutionOptions, disabled: !serviceExecutionOptions.length, onChange: onServiceExecutionOptionChange, value: selectedServiceExecutionOption, placeholder: serviceExecutionSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] }) }))] })] })] }));
+const QuerySetupActionGroupConfigMenu = observer(() => {
+    const setupStore = useQuerySetupLandingPageStore();
+    const toggleShowAdvancedActions = () => setupStore.setShowAdvancedActions(!setupStore.showAdvancedActions);
+    const toggleShowAllGroups = () => setupStore.setShowAllGroups(!setupStore.showAllGroups);
+    const reset = () => setupStore.resetConfig();
+    return (_jsxs(MenuContent, { className: "query-setup__landing-page__config-menu", children: [_jsxs(MenuContentItem, { onClick: toggleShowAdvancedActions, children: [_jsx(MenuContentItemIcon, { children: setupStore.showAdvancedActions ? _jsx(CheckIcon, {}) : null }), _jsx(MenuContentItemLabel, { children: "Show advanced actions" })] }), _jsxs(MenuContentItem, { onClick: toggleShowAllGroups, children: [_jsx(MenuContentItemIcon, { children: setupStore.showAllGroups ? _jsx(CheckIcon, {}) : null }), _jsx(MenuContentItemLabel, { children: "Show all action groups" })] }), _jsx(MenuContentDivider, {}), _jsx(MenuContentItem, { disabled: true, children: "Focus on action group:" }), _jsxs(MenuContentItem, { onClick: () => setupStore.setTagToFocus(undefined), children: [_jsx(MenuContentItemIcon, { children: !setupStore.tagToFocus ? _jsx(CheckIcon, {}) : null }), _jsx(MenuContentItemLabel, { children: "(none)" })] }), setupStore.tags.map((groupKey) => (_jsxs(MenuContentItem, { onClick: () => setupStore.setTagToFocus(groupKey), children: [_jsx(MenuContentItemIcon, { children: setupStore.tagToFocus === groupKey ? _jsx(CheckIcon, {}) : null }), _jsx(MenuContentItemLabel, { children: groupKey })] }, groupKey))), _jsx(MenuContentDivider, {}), _jsx(MenuContentItem, { onClick: reset, disabled: !setupStore.isCustomized, children: "Reset" })] }));
 });
-const CreateMappingQuerySetup = observer((props) => {
-    const { querySetupState } = props;
-    const applicationStore = useApplicationStore();
-    const setupStore = useQuerySetupStore();
-    // actions
-    const back = () => {
-        setupStore.setSetupState(undefined);
-    };
-    const next = () => {
-        if (querySetupState.currentProject &&
-            querySetupState.currentVersionId &&
-            querySetupState.currentMapping &&
-            querySetupState.currentRuntime) {
-            applicationStore.navigator.goToLocation(generateMappingQueryCreatorRoute(querySetupState.currentProject.groupId, querySetupState.currentProject.artifactId, querySetupState.currentVersionId, querySetupState.currentMapping.path, querySetupState.currentRuntime.path));
-        }
-    };
-    const canProceed = querySetupState.currentProject &&
-        querySetupState.currentVersionId &&
-        querySetupState.currentMapping &&
-        querySetupState.currentRuntime;
-    // project
-    const projectOptions = querySetupState.projects.map(buildProjectOption);
-    const selectedProjectOption = querySetupState.currentProject
-        ? buildProjectOption(querySetupState.currentProject)
-        : null;
-    const projectSelectorPlaceholder = querySetupState.loadProjectsState
-        .isInProgress
-        ? 'Loading projects'
-        : querySetupState.loadProjectsState.hasFailed
-            ? 'Error fetching projects'
-            : querySetupState.projects.length
-                ? 'Choose a project'
-                : 'You have no projects, please create or acquire access for at least one';
-    const onProjectOptionChange = (option) => {
-        if (option?.value !== querySetupState.currentProject) {
-            querySetupState.setCurrentProject(option?.value);
-            // cascade
-            querySetupState.setCurrentVersionId(undefined);
-            querySetupState.setCurrentMapping(undefined);
-            querySetupState.setCurrentRuntime(undefined);
-        }
-    };
-    // version
-    const versionOptions = [
-        LATEST_VERSION_ALIAS,
-        SNAPSHOT_VERSION_ALIAS,
-        ...(querySetupState.currentProject?.versions ?? []),
-    ]
-        .slice()
-        .sort((v1, v2) => compareSemVerVersions(v2, v1))
-        .map(buildVersionOption);
-    const selectedVersionOption = querySetupState.currentVersionId
-        ? buildVersionOption(querySetupState.currentVersionId)
-        : null;
-    const versionSelectorPlaceholder = !querySetupState.currentProject
-        ? 'No project selected'
-        : 'Choose a version';
-    const onVersionOptionChange = async (option) => {
-        if (option?.value !== querySetupState.currentVersionId) {
-            querySetupState.setCurrentVersionId(option?.value);
-            // cascade
-            querySetupState.setCurrentMapping(undefined);
-            querySetupState.setCurrentRuntime(undefined);
-            if (querySetupState.currentProject &&
-                querySetupState.currentVersionId) {
-                await flowResult(querySetupState.surveyMappingRuntimeCompatibility(querySetupState.currentProject, querySetupState.currentVersionId)).catch(applicationStore.alertUnhandledError);
-            }
-        }
-    };
-    // mapping
-    const mappingOptions = querySetupState.mappingRuntimeCompatibilitySurveyResult.map((result) => buildElementOption(result.mapping));
-    const selectedMappingOption = querySetupState.currentMapping
-        ? {
-            label: querySetupState.currentMapping.name,
-            value: querySetupState.currentMapping,
-        }
-        : null;
-    const mappingSelectorPlaceholder = mappingOptions.length
-        ? 'Choose a mapping'
-        : 'No mapping available';
-    const onMappingOptionChange = (option) => {
-        querySetupState.setCurrentMapping(option?.value);
-        // cascade
-        if (querySetupState.currentMapping) {
-            querySetupState.setCurrentRuntime(getNullableFirstElement(querySetupState.compatibleRuntimes));
-        }
-        else {
-            querySetupState.setCurrentRuntime(undefined);
-        }
-    };
-    // runtime
-    const runtimeOptions = querySetupState.compatibleRuntimes.map(buildElementOption);
-    const selectedRuntimeOption = querySetupState.currentRuntime
-        ? {
-            label: querySetupState.currentRuntime.name,
-            value: querySetupState.currentRuntime,
-        }
-        : null;
-    const runtimeSelectorPlaceholder = !querySetupState.currentMapping
-        ? 'No mapping specified'
-        : runtimeOptions.length
-            ? 'Choose a runtime'
-            : 'No runtime available';
-    const onRuntimeOptionChange = (option) => {
-        querySetupState.setCurrentRuntime(option?.value);
-    };
-    useEffect(() => {
-        flowResult(querySetupState.loadProjects()).catch(applicationStore.alertUnhandledError);
-    }, [querySetupState, applicationStore]);
-    return (_jsxs("div", { className: "query-setup__wizard query-setup__create-query", children: [_jsxs("div", { className: "query-setup__wizard__header query-setup__create-query__header", children: [_jsx("button", { className: "query-setup__wizard__header__btn", onClick: back, title: "Back to Main Menu", children: _jsx(ArrowLeftIcon, {}) }), _jsx("div", { className: "query-setup__wizard__header__title", children: "Creating a new query..." }), _jsx("button", { className: clsx('query-setup__wizard__header__btn', {
-                            'query-setup__wizard__header__btn--ready': canProceed,
-                        }), onClick: next, disabled: !canProceed, title: "Create a new query", children: _jsx(ArrowRightIcon, {}) })] }), _jsxs("div", { className: "query-setup__wizard__content", children: [_jsxs("div", { className: "query-setup__create-query__project", children: [_jsxs("div", { className: "query-setup__wizard__group", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: "Project" }), _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: projectOptions, disabled: querySetupState.loadProjectsState.isInProgress ||
-                                            !projectOptions.length, isLoading: querySetupState.loadProjectsState.isInProgress, onChange: onProjectOptionChange, value: selectedProjectOption, placeholder: projectSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] }), _jsxs("div", { className: "query-setup__wizard__group", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: "Version" }), _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: versionOptions, disabled: !querySetupState.currentProject, onChange: onVersionOptionChange, value: selectedVersionOption, placeholder: versionSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] })] }), _jsxs("div", { className: "query-setup__create-query__graph", children: [(!querySetupState.currentProject ||
-                                !querySetupState.currentVersionId ||
-                                !querySetupState.surveyMappingRuntimeCompatibilityState
-                                    .hasSucceeded) && (_jsxs("div", { className: "query-setup__create-query__graph__loader", children: [_jsx(PanelLoadingIndicator, { isLoading: Boolean(querySetupState.currentProject) &&
-                                            Boolean(querySetupState.currentVersionId) &&
-                                            !querySetupState.surveyMappingRuntimeCompatibilityState
-                                                .hasSucceeded }), _jsx(BlankPanelContent, { children: querySetupState.surveyMappingRuntimeCompatibilityState
-                                            .isInProgress
-                                            ? `Surveying runtime and mapping compatibility...`
-                                            : querySetupState.surveyMappingRuntimeCompatibilityState
-                                                .hasFailed
-                                                ? `Can't load runtime and mapping`
-                                                : 'Project and version must be specified' })] })), querySetupState.currentProject &&
-                                querySetupState.currentVersionId &&
-                                querySetupState.surveyMappingRuntimeCompatibilityState
-                                    .hasSucceeded && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "query-setup__wizard__group", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: "Mapping" }), _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: mappingOptions, disabled: !mappingOptions.length, onChange: onMappingOptionChange, value: selectedMappingOption, placeholder: mappingSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] }), _jsxs("div", { className: "query-setup__wizard__group", children: [_jsx("div", { className: "query-setup__wizard__group__title", children: "Runtime" }), _jsx(CustomSelectorInput, { className: "query-setup__wizard__selector", options: runtimeOptions, disabled: !mappingOptions.length ||
-                                                    !querySetupState.currentMapping, onChange: onRuntimeOptionChange, value: selectedRuntimeOption, placeholder: runtimeSelectorPlaceholder, isClearable: true, escapeClearsValue: true, darkMode: true })] })] }))] })] })] }));
+const QuerySetupActionGroup = observer((props) => {
+    const { tag } = props;
+    const setupStore = useQuerySetupLandingPageStore();
+    const actions = setupStore.actions.filter((action) => action.tag === tag);
+    const createActions = actions.filter((action) => action.isCreateAction);
+    const editActions = actions.filter((action) => !action.isCreateAction);
+    const showAdvancedActions = () => setupStore.setShowAdvancedActions(true);
+    return (_jsxs("div", { className: clsx('query-setup__landing-page__action-group', {
+            'query-setup__landing-page__action-group--with-tag': Boolean(tag),
+        }), children: [tag && (_jsx("div", { className: "query-setup__landing-page__action-group__tag", children: tag })), _jsx("div", { className: "query-setup__landing-page__action-group__header", children: (!tag || setupStore.tagToFocus === tag) && (_jsxs(DropdownMenu, { className: "query-setup__landing-page__action-group__config", title: "Show settings...", content: _jsx(QuerySetupActionGroupConfigMenu, {}), menuProps: {
+                        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+                        transformOrigin: { vertical: 'top', horizontal: 'left' },
+                    }, children: [_jsx(CogIcon, {}), setupStore.isCustomized && (_jsx("div", { className: "query-setup__landing-page__action-group__config__status", children: _jsx(CircleIcon, {}) }))] })) }), _jsxs("div", { className: "query-setup__landing-page__action-group__body", children: [_jsx("div", { className: "query-setup__landing-page__action-group__body__column", children: editActions.map((action) => (_jsx(QuerySetupAction, { action: action }, action.key))) }), _jsx("div", { className: "query-setup__landing-page__action-group__body__column", children: createActions.map((action) => (_jsx(QuerySetupAction, { action: action }, action.key))) })] }), _jsx("div", { className: "query-setup__landing-page__action-group__footer", children: _jsx("div", { className: "query-setup__landing-page__action-group__footer__content", children: !setupStore.showAdvancedActions && (_jsx("button", { className: "query-setup__landing-page__action-group__footer__btn", onClick: showAdvancedActions, tabIndex: -1, title: "Show advanced actions", children: _jsx(MoreHorizontalIcon, {}) })) }) })] }));
 });
-const QuerySetupLandingPage = observer(() => {
-    const setupStore = useQuerySetupStore();
-    const extraQuerySetupOptions = setupStore.pluginManager
-        .getApplicationPlugins()
-        .flatMap((plugin) => plugin.getExtraQuerySetupOptionRendererConfigurations?.() ?? [])
-        .filter(isNonNullable)
-        .map((config) => (_jsx(Fragment, { children: config.renderer(setupStore) }, config.key)));
-    const editQuery = () => setupStore.setSetupState(new EditExistingQuerySetupState(setupStore));
-    const updateServiceQuery = () => setupStore.setSetupState(new UpdateExistingServiceQuerySetupState(setupStore));
-    const cloneServiceQuery = () => setupStore.setSetupState(new CloneServiceQuerySetupState(setupStore));
-    const createMappingQuery = () => setupStore.setSetupState(new CreateMappingQuerySetupState(setupStore));
-    const loadServiceQueryFromProject = () => setupStore.setSetupState(new LoadProjectServiceQuerySetupState(setupStore));
-    const productionizeQuery = () => setupStore.setSetupState(new QueryProductionizationSetupState(setupStore));
+export const QuerySetupLandingPage = withQuerySetupLandingPageStore(observer(() => {
+    const setupStore = useQuerySetupLandingPageStore();
+    const applicationStore = useLegendQueryApplicationStore();
+    const params = getQueryParameters(applicationStore.navigator.getCurrentAddress(), true);
+    const showAdvancedActions = params[LEGEND_QUERY_SETUP_QUERY_PARAM_TOKEN.SHOW_ADVANCED_ACTIONS];
+    const showAllGroups = params[LEGEND_QUERY_SETUP_QUERY_PARAM_TOKEN.SHOW_ALL_GROUPS];
+    const tagToFocus = params[LEGEND_QUERY_SETUP_QUERY_PARAM_TOKEN.TAG];
+    const goToStudio = () => applicationStore.navigator.visitAddress(applicationStore.config.studioUrl);
+    const showAllActionGroup = () => setupStore.setShowAllGroups(true);
+    useEffect(() => {
+        setupStore.initialize(showAdvancedActions, showAllGroups, tagToFocus);
+    }, [setupStore, showAdvancedActions, showAllGroups, tagToFocus]);
+    return (_jsx("div", { className: "query-setup", children: _jsx("div", { className: "query-setup__landing-page", children: setupStore.initState.hasCompleted && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "query-setup__landing-page__title", children: ["What do you want to do today", _jsx(QuestionCircleIcon, { className: "query-setup__landing-page__title__question-mark", title: "Choose one of the option below to start" })] }), _jsxs("div", { className: "query-setup__landing-page__actions", children: [setupStore.tagToFocus && (_jsx(QuerySetupActionGroup, { tag: setupStore.tagToFocus })), !setupStore.tagToFocus && (_jsxs(_Fragment, { children: [_jsx(QuerySetupActionGroup, {}), setupStore.showAllGroups && (_jsxs(_Fragment, { children: [setupStore.tags.map((tag) => (_jsx(QuerySetupActionGroup, { tag: tag }, tag))), _jsxs("div", { className: "query-setup__landing-page__action-group query-setup__landing-page__action-group--studio", children: [_jsx("div", { className: "query-setup__landing-page__action-group__tag", children: "Developer Workstation" }), _jsx("div", { className: "query-setup__landing-page__action-group__header" }), _jsx("div", { className: "query-setup__landing-page__action-group__body", children: _jsxs("button", { className: "query-setup__landing-page__action query-setup__landing-page__action--studio", onClick: goToStudio, tabIndex: -1, children: [_jsx("div", { className: "query-setup__landing-page__action__icon", children: _jsx(PencilIcon, {}) }), _jsx("div", { className: "query-setup__landing-page__action__label", children: "Open Legend Studio" })] }) }), _jsx("div", { className: "query-setup__landing-page__action-group__footer" })] })] })), !setupStore.showAllGroups && (_jsx("div", { className: "query-setup__landing-page__footer", children: _jsx("button", { className: "query-setup__landing-page__footer__more-btn", onClick: showAllActionGroup, tabIndex: -1, title: "Show all action groups", children: _jsx(ChevronDownThinIcon, {}) }) }))] }))] })] })) }) }));
+}));
+export const BaseQuerySetupStoreContext = createContext(undefined);
+export const useBaseQuerySetupStore = () => guaranteeNonNullable(useContext(BaseQuerySetupStoreContext), `Can't find base query setup store in context`);
+export const BaseQuerySetup = observer((props) => {
+    const { children } = props;
+    const setupStore = useBaseQuerySetupStore();
     useEffect(() => {
         setupStore.initialize();
     }, [setupStore]);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "query-setup__landing-page", children: [_jsx(PanelLoadingIndicator, { isLoading: setupStore.initState.isInProgress }), setupStore.initState.hasCompleted && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "query-setup__landing-page__title", children: ["What do you want to do today", _jsx(QuestionCircleIcon, { className: "query-setup__landing-page__title__question-mark", title: "Choose one of the option below to start" })] }), _jsxs("div", { className: "query-setup__landing-page__options", children: [_jsxs("button", { className: "query-setup__landing-page__option query-setup__landing-page__option--existing-query", onClick: editQuery, children: [_jsx("div", { className: "query-setup__landing-page__option__icon", children: _jsx(ManageSearchIcon, { className: "query-setup__landing-page__icon--search" }) }), _jsx("div", { className: "query-setup__landing-page__option__label", children: "Load an existing query" })] }), extraQuerySetupOptions, _jsxs("button", { className: "query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--create-query", onClick: createMappingQuery, children: [_jsx("div", { className: "query-setup__landing-page__option__icon", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "query-setup__landing-page__option__label", children: "Create new query on a mapping" })] }), _jsxs("button", { className: "query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--service-query", onClick: cloneServiceQuery, children: [_jsx("div", { className: "query-setup__landing-page__option__icon", children: _jsx(RobotIcon, {}) }), _jsx("div", { className: "query-setup__landing-page__option__label", children: "Clone an existing service query" })] }), _jsxs("button", { className: "query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--service-query", onClick: updateServiceQuery, children: [_jsx("div", { className: "query-setup__landing-page__option__icon", children: _jsx(DroidIcon, {}) }), _jsx("div", { className: "query-setup__landing-page__option__label", children: "Update an existing service query" })] }), _jsxs("button", { className: "query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--service-query", onClick: loadServiceQueryFromProject, children: [_jsx("div", { className: "query-setup__landing-page__option__icon", children: _jsx(DroidIcon, {}) }), _jsx("div", { className: "query-setup__landing-page__option__label", children: "Load service query from a project" })] }), _jsxs("button", { className: "query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--service-query", onClick: productionizeQuery, children: [_jsx("div", { className: "query-setup__landing-page__option__icon", children: _jsx(ArrowCirceUpIcon, {}) }), _jsx("div", { className: "query-setup__landing-page__option__label", children: "Productionize an existing query" })] })] })] }))] }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(PanelLoadingIndicator, { isLoading: setupStore.initState.isInProgress }), setupStore.initState.hasCompleted && (_jsx("div", { className: "query-setup", children: children }))] }));
 });
-export const QuerySetup = withQuerySetupStore(observer(() => {
-    const setupStore = useQuerySetupStore();
-    const querySetupState = setupStore.querySetupState;
-    const renderQuerySetupScreen = (setupState) => {
-        if (setupState instanceof EditExistingQuerySetupState) {
-            return _jsx(EditExistingQuerySetup, { querySetupState: setupState });
-        }
-        else if (setupState instanceof CreateMappingQuerySetupState) {
-            return _jsx(CreateMappingQuerySetup, { querySetupState: setupState });
-        }
-        else if (setupState instanceof CloneServiceQuerySetupState) {
-            return _jsx(CloneServiceQuerySetup, { querySetupState: setupState });
-        }
-        else if (setupState instanceof UpdateExistingServiceQuerySetupState) {
-            return _jsx(UpdateExistingServiceQuerySetup, { querySetupState: setupState });
-        }
-        else if (setupState instanceof LoadProjectServiceQuerySetupState) {
-            return _jsx(LoadProjectServiceQuerySetup, { querySetupState: setupState });
-        }
-        else if (setupState instanceof QueryProductionizationSetupState) {
-            return _jsx(QueryProductionizationSetup, { querySetupState: setupState });
-        }
-        const extraQuerySetupRenderers = setupStore.pluginManager
-            .getApplicationPlugins()
-            .flatMap((plugin) => plugin.getExtraQuerySetupRenderers?.() ?? []);
-        for (const querySetupRenderer of extraQuerySetupRenderers) {
-            const elementEditor = querySetupRenderer(setupState);
-            if (elementEditor) {
-                return elementEditor;
-            }
-        }
-        return null;
-    };
-    return (_jsxs("div", { className: "query-setup", children: [!querySetupState && _jsx(QuerySetupLandingPage, {}), querySetupState && renderQuerySetupScreen(querySetupState)] }));
-}));
 //# sourceMappingURL=QuerySetup.js.map