diff --git a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx index eb6677a08..fd81bab1a 100644 --- a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx +++ b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx @@ -56,6 +56,26 @@ const dataTableDetailsRows = [ 'column_count', ]; +/** + * Any custom properties in this array will be shown on top following the order of the array + */ +const pinnedCustomProperties = ['channels']; + +function createKeyContentDisplayElement(key: string, value: string | number) { + const valueStr = value?.toString() ?? ''; + return ( + + {valueStr && /https?:\/\/[^\s]+/.test(valueStr.trim()) ? ( + + {valueStr} + + ) : ( + valueStr + )} + + ); +} + function useRefreshMetastore(table: IDataTable) { const dispatch = useDispatch(); const isMounted = useMounted(); @@ -82,20 +102,6 @@ function useRefreshMetastore(table: IDataTable) { return [handleRefreshTable, isRefreshing] as const; } -function createChannelLinkDOM(customProperties) { - const channelsKey = 'channels'; - const channelsValue = customProperties[channelsKey]?.toString() ?? ''; - - return channelsValue === '' ? null : ( - - {channelsValue} - - ); -} - export interface IQuerybookTableViewOverviewProps { table: IDataTable; tableName: string; @@ -165,30 +171,22 @@ export const DataTableViewOverview: React.FC< ); }); - const customProperties = table.custom_properties ?? {}; - const channelsDOM = createChannelLinkDOM(customProperties); + const customProperties = Object.entries(table.custom_properties ?? {}); - const customPropertiesDOM = Object.entries(customProperties) - .filter(([key, value]) => { - return key !== 'channels'; + // Get pinned custom properties and display based on order of pinnedCustomProperties + const pinnedPropertiesDOM = customProperties + .filter(([key]) => pinnedCustomProperties.includes(key)) + .sort(([key1], [key2]) => { + const aIndex = pinnedCustomProperties.indexOf(key1); + const bIndex = pinnedCustomProperties.indexOf(key2); + return aIndex - bIndex; }) - .map(([key, value]) => { - const valueStr = value?.toString() ?? ''; - return ( - - {valueStr && /https?:\/\/[^\s]+/.test(valueStr.trim()) ? ( - - {valueStr} - - ) : ( - valueStr - )} - - ); - }); + .map(([key, value]) => createKeyContentDisplayElement(key, value)); + + // Get unpinned custom properties + const unpinnedPropertiesDOM = customProperties + .filter(([key]) => !pinnedCustomProperties.includes(key)) + .map(([key, value]) => createKeyContentDisplayElement(key, value)); const rawMetastoreInfoDOM = table.hive_metastore_description ? (
@@ -231,9 +229,9 @@ export const DataTableViewOverview: React.FC<
     );
     const detailsSection = (
         
-            {channelsDOM}
+            {pinnedPropertiesDOM}
             {detailsDOM}
-            {customPropertiesDOM}
+            {unpinnedPropertiesDOM}
         
     );