Profiler & Data Quality UI feedback & improvement #7090 part 6 (#7162)

* Profiler & Data Quality UI feedback & improvement #7090 part 6

* fixed failing unit test

openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-add-test.svg

@@ -0,0 +1,17 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7512 7.57471H8.68723C8.56612 7.57471 8.46924 7.68582 8.46924 7.82471C8.46924 7.9636 8.56612 8.07471 8.68723 8.07471H11.7512C11.8724 8.07471 11.9692 7.9636 11.9692 7.82471C11.9692 7.68582 11.8724 7.57471 11.7512 7.57471Z" fill="#37352F" stroke="#37352F" stroke-width="0.4"/>
+<path d="M11.7512 9.99731H8.68723C8.56612 9.99731 8.46924 10.1084 8.46924 10.2473C8.46924 10.3862 8.56612 10.4973 8.68723 10.4973H11.7512C11.8724 10.4973 11.9692 10.3862 11.9692 10.2473C11.9692 10.1084 11.8724 9.99731 11.7512 9.99731Z" fill="#37352F" stroke="#37352F" stroke-width="0.4"/>
+<path d="M6.68531 9.56325L5.7841 10.491L5.30424 9.99699C5.22231 9.91265 5.09357 9.91265 5.01164 9.99699C4.92971 10.0813 4.92971 10.2139 5.01164 10.2982L5.63195 10.9367C5.71388 11.0211 5.84262 11.0211 5.92455 10.9367L6.9662 9.86446C7.04813 9.78012 7.04813 9.64759 6.9662 9.56325C6.89598 9.47892 6.76723 9.47892 6.68531 9.56325V9.56325Z" fill="#37352F" stroke="#37352F" stroke-width="0.25"/>
+<path d="M11.7512 12.4199H8.68723C8.56612 12.4199 8.46924 12.531 8.46924 12.6699C8.46924 12.8088 8.56612 12.9199 8.68723 12.9199H11.7512C11.8724 12.9199 11.9692 12.8088 11.9692 12.6699C11.9692 12.531 11.8724 12.4199 11.7512 12.4199Z" fill="#37352F" stroke="#37352F" stroke-width="0.4"/>
+<path d="M6.37338 12.0072L5.24201 13.1386C5.16394 13.2167 5.16394 13.3434 5.24201 13.4215C5.32007 13.4995 5.44679 13.4995 5.52485 13.4215L6.65622 12.2901C6.73429 12.212 6.73429 12.0853 6.65622 12.0072C6.57816 11.9292 6.45144 11.9292 6.37338 12.0072Z" fill="#37352F" stroke="#37352F" stroke-width="0.25"/>
+<path d="M6.65609 13.1385L5.52472 12.0071C5.44666 11.9291 5.31994 11.9291 5.24188 12.0071C5.16381 12.0852 5.16381 12.2119 5.24188 12.29L6.37325 13.4214C6.45131 13.4994 6.57803 13.4994 6.65609 13.4214C6.73416 13.3433 6.73416 13.2166 6.65609 13.1385Z" fill="#37352F" stroke="#37352F" stroke-width="0.25"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.66625 3.08291H9.90323C10.0591 3.08291 10.1838 2.95457 10.1838 2.79414C10.1838 2.63371 10.0591 2.50537 9.90323 2.50537H9.52295C9.58176 2.69335 9.62977 2.88611 9.66625 3.08291Z" fill="#37352F"/>
+<path d="M9.66625 3.08291L9.54334 3.10569L9.56229 3.20791H9.66625V3.08291ZM9.52295 2.50537V2.38037H9.35287L9.40365 2.54269L9.52295 2.50537ZM9.66625 3.20791H9.90323V2.95791H9.66625V3.20791ZM9.90323 3.20791C10.1315 3.20791 10.3088 3.02016 10.3088 2.79414H10.0588C10.0588 2.88897 9.98665 2.95791 9.90323 2.95791V3.20791ZM10.3088 2.79414C10.3088 2.56812 10.1315 2.38037 9.90323 2.38037V2.63037C9.98665 2.63037 10.0588 2.69931 10.0588 2.79414H10.3088ZM9.90323 2.38037H9.52295V2.63037H9.90323V2.38037ZM9.40365 2.54269C9.46098 2.72594 9.50778 2.91384 9.54334 3.10569L9.78915 3.06013C9.75175 2.85838 9.70254 2.66077 9.64225 2.46805L9.40365 2.54269Z" fill="#37352F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.4707 5.65234H11.7514C11.8725 5.65234 11.9694 5.54123 11.9694 5.40234C11.9694 5.26345 11.8725 5.15234 11.7514 5.15234H9.61674C9.57659 5.32253 9.52775 5.48937 9.4707 5.65234Z" fill="#37352F"/>
+<path d="M9.4707 5.65234L9.28193 5.58627L9.1888 5.85234H9.4707V5.65234ZM9.61674 5.15234V4.95234H9.45842L9.42208 5.10643L9.61674 5.15234ZM9.4707 5.85234H11.7514V5.45234H9.4707V5.85234ZM11.7514 5.85234C12.0078 5.85234 12.1694 5.62508 12.1694 5.40234H11.7694C11.7694 5.42555 11.7613 5.44082 11.7551 5.44799C11.7493 5.45461 11.7478 5.45234 11.7514 5.45234V5.85234ZM12.1694 5.40234C12.1694 5.17961 12.0078 4.95234 11.7514 4.95234V5.35234C11.7478 5.35234 11.7493 5.35008 11.7551 5.3567C11.7613 5.36387 11.7694 5.37913 11.7694 5.40234H12.1694ZM11.7514 4.95234H9.61674V5.35234H11.7514V4.95234ZM9.42208 5.10643C9.38355 5.26976 9.33668 5.42986 9.28193 5.58627L9.65947 5.71842C9.71882 5.54887 9.76963 5.37531 9.81139 5.19826L9.42208 5.10643Z" fill="#37352F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29545 8.78514C3.10878 8.72847 2.92673 8.66117 2.75 8.58396V13.7032C2.75 14.6979 3.52922 15.5 4.49545 15.5H13.0045C13.9708 15.5 14.75 14.6979 14.75 13.7032V3.80481C14.75 3.7246 14.7188 3.66043 14.6721 3.6123L11.7266 0.580214C11.6799 0.532086 11.6175 0.5 11.5396 0.5H8.32072C8.48774 0.670378 8.64267 0.85266 8.78411 1.04545H11.2591V2.95455C11.2591 3.58021 11.7578 4.07754 12.35 4.07754H14.2045V13.7032C14.2045 14.393 13.6591 14.9385 13.0045 14.9385H4.49545C3.84091 14.9385 3.29545 14.393 3.29545 13.7032V8.78514ZM13.8149 3.53209L11.8045 1.46257V2.97059C11.8045 3.2754 12.0383 3.53209 12.35 3.53209H13.8149Z" fill="#37352F"/>
+<path d="M3.29545 8.78514H3.47045V8.65538L3.34629 8.61768L3.29545 8.78514ZM2.75 8.58396L2.82007 8.42359L2.575 8.31652V8.58396H2.75ZM14.6721 3.6123L14.5466 3.73424L14.5466 3.73424L14.6721 3.6123ZM11.7266 0.580214L11.6011 0.702151L11.6011 0.702151L11.7266 0.580214ZM8.32072 0.5V0.325H7.9041L8.19575 0.622508L8.32072 0.5ZM8.78411 1.04545L8.64301 1.14897L8.69545 1.22045H8.78411V1.04545ZM11.2591 1.04545H11.4341V0.870455H11.2591V1.04545ZM14.2045 4.07754H14.3795V3.90254H14.2045V4.07754ZM11.8045 1.46257L11.9301 1.34063L11.6295 1.03127V1.46257H11.8045ZM13.8149 3.53209V3.70709H14.2289L13.9405 3.41015L13.8149 3.53209ZM3.34629 8.61768C3.1662 8.56301 2.99057 8.49809 2.82007 8.42359L2.67993 8.74432C2.86288 8.82425 3.05136 8.89392 3.24462 8.95259L3.34629 8.61768ZM2.575 8.58396V13.7032H2.925V8.58396H2.575ZM2.575 13.7032C2.575 14.7897 3.42782 15.675 4.49545 15.675V15.325C3.63062 15.325 2.925 14.606 2.925 13.7032H2.575ZM4.49545 15.675H13.0045V15.325H4.49545V15.675ZM13.0045 15.675C14.0722 15.675 14.925 14.7897 14.925 13.7032H14.575C14.575 14.606 13.8694 15.325 13.0045 15.325V15.675ZM14.925 13.7032V3.80481H14.575V13.7032H14.925ZM14.925 3.80481C14.925 3.67501 14.8731 3.56813 14.7976 3.49036L14.5466 3.73424C14.5645 3.75273 14.575 3.77418 14.575 3.80481H14.925ZM14.7976 3.49036L11.8521 0.458276L11.6011 0.702151L14.5466 3.73424L14.7976 3.49036ZM11.8521 0.458277C11.7767 0.38056 11.6705 0.325 11.5396 0.325V0.675C11.5645 0.675 11.5831 0.683611 11.6011 0.702151L11.8521 0.458277ZM11.5396 0.325H8.32072V0.675H11.5396V0.325ZM8.19575 0.622508C8.35697 0.786962 8.5065 0.962899 8.64301 1.14897L8.92521 0.941938C8.77884 0.742421 8.61852 0.553795 8.44568 0.377492L8.19575 0.622508ZM8.78411 1.22045H11.2591V0.870455H8.78411V1.22045ZM11.0841 1.04545V2.95455H11.4341V1.04545H11.0841ZM11.0841 2.95455C11.0841 3.67369 11.658 4.25254 12.35 4.25254V3.90254C11.8576 3.90254 11.4341 3.48674 11.4341 2.95455H11.0841ZM12.35 4.25254H14.2045V3.90254H12.35V4.25254ZM14.0295 4.07754V13.7032H14.3795V4.07754H14.0295ZM14.0295 13.7032C14.0295 14.2997 13.5592 14.7635 13.0045 14.7635V15.1135C13.759 15.1135 14.3795 14.4864 14.3795 13.7032H14.0295ZM13.0045 14.7635H4.49545V15.1135H13.0045V14.7635ZM4.49545 14.7635C3.94085 14.7635 3.47045 14.2997 3.47045 13.7032H3.12045C3.12045 14.4864 3.74097 15.1135 4.49545 15.1135V14.7635ZM3.47045 13.7032V8.78514H3.12045V13.7032H3.47045ZM11.679 1.5845L13.6894 3.65402L13.9405 3.41015L11.9301 1.34063L11.679 1.5845ZM11.9795 2.97059V1.46257H11.6295V2.97059H11.9795ZM12.35 3.35709C12.1429 3.35709 11.9795 3.1869 11.9795 2.97059H11.6295C11.6295 3.36391 11.9337 3.70709 12.35 3.70709V3.35709ZM13.8149 3.35709H12.35V3.70709H13.8149V3.35709Z" fill="#37352F"/>
+<circle cx="4.5" cy="3.75" r="3.25" stroke="#37352F" stroke-width="0.8"/>
+<path d="M4.15039 2.35V5.15C4.15039 5.3432 4.30719 5.5 4.50039 5.5C4.69359 5.5 4.85039 5.3432 4.85039 5.15V2.35C4.85039 2.1568 4.69359 2 4.50039 2C4.30719 2 4.15039 2.1568 4.15039 2.35Z" fill="#37352F" stroke="#37352F" stroke-width="0.1"/>
+<path d="M5.9 3.40015H3.1C2.9068 3.40015 2.75 3.55695 2.75 3.75015C2.75 3.94335 2.9068 4.10015 3.1 4.10015H5.9C6.0932 4.10015 6.25 3.94335 6.25 3.75015C6.25 3.55695 6.0932 3.40015 5.9 3.40015Z" fill="#37352F" stroke="#37352F" stroke-width="0.1"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx

@@ -269,7 +269,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       position: 4,
     },
     {
-      name: 'Profiler',
+      name: 'Profiler & Data Quality',
       icon: {
         alt: 'profiler',
         name: 'icon-profiler',

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.test.tsx

@@ -272,7 +272,7 @@ describe('Test MyDataDetailsPage page', () => {
     const activityFeedTab = await findByTestId(tabs, 'Activity Feeds & Tasks');
     const sampleDataTab = await findByTestId(tabs, 'Sample Data');
     const queriesTab = await findByTestId(tabs, 'Queries');
-    const profilerTab = await findByTestId(tabs, 'Profiler');
+    const profilerTab = await findByTestId(tabs, 'Profiler & Data Quality');
     const lineageTab = await findByTestId(tabs, 'Lineage');
     const dbtTab = queryByTestId(tabs, 'DBT');
 

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.test.tsx

@@ -39,6 +39,9 @@ jest.mock('antd', () => ({
     .mockImplementation(({ children, ...props }) => (
       <div {...props}>{children}</div>
     )),
+  Tooltip: jest
+    .fn()
+    .mockImplementation(({ children }) => <span>{children}</span>),
   Table: jest.fn().mockImplementation(({ columns, dataSource }) => (
     <table>
       <thead>
@@ -102,6 +105,7 @@ const mockProps: ColumnProfileTableProps = {
   columns: MOCK_TABLE.columns,
   onAddTestClick: jest.fn,
   columnTests: [],
+  hasEditAccess: true,
 };
 
 describe('Test ColumnProfileTable component', () => {

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Button, Space, Table } from 'antd';
+import { Button, Space, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { isUndefined } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
@@ -21,6 +21,7 @@ import {
   SECONDARY_COLOR,
   SUCCESS_COLOR,
 } from '../../../constants/constants';
+import { NO_PERMISSION_FOR_ACTION } from '../../../constants/HelperTextUtil';
 import {
   DEFAULT_TEST_VALUE,
   INITIAL_TEST_RESULT_SUMMARY,
@@ -32,6 +33,7 @@ import {
   getAddDataQualityTableTestPath,
   getProfilerDashboardWithFqnPath,
 } from '../../../utils/RouterUtils';
+import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import Ellipses from '../../common/Ellipses/Ellipses';
 import Searchbar from '../../common/searchbar/Searchbar';
 import TestIndicator from '../../common/TestIndicator/TestIndicator';
@@ -43,6 +45,7 @@ import ProfilerProgressWidget from './ProfilerProgressWidget';
 
 const ColumnProfileTable: FC<ColumnProfileTableProps> = ({
   columnTests,
+  hasEditAccess,
   columns = [],
 }) => {
   const [searchText, setSearchText] = useState<string>('');
@@ -125,11 +128,19 @@ const ColumnProfileTable: FC<ColumnProfileTableProps> = ({
         render: (profile: ColumnProfile) => profile?.valuesCount || 0,
       },
       {
-        title: 'Test',
+        title: 'Tests',
+        dataIndex: 'Tests',
+        key: 'Tests',
+        render: (_, record) =>
+          columnTestSummary?.[record.fullyQualifiedName || '']?.count || 0,
+      },
+      {
+        title: 'Status',
         dataIndex: 'dataQualityTest',
         key: 'dataQualityTest',
         render: (_, record) => {
-          const summary = columnTestSummary?.[record.fullyQualifiedName || ''];
+          const summary =
+            columnTestSummary?.[record.fullyQualifiedName || '']?.results;
           const currentResult = summary
             ? Object.entries(summary).map(([key, value]) => ({
                 value,
@@ -151,17 +162,28 @@ const ColumnProfileTable: FC<ColumnProfileTableProps> = ({
         dataIndex: 'actions',
         key: 'actions',
         render: (_, record) => (
-          <Link
-            to={getAddDataQualityTableTestPath(
-              ProfilerDashboardType.COLUMN,
-              record.fullyQualifiedName || ''
-            )}>
-            <Button
-              className="tw-border tw-border-primary tw-rounded tw-text-primary"
-              size="small">
-              Add Test
-            </Button>
-          </Link>
+          <Tooltip
+            placement="bottom"
+            title={hasEditAccess ? 'Add Test' : NO_PERMISSION_FOR_ACTION}>
+            <Link
+              to={getAddDataQualityTableTestPath(
+                ProfilerDashboardType.COLUMN,
+                record.fullyQualifiedName || ''
+              )}>
+              <Button
+                className="flex-center"
+                disabled={!hasEditAccess}
+                icon={
+                  <SVGIcons
+                    alt="add test"
+                    className="tw-h-4"
+                    icon={Icons.ADD_TEST}
+                  />
+                }
+                type="link"
+              />
+            </Link>
+          </Tooltip>
         ),
       },
     ];
@@ -185,9 +207,13 @@ const ColumnProfileTable: FC<ColumnProfileTableProps> = ({
       const colResult = columnTests.reduce((acc, curr) => {
         const fqn = curr.entityFQN || '';
         if (isUndefined(acc[fqn])) {
-          acc[fqn] = { ...INITIAL_TEST_RESULT_SUMMARY };
+          acc[fqn] = { results: { ...INITIAL_TEST_RESULT_SUMMARY }, count: 0 };
         }
-        updateTestResults(acc[fqn], curr.testCaseResult?.testCaseStatus || '');
+        updateTestResults(
+          acc[fqn].results,
+          curr.testCaseResult?.testCaseStatus || ''
+        );
+        acc[fqn].count += 1;
 
         return acc;
       }, {} as columnTestResultType);

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.interface.ts

@@ -34,10 +34,13 @@ export type TableTestsType = {
   };
 };
 
-export type columnTestResultType = { [key: string]: TableTestsType['results'] };
+export type columnTestResultType = {
+  [key: string]: { results: TableTestsType['results']; count: number };
+};
 
 export interface ColumnProfileTableProps {
   columns: Column[];
+  hasEditAccess: boolean;
   columnTests: TestCase[];
   onAddTestClick: (
     tabValue: number,

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx

@@ -176,7 +176,8 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
         />
 
         <Space>
-          <Tooltip title={hasEditAccess ? '' : NO_PERMISSION_FOR_ACTION}>
+          <Tooltip
+            title={hasEditAccess ? 'Add Test' : NO_PERMISSION_FOR_ACTION}>
             <Link
               to={
                 hasEditAccess
@@ -195,14 +196,18 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
               </Button>
             </Link>
           </Tooltip>
-          <Button
-            className="profiler-setting-btn tw-border tw-border-primary tw-rounded tw-text-primary"
-            data-testid="profiler-setting-btn"
-            icon={<SVGIcons alt="setting" icon={Icons.SETTINGS_PRIMERY} />}
-            type="default"
-            onClick={() => handleSettingModal(true)}>
-            Settings
-          </Button>
+          <Tooltip
+            title={hasEditAccess ? 'Settings' : NO_PERMISSION_FOR_ACTION}>
+            <Button
+              className="profiler-setting-btn tw-border tw-border-primary tw-rounded tw-text-primary"
+              data-testid="profiler-setting-btn"
+              disabled={!hasEditAccess}
+              icon={<SVGIcons alt="setting" icon={Icons.SETTINGS_PRIMERY} />}
+              type="default"
+              onClick={() => handleSettingModal(true)}>
+              Settings
+            </Button>
+          </Tooltip>
         </Space>
       </Row>
 
@@ -252,6 +257,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
           ...col,
           key: col.name,
         }))}
+        hasEditAccess={hasEditAccess}
         onAddTestClick={onAddTestClick}
       />
 

openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -111,6 +111,7 @@ import IconTrends from '../assets/svg/ic-trends.svg';
 import IconUpArrow from '../assets/svg/ic-up-arrow.svg';
 import IconVEllipsis from '../assets/svg/ic-v-ellipsis.svg';
 import IconWorkflows from '../assets/svg/ic-workflows.svg';
+import IconAddTest from '../assets/svg/icon-add-test.svg';
 import IconChevronDown from '../assets/svg/icon-chevron-down.svg';
 import IconCopy from '../assets/svg/icon-copy.svg';
 import IconDown from '../assets/svg/icon-down.svg';
@@ -228,6 +229,7 @@ export const Icons = {
   LINEAGE: 'icon-lineage',
   MANAGE: 'icon-manage',
   HOME: 'icon-home',
+  ADD_TEST: 'icon-add-test',
   GROWTH_ARROW: 'icon-growth-arrow',
   LOSS_ARROW: 'icon-loss-arrow',
   CHECK_CIRCLE: 'icon-check-circle',
@@ -420,6 +422,10 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.LOGO_SMALL:
       IconComponent = LogoMonogram;
 
+      break;
+    case Icons.ADD_TEST:
+      IconComponent = IconAddTest;
+
       break;
     case Icons.WELCOME_POPPER:
       IconComponent = IconWelcomePopper;