diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx index 855fac4bbf7..ef11b034337 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx @@ -27,6 +27,7 @@ type Props = { joins: Array; onUpdate: (columns: Array) => void; sampleData: SampleData; + columnName: string; }; const SchemaTab: FunctionComponent = ({ @@ -34,6 +35,7 @@ const SchemaTab: FunctionComponent = ({ joins, onUpdate, sampleData, + columnName, }: Props) => { const [searchText, setSearchText] = useState(''); const [checkedValue, setCheckedValue] = useState('schema'); @@ -111,6 +113,7 @@ const SchemaTab: FunctionComponent = ({
{checkedValue === 'schema' ? ( ; searchText?: string; onUpdate: (columns: Array) => void; + columnName: string; }; const SchemaTable: FunctionComponent = ({ @@ -54,6 +55,7 @@ const SchemaTable: FunctionComponent = ({ joins, searchText = '', onUpdate, + columnName, }: Props) => { const [editColumn, setEditColumn] = useState<{ column: TableColumn; @@ -99,16 +101,6 @@ const SchemaTable: FunctionComponent = ({ } }; - 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 = ({ fetchTags(); }, []); + useEffect(() => { + if (rowRef.current) { + rowRef.current.scrollIntoView({ + behavior: 'smooth', + inline: 'center', + block: 'center', + }); + } + }, [columnName, rowRef.current]); + return ( <>
@@ -247,12 +249,15 @@ const SchemaTable: FunctionComponent = ({ + ref={columnName === column.name ? rowRef : null}> {getConstraintIcon(column.columnConstraint)} {column.name} @@ -315,8 +320,7 @@ const SchemaTable: FunctionComponent = ({ columnJoin.fullyQualifiedName, ['column'] ) - )} - onClick={handleClick}> + )}> {getPartialNameFromFQN( columnJoin.fullyQualifiedName, ['database', 'table', 'column'] @@ -343,8 +347,7 @@ const SchemaTable: FunctionComponent = ({ columnJoin.fullyQualifiedName, ['column'] ) - )} - onClick={handleClick}> + )}> {getPartialNameFromFQN( columnJoin.fullyQualifiedName, ['database', 'table', 'column'] diff --git a/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts b/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts index 06718546cda..3cb36d18db6 100644 --- a/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts +++ b/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 = ( diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx index b39664a00cb..d0462071eba 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx +++ b/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 = () => {
{ 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 => {