ui: work on data quality feedback part 2 (#12386)

openmetadata-ui/src/main/resources/ui/src/components/Chart/CustomBarChart.tsx

@@ -57,7 +57,11 @@ const CustomBarChart = ({
   };
 
   return (
-    <ResponsiveContainer debounce={200} id={`${name}_graph`} minHeight={300}>
+    <ResponsiveContainer
+      className="custom-legend"
+      debounce={200}
+      id={`${name}_graph`}
+      minHeight={300}>
       <BarChart className="tw-w-full" data={data} margin={{ left: 16 }}>
         <CartesianGrid stroke={GRAPH_BACKGROUND_COLOR} />
         <XAxis

openmetadata-ui/src/main/resources/ui/src/components/Chart/OperationDateBarChart.tsx

@@ -63,7 +63,11 @@ const OperationDateBarChart = ({
   }
 
   return (
-    <ResponsiveContainer debounce={200} id={`${name}_graph`} minHeight={300}>
+    <ResponsiveContainer
+      className="custom-legend"
+      debounce={200}
+      id={`${name}_graph`}
+      minHeight={300}>
       <ComposedChart className="w-full" data={data} margin={{ left: 16 }}>
         <XAxis
           dataKey="name"

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerDetailsCard.tsx

@@ -70,6 +70,7 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
         <Col span={20}>
           {data.length > 0 ? (
             <ResponsiveContainer
+              className="custom-legend"
               debounce={200}
               id={`${name}_graph`}
               minHeight={300}>

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

@@ -46,7 +46,14 @@ import {
   toLower,
 } from 'lodash';
 import Qs from 'qs';
-import React, { FC, useEffect, useMemo, useState } from 'react';
+import React, {
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory, useLocation, useParams } from 'react-router-dom';
 import { getLatestTableProfileByFqn } from 'rest/tableAPI';
@@ -116,6 +123,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     return { profile: table?.profile, columns: table?.columns || [] };
   }, [table]);
   const [settingModalVisible, setSettingModalVisible] = useState(false);
+  const allTests = useRef<TestCase[]>([]);
   const [columnTests, setColumnTests] = useState<TestCase[]>([]);
   const [tableTests, setTableTests] = useState<TableTestsType>({
     tests: [],
@@ -130,7 +138,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     useState<DateRangeObject>(DEFAULT_RANGE_DATA);
 
   const showOperationGraph = useMemo(() => {
-    if (table && table.serviceType) {
+    if (table?.serviceType) {
       return allowedServiceForOperationGraph.includes(table.serviceType);
     }
 
@@ -332,16 +340,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     }
   };
 
-  const fetchAllTests = async (params?: ListTestCaseParams) => {
+  const splitTableAndColumnTest = (data: TestCase[]) => {
-    setIsTestCaseLoading(true);
-    try {
-      const { data } = await getListTestCase({
-        fields: 'testCaseResult,entityLink,testDefinition,testSuite',
-        entityLink: generateEntityLink(table?.fullyQualifiedName || ''),
-        includeAllTests: true,
-        limit: API_RES_MAX_SIZE,
-        ...params,
-      });
     const columnTestsCase: TestCase[] = [];
     const tableTests: TableTestsType = {
       tests: [],
@@ -362,6 +361,20 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     });
     setTableTests(tableTests);
     setColumnTests(columnTestsCase);
+  };
+
+  const fetchAllTests = async (params?: ListTestCaseParams) => {
+    setIsTestCaseLoading(true);
+    try {
+      const { data } = await getListTestCase({
+        ...params,
+        fields: 'testCaseResult,entityLink,testDefinition,testSuite',
+        entityLink: generateEntityLink(table?.fullyQualifiedName || ''),
+        includeAllTests: true,
+        limit: API_RES_MAX_SIZE,
+      });
+      allTests.current = data;
+      splitTableAndColumnTest(data);
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
@@ -369,6 +382,19 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     }
   };
 
+  const handleTestUpdate = useCallback(
+    (testCase?: TestCase) => {
+      if (isUndefined(testCase)) {
+        return;
+      }
+      const updatedTests = allTests.current.map((test) => {
+        return testCase.id === test.id ? { ...test, ...testCase } : test;
+      });
+      splitTableAndColumnTest(updatedTests);
+      allTests.current = updatedTests;
+    },
+    [allTests.current]
+  );
   const handleTestCaseStatusChange = (value: string) => {
     if (value !== selectedTestCaseStatus) {
       setSelectedTestCaseStatus(value);
@@ -620,7 +646,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
               testCases={getFilterTestCase()}
               testSuite={testSuite}
               onTestCaseResultUpdate={handleResultUpdate}
-              onTestUpdate={fetchAllTests}
+              onTestUpdate={handleTestUpdate}
             />
           )}
 

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -1303,7 +1303,7 @@
     "page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
     "page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
     "page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
-    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
+    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
     "page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
     "page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
     "page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -175,6 +175,7 @@
     "creating-account": "Creando cuenta",
     "credentials-type": "Tipo de credenciales",
     "criteria": "Criterio",
+    "cron": "Cron",
     "custom": "Custom",
     "custom-attribute-plural": "Atributos personalizados",
     "custom-entity": "Custom entity",
@@ -1302,7 +1303,7 @@
     "page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
     "page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
     "page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
-    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
+    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
     "page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
     "page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
     "page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -175,6 +175,7 @@
     "creating-account": "Création du compte",
     "credentials-type": "Type d'identifiant",
     "criteria": "Critères",
+    "cron": "Cron",
     "custom": "Custom",
     "custom-attribute-plural": "Propriétés Personalisées",
     "custom-entity": "Entité Personalisées",
@@ -1302,7 +1303,7 @@
     "page-sub-header-for-bots": "Créer des agents numériques bien définis avec des autorisations d'accès limitées.",
     "page-sub-header-for-column-profile": "Surveiller et comprendre la structure de vos colonnes avec le profilage",
     "page-sub-header-for-dashboards": "Ingérer les métadonnées des services de tableau de bord les plus populaires.",
-    "page-sub-header-for-data-quality": "Renforcer la confiance dans vos données avec des tests de qualité et créer des produits de données fiables.",
+    "page-sub-header-for-data-quality": "Renforcez la confiance dans vos données grâce à des tests de qualité et créez des produits de données fiables.",
     "page-sub-header-for-databases": "Ingérer les métadonnées des services de base de données les plus populaires.",
     "page-sub-header-for-messagings": "Ingérer les métadonnées des services de messagerie les plus utilisés.",
     "page-sub-header-for-metadata": "Ingérer les métadonnées des services de métadonnées, directement depuis l'interface utilisateur.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -175,6 +175,7 @@
     "creating-account": "アカウントの作成",
     "credentials-type": "Credentials Type",
     "criteria": "クライテリア",
+    "cron": "Cron",
     "custom": "Custom",
     "custom-attribute-plural": "カスタム属性",
     "custom-entity": "Custom entity",
@@ -1302,7 +1303,7 @@
     "page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
     "page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
     "page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
-    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
+    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
     "page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
     "page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
     "page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -175,6 +175,7 @@
     "creating-account": "Criando conta",
     "credentials-type": "Tipo de credenciais",
     "criteria": "Critério",
+    "cron": "Cron",
     "custom": "Custom",
     "custom-attribute-plural": "Atributos personalizados",
     "custom-entity": "Custom entity",
@@ -1302,7 +1303,7 @@
     "page-sub-header-for-bots": "Create well-defined bots with scoped access permissions.",
     "page-sub-header-for-column-profile": "Monitor and understand your columns structure with the profiler",
     "page-sub-header-for-dashboards": "Ingest metadata from the most popular dashboard services.",
-    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and build reliable data products.",
+    "page-sub-header-for-data-quality": "Build trust in your data with quality tests and create reliable data products.",
     "page-sub-header-for-databases": "Ingest metadata from the most popular database services.",
     "page-sub-header-for-messagings": "Ingest metadata from the most used messaging services.",
     "page-sub-header-for-metadata": "Ingest metadata from metadata services right from the UI.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -175,6 +175,7 @@
     "creating-account": "注册帐号",
     "credentials-type": "凭证类型",
     "criteria": "标准",
+    "cron": "Cron",
     "custom": "Custom",
     "custom-attribute-plural": "自定义属性",
     "custom-entity": "自定义条目",
@@ -1302,7 +1303,7 @@
     "page-sub-header-for-bots": "创建一个有限访问权限的机器人",
     "page-sub-header-for-column-profile": "通过数据分析工具了解和跟踪您的数据表列结构",
     "page-sub-header-for-dashboards": "从最流行的仪表板类型服务中提取元数据",
-    "page-sub-header-for-data-quality": "通过引入数据质控测试提升数据的可信任度，构建稳健的衍生数据产品",
+    "page-sub-header-for-data-quality": "通过质量测试建立对数据的信任，创建可靠的数据产品。",
     "page-sub-header-for-databases": "从最流行的数据库类型服务中提取元数据",
     "page-sub-header-for-messagings": "从最常用的消息队列类型服务中提取元数据",
     "page-sub-header-for-metadata": "通过 UI 界面，从元数据类型服务中提取元数据",

openmetadata-ui/src/main/resources/ui/src/styles/components/rechart.less

@@ -0,0 +1,25 @@
+/*
+ *  Copyright 2023 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.
+ */
+.custom-legend {
+  .recharts-default-legend {
+    .recharts-legend-item {
+      cursor: pointer;
+    }
+  }
+}
+.recharts-default-legend {
+  .recharts-legend-item {
+    // need to add !important as library applying margin with inline style
+    margin-right: 16px !important;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/styles/index.js

@@ -30,6 +30,7 @@ import './components/menu.less';
 import './components/profiler.less';
 import './components/radio.less';
 import './components/react-awesome-query.less';
+import './components/rechart.less';
 import './components/size.less';
 import './components/slider.less';
 import './components/step.less';