@finos/legend-extension-dsl-data-space 10.1.93 → 10.1.94

package/src/components/DataSpaceQuickStart.tsx

@@ -149,6 +149,8 @@ const DataSpaceExecutableTDSResultView = observer(
       extractTDSExecutableActionConfigurations.find(
         (config) => config.key === selectedTab,
       );
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
     return (
       <div className="data-space__viewer__quickstart__item__content">
@@ -277,7 +279,16 @@ const DataSpaceExecutableTDSResultView = observer(
         </div>
         <div className="data-space__viewer__quickstart__item__content__tab__content">
           {selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS && (
-            <div className="data-space__viewer__quickstart__tds__column-specs data-space__viewer__grid ag-theme-balham-dark">
+            <div
+              className={clsx(
+                'data-space__viewer__quickstart__tds__column-specs',
+                'data-space__viewer__grid',
+                {
+                  'ag-theme-balham': !darkMode,
+                  'ag-theme-balham-dark': darkMode,
+                },
+              )}
+            >
               <DataGrid
                 rowData={columnSpecifications}
                 gridOptions={{

package/src/components/query/DataSpaceAdvancedSearchModal.tsx

@@ -153,7 +153,9 @@ export const DataSpaceAdvancedSearchModal = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal data-space-advanced-search__dialog"
         >
           <ModalHeader className="data-space-advanced-search__dialog__header">
@@ -185,7 +187,10 @@ export const DataSpaceAdvancedSearchModal = observer(
                 placeholder="Search for data space by name..."
                 isClearable={true}
                 escapeClearsValue={true}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 formatOptionLabel={formatDataSpaceOptionLabel}
               />
               <button

package/src/components/query/DataSpaceQueryBuilderTemplateQueryPanelContent.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 {
+  PanelHeader,
+  FilterIcon,
+  BasePopover,
+  ClickAwayListener,
+  ShareIcon,
+  TagIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import { DataSpaceExecutableTemplate } from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
+import type { DataSpaceQueryBuilderState } from '../../stores/query/DataSpaceQueryBuilderState.js';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { generateDataSpaceTemplateQueryCreatorRoute } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
+
+const DataSpaceTemplateQueryDialog = observer(
+  (props: {
+    triggerElement: HTMLElement | null;
+    queryBuilderState: DataSpaceQueryBuilderState;
+    templateQueries: DataSpaceExecutableTemplate[];
+  }) => {
+    const { triggerElement, queryBuilderState, templateQueries } = props;
+    const applicationStore = useApplicationStore();
+    const handleClose = (): void => {
+      queryBuilderState.setTemplateQueryDialogOpen(false);
+    };
+
+    const loadTemplateQuery = (template: DataSpaceExecutableTemplate): void => {
+      const executionContext =
+        queryBuilderState.dataSpace.executionContexts.find(
+          (c) => c.name === template.executionContextKey,
+        );
+      if (
+        executionContext &&
+        executionContext.hashCode !==
+          queryBuilderState.executionContext.hashCode
+      ) {
+        queryBuilderState.setExecutionContext(executionContext);
+        queryBuilderState.propagateExecutionContextChange(executionContext);
+        queryBuilderState.initializeWithQuery(template.query);
+        queryBuilderState.onExecutionContextChange?.(executionContext);
+      } else {
+        queryBuilderState.initializeWithQuery(template.query);
+      }
+      handleClose();
+    };
+
+    const loadQuery = (template: DataSpaceExecutableTemplate): void => {
+      if (queryBuilderState.changeDetectionState.hasChanged) {
+        applicationStore.alertService.setActionAlertInfo({
+          message:
+            'Unsaved changes will be lost if you continue. Do you still want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void => loadTemplateQuery(template),
+            },
+            {
+              label: 'Abort',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      } else {
+        loadTemplateQuery(template);
+      }
+    };
+
+    const visitTemplateQuery = (
+      template: DataSpaceExecutableTemplate,
+    ): void => {
+      if (queryBuilderState.projectInfo?.groupId) {
+        applicationStore.navigationService.navigator.visitAddress(
+          applicationStore.navigationService.navigator.generateAddress(
+            generateDataSpaceTemplateQueryCreatorRoute(
+              queryBuilderState.projectInfo.groupId,
+              queryBuilderState.projectInfo.artifactId,
+              queryBuilderState.projectInfo.versionId,
+              queryBuilderState.dataSpace.path,
+              template.title,
+            ),
+          ),
+        );
+      }
+    };
+
+    return (
+      <ClickAwayListener onClickAway={handleClose}>
+        <div>
+          <BasePopover
+            open={queryBuilderState.isTemplateQueryDialogOpen}
+            PaperProps={{
+              classes: {
+                root: '"query-builder__data-space__template-query-panel__container__root',
+              },
+            }}
+            className="query-builder__data-space__template-query-panel__container"
+            onClose={handleClose}
+            anchorEl={triggerElement}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'center',
+            }}
+          >
+            <div className="query-builder__data-space__template-query-panel">
+              <div className="query-builder__data-space__template-query-panel__header">
+                Curated Template Queries
+              </div>
+              {templateQueries.map((query) => (
+                <div
+                  key={query.title}
+                  className="query-builder__data-space__template-query-panel__query"
+                >
+                  <TagIcon className="query-builder__data-space__template-query-panel__query__icon" />
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__entry"
+                    title="click to load template query"
+                    onClick={() => loadQuery(query)}
+                  >
+                    <div className="query-builder__data-space__template-query-panel__query__entry__content">
+                      <div className="query-builder__data-space__template-query-panel__query__entry__content__title">
+                        {query.title}
+                      </div>
+                      {query.description && (
+                        <div className="query-builder__data-space__template-query-panel__query__entry__content__description">
+                          {query.description}
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__share"
+                    title="Visit..."
+                    onClick={() => visitTemplateQuery(query)}
+                  >
+                    <ShareIcon />
+                    <div className="query-builder__data-space__template-query-panel__query__share__label">
+                      Visit
+                    </div>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </BasePopover>
+        </div>
+      </ClickAwayListener>
+    );
+  },
+);
+
+const DataSpaceQueryBuilderTemplateQueryPanel = observer(
+  (props: { queryBuilderState: DataSpaceQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const templateQueryButtonRef = useRef<HTMLButtonElement>(null);
+    const templateQueries = queryBuilderState.dataSpace.executables?.filter(
+      (e) => e instanceof DataSpaceExecutableTemplate,
+    ) as DataSpaceExecutableTemplate[] | undefined;
+
+    const showTemplateQueries = (): void => {
+      queryBuilderState.setTemplateQueryDialogOpen(true);
+    };
+
+    return (
+      <>
+        {templateQueries && templateQueries.length > 0 && (
+          <PanelHeader className="query-builder__data-space__template-query">
+            <div className="query-builder__data-space__template-query__title">
+              <FilterIcon />
+            </div>
+            <button
+              className="query-builder__data-space__template-query__btn"
+              ref={templateQueryButtonRef}
+              onClick={showTemplateQueries}
+            >
+              Template ( {templateQueries.length} )
+            </button>
+            {queryBuilderState.isTemplateQueryDialogOpen && (
+              <DataSpaceTemplateQueryDialog
+                triggerElement={templateQueryButtonRef.current}
+                queryBuilderState={queryBuilderState}
+                templateQueries={templateQueries}
+              />
+            )}
+          </PanelHeader>
+        )}
+      </>
+    );
+  },
+);
+
+export const renderDataSpaceQueryBuilderTemplateQueryPanelContent = (
+  queryBuilderState: DataSpaceQueryBuilderState,
+): React.ReactNode => (
+  <DataSpaceQueryBuilderTemplateQueryPanel
+    queryBuilderState={queryBuilderState}
+  />
+);

package/src/components/studio/DataSpacePreviewAction.tsx

@@ -59,6 +59,7 @@ export const DataSpacePreviewAction = observer(
 
 export const DataSpacePreviewDialog = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const dataSpacePreviewState =
     DataSpacePreviewState.retrieveNullableState(editorStore);
   if (!dataSpacePreviewState) {
@@ -81,7 +82,9 @@ export const DataSpacePreviewDialog = observer(() => {
       }}
     >
       <Modal
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
         className="editor-modal data-space-preview__dialog"
       >
         <ModalHeader className="data-space-preview__dialog__header">

package/src/stores/query/DataSpaceQueryBuilderState.ts

@@ -146,6 +146,7 @@ export class DataSpaceQueryBuilderState extends QueryBuilderState {
   dataSpaces: DataSpaceInfo[] = [];
   showRuntimeSelector = false;
   advancedSearchState?: DataSpaceAdvancedSearchState | undefined;
+  isTemplateQueryDialogOpen = false;
 
   constructor(
     applicationStore: GenericLegendApplicationStore,
@@ -172,10 +173,12 @@ export class DataSpaceQueryBuilderState extends QueryBuilderState {
       executionContext: observable,
       showRuntimeSelector: observable,
       advancedSearchState: observable,
+      isTemplateQueryDialogOpen: observable,
       showAdvancedSearchPanel: action,
       hideAdvancedSearchPanel: action,
       setExecutionContext: action,
       setShowRuntimeSelector: action,
+      setTemplateQueryDialogOpen: action,
       loadDataSpaces: flow,
     });
 
@@ -197,6 +200,10 @@ export class DataSpaceQueryBuilderState extends QueryBuilderState {
       : 'query-builder__setup__data-space';
   }
 
+  setTemplateQueryDialogOpen(val: boolean): void {
+    this.isTemplateQueryDialogOpen = val;
+  }
+
   showAdvancedSearchPanel(): void {
     if (this.projectInfo && this.isAdvancedDataSpaceSearchEnabled) {
       this.advancedSearchState = new DataSpaceAdvancedSearchState(

package/src/stores/query/DataSpaceTemplateQueryCreatorStore.ts

@@ -39,7 +39,7 @@ import {
   DataSpaceProjectInfo,
 } from './DataSpaceQueryBuilderState.js';
 import type { DataSpaceInfo } from './DataSpaceInfo.js';
-import { generateDataSpaceTemplateQueryViewerRoute } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
+import { generateDataSpaceTemplateQueryCreatorRoute } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
 import {
   DataSpaceExecutableTemplate,
   type DataSpaceExecutionContext,
@@ -149,7 +149,7 @@ export class DataSpaceTemplateQueryCreatorStore extends QueryEditorStore {
       (dataSpaceInfo: DataSpaceInfo) => {
         if (dataSpaceInfo.defaultExecutionContext) {
           this.applicationStore.navigationService.navigator.goToLocation(
-            generateDataSpaceTemplateQueryViewerRoute(
+            generateDataSpaceTemplateQueryCreatorRoute(
               guaranteeNonNullable(dataSpaceInfo.groupId),
               guaranteeNonNullable(dataSpaceInfo.artifactId),
               LATEST_VERSION_ALIAS, //always default to latest
@@ -167,7 +167,7 @@ export class DataSpaceTemplateQueryCreatorStore extends QueryEditorStore {
       dataSpaceAnalysisResult,
       (ec: DataSpaceExecutionContext) => {
         this.applicationStore.navigationService.navigator.updateCurrentLocation(
-          generateDataSpaceTemplateQueryViewerRoute(
+          generateDataSpaceTemplateQueryCreatorRoute(
             this.groupId,
             this.artifactId,
             this.versionId,

package/tsconfig.json

@@ -93,6 +93,7 @@
     "./src/components/query/DSL_DataSpace_LegendQueryApplicationPlugin.tsx",
     "./src/components/query/DataSpaceAdvancedSearchModal.tsx",
     "./src/components/query/DataSpaceQueryBuilder.tsx",
+    "./src/components/query/DataSpaceQueryBuilderTemplateQueryPanelContent.tsx",
     "./src/components/query/DataSpaceQueryCreator.tsx",
     "./src/components/query/DataSpaceQuerySetup.tsx",
     "./src/components/query/DataSpaceTemplateQueryCreator.tsx",