@finos/legend-application-studio 28.21.42 → 28.21.44

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

@@ -53,7 +53,6 @@ import {
   ModalFooter,
   ModalFooterButton,
   ModalHeader,
-  ModalTitle,
   PanelContent,
   PanelDnDEntry,
   PanelEntryDragHandle,
@@ -198,7 +197,7 @@ import {
 } from '@finos/legend-extension-dsl-data-product';
 import type { LegendStudioApplicationStore } from '../../../../stores/LegendStudioBaseStore.js';
 import type { DepotServerClient } from '@finos/legend-server-depot';
-import { RelationElementEditor } from '../data-editor/RelationElementsDataEditor.js';
+import { RelationElementSampleValuesEditor } from '../data-editor/RelationElementSampleValuesEditor.js';
 import type {
   AccessPointMeta,
   DataProductDocResponse,
@@ -492,216 +491,6 @@ const AccessPointGenerationViewer = observer(
   },
 );
 
-const SampleValuesEditorModal = observer(
-  (props: {
-    accessPointState: LakehouseAccessPointState;
-    isReadOnly: boolean;
-  }) => {
-    const { accessPointState, isReadOnly } = props;
-    const editorStore = accessPointState.state.state.editorStore;
-    const dataElementPath =
-      accessPointState.relationElementExistsinDataElementReference();
-    const closeModal = (): void => {
-      accessPointState.setShowSampleValuesModal(false);
-    };
-
-    const handleDeleteSampleValues = (): void => {
-      editorStore.applicationStore.alertService.setActionAlertInfo({
-        message: `Are you sure you want to delete sample values for Access Point ${accessPointState.accessPoint.id}?`,
-        type: ActionAlertType.CAUTION,
-        actions: [
-          {
-            label: 'Confirm',
-            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-            handler: (): void => {
-              accessPointState.deleteRelationElement();
-              closeModal();
-            },
-          },
-          {
-            label: 'Cancel',
-            type: ActionAlertActionType.PROCEED,
-            default: true,
-          },
-        ],
-      });
-    };
-
-    const handleNavigateToDataElement = (): void => {
-      if (dataElementPath) {
-        const dataElement =
-          editorStore.graphManagerState.graph.getNullableElement(
-            dataElementPath,
-          );
-        if (dataElement) {
-          editorStore.graphEditorMode.openElement(dataElement);
-          closeModal();
-        }
-      }
-    };
-
-    return (
-      <Dialog
-        open={accessPointState.showSampleValuesModal}
-        onClose={closeModal}
-        classes={{
-          root: 'editor-modal__root-container',
-          container: 'editor-modal__container',
-          paper: 'editor-modal__content',
-        }}
-      >
-        <Modal
-          className="editor-modal"
-          darkMode={
-            !editorStore.applicationStore.layoutService
-              .TEMPORARY__isLightColorThemeEnabled
-          }
-        >
-          <ModalHeader
-            title={`${accessPointState.accessPoint.title ?? accessPointState.accessPoint.id} Sample Values`}
-          />
-          <ModalBody>
-            <div
-              style={{
-                padding: 0,
-                height: '100%',
-                flex: 1,
-                overflowY: 'auto',
-                overflowX: 'hidden',
-              }}
-            >
-              {dataElementPath !== undefined ? (
-                <div
-                  style={{
-                    padding: '1.5rem',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: '1rem',
-                  }}
-                >
-                  <span
-                    style={{
-                      color: 'var(--color-light-grey-200)',
-                      whiteSpace: 'nowrap',
-                      fontSize: '1.3rem',
-                      fontWeight: 600,
-                    }}
-                  >
-                    Sample Values already in Data Element
-                  </span>
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '0.5rem',
-                      padding: '0.5rem 1rem',
-                      background: 'var(--color-dark-grey-100)',
-                      border: '1px solid var(--color-dark-grey-300)',
-                      borderRadius: '0.2rem',
-                    }}
-                  >
-                    <span
-                      style={{
-                        fontSize: '1.3rem',
-                        fontWeight: 600,
-                        color: 'var(--color-light-grey-200)',
-                      }}
-                    >
-                      {dataElementPath}
-                    </span>
-                    <button
-                      className="btn--sm btn--dark"
-                      onClick={handleNavigateToDataElement}
-                      tabIndex={-1}
-                      title="Navigate to data element"
-                      style={{
-                        padding: '0.3rem 0.5rem',
-                        display: 'flex',
-                        alignItems: 'center',
-                      }}
-                    >
-                      <LongArrowRightIcon />
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <>
-                  <div
-                    style={{
-                      color: 'var(--color-orange-200)',
-                      fontWeight: 'bold',
-                      fontSize: '14px',
-                      padding: '0.5rem',
-                      marginBottom: '1rem',
-                      textAlign: 'center',
-                      backgroundColor: 'var(--color-orange-50)',
-                      border: '2px solid var(--color-orange-200)',
-                      borderRadius: '4px',
-                    }}
-                  >
-                    DO NOT ADD SENSITIVE DATA
-                  </div>
-                  {accessPointState.relationElementState && (
-                    <Tooltip
-                      title={
-                        accessPointState.getRelationElementMismatchMessage() ??
-                        ''
-                      }
-                      arrow={true}
-                      placement="top"
-                      disableHoverListener={
-                        !accessPointState.hasRelationElementMismatch
-                      }
-                    >
-                      <div
-                        style={{
-                          border: accessPointState.hasRelationElementMismatch
-                            ? '2px solid var(--color-red-300)'
-                            : 'none',
-                          borderRadius: '4px',
-                          padding: accessPointState.hasRelationElementMismatch
-                            ? '0.5rem'
-                            : '0',
-                        }}
-                      >
-                        <RelationElementEditor
-                          relationElementState={
-                            accessPointState.relationElementState
-                          }
-                          isReadOnly={isReadOnly}
-                          hideColumnDefinitions={true}
-                        />
-                      </div>
-                    </Tooltip>
-                  )}
-                </>
-              )}
-            </div>
-          </ModalBody>
-          <ModalFooter>
-            {dataElementPath === undefined && (
-              <ModalFooterButton
-                title="Delete sample values"
-                onClick={handleDeleteSampleValues}
-                text="Delete"
-                type="secondary"
-                disabled={isReadOnly}
-              />
-            )}
-            <ModalFooterButton
-              title="Close sample values editor"
-              onClick={closeModal}
-              text="Close"
-              type="secondary"
-            />
-          </ModalFooter>
-        </Modal>
-      </Dialog>
-    );
-  },
-);
-
 export const LakehouseDataProductAccessPointEditor = observer(
   (props: {
     accessPointState: LakehouseAccessPointState;
@@ -971,58 +760,39 @@ export const LakehouseDataProductAccessPointEditor = observer(
                     <div>Reproducible</div>
                   </Tooltip>
                 </div>
-                {accessPointState.relationElementExistsinDataElementReference() !==
-                undefined ? (
-                  <button
-                    className="access-point-editor__sample-values-btn"
-                    onClick={() =>
-                      accessPointState.setShowSampleValuesModal(true)
-                    }
-                    disabled={props.isReadOnly}
-                    title="Edit sample values"
-                    style={{
-                      cursor: props.isReadOnly ? 'not-allowed' : 'pointer',
-                    }}
-                  >
-                    <PencilEditIcon />
-                    <span>Sample Values</span>
-                  </button>
-                ) : accessPointState.relationElementState !== undefined ? (
-                  <button
-                    className="access-point-editor__sample-values-btn"
-                    onClick={() =>
-                      accessPointState.setShowSampleValuesModal(true)
-                    }
-                    disabled={props.isReadOnly}
-                    title="Edit sample values"
-                    style={{
-                      border: accessPointState.hasRelationElementMismatch
-                        ? '2px solid var(--color-red-300)'
-                        : '1px solid var(--color-blue-200)',
-                      cursor: props.isReadOnly ? 'not-allowed' : 'pointer',
-                    }}
-                  >
-                    <PencilEditIcon />
-                    <span>Sample Values</span>
-                  </button>
-                ) : (
-                  <button
-                    className="access-point-editor__sample-values-btn"
-                    onClick={() => {
-                      flowResult(
-                        accessPointState.createAndaddRelationElement(),
-                      ).catch(editorStore.applicationStore.alertUnhandledError);
-                    }}
-                    disabled={props.isReadOnly}
-                    title="Add sample values"
-                    style={{
-                      cursor: props.isReadOnly ? 'not-allowed' : 'pointer',
-                    }}
-                  >
-                    <PlusIcon />
-                    <span>Sample Values</span>
-                  </button>
-                )}
+                <RelationElementSampleValuesEditor
+                  title={`${accessPointState.accessPoint.title ?? accessPointState.accessPoint.id} Sample Values`}
+                  relationElementState={accessPointState.relationElementState}
+                  isReadOnly={props.isReadOnly}
+                  hideColumnDefinitions={true}
+                  hasMismatch={accessPointState.hasRelationElementMismatch}
+                  mismatchMessage={accessPointState.getRelationElementMismatchMessage()}
+                  readOnlySource={(() => {
+                    const dataElementPath =
+                      accessPointState.relationElementExistsinDataElementReference();
+                    return dataElementPath !== undefined
+                      ? {
+                          label: dataElementPath,
+                          onNavigate: () => {
+                            const dataElement =
+                              editorStore.graphManagerState.graph.getNullableElement(
+                                dataElementPath,
+                              );
+                            if (dataElement) {
+                              editorStore.graphEditorMode.openElement(
+                                dataElement,
+                              );
+                            }
+                          },
+                        }
+                      : undefined;
+                  })()}
+                  deleteConfirmMessage={`Are you sure you want to delete sample values for Access Point ${accessPointState.accessPoint.id}?`}
+                  onAdd={() =>
+                    flowResult(accessPointState.createAndaddRelationElement())
+                  }
+                  onDelete={() => accessPointState.deleteRelationElement()}
+                />
                 {editorStore.applicationStore.config.options
                   .dataProductConfig && (
                   <AccessPointClassification
@@ -1277,68 +1047,12 @@ export const LakehouseDataProductAccessPointEditor = observer(
               generationOutput={accessPointState.artifactGenerationContent}
             />
           )}
-          {accessPointState.showSampleValuesModal && (
-            <SampleValuesEditorModal
-              accessPointState={accessPointState}
-              isReadOnly={props.isReadOnly}
-            />
-          )}
         </div>
       </PanelDnDEntry>
     );
   },
 );
 
-const DataProductDeploymentResponseModal = observer(
-  (props: { state: DataProductEditorState }) => {
-    const { state } = props;
-    const applicationStore = state.editorStore.applicationStore;
-    const closeModal = (): void => state.setDeployResponse(undefined);
-    return (
-      <Dialog
-        open={Boolean(state.deployResponse)}
-        classes={{
-          root: 'editor-modal__root-container',
-          container: 'editor-modal__container',
-          paper: 'editor-modal__content',
-        }}
-        onClose={closeModal}
-      >
-        <Modal
-          darkMode={
-            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
-          }
-          className="editor-modal"
-        >
-          <ModalHeader>
-            <ModalTitle title="Data Product Deployment Response" />
-          </ModalHeader>
-          <ModalBody>
-            <PanelContent>
-              <CodeEditor
-                inputValue={JSON.stringify(
-                  state.deployResponse?.content ?? {},
-                  null,
-                  2,
-                )}
-                isReadOnly={true}
-                language={CODE_EDITOR_LANGUAGE.JSON}
-              />
-            </PanelContent>
-          </ModalBody>
-          <ModalFooter>
-            <ModalFooterButton
-              onClick={closeModal}
-              text="Close"
-              type="secondary"
-            />
-          </ModalFooter>
-        </Modal>
-      </Dialog>
-    );
-  },
-);
-
 const AccessPointGroupPublicToggle = observer(
   (props: { groupState: AccessPointGroupState }) => {
     const { groupState } = props;
@@ -1580,6 +1294,7 @@ const AccessPointGroupEditor = observer(
       LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestLaunched(
         editorStore.applicationStore.telemetryService,
         productEditorState.product.path,
+        editorStore.editorMode.getSourceInfo(),
       );
       setIsSuggestingWithAI(true);
       setAISuggestion(undefined);
@@ -1602,6 +1317,7 @@ const AccessPointGroupEditor = observer(
           editorStore.applicationStore.telemetryService,
           productEditorState.product.path,
           error.message,
+          editorStore.editorMode.getSourceInfo(),
         );
         if (
           error instanceof NetworkClientError &&
@@ -1630,6 +1346,7 @@ const AccessPointGroupEditor = observer(
       LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestApplied(
         editorStore.applicationStore.telemetryService,
         productEditorState.product.path,
+        editorStore.editorMode.getSourceInfo(),
       );
       // Find matching group in the response
       const gIdx =
@@ -1672,6 +1389,7 @@ const AccessPointGroupEditor = observer(
       LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestDiscarded(
         editorStore.applicationStore.telemetryService,
         productEditorState.product.path,
+        editorStore.editorMode.getSourceInfo(),
       );
       setAISuggestion(undefined);
     };
@@ -2198,9 +1916,6 @@ const AccessPointGroupTab = observer(
             />
           )}
         </PanelContent>
-        {dataProductEditorState.deployResponse && (
-          <DataProductDeploymentResponseModal state={dataProductEditorState} />
-        )}
       </div>
     );
   },

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -274,6 +274,7 @@ const ServiceGeneralEditor = observer(() => {
     LegendStudioTelemetryHelper.logEvent_ServiceLegendAISuggestLaunched(
       applicationStore.telemetryService,
       service.path,
+      editorStore.editorMode.getSourceInfo(),
     );
     setIsSuggestingWithAI(true);
     setAIDocSuggestion(undefined);
@@ -290,6 +291,7 @@ const ServiceGeneralEditor = observer(() => {
         applicationStore.telemetryService,
         service.path,
         error.message,
+        editorStore.editorMode.getSourceInfo(),
       );
       if (
         error instanceof NetworkClientError &&
@@ -315,6 +317,7 @@ const ServiceGeneralEditor = observer(() => {
     LegendStudioTelemetryHelper.logEvent_ServiceLegendAISuggestApplied(
       applicationStore.telemetryService,
       service.path,
+      editorStore.editorMode.getSourceInfo(),
     );
     service_setDocumentation(service, aiDocSuggestion);
     setAIDocSuggestion(undefined);
@@ -323,6 +326,7 @@ const ServiceGeneralEditor = observer(() => {
     LegendStudioTelemetryHelper.logEvent_ServiceLegendAISuggestDiscarded(
       applicationStore.telemetryService,
       service.path,
+      editorStore.editorMode.getSourceInfo(),
     );
     setAIDocSuggestion(undefined);
   };

package/src/components/showcase/ShowcaseFeedback.tsx

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2026-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 { useEffect, useRef, useState } from 'react';
+import { clsx, ThumbsUpIcon, ThumbsDownIcon } from '@finos/legend-art';
+import { useApplicationStore } from '@finos/legend-application';
+import { LegendStudioUserDataHelper } from '../../__lib__/LegendStudioUserDataHelper.js';
+import {
+  LegendStudioTelemetryHelper,
+  SHOWCASE_FEEDBACK_VOTE,
+  type SHOWCASE_FEEDBACK_SURFACE,
+} from '../../__lib__/LegendStudioTelemetryHelper.js';
+
+const THANKS_DISPLAY_DURATION_MS = 2500;
+
+/**
+ * "Was this showcase helpful?" widget.
+ *
+ * v1 storage strategy: telemetry is the source of truth for aggregate
+ * analysis (`showcase.viewer.feedback.submit`). The user's vote per
+ * showcase is cached in browser `UserDataService` (localStorage) purely
+ * so we can suppress re-prompting on revisit — there is no backend today.
+ *
+ * UX: once a user votes, the buttons are replaced with a brief
+ * "Thanks for the feedback!" message and then the whole widget unmounts.
+ * On subsequent visits to the same showcase, the widget renders nothing.
+ */
+export const ShowcaseFeedback = (props: {
+  showcasePath: string;
+  title?: string | undefined;
+  surface: SHOWCASE_FEEDBACK_SURFACE;
+  /** Optional CSS class hook so the two mount points can size / align. */
+  className?: string | undefined;
+}) => {
+  const { showcasePath, title, surface, className } = props;
+  const applicationStore = useApplicationStore();
+  const alreadyVoted = Boolean(
+    LegendStudioUserDataHelper.showcaseFeedback_getVote(
+      applicationStore.userDataService,
+      showcasePath,
+    ),
+  );
+  const [phase, setPhase] = useState<'prompt' | 'thanks' | 'done'>(
+    alreadyVoted ? 'done' : 'prompt',
+  );
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+
+  useEffect(
+    () => (): void => {
+      if (timeoutRef.current !== undefined) {
+        clearTimeout(timeoutRef.current);
+      }
+    },
+    [],
+  );
+
+  const submit = (vote: SHOWCASE_FEEDBACK_VOTE): void => {
+    LegendStudioUserDataHelper.showcaseFeedback_recordVote(
+      applicationStore.userDataService,
+      {
+        showcasePath,
+        vote: vote === SHOWCASE_FEEDBACK_VOTE.UP ? 'up' : 'down',
+      },
+    );
+    LegendStudioTelemetryHelper.logEvent_ShowcaseFeedbackSubmit(
+      applicationStore.telemetryService,
+      {
+        showcasePath,
+        title,
+        vote,
+        surface,
+      },
+    );
+    setPhase('thanks');
+    timeoutRef.current = setTimeout(() => {
+      setPhase('done');
+    }, THANKS_DISPLAY_DURATION_MS);
+  };
+
+  if (phase === 'done') {
+    return null;
+  }
+
+  if (phase === 'thanks') {
+    return (
+      <div
+        className={clsx('showcase-feedback', className)}
+        role="status"
+        aria-live="polite"
+      >
+        <div className="showcase-feedback__prompt">
+          Thanks for the feedback!
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx('showcase-feedback', className)}>
+      <div className="showcase-feedback__prompt">Was this helpful?</div>
+      <button
+        type="button"
+        className="showcase-feedback__btn"
+        tabIndex={-1}
+        title="Thumbs up"
+        onClick={() => submit(SHOWCASE_FEEDBACK_VOTE.UP)}
+      >
+        <ThumbsUpIcon />
+      </button>
+      <button
+        type="button"
+        className="showcase-feedback__btn"
+        tabIndex={-1}
+        title="Thumbs down"
+        onClick={() => submit(SHOWCASE_FEEDBACK_VOTE.DOWN)}
+      >
+        <ThumbsDownIcon />
+      </button>
+    </div>
+  );
+};

package/src/components/showcase/ShowcaseViewer.tsx

@@ -62,6 +62,8 @@ import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
 import { Explorer } from '../editor/side-bar/Explorer.js';
 import { PanelGroup } from '../editor/panel-group/PanelGroup.js';
 import { QueryDataCubeViewer } from '@finos/legend-query-builder';
+import { ShowcaseFeedback } from './ShowcaseFeedback.js';
+import { SHOWCASE_FEEDBACK_SURFACE } from '../../__lib__/LegendStudioTelemetryHelper.js';
 
 const ShowcaseViewerStatusBar = observer(() => {
   const editorStore = useEditorStore();
@@ -109,6 +111,14 @@ const ShowcaseViewerStatusBar = observer(() => {
             </div>
           </div>
         )}
+        {showcase && (
+          <ShowcaseFeedback
+            className="showcase-feedback--status-bar"
+            showcasePath={showcaseStore.showcase.path}
+            title={showcase.title}
+            surface={SHOWCASE_FEEDBACK_SURFACE.DEEP_LINK_VIEWER}
+          />
+        )}
       </div>
       <div className="editor__status-bar__right">
         <button

package/src/components/workspace-setup/WorkspaceSetup.tsx

@@ -80,6 +80,7 @@ import {
 import { Project } from '@finos/legend-server-sdlc';
 import { WorkspaceSetupStore } from '../../stores/workspace-setup/WorkspaceSetupStore.js';
 import { openShowcaseManager } from '../../stores/ShowcaseManagerState.js';
+import { SHOWCASE_MANAGER_ENTRY_POINT } from '../../__lib__/LegendStudioTelemetryHelper.js';
 
 const WorkspaceSetupStoreContext = createContext<
   WorkspaceSetupStore | undefined
@@ -151,7 +152,11 @@ export const ShowcaseCard: React.FC<{ hideDocumentation?: boolean }> = (
               <OpenIcon />
             </div>
           ),
-          action: () => openShowcaseManager(applicationStore),
+          action: () =>
+            openShowcaseManager(
+              applicationStore,
+              SHOWCASE_MANAGER_ENTRY_POINT.WORKSPACE_SETUP,
+            ),
         },
       ]}
       isStable={true}

package/src/index.ts

@@ -118,9 +118,11 @@ export {
   externalFormatData_setContentType,
 } from './stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
 export { ExternalFormatDataEditor } from './components/editor/editor-group/data-editor/DataElementEditor.js';
+export { RelationElementSampleValuesEditor } from './components/editor/editor-group/data-editor/RelationElementSampleValuesEditor.js';
 export {
   ExternalFormatDataState,
   EmbeddedDataState,
+  RelationElementState,
 } from './stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
 export type { EmbeddedDataTypeOption } from './stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
 

package/src/stores/LegendStudioBaseStore.ts

@@ -159,6 +159,7 @@ export class LegendStudioBaseStore {
       serverUrl: this.applicationStore.config.sdlcServerUrl,
       baseHeaders: this.applicationStore.config.sdlcServerBaseHeaders,
       client: this.applicationStore.config.sdlcServerClient,
+      useCookieAuthOnly: this.applicationStore.config.sdlcUseCookieAuthOnly,
       // On a mid-session 401, auto-launch the popup re-auth flow. The
       // handler enforces a one-attempt-per-episode guard to prevent endless
       // retry loops; when it gives up, the StatusBar manual button remains