fix(projects): Adjust size of project settings icons (#80937)

static/app/components/organizations/projectPageFilter/index.spec.tsx

@@ -147,14 +147,12 @@ describe('ProjectPageFilter', function () {
 
     // Move focus to "Bookmark Project" button
     await userEvent.keyboard('{ArrowRight}');
-    expect(
-      within(optionOne).getByRole('button', {name: 'Bookmark Project'})
-    ).toHaveFocus();
+    expect(within(optionOne).getByRole('button', {name: 'Bookmark'})).toHaveFocus();
 
     // Activate the button
     await userEvent.keyboard('{Enter}');
     expect(
-      within(optionOne).getByRole('button', {name: 'Bookmark Project'})
+      within(optionOne).getByRole('button', {name: 'Remove Bookmark'})
     ).toHaveAttribute('aria-pressed', 'true');
     expect(mockApi).toHaveBeenCalledWith(
       `/projects/${organization.slug}/project-1/`,

static/app/components/projects/bookmarkStar.tsx

@@ -9,6 +9,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
+import {useMutation} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 
 type Props = {
@@ -19,28 +20,36 @@ type Props = {
 };
 
 function BookmarkStar({className, organization, project, onToggle}: Props) {
-  const api = useApi();
+  const api = useApi({persistInFlight: true});
   const [isBookmarked, setIsBookmarked] = useState(project.isBookmarked);
 
-  const handleBookmarkToggle = (event: React.MouseEvent) => {
-    // prevent dropdowns from closing
-    event.stopPropagation();
+  const {mutate: handleBookmarkToggle, isPending: isBookmarking} = useMutation({
+    mutationFn: () => {
+      return update(api, {
+        orgId: organization.slug,
+        projectId: project.slug,
+        data: {isBookmarked: !isBookmarked},
+      });
+    },
+    onMutate: () => {
+      onToggle?.(isBookmarked);
+      setIsBookmarked(current => !current);
+    },
+    onError: () => {
+      addErrorMessage(t('Unable to toggle bookmark for %s', project.slug));
+      setIsBookmarked(current => !current);
+    },
+  });
 
-    update(api, {
-      orgId: organization.slug,
-      projectId: project.slug,
-      data: {isBookmarked: !isBookmarked},
-    }).catch(() => addErrorMessage(t('Unable to toggle bookmark for %s', project.slug)));
-
-    setIsBookmarked(current => !current);
-    onToggle?.(!isBookmarked);
-  };
+  const label = isBookmarked ? t('Remove Bookmark') : t('Bookmark');
 
   return (
     <BookmarkStarButton
-      aria-label={t('Bookmark Project')}
+      title={label}
+      aria-label={label}
       aria-pressed={isBookmarked}
-      onClick={handleBookmarkToggle}
+      busy={isBookmarking}
+      onClick={() => handleBookmarkToggle()}
       size="zero"
       borderless
       className={className}

static/app/views/projectsDashboard/projectCard.tsx

@@ -139,6 +139,7 @@ class ProjectCard extends Component<Props> {
                 borderless
                 size="zero"
                 icon={<IconSettings color="subText" />}
+                title={t('Settings')}
                 aria-label={t('Settings')}
                 to={`/settings/${organization.slug}/projects/${slug}/`}
               />
@@ -314,6 +315,8 @@ const SettingsButton = styled(LinkButton)`
   margin-top: -${space(0.5)};
   padding: 3px;
   border-radius: 50%;
+  width: 24px;
+  height: 24px;
 `;
 
 const StyledBookmarkStar = styled(BookmarkStar)`

static/app/views/settings/organizationProjects/index.spec.tsx

@@ -53,9 +53,9 @@ describe('OrganizationProjects', function () {
     );
     expect(projectsPutMock).toHaveBeenCalledTimes(0);
 
-    await userEvent.click(await screen.findByRole('button', {name: 'Bookmark Project'}));
+    await userEvent.click(await screen.findByRole('button', {name: 'Bookmark'}));
     expect(
-      await screen.findByRole('button', {name: 'Bookmark Project', pressed: true})
+      await screen.findByRole('button', {name: 'Remove Bookmark', pressed: true})
     ).toBeInTheDocument();
 
     expect(projectsPutMock).toHaveBeenCalledTimes(1);

static/app/views/settings/organizationTeams/teamProjects.spec.tsx

@@ -82,12 +82,12 @@ describe('OrganizationTeamProjects', function () {
       organization,
     });
 
-    const stars = await screen.findAllByRole('button', {name: 'Bookmark Project'});
+    const stars = await screen.findAllByRole('button', {name: 'Bookmark'});
     expect(stars).toHaveLength(2);
 
     await userEvent.click(stars[0]);
     expect(
-      screen.getByRole('button', {name: 'Bookmark Project', pressed: true})
+      screen.getByRole('button', {name: 'Remove Bookmark', pressed: true})
     ).toBeInTheDocument();
 
     expect(putMock).toHaveBeenCalledTimes(1);