feat(release-browser): add compare mode to diff two releases

  Adds a View/Compare toggle to the right pane. In Compare mode the user
  picks a reference release from a grouped Autocomplete (current-in-env
  bindings first, then any other release) and the right pane renders a
  side-by-side YamlDiffViewer of that reference vs the highlighted
  release. When opened with an environmentName, pre-fills the comparison
  target with that env's current release so the common "is this release
  different from what's deployed?" question resolves with zero clicks.

  Manifests are fetched on demand and cached, so toggling and switching
  targets are free. Existing view-mode behavior, search, and selection
  flow are unchanged.

Signed-off-by: Kavith Lokuhewage <kaviththiranga@gmail.com>

Author: kaviththiranga

plugins/openchoreo/src/components/Environments/components/ReleaseBrowserDialog.test.tsx

@@ -22,6 +22,30 @@ jest.mock('@openchoreo/backstage-design-system', () => ({
   ),
 }));
 
+// The plugin-react entry pulls Backstage's TabbedLayout transitively which
+// blows up under jest's isolated module env. Only YamlDiffViewer is used
+// here; mock the package surface to that one component.
+jest.mock('@openchoreo/backstage-plugin-react', () => ({
+  YamlDiffViewer: ({
+    original,
+    modified,
+    originalLabel,
+    modifiedLabel,
+  }: {
+    original: string;
+    modified: string;
+    originalLabel?: string;
+    modifiedLabel?: string;
+  }) => (
+    <div data-testid="yaml-diff-viewer">
+      <div data-testid="diff-original-label">{originalLabel}</div>
+      <div data-testid="diff-modified-label">{modifiedLabel}</div>
+      <pre data-testid="diff-original">{original}</pre>
+      <pre data-testid="diff-modified">{modified}</pre>
+    </div>
+  ),
+}));
+
 jest.mock('yaml', () => ({
   stringify: (obj: unknown) =>
     `name: ${
@@ -138,4 +162,63 @@ describe('ReleaseBrowserDialog', () => {
     expect(within(error).getByText(/boom/i)).toBeInTheDocument();
     expect(screen.queryByTestId('yaml-viewer')).toBeNull();
   });
+
+  it('renders the mode toggle, defaulting to View', async () => {
+    renderDialog();
+    const viewBtn = await screen.findByRole('button', {
+      name: /view manifest/i,
+    });
+    const compareBtn = screen.getByRole('button', {
+      name: /compare with another release/i,
+    });
+    expect(viewBtn).toHaveAttribute('aria-pressed', 'true');
+    expect(compareBtn).toHaveAttribute('aria-pressed', 'false');
+    // YamlViewer renders in view mode; YamlDiffViewer does not.
+    expect(await screen.findByTestId('yaml-viewer')).toBeInTheDocument();
+    expect(screen.queryByTestId('yaml-diff-viewer')).toBeNull();
+  });
+
+  it('switching to Compare pre-fills the env-current release as compare target', async () => {
+    // `rel-middle` is highlighted (selectedReleaseName) and current in
+    // development. To make pre-select meaningful, highlight a *different*
+    // release so the env-current target isn't a self-diff.
+    const user = userEvent.setup();
+    renderDialog({ selectedReleaseName: 'rel-newest' });
+
+    await user.click(
+      screen.getByRole('button', { name: /compare with another release/i }),
+    );
+
+    // The compare-with selector should now show the env-current release.
+    const selector = await screen.findByPlaceholderText(
+      /pick a release or environment/i,
+    );
+    expect(selector).toHaveValue('Current in development');
+
+    // Both manifests resolve → diff viewer renders.
+    expect(await screen.findByTestId('yaml-diff-viewer')).toBeInTheDocument();
+    expect(screen.getByTestId('diff-original-label')).toHaveTextContent(
+      /current in development \(rel-middle\)/i,
+    );
+    expect(screen.getByTestId('diff-modified-label')).toHaveTextContent(
+      /rel-newest/,
+    );
+  });
+
+  it('Compare with no pre-selectable target shows the empty hint', async () => {
+    const user = userEvent.setup();
+    // No deployments → no env-current pre-select candidate.
+    renderDialog({ deployments: {} });
+
+    await user.click(
+      screen.getByRole('button', { name: /compare with another release/i }),
+    );
+
+    expect(
+      await screen.findByText(
+        /pick a release or environment to compare against/i,
+      ),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId('yaml-diff-viewer')).toBeNull();
+  });
 });