GEN-2031: fix Add profiler configuration button in Data Quality tab (#18798)

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/QualityTab/QualityTab.component.tsx

@@ -11,11 +11,22 @@
  *  limitations under the License.
  */
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Col, Dropdown, Form, Row, Select, Space, Tabs } from 'antd';
+import {
+  Button,
+  Col,
+  Dropdown,
+  Form,
+  Row,
+  Select,
+  Space,
+  Tabs,
+  Tooltip,
+} from 'antd';
 import { isEmpty } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
+import { ReactComponent as SettingIcon } from '../../../../../assets/svg/ic-settings-primery.svg';
 import {
   getEntityDetailsPath,
   INITIAL_PAGING_VALUE,
@@ -64,6 +75,7 @@ export const QualityTab = () => {
     testCasePaging,
     table,
     testCaseSummary,
+    onSettingButtonClick,
   } = useTableProfiler();
   const { getResourceLimit } = useLimitStore();
 
@@ -76,7 +88,12 @@ export const QualityTab = () => {
     showPagination,
   } = testCasePaging;
 
-  const editTest = permissions.EditAll || permissions.EditTests;
+  const { editTest, editDataProfile } = useMemo(() => {
+    return {
+      editTest: permissions?.EditAll || permissions?.EditTests,
+      editDataProfile: permissions?.EditAll || permissions?.EditDataProfile,
+    };
+  }, [permissions]);
   const { fqn: datasetFQN } = useFqn();
   const history = useHistory();
   const { t } = useTranslation();
@@ -293,6 +310,19 @@ export const QualityTab = () => {
                     </LimitWrapper>
                   </Form.Item>
                 )}
+
+                {editDataProfile && (
+                  <Tooltip
+                    placement="topRight"
+                    title={t('label.setting-plural')}>
+                    <Button
+                      className="flex-center"
+                      data-testid="profiler-setting-btn"
+                      onClick={onSettingButtonClick}>
+                      <SettingIcon />
+                    </Button>
+                  </Tooltip>
+                )}
               </Space>
             </Form>
           </Col>

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/QualityTab/QualityTab.test.tsx

@@ -35,6 +35,7 @@ const mockTable = {
 const mockPush = jest.fn();
 const mockUseTableProfiler = {
   tableProfiler: MOCK_TABLE,
+  onSettingButtonClick: jest.fn(),
   permissions: {
     EditAll: true,
     EditDataProfile: true,
@@ -136,6 +137,9 @@ describe('QualityTab', () => {
       'message.page-sub-header-for-data-quality'
     );
     expect(await screen.findByTestId('mock-searchbar')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId('profiler-setting-btn')
+    ).toBeInTheDocument();
     expect(
       await screen.findByText('label.test-case-plural')
     ).toBeInTheDocument();
@@ -262,4 +266,20 @@ describe('QualityTab', () => {
     expect(await screen.findByText('label.success')).toBeInTheDocument();
     expect(await screen.findByText('label.aborted')).toBeInTheDocument();
   });
+
+  it('should call onSettingButtonClick', async () => {
+    await act(async () => {
+      render(<QualityTab />);
+    });
+
+    const profilerSettingBtn = await screen.findByTestId(
+      'profiler-setting-btn'
+    );
+
+    await act(async () => {
+      fireEvent.click(profilerSettingBtn);
+    });
+
+    expect(mockUseTableProfiler.onSettingButtonClick).toHaveBeenCalled();
+  });
 });