From dc2178117f59f1c76337e21bdee329fdbcc8c80d Mon Sep 17 00:00:00 2001
From: Kavith Lokuhewage <kaviththiranga@gmail.com>
Date: Sat, 16 May 2026 10:28:08 +0530
Subject: [PATCH] fix(release-diff): swap orientation, fix scroll, rename
 promote action

  Three small fixes to the release-diff experience:

  - Swap LHS/RHS in ComponentReleaseDiffDialog so the target env's current
    release is the "before" (left) and the upstream's incoming release is
    the "after" (right). Matches how reviewers actually read promotion
    diffs. The dialog title arrow still reflects promotion direction. Both
    callers (drift chip on the env detail panel and the promote action on
    the overrides page) pick up the new orientation automatically.

  - YamlDiffViewer: move height + overflow:auto onto .cm-mergeView per
    CodeMirror MergeView docs so both panes scroll as one unit instead of
    scrolling independently and breaking line alignment.

  - Rename the promote-flow button "View diff" -> "View release diff" to
    match the wording already used by the drift-chip button.

Signed-off-by: Kavith Lokuhewage <kaviththiranga@gmail.com>
---
 .../YamlDiffViewer/YamlDiffViewer.tsx         | 13 ++++++---
 .../Environments/EnvironmentOverridesPage.tsx |  2 +-
 .../components/ComponentReleaseDiffDialog.tsx | 28 +++++++++++--------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/plugins/openchoreo-react/src/components/YamlDiffViewer/YamlDiffViewer.tsx b/plugins/openchoreo-react/src/components/YamlDiffViewer/YamlDiffViewer.tsx
index 82d103ea9..e70aedca8 100644
--- a/plugins/openchoreo-react/src/components/YamlDiffViewer/YamlDiffViewer.tsx
+++ b/plugins/openchoreo-react/src/components/YamlDiffViewer/YamlDiffViewer.tsx
@@ -48,17 +48,22 @@ const useStyles = makeStyles<Theme, StyleProps>(theme => ({
     whiteSpace: 'nowrap',
   },
   container: ({ height, isDark }) => ({
-    height,
     fontSize: '0.75rem',
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
     overflow: 'hidden',
     backgroundColor: isDark ? '#1e1e1e' : '#fafafa',
-    '& .cm-mergeView, & .cm-mergeViewEditors': {
-      height: '100%',
+    // Per CodeMirror's MergeView docs: views are not scrollable by default —
+    // the .cm-mergeView itself must have a height and `overflow: auto` to
+    // become the scroller. Both panes are children of .cm-mergeView, so they
+    // scroll together as one unit. CM's baseTheme forces inner .cm-scroller
+    // to height:auto + overflow:visible when nested in a .cm-mergeView, so
+    // we don't override those.
+    '& .cm-mergeView': {
+      height,
+      overflow: 'auto',
     },
     '& .cm-editor': {
-      height: '100%',
       backgroundColor: 'transparent',
     },
     '& .cm-scroller': {
diff --git a/plugins/openchoreo/src/components/Environments/EnvironmentOverridesPage.tsx b/plugins/openchoreo/src/components/Environments/EnvironmentOverridesPage.tsx
index 0733e5a8f..f750fea6c 100644
--- a/plugins/openchoreo/src/components/Environments/EnvironmentOverridesPage.tsx
+++ b/plugins/openchoreo/src/components/Environments/EnvironmentOverridesPage.tsx
@@ -708,7 +708,7 @@ export const EnvironmentOverridesPage = ({
               disabled={saving || deleting}
               style={{ marginRight: 8 }}
             >
-              View diff
+              View release diff
             </Button>
           </span>
         </Tooltip>
diff --git a/plugins/openchoreo/src/components/Environments/components/ComponentReleaseDiffDialog.tsx b/plugins/openchoreo/src/components/Environments/components/ComponentReleaseDiffDialog.tsx
index f21122047..a648c34ac 100644
--- a/plugins/openchoreo/src/components/Environments/components/ComponentReleaseDiffDialog.tsx
+++ b/plugins/openchoreo/src/components/Environments/components/ComponentReleaseDiffDialog.tsx
@@ -74,25 +74,29 @@ export const ComponentReleaseDiffDialog = ({
     setOriginal(null);
     setModified(null);
 
+    // Diff orientation: LHS shows the target env's *current* release ("before"),
+    // RHS shows the upstream env's incoming release ("after"). The dialog title's
+    // `upstreamEnv → targetEnv` arrow still reflects promotion direction, not
+    // LHS → RHS.
     const fetches: Array<Promise<unknown>> = [];
-    if (upstreamReleaseName) {
+    if (releaseName) {
       fetches.push(
-        api.fetchComponentRelease(entity, upstreamReleaseName).then(res => {
+        api.fetchComponentRelease(entity, releaseName).then(res => {
           if (cancelled) return;
           if (!res?.success || !res.data) {
-            setError(`Couldn't fetch ${upstreamEnvName}'s release manifest.`);
+            setError(`Couldn't fetch ${environmentName}'s release manifest.`);
             return;
           }
           setOriginal(YAML.stringify(res.data));
         }),
       );
     }
-    if (releaseName) {
+    if (upstreamReleaseName) {
       fetches.push(
-        api.fetchComponentRelease(entity, releaseName).then(res => {
+        api.fetchComponentRelease(entity, upstreamReleaseName).then(res => {
           if (cancelled) return;
           if (!res?.success || !res.data) {
-            setError(`Couldn't fetch ${environmentName}'s release manifest.`);
+            setError(`Couldn't fetch ${upstreamEnvName}'s release manifest.`);
             return;
           }
           setModified(YAML.stringify(res.data));
@@ -146,28 +150,28 @@ export const ComponentReleaseDiffDialog = ({
           <YamlDiffViewer
             original={original}
             modified={modified}
-            originalLabel={`${upstreamEnvName} (${upstreamReleaseName})`}
-            modifiedLabel={`${environmentName} (${releaseName})`}
+            originalLabel={`${environmentName} (${releaseName})`}
+            modifiedLabel={`${upstreamEnvName} (${upstreamReleaseName})`}
             height="60vh"
           />
         )}
-        {previewMode === 'source-only' && original && (
+        {previewMode === 'source-only' && modified && (
           <>
             <Typography variant="body2" color="textSecondary" gutterBottom>
               <strong>{environmentName}</strong> has no release yet — this is
               the manifest that will be created from{' '}
               <strong>{upstreamEnvName}</strong>.
             </Typography>
-            <YamlViewer value={original} maxHeight="60vh" showLineNumbers />
+            <YamlViewer value={modified} maxHeight="60vh" showLineNumbers />
           </>
         )}
-        {previewMode === 'target-only' && modified && (
+        {previewMode === 'target-only' && original && (
           <>
             <Typography variant="body2" color="textSecondary" gutterBottom>
               <strong>{upstreamEnvName}</strong> has no release to compare;
               showing <strong>{environmentName}</strong>'s current manifest.
             </Typography>
-            <YamlViewer value={modified} maxHeight="60vh" showLineNumbers />
+            <YamlViewer value={original} maxHeight="60vh" showLineNumbers />
           </>
         )}
       </DialogContent>