Convert Badge and CollectionBadge (#43997)

frontend/src/metabase-types/entities/common.ts

-import type { IconName } from "metabase/ui";
+import type { IconProps } from "metabase/ui";
 import type { Collection } from "metabase-types/api";
 
 export type WrappedEntity<Entity> = {
   getName: () => string;
-  getIcon: () => { name: IconName };
+  getIcon: () => IconProps;
   getColor: () => string;
   getCollection: () => Collection;
+  getUrl: () => string;
+  setArchived: (isArchived: boolean) => void;
+  setCollection: (collection: Collection) => void;
+  setCollectionPreview: (isEnabled: boolean) => void;
+  setPinned: (isPinned: boolean) => void;
 } & Entity;

frontend/src/metabase/components/Badge/Badge.jsx

-import PropTypes from "prop-types";
-
-import CS from "metabase/css/core/index.css";
-
-import { BadgeIcon, BadgeText, MaybeLink } from "./Badge.styled";
-
-const iconProp = PropTypes.oneOfType([PropTypes.string, PropTypes.object]);
-
-const propTypes = {
-  to: PropTypes.string,
-  icon: iconProp,
-  inactiveColor: PropTypes.string,
-  activeColor: PropTypes.string,
-  isSingleLine: PropTypes.bool,
-  onClick: PropTypes.func,
-  children: PropTypes.node,
-};
-
-const DEFAULT_ICON_SIZE = 16;
-
-function getIconProps(iconProp) {
-  if (!iconProp) {
-    return;
-  }
-  const props = typeof iconProp === "string" ? { name: iconProp } : iconProp;
-  if (!props.size && !props.width && !props.height) {
-    props.size = DEFAULT_ICON_SIZE;
-  }
-  return props;
-}
-
-function Badge({
-  icon,
-  inactiveColor = "text-medium",
-  activeColor = "brand",
-  isSingleLine,
-  children,
-  ...props
-}) {
-  return (
-    <MaybeLink
-      inactiveColor={inactiveColor}
-      activeColor={activeColor}
-      isSingleLine={isSingleLine}
-      {...props}
-    >
-      {icon && <BadgeIcon {...getIconProps(icon)} hasMargin={!!children} />}
-      {children && (
-        <BadgeText className={CS.textWrap} isSingleLine={isSingleLine}>
-          {children}
-        </BadgeText>
-      )}
-    </MaybeLink>
-  );
-}
-
-Badge.propTypes = propTypes;
-
-export { MaybeLink };
-
-export default Badge;

frontend/src/metabase/components/Badge/Badge.tsx

+import type { PropsWithChildren } from "react";
+
+import CS from "metabase/css/core/index.css";
+import type { IconName, IconProps } from "metabase/ui";
+
+import { BadgeIcon, BadgeText, MaybeLink } from "./Badge.styled";
+
+const DEFAULT_ICON_SIZE = 16;
+
+function getIconProps(iconProp: IconName | IconProps) {
+  const props: IconProps =
+    typeof iconProp === "string" ? { name: iconProp } : iconProp;
+  if (!props.size) {
+    props.size = DEFAULT_ICON_SIZE;
+  }
+  return props;
+}
+
+type BadgeProps = PropsWithChildren<{
+  to?: string;
+  onClick?: () => void;
+  icon?: IconName | IconProps;
+  inactiveColor?: string;
+  activeColor?: string;
+  isSingleLine?: boolean;
+  className?: string;
+}>;
+
+export const Badge = ({
+  to,
+  icon,
+  inactiveColor = "text-medium",
+  activeColor = "brand",
+  isSingleLine = false,
+  onClick,
+  children,
+  ...props
+}: BadgeProps) => (
+  <MaybeLink
+    inactiveColor={inactiveColor}
+    activeColor={activeColor}
+    isSingleLine={isSingleLine}
+    to={to}
+    onClick={onClick}
+    {...props}
+  >
+    {icon && <BadgeIcon {...getIconProps(icon)} hasMargin={!!children} />}
+    {children && (
+      <BadgeText className={CS.textWrap} isSingleLine={isSingleLine}>
+        {children}
+      </BadgeText>
+    )}
+  </MaybeLink>
+);

frontend/src/metabase/components/Badge/index.jsx

-export { default } from "./Badge";

frontend/src/metabase/components/Badge/index.tsx

+export { Badge } from "./Badge";

frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.tsx

 import { Fragment } from "react";
 
 import { useToggle } from "metabase/hooks/use-toggle";
-import CollectionBadge from "metabase/questions/components/CollectionBadge";
+import { CollectionBadge } from "metabase/questions/components/CollectionBadge";
 import type {
   Collection,
   CollectionEssentials,
@@ -42,9 +42,8 @@ export const CollectionBreadcrumbs = ({
       <>
         <CollectionBadge
           collectionId={parts[0].id}
-          inactiveColor="text-medium"
           isSingleLine
-          onClick={onClick ? () => onClick(parts[0]) : undefined}
+          onClick={onClick ? () => onClick(collection) : undefined}
         />
         <PathSeparator>/</PathSeparator>
         <ExpandButton
@@ -61,7 +60,6 @@ export const CollectionBreadcrumbs = ({
         <Fragment key={collection.id}>
           <CollectionBadge
             collectionId={collection.id}
-            inactiveColor="text-medium"
             isSingleLine
             onClick={onClick ? () => onClick(collection) : undefined}
           />
@@ -75,7 +73,6 @@ export const CollectionBreadcrumbs = ({
       {content}
       <CollectionBadge
         collectionId={collection.id}
-        inactiveColor="text-medium"
         isSingleLine
         onClick={onClick ? () => onClick(collection) : undefined}
       />

frontend/src/metabase/nav/components/QuestionLineage/QuestionLineage.tsx

 import { t } from "ttag";
 
-import Badge from "metabase/components/Badge";
+import { Badge } from "metabase/components/Badge";
 import Link from "metabase/core/components/Link/Link";
 import CS from "metabase/css/core/index.css";
 import type { IconName } from "metabase/ui";

frontend/src/metabase/query_builder/components/view/ViewHeader/components/HeaderBreadcrumbs/HeaderBreadcrumbs.styled.tsx

@@ -2,7 +2,7 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import PropTypes from "prop-types";
 
-import Badge from "metabase/components/Badge";
+import { Badge } from "metabase/components/Badge";
 
 export const HeaderBadge = styled(Badge)`
   .Icon {

frontend/src/metabase/questions/components/CollectionBadge.jsx → frontend/src/metabase/questions/components/CollectionBadge.tsx

-import PropTypes from "prop-types";
+import type { ComponentType, PropsWithChildren } from "react";
 
-import Badge from "metabase/components/Badge";
+import { Badge } from "metabase/components/Badge";
 import Collection from "metabase/entities/collections";
 import { PLUGIN_COLLECTIONS } from "metabase/plugins";
-
-const propTypes = {
-  className: PropTypes.string,
-  collection: PropTypes.object,
-  isSingleLine: PropTypes.bool,
-  onClick: PropTypes.func,
-};
+import type {
+  Collection as CollectionType,
+  CollectionId,
+} from "metabase-types/api";
+import type { WrappedEntity } from "metabase-types/entities";
+import type { State } from "metabase-types/store";
 
 const IRREGULAR_ICON_WIDTH = 16;
 const IRREGULAR_ICON_PROPS = {
@@ -20,7 +19,19 @@ const IRREGULAR_ICON_PROPS = {
   targetOffsetX: IRREGULAR_ICON_WIDTH,
 };
 
-function CollectionBadge({ className, collection, isSingleLine, onClick }) {
+type CollectionBadgeProps = {
+  className?: string;
+  collection: WrappedEntity<CollectionType>;
+  isSingleLine?: boolean;
+  onClick?: () => void;
+};
+
+const CollectionBadgeInner = ({
+  className,
+  collection,
+  isSingleLine,
+  onClick,
+}: CollectionBadgeProps) => {
   if (!collection) {
     return null;
   }
@@ -44,13 +55,18 @@ function CollectionBadge({ className, collection, isSingleLine, onClick }) {
       {collection.getName()}
     </Badge>
   );
-}
-
-CollectionBadge.propTypes = propTypes;
+};
 
-export default Collection.load({
-  id: (state, props) => props.collectionId || "root",
+export const CollectionBadge = Collection.load({
+  id: (state: State, props: { collectionId?: CollectionId }) =>
+    props.collectionId || "root",
   wrapped: true,
   loadingAndErrorWrapper: false,
   properties: ["name", "authority_level"],
-})(CollectionBadge);
+})(CollectionBadgeInner) as ComponentType<
+  PropsWithChildren<
+    {
+      collectionId?: CollectionId;
+    } & Omit<CollectionBadgeProps, "collection">
+  >
+>;