@finos/legend-application-query 8.1.2 → 9.0.0

package/src/components/LoadProjectServiceQuerySetup.tsx

@@ -0,0 +1,131 @@
+/**
+ * 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 { ArrowLeftIcon, CustomSelectorInput } from '@finos/legend-art';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import { useContext, useEffect } from 'react';
+import { generateQuerySetupRoute } from '../stores/LegendQueryRouter.js';
+import { useDepotServerClient } from '@finos/legend-server-depot';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
+import { LoadProjectServiceQuerySetupStore } from '../stores/LoadProjectServiceQuerySetupStore.js';
+import {
+  BaseQuerySetup,
+  BaseQuerySetupStoreContext,
+  buildProjectOption,
+  type ProjectOption,
+} from './QuerySetup.js';
+import {} from '@finos/legend-query-builder';
+import { useApplicationStore } from '@finos/legend-application';
+
+const LoadProjectServiceQuerySetupStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const store = useLocalObservable(
+    () =>
+      new LoadProjectServiceQuerySetupStore(
+        applicationStore,
+        depotServerClient,
+      ),
+  );
+  return (
+    <BaseQuerySetupStoreContext.Provider value={store}>
+      {children}
+    </BaseQuerySetupStoreContext.Provider>
+  );
+};
+
+const useLoadProjectServiceQuerySetupStore =
+  (): LoadProjectServiceQuerySetupStore =>
+    guaranteeType(
+      useContext(BaseQuerySetupStoreContext),
+      LoadProjectServiceQuerySetupStore,
+      `Can't find query setup store in context`,
+    );
+
+const LoadProjectServiceQuerySetupContent = observer(() => {
+  const applicationStore = useApplicationStore();
+  const setupStore = useLoadProjectServiceQuerySetupStore();
+
+  const back = (): void => {
+    applicationStore.navigator.goToLocation(generateQuerySetupRoute());
+  };
+
+  // project
+  const projectOptions = setupStore.projects.map(buildProjectOption);
+  const projectSelectorPlaceholder = setupStore.loadProjectsState.isInProgress
+    ? 'Loading projects'
+    : setupStore.loadProjectsState.hasFailed
+    ? 'Error fetching projects'
+    : setupStore.projects.length
+    ? 'Choose a project'
+    : 'You have no projects, please create or acquire access for at least one';
+  const onProjectOptionChange = (option: ProjectOption): void => {
+    setupStore
+      .loadProjectServiceUpdater(option.value)
+      .catch(applicationStore.alertUnhandledError);
+  };
+
+  useEffect(() => {
+    flowResult(setupStore.loadProjects()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [setupStore, applicationStore]);
+
+  return (
+    <div className="query-setup__wizard query-setup__existing-service-query">
+      <div className="query-setup__wizard__header query-setup__service-query__header">
+        <button
+          className="query-setup__wizard__header__btn"
+          onClick={back}
+          title="Back to Main Menu"
+        >
+          <ArrowLeftIcon />
+        </button>
+        <div className="query-setup__wizard__header__title">
+          Load service query from a project...
+        </div>
+      </div>
+      <div className="query-setup__wizard__content">
+        <div className="query-setup__wizard__group query-setup__wizard__group--inline query-setup__existing-service-query__search-bar">
+          <CustomSelectorInput
+            className="query-setup__wizard__selector"
+            options={projectOptions}
+            disabled={
+              setupStore.loadProjectsState.isInProgress ||
+              !projectOptions.length
+            }
+            isLoading={setupStore.loadProjectsState.isInProgress}
+            onChange={onProjectOptionChange}
+            placeholder={projectSelectorPlaceholder}
+            darkMode={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const LoadProjectServiceQuerySetup: React.FC = () => (
+  <LoadProjectServiceQuerySetupStoreProvider>
+    <BaseQuerySetup>
+      <LoadProjectServiceQuerySetupContent />
+    </BaseQuerySetup>
+  </LoadProjectServiceQuerySetupStoreProvider>
+);

package/src/components/QueryEditor.tsx

@@ -17,10 +17,8 @@
 import {
   type SelectComponent,
   Dialog,
-  ArrowLeftIcon,
   ExternalLinkSquareIcon,
   PanelLoadingIndicator,
-  RobotIcon,
   SaveIcon,
   BlankPanelContent,
   clsx,
@@ -31,6 +29,15 @@ import {
   CheckSquareIcon,
   SquareIcon,
   ManageSearchIcon,
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
+  MenuIcon,
+  MenuContentDivider,
+  MenuContentItemIcon,
+  CheckIcon,
+  MenuContentItemLabel,
 } from '@finos/legend-art';
 import { debounce, getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -40,18 +47,17 @@ import {
   type ExistingQueryEditorPathParams,
   type ServiceQueryCreatorPathParams,
   type ServiceQueryCreatorQueryParams,
-  LEGEND_QUERY_ROUTE_PATTERN,
   LEGEND_QUERY_QUERY_PARAM_TOKEN,
   LEGEND_QUERY_PATH_PARAM_TOKEN,
-  EXTERNAL_APPLICATION_NAVIGATION__generateStudioProjectViewUrl,
   generateExistingQueryEditorRoute,
+  generateQuerySetupRoute,
 } from '../stores/LegendQueryRouter.js';
 import {
   type QueryEditorStore,
-  MappingQueryCreatorStore,
   ExistingQueryEditorStore,
   QueryExportState,
-  ServiceQueryCreatorStore,
+  createViewProjectHandler,
+  createViewSDLCProjectHandler,
 } from '../stores/QueryEditorStore.js';
 import { useApplicationStore, useParams } from '@finos/legend-application';
 import {
@@ -60,14 +66,12 @@ import {
   ServiceQueryCreatorStoreProvider,
   useQueryEditorStore,
 } from './QueryEditorStoreProvider.js';
-import {
-  type RawLambda,
-  extractElementNameFromPath,
-} from '@finos/legend-graph';
+import type { RawLambda } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
 import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
 import {
   QueryBuilder,
+  QueryBuilderNavigationBlocker,
   type QueryBuilderState,
 } from '@finos/legend-query-builder';
 
@@ -156,46 +160,6 @@ const QueryExport = observer(() => {
   );
 });
 
-const renderQueryEditorHeaderLabel = (
-  editorStore: QueryEditorStore,
-): React.ReactNode => {
-  if (editorStore instanceof ExistingQueryEditorStore) {
-    return (
-      <div className="query-editor__header__label query-editor__header__label--existing-query">
-        {editorStore.query.name}
-      </div>
-    );
-  } else if (editorStore instanceof MappingQueryCreatorStore) {
-    return (
-      <div className="query-editor__header__label query-editor__header__label--create-query">
-        New Query
-      </div>
-    );
-  } else if (editorStore instanceof ServiceQueryCreatorStore) {
-    return (
-      <div className="query-editor__header__label query-editor__header__label--service-query">
-        <RobotIcon className="query-editor__header__label__icon" />
-        {extractElementNameFromPath(editorStore.servicePath)}
-        {editorStore.executionKey && (
-          <div className="query-editor__header__label__tag">
-            {editorStore.executionKey}
-          </div>
-        )}
-      </div>
-    );
-  }
-  const extraQueryEditorHeaderLabelers = editorStore.pluginManager
-    .getApplicationPlugins()
-    .flatMap((plugin) => plugin.getExtraQueryEditorHeaderLabelers?.() ?? []);
-  for (const labeler of extraQueryEditorHeaderLabelers) {
-    const label = labeler(editorStore);
-    if (label) {
-      return label;
-    }
-  }
-  return null;
-};
-
 const QueryLoader = observer(
   (props: {
     editorStore: QueryEditorStore;
@@ -253,8 +217,9 @@ const QueryLoader = observer(
       if (selectedQueryID) {
         queryBuilderState.changeDetectionState.alertUnsavedChanges(() => {
           editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
-          applicationStore.navigator.reloadToLocation(
+          applicationStore.navigator.goToLocation(
             generateExistingQueryEditorRoute(selectedQueryID),
+            { ignoreBlocking: true },
           );
         });
       }
@@ -418,16 +383,22 @@ const QueryEditorHeaderContent = observer(
     const openQueryLoader = (): void => {
       editorStore.queryLoaderState.setIsQueryLoaderOpen(true);
     };
-    const viewQueryProject = (): void => {
+    const viewProject = (): void => {
       const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
-      applicationStore.navigator.visitAddress(
-        EXTERNAL_APPLICATION_NAVIGATION__generateStudioProjectViewUrl(
-          applicationStore.config.studioUrl,
-          groupId,
-          artifactId,
-          versionId,
-          undefined,
-        ),
+      createViewProjectHandler(applicationStore)(
+        groupId,
+        artifactId,
+        versionId,
+        undefined,
+      );
+    };
+    const viewSDLCProject = (): void => {
+      const { groupId, artifactId } = editorStore.getProjectInfo();
+      createViewSDLCProjectHandler(
+        applicationStore,
+        editorStore.depotServerClient,
+      )(groupId, artifactId, undefined).catch(
+        applicationStore.alertUnhandledError,
       );
     };
     const toggleLightDarkMode = (): void =>
@@ -451,9 +422,7 @@ const QueryEditorHeaderContent = observer(
 
     return (
       <div className="query-editor__header__content">
-        <div className="query-editor__header__content__main">
-          {renderQueryEditorHeaderLabel(editorStore)}
-        </div>
+        <div className="query-editor__header__content__main" />
         <div className="query-editor__header__actions">
           {editorStore instanceof ExistingQueryEditorStore &&
             applicationStore.pluginManager
@@ -482,14 +451,33 @@ const QueryEditorHeaderContent = observer(
               queryBuilderState={queryBuilderState}
             />
           )}
-          <button
-            className="query-editor__header__action btn--dark"
-            tabIndex={-1}
-            title="View project"
-            onClick={viewQueryProject}
-          >
-            <ExternalLinkSquareIcon />
-          </button>
+          <div className="query-editor__header__action query-editor__header__action__view-project">
+            <button
+              className="query-editor__header__action__view-project__btn btn--dark"
+              disabled={editorStore.isViewProjectActionDisabled}
+              tabIndex={-1}
+              title="View project"
+              onClick={viewProject}
+            >
+              <ExternalLinkSquareIcon />
+            </button>
+            <DropdownMenu
+              className="query-editor__header__action__view-project__dropdown-trigger btn--dark"
+              disabled={editorStore.isViewProjectActionDisabled}
+              content={
+                <MenuContent>
+                  <MenuContentItem
+                    disabled={editorStore.isViewProjectActionDisabled}
+                    onClick={viewSDLCProject}
+                  >
+                    View SDLC project
+                  </MenuContentItem>
+                </MenuContent>
+              }
+            >
+              <CaretDownIcon />
+            </DropdownMenu>
+          </div>
           {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
             <button
               className="query-editor__header__action btn--dark"
@@ -507,6 +495,7 @@ const QueryEditorHeaderContent = observer(
           <button
             className="query-editor__header__action btn--dark"
             tabIndex={-1}
+            disabled={editorStore.isSaveActionDisabled}
             onClick={saveQuery}
             title="Save query"
           >
@@ -523,8 +512,27 @@ export const QueryEditor = observer(() => {
   const applicationStore = useApplicationStore();
   const editorStore = useQueryEditorStore();
   const isLoadingEditor = !editorStore.initState.hasCompleted;
-  const backToMainMenu = (): void =>
-    applicationStore.navigator.goToLocation(LEGEND_QUERY_ROUTE_PATTERN.SETUP);
+
+  // documentation
+  const appDocUrl = applicationStore.documentationService.url;
+  const goToDocumentation = (): void => {
+    if (appDocUrl) {
+      applicationStore.navigator.visitAddress(appDocUrl);
+    }
+  };
+  // go to setup page
+  const goToQuerySetup = (): void =>
+    applicationStore.navigator.visitAddress(
+      applicationStore.navigator.generateAddress(generateQuerySetupRoute()),
+    );
+  // settings
+  // NOTE: this is temporary until we find a better home for these settings in query builder
+  const engineConfig =
+    editorStore.graphManagerState.graphManager.TEMPORARY__getEngineConfig();
+  const toggleEngineClientRequestPayloadCompression = (): void =>
+    engineConfig.setUseClientRequestPayloadCompression(
+      !engineConfig.useClientRequestPayloadCompression,
+    );
 
   useEffect(() => {
     flowResult(editorStore.initialize()).catch(
@@ -550,13 +558,46 @@ export const QueryEditor = observer(() => {
       ])}
     >
       <div className="query-editor__header">
-        <button
-          className="query-editor__header__back-btn btn--dark"
-          onClick={backToMainMenu}
-          title="Back to Main Menu"
-        >
-          <ArrowLeftIcon />
-        </button>
+        <div className="query-editor__header__menu">
+          <DropdownMenu
+            className="query-editor__header__menu-item"
+            menuProps={{
+              anchorOrigin: { vertical: 'top', horizontal: 'right' },
+              transformOrigin: { vertical: 'top', horizontal: 'left' },
+              elevation: 7,
+            }}
+            content={
+              <MenuContent>
+                {/* <MenuContentItem onClick={openHelp}>Help...</MenuContentItem> */}
+                <MenuContentItem
+                  disabled={!appDocUrl}
+                  onClick={goToDocumentation}
+                >
+                  See Documentation
+                </MenuContentItem>
+                <MenuContentItem onClick={goToQuerySetup}>
+                  Back to query setup
+                </MenuContentItem>
+                <MenuContentDivider />
+                <MenuContentItem disabled={true}>Settings</MenuContentItem>
+                <MenuContentItem
+                  onClick={toggleEngineClientRequestPayloadCompression}
+                >
+                  <MenuContentItemIcon>
+                    {engineConfig.useClientRequestPayloadCompression ? (
+                      <CheckIcon />
+                    ) : null}
+                  </MenuContentItemIcon>
+                  <MenuContentItemLabel>
+                    Compress request payload
+                  </MenuContentItemLabel>
+                </MenuContentItem>
+              </MenuContent>
+            }
+          >
+            <MenuIcon />
+          </DropdownMenu>
+        </div>
         {!isLoadingEditor && editorStore.queryBuilderState && (
           <QueryEditorHeaderContent
             queryBuilderState={editorStore.queryBuilderState}
@@ -566,7 +607,12 @@ export const QueryEditor = observer(() => {
       <div className="query-editor__content">
         <PanelLoadingIndicator isLoading={isLoadingEditor} />
         {!isLoadingEditor && editorStore.queryBuilderState && (
-          <QueryBuilder queryBuilderState={editorStore.queryBuilderState} />
+          <>
+            <QueryBuilderNavigationBlocker
+              queryBuilderState={editorStore.queryBuilderState}
+            />
+            <QueryBuilder queryBuilderState={editorStore.queryBuilderState} />
+          </>
         )}
         {(isLoadingEditor || !editorStore.queryBuilderState) && (
           <BlankPanelContent>

package/src/components/QueryProductionizerSetup.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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 {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  BlankPanelContent,
+  clsx,
+  CustomSelectorInput,
+  PanelLoadingIndicator,
+  SearchIcon,
+  type SelectComponent,
+} from '@finos/legend-art';
+import { debounce, guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useDepotServerClient } from '@finos/legend-server-depot';
+import {
+  EDITOR_LANGUAGE,
+  TextInputEditor,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
+import { QueryProductionizerSetupStore } from '../stores/QueryProductionizerSetupStore.js';
+import { BaseQuerySetup, BaseQuerySetupStoreContext } from './QuerySetup.js';
+import {
+  buildQueryOption,
+  type QueryOption,
+} from '@finos/legend-query-builder';
+import { generateQuerySetupRoute } from '../stores/LegendQueryRouter.js';
+
+const QueryProductionizerSetupStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const store = useLocalObservable(
+    () =>
+      new QueryProductionizerSetupStore(applicationStore, depotServerClient),
+  );
+  return (
+    <BaseQuerySetupStoreContext.Provider value={store}>
+      {children}
+    </BaseQuerySetupStoreContext.Provider>
+  );
+};
+
+const useQueryProductionizerSetupStore = (): QueryProductionizerSetupStore =>
+  guaranteeType(
+    useContext(BaseQuerySetupStoreContext),
+    QueryProductionizerSetupStore,
+    `Can't find query setup store in context`,
+  );
+
+const QueryProductionizerSetupContent = observer(() => {
+  const applicationStore = useApplicationStore();
+  const setupStore = useQueryProductionizerSetupStore();
+  const querySearchRef = useRef<SelectComponent>(null);
+  const [searchText, setSearchText] = useState('');
+
+  // actions
+  const back = (): void => {
+    applicationStore.navigator.goToLocation(generateQuerySetupRoute());
+  };
+  const next = (): void => {
+    if (setupStore.currentQuery) {
+      setupStore
+        .loadQueryProductionizer()
+        .catch(applicationStore.alertUnhandledError);
+    }
+  };
+  const canProceed = setupStore.currentQuery;
+
+  // query
+  const queryOptions = setupStore.queries.map(buildQueryOption);
+  const selectedQueryOption = setupStore.currentQuery
+    ? buildQueryOption(setupStore.currentQuery)
+    : null;
+  const onQueryOptionChange = (option: QueryOption | null): void => {
+    if (option?.value !== setupStore.currentQuery) {
+      setupStore.setCurrentQuery(option?.value.id);
+    }
+  };
+
+  // search text
+  const debouncedLoadQueries = useMemo(
+    () =>
+      debounce((input: string): void => {
+        flowResult(setupStore.loadQueries(input)).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }, 500),
+    [applicationStore, setupStore],
+  );
+  const onSearchTextChange = (value: string): void => {
+    if (value !== searchText) {
+      setSearchText(value);
+      debouncedLoadQueries.cancel();
+      debouncedLoadQueries(value);
+    }
+  };
+
+  useEffect(() => {
+    flowResult(setupStore.loadQueries('')).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [setupStore, applicationStore]);
+
+  useEffect(() => {
+    querySearchRef.current?.focus();
+  }, []);
+
+  return (
+    <div className="query-setup__wizard query-setup__productionize-query">
+      <div className="query-setup__wizard__header query-setup__productionize-query__header">
+        <button
+          className="query-setup__wizard__header__btn"
+          onClick={back}
+          title="Back to Main Menu"
+        >
+          <ArrowLeftIcon />
+        </button>
+        <div className="query-setup__wizard__header__title">
+          Productionizing an existing query...
+        </div>
+        <button
+          className={clsx('query-setup__wizard__header__btn', {
+            'query-setup__wizard__header__btn--ready': canProceed,
+          })}
+          onClick={next}
+          disabled={!canProceed}
+          title="Productionize query"
+        >
+          <ArrowRightIcon />
+        </button>
+      </div>
+      <div className="query-setup__wizard__content">
+        <div className="query-setup__wizard__group query-setup__wizard__group--inline">
+          <div className="query-setup__wizard__group__title">
+            <SearchIcon />
+          </div>
+          <CustomSelectorInput
+            ref={querySearchRef}
+            className="query-setup__wizard__selector"
+            options={queryOptions}
+            isLoading={setupStore.loadQueriesState.isInProgress}
+            onInputChange={onSearchTextChange}
+            inputValue={searchText}
+            onChange={onQueryOptionChange}
+            value={selectedQueryOption}
+            placeholder="Search for query by name..."
+            isClearable={true}
+            escapeClearsValue={true}
+            darkMode={true}
+          />
+        </div>
+        <div className="query-setup__productionize-query__preview">
+          <PanelLoadingIndicator
+            isLoading={setupStore.loadQueryState.isInProgress}
+          />
+          {setupStore.currentQuery && (
+            <>
+              {!setupStore.currentQueryInfo && (
+                <BlankPanelContent>{`Can't preview query`}</BlankPanelContent>
+              )}
+              {setupStore.currentQueryInfo && (
+                <TextInputEditor
+                  inputValue={setupStore.currentQueryInfo.content}
+                  isReadOnly={true}
+                  language={EDITOR_LANGUAGE.PURE}
+                  showMiniMap={false}
+                  hideGutter={true}
+                />
+              )}
+            </>
+          )}
+          {!setupStore.currentQuery && (
+            <BlankPanelContent>No query to preview</BlankPanelContent>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const QueryProductionizerSetup: React.FC = () => (
+  <QueryProductionizerSetupStoreProvider>
+    <BaseQuerySetup>
+      <QueryProductionizerSetupContent />
+    </BaseQuerySetup>
+  </QueryProductionizerSetupStoreProvider>
+);