@finos/legend-application-query 12.0.9 → 13.0.0

package/src/__lib__/LegendQueryUserDataHelper.ts

@@ -0,0 +1,92 @@
+/**
+ * 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 { UserDataService } from '@finos/legend-application';
+import { returnUndefOnError } from '@finos/legend-shared';
+import { createSimpleSchema, deserialize, list, primitive } from 'serializr';
+
+export enum LEGEND_QUERY_USER_DATA_KEY {
+  RECENTLY_VIEWED_QUERIES = 'query-editor.recent-queries',
+}
+
+const USER_DATA_RECENTLY_VIEWED_QUERIES_LIMIT = 10;
+type RecentlyViewedQueriesData = string[];
+
+export class LegendQueryUserDataHelper {
+  static getRecentlyViewedQueries(
+    service: UserDataService,
+  ): RecentlyViewedQueriesData {
+    const data = service.getObjectValue(
+      LEGEND_QUERY_USER_DATA_KEY.RECENTLY_VIEWED_QUERIES,
+    );
+    return (
+      // TODO: think of a better way to deserialize this data, maybe like settings, use JSON schema
+      // See https://github.com/finos/legend-studio/issues/407
+      returnUndefOnError(
+        () =>
+          (
+            deserialize(
+              createSimpleSchema({
+                data: list(primitive()),
+              }),
+              {
+                data,
+              },
+            ) as { data: RecentlyViewedQueriesData }
+          ).data,
+      ) ?? []
+    );
+  }
+
+  static removeRecentlyViewedQuery(
+    service: UserDataService,
+    queryId: string,
+  ): void {
+    const queries = LegendQueryUserDataHelper.getRecentlyViewedQueries(service);
+    const idx = queries.findIndex((query) => query === queryId);
+    if (idx !== -1) {
+      return;
+    }
+    queries.splice(idx, 1);
+    service.persistValue(
+      LEGEND_QUERY_USER_DATA_KEY.RECENTLY_VIEWED_QUERIES,
+      queries,
+    );
+  }
+
+  static addRecentlyViewedQuery(
+    service: UserDataService,
+    queryId: string,
+  ): void {
+    const queries = LegendQueryUserDataHelper.getRecentlyViewedQueries(service);
+    const idx = queries.findIndex((query) => query === queryId);
+    if (idx === -1) {
+      if (queries.length < USER_DATA_RECENTLY_VIEWED_QUERIES_LIMIT) {
+        queries.unshift(queryId);
+      } else {
+        queries.pop();
+        queries.unshift(queryId);
+      }
+    } else {
+      queries.splice(idx, 1);
+      queries.unshift(queryId);
+    }
+    service.persistValue(
+      LEGEND_QUERY_USER_DATA_KEY.RECENTLY_VIEWED_QUERIES,
+      queries,
+    );
+  }
+}

package/src/components/EditExistingQuerySetup.tsx

@@ -14,40 +14,19 @@
  * 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 { ArrowLeftIcon } from '@finos/legend-art';
+import { guaranteeType } from '@finos/legend-shared';
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  generateExistingQueryEditorRoute,
-  generateQuerySetupRoute,
-} from '../__lib__/LegendQueryNavigation.js';
+import { useContext } from 'react';
+import { generateQuerySetupRoute } from '../__lib__/LegendQueryNavigation.js';
 import { useApplicationStore } from '@finos/legend-application';
-import {
-  type QueryOption,
-  buildQueryOption,
-} from '@finos/legend-query-builder';
 import {
   useLegendQueryApplicationStore,
   useLegendQueryBaseStore,
 } from './LegendQueryFrameworkProvider.js';
 import { EditExistingQuerySetupStore } from '../stores/EditExistingQuerySetupStore.js';
 import { BaseQuerySetup, BaseQuerySetupStoreContext } from './QuerySetup.js';
-import {
-  CODE_EDITOR_LANGUAGE,
-  CodeEditor,
-} from '@finos/legend-lego/code-editor';
+import { QueryLoader } from '@finos/legend-query-builder';
 
 const EditExistingQuerySetupStoreProvider: React.FC<{
   children: React.ReactNode;
@@ -78,8 +57,6 @@ const useEditExistingQuerySetupStore = (): EditExistingQuerySetupStore =>
 const EditExistingQuerySetupContent = observer(() => {
   const setupStore = useEditExistingQuerySetupStore();
   const applicationStore = useApplicationStore();
-  const querySearchRef = useRef<SelectComponent>(null);
-  const [searchText, setSearchText] = useState('');
 
   // actions
   const back = (): void => {
@@ -87,112 +64,6 @@ const EditExistingQuerySetupContent = observer(() => {
       generateQuerySetupRoute(),
     );
   };
-  const next = (): void => {
-    if (setupStore.currentQuery) {
-      applicationStore.navigationService.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">
@@ -207,77 +78,12 @@ const EditExistingQuerySetupContent = observer(() => {
         <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 && (
-                <CodeEditor
-                  inputValue={setupStore.currentQueryInfo.content}
-                  isReadOnly={true}
-                  language={CODE_EDITOR_LANGUAGE.PURE}
-                  showMiniMap={false}
-                  hideGutter={true}
-                />
-              )}
-            </>
-          )}
-          {!setupStore.currentQuery && (
-            <BlankPanelContent>No query to preview</BlankPanelContent>
-          )}
-        </div>
+      <div className="query-setup__existing-query__content">
+        <QueryLoader
+          queryLoaderState={setupStore.queryLoaderState}
+          loadActionLabel="load query"
+        />
       </div>
     </div>
   );