@finos/legend-application-studio 28.21.3 → 28.21.5

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

@@ -15,6 +15,7 @@
  */
 
 import {
+  BlankPanelPlaceholder,
   clsx,
   CompareIcon,
   ContextMenu,
@@ -38,6 +39,7 @@ import {
 } from '@finos/legend-art';
 import {
   type DataElement,
+  DataProduct,
   type ValueSpecification,
   type VariableExpression,
   type PrimitiveInstanceValue,
@@ -61,6 +63,8 @@ import {
   type TestAssertionState,
   EqualToAssertionState,
   EqualToAssertFailState,
+  EqualToRelationAssertionState,
+  EqualToRelationAssertFailState,
 } from '../../../../stores/editor/editor-state/element-editor-state/testable/TestAssertionState.js';
 import { externalFormatData_setData } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
 import { TESTABLE_RESULT } from '../../../../stores/editor/sidebar-state/testable/GlobalTestRunnerState.js';
@@ -76,11 +80,13 @@ import {
   getPackageableElementOptionFormatter,
 } from '@finos/legend-lego/graph-editor';
 import type { TestParamContentType } from '../../../../stores/editor/utils/TestableUtils.js';
+import { RelationElementEditor } from '../data-editor/RelationElementsDataEditor.js';
 import {
   BasicValueSpecificationEditor,
   buildDefaultInstanceValue,
 } from '@finos/legend-query-builder';
 import { useApplicationStore } from '@finos/legend-application';
+import type { DataProductTestState } from '../../../../stores/editor/editor-state/element-editor-state/dataProduct/testable/DataProductTestableState.js';
 
 export const SharedDataElementModal = observer(
   (props: {
@@ -575,6 +581,123 @@ const TestErrorViewer = observer((props: { testError: TestError }) => {
   );
 });
 
+const EqualToRelationAsssertionEditor = observer(
+  (props: {
+    testAssertionEditorState: TestAssertionEditorState;
+    equalToRelationAssertionState: EqualToRelationAssertionState;
+  }) => {
+    const { equalToRelationAssertionState, testAssertionEditorState } = props;
+    const isReadOnly = testAssertionEditorState.testState.isReadOnly;
+
+    return (
+      <RelationElementEditor
+        relationElementState={
+          equalToRelationAssertionState.expectedRelationElementState
+        }
+        isReadOnly={isReadOnly}
+      />
+    );
+  },
+);
+
+const DataProductEqualToRelationAssertionEditor = observer(
+  (props: { testAssertionEditorState: TestAssertionEditorState }) => {
+    const { testAssertionEditorState } = props;
+    const testState =
+      testAssertionEditorState.testState as DataProductTestState;
+    const isReadOnly = testAssertionEditorState.testState.isReadOnly;
+    const relationElementState = testState.testDataRelationState;
+
+    return (
+      <div className="service-test-data-editor panel">
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Access Point: {testState.accessPointLabel}
+          </div>
+        </div>
+        {relationElementState ? (
+          <RelationElementEditor
+            relationElementState={relationElementState}
+            isReadOnly={isReadOnly}
+            hideColumnDefinitions={true}
+          />
+        ) : (
+          <BlankPanelPlaceholder
+            text="No expected columns"
+            tooltipText="No expected columns configured for this test"
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+const EqualToRelationAssertFailViewer = observer(
+  (props: {
+    equalToRelationAssertFailState: EqualToRelationAssertFailState;
+  }) => {
+    const { equalToRelationAssertFailState } = props;
+    const applicationStore =
+      equalToRelationAssertFailState.resultState.editorStore.applicationStore;
+    const open = (): void => equalToRelationAssertFailState.setDiffModal(true);
+    const close = (): void =>
+      equalToRelationAssertFailState.setDiffModal(false);
+    const expected = equalToRelationAssertFailState.status.expected;
+    const actual = equalToRelationAssertFailState.status.actual;
+
+    return (
+      <>
+        <div className="equal-to-json-editor__message" onClick={open}>
+          {`<Click to see difference>`}
+        </div>
+        {equalToRelationAssertFailState.diffModal && (
+          <Dialog
+            open={Boolean(equalToRelationAssertFailState.diffModal)}
+            onClose={close}
+            classes={{
+              root: 'editor-modal__root-container',
+              container: 'editor-modal__container',
+              paper: 'editor-modal__content',
+            }}
+          >
+            <Modal
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              className="editor-modal"
+            >
+              <ModalHeader>
+                <div className="equal-to-json-result__diff__summary">
+                  <div className="equal-to-json-result__diff__header__label">
+                    expected
+                  </div>
+                  <div className="equal-to-json-result__diff__icon">
+                    <CompareIcon />
+                  </div>
+                  <div className="equal-to-json-result__diff__header__label">
+                    actual
+                  </div>
+                </div>
+              </ModalHeader>
+              <ModalBody>
+                <JSONDiffView from={expected} to={actual} lossless={false} />
+              </ModalBody>
+              <ModalFooter>
+                <ModalFooterButton
+                  text="Close"
+                  onClick={close}
+                  type="secondary"
+                />
+              </ModalFooter>
+            </Modal>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+);
+
 const AssertFailViewer = observer(
   (props: { assertFailState: AssertFailState }) => {
     const { assertFailState } = props;
@@ -606,6 +729,10 @@ const AssertFailViewer = observer(
           <EqualToJsonAssertFailViewer
             equalToJsonAssertFailState={assertFailState}
           />
+        ) : assertFailState instanceof EqualToRelationAssertFailState ? (
+          <EqualToRelationAssertFailViewer
+            equalToRelationAssertFailState={assertFailState}
+          />
         ) : assertFailState instanceof EqualToAssertFailState ? (
           <EqualToAssertFailViewer equalToAssertFailState={assertFailState} />
         ) : isGenericEqualToFail ? (
@@ -849,6 +976,8 @@ export const TestAssertionEditor = observer(
     const { testAssertionState } = props;
     const selectedTab = testAssertionState.selectedTab;
     const isReadOnly = testAssertionState.testState.isReadOnly;
+    const isDataProductTest =
+      testAssertionState.testState.testable instanceof DataProduct;
     const isDisabled =
       isReadOnly ||
       !testAssertionState.assertionState.supportsGeneratingAssertion ||
@@ -870,6 +999,20 @@ export const TestAssertionEditor = observer(
             testAssertionEditorState={testAssertionState}
           />
         );
+      } else if (state instanceof EqualToRelationAssertionState) {
+        if (isDataProductTest) {
+          return (
+            <DataProductEqualToRelationAssertionEditor
+              testAssertionEditorState={testAssertionState}
+            />
+          );
+        }
+        return (
+          <EqualToRelationAsssertionEditor
+            equalToRelationAssertionState={state}
+            testAssertionEditorState={testAssertionState}
+          />
+        );
       }
       return (
         <UnsupportedEditorPanel
@@ -901,22 +1044,24 @@ export const TestAssertionEditor = observer(
               </div>
             ))}
           </div>
-          <div className="testable-test-assertion-editor__header__actions">
-            <button
-              className="panel__header__action service-execution-editor__test-data__generate-btn"
-              onClick={generate}
-              title="Generate expected result if possible"
-              disabled={isDisabled}
-              tabIndex={-1}
-            >
-              <div className="service-execution-editor__test-data__generate-btn__label">
-                <RefreshIcon className="service-execution-editor__test-data__generate-btn__label__icon" />
-                <div className="service-execution-editor__test-data__generate-btn__label__title">
-                  Generate
+          {!isDataProductTest && (
+            <div className="testable-test-assertion-editor__header__actions">
+              <button
+                className="panel__header__action service-execution-editor__test-data__generate-btn"
+                onClick={generate}
+                title="Generate expected result if possible"
+                disabled={isDisabled}
+                tabIndex={-1}
+              >
+                <div className="service-execution-editor__test-data__generate-btn__label">
+                  <RefreshIcon className="service-execution-editor__test-data__generate-btn__label__icon" />
+                  <div className="service-execution-editor__test-data__generate-btn__label__title">
+                    Generate
+                  </div>
                 </div>
-              </div>
-            </button>
-          </div>
+              </button>
+            </div>
+          )}
         </div>
         <div className="testable-test-assertion-editor__content">
           {selectedTab === TEST_ASSERTION_TAB.EXPECTED && (

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>
   );