@finos/legend-application-query 13.4.13 → 13.4.15

package/src/components/QueryEditor.tsx

@@ -40,6 +40,9 @@ import {
   Panel,
   PanelFullContent,
   CustomSelectorInput,
+  PencilIcon,
+  MoonIcon,
+  SunIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
@@ -53,7 +56,10 @@ import {
   generateExistingQueryEditorRoute,
 } from '../__lib__/LegendQueryNavigation.js';
 import { ExistingQueryEditorStore } from '../stores/QueryEditorStore.js';
-import { useApplicationStore } from '@finos/legend-application';
+import {
+  LEGEND_APPLICATION_COLOR_THEME,
+  useApplicationStore,
+} from '@finos/legend-application';
 import { useParams } from '@finos/legend-application/browser';
 import {
   MappingQueryCreatorStoreProvider,
@@ -95,6 +101,7 @@ const CreateQueryDialog = observer(() => {
     );
   };
   const isExistingQueryName = createQueryState.editorStore.existingQueryName;
+  const isEmptyName = !createQueryState.queryName;
   // name
   const nameInputRef = useRef<HTMLInputElement>(null);
   const debouncedLoadQueries = useMemo(
@@ -106,13 +113,16 @@ const CreateQueryDialog = observer(() => {
       }, 500),
     [applicationStore, createQueryState.editorStore],
   );
+  const setFocus = (): void => {
+    nameInputRef.current?.focus();
+  };
 
   const changeName: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     createQueryState.setQueryName(event.target.value);
   };
 
   useEffect(() => {
-    nameInputRef.current?.focus();
+    setTimeout(() => setFocus(), 1);
   }, []);
 
   useEffect(() => {
@@ -155,6 +165,7 @@ const CreateQueryDialog = observer(() => {
                 spellCheck={false}
                 value={createQueryState.queryName}
                 onChange={changeName}
+                title="New Query Name"
               />
               {isExistingQueryName && (
                 <div
@@ -171,10 +182,11 @@ const CreateQueryDialog = observer(() => {
           <ModalFooterButton
             text="Create Query"
             title="Create new query"
-            disabled={Boolean(
+            disabled={
               createQueryState.editorStore.isPerformingBlockingAction ||
-                isExistingQueryName,
-            )}
+              Boolean(isExistingQueryName) ||
+              isEmptyName
+            }
             onClick={create}
           />
         </ModalFooter>
@@ -356,6 +368,12 @@ export const QueryEditorExistingQueryHeader = observer(
             title="Double-click to rename query"
           >
             {existingEditorStore.lightQuery.name}
+            <button
+              className="panel__content__form__section__list__item__edit-btn"
+              onClick={enableRename}
+            >
+              <PencilIcon />
+            </button>
           </div>
         )}
         {existingEditorStore.updateState.saveModal && (
@@ -581,6 +599,15 @@ export const QueryEditor = observer(() => {
       !engineConfig.useClientRequestPayloadCompression,
     );
 
+  const TEMPORARY__toggleLightDarkMode = (): void => {
+    applicationStore.layoutService.setColorTheme(
+      applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        ? LEGEND_APPLICATION_COLOR_THEME.DEFAULT_DARK
+        : LEGEND_APPLICATION_COLOR_THEME.LEGACY_LIGHT,
+      { persist: true },
+    );
+  };
+
   useEffect(() => {
     flowResult(editorStore.initialize()).catch(
       applicationStore.alertUnhandledError,
@@ -590,73 +617,79 @@ export const QueryEditor = observer(() => {
   return (
     <div className="query-editor">
       <div className="query-editor__logo-header">
-        <div className="query-editor__logo-header__menu">
-          <DropdownMenu
-            className="query-editor__logo-header__menu-item"
-            menuProps={{
-              anchorOrigin: { vertical: 'top', horizontal: 'right' },
-              transformOrigin: { vertical: 'top', horizontal: 'left' },
-              elevation: 7,
-            }}
-            content={
-              <MenuContent>
-                <MenuContentItem onClick={goToQuerySetup}>
-                  Back to query setup
-                </MenuContentItem>
-                <MenuContentItem onClick={goToReleaseLog}>
-                  Legend Query Release Log
-                </MenuContentItem>
-                <MenuContentItem
-                  disabled={!appDocUrl}
-                  onClick={goToDocumentation}
-                >
-                  Documentation
-                </MenuContentItem>
-                {docLinks?.map((entry) => (
+        <div className="query-editor__logo-header__combo">
+          <div className="query-editor__logo-header__combo__menu">
+            <DropdownMenu
+              className="query-editor__logo-header__combo__menu-item"
+              menuProps={{
+                anchorOrigin: { vertical: 'top', horizontal: 'right' },
+                transformOrigin: { vertical: 'top', horizontal: 'left' },
+                elevation: 7,
+              }}
+              content={
+                <MenuContent>
+                  <MenuContentItem onClick={goToQuerySetup}>
+                    Back to query setup
+                  </MenuContentItem>
+                  <MenuContentItem onClick={goToReleaseLog}>
+                    Legend Query Release Log
+                  </MenuContentItem>
                   <MenuContentItem
-                    key={entry.key}
-                    onClick={(): void => goToDocLink(entry.url)}
+                    disabled={!appDocUrl}
+                    onClick={goToDocumentation}
                   >
-                    {entry.label}
+                    Documentation
                   </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>
+                  {docLinks?.map((entry) => (
+                    <MenuContentItem
+                      key={entry.key}
+                      onClick={(): void => goToDocLink(entry.url)}
+                    >
+                      {entry.label}
+                    </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>
+          <div className="query-editor__logo-header__combo__name">
+            Legend Query
+          </div>
         </div>
-        <div className="query-editor__logo-header__name">Legend Query</div>
-        {editorStore.queryLoaderState.isQueryLoaderDialogOpen && (
-          <QueryLoaderDialog
-            queryLoaderState={editorStore.queryLoaderState}
-            title="Load query"
-          />
-        )}
-        {editorStore.queryCreatorState.showCreateModal && <CreateQueryDialog />}
-        {isExistingQuery &&
-          editorStore.updateState.showQueryInfo &&
-          editorStore.query && (
-            <QueryEditorExistingQueryInfoModal
-              existingEditorStore={editorStore}
-              query={editorStore.query}
-            />
+        <button
+          title="Toggle light/dark mode"
+          onClick={TEMPORARY__toggleLightDarkMode}
+          className="query-editor__header__action query-editor__header__action__theme-toggler"
+        >
+          {applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled ? (
+            <>
+              <SunIcon className="query-editor__header__action__icon--bulb--light" />
+            </>
+          ) : (
+            <>
+              <MoonIcon className="query-editor__header__action__icon--bulb--dark" />
+            </>
           )}
+        </button>
       </div>
+
       <div className="query-editor__content">
         <PanelLoadingIndicator isLoading={isLoadingEditor} />
         {!isLoadingEditor && editorStore.queryBuilderState && (
@@ -684,6 +717,21 @@ export const QueryEditor = observer(() => {
             />
           )}
       </div>
+      {editorStore.queryLoaderState.isQueryLoaderDialogOpen && (
+        <QueryLoaderDialog
+          queryLoaderState={editorStore.queryLoaderState}
+          title="Load query"
+        />
+      )}
+      {editorStore.queryCreatorState.showCreateModal && <CreateQueryDialog />}
+      {isExistingQuery &&
+        editorStore.updateState.showQueryInfo &&
+        editorStore.query && (
+          <QueryEditorExistingQueryInfoModal
+            existingEditorStore={editorStore}
+            query={editorStore.query}
+          />
+        )}
     </div>
   );
 });

package/src/components/data-space/DataSpaceQuerySetup.tsx

@@ -23,6 +23,7 @@ import {
   CustomSelectorInput,
   PanelHeader,
   SearchIcon,
+  compareLabelFn,
   type SelectComponent,
 } from '@finos/legend-art';
 import {
@@ -84,7 +85,7 @@ const DataSpaceQuerySetupSetupPanelContent = observer(
     // data space
     const dataSpaceOptions = queryBuilderState.dataSpaces
       .map(buildDataSpaceOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedDataSpaceOption = null;
     const onDataSpaceOptionChange = (option: DataSpaceOption): void => {
       queryBuilderState.onDataSpaceChange(option.value);

package/src/index.ts

@@ -43,7 +43,6 @@ export {
   ExistingQueryEditorStore,
   QueryBuilderActionConfig_QueryApplication,
 } from './stores/QueryEditorStore.js';
-export { QUERY_EDITOR_TEST_ID } from './__lib__/LegendQueryTesting.js';
 // components
 export {
   QueryEditorStoreContext,

package/src/stores/EditExistingQuerySetupStore.ts

@@ -58,10 +58,10 @@ export class EditExistingQuerySetupStore extends BaseQuerySetupStore {
                 'recently viewed queries',
               )}`
             : `No recently viewed queries`,
-        onQueryDeleted: (query): void =>
+        onQueryDeleted: (queryId): void =>
           LegendQueryUserDataHelper.removeRecentlyViewedQuery(
             this.applicationStore.userDataService,
-            query.id,
+            queryId,
           ),
         onQueryRenamed: (query): void => {
           LegendQueryTelemetryHelper.logEvent_RenameQuerySucceeded(

package/src/stores/LegendQueryApplicationPlugin.tsx

@@ -97,16 +97,4 @@ export class LegendQueryApplicationPlugin
    * Get the list of actions (configurations) for query setup.
    */
   getExtraQuerySetupActionConfigurations?(): QuerySetupActionConfiguration[];
-
-  /**
-   * Get the list of query editor help menu action configurations.
-   */
-  getExtraQueryEditorHelpMenuActionConfigurations?(): QueryEditorHelpMenuActionConfiguration[];
-
-  /**
-   * Get the list of query editor action renderer configurations.
-   */
-  getExtraQueryEditorActionConfigurations?(
-    editorStore: QueryEditorStore,
-  ): QueryEditorActionConfiguration[];
 }

package/src/stores/QueryEditorStore.ts

@@ -202,7 +202,7 @@ export class QueryCreatorState {
       createQuery: flow,
     });
     this.editorStore = editorStore;
-    this.queryName = queryName ?? 'New Query';
+    this.queryName = queryName ?? '';
   }
 
   setQueryName(val: string): void {
@@ -313,6 +313,7 @@ export abstract class QueryEditorStore {
   queryBuilderState?: QueryBuilderState | undefined;
   queryCreatorState: QueryCreatorState;
   existingQueryName: string | undefined;
+  showRegisterServiceModal = false;
 
   constructor(
     applicationStore: LegendQueryApplicationStore,
@@ -322,9 +323,11 @@ export abstract class QueryEditorStore {
       queryCreatorState: observable,
       queryLoaderState: observable,
       existingQueryName: observable,
+      showRegisterServiceModal: observable,
       queryBuilderState: observable,
       isPerformingBlockingAction: computed,
       setExistingQueryName: action,
+      setShowRegisterServiceModal: action,
       initialize: flow,
       buildGraph: flow,
       searchExistingQueryName: flow,
@@ -366,10 +369,10 @@ export abstract class QueryEditorStore {
                 'recently viewed queries',
               )}`
             : `No recently viewed queries`,
-        onQueryDeleted: (query): void =>
+        onQueryDeleted: (queryId): void =>
           LegendQueryUserDataHelper.removeRecentlyViewedQuery(
             this.applicationStore.userDataService,
-            query.id,
+            queryId,
           ),
         onQueryRenamed: (query): void => {
           LegendQueryTelemetryHelper.logEvent_RenameQuerySucceeded(
@@ -402,6 +405,10 @@ export abstract class QueryEditorStore {
     this.existingQueryName = val;
   }
 
+  setShowRegisterServiceModal(val: boolean): void {
+    this.showRegisterServiceModal = val;
+  }
+
   get isPerformingBlockingAction(): boolean {
     return this.queryCreatorState.createQueryState.isInProgress;
   }

package/src/stores/QueryProductionizerSetupStore.ts

@@ -61,10 +61,10 @@ export class QueryProductionizerSetupStore extends BaseQuerySetupStore {
                 'recently viewed queries',
               )}`
             : `No recently viewed queries`,
-        onQueryDeleted: (query): void =>
+        onQueryDeleted: (queryId): void =>
           LegendQueryUserDataHelper.removeRecentlyViewedQuery(
             this.applicationStore.userDataService,
-            query.id,
+            queryId,
           ),
         onQueryRenamed: (query): void => {
           LegendQueryTelemetryHelper.logEvent_RenameQuerySucceeded(

package/tsconfig.json

@@ -56,11 +56,9 @@
     "./src/__lib__/LegendQueryEventHelper.ts",
     "./src/__lib__/LegendQueryNavigation.ts",
     "./src/__lib__/LegendQueryTelemetryHelper.ts",
-    "./src/__lib__/LegendQueryTesting.ts",
     "./src/__lib__/LegendQueryUserDataHelper.ts",
     "./src/application/Core_LegendQuery_LegendApplicationPlugin.ts",
     "./src/application/LegendQueryApplicationConfig.ts",
-    "./src/application/LegendQueryDocumentation.ts",
     "./src/application/LegendQueryPluginManager.ts",
     "./src/components/data-space/QueryDataSpaceUtil.ts",
     "./src/stores/CloneServiceQuerySetupStore.ts",

package/lib/__lib__/LegendQueryTesting.d.ts

@@ -1,19 +0,0 @@
-/**
- * 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.
- */
-export declare enum QUERY_EDITOR_TEST_ID {
-    QUERY_EDITOR_ACTIONS = "query__editor__actions"
-}
-//# sourceMappingURL=LegendQueryTesting.d.ts.map

package/lib/__lib__/LegendQueryTesting.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegendQueryTesting.d.ts","sourceRoot":"","sources":["../../src/__lib__/LegendQueryTesting.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,oBAAY,oBAAoB;IAC9B,oBAAoB,2BAA2B;CAChD"}

package/lib/__lib__/LegendQueryTesting.js

@@ -1,20 +0,0 @@
-/**
- * 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.
- */
-export var QUERY_EDITOR_TEST_ID;
-(function (QUERY_EDITOR_TEST_ID) {
-    QUERY_EDITOR_TEST_ID["QUERY_EDITOR_ACTIONS"] = "query__editor__actions";
-})(QUERY_EDITOR_TEST_ID || (QUERY_EDITOR_TEST_ID = {}));
-//# sourceMappingURL=LegendQueryTesting.js.map

package/lib/__lib__/LegendQueryTesting.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegendQueryTesting.js","sourceRoot":"","sources":["../../src/__lib__/LegendQueryTesting.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAN,IAAY,oBAEX;AAFD,WAAY,oBAAoB;IAC9B,uEAA+C,CAAA;AACjD,CAAC,EAFW,oBAAoB,KAApB,oBAAoB,QAE/B"}

package/lib/application/LegendQueryDocumentation.d.ts

@@ -1,19 +0,0 @@
-/**
- * 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.
- */
-export declare enum QUERY_DOCUMENTATION_KEY {
-    TUTORIAL_QUERY_BUILDER = "tutorial.query.builder"
-}
-//# sourceMappingURL=LegendQueryDocumentation.d.ts.map

package/lib/application/LegendQueryDocumentation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegendQueryDocumentation.d.ts","sourceRoot":"","sources":["../../src/application/LegendQueryDocumentation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,oBAAY,uBAAuB;IACjC,sBAAsB,2BAA2B;CAClD"}

package/lib/application/LegendQueryDocumentation.js

@@ -1,20 +0,0 @@
-/**
- * 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.
- */
-export var QUERY_DOCUMENTATION_KEY;
-(function (QUERY_DOCUMENTATION_KEY) {
-    QUERY_DOCUMENTATION_KEY["TUTORIAL_QUERY_BUILDER"] = "tutorial.query.builder";
-})(QUERY_DOCUMENTATION_KEY || (QUERY_DOCUMENTATION_KEY = {}));
-//# sourceMappingURL=LegendQueryDocumentation.js.map

package/lib/application/LegendQueryDocumentation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegendQueryDocumentation.js","sourceRoot":"","sources":["../../src/application/LegendQueryDocumentation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAN,IAAY,uBAEX;AAFD,WAAY,uBAAuB;IACjC,4EAAiD,CAAA;AACnD,CAAC,EAFW,uBAAuB,KAAvB,uBAAuB,QAElC"}

package/src/__lib__/LegendQueryTesting.ts

@@ -1,19 +0,0 @@
-/**
- * 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.
- */
-
-export enum QUERY_EDITOR_TEST_ID {
-  QUERY_EDITOR_ACTIONS = 'query__editor__actions',
-}

package/src/application/LegendQueryDocumentation.ts

@@ -1,19 +0,0 @@
-/**
- * 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.
- */
-
-export enum QUERY_DOCUMENTATION_KEY {
-  TUTORIAL_QUERY_BUILDER = 'tutorial.query.builder',
-}