fetch table fks in object detail (#11930)

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

@@ -19,6 +19,7 @@ import { singularize, inflect } from "inflection";
 import { formatValue, formatColumn } from "metabase/lib/formatting";
 import { isQueryable } from "metabase/lib/table";
 
+import Tables from "metabase/entities/tables";
 import {
   loadObjectDetailFKReferences,
   followForeignKey,
@@ -73,6 +74,7 @@ const mapStateToProps = state => ({
 
 // ugh, using function form of mapDispatchToProps here due to circlular dependency with actions
 const mapDispatchToProps = dispatch => ({
+  fetchTableFks: id => dispatch(Tables.objectActions.fetchForeignKeys({ id })),
   loadObjectDetailFKReferences: (...args) =>
     dispatch(loadObjectDetailFKReferences(...args)),
   followForeignKey: (...args) => dispatch(followForeignKey(...args)),
@@ -96,6 +98,10 @@ export class ObjectDetail extends Component {
   };
 
   componentDidMount() {
+    const { tableMetadata } = this.props;
+    if (tableMetadata && tableMetadata.fks == null) {
+      this.props.fetchTableFks(tableMetadata.id);
+    }
     // load up FK references
     if (this.props.tableForeignKeys) {
       this.props.loadObjectDetailFKReferences();

frontend/test/metabase/scenarios/object_detail.cy.spec.js

+import { signInAsNormalUser } from "__support__/cypress";
+
+describe("ObjectDetail", () => {
+  beforeEach(signInAsNormalUser);
+
+  it("should show orders/reviews connected to a product", () => {
+    cy.visit("/browse/1");
+    cy.contains("Products").click();
+    // click on product #1's id
+    cy.contains(/^1$/).click();
+    // check that the correct counts of related tables appear
+    cy.contains("Orders")
+      .parent()
+      .contains("93");
+    cy.contains("Reviews")
+      .parent()
+      .contains("8");
+  });
+});