Fixed #337 Support for URLs to redirect to a table.column level (#455)

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

@@ -27,6 +27,7 @@ type Props = {
   joins: Array<ColumnJoins>;
   onUpdate: (columns: Array<TableColumn>) => void;
   sampleData: SampleData;
+  columnName: string;
 };
 
 const SchemaTab: FunctionComponent<Props> = ({
@@ -34,6 +35,7 @@ const SchemaTab: FunctionComponent<Props> = ({
   joins,
   onUpdate,
   sampleData,
+  columnName,
 }: Props) => {
   const [searchText, setSearchText] = useState('');
   const [checkedValue, setCheckedValue] = useState('schema');
@@ -111,6 +113,7 @@ const SchemaTab: FunctionComponent<Props> = ({
         <div className="col-sm-12">
           {checkedValue === 'schema' ? (
             <SchemaTable
+              columnName={columnName}
               columns={columns}
               joins={joins}
               searchText={lowerCase(searchText)}

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

@@ -47,6 +47,7 @@ type Props = {
   joins: Array<ColumnJoins>;
   searchText?: string;
   onUpdate: (columns: Array<TableColumn>) => void;
+  columnName: string;
 };
 
 const SchemaTable: FunctionComponent<Props> = ({
@@ -54,6 +55,7 @@ const SchemaTable: FunctionComponent<Props> = ({
   joins,
   searchText = '',
   onUpdate,
+  columnName,
 }: Props) => {
   const [editColumn, setEditColumn] = useState<{
     column: TableColumn;
@@ -99,16 +101,6 @@ const SchemaTable: FunctionComponent<Props> = ({
     }
   };
 
-  const handleClick = () => {
-    if (rowRef.current) {
-      rowRef.current.scrollIntoView({
-        behavior: 'smooth',
-        inline: 'nearest',
-        block: 'nearest',
-      });
-    }
-  };
-
   const checkIfJoinsAvailable = (columnName: string): boolean => {
     return (
       joins &&
@@ -229,6 +221,16 @@ const SchemaTable: FunctionComponent<Props> = ({
     fetchTags();
   }, []);
 
+  useEffect(() => {
+    if (rowRef.current) {
+      rowRef.current.scrollIntoView({
+        behavior: 'smooth',
+        inline: 'center',
+        block: 'center',
+      });
+    }
+  }, [columnName, rowRef.current]);
+
   return (
     <>
       <div className="tw-table-responsive">
@@ -247,12 +249,15 @@ const SchemaTable: FunctionComponent<Props> = ({
                 <tr
                   className={classNames(
                     'tableBody-row',
-                    !isEven(index + 1) ? 'odd-row' : null
+                    !isEven(index + 1) ? 'odd-row' : null,
+                    {
+                      'column-highlight': columnName === column.name,
+                    }
                   )}
                   data-testid="column"
                   id={column.name}
                   key={index}
-                  ref={rowRef}>
+                  ref={columnName === column.name ? rowRef : null}>
                   <td className="tw-relative tableBody-cell">
                     {getConstraintIcon(column.columnConstraint)}
                     <span>{column.name}</span>
@@ -315,8 +320,7 @@ const SchemaTable: FunctionComponent<Props> = ({
                                       columnJoin.fullyQualifiedName,
                                       ['column']
                                     )
-                                  )}
+                                  )}>
-                                  onClick={handleClick}>
                                   {getPartialNameFromFQN(
                                     columnJoin.fullyQualifiedName,
                                     ['database', 'table', 'column']
@@ -343,8 +347,7 @@ const SchemaTable: FunctionComponent<Props> = ({
                                               columnJoin.fullyQualifiedName,
                                               ['column']
                                             )
-                                          )}
+                                          )}>
-                                          onClick={handleClick}>
                                           {getPartialNameFromFQN(
                                             columnJoin.fullyQualifiedName,
                                             ['database', 'table', 'column']

catalog-rest-service/src/main/resources/ui/src/constants/constants.ts

@@ -133,7 +133,7 @@ export const getDatasetDetailsPath = (
   let path = ROUTES.DATASET_DETAILS;
   path = path.replace(PLACEHOLDER_ROUTE_DATASET_FQN, datasetFQN);
 
-  return `${path}${columnName ? `#${columnName}` : ''}`;
+  return `${path}${columnName ? `.${columnName}` : ''}`;
 };
 
 export const getServiceDetailsPath = (

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

@@ -297,7 +297,7 @@ const MyDataDetailsPage = () => {
 
   useEffect(() => {
     getTableDetailsByFQN(
-      tableFQN,
+      getPartialNameFromFQN(tableFQN, ['service', 'database', 'table'], '.'),
       'columns, database, usageSummary, followers, joins, tags, owner,sampleData'
     ).then((res: AxiosResponse) => {
       const {
@@ -426,6 +426,11 @@ const MyDataDetailsPage = () => {
                 </div>
                 <div className="tw-col-span-full">
                   <SchemaTab
+                    columnName={getPartialNameFromFQN(
+                      tableFQN,
+                      ['column'],
+                      '.'
+                    )}
                     columns={columns}
                     joins={tableJoinData.columnJoins}
                     sampleData={sampleData}

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

@@ -313,4 +313,17 @@
   .slick-dots li.slick-active button:before {
     @apply tw-text-primary tw-opacity-100 !important;
   }
+
+  .column-highlight {
+    animation: highlight 3000ms ease-out;
+  }
+
+  @keyframes highlight {
+    0% {
+      @apply tw-bg-warning-lite;
+    }
+    100% {
+      @apply tw-bg-white;
+    }
+  }
 }

catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -38,7 +38,8 @@ export const getTableFQNFromColumnFQN = (columnFQN: string): string => {
 
 export const getPartialNameFromFQN = (
   fqn: string,
-  arrTypes: Array<'service' | 'database' | 'table' | 'column'> = []
+  arrTypes: Array<'service' | 'database' | 'table' | 'column'> = [],
+  joinSeperator = '/'
 ): string => {
   const arrFqn = fqn.split('.');
   const arrPartialName = [];
@@ -54,7 +55,7 @@ export const getPartialNameFromFQN = (
     }
   }
 
-  return arrPartialName.join('/');
+  return arrPartialName.join(joinSeperator);
 };
 
 export const getCurrentUserId = (): string => {