fix #19805: Not able to edit sql query from test case details page (#19806)

This commit is contained in:
Shailesh Parmar 2025-02-17 09:25:45 +05:30
parent 76a3f3528d
commit 27bf97b178
3 changed files with 36 additions and 7 deletions

View File

@ -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 ?? ''}
/>

View File

@ -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 />);

View File

@ -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"