meta(propTypes): Relax requirements for badges (#13522)

Our proptypes for our main models (e.g. Org, Project, Team) require an `id` - Our badges/avatars can render without an `id` and just require a slug at the minimum. Change propTypes to allow a simple object with `slug`

Author: billyvg

src/sentry/static/sentry/app/components/avatar/index.jsx

@@ -1,16 +1,20 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
-import SentryTypes from 'app/sentryTypes';
-import TeamAvatar from 'app/components/avatar/teamAvatar';
 import OrganizationAvatar from 'app/components/avatar/organizationAvatar';
 import ProjectAvatar from 'app/components/avatar/projectAvatar';
+import SentryTypes from 'app/sentryTypes';
+import TeamAvatar from 'app/components/avatar/teamAvatar';
 import UserAvatar from 'app/components/avatar/userAvatar';
 
+const BasicModelShape = PropTypes.shape({slug: PropTypes.string});
+
 class Avatar extends React.Component {
   static propTypes = {
-    team: SentryTypes.Team,
-    organization: SentryTypes.Organization,
-    project: SentryTypes.Project,
+    team: PropTypes.oneOfType([BasicModelShape, SentryTypes.Team]),
+    organization: PropTypes.oneOfType([BasicModelShape, SentryTypes.Organization]),
+    project: PropTypes.oneOfType([BasicModelShape, SentryTypes.Project]),
+
     ...UserAvatar.propTypes,
   };
 
@@ -33,7 +37,6 @@ class Avatar extends React.Component {
       return <ProjectAvatar project={project} {...props} />;
     }
 
-    // Could support project too
     return <OrganizationAvatar organization={organization} {...props} />;
   }
 }

src/sentry/static/sentry/app/components/avatar/projectAvatar.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import BaseAvatar from 'app/components/avatar/baseAvatar';
@@ -6,7 +7,10 @@ import SentryTypes from 'app/sentryTypes';
 
 class ProjectAvatar extends React.Component {
   static propTypes = {
-    project: SentryTypes.Project.isRequired,
+    project: PropTypes.oneOfType([
+      PropTypes.shape({slug: PropTypes.string}),
+      SentryTypes.Project,
+    ]).isRequired,
     ...BaseAvatar.propTypes,
   };
 

src/sentry/static/sentry/app/components/idBadge/baseBadge.jsx

@@ -8,11 +8,15 @@ import space from 'app/styles/space';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import SentryTypes from 'app/sentryTypes';
 
+const BasicModelShape = PropTypes.shape({slug: PropTypes.string});
+
 class BaseBadge extends React.PureComponent {
   static propTypes = {
-    team: SentryTypes.Team,
-    organization: SentryTypes.Organization,
-    project: SentryTypes.Project,
+    team: PropTypes.oneOfType([BasicModelShape, SentryTypes.Team]),
+    organization: PropTypes.oneOfType([BasicModelShape, SentryTypes.Organization]),
+    project: PropTypes.oneOfType([BasicModelShape, SentryTypes.Project]),
+    member: PropTypes.oneOfType([BasicModelShape, SentryTypes.Member]),
+    user: PropTypes.oneOfType([BasicModelShape, SentryTypes.User]),
 
     /**
      * Avatar size

src/sentry/static/sentry/app/components/idBadge/index.jsx

@@ -7,7 +7,6 @@ import UserBadge from 'app/components/idBadge/userBadge';
 import TeamBadge from 'app/components/idBadge/teamBadge';
 import ProjectBadge from 'app/components/idBadge/projectBadge';
 import OrganizationBadge from 'app/components/idBadge/organizationBadge';
-import SentryTypes from 'app/sentryTypes';
 
 const COMPONENT_MAP = new Map([
   ['organization', OrganizationBadge],
@@ -24,11 +23,6 @@ const COMPONENT_MAP = new Map([
 export default class IdBadge extends React.Component {
   static propTypes = {
     ...BaseBadge.propTypes,
-    team: SentryTypes.Team,
-    project: SentryTypes.Project,
-    organization: SentryTypes.Organization,
-    member: SentryTypes.Member,
-    user: SentryTypes.User,
   };
 
   render() {

src/sentry/static/sentry/app/components/idBadge/projectBadge.jsx

@@ -2,13 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import BaseBadge from 'app/components/idBadge/baseBadge';
-import SentryTypes from 'app/sentryTypes';
 import BadgeDisplayName from 'app/components/idBadge/badgeDisplayName';
 
 export default class ProjectBadge extends React.PureComponent {
   static propTypes = {
     ...BaseBadge.propTypes,
-    project: SentryTypes.Project.isRequired,
+    project: BaseBadge.propTypes.project.isRequired,
     avatarSize: PropTypes.number,
     /**
      * If true, will use default max-width, or specify one as a string