@finos/legend-application-studio 28.21.4 → 28.21.6

package/src/components/editor/editor-group/testable/TestableSharedComponents.tsx

@@ -595,6 +595,7 @@ const EqualToRelationAsssertionEditor = observer(
           equalToRelationAssertionState.expectedRelationElementState
         }
         isReadOnly={isReadOnly}
+        hideColumnDefinitions={true}
       />
     );
   },
@@ -610,25 +611,16 @@ const DataProductEqualToRelationAssertionEditor = observer(
 
     return (
       <div className="service-test-data-editor panel">
-        <div className="function-testable-editor__header">
-          <div className="function-testable-editor__header__title">
-            <div className="function-testable-editor__header__title__label">
-              expected
-            </div>
-          </div>
-        </div>
         <div className="panel__content__form__section">
           <div className="panel__content__form__section__header__label">
-            Access Point
-          </div>
-          <div className="panel__content__form__section__header__prompt">
-            {testState.accessPointLabel}
+            Access Point: {testState.accessPointLabel}
           </div>
         </div>
         {relationElementState ? (
           <RelationElementEditor
             relationElementState={relationElementState}
             isReadOnly={isReadOnly}
+            hideColumnDefinitions={true}
           />
         ) : (
           <BlankPanelPlaceholder

package/src/components/editor/side-bar/DevMetadataPanel.tsx

@@ -46,9 +46,13 @@ import {
   TrashIcon,
   PlusIcon,
   CogIcon,
+  InfoCircleIcon,
+  CompareIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
 } from '@finos/legend-art';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
-import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { CodeDiffView, CodeEditor } from '@finos/legend-lego/code-editor';
 import {
   type BuildLog,
   type BuildPhaseActionState,
@@ -338,6 +342,103 @@ const getPhaseStatusIcon = (status: BuildPhaseStatus): ReactNode => {
   }
 };
 
+const DevMetadataCompareModal = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
+  const devMetadataState = editorStore.devMetadataState;
+  const isOpen = devMetadataState.isCompareModalOpen;
+  const isLoading = devMetadataState.compareState.isInProgress;
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={() => devMetadataState.closeCompareModal()}
+      classes={{
+        root: 'editor-modal__root-container',
+        container: 'editor-modal__container',
+        paper: 'editor-modal__content',
+      }}
+    >
+      <Modal
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
+        className="editor-modal dev-metadata-compare-modal"
+      >
+        <ModalHeader>
+          <ModalTitle title="Compare Workspace with Dev Snapshot" />
+        </ModalHeader>
+        <ModalBody className="dev-metadata-compare-modal__body">
+          {isLoading && (
+            <div className="dev-metadata-compare-modal__loading">
+              <CircleNotchIcon className="dev-metadata-compare-modal__loading__spinner" />
+              <span>Loading diff…</span>
+            </div>
+          )}
+          {!isLoading && devMetadataState.snapshotNotAvailable && (
+            <div className="dev-metadata-compare-modal__empty">
+              <InfoCircleIcon />
+              <div>
+                <div className="dev-metadata-compare-modal__empty__title">
+                  Dev snapshot not available
+                </div>
+                <div className="dev-metadata-compare-modal__empty__body">
+                  No deployed metadata was found for this project at version{' '}
+                  <code>1.0.0-SNAPSHOT</code>. Push to dev first to create a
+                  snapshot to compare against.
+                </div>
+              </div>
+            </div>
+          )}
+          {!isLoading && !devMetadataState.snapshotNotAvailable && (
+            <div className="dev-metadata-compare-modal__diff">
+              <div className="dev-metadata-compare-modal__diff__legend">
+                <div className="dev-metadata-compare-modal__diff__legend__side dev-metadata-compare-modal__diff__legend__side--from">
+                  <span className="dev-metadata-compare-modal__diff__legend__badge dev-metadata-compare-modal__diff__legend__badge--from">
+                    Deployed
+                  </span>
+                  <span className="dev-metadata-compare-modal__diff__legend__label">
+                    Dev Snapshot
+                  </span>
+                  <code className="dev-metadata-compare-modal__diff__legend__version">
+                    1.0.0-SNAPSHOT
+                  </code>
+                </div>
+                <div className="dev-metadata-compare-modal__diff__legend__side dev-metadata-compare-modal__diff__legend__side--to">
+                  <span className="dev-metadata-compare-modal__diff__legend__badge dev-metadata-compare-modal__diff__legend__badge--to">
+                    Local
+                  </span>
+                  <span className="dev-metadata-compare-modal__diff__legend__label">
+                    Current Workspace
+                  </span>
+                </div>
+              </div>
+              <div className="dev-metadata-compare-modal__diff__view">
+                <CodeDiffView
+                  language={CODE_EDITOR_LANGUAGE.PURE}
+                  from={devMetadataState.snapshotCode ?? ''}
+                  to={devMetadataState.currentWorkspaceCode ?? ''}
+                />
+              </div>
+            </div>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <ModalFooterButton
+            text="Close"
+            onClick={() => devMetadataState.closeCompareModal()}
+            type="secondary"
+          />
+        </ModalFooter>
+      </Modal>
+    </Dialog>
+  );
+});
+
 const PhaseLogsViewer = observer(
   (props: { phase: BuildPhaseActionState; onClose: () => void }) => {
     const { phase, onClose } = props;
@@ -356,6 +457,17 @@ const PhaseLogsViewer = observer(
 
     const logs = phase.logs ? formatLogs(phase.logs) : 'No logs available';
 
+    const handleCopyLogs = (): void => {
+      applicationStore.clipboardService
+        .copyTextToClipboard(logs)
+        .then(() =>
+          applicationStore.notificationService.notifySuccess(
+            'Logs copied to clipboard',
+          ),
+        )
+        .catch(applicationStore.alertUnhandledError);
+    };
+
     return (
       <Dialog
         open={true}
@@ -386,6 +498,11 @@ const PhaseLogsViewer = observer(
             />
           </ModalBody>
           <ModalFooter>
+            <ModalFooterButton
+              text="Copy Logs"
+              onClick={handleCopyLogs}
+              type="secondary"
+            />
             <ModalFooterButton
               text="Close"
               onClick={onClose}
@@ -444,7 +561,13 @@ const DeploymentPhaseNode = observer(
         }
         menuProps={{ elevation: 7 }}
       >
-        <div className="deployment-phase__node">
+        <div
+          className={clsx('deployment-phase__node', {
+            'deployment-phase__node--clickable': hasLogs,
+          })}
+          onClick={hasLogs ? () => onViewLogs(phase) : undefined}
+          title={hasLogs ? 'Click to view logs' : undefined}
+        >
           <div className="deployment-phase__node__icon">{statusIcon}</div>
           <div className="deployment-phase__node__content">
             <div className="deployment-phase__node__title">{phase.phase}</div>
@@ -578,6 +701,7 @@ export const DevMetadataPanel = observer(() => {
   const editorStore = useEditorStore();
   const devMetadataState = editorStore.devMetadataState;
   const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
+  const [isInfoExpanded, setIsInfoExpanded] = useState(false);
 
   const handlePush = (): void => {
     flowResult(devMetadataState.push()).catch(
@@ -589,7 +713,15 @@ export const DevMetadataPanel = observer(() => {
     devMetadataState.setOptions(newOptions);
   };
 
+  const handleCompare = (): void => {
+    devMetadataState.openCompareModal();
+    flowResult(devMetadataState.compareWithSnapshot()).catch(
+      editorStore.applicationStore.alertUnhandledError,
+    );
+  };
+
   const isPushing = devMetadataState.pushState.isInProgress;
+  const isComparing = devMetadataState.compareState.isInProgress;
 
   return (
     <Panel>
@@ -628,6 +760,46 @@ export const DevMetadataPanel = observer(() => {
         </PanelFormSection>
 
         <PanelDivider />
+        <PanelFormSection>
+          <div
+            className={clsx('dev-metadata-panel__info-callout', {
+              'dev-metadata-panel__info-callout--collapsed': !isInfoExpanded,
+            })}
+          >
+            <button
+              type="button"
+              className="dev-metadata-panel__info-callout__header"
+              onClick={() => setIsInfoExpanded(!isInfoExpanded)}
+              title={isInfoExpanded ? 'Hide details' : 'Show details'}
+            >
+              <span className="dev-metadata-panel__info-callout__header__chevron">
+                {isInfoExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
+              </span>
+              <InfoCircleIcon />
+              <span className="dev-metadata-panel__info-callout__header__title">
+                Heads up — you&apos;re using Dev Mode
+              </span>
+            </button>
+            {isInfoExpanded && (
+              <div className="dev-metadata-panel__info-callout__content">
+                <div className="dev-metadata-panel__info-callout__body">
+                  This pushes your current workspace straight to your dev branch
+                  (
+                  <code className="dev-metadata-panel__info-callout__code">
+                    1.0.0-SNAPSHOT
+                  </code>
+                  ), bypassing the GitLab build pipeline so you can iterate and
+                  test changes faster.
+                </div>
+                <div className="dev-metadata-panel__info-callout__body">
+                  Any Lakehouse elements in your workspace — including ingests,
+                  materialized views, and data products — will be deployed by
+                  default.
+                </div>
+              </div>
+            )}
+          </div>
+        </PanelFormSection>
         <PanelFormSection>
           <div className="dev-metadata-panel__push-section">
             <div className="dev-metadata-panel__push-header">
@@ -635,14 +807,25 @@ export const DevMetadataPanel = observer(() => {
                 <div className="panel__content__form__section__header__label">
                   Deploy Metadata
                 </div>
-                <button
-                  className="dev-metadata-panel__settings-btn"
-                  onClick={() => setIsOptionsModalOpen(true)}
-                  title="Configure deployment options"
-                  disabled={isPushing}
-                >
-                  <CogIcon />
-                </button>
+                <div className="dev-metadata-panel__push-title-row__actions">
+                  <button
+                    className="dev-metadata-panel__compare-btn"
+                    onClick={handleCompare}
+                    title="Compare current workspace with the deployed dev snapshot"
+                    disabled={isPushing || isComparing}
+                  >
+                    <CompareIcon />
+                    <span>Compare with Dev</span>
+                  </button>
+                  <button
+                    className="dev-metadata-panel__settings-btn"
+                    onClick={() => setIsOptionsModalOpen(true)}
+                    title="Configure deployment options"
+                    disabled={isPushing}
+                  >
+                    <CogIcon />
+                  </button>
+                </div>
               </div>
               <div className="dev-metadata-panel__push-description">
                 {isPushing
@@ -702,6 +885,7 @@ export const DevMetadataPanel = observer(() => {
           options={devMetadataState.options}
           onSave={handleSaveOptions}
         />
+        <DevMetadataCompareModal />
       </PanelContent>
     </Panel>
   );

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

@@ -0,0 +1,161 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  FolderIcon,
+  HistoryIcon,
+  TimesIcon,
+  UserIcon,
+  UsersIcon,
+} from '@finos/legend-art';
+import { WorkspaceType } from '@finos/legend-server-sdlc';
+import type { WorkspaceSetupStore } from '../../stores/workspace-setup/WorkspaceSetupStore.js';
+import { generateEditorRoute } from '../../__lib__/LegendStudioNavigation.js';
+
+const MAX_TILES = 6;
+
+const formatRelativeTime = (timestamp: number): string => {
+  const diffMs = Date.now() - timestamp;
+  if (diffMs < 0) {
+    return 'just now';
+  }
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 1) {
+    return 'just now';
+  }
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(hours / 24);
+  if (days < 7) {
+    return `${days}d ago`;
+  }
+  const weeks = Math.floor(days / 7);
+  if (weeks < 4) {
+    return `${weeks}w ago`;
+  }
+  const months = Math.floor(days / 30);
+  if (months < 12) {
+    return `${months}mo ago`;
+  }
+  return `${Math.floor(days / 365)}y ago`;
+};
+
+export const RecentWorkspacesPanel = observer(
+  (props: { setupStore: WorkspaceSetupStore }) => {
+    const { setupStore } = props;
+    const applicationStore = setupStore.applicationStore;
+
+    // Recents are stored in LRU order (most-recent first). Show the top N
+    // workspaces; map each to its project name (or fall back to projectId
+    // if the matching project entry was evicted independently).
+    const tiles = setupStore.recentWorkspaces.slice(0, MAX_TILES);
+    if (tiles.length === 0) {
+      return null;
+    }
+
+    const projectNameById = new Map(
+      setupStore.recentProjects.map((p) => [p.projectId, p.name]),
+    );
+
+    const openWorkspace = (
+      projectId: string,
+      workspaceId: string,
+      workspaceType: WorkspaceType,
+    ): void => {
+      applicationStore.navigationService.navigator.goToLocation(
+        generateEditorRoute(projectId, undefined, workspaceId, workspaceType),
+      );
+    };
+
+    return (
+      <div className="workspace-setup__recents">
+        <div className="workspace-setup__recents__header">
+          <div className="workspace-setup__recents__header__title">
+            <HistoryIcon />
+            <span>Recent workspaces</span>
+          </div>
+        </div>
+        <div className="workspace-setup__recents__grid">
+          {tiles.map((entry) => {
+            const projectName =
+              projectNameById.get(entry.projectId) ?? entry.projectId;
+            const key = `${entry.projectId}::${entry.workspaceType}::${entry.workspaceId}`;
+            const handleRemove = (
+              event: React.MouseEvent<HTMLButtonElement>,
+            ): void => {
+              event.stopPropagation();
+              setupStore.removeRecentWorkspace({
+                projectId: entry.projectId,
+                workspaceId: entry.workspaceId,
+                workspaceType: entry.workspaceType,
+              });
+            };
+            return (
+              <button
+                key={key}
+                type="button"
+                className="workspace-setup__recents__tile"
+                title={`Open ${projectName} / ${entry.workspaceId}`}
+                onClick={() =>
+                  openWorkspace(
+                    entry.projectId,
+                    entry.workspaceId,
+                    entry.workspaceType,
+                  )
+                }
+              >
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  className="workspace-setup__recents__tile__remove"
+                  title="Remove from recents"
+                  onClick={handleRemove}
+                >
+                  <TimesIcon />
+                </button>
+                <div className="workspace-setup__recents__tile__project">
+                  <FolderIcon />
+                  <span className="workspace-setup__recents__tile__project__name">
+                    {projectName}
+                  </span>
+                </div>
+                <div className="workspace-setup__recents__tile__workspace">
+                  {entry.workspaceType === WorkspaceType.GROUP ? (
+                    <UsersIcon />
+                  ) : (
+                    <UserIcon />
+                  )}
+                  <span className="workspace-setup__recents__tile__workspace__name">
+                    {entry.workspaceId}
+                  </span>
+                </div>
+                <div className="workspace-setup__recents__tile__time">
+                  {formatRelativeTime(entry.lastOpenedAt)}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -52,6 +52,7 @@ import { CreateProjectModal } from './CreateProjectModal.js';
 import { ActivityBarMenu } from '../editor/ActivityBar.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/LegendStudioApplicationNavigationContext.js';
 import { CreateWorkspaceModal } from './CreateWorkspaceModal.js';
+import { RecentWorkspacesPanel } from './RecentWorkspacesPanel.js';
 import {
   useLegendStudioApplicationStore,
   useLegendStudioBaseStore,
@@ -66,7 +67,12 @@ import {
   buildWorkspaceOption,
   formatWorkspaceOptionLabel,
 } from './WorkspaceSelectorUtils.js';
-import { debounce, guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  debounce,
+  guaranteeNonNullable,
+  type PlainObject,
+} from '@finos/legend-shared';
+import { Project } from '@finos/legend-server-sdlc';
 import { WorkspaceSetupStore } from '../../stores/workspace-setup/WorkspaceSetupStore.js';
 import { openShowcaseManager } from '../../stores/ShowcaseManagerState.js';
 
@@ -360,18 +366,57 @@ export const WorkspaceSetup = withWorkspaceSetupStore(
       applicationStore.assistantService.toggleAssistant();
 
     // projects
-    const projectOptions = setupStore.projects
+    // Build a unified option list: recent projects (that aren't already in the
+    // loaded set) are prepended so users can instantly re-open common work
+    // without waiting for the SDLC search to round-trip.
+    const loadedProjectOptions = setupStore.projects
       .map(buildProjectOption)
       .sort(compareLabelFn);
+    const loadedProjectIds = new Set(
+      setupStore.projects.map((p) => p.projectId),
+    );
+    const recentProjectOptions: ProjectOption[] = setupStore.recentProjects
+      .filter((r) => !loadedProjectIds.has(r.projectId))
+      .map((r) => {
+        // Construct a lightweight Project stand-in so the existing selector
+        // contract is preserved. The full project will be fetched on click
+        // via `selectRecentProject`.
+        const stub = Project.serialization.fromJson({
+          projectId: r.projectId,
+          name: r.name,
+          description: '',
+          webUrl: '',
+          tags: [],
+        } as PlainObject<Project>);
+        return { label: stub.name, value: stub };
+      });
+    const projectOptions: ProjectOption[] = [
+      ...recentProjectOptions,
+      ...loadedProjectOptions,
+    ];
+    const recentProjectIdSet = new Set(
+      setupStore.recentProjects.map((p) => p.projectId),
+    );
     const selectedProjectOption = setupStore.currentProject
       ? buildProjectOption(setupStore.currentProject)
       : null;
 
     const onProjectChange = (val: ProjectOption | null): void => {
       if (val) {
-        flowResult(setupStore.changeProject(val.value)).catch(
-          applicationStore.alertUnhandledError,
-        );
+        // If the selection corresponds to a recent that hasn't been loaded
+        // from search yet, fetch the project before switching.
+        const isUnloadedRecent =
+          !loadedProjectIds.has(val.value.projectId) &&
+          recentProjectIdSet.has(val.value.projectId);
+        if (isUnloadedRecent) {
+          flowResult(setupStore.selectRecentProject(val.value.projectId)).catch(
+            applicationStore.alertUnhandledError,
+          );
+        } else {
+          flowResult(setupStore.changeProject(val.value)).catch(
+            applicationStore.alertUnhandledError,
+          );
+        }
       } else {
         setupStore.resetProject();
       }
@@ -404,9 +449,40 @@ export const WorkspaceSetup = withWorkspaceSetupStore(
     };
 
     // workspaces
-    const workspaceOptions = setupStore.workspaces
-      .map(buildWorkspaceOption)
+    // Recent (non-patch) workspaces for the currently selected project are
+    // floated to the top of the dropdown so users can re-enter their
+    // typical work without scanning the full list.
+    const projectIdForRecents = setupStore.currentProject?.projectId;
+    const recentWorkspaceKeys = new Set(
+      projectIdForRecents
+        ? setupStore.recentWorkspaces
+            .filter((w) => w.projectId === projectIdForRecents)
+            .map((w) => `${w.workspaceType}::${w.workspaceId}`)
+        : [],
+    );
+    const allWorkspaceOptions = setupStore.workspaces.map(buildWorkspaceOption);
+    const recentWorkspaceOptions = allWorkspaceOptions
+      .filter(
+        (o) =>
+          o.value.source === undefined &&
+          recentWorkspaceKeys.has(
+            `${o.value.workspaceType}::${o.value.workspaceId}`,
+          ),
+      )
+      .sort(compareLabelFn);
+    const otherWorkspaceOptions = allWorkspaceOptions
+      .filter(
+        (o) =>
+          o.value.source !== undefined ||
+          !recentWorkspaceKeys.has(
+            `${o.value.workspaceType}::${o.value.workspaceId}`,
+          ),
+      )
       .sort(compareLabelFn);
+    const workspaceOptions = [
+      ...recentWorkspaceOptions,
+      ...otherWorkspaceOptions,
+    ];
     const selectedWorkspaceOption = setupStore.currentWorkspace
       ? buildWorkspaceOption(setupStore.currentWorkspace)
       : null;
@@ -489,11 +565,24 @@ export const WorkspaceSetup = withWorkspaceSetupStore(
                       Welcome to Legend Studio
                     </div>
                   </div>
+                  <RecentWorkspacesPanel setupStore={setupStore} />
                   <div className="workspace-setup__selectors">
                     <div className="workspace-setup__selectors__container">
                       <div className="workspace-setup__selector">
                         <div className="workspace-setup__selector__header">
-                          Search for an existing project
+                          <span>Search for an existing project</span>
+                          {(setupStore.recentProjects.length > 0 ||
+                            setupStore.recentWorkspaces.length > 0) && (
+                            <button
+                              type="button"
+                              className="workspace-setup__selector__header__clear-recents"
+                              tabIndex={-1}
+                              onClick={() => setupStore.clearRecents()}
+                              title="Clear recently-opened projects and workspaces"
+                            >
+                              Clear recents
+                            </button>
+                          )}
                         </div>
                         <div className="workspace-setup__selector__content">
                           <div