@finos/legend-application-query 13.7.205 → 13.8.0

package/src/components/data-product/DataProductInfo.tsx

@@ -0,0 +1,297 @@
+/**
+ * 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 {
+  Dialog,
+  Modal,
+  ModalTitle,
+  Panel,
+  PanelFullContent,
+} from '@finos/legend-art';
+import {
+  LATEST_VERSION_ALIAS,
+  isSnapshotVersion,
+  SNAPSHOT_VERSION_ALIAS,
+  StoreProjectData,
+  VersionedProjectData,
+} from '@finos/legend-server-depot';
+import { observer } from 'mobx-react-lite';
+import { type QueryEditorStore } from '../../stores/QueryEditorStore.js';
+import {
+  EXTERNAL_APPLICATION_NAVIGATION__generateStudioSDLCProjectViewUrl,
+  EXTERNAL_APPLICATION_NAVIGATION__generateMarketplaceDataProductUrl,
+} from '../../__lib__/LegendQueryNavigation.js';
+import { flowResult } from 'mobx';
+import { assertErrorThrown } from '@finos/legend-shared';
+import {
+  type DataProduct,
+  FunctionAccessPoint,
+  LakehouseAccessPoint,
+  LakehouseRuntime,
+} from '@finos/legend-graph';
+import {
+  type DataProductQueryBuilderState,
+  ModelAccessPointDataProductExecutionState,
+} from '@finos/legend-query-builder';
+import { LegendQueryDataProductQueryBuilderState } from '../../stores/data-product/query-builder/LegendQueryDataProductQueryBuilderState.js';
+
+export const QueryEditorDataProductInfoModal = observer(
+  (props: {
+    editorStore: QueryEditorStore;
+    dataProduct: DataProduct;
+    queryBuilderState: DataProductQueryBuilderState;
+    open: boolean;
+    closeModal: () => void;
+  }) => {
+    const { editorStore, dataProduct, queryBuilderState, open, closeModal } =
+      props;
+    const projectInfo = editorStore.getProjectInfo();
+    const executionState = queryBuilderState.executionState;
+
+    const visitElement = async (path: string | undefined): Promise<void> => {
+      try {
+        if (projectInfo) {
+          const project = StoreProjectData.serialization.fromJson(
+            await editorStore.depotServerClient.getProject(
+              projectInfo.groupId,
+              projectInfo.artifactId,
+            ),
+          );
+          const versionId =
+            projectInfo.versionId === LATEST_VERSION_ALIAS
+              ? VersionedProjectData.serialization.fromJson(
+                  await editorStore.depotServerClient.getLatestVersion(
+                    projectInfo.groupId,
+                    projectInfo.artifactId,
+                  ),
+                ).versionId
+              : projectInfo.versionId;
+
+          editorStore.applicationStore.navigationService.navigator.visitAddress(
+            EXTERNAL_APPLICATION_NAVIGATION__generateStudioSDLCProjectViewUrl(
+              editorStore.applicationStore.config.studioApplicationUrl,
+              project.projectId,
+              versionId,
+              path,
+            ),
+          );
+        }
+      } catch (error) {
+        assertErrorThrown(error);
+        editorStore.applicationStore.notificationService.notifyError(
+          path
+            ? `Can't visit element of path: '${path}'`
+            : `Can't visit project`,
+        );
+      }
+    };
+
+    const accessPointGroup =
+      executionState instanceof ModelAccessPointDataProductExecutionState
+        ? executionState.exectionValue
+        : undefined;
+    const mapping = executionState.mapping;
+    const selectedRuntime =
+      executionState instanceof ModelAccessPointDataProductExecutionState
+        ? executionState.selectedRuntime
+        : undefined;
+    const accessPoints = accessPointGroup?.accessPoints ?? [];
+    const supportEmails = dataProduct.supportInfo?.emails ?? [];
+
+    const deploymentId =
+      queryBuilderState.dataProductArtifact?.dataProduct.deploymentId;
+    const versionId = projectInfo?.versionId;
+    const isSnapshotVer =
+      versionId !== undefined &&
+      (isSnapshotVersion(versionId) || versionId === SNAPSHOT_VERSION_ALIAS);
+    const marketplaceUrl = isSnapshotVer
+      ? editorStore.applicationStore.config.marketplaceProductionParallelUrl
+      : editorStore.applicationStore.config.marketplaceApplicationUrl;
+    const canOpenInMarketplace =
+      queryBuilderState instanceof LegendQueryDataProductQueryBuilderState &&
+      deploymentId !== undefined &&
+      marketplaceUrl !== undefined;
+
+    const openInMarketplace = (): void => {
+      if (canOpenInMarketplace && marketplaceUrl && deploymentId) {
+        editorStore.applicationStore.navigationService.navigator.visitAddress(
+          EXTERNAL_APPLICATION_NAVIGATION__generateMarketplaceDataProductUrl(
+            marketplaceUrl,
+            dataProduct.name,
+            deploymentId,
+          ),
+        );
+      }
+    };
+
+    const getAccessPointTypeLabel = (
+      ap: (typeof accessPoints)[number],
+    ): string => {
+      if (ap instanceof FunctionAccessPoint) {
+        return 'Function';
+      }
+      if (ap instanceof LakehouseAccessPoint) {
+        return 'Lakehouse';
+      }
+      return 'Unknown';
+    };
+
+    return (
+      <Dialog
+        open={open}
+        onClose={closeModal}
+        classes={{ container: 'dataspace-info-modal__container' }}
+        slotProps={{
+          paper: {
+            classes: { root: 'dataspace-info-modal__inner-container' },
+          },
+        }}
+      >
+        <Modal
+          darkMode={
+            !editorStore.applicationStore.layoutService
+              .TEMPORARY__isLightColorThemeEnabled
+          }
+          className="dataspace-info-modal"
+        >
+          <div className="dataspace-info-modal__header">
+            <ModalTitle title="About Data Product" />
+            {canOpenInMarketplace && (
+              <button
+                className="btn--dark dataspace-info-modal__header__open-btn"
+                title="Open Data Product in Marketplace"
+                onClick={openInMarketplace}
+              >
+                Open Data Product
+              </button>
+            )}
+          </div>
+
+          <Panel>
+            <PanelFullContent>
+              {projectInfo && (
+                <div className="dataspace-info-modal__field">
+                  <div className="dataspace-info-modal__field__label">
+                    Project
+                  </div>
+                  <div
+                    className="dataspace-info-modal__field__value dataspace-info-modal__field__value--linkable"
+                    onClick={() => flowResult(visitElement(undefined))}
+                  >
+                    {`${projectInfo.groupId}:${projectInfo.artifactId}:${projectInfo.versionId}`}
+                  </div>
+                </div>
+              )}
+              <div className="dataspace-info-modal__field">
+                <div className="dataspace-info-modal__field__label">Name</div>
+                <div className="dataspace-info-modal__field__value">
+                  {dataProduct.title ?? dataProduct.name}
+                </div>
+              </div>
+              {accessPointGroup && (
+                <div className="dataspace-info-modal__field">
+                  <div className="dataspace-info-modal__field__label">
+                    Access Point Group
+                  </div>
+                  <div className="dataspace-info-modal__field__value">
+                    {accessPointGroup.title ?? accessPointGroup.id}
+                  </div>
+                </div>
+              )}
+              <div className="dataspace-info-modal__field">
+                <div className="dataspace-info-modal__field__label">
+                  Mapping
+                </div>
+                <div
+                  className="dataspace-info-modal__field__value dataspace-info-modal__field__value--linkable"
+                  onClick={() => flowResult(visitElement(mapping.path))}
+                >
+                  {mapping.name}
+                </div>
+              </div>
+              {selectedRuntime &&
+                selectedRuntime.runtimeValue instanceof LakehouseRuntime && (
+                  <>
+                    {selectedRuntime.runtimeValue.environment && (
+                      <div className="dataspace-info-modal__field">
+                        <div className="dataspace-info-modal__field__label">
+                          Environment
+                        </div>
+                        <div className="dataspace-info-modal__field__value">
+                          {selectedRuntime.runtimeValue.environment}
+                        </div>
+                      </div>
+                    )}
+                    {selectedRuntime.runtimeValue.warehouse && (
+                      <div className="dataspace-info-modal__field">
+                        <div className="dataspace-info-modal__field__label">
+                          Warehouse
+                        </div>
+                        <div className="dataspace-info-modal__field__value">
+                          {selectedRuntime.runtimeValue.warehouse}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              {accessPoints.length > 0 && (
+                <>
+                  {accessPoints.map((ap) => (
+                    <div className="dataspace-info-modal__field" key={ap.id}>
+                      <div className="dataspace-info-modal__field__label">
+                        Access Point
+                      </div>
+                      <div className="dataspace-info-modal__field__value">
+                        {`${ap.title ?? ap.id} (${getAccessPointTypeLabel(ap)})`}
+                      </div>
+                    </div>
+                  ))}
+                </>
+              )}
+              <div className="dataspace-info-modal__field">
+                <div className="dataspace-info-modal__field__label">
+                  Configuration
+                </div>
+                <div
+                  className="dataspace-info-modal__field__value dataspace-info-modal__field__value--linkable"
+                  onClick={() => flowResult(visitElement(dataProduct.path))}
+                >
+                  Show Data Product Configuration
+                </div>
+              </div>
+              {supportEmails.map((email) => (
+                <div
+                  className="dataspace-info-modal__field"
+                  key={email.address}
+                >
+                  <div className="dataspace-info-modal__field__label">
+                    Support Email
+                  </div>
+                  <a
+                    className="dataspace-info-modal__field__value dataspace-info-modal__field__value--linkable"
+                    href={`mailto:${email.address}`}
+                  >
+                    {email.address}
+                  </a>
+                </div>
+              ))}
+            </PanelFullContent>
+          </Panel>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/data-product/LegendQueryDataProductQueryBuilder.tsx

@@ -0,0 +1,268 @@
+/**
+ * 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 { useApplicationStore } from '@finos/legend-application';
+import {
+  ModelAccessPointDataProductExecutionState,
+  DataProductQueryBuilderSetupFormContent,
+} from '@finos/legend-query-builder';
+import {
+  AnchorLinkIcon,
+  CogIcon,
+  ControlledDropdownMenu,
+  Dialog,
+  MenuContent,
+  MenuContentItem,
+  MenuContentItemIcon,
+  MenuContentItemLabel,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  ModalHeaderActions,
+  ModalTitle,
+  MoreVerticalIcon,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  TimesIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { LakehouseRuntime } from '@finos/legend-graph';
+import { useEffect, useState } from 'react';
+import type { LegendQueryDataProductQueryBuilderState } from '../../stores/data-product/query-builder/LegendQueryDataProductQueryBuilderState.js';
+import { LegendQueryUserDataHelper } from '../../__lib__/LegendQueryUserDataHelper.js';
+
+/**
+ * Modal for editing LakehouseRuntime configuration (environment and warehouse).
+ */
+const LakehouseRuntimeConfigModal = observer(
+  (props: {
+    executionState: ModelAccessPointDataProductExecutionState;
+    open: boolean;
+    onClose: () => void;
+    darkMode: boolean;
+  }) => {
+    const { executionState, open, onClose, darkMode } = props;
+    const lakehouseRuntime =
+      executionState.selectedRuntime?.runtimeValue instanceof LakehouseRuntime
+        ? executionState.selectedRuntime.runtimeValue
+        : undefined;
+    const [env, setEnv] = useState(lakehouseRuntime?.environment ?? '');
+    const [warehouse, setWarehouse] = useState(
+      lakehouseRuntime?.warehouse ?? '',
+    );
+
+    // sync local state when the modal opens or the runtime changes
+    useEffect(() => {
+      if (open && lakehouseRuntime) {
+        setEnv(lakehouseRuntime.environment ?? '');
+        setWarehouse(lakehouseRuntime.warehouse ?? '');
+      }
+    }, [open, lakehouseRuntime]);
+
+    const applicationStore = useApplicationStore();
+
+    const handleApply = (): void => {
+      if (lakehouseRuntime) {
+        const newEnv = env || undefined;
+        const newWarehouse = warehouse || undefined;
+        const hasChanged =
+          newEnv !== lakehouseRuntime.environment ||
+          newWarehouse !== lakehouseRuntime.warehouse;
+        lakehouseRuntime.environment = newEnv;
+        lakehouseRuntime.warehouse = newWarehouse;
+        if (hasChanged) {
+          LegendQueryUserDataHelper.persistLakehouseUserInfo(
+            applicationStore.userDataService,
+            {
+              env: newEnv,
+              snowflakeWarehouse: newWarehouse,
+            },
+          );
+        }
+      }
+      onClose();
+    };
+
+    if (!lakehouseRuntime) {
+      return null;
+    }
+
+    return (
+      <Dialog onClose={onClose} open={open}>
+        <Modal darkMode={darkMode}>
+          <ModalHeader>
+            <ModalTitle
+              icon={<CogIcon />}
+              title="Lakehouse Runtime Configuration"
+            />
+            <ModalHeaderActions>
+              <button
+                className="modal__header__action"
+                tabIndex={-1}
+                onClick={onClose}
+              >
+                <TimesIcon />
+              </button>
+            </ModalHeaderActions>
+          </ModalHeader>
+          <ModalBody>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Environment
+              </div>
+              <input
+                className="panel__content__form__section__input input--dark input--small"
+                spellCheck={false}
+                value={env}
+                placeholder="(optional)"
+                onChange={(e) => setEnv(e.target.value)}
+              />
+            </div>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Warehouse
+              </div>
+              <input
+                className="panel__content__form__section__input input--dark input--small"
+                spellCheck={false}
+                value={warehouse}
+                placeholder="(optional)"
+                onChange={(e) => setWarehouse(e.target.value)}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              text="Apply"
+              onClick={handleApply}
+              type="primary"
+            />
+            <ModalFooterButton
+              text="Cancel"
+              onClick={onClose}
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+const LegendDataProductQueryBuilderSetupPanelContent = observer(
+  (props: { queryBuilderState: LegendQueryDataProductQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const executionState = queryBuilderState.executionState;
+
+    // lakehouse runtime config modal
+    const showLakehouseConfigButton =
+      executionState instanceof ModelAccessPointDataProductExecutionState &&
+      executionState.selectedRuntime?.runtimeValue instanceof LakehouseRuntime;
+    const [isLakehouseConfigModalOpen, setIsLakehouseConfigModalOpen] =
+      useState(false);
+
+    // auto-select first class when none is chosen
+    const classes = queryBuilderState.usableClasses;
+    useEffect(() => {
+      if (!queryBuilderState.class && classes[0]) {
+        queryBuilderState.changeClass(classes[0]);
+      }
+    }, [classes, queryBuilderState]);
+
+    const copyDataProductLinkToClipboard = (): void => {
+      if (queryBuilderState.isProductLinkable) {
+        queryBuilderState.copyDataProductLinkToClipBoard();
+      }
+    };
+
+    return (
+      <div className="query-builder__setup__config-group">
+        <PanelHeader title="properties">
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
+              title="copy data product query set up link to clipboard"
+              onClick={copyDataProductLinkToClipboard}
+              disabled={!queryBuilderState.isProductLinkable}
+            >
+              <AnchorLinkIcon />
+            </PanelHeaderActionItem>
+            {showLakehouseConfigButton && (
+              <ControlledDropdownMenu
+                className="panel__header__action query-builder__setup__config-group__header__dropdown-trigger"
+                title="Show Settings..."
+                content={
+                  <MenuContent>
+                    <MenuContentItem
+                      onClick={() => setIsLakehouseConfigModalOpen(true)}
+                    >
+                      <MenuContentItemIcon>
+                        <CogIcon />
+                      </MenuContentItemIcon>
+                      <MenuContentItemLabel>
+                        Lakehouse Runtime Configuration
+                      </MenuContentItemLabel>
+                    </MenuContentItem>
+                  </MenuContent>
+                }
+                menuProps={{
+                  anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                  },
+                  transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                  },
+                }}
+              >
+                <MoreVerticalIcon className="query-builder__icon__more-options" />
+              </ControlledDropdownMenu>
+            )}
+          </PanelHeaderActions>
+        </PanelHeader>
+        <div className="query-builder__setup__config-group__content">
+          <DataProductQueryBuilderSetupFormContent
+            queryBuilderState={queryBuilderState}
+          />
+        </div>
+        {executionState instanceof
+          ModelAccessPointDataProductExecutionState && (
+          <LakehouseRuntimeConfigModal
+            executionState={executionState}
+            open={isLakehouseConfigModalOpen}
+            onClose={() => setIsLakehouseConfigModalOpen(false)}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export const renderLegendDataProductQueryBuilderSetupPanelContent = (
+  queryBuilderState: LegendQueryDataProductQueryBuilderState,
+): React.ReactNode => (
+  <LegendDataProductQueryBuilderSetupPanelContent
+    queryBuilderState={queryBuilderState}
+  />
+);