Fix question name not showing when using Entity.Name (#33432)

* Fix question name not being shown in some cases

* Remove export default to conform to the styleguide

* Convert EntityName to TypeScript

* Fix question name not renderding when using EntityName

* Add a test to cover #33192

enterprise/frontend/src/metabase-enterprise/audit_app/pages/AuditDatabaseDetail.jsx

 /* eslint-disable react/prop-types */
 import { t } from "ttag";
 
-import EntityName from "metabase/entities/containers/EntityName";
+import { EntityName } from "metabase/entities/containers/EntityName";
 import AuditContent from "../components/AuditContent";
 import AuditTable from "../containers/AuditTable";
 

enterprise/frontend/src/metabase-enterprise/audit_app/pages/AuditTableDetail.jsx

 /* eslint-disable react/prop-types */
 import { t } from "ttag";
 
-import EntityName from "metabase/entities/containers/EntityName";
+import { EntityName } from "metabase/entities/containers/EntityName";
 import AuditContent from "../components/AuditContent";
 import AuditTable from "../containers/AuditTable";
 

enterprise/frontend/src/metabase-enterprise/audit_app/pages/AuditUserDetail.jsx

 /* eslint-disable react/prop-types */
 import { t } from "ttag";
 
-import EntityName from "metabase/entities/containers/EntityName";
+import { EntityName } from "metabase/entities/containers/EntityName";
 import AuditContent from "../components/AuditContent";
 import AuditDashboard from "../containers/AuditDashboard";
 import AuditTable from "../containers/AuditTable";

enterprise/frontend/src/metabase-enterprise/sandboxes/components/EditSandboxingModal/EditSandboxingModal.tsx

@@ -10,7 +10,7 @@ import ActionButton from "metabase/components/ActionButton";
 import Radio from "metabase/core/components/Radio";
 import type { IconName } from "metabase/core/components/Icon";
 import { Icon } from "metabase/core/components/Icon";
-import EntityName from "metabase/entities/containers/EntityName";
+import { EntityName } from "metabase/entities/containers/EntityName";
 
 import QuestionLoader from "metabase/containers/QuestionLoader";
 import type { GroupTableAccessPolicy, UserAttribute } from "metabase-types/api";

frontend/src/metabase/entities/containers/EntityName.jsx

-/* eslint-disable react/prop-types */
-import EntityObjectLoader from "./EntityObjectLoader";
-
-const EntityName = ({ entityType, entityId, property = "name" }) => (
-  <EntityObjectLoader
-    entityType={entityType}
-    entityId={entityId}
-    properties={[property]}
-    loadingAndErrorWrapper={false}
-    wrapped
-  >
-    {({ object }) => (object ? <span>{object.getName()}</span> : null)}
-  </EntityObjectLoader>
-);
-
-export default EntityName;

frontend/src/metabase/entities/containers/EntityName.tsx

+import type Question from "metabase-lib/Question";
+
+import EntityObjectLoader from "./EntityObjectLoader";
+
+type EntityId = string | number;
+
+interface EntityNameProps {
+  entityType: string;
+  entityId: EntityId;
+  property?: string;
+}
+
+interface EntityWrapper {
+  getName: () => string;
+}
+
+export const EntityName = ({
+  entityType,
+  entityId,
+  property = "name",
+}: EntityNameProps) => {
+  // This is a special case for questions, because we're returning `metabase-lib/Question`
+  // from question entity's `getObject` in https://github.com/metabase/metabase/pull/30729.
+  // If we wrap it in `EntityWrapper`, we'd lose all properties from `metabase-lib/Question`.
+  if (entityType === "questions") {
+    return (
+      <EntityObjectLoader
+        entityType={entityType}
+        entityId={entityId}
+        properties={[property]}
+        loadingAndErrorWrapper={false}
+      >
+        {({ object: question }: { object: Question }) =>
+          question ? <span>{question.displayName()}</span> : null
+        }
+      </EntityObjectLoader>
+    );
+  }
+
+  return (
+    <EntityObjectLoader
+      entityType={entityType}
+      entityId={entityId}
+      properties={[property]}
+      loadingAndErrorWrapper={false}
+      wrapped
+    >
+      {({ object }: { object: EntityWrapper }) =>
+        object ? <span>{object.getName()}</span> : null
+      }
+    </EntityObjectLoader>
+  );
+};

frontend/src/metabase/entities/containers/EntityName.unit.spec.tsx

@@ -2,8 +2,8 @@ import { screen } from "@testing-library/react";
 
 import { renderWithProviders } from "__support__/ui";
 import { createMockEntitiesState } from "__support__/store";
-import { createMockUser } from "metabase-types/api/mocks";
-import EntityName from "./EntityName";
+import { createMockCard, createMockUser } from "metabase-types/api/mocks";
+import { EntityName } from "./EntityName";
 
 describe("EntityName", () => {
   describe("users", () => {
@@ -24,4 +24,23 @@ describe("EntityName", () => {
       expect(await screen.findByText("Testy Tableton")).toBeInTheDocument();
     });
   });
+
+  describe("questions", () => {
+    test("question with name (metabase#33192)", async () => {
+      const expectedQuestionName = "Mock Products question";
+      const mockCard = createMockCard({ name: expectedQuestionName });
+
+      renderWithProviders(
+        <EntityName entityType="questions" entityId={mockCard.id} />,
+        {
+          storeInitialState: {
+            entities: createMockEntitiesState({
+              questions: [mockCard],
+            }),
+          },
+        },
+      );
+      expect(await screen.findByText(expectedQuestionName)).toBeInTheDocument();
+    });
+  });
 });

frontend/src/metabase/entities/containers/index.js

 /* eslint-disable react/prop-types */
 import EntityListLoader, { entityListLoader } from "./EntityListLoader";
 import EntityObjectLoader, { entityObjectLoader } from "./EntityObjectLoader";
-import EntityName from "./EntityName";
+import { EntityName } from "./EntityName";
 import EntityForm from "./EntityForm";
 import EntityLink from "./EntityLink";