chore(ui): Revamp Test case details page (#25118)

* chore(ui): Revamp Test case details page

* fix failing unit tests

* optimize code

* address copilot comments

* fix sonar issues

* migrate from antd to mui components

* address comments

* nit

* fix failing tests

Author: shah-harshit

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx

@@ -300,9 +300,15 @@ describe('TestCaseResultTab', () => {
 
       render(<TestCaseResultTab />);
 
-      expect(
-        await screen.findByTestId('computed-row-count-container')
-      ).toBeInTheDocument();
+      const parameterContainer = await screen.findByTestId(
+        'parameter-container'
+      );
+
+      expect(parameterContainer).toBeInTheDocument();
+      // Check that compute row count label is present in the parameter section
+      expect(screen.getByText('label.compute-row-count:')).toBeInTheDocument();
+      // Check that the value "true" is present
+      expect(screen.getByText('true')).toBeInTheDocument();
     });
 
     it('should not show Compute Row Count when testDefinition does not support supportsRowLevelPassedFailed', async () => {
@@ -321,8 +327,9 @@ describe('TestCaseResultTab', () => {
 
       await screen.findByTestId('test-case-result-tab-container');
 
+      // Compute row count should not be shown in parameter section when not supported
       expect(
-        screen.queryByTestId('computed-row-count-container')
+        screen.queryByText('label.compute-row-count:')
       ).not.toBeInTheDocument();
     });
 
@@ -342,8 +349,9 @@ describe('TestCaseResultTab', () => {
 
       await screen.findByTestId('test-case-result-tab-container');
 
+      // Compute row count should not be shown when computePassedFailedRowCount is undefined
       expect(
-        screen.queryByTestId('computed-row-count-container')
+        screen.queryByText('label.compute-row-count:')
       ).not.toBeInTheDocument();
     });
   });

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.test.tsx

@@ -11,17 +11,80 @@
  *  limitations under the License.
  */
 @import (reference) '../../../../styles/variables.less';
+
+// Parameter label and value text styles (global for reuse)
+.parameter-label {
+  color: @grey-700;
+  font-size: @font-size-base;
+  font-style: normal;
+  font-weight: @font-medium;
+  min-width: 200px;
+  display: inline-block;
+}
+
+.parameter-value-text {
+  color: @grey-900;
+  font-size: @font-size-base;
+  font-style: normal;
+  font-weight: @font-medium;
+}
+
 .test-case-result-tab {
   .test-case-result-tab-graph {
-    background-color: @grey-5;
-    padding: 16px;
+    border: 1px solid @grey-200;
+    border-radius: 10px;
+    padding: @size-md;
   }
   .CodeMirror-gutters {
     background-color: @grey-5;
   }
   .parameter-value {
     background-color: @grey-5;
   }
+
+  // Parameter section styles
+  .parameter-container {
+    border-radius: 10px;
+    background: @grey-25;
+    padding: @size-md;
+  }
+
+  .parameter-title {
+    color: @grey-900;
+    font-size: @font-size-base;
+    font-style: normal;
+    font-weight: @font-semibold;
+  }
+
+  .parameter-rows-container {
+    width: 100%;
+  }
+
+  .parameter-row {
+    padding: @size-xs 0;
+  }
+
+  .parameter-row-divider {
+    margin: @size-xs 0;
+    border-top: 1px dashed @grey-300;
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  .sql-expression-container {
+    padding: @size-md;
+    width: 100%;
+
+    .custom-code-mirror-theme {
+      .CodeMirror {
+        background: @white;
+      }
+      .CodeMirror-gutters {
+        background-color: @grey-25;
+      }
+    }
+  }
 }
 .version-sql-expression-container {
   background-color: @grey-100;

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/test-case-result-tab.style.less

@@ -14,9 +14,9 @@
 @import (reference) '../../../styles/variables.less';
 
 .parameter-value-container {
-  background: @grey-1;
-  border-radius: 4px;
-  padding: 8px 10px;
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
 }
 
 .severity {

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/incident-manager.style.less

@@ -0,0 +1,26 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+export const TEST_SUMMARY_CHART_MARGIN = {
+  top: 16,
+  bottom: 100,
+  right: 40,
+  left: 16,
+} as const;
+
+export const STATUS_DOT_RADIUS = 4;
+export const STATUS_DOT_SIZE = STATUS_DOT_RADIUS * 2;
+
+export const TOOLTIP_OFFSET_DEFAULT = -200;
+export const TOOLTIP_OFFSET_NEAR_EDGE = -20;
+export const TOOLTIP_EDGE_THRESHOLD = 200;

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/TestSummaryGraph.constants.ts

@@ -171,7 +171,6 @@ describe('TestSummaryGraph', () => {
     expect(screen.getByText('Legend')).toBeInTheDocument();
     expect(screen.getByTestId('min')).toBeInTheDocument();
     expect(screen.getByTestId('max')).toBeInTheDocument();
-    expect(screen.getByTestId('label.incident')).toBeInTheDocument();
   });
 
   it("legend filter should update the graph's activeKeys", async () => {
@@ -194,26 +193,6 @@ describe('TestSummaryGraph', () => {
     expect(maxLineChart).not.toBeInTheDocument();
   });
 
-  it('legend should not filter on Incident click', async () => {
-    render(<TestSummaryGraph {...mockProps} />);
-    const incidentButton = screen.getByTestId('label.incident');
-    const minLineChart = screen.getByTestId('line-min');
-    const maxLineChart = screen.getByTestId('line-max');
-
-    expect(incidentButton).toBeInTheDocument();
-    expect(minLineChart).toBeInTheDocument();
-    expect(maxLineChart).toBeInTheDocument();
-
-    screen.debug(document.body);
-
-    await act(async () => {
-      await fireEvent.click(incidentButton);
-    });
-
-    expect(minLineChart).toBeInTheDocument();
-    expect(maxLineChart).toBeInTheDocument();
-  });
-
   it('should call mockSetShowAILearningBanner', () => {
     render(<TestSummaryGraph {...mockProps} />);