Merged PR 2617: styling layout fixes (after sorting) on table list page

styling layout fixes (after sorting) on table list page

Author: Aleksy Lisowski

dqops/src/main/frontend/src/components/Connection/ConnectionView/ConnectionTables.tsx

@@ -19,11 +19,12 @@ export default function ConnectionTables() {
   const [tables, setTables] = useState<TableListModel[]>([]);
   const [filters, setFilters] = useState<any>({
     page: 1,
-    limit: 50,
-    checkType: checkTypes
+    pageSize: 50,
+    checkType:
+      checkTypes == CheckTypes.SOURCES ? CheckTypes.MONITORING : checkTypes
   });
-  const [table, setTable] = useState('');
-  const [schema, setSchema] = useState('');
+  const [table, setTable] = useState<string>();
+  const [schema, setSchema] = useState<string>();
   const [labels, setLabels] = useState<TLabel[]>([]);
 
   const onChangeFilters = (obj: Partial<any>) => {
@@ -47,7 +48,8 @@ export default function ConnectionTables() {
   };
 
   const getTables = async (labels: string[] = []) => {
-    const addPrefix = (str: string) => {
+    const addPrefix = (str?: string) => {
+      if (!str) return undefined;
       return str.includes('*') || str.length === 0 ? str : '*' + str + '*';
     };
     return SearchApiClient.findTables(

dqops/src/main/frontend/src/components/TableList/index.tsx

@@ -194,7 +194,7 @@ export default function index({
 
         <table className="overflow-x-auto">
           <thead>
-            <tr>
+            <tr className="mb-2">
               {headerItems.map(
                 (item) =>
                   item?.label &&
@@ -214,7 +214,7 @@ export default function index({
           </tbody>
         </table>
       </div>
-      <div className="px-4 mb-50 mt-2">
+      <div className="px-4 mb-50">
         <Pagination
           page={filters.page || 1}
           pageSize={filters.pageSize || 50}

dqops/src/main/frontend/src/pages/Schema/SchemaTableItem.tsx

@@ -111,32 +111,32 @@ export default function SchemaTableItem({
   };
 
   return (
-    <tr className="text-sm h-10">
+    <tr className="text-sm">
       {(!checkTypes || !connection || !schema) && (
         <>
           {!connection && (
-            <td>
+            <td className="content-start pt-2">
               <div className="flex items-start">
                 <Button
-                  className="px-4 underline cursor-pointer text-sm"
+                  className="px-4 underline cursor-pointer text-sm py-0"
                   label={item.connection_name}
                   onClick={() => goToConnection(item)}
                 />
               </div>
             </td>
           )}
-          <td>
+          <td className="content-start pt-2">
             <Button
-              className="px-4 underline cursor-pointer text-sm"
+              className="px-4 underline cursor-pointer text-sm py-0"
               label={item.schema}
               onClick={() => goToSchema(item)}
             />
           </td>
         </>
       )}
-      <td>
+      <td className="content-start pt-2">
         <Button
-          className="px-4 underline cursor-pointer text-sm"
+          className="px-4 underline cursor-pointer text-sm py-0"
           label={item.target?.table_name}
           onClick={() => goToTable(item)}
         />
@@ -151,12 +151,16 @@ export default function SchemaTableItem({
           />
         ) : null}
       </td>
-      <td className="px-4 text-sm">{item?.stage}</td>
-      <td className="px-4 text-sm">{getLabelsOverview(item?.labels ?? [])}</td>
+      <td className="px-4 text-sm content-start pt-2">{item?.stage}</td>
+      <td className="px-4 text-sm content-start pt-2">
+        {getLabelsOverview(item?.labels ?? [])}
+      </td>
       {item?.data_quality_status?.dimensions ? (
         <SchemaTableItemDimensions item={item} dimensionKeys={dimensionKeys} />
       ) : (
-        <SvgIcon name="hourglass" className="w-4 h-4" />
+        <td className="content-start pt-2">
+          <SvgIcon name="hourglass" className="w-4 h-4" />
+        </td>
       )}
     </tr>
   );

dqops/src/main/frontend/src/pages/Schema/SchemaTableItemDimensions.tsx

@@ -44,7 +44,7 @@ export default function SchemaTableItemDimensions({
   return (
     <>
       {' '}
-      <td className="pl-4">
+      <td className="pl-4 content-start pt-2">
         <div
           className={clsx(
             'w-13 h-6 text-center flex items-center justify-center',
@@ -78,7 +78,10 @@ export default function SchemaTableItemDimensions({
           }
         );
         return (
-          <td key={`Dimensionindex${dimType}`} className="pl-4">
+          <td
+            key={`Dimensionindex${dimType}`}
+            className="pl-4 content-start pt-2"
+          >
             <Tooltip
               content={renderSecondLevelTooltip(
                 (item.data_quality_status?.dimensions ?? {})?.[
@@ -106,7 +109,10 @@ export default function SchemaTableItemDimensions({
       ).map((dimensionKey: string | undefined, dimIndex) => {
         if (dimensionKey) {
           return (
-            <td key={`DimensionTooltipindex${dimIndex}`} className="pl-4">
+            <td
+              key={`DimensionTooltipindex${dimIndex}`}
+              className="pl-4 content-start pt-2"
+            >
               <Tooltip
                 content={renderSecondLevelTooltip(
                   (item.data_quality_status?.dimensions ?? {})?.[

dqops/src/main/frontend/src/pages/Schema/SchemaTables.tsx

@@ -56,7 +56,7 @@ export const SchemaTables = () => {
       filters.page,
       filters.pageSize,
       filter,
-      checkTypes === CheckTypes.SOURCES ? CheckTypes.PROFILING : checkTypes
+      checkTypes === CheckTypes.SOURCES ? CheckTypes.MONITORING : checkTypes
     ).then((res) => {
       const arr: TTableWithSchema[] = [];
       res.data.forEach((item) => {