@finos/legend-application-studio 28.19.117 → 28.21.0

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -22,7 +22,6 @@ import {
   DATA_PRODUCT_TAB,
   DATA_PRODUCT_TYPE,
   DataProductEditorState,
-  generateUrlToDeployOnOpen,
   LakehouseAccessPointState,
   ModelAccessPointGroupState,
 } from '../../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
@@ -68,7 +67,6 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
   ResizablePanelSplitter,
-  RocketIcon,
   Switch,
   TimesIcon,
   Tooltip,
@@ -91,13 +89,23 @@ import {
   useState,
 } from 'react';
 import {
+  assertErrorThrown,
   filterByType,
+  guaranteeNonNullable,
   guaranteeType,
+  isNonNullable,
   UserSearchService,
 } from '@finos/legend-shared';
-import { InlineLambdaEditor, LineageViewer } from '@finos/legend-query-builder';
+import {
+  AccessorQueryBuilderState,
+  getCompatibleRuntimesFromAccessorOwner,
+  InlineLambdaEditor,
+  LineageViewer,
+  QueryBuilderActionConfig,
+  QueryBuilderAdvancedWorkflowState,
+  type QueryBuilderState,
+} from '@finos/legend-query-builder';
 import { action, autorun, flowResult } from 'mobx';
-import { useAuth } from 'react-oidc-context';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 import {
@@ -126,6 +134,11 @@ import {
   observer_DataProductLink,
   DataProduct_Region,
   DataProduct_DeliveryFrequency,
+  AppDirOwner,
+  AppDirNode,
+  observe_AppDirOwner,
+  observe_AppDirNode,
+  AppDirLevel,
 } from '@finos/legend-graph';
 import {
   accessPoint_setClassification,
@@ -159,6 +172,10 @@ import {
   dataProductDiagram_setTitle,
   dataProductDiagram_setDescription,
   operationalMetadata_setUpdateFrequency,
+  dataProduct_setOwner,
+  appDirOwner_setProduction,
+  appDirOwner_setProdParallel,
+  appDirNode_setAppDirId,
 } from '../../../../stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
@@ -802,6 +819,90 @@ export const LakehouseDataProductAccessPointEditor = observer(
     const generateLineage = editorStore.applicationStore.guardUnhandledError(
       () => flowResult(accessPointState.generateLineage()),
     );
+
+    const editLambdaInQueryBuilder =
+      editorStore.applicationStore.guardUnhandledError(async () => {
+        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+        const applicationStore = editorStore.applicationStore;
+        const ingestDefinition =
+          editorStore.graphManagerState.graph.ownIngests.find(isNonNullable);
+        if (!ingestDefinition) {
+          applicationStore.notificationService.notifyError(
+            'No ingest definition found in this project',
+          );
+          return;
+        }
+        await flowResult(
+          embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+            setupQueryBuilderState: async (): Promise<QueryBuilderState> => {
+              const queryBuilderState = new AccessorQueryBuilderState(
+                applicationStore,
+                undefined,
+                editorStore.graphManagerState,
+                QueryBuilderAdvancedWorkflowState.INSTANCE,
+                QueryBuilderActionConfig.INSTANCE,
+                applicationStore.config.options.queryBuilderConfig,
+                editorStore.editorMode.getSourceInfo(),
+              );
+              queryBuilderState.changeAccessorOwner(ingestDefinition);
+              const compatibleRuntimes = getCompatibleRuntimesFromAccessorOwner(
+                ingestDefinition,
+                editorStore.graphManagerState,
+              );
+              if (compatibleRuntimes.length > 0) {
+                queryBuilderState.changeSelectedRuntime(
+                  guaranteeNonNullable(compatibleRuntimes[0]),
+                );
+              }
+              queryBuilderState.initializeWithQuery(accessPoint.func);
+              return queryBuilderState;
+            },
+            actionConfigs: [
+              {
+                key: 'save-query-btn',
+                renderer: (
+                  queryBuilderState: QueryBuilderState,
+                ): React.ReactNode => {
+                  const save = applicationStore.guardUnhandledError(
+                    async () => {
+                      try {
+                        const rawLambda =
+                          queryBuilderState.buildQueryForPersistence();
+                        accessPoint.func = rawLambda;
+                        embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
+                          undefined,
+                        );
+                        await flowResult(
+                          lambdaEditorState.convertLambdaObjectToGrammarString({
+                            pretty: true,
+                          }),
+                        );
+                      } catch (error) {
+                        assertErrorThrown(error);
+                        applicationStore.notificationService.notifyError(
+                          `Can't save access point lambda: ${error.message}`,
+                        );
+                      }
+                    },
+                  );
+                  return (
+                    <button
+                      className="query-builder__dialog__header__custom-action"
+                      tabIndex={-1}
+                      disabled={props.isReadOnly}
+                      onClick={save}
+                    >
+                      Save Lambda
+                    </button>
+                  );
+                },
+              },
+            ],
+            disableCompile: true,
+          }),
+        );
+      });
+
     return (
       <PanelDnDEntry
         ref={ref}
@@ -866,17 +967,7 @@ export const LakehouseDataProductAccessPointEditor = observer(
                     disabled={props.isReadOnly}
                     title="Edit sample values"
                     style={{
-                      border: '1px solid var(--color-blue-200)',
-                      borderRadius: '4px',
-                      padding: '0.5rem 0.75rem',
-                      background: 'var(--color-blue-200)',
                       cursor: props.isReadOnly ? 'not-allowed' : 'pointer',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '0.5rem',
-                      color: 'white',
-                      fontSize: '1.2rem',
-                      whiteSpace: 'nowrap',
                     }}
                   >
                     <PencilEditIcon />
@@ -894,16 +985,7 @@ export const LakehouseDataProductAccessPointEditor = observer(
                       border: accessPointState.hasRelationElementMismatch
                         ? '2px solid var(--color-red-300)'
                         : '1px solid var(--color-blue-200)',
-                      borderRadius: '4px',
-                      padding: '0.5rem 0.75rem',
-                      background: 'var(--color-blue-200)',
                       cursor: props.isReadOnly ? 'not-allowed' : 'pointer',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '0.5rem',
-                      color: 'white',
-                      fontSize: '1.2rem',
-                      whiteSpace: 'nowrap',
                     }}
                   >
                     <PencilEditIcon />
@@ -918,17 +1000,7 @@ export const LakehouseDataProductAccessPointEditor = observer(
                     disabled={props.isReadOnly}
                     title="Add sample values"
                     style={{
-                      border: '1px solid var(--color-blue-200)',
-                      borderRadius: '4px',
-                      padding: '0.5rem 0.75rem',
-                      background: 'var(--color-blue-200)',
                       cursor: props.isReadOnly ? 'not-allowed' : 'pointer',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '0.5rem',
-                      color: 'white',
-                      fontSize: '1.2rem',
-                      whiteSpace: 'nowrap',
                     }}
                   >
                     <PlusIcon />
@@ -1138,6 +1210,15 @@ export const LakehouseDataProductAccessPointEditor = observer(
               <div className="access-point-editor__generic-entry">
                 <div className="access-point-editor__entry__container">
                   <div className="access-point-editor__entry">
+                    <button
+                      className="access-point-editor__query-builder-btn"
+                      onClick={editLambdaInQueryBuilder}
+                      disabled={props.isReadOnly}
+                      title="Edit lambda with query builder"
+                    >
+                      <PencilEditIcon />
+                      <span>Query Builder</span>
+                    </button>
                     <InlineLambdaEditor
                       className={'access-point-editor__lambda-editor'}
                       disabled={
@@ -2370,6 +2451,112 @@ const DataProductIconEditor = observer(
   },
 );
 
+const DataProductOwnershipEditor = observer(
+  (props: { product: DataProduct; isReadOnly: boolean }) => {
+    const { product, isReadOnly } = props;
+    const owner =
+      product.owner instanceof AppDirOwner ? product.owner : undefined;
+
+    const ensureOwner = (): AppDirOwner => {
+      if (owner) {
+        return owner;
+      }
+      const newOwner = observe_AppDirOwner(new AppDirOwner());
+      dataProduct_setOwner(product, newOwner);
+      return newOwner;
+    };
+
+    const handleProductionChange: ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      const currentOwner = ensureOwner();
+      const val = event.target.value;
+      if (val === '') {
+        appDirOwner_setProduction(currentOwner, undefined);
+        if (!currentOwner.prodParallel) {
+          dataProduct_setOwner(product, undefined);
+        }
+        return;
+      }
+      const num = Number(val);
+      if (Number.isNaN(num)) {
+        return;
+      }
+      if (currentOwner.production) {
+        appDirNode_setAppDirId(currentOwner.production, num);
+        return;
+      }
+      const node = observe_AppDirNode(new AppDirNode());
+      node.appDirId = num;
+      node.level = AppDirLevel.DEPLOYMENT;
+      appDirOwner_setProduction(currentOwner, node);
+    };
+
+    const handleProdParallelChange: ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      const currentOwner = ensureOwner();
+      const val = event.target.value;
+      if (val === '') {
+        appDirOwner_setProdParallel(currentOwner, undefined);
+        if (!currentOwner.production) {
+          dataProduct_setOwner(product, undefined);
+        }
+        return;
+      }
+      const num = Number(val);
+      if (Number.isNaN(num)) {
+        return;
+      }
+      if (currentOwner.prodParallel) {
+        appDirNode_setAppDirId(currentOwner.prodParallel, num);
+        return;
+      }
+      const node = observe_AppDirNode(new AppDirNode());
+      node.appDirId = num;
+      node.level = AppDirLevel.DEPLOYMENT;
+      appDirOwner_setProdParallel(currentOwner, node);
+    };
+
+    return (
+      <>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Ownership
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            Set the AppDir ownership for this Data Product.
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            Production AppDir ID
+          </div>
+          <input
+            className="input input-group__input panel__content__form__section__input input--dark input--small"
+            type="number"
+            disabled={isReadOnly}
+            value={owner?.production?.appDirId ?? ''}
+            onChange={handleProductionChange}
+            placeholder="Enter production AppDir ID"
+          />
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__prompt">
+            Prod Parallel AppDir ID
+          </div>
+          <input
+            className="input input-group__input panel__content__form__section__input input--dark input--small"
+            type="number"
+            disabled={isReadOnly}
+            value={owner?.prodParallel?.appDirId ?? ''}
+            onChange={handleProdParallelChange}
+            placeholder="Enter prod parallel AppDir ID"
+          />
+        </div>
+      </>
+    );
+  },
+);
+
 const HomeTab = observer(
   (props: {
     dataProductEditorState: DataProductEditorState;
@@ -2543,6 +2730,10 @@ const HomeTab = observer(
             )}
           </div>
           <DataProductIconEditor product={product} isReadOnly={isReadOnly} />
+          <DataProductOwnershipEditor
+            product={product}
+            isReadOnly={isReadOnly}
+          />
         </div>
       </div>
     );
@@ -3158,35 +3349,10 @@ export const DataProductEditor = observer(() => {
     editorStore.tabManagerState.getCurrentEditorState(DataProductEditorState);
   const product = dataProductEditorState.product;
   const isReadOnly = dataProductEditorState.isReadOnly;
-  const auth = useAuth();
   const [showPreview, setShowPreview] = useState(false);
   const [dataProductViewerState, setDataProductViewerState] =
     useState<DataProductViewerState>();
 
-  const deployDataProduct = (): void => {
-    // Trigger OAuth flow if not authenticated
-    if (!auth.isAuthenticated) {
-      // remove this redirect if we move to do oauth at the beginning of opening studio
-      auth
-        .signinRedirect({
-          state: generateUrlToDeployOnOpen(dataProductEditorState),
-        })
-        .catch(editorStore.applicationStore.alertUnhandledError);
-      return;
-    }
-    // Use the token for deployment
-    const token = auth.user?.access_token;
-    if (token) {
-      flowResult(dataProductEditorState.deploy(token)).catch(
-        editorStore.applicationStore.alertUnhandledError,
-      );
-    } else {
-      editorStore.applicationStore.notificationService.notifyError(
-        'Authentication failed. No token available.',
-      );
-    }
-  };
-
   const selectedActivity = dataProductEditorState.selectedTab;
   const renderActivivtyBarTab = (): React.ReactNode => {
     switch (selectedActivity) {
@@ -3233,18 +3399,6 @@ export const DataProductEditor = observer(() => {
     );
   }, [dataProductEditorState]);
 
-  useEffect(() => {
-    if (dataProductEditorState.deployOnOpen) {
-      flowResult(dataProductEditorState.deploy(auth.user?.access_token)).catch(
-        editorStore.applicationStore.alertUnhandledError,
-      );
-    }
-  }, [
-    auth,
-    editorStore.applicationStore.alertUnhandledError,
-    dataProductEditorState,
-  ]);
-
   useEffect(
     () =>
       autorun(
@@ -3326,25 +3480,10 @@ export const DataProductEditor = observer(() => {
                 )}
               </button>
             </div>
-            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
-              <button
-                className="btn__dropdown-combo__label"
-                onClick={deployDataProduct}
-                title={dataProductEditorState.deployValidationMessage}
-                tabIndex={-1}
-                disabled={!dataProductEditorState.deployValidationMessage}
-              >
-                <RocketIcon className="btn__dropdown-combo__label__icon" />
-                <div className="btn__dropdown-combo__label__title">Deploy</div>
-              </button>
-            </div>
           </PanelHeaderActions>
         </div>
 
-        <div
-          className="panel"
-          style={{ padding: '1rem', flexDirection: 'row' }}
-        >
+        <div className="panel data-product-editor__content-panel">
           <DataProductSidebar dataProductEditorState={dataProductEditorState} />
           <ResizablePanelGroup orientation="vertical">
             <ResizablePanel>{renderActivivtyBarTab()}</ResizablePanel>

package/src/components/editor/editor-group/database-editor/DatabaseAnnotationDisplay.tsx

@@ -0,0 +1,200 @@
+/**
+ * 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 { BasePopover, clsx, HashtagIcon, TagIcon } from '@finos/legend-art';
+import type { StereotypeReference, TaggedValue } from '@finos/legend-graph';
+import { useState } from 'react';
+
+/**
+ * Read-only display for `stereotypes` + `taggedValues` on any
+ * `AnnotatedElement` (Database, Schema, Table, View, Column). Mirrors the
+ * Pure DSL form `<<profile.stereo>> { tag = "value" }` but rendered as small
+ * inline pills so it can sit next to a relation name in a header row, in a
+ * tree row, or in a dedicated section.
+ *
+ * Three layout modes:
+ *   - `inline` (default): pills flow next to the surrounding row content.
+ *   - `block`: pills wrap into their own block (used in side-panel sections
+ *     where the parent has its own column structure).
+ *   - `compact`: only renders a single combined badge with the count — used
+ *     when horizontal space is tight (e.g. the canvas table-node header).
+ *     Hover shows the full content via `title`.
+ *
+ * The component is dependency-free (no MobX) so it can be used from any of
+ * the editor's sub-components without observability concerns — the inputs
+ * are static metamodel arrays.
+ */
+
+const formatStereotype = (stereotype: StereotypeReference): string => {
+  // Pure surface syntax: `profile.stereotypeName`. We mimic that for the
+  // tooltip + compact-mode label so users see the same identifier the
+  // grammar uses.
+  const profilePath =
+    stereotype.ownerReference.valueForSerialization ??
+    stereotype.value._OWNER.path;
+  return `${profilePath}.${stereotype.value.value}`;
+};
+
+const formatTaggedValue = (taggedValue: TaggedValue): string => {
+  // Same rationale as above — match the grammar form `profile.tag = "value"`.
+  const profilePath =
+    taggedValue.tag.ownerReference.valueForSerialization ??
+    taggedValue.tag.value._OWNER.path;
+  return `${profilePath}.${taggedValue.tag.value.value} = "${taggedValue.value}"`;
+};
+
+/**
+ * Click-to-open popover badge used in compact mode. Kept separate from the
+ * parent component so the `useState` hook for the popover anchor is
+ * unconditionally called (the parent has an early-return for the empty case
+ * which would otherwise put this hook below a conditional).
+ */
+function CompactAnnotationBadge(props: {
+  stereotypes: StereotypeReference[];
+  taggedValues: TaggedValue[];
+  className?: string | undefined;
+}): React.ReactElement {
+  const { stereotypes, taggedValues, className } = props;
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const total = stereotypes.length + taggedValues.length;
+  return (
+    <>
+      <button
+        type="button"
+        className={clsx(
+          'database-annotation',
+          'database-annotation--compact',
+          className,
+        )}
+        onClick={(event) => {
+          // Stop propagation so clicking the badge inside a clickable canvas
+          // node header (or tree row) doesn't also trigger the parent's
+          // selection handler.
+          event.stopPropagation();
+          setAnchor(event.currentTarget);
+        }}
+        title={`${total} annotation${total === 1 ? '' : 's'} \u2014 click to view`}
+      >
+        <TagIcon />
+        <span className="database-annotation__count">{total}</span>
+      </button>
+      <BasePopover
+        open={Boolean(anchor)}
+        anchorEl={anchor}
+        onClose={() => setAnchor(null)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      >
+        <div
+          className="database-annotation__popover"
+          // Stop click events on the popover content from reaching the
+          // ReactFlow canvas underneath.
+          onClick={(event) => event.stopPropagation()}
+        >
+          {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
+          <DatabaseAnnotationDisplay
+            stereotypes={stereotypes}
+            taggedValues={taggedValues}
+            layout="block"
+          />
+        </div>
+      </BasePopover>
+    </>
+  );
+}
+
+export interface DatabaseAnnotationDisplayProps {
+  stereotypes: StereotypeReference[];
+  taggedValues: TaggedValue[];
+  /** Layout density. Defaults to `inline`. */
+  layout?: 'inline' | 'block' | 'compact';
+  /** Optional className appended to the root element for layout overrides. */
+  className?: string | undefined;
+}
+
+export const DatabaseAnnotationDisplay: React.FC<
+  DatabaseAnnotationDisplayProps
+> = ({ stereotypes, taggedValues, layout = 'inline', className }) => {
+  if (stereotypes.length === 0 && taggedValues.length === 0) {
+    return null;
+  }
+
+  // Compact: collapse everything into a single badge with the total count.
+  // Useful inside dense headers (canvas table-node) where a row of pills
+  // would crowd out the relation name. Click opens a popover with the full
+  // list rendered in `block` layout. Extracted into its own component so
+  // the `useState` hook is unconditionally called (we can't put a hook
+  // after the early-return at the top of the parent).
+  if (layout === 'compact') {
+    return (
+      <CompactAnnotationBadge
+        stereotypes={stereotypes}
+        taggedValues={taggedValues}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        'database-annotation',
+        `database-annotation--${layout}`,
+        className,
+      )}
+    >
+      {stereotypes.map((stereotype) => {
+        const label = formatStereotype(stereotype);
+        return (
+          // Profiles can re-use stereotype names across owners, so prefix the
+          // key with the owner path to keep keys unique.
+          <span
+            key={`stereo:${label}`}
+            className="database-annotation__stereotype"
+            title={`«${label}»`}
+          >
+            <HashtagIcon />
+            <span className="database-annotation__stereotype__label">
+              {stereotype.value.value}
+            </span>
+          </span>
+        );
+      })}
+      {taggedValues.map((taggedValue) => {
+        const tagName = taggedValue.tag.value.value;
+        return (
+          // Tagged values aren't unique by tag (the same tag can appear
+          // twice with different values), so we key off `_UUID` rather than
+          // a composite of tag path + name.
+          <span
+            key={taggedValue._UUID}
+            className="database-annotation__tagged-value"
+            title={formatTaggedValue(taggedValue)}
+          >
+            <TagIcon />
+            <span className="database-annotation__tagged-value__name">
+              {tagName}
+            </span>
+            <span className="database-annotation__tagged-value__sep">=</span>
+            <span className="database-annotation__tagged-value__value">
+              {taggedValue.value}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};