Adding classname prop to ObjectDetail (#29032)

* Adding classname prop to ObjectDetail

* making className optional

e2e/test/scenarios/visualizations/object_detail.cy.spec.js

@@ -4,11 +4,14 @@ import {
   openOrdersTable,
   openPeopleTable,
   openProductsTable,
+  visitQuestionAdhoc,
 } from "e2e/support/helpers";
 
+import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 
-const { ORDERS, ORDERS_ID, PRODUCTS, PRODUCTS_ID } = SAMPLE_DATABASE;
+const { ORDERS, ORDERS_ID, PRODUCTS, PRODUCTS_ID, PEOPLE, PEOPLE_ID } =
+  SAMPLE_DATABASE;
 
 const FIRST_ORDER_ID = 9676;
 const SECOND_ORDER_ID = 10874;
@@ -178,6 +181,49 @@ describe("scenarios > question > object details", () => {
     cy.location("search").should("eq", "?objectId=Rustic%20Paper%20Wallet");
     cy.findByTestId("object-detail").contains("Rustic Paper Wallet");
   });
+
+  it("should work as a viz display type", () => {
+    const questionDetails = {
+      display: "object",
+      dataset_query: {
+        database: SAMPLE_DB_ID,
+        query: {
+          "source-table": ORDERS_ID,
+
+          joins: [
+            {
+              fields: "all",
+              "source-table": PRODUCTS_ID,
+              condition: [
+                "=",
+                ["field", ORDERS.PRODUCT_ID, null],
+                ["field", PRODUCTS.ID, { "join-alias": "Products" }],
+              ],
+              alias: "Products",
+            },
+            {
+              fields: "all",
+              "source-table": PEOPLE_ID,
+              condition: [
+                "=",
+                ["field", ORDERS.USER_ID, null],
+                ["field", PEOPLE.ID, { "join-alias": "People" }],
+              ],
+              alias: "People",
+            },
+          ],
+        },
+        type: "query",
+      },
+    };
+    visitQuestionAdhoc(questionDetails);
+
+    cy.findByTestId("object-detail");
+
+    cy.log("metabase(#29023)");
+    cy.findByText("People → Name").scrollIntoView().should("be.visible");
+    cy.findByText(/Item 1 of/i).should("be.visible");
+  });
 });
 
 function drillPK({ id }) {

frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetail.tsx

@@ -130,6 +130,7 @@ export function ObjectDetailFn({
   viewPreviousObjectDetail,
   viewNextObjectDetail,
   closeObjectDetail,
+  className,
 }: ObjectDetailProps): JSX.Element | null {
   const [hasNotFoundError, setHasNotFoundError] = useState(false);
   const prevZoomedRowId = usePrevious(zoomedRowID);
@@ -237,7 +238,7 @@ export function ObjectDetailFn({
     showRelations && !!(tableForeignKeys && !!tableForeignKeys.length && hasPk);
 
   return (
-    <ObjectDetailContainer wide={hasRelationships}>
+    <ObjectDetailContainer wide={hasRelationships} className={className}>
       {hasNotFoundError ? (
         <ErrorWrapper>
           <NotFound />

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

@@ -48,4 +48,5 @@ export interface ObjectDetailProps {
   viewPreviousObjectDetail: () => void;
   viewNextObjectDetail: () => void;
   closeObjectDetail: () => void;
+  className?: string;
 }