Fix 'object' visualization not showing 'details-only' fields (#33828)

* wip solution

* refactor: better naming for draft

* test: add unit test for 32718

* refactor: converted test to typescript

* create buildTableColumnSettings

* replace tableColumnSettings with buildTableColumnSettings

* revert immer use as it's not needed anymore

frontend/src/metabase/visualizations/components/Visualization/Visualization-object.unit.spec.tsx

+import { renderWithProviders, screen } from "__support__/ui";
+import Visualization from "metabase/visualizations/components/Visualization";
+import {
+  createMockColumn,
+  createMockSingleSeries,
+} from "metabase-types/api/mocks";
+import type { FieldVisibilityType } from "metabase-types/api";
+
+function setup({
+  rows,
+  longNameVisibility = "normal",
+}: {
+  rows: string[][];
+  longNameVisibility: FieldVisibilityType;
+}) {
+  const series = [
+    createMockSingleSeries(
+      { display: "object" },
+      {
+        data: {
+          rows,
+          cols: [
+            createMockColumn({
+              base_type: "string",
+              name: "Short name",
+              display_name: "Short name",
+            }),
+            createMockColumn({
+              base_type: "string",
+              name: "Long name",
+              display_name: "Long name",
+              visibility_type: longNameVisibility,
+            }),
+          ],
+        },
+      },
+    ),
+  ];
+
+  renderWithProviders(<Visualization rawSeries={series} />);
+}
+
+describe("visualization - object", () => {
+  it("render fields with 'visibility_type' set as 'details-only'", () => {
+    const rows = [["John", "John Smith Jr"]];
+
+    setup({ rows, longNameVisibility: "details-only" });
+
+    expect(screen.getByText("Long name")).toBeInTheDocument();
+    expect(screen.getByText("John Smith Jr")).toBeInTheDocument();
+  });
+});

frontend/src/metabase/visualizations/lib/settings/column.js

@@ -500,7 +500,9 @@ export const getTitleForColumn = (column, series, settings) => {
   }
 };
 
-export const tableColumnSettings = {
+export const buildTableColumnSettings = ({
+  getIsColumnVisible = col => col.visibility_type !== "details-only",
+} = {}) => ({
   // NOTE: table column settings may be identified by fieldRef (possible not normalized) or column name:
   //   { name: "COLUMN_NAME", enabled: true }
   //   { fieldRef: ["field", 2, {"source-field": 1}], enabled: true }
@@ -533,7 +535,7 @@ export const tableColumnSettings = {
       cols.map(col => ({
         name: col.name,
         fieldRef: col.field_ref,
-        enabled: col.visibility_type !== "details-only",
+        enabled: getIsColumnVisible(col),
       })),
     getProps: (series, settings) => {
       const [
@@ -548,4 +550,4 @@ export const tableColumnSettings = {
       };
     },
   },
-};
+});

frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx

@@ -3,8 +3,8 @@ import { t } from "ttag";
 import ObjectDetail from "metabase/visualizations/components/ObjectDetail";
 
 import {
+  buildTableColumnSettings,
   columnSettings,
-  tableColumnSettings,
 } from "metabase/visualizations/lib/settings/column";
 
 import { formatColumn } from "metabase/lib/formatting";
@@ -25,7 +25,7 @@ const ObjectDetailProperties = {
   disableClickBehavior: true,
   settings: {
     ...columnSettings({ hidden: true }),
-    ...tableColumnSettings,
+    ...buildTableColumnSettings({ getIsColumnVisible: () => true }),
   },
   columnSettings: column => {
     const settings = {

frontend/src/metabase/visualizations/visualizations/Table.jsx

@@ -18,7 +18,7 @@ import ChartSettingsTableFormatting, {
 import { makeCellBackgroundGetter } from "metabase/visualizations/lib/table_format";
 import {
   columnSettings,
-  tableColumnSettings,
+  buildTableColumnSettings,
   getTitleForColumn,
   isPivoted as _isPivoted,
 } from "metabase/visualizations/lib/settings/column";
@@ -148,7 +148,7 @@ export default class Table extends Component {
       readDependencies: ["table.pivot", "table.pivot_column"],
       persistDefault: true,
     },
-    ...tableColumnSettings,
+    ...buildTableColumnSettings(),
     "table.column_widths": {},
     [DataGrid.COLUMN_FORMATTING_SETTING]: {
       section: t`Conditional Formatting`,