@finos/legend-application-query 8.1.2 → 9.0.0

package/src/components/CreateMappingQuerySetup.tsx

@@ -0,0 +1,352 @@
+/**
+ * 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,
+} from '@finos/legend-art';
+import { getNullableFirstElement, guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import { useContext, useEffect } from 'react';
+import {
+  generateMappingQueryCreatorRoute,
+  generateQuerySetupRoute,
+} from '../stores/LegendQueryRouter.js';
+import {
+  LATEST_VERSION_ALIAS,
+  SNAPSHOT_VERSION_ALIAS,
+  useDepotServerClient,
+} from '@finos/legend-server-depot';
+import {
+  useApplicationStore,
+  buildElementOption,
+  type PackageableElementOption,
+} from '@finos/legend-application';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
+import { CreateMappingQuerySetupStore } from '../stores/CreateMappingQuerySetupStore.js';
+import {
+  BaseQuerySetup,
+  BaseQuerySetupStoreContext,
+  buildProjectOption,
+  buildVersionOption,
+  type ProjectOption,
+  type VersionOption,
+} from './QuerySetup.js';
+import { compareSemVerVersions } from '@finos/legend-storage';
+import type { Mapping, PackageableRuntime } from '@finos/legend-graph';
+
+const CreateMappingQuerySetupStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const store = useLocalObservable(
+    () => new CreateMappingQuerySetupStore(applicationStore, depotServerClient),
+  );
+  return (
+    <BaseQuerySetupStoreContext.Provider value={store}>
+      {children}
+    </BaseQuerySetupStoreContext.Provider>
+  );
+};
+
+const useCreateMappingQuerySetupStore = (): CreateMappingQuerySetupStore =>
+  guaranteeType(
+    useContext(BaseQuerySetupStoreContext),
+    CreateMappingQuerySetupStore,
+    `Can't find query setup store in context`,
+  );
+
+const CreateMappingQuerySetupContent = observer(() => {
+  const setupStore = useCreateMappingQuerySetupStore();
+  const applicationStore = useApplicationStore();
+
+  // actions
+  const back = (): void => {
+    applicationStore.navigator.goToLocation(generateQuerySetupRoute());
+  };
+  const next = (): void => {
+    if (
+      setupStore.currentProject &&
+      setupStore.currentVersionId &&
+      setupStore.currentMapping &&
+      setupStore.currentRuntime
+    ) {
+      applicationStore.navigator.goToLocation(
+        generateMappingQueryCreatorRoute(
+          setupStore.currentProject.groupId,
+          setupStore.currentProject.artifactId,
+          setupStore.currentVersionId,
+          setupStore.currentMapping.path,
+          setupStore.currentRuntime.path,
+        ),
+      );
+    }
+  };
+  const canProceed =
+    setupStore.currentProject &&
+    setupStore.currentVersionId &&
+    setupStore.currentMapping &&
+    setupStore.currentRuntime;
+
+  // project
+  const projectOptions = setupStore.projects.map(buildProjectOption);
+  const selectedProjectOption = setupStore.currentProject
+    ? buildProjectOption(setupStore.currentProject)
+    : null;
+  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 | null): void => {
+    if (option?.value !== setupStore.currentProject) {
+      setupStore.setCurrentProject(option?.value);
+      // cascade
+      setupStore.setCurrentVersionId(undefined);
+      setupStore.setCurrentMapping(undefined);
+      setupStore.setCurrentRuntime(undefined);
+    }
+  };
+
+  // version
+  const versionOptions = [
+    LATEST_VERSION_ALIAS,
+    SNAPSHOT_VERSION_ALIAS,
+    ...(setupStore.currentProject?.versions ?? []),
+  ]
+    .slice()
+    .sort((v1, v2) => compareSemVerVersions(v2, v1))
+    .map(buildVersionOption);
+  const selectedVersionOption = setupStore.currentVersionId
+    ? buildVersionOption(setupStore.currentVersionId)
+    : null;
+  const versionSelectorPlaceholder = !setupStore.currentProject
+    ? 'No project selected'
+    : 'Choose a version';
+  const onVersionOptionChange = async (
+    option: VersionOption | null,
+  ): Promise<void> => {
+    if (option?.value !== setupStore.currentVersionId) {
+      setupStore.setCurrentVersionId(option?.value);
+      // cascade
+      setupStore.setCurrentMapping(undefined);
+      setupStore.setCurrentRuntime(undefined);
+      if (setupStore.currentProject && setupStore.currentVersionId) {
+        await flowResult(
+          setupStore.surveyMappingRuntimeCompatibility(
+            setupStore.currentProject,
+            setupStore.currentVersionId,
+          ),
+        ).catch(applicationStore.alertUnhandledError);
+      }
+    }
+  };
+
+  // mapping
+  const mappingOptions = setupStore.mappingRuntimeCompatibilitySurveyResult.map(
+    (result) => buildElementOption(result.mapping),
+  );
+  const selectedMappingOption = setupStore.currentMapping
+    ? {
+        label: setupStore.currentMapping.name,
+        value: setupStore.currentMapping,
+      }
+    : null;
+  const mappingSelectorPlaceholder = mappingOptions.length
+    ? 'Choose a mapping'
+    : 'No mapping available';
+  const onMappingOptionChange = (
+    option: PackageableElementOption<Mapping> | null,
+  ): void => {
+    setupStore.setCurrentMapping(option?.value);
+    // cascade
+    if (setupStore.currentMapping) {
+      setupStore.setCurrentRuntime(
+        getNullableFirstElement(setupStore.compatibleRuntimes),
+      );
+    } else {
+      setupStore.setCurrentRuntime(undefined);
+    }
+  };
+
+  // runtime
+  const runtimeOptions = setupStore.compatibleRuntimes.map(buildElementOption);
+  const selectedRuntimeOption = setupStore.currentRuntime
+    ? {
+        label: setupStore.currentRuntime.name,
+        value: setupStore.currentRuntime,
+      }
+    : null;
+  const runtimeSelectorPlaceholder = !setupStore.currentMapping
+    ? 'No mapping specified'
+    : runtimeOptions.length
+    ? 'Choose a runtime'
+    : 'No runtime available';
+  const onRuntimeOptionChange = (
+    option: PackageableElementOption<PackageableRuntime> | null,
+  ): void => {
+    setupStore.setCurrentRuntime(option?.value);
+  };
+
+  useEffect(() => {
+    flowResult(setupStore.loadProjects()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [setupStore, applicationStore]);
+
+  return (
+    <div className="query-setup__wizard query-setup__create-query">
+      <div className="query-setup__wizard__header query-setup__create-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">
+          Creating a new query...
+        </div>
+        <button
+          className={clsx('query-setup__wizard__header__btn', {
+            'query-setup__wizard__header__btn--ready': canProceed,
+          })}
+          onClick={next}
+          disabled={!canProceed}
+          title="Create a new query"
+        >
+          <ArrowRightIcon />
+        </button>
+      </div>
+      <div className="query-setup__wizard__content">
+        <div className="query-setup__create-query__project">
+          <div className="query-setup__wizard__group">
+            <div className="query-setup__wizard__group__title">Project</div>
+            <CustomSelectorInput
+              className="query-setup__wizard__selector"
+              options={projectOptions}
+              disabled={
+                setupStore.loadProjectsState.isInProgress ||
+                !projectOptions.length
+              }
+              isLoading={setupStore.loadProjectsState.isInProgress}
+              onChange={onProjectOptionChange}
+              value={selectedProjectOption}
+              placeholder={projectSelectorPlaceholder}
+              isClearable={true}
+              escapeClearsValue={true}
+              darkMode={true}
+            />
+          </div>
+          <div className="query-setup__wizard__group">
+            <div className="query-setup__wizard__group__title">Version</div>
+            <CustomSelectorInput
+              className="query-setup__wizard__selector"
+              options={versionOptions}
+              disabled={!setupStore.currentProject}
+              onChange={onVersionOptionChange}
+              value={selectedVersionOption}
+              placeholder={versionSelectorPlaceholder}
+              isClearable={true}
+              escapeClearsValue={true}
+              darkMode={true}
+            />
+          </div>
+        </div>
+        <div className="query-setup__create-query__graph">
+          {(!setupStore.currentProject ||
+            !setupStore.currentVersionId ||
+            !setupStore.surveyMappingRuntimeCompatibilityState
+              .hasSucceeded) && (
+            <div className="query-setup__create-query__graph__loader">
+              <PanelLoadingIndicator
+                isLoading={
+                  Boolean(setupStore.currentProject) &&
+                  Boolean(setupStore.currentVersionId) &&
+                  !setupStore.surveyMappingRuntimeCompatibilityState
+                    .hasSucceeded
+                }
+              />
+              <BlankPanelContent>
+                {setupStore.surveyMappingRuntimeCompatibilityState.isInProgress
+                  ? `Surveying runtime and mapping compatibility...`
+                  : setupStore.surveyMappingRuntimeCompatibilityState.hasFailed
+                  ? `Can't load runtime and mapping`
+                  : 'Project and version must be specified'}
+              </BlankPanelContent>
+            </div>
+          )}
+          {setupStore.currentProject &&
+            setupStore.currentVersionId &&
+            setupStore.surveyMappingRuntimeCompatibilityState.hasSucceeded && (
+              <>
+                <div className="query-setup__wizard__group">
+                  <div className="query-setup__wizard__group__title">
+                    Mapping
+                  </div>
+                  <CustomSelectorInput
+                    className="query-setup__wizard__selector"
+                    options={mappingOptions}
+                    disabled={!mappingOptions.length}
+                    onChange={onMappingOptionChange}
+                    value={selectedMappingOption}
+                    placeholder={mappingSelectorPlaceholder}
+                    isClearable={true}
+                    escapeClearsValue={true}
+                    darkMode={true}
+                  />
+                </div>
+                <div className="query-setup__wizard__group">
+                  <div className="query-setup__wizard__group__title">
+                    Runtime
+                  </div>
+                  <CustomSelectorInput
+                    className="query-setup__wizard__selector"
+                    options={runtimeOptions}
+                    disabled={
+                      !mappingOptions.length || !setupStore.currentMapping
+                    }
+                    onChange={onRuntimeOptionChange}
+                    value={selectedRuntimeOption}
+                    placeholder={runtimeSelectorPlaceholder}
+                    isClearable={true}
+                    escapeClearsValue={true}
+                    darkMode={true}
+                  />
+                </div>
+              </>
+            )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const CreateMappingQuerySetup: React.FC = () => (
+  <CreateMappingQuerySetupStoreProvider>
+    <BaseQuerySetup>
+      <CreateMappingQuerySetupContent />
+    </BaseQuerySetup>
+  </CreateMappingQuerySetupStoreProvider>
+);

package/src/components/EditExistingQuerySetup.tsx

@@ -0,0 +1,280 @@
+/**
+ * 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 {
+  type SelectComponent,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  BlankPanelContent,
+  clsx,
+  CustomSelectorInput,
+  PanelLoadingIndicator,
+  SearchIcon,
+  UserIcon,
+} 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 {
+  generateExistingQueryEditorRoute,
+  generateQuerySetupRoute,
+} from '../stores/LegendQueryRouter.js';
+import { useDepotServerClient } from '@finos/legend-server-depot';
+import {
+  useApplicationStore,
+  EDITOR_LANGUAGE,
+  TextInputEditor,
+} from '@finos/legend-application';
+import {
+  type QueryOption,
+  buildQueryOption,
+} from '@finos/legend-query-builder';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
+import { EditExistingQuerySetupStore } from '../stores/EditExistingQuerySetupStore.js';
+import { BaseQuerySetup, BaseQuerySetupStoreContext } from './QuerySetup.js';
+
+const EditExistingQuerySetupStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const store = useLocalObservable(
+    () => new EditExistingQuerySetupStore(applicationStore, depotServerClient),
+  );
+  return (
+    <BaseQuerySetupStoreContext.Provider value={store}>
+      {children}
+    </BaseQuerySetupStoreContext.Provider>
+  );
+};
+
+const useEditExistingQuerySetupStore = (): EditExistingQuerySetupStore =>
+  guaranteeType(
+    useContext(BaseQuerySetupStoreContext),
+    EditExistingQuerySetupStore,
+    `Can't find query setup store in context`,
+  );
+
+const EditExistingQuerySetupContent = observer(() => {
+  const setupStore = useEditExistingQuerySetupStore();
+  const applicationStore = useApplicationStore();
+  const querySearchRef = useRef<SelectComponent>(null);
+  const [searchText, setSearchText] = useState('');
+
+  // actions
+  const back = (): void => {
+    applicationStore.navigator.goToLocation(generateQuerySetupRoute());
+  };
+  const next = (): void => {
+    if (setupStore.currentQuery) {
+      applicationStore.navigator.goToLocation(
+        generateExistingQueryEditorRoute(setupStore.currentQuery.id),
+      );
+    }
+  };
+  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);
+    }
+  };
+  const formatQueryOptionLabel = (option: QueryOption): React.ReactNode => {
+    const deleteQuery: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setupStore.graphManagerState.graphManager
+        .deleteQuery(option.value.id)
+        .then(() =>
+          flowResult(setupStore.loadQueries('')).catch(
+            applicationStore.alertUnhandledError,
+          ),
+        )
+        .catch(applicationStore.alertUnhandledError);
+    };
+    if (option.value.id === setupStore.currentQuery?.id) {
+      return option.label;
+    }
+    return (
+      <div className="query-setup__existing-query__query-option">
+        <div
+          className="query-setup__existing-query__query-option__label"
+          title={option.label}
+        >
+          {option.label}
+        </div>
+        {setupStore.showCurrentUserQueriesOnly && (
+          <button
+            className="query-setup__existing-query__query-option__action"
+            tabIndex={-1}
+            onClick={deleteQuery}
+          >
+            Delete
+          </button>
+        )}
+        {!setupStore.showCurrentUserQueriesOnly && Boolean(option.value.owner) && (
+          <div
+            className={clsx('query-setup__existing-query__query-option__user', {
+              'query-setup__existing-query__query-option__user--mine':
+                option.value.isCurrentUserQuery,
+            })}
+          >
+            {option.value.isCurrentUserQuery ? 'mine' : option.value.owner}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // 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);
+    }
+  };
+
+  // show current user queries only
+  const toggleShowCurrentUserQueriesOnly = (): void => {
+    setupStore.setShowCurrentUserQueriesOnly(
+      !setupStore.showCurrentUserQueriesOnly,
+    );
+    debouncedLoadQueries.cancel();
+    debouncedLoadQueries(searchText);
+  };
+
+  useEffect(() => {
+    flowResult(setupStore.loadQueries('')).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [setupStore, applicationStore]);
+
+  useEffect(() => {
+    querySearchRef.current?.focus();
+  }, []);
+
+  return (
+    <div className="query-setup__wizard query-setup__existing-query">
+      <div className="query-setup__wizard__header query-setup__existing-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">
+          Loading an existing query...
+        </div>
+        <button
+          className={clsx('query-setup__wizard__header__btn', {
+            'query-setup__wizard__header__btn--ready': canProceed,
+          })}
+          onClick={next}
+          disabled={!canProceed}
+          title="Edit 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>
+          <div className="query-setup__existing-query__input">
+            <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}
+              formatOptionLabel={formatQueryOptionLabel}
+            />
+            <button
+              className={clsx('query-setup__existing-query__btn', {
+                'query-setup__existing-query__btn--active':
+                  setupStore.showCurrentUserQueriesOnly,
+              })}
+              tabIndex={-1}
+              title={`[${
+                setupStore.showCurrentUserQueriesOnly ? 'on' : 'off'
+              }] Toggle show only queries of current user`}
+              onClick={toggleShowCurrentUserQueriesOnly}
+            >
+              <UserIcon />
+            </button>
+          </div>
+        </div>
+        <div className="query-setup__existing-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 EditExistingQuerySetup: React.FC = () => (
+  <EditExistingQuerySetupStoreProvider>
+    <BaseQuerySetup>
+      <EditExistingQuerySetupContent />
+    </BaseQuerySetup>
+  </EditExistingQuerySetupStoreProvider>
+);

package/src/components/LegendQueryApplication.tsx

@@ -16,7 +16,7 @@
 
 import { observer } from 'mobx-react-lite';
 import { LEGEND_QUERY_ROUTE_PATTERN } from '../stores/LegendQueryRouter.js';
-import { QuerySetup } from './QuerySetup.js';
+import { QuerySetupLandingPage } from './QuerySetup.js';
 import {
   MappingQueryCreator,
   ExistingQueryEditor,
@@ -35,6 +35,8 @@ import {
   LegendQueryBaseStoreProvider,
   useLegendQueryApplicationStore,
 } from './LegendQueryBaseStoreProvider.js';
+import { EditExistingQuerySetup } from './EditExistingQuerySetup.js';
+import { CreateMappingQuerySetup } from './CreateMappingQuerySetup.js';
 
 const LegendQueryApplicationRoot = observer(() => {
   const applicationStore = useLegendQueryApplicationStore();
@@ -48,7 +50,17 @@ const LegendQueryApplicationRoot = observer(() => {
         <Route
           exact={true}
           path={LEGEND_QUERY_ROUTE_PATTERN.SETUP}
-          component={QuerySetup}
+          component={QuerySetupLandingPage}
+        />
+        <Route
+          exact={true}
+          path={LEGEND_QUERY_ROUTE_PATTERN.EDIT_EXISTING_QUERY_SETUP}
+          component={EditExistingQuerySetup}
+        />
+        <Route
+          exact={true}
+          path={LEGEND_QUERY_ROUTE_PATTERN.CREATE_MAPPING_QUERY_SETUP}
+          component={CreateMappingQuerySetup}
         />
         <Route
           exact={true}