ref(ui): Use ProjectBadge in project settings list (#27043)

docs-ui/components/projectLabel.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import ProjectLabel from 'app/components/projectLabel';
-
-export default {
-  title: 'Deprecated/ProjectLabel',
-};
-
-export const Default = () => {
-  return (
-    <ProjectLabel
-      project={{name: 'Project Name', slug: 'project-name'}}
-      organization={{slug: 'test-org', features: []}}
-    />
-  );
-};
-
-Default.storyName = 'default';
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Do not use this, use IdBadge instead',
-    },
-  },
-};

static/app/components/idBadge/projectBadge.tsx

@@ -21,11 +21,16 @@ type Props = Partial<Omit<BaseBadgeProps, 'project' | 'organization' | 'team'>>
    * If true, this component will not be a link to project details page
    */
   disableLink?: boolean;
+  /**
+   * Overides where the project badge links
+   */
+  to?: React.ComponentProps<typeof Link>['to'];
 };
 
 const ProjectBadge = ({
   project,
   organization,
+  to,
   hideOverflow = true,
   disableLink = false,
   ...props
@@ -43,15 +48,11 @@ const ProjectBadge = ({
   );
 
   if (!disableLink && organization?.slug) {
-    return (
-      <StyledLink
-        to={`/organizations/${organization.slug}/projects/${slug}/${
-          id ? `?project=${id}` : ''
-        }`}
-      >
-        {badge}
-      </StyledLink>
-    );
+    const defaultTo = `/organizations/${organization.slug}/projects/${slug}/${
+      id ? `?project=${id}` : ''
+    }`;
+
+    return <StyledLink to={to ?? defaultTo}>{badge}</StyledLink>;
   }
 
   return badge;

static/app/components/projectLabel.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-import {Project} from 'app/types';
-
-type Props = React.HTMLProps<HTMLSpanElement> & {
-  project: Project;
-};
-
-export default class ProjectLabel extends React.PureComponent<Props> {
-  render() {
-    const {project, ...props} = this.props;
-
-    return (
-      <span className="project-label" {...props}>
-        <span className="project-name">{project.slug}</span>
-      </span>
-    );
-  }
-}

static/app/views/settings/components/settingsProjectItem.tsx

@@ -1,8 +1,7 @@
 import {Component} from 'react';
 import styled from '@emotion/styled';
 
-import Link from 'app/components/links/link';
-import ProjectLabel from 'app/components/projectLabel';
+import ProjectBadge from 'app/components/idBadge/projectBadge';
 import BookmarkStar from 'app/components/projects/bookmarkStar';
 import space from 'app/styles/space';
 import {Organization, Project} from 'app/types';
@@ -36,9 +35,11 @@ class ProjectItem extends Component<Props, State> {
           isBookmarked={this.state.isBookmarked}
           onToggle={this.handleToggleBookmark}
         />
-        <Link to={`/settings/${organization.slug}/projects/${project.slug}/`}>
-          <ProjectLabel project={project} />
-        </Link>
+        <ProjectBadge
+          to={`/settings/${organization.slug}/projects/${project.slug}/`}
+          avatarSize={18}
+          project={project}
+        />
       </Wrapper>
     );
   }

tests/js/spec/views/organizationTeamProjects.spec.jsx

@@ -88,7 +88,7 @@ describe('OrganizationTeamProjects', function () {
     wrapper.update();
 
     expect(wrapper).toSnapshot();
-    expect(wrapper.find('.project-name').first().text()).toBe('project-slug');
+    expect(wrapper.find('ProjectBadge').first().text()).toBe('project-slug');
   });
 
   it('Should allow bookmarking', async function () {

tests/js/spec/views/settings/organizationProjects.spec.jsx

@@ -42,7 +42,7 @@ describe('OrganizationProjects', function () {
     );
     expect(wrapper).toSnapshot();
 
-    expect(wrapper.find('.project-name').text()).toBe('project-slug');
+    expect(wrapper.find('ProjectBadge').text()).toBe('project-slug');
 
     expect(projectsGetMock).toHaveBeenCalledTimes(1);