feat(compliance): add resource metadata tab inside req find (#11187)

ui/components/shared/resource-metadata-panel.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ResourceMetadataPanel } from "./resource-metadata-panel";
+
+vi.mock("@/components/shadcn/card/card", () => ({
+  Card: ({ children, variant }: { children: ReactNode; variant?: string }) => (
+    <div data-slot="card" data-variant={variant}>
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock("@/components/shared/query-code-editor", () => ({
+  QUERY_EDITOR_LANGUAGE: {
+    JSON: "json",
+  },
+  QueryCodeEditor: ({
+    ariaLabel,
+    value,
+    copyValue,
+  }: {
+    ariaLabel: string;
+    value: string;
+    copyValue?: string;
+  }) => (
+    <div
+      data-testid="query-code-editor"
+      data-aria-label={ariaLabel}
+      data-value={value}
+      data-copy-value={copyValue}
+    />
+  ),
+}));
+
+const EMPTY_STATE = "No metadata available for this resource.";
+
+describe("ResourceMetadataPanel", () => {
+  it("renders only the details card when just details are present", () => {
+    render(
+      <ResourceMetadataPanel metadata={null} details="Some resource details" />,
+    );
+
+    expect(screen.getByText("Details:")).toBeInTheDocument();
+    expect(screen.getByText("Some resource details")).toBeInTheDocument();
+    expect(screen.queryByTestId("query-code-editor")).not.toBeInTheDocument();
+    expect(screen.queryByText(EMPTY_STATE)).not.toBeInTheDocument();
+  });
+
+  it("renders only the metadata editor when just metadata is present", () => {
+    render(
+      <ResourceMetadataPanel
+        metadata={{ VulnerabilityID: "CVE-2026-0001" }}
+        details={null}
+      />,
+    );
+
+    const editor = screen.getByTestId("query-code-editor");
+    expect(editor).toBeInTheDocument();
+    // value and copyValue must reference the same serialized string.
+    const serialized = JSON.stringify(
+      { VulnerabilityID: "CVE-2026-0001" },
+      null,
+      2,
+    );
+    expect(editor).toHaveAttribute("data-value", serialized);
+    expect(editor).toHaveAttribute("data-copy-value", serialized);
+    expect(screen.queryByText("Details:")).not.toBeInTheDocument();
+    expect(screen.queryByText(EMPTY_STATE)).not.toBeInTheDocument();
+  });
+
+  it("renders both the details card and the metadata editor", () => {
+    render(
+      <ResourceMetadataPanel
+        metadata='{"PkgName":"requests"}'
+        details="Detected on instance i-123"
+      />,
+    );
+
+    expect(screen.getByText("Detected on instance i-123")).toBeInTheDocument();
+    expect(screen.getByTestId("query-code-editor")).toBeInTheDocument();
+    expect(screen.queryByText(EMPTY_STATE)).not.toBeInTheDocument();
+  });
+
+  it("renders the empty state when neither details nor metadata are present", () => {
+    render(<ResourceMetadataPanel metadata={null} details={null} />);
+
+    expect(screen.getByText(EMPTY_STATE)).toBeInTheDocument();
+    expect(screen.queryByText("Details:")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("query-code-editor")).not.toBeInTheDocument();
+  });
+
+  it("falls back to the empty state for an empty metadata object", () => {
+    render(<ResourceMetadataPanel metadata={{}} details="   " />);
+
+    expect(screen.getByText(EMPTY_STATE)).toBeInTheDocument();
+  });
+});