From 27bf97b178b5bd64cefd94325e6f9542c8872242 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Mon, 17 Feb 2025 09:25:45 +0530
Subject: [PATCH] fix #19805: Not able to edit sql query from test case details
 page (#19806)

---
 .../TestCaseResultTab.component.tsx           | 28 +++++++++++++++----
 .../TestCaseResultTab.test.tsx                |  9 ++++++
 .../IncidentManagerDetailPage.tsx             |  6 +++-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx
index 379d942f481..1658fc081b4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx
@@ -15,7 +15,7 @@ import Icon from '@ant-design/icons/lib/components/Icon';
 import { Col, Divider, Row, Space, Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
-import { isEmpty, isUndefined } from 'lodash';
+import { isEmpty, isUndefined, startCase } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as EditIcon } from '../../../../assets/svg/edit-new.svg';
@@ -179,7 +179,7 @@ const TestCaseResultTab = () => {
 
       <Col data-testid="parameter-container" span={24}>
         <Space direction="vertical" size="small">
-          <Space align="center" size="middle">
+          <Space align="center" size={8}>
             <Typography.Text className="right-panel-label">
               {t('label.parameter-plural')}
             </Typography.Text>
@@ -214,17 +214,33 @@ const TestCaseResultTab = () => {
               gutter={[8, 8]}
               key={param.name}>
               <Col span={24}>
-                <Typography.Text className="text-grey-muted">
-                  {`${param.name}:`}
-                </Typography.Text>
+                <Space align="center" size={8}>
+                  <Typography.Text className="right-panel-label">
+                    {startCase(param.name)}
+                  </Typography.Text>
+                  {hasEditPermission && (
+                    <Tooltip
+                      title={t('label.edit-entity', {
+                        entity: t('label.parameter'),
+                      })}>
+                      <Icon
+                        component={EditIcon}
+                        data-testid="edit-sql-param-icon"
+                        style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
+                        onClick={() => setIsParameterEdit(true)}
+                      />
+                    </Tooltip>
+                  )}
+                </Space>
               </Col>
               <Col span={24}>
                 <SchemaEditor
-                  className="query-editor-min-h-60"
+                  className="custom-code-mirror-theme query-editor-min-h-60"
                   editorClass="table-query-editor"
                   mode={{ name: CSMode.SQL }}
                   options={{
                     styleActiveLine: false,
+                    readOnly: true,
                   }}
                   value={param.value ?? ''}
                 />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.test.tsx
index 455e1b21626..db3246907dc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.test.tsx
@@ -134,6 +134,15 @@ describe('TestCaseResultTab', () => {
     expect(await screen.findByText('EditTestCaseModal')).toBeInTheDocument();
   });
 
+  it("EditTestCaseModal should be rendered when 'Edit SQL expression' button is clicked", async () => {
+    render(<TestCaseResultTab />);
+
+    const editButton = await screen.findByTestId('edit-sql-param-icon');
+    fireEvent.click(editButton);
+
+    expect(await screen.findByText('EditTestCaseModal')).toBeInTheDocument();
+  });
+
   it('EditTestCaseModal should be removed on cancel click', async () => {
     const { container } = render(<TestCaseResultTab />);
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx
index 2e535783fbf..5ea54a46442 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx
@@ -40,6 +40,7 @@ import { useFqn } from '../../../hooks/useFqn';
 import { FeedCounts } from '../../../interface/feed.interface';
 import { getTestCaseByFqn, updateTestCaseById } from '../../../rest/testAPI';
 import { getFeedCounts } from '../../../utils/CommonUtils';
+import { getEntityName } from '../../../utils/EntityUtils';
 import { checkPermission } from '../../../utils/PermissionsUtils';
 import { getIncidentManagerDetailPagePath } from '../../../utils/RouterUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
@@ -223,7 +224,10 @@ const IncidentManagerDetailPage = () => {
   }
 
   return (
-    <PageLayoutV1 pageTitle="Incident Manager Detail Page">
+    <PageLayoutV1
+      pageTitle={t('label.entity-detail-plural', {
+        entity: getEntityName(testCase) || t('label.test-case'),
+      })}>
       <ActivityFeedProvider>
         <Row
           data-testid="incident-manager-details-page-container"