@finos/legend-application-studio 28.21.4 → 28.21.5

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

@@ -610,25 +610,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/stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.ts

@@ -32,6 +32,10 @@ import {
 } from '@finos/legend-graph';
 import {
   ContentType,
+  csvDecodeValue,
+  csvEncodeValue,
+  csvStringify,
+  parseCSVContent,
   guaranteeNonEmptyString,
   tryToFormatLosslessJSONString,
   UnsupportedOperationError,
@@ -273,10 +277,16 @@ export class RelationElementState {
 
   updateRow(rowIndex: number, columnIndex: number, value: string): void {
     if (this.relationElement.rows[rowIndex]) {
-      this.relationElement.rows[rowIndex].values[columnIndex] = value;
+      this.relationElement.rows[rowIndex].values[columnIndex] =
+        csvEncodeValue(value);
     }
   }
 
+  getDisplayValue(rowIndex: number, columnIndex: number): string {
+    const value = this.relationElement.rows[rowIndex]?.values[columnIndex];
+    return value !== undefined ? csvDecodeValue(value) : '';
+  }
+
   clearAllData(): void {
     this.relationElement.rows.splice(0);
   }
@@ -285,7 +295,9 @@ export class RelationElementState {
     return JSON.stringify(
       {
         columns: this.relationElement.columns,
-        data: this.relationElement.rows,
+        data: this.relationElement.rows.map((row) => ({
+          values: row.values.map((v) => csvDecodeValue(v)),
+        })),
       },
       null,
       2,
@@ -310,7 +322,7 @@ export class RelationElementState {
     const insertStatements = this.relationElement.rows.map((row) => {
       const values = this.relationElement.columns
         .map((col, colIndex) => {
-          const value = row.values[colIndex] ?? '';
+          const value = csvDecodeValue(row.values[colIndex] ?? '');
           if (value !== '') {
             return `'${value.replace(/'/g, "''")}'`;
           }
@@ -324,64 +336,30 @@ export class RelationElementState {
   }
 
   exportCSV(): string {
-    const headers = this.relationElement.columns.map((col) => col);
-    const csvLines = [headers.join(',')];
-
-    this.relationElement.rows.forEach((row) => {
-      const values = headers.map((header, headerIndex) => {
-        const value = row.values[headerIndex] ?? '';
-        if (value.includes(',') || value.includes('"')) {
-          return `"${value.replace(/"/g, '""')}"`;
-        }
-        return value;
-      });
-      csvLines.push(values.join(','));
-    });
-
-    return csvLines.join('\n');
-  }
-
-  private parseCSVLine(line: string): string[] {
-    const result: string[] = [];
-    let current = '';
-    let inQuotes = false;
-
-    for (let i = 0; i < line.length; i++) {
-      const char = line[i];
-      if (char === '"') {
-        inQuotes = !inQuotes;
-      } else if (char === ',' && !inQuotes) {
-        result.push(current.trim());
-        current = '';
-      } else {
-        current += char;
-      }
-    }
-    result.push(current.trim());
-    return result;
+    // decode so that csvStringify does not double encode
+    const data = this.relationElement.rows.map((row) =>
+      row.values.map((v) => csvDecodeValue(v)),
+    );
+    return csvStringify([this.relationElement.columns, ...data]);
   }
 
   importCSV(csvContent: string): void {
-    const lines = csvContent.trim().split('\n');
-    if (lines.length === 0) {
+    const parsed = parseCSVContent(csvContent);
+    if (parsed.length === 0) {
       return;
     }
 
-    const firstLine = lines[0];
-    if (!firstLine) {
+    const headers = parsed[0];
+    if (!headers) {
       return;
     }
 
-    const headers = this.parseCSVLine(firstLine);
     this.relationElement.columns = headers;
-
-    this.relationElement.rows = lines.slice(1).map((line) => {
-      const values = this.parseCSVLine(line);
+    this.relationElement.rows = parsed.slice(1).map((values) => {
       const row = new RelationRowTestData();
-      row.values = [];
-      headers.forEach((header, index) => {
-        row.values[index] = values[index] ?? '';
-      });
+      row.values = headers.map((_, index) =>
+        csvEncodeValue(values[index] ?? ''),
+      );
       return observe_RelationRowTestData(row);
     });
   }