NEOS-1631: reduce constraint text (#2970)

Author: nickzelei

frontend/apps/web/components/jobs/JobMappingTable/Columns.tsx

@@ -85,13 +85,19 @@ function getJobMappingColumns(): ColumnDef<JobMappingRow, string>[] {
     header({ column }) {
       return <SchemaColumnHeader column={column} title="Schema" />;
     },
+    cell({ getValue }) {
+      return <TruncatedText text={getValue()} />;
+    },
   });
 
   const tableColumn = columnHelper.accessor((row) => row.table, {
     id: 'table',
     header({ column }) {
       return <SchemaColumnHeader column={column} title="Table" />;
     },
+    cell({ getValue }) {
+      return <TruncatedText text={getValue()} />;
+    },
   });
 
   const columnColumn = columnHelper.accessor('column', {

frontend/apps/web/components/jobs/JobMappingTable/ConstraintsCell.tsx

@@ -5,6 +5,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { cn } from '@/libs/utils';
 import { ReactElement } from 'react';
 
 interface Props {
@@ -23,63 +24,73 @@ export default function ConstraintsCell(props: Props): ReactElement {
       <div className="flex flex-col lg:flex-row items-start gap-1">
         {isPrimaryKey && (
           <div>
-            <Badge
-              variant="outline"
-              className="text-xs bg-blue-100 text-gray-800 cursor-default dark:bg-blue-200 dark:text-gray-900"
-            >
-              Primary Key
-            </Badge>
+            <HoverBadge
+              badgeText="P"
+              tooltipContent="Primary Key"
+              badgeClassName="bg-blue-100 dark:bg-blue-200"
+            />
           </div>
         )}
         {isForeignKey && (
           <div>
-            <TooltipProvider>
-              <Tooltip delayDuration={200}>
-                <TooltipTrigger>
-                  <Badge
-                    variant="outline"
-                    className="text-xs bg-orange-100 text-gray-800 cursor-default dark:dark:text-gray-900 dark:bg-orange-300"
-                  >
-                    Foreign Key
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {fkCols.map((col) => `Primary Key: ${col}`).join('\n')}
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <HoverBadge
+              badgeText="FK"
+              tooltipContent={`FK: ${fkCols
+                .map((col) => `Primary Key: ${col}`)
+                .join('\n')}`}
+              badgeClassName="bg-orange-100 dark:bg-orange-300"
+            />
           </div>
         )}
         {isVirtualForeignKey && (
           <div>
-            <TooltipProvider>
-              <Tooltip delayDuration={200}>
-                <TooltipTrigger>
-                  <Badge
-                    variant="outline"
-                    className="text-xs bg-orange-100 text-gray-800 cursor-default dark:dark:text-gray-900 dark:bg-orange-300"
-                  >
-                    Virtual Foreign Key
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {vfkCols.map((col) => `Primary Key: ${col}`).join('\n')}
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <HoverBadge
+              badgeText="VFK"
+              tooltipContent={`VFK: ${vfkCols
+                .map((col) => `Primary Key: ${col}`)
+                .join('\n')}`}
+              badgeClassName="bg-orange-100 dark:bg-orange-300"
+            />
           </div>
         )}
         {isUnique && (
           <div>
-            <Badge
-              variant="outline"
-              className="text-xs bg-purple-100 text-gray-800 cursor-default dark:bg-purple-300 dark:text-gray-900"
-            >
-              Unique
-            </Badge>
+            <HoverBadge
+              badgeText="U"
+              tooltipContent="Unique Key"
+              badgeClassName="bg-red-100 dark:bg-red-300"
+            />
           </div>
         )}
       </div>
     </span>
   );
 }
+
+interface HoverBadgeProps {
+  badgeText: string;
+  tooltipContent: string;
+  badgeClassName?: string;
+}
+
+function HoverBadge(props: HoverBadgeProps): ReactElement {
+  const { badgeText, tooltipContent, badgeClassName } = props;
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={200}>
+        <TooltipTrigger>
+          <Badge
+            variant="outline"
+            className={cn(
+              'text-xs cursor-default text-gray-800 dark:text-gray-900',
+              badgeClassName
+            )}
+          >
+            {badgeText}
+          </Badge>
+        </TooltipTrigger>
+        <TooltipContent>{tooltipContent}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}