Fixed multiple table issue in freq joined section

catalog-rest-service/src/main/resources/ui/src/components/my-data-details/FrequentlyJoinedTables.tsx

@@ -15,7 +15,7 @@
   * limitations under the License.
 */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { getDatasetDetailsPath } from '../../constants/constants';
 import PopOver from '../common/popover/PopOver';
@@ -27,20 +27,41 @@ type Props = {
 
 const viewCap = 3;
 
+const getUniqueTablesWithCount = (tableFQNs: Props['tableList']) => {
+  return tableFQNs.reduce((resList, curr) => {
+    let duplicates = false;
+    for (const table of resList) {
+      if (table.fqn === curr.fqn) {
+        table.joinCount += curr.joinCount;
+        duplicates = true;
+
+        break;
+      }
+    }
+
+    return duplicates ? resList : [...resList, curr];
+  }, [] as Props['tableList']);
+};
+
 const FrequentlyJoinedTables: FunctionComponent<Props> = ({
   header,
   tableList,
 }: Props) => {
   const history = useHistory();
+  const [joinedTables, setJoinedTables] = useState<Props['tableList']>([]);
 
   const handleTableClick = (fqn: string) => {
     history.push(getDatasetDetailsPath(fqn));
   };
 
+  useEffect(() => {
+    setJoinedTables(getUniqueTablesWithCount(tableList));
+  }, [tableList]);
+
   const additionalOptions = () => {
     return (
       <div>
-        {tableList?.slice(viewCap).map((table, index) => (
+        {joinedTables?.slice(viewCap).map((table, index) => (
           <div
             className="tw-py-1 tw-cursor-pointer"
             data-testid="related-tables-data"
@@ -69,9 +90,9 @@ const FrequentlyJoinedTables: FunctionComponent<Props> = ({
         </span>
       </div>
       <div className="tw-flex tw-flex-col tw-px-3 tw-py-2">
-        {(tableList.length <= viewCap
+        {(joinedTables.length <= viewCap
-          ? tableList
+          ? joinedTables
-          : tableList.slice(0, viewCap)
+          : joinedTables.slice(0, viewCap)
         ).map((table, index) => {
           return (
             <div
@@ -86,7 +107,7 @@ const FrequentlyJoinedTables: FunctionComponent<Props> = ({
           );
         })}
 
-        {tableList.length > viewCap && (
+        {joinedTables.length > viewCap && (
           <div data-testid="related-tables-data">
             <PopOver
               html={additionalOptions()}
@@ -94,7 +115,7 @@ const FrequentlyJoinedTables: FunctionComponent<Props> = ({
               theme="light"
               trigger="click">
               <span className="show-more">
-                {`+ ${tableList.length - viewCap} more`}
+                {`+ ${joinedTables.length - viewCap} more`}
               </span>
             </PopOver>
           </div>

catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx

@@ -442,7 +442,7 @@ const MyDataDetailsPage = () => {
             {activeTab === 1 && (
               <div className="tw-grid tw-grid-cols-4 tw-gap-4 w-full">
                 <div className="tw-col-span-3">
-                  <div className="schema-description tw-flex tw-flex-col tw-h-full tw-max-h-32 tw-relative tw-border tw-border-main tw-rounded-md">
+                  <div className="schema-description tw-flex tw-flex-col tw-h-full tw-min-h-168 tw-relative tw-border tw-border-main tw-rounded-md">
                     <div className="tw-flex tw-items-center tw-px-3 tw-py-1 tw-border-b tw-border-main">
                       <span className="tw-flex-1 tw-leading-8 tw-m-0 tw-text-sm tw-font-normal">
                         Description

catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css

@@ -157,7 +157,7 @@
   }
 
   .tw-tag {
-    @apply tw-py-1 tw-px-3 tw-text-xs tw-font-normal tw-rounded-2xl tw-bg-gray-200;
+    @apply tw-py-1 tw-px-3 tw-text-xs tw-font-normal tw-rounded-2xl tw-bg-tag;
   }
 
   .tw-signin-button {

catalog-rest-service/src/main/resources/ui/src/styles/temp.css

@@ -647,8 +647,7 @@
   color: #5e5c58;
 }
 /* My data details page realted CSS */
-.sl-box.description,
+.sl-box.description {
-.schema-description {
   min-height: 138px;
 }
 

catalog-rest-service/src/main/resources/ui/tailwind.config.js

@@ -101,6 +101,7 @@ module.exports = {
       },
       minHeight: {
         32: '8rem',
+        168: '10.5rem',
       },
       padding: {
         '5px': '5px',