Fix click behavior for list view visualization (#23250)

* Fix list viz cells are not clickable

* Style list view when showing PKs on the left

frontend/src/metabase/visualizations/components/List/List.styled.tsx

@@ -80,5 +80,7 @@ export const ListRow = styled.tr`
     border-radius: ${LIST_ROW_BORDER_RADIUS};
 
     box-shadow: 4px 5px 10px 3px ${color("shadow")};
+
+    pointer-events: none;
   }
 `;

frontend/src/metabase/visualizations/components/List/ListCell.styled.tsx

@@ -9,8 +9,11 @@ function getCellWidth(type: CellType) {
   if (type === "image") {
     return "5%";
   }
-  if (type === "title") {
-    return "50%";
+  if (type === "pk") {
+    return "2%";
+  }
+  if (type === "primary") {
+    return "30%";
   }
   return "unset";
 }
@@ -21,7 +24,7 @@ export const CellRoot = styled.td<{ type: CellType }>`
 
   color: ${color("text-dark")};
   font-weight: bold;
-  text-align: ${props => (props.type === "info" ? "right" : "unset")};
+  text-align: ${props => (props.type === "secondary" ? "right" : "unset")};
   white-space: nowrap;
 
   width: ${props => getCellWidth(props.type)};

frontend/src/metabase/visualizations/components/List/ListCell.tsx

@@ -146,21 +146,17 @@ function ListCell({
   }, [clicked, extraData, onVisualizationClick]);
 
   const type: CellType = useMemo(() => {
-    const isListItemImage =
-      columnIndex === 0 && columnSettings.view_as === "image";
+    const isPrimarySlot = columnIndex < 3;
+    const isListItemImage = isPrimarySlot && columnSettings.view_as === "image";
     if (isListItemImage) {
       return "image";
     }
-
-    const firstColumn = cols[0];
-    const firstColumnSettings = settings.column(firstColumn);
-    const hasItemImage = firstColumnSettings.view_as === "image";
-    const isItemTitle =
-      (columnIndex === 0 && columnSettings.view_as !== "image") ||
-      (columnIndex === 1 && hasItemImage);
-
-    return isItemTitle ? "title" : "info";
-  }, [cols, columnIndex, columnSettings, settings]);
+    const isPK = cols[columnIndex].semantic_type === "type/PK";
+    if (isPrimarySlot && isPK) {
+      return "pk";
+    }
+    return isPrimarySlot ? "primary" : "secondary";
+  }, [cols, columnIndex, columnSettings]);
 
   const classNames = cx("fullscreen-normal-text fullscreen-night-text", {
     link: isClickable,

frontend/src/metabase/visualizations/components/List/types.ts

-export type CellType = "image" | "title" | "info";
+export type CellType = "image" | "pk" | "primary" | "secondary";