shrunk btns in dashboard corner and fixed tests

Author: doralchan

static/app/views/dashboards/controls.tsx

@@ -9,7 +9,6 @@ import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
-import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
 import {Hovercard} from 'sentry/components/hovercard';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconAdd, IconDownload, IconEdit, IconStar} from 'sentry/icons';
@@ -197,84 +196,87 @@ function Controls({
     : t('You do not have permission to edit this dashboard');
   return (
     <StyledButtonBar key="controls">
-      <FeedbackWidgetButton />
       <DashboardEditFeature>
         {hasFeature => (
           <Fragment>
             <Feature features="dashboards-import">
-              <Button
-                data-test-id="dashboard-export"
-                onClick={e => {
-                  e.preventDefault();
-                  exportDashboard();
-                }}
-                icon={<IconDownload />}
-                priority="default"
-                size="sm"
-              >
-                {t('Export Dashboard')}
-              </Button>
+              <Tooltip title={t('Export Dashboard')}>
+                <Button
+                  data-test-id="dashboard-export"
+                  aria-label={t('export-dashboard')}
+                  onClick={e => {
+                    e.preventDefault();
+                    exportDashboard();
+                  }}
+                  icon={<IconDownload />}
+                  priority="default"
+                  size="sm"
+                />
+              </Tooltip>
             </Feature>
-            {dashboard.id !== 'default-overview' && (
-              <Button
-                size="sm"
-                aria-label={'dashboards-favourite'}
-                icon={
-                  <IconStar
-                    color={isFavorited ? 'yellow300' : 'gray300'}
-                    isSolid={isFavorited}
-                    aria-label={isFavorited ? t('UnFavorite') : t('Favorite')}
-                    data-test-id={isFavorited ? 'yellow-star' : 'empty-star'}
-                  />
-                }
-                onClick={async () => {
-                  try {
-                    setIsFavorited(!isFavorited);
-                    await updateDashboardFavorite(
-                      api,
-                      queryClient,
-                      organization,
-                      dashboard.id,
-                      !isFavorited
-                    );
-                    trackAnalytics('dashboards_manage.toggle_favorite', {
-                      organization,
-                      dashboard_id: dashboard.id,
-                      favorited: !isFavorited,
-                    });
-                  } catch (error) {
-                    // If the api call fails, revert the state
-                    setIsFavorited(isFavorited);
-                  }
-                }}
-              />
-            )}
             {dashboard.id !== 'default-overview' && (
               <EditAccessSelector
                 dashboard={dashboard}
                 onChangeEditAccess={onChangeEditAccess}
               />
             )}
-            <Button
-              data-test-id="dashboard-edit"
-              onClick={e => {
-                e.preventDefault();
-                onEdit();
-              }}
-              icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
-              disabled={!hasFeature || hasUnsavedFilters || !hasEditAccess || isSaving}
-              title={
-                isSaving
-                  ? DASHBOARD_SAVING_MESSAGE
-                  : hasEditAccess
-                    ? hasUnsavedFilters && UNSAVED_FILTERS_MESSAGE
-                    : t('You do not have permission to edit this dashboard')
-              }
-              priority="default"
-              size="sm"
-            >
-              {t('Edit Dashboard')}
-            </Button>
+            {dashboard.id !== 'default-overview' && (
+              <Tooltip title={isFavorited ? t('Starred Dashboard') : t('Star Dashboard')}>
+                <Button
+                  size="sm"
+                  aria-label={t('star-dashboard')}
+                  icon={
+                    <IconStar
+                      color={isFavorited ? 'yellow300' : 'gray500'}
+                      isSolid={isFavorited}
+                      aria-label={isFavorited ? t('Unstar') : t('Star')}
+                      data-test-id={isFavorited ? 'yellow-star' : 'empty-star'}
+                    />
+                  }
+                  onClick={async () => {
+                    try {
+                      setIsFavorited(!isFavorited);
+                      await updateDashboardFavorite(
+                        api,
+                        queryClient,
+                        organization,
+                        dashboard.id,
+                        !isFavorited
+                      );
+                      trackAnalytics('dashboards_manage.toggle_favorite', {
+                        organization,
+                        dashboard_id: dashboard.id,
+                        favorited: !isFavorited,
+                      });
+                    } catch (error) {
+                      // If the api call fails, revert the state
+                      setIsFavorited(isFavorited);
+                    }
+                  }}
+                />
+              </Tooltip>
+            )}
+            <Tooltip title={t('Edit Dashboard')}>
+              <Button
+                data-test-id="dashboard-edit"
+                aria-label={t('edit-dashboard')}
+                onClick={e => {
+                  e.preventDefault();
+                  onEdit();
+                }}
+                icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
+                disabled={!hasFeature || hasUnsavedFilters || !hasEditAccess || isSaving}
+                title={
+                  isSaving
+                    ? DASHBOARD_SAVING_MESSAGE
+                    : hasEditAccess
+                      ? hasUnsavedFilters && UNSAVED_FILTERS_MESSAGE
+                      : t('You do not have permission to edit this dashboard')
+                }
+                priority="default"
+                size="sm"
+              />
+            </Tooltip>
             {hasFeature ? (
               <Tooltip
                 title={tooltipMessage}
@@ -288,7 +290,7 @@ function Controls({
                     'aria-label': t('Add Widget'),
                     size: 'sm',
                     showChevron: true,
-                    icon: <IconAdd isCircled size="sm" />,
+                    icon: <IconAdd size="sm" />,
                     priority: 'primary',
                   }}
                   position="bottom-end"

static/app/views/dashboards/detail.spec.tsx

@@ -486,7 +486,7 @@ describe('Dashboards > Detail', () => {
       await waitFor(() => expect(mockVisit).toHaveBeenCalledTimes(1));
 
       // Enter edit mode.
-      await userEvent.click(screen.getByRole('button', {name: 'Edit Dashboard'}));
+      await userEvent.click(screen.getByRole('button', {name: 'edit-dashboard'}));
 
       // Remove the second and third widgets
       await userEvent.click(
@@ -585,7 +585,7 @@ describe('Dashboards > Detail', () => {
       );
 
       // Enter edit mode.
-      await userEvent.click(await screen.findByRole('button', {name: 'Edit Dashboard'}));
+      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
       expect(await screen.findByRole('button', {name: 'Add Widget'})).toBeInTheDocument();
     });
 
@@ -657,7 +657,7 @@ describe('Dashboards > Detail', () => {
       );
 
       // Enter edit mode.
-      await userEvent.click(await screen.findByRole('button', {name: 'Edit Dashboard'}));
+      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
       expect(screen.queryByRole('button', {name: 'Add widget'})).not.toBeInTheDocument();
     });
 
@@ -773,10 +773,10 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      await userEvent.click(await screen.findByText('Edit Dashboard'));
+      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
       await userEvent.click(await screen.findByText('Save and Finish'));
 
-      expect(screen.getByText('Edit Dashboard')).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'edit-dashboard'})).toBeInTheDocument();
       expect(mockPut).not.toHaveBeenCalled();
     });
 
@@ -826,7 +826,7 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      await userEvent.click(await screen.findByText('Edit Dashboard'));
+      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
       const widget = (await screen.findByText('First Widget')).closest(
         '.react-grid-item'
       ) as HTMLElement;
@@ -882,7 +882,7 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      await userEvent.click(await screen.findByText('Edit Dashboard'));
+      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
       await userEvent.click(await screen.findByText('Cancel'));
 
       expect(window.confirm).not.toHaveBeenCalled();
@@ -1476,7 +1476,7 @@ describe('Dashboards > Detail', () => {
       );
     });
 
-    it('disables the Edit Dashboard button when there are unsaved filters', async () => {
+    it('disables the edit-dashboard button when there are unsaved filters', async () => {
       const router = RouterFixture({
         location: {
           ...LocationFixture(),
@@ -1534,7 +1534,7 @@ describe('Dashboards > Detail', () => {
 
       expect(await screen.findByText('Save')).toBeInTheDocument();
       expect(screen.getByTestId('filter-bar-cancel')).toBeInTheDocument();
-      expect(screen.getByRole('button', {name: 'Edit Dashboard'})).toBeDisabled();
+      expect(screen.getByRole('button', {name: 'edit-dashboard'})).toBeDisabled();
     });
 
     it('ignores the order of selection of page filters to render unsaved filters', async () => {
@@ -1875,9 +1875,9 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      await userEvent.click(await screen.findByText('Edit Access:'));
+      await userEvent.click(await screen.findByText('Editors:'));
       expect(screen.getByText('Creator')).toBeInTheDocument();
-      expect(screen.getByText('All users')).toBeInTheDocument();
+      expect(screen.getByText('All Users')).toBeInTheDocument();
     });
 
     it('creates and updates new permissions for dashboard with no edit perms initialized', async () => {
@@ -1906,16 +1906,16 @@ describe('Dashboards > Detail', () => {
           deprecatedRouterMocks: true,
         }
       );
-      await userEvent.click(await screen.findByText('Edit Access:'));
+      await userEvent.click(await screen.findByText('Editors:'));
 
       // deselects 'All users' so only creator has edit access
-      expect(await screen.findByText('All users')).toBeEnabled();
-      expect(await screen.findByRole('option', {name: 'All users'})).toHaveAttribute(
+      expect(await screen.findByText('All Users')).toBeEnabled();
+      expect(await screen.findByRole('option', {name: 'All Users'})).toHaveAttribute(
         'aria-selected',
         'true'
       );
-      await userEvent.click(screen.getByRole('option', {name: 'All users'}));
-      expect(await screen.findByRole('option', {name: 'All users'})).toHaveAttribute(
+      await userEvent.click(screen.getByRole('option', {name: 'All Users'}));
+      expect(await screen.findByRole('option', {name: 'All Users'})).toHaveAttribute(
         'aria-selected',
         'false'
       );
@@ -1973,16 +1973,16 @@ describe('Dashboards > Detail', () => {
           deprecatedRouterMocks: true,
         }
       );
-      await userEvent.click(await screen.findByText('Edit Access:'));
+      await userEvent.click(await screen.findByText('Editors:'));
 
       // selects 'All users' so everyone has edit access
-      expect(await screen.findByText('All users')).toBeEnabled();
-      expect(await screen.findByRole('option', {name: 'All users'})).toHaveAttribute(
+      expect(await screen.findByText('All Users')).toBeEnabled();
+      expect(await screen.findByRole('option', {name: 'All Users'})).toHaveAttribute(
         'aria-selected',
         'false'
       );
-      await userEvent.click(screen.getByRole('option', {name: 'All users'}));
-      expect(await screen.findByRole('option', {name: 'All users'})).toHaveAttribute(
+      await userEvent.click(screen.getByRole('option', {name: 'All Users'}));
+      expect(await screen.findByRole('option', {name: 'All Users'})).toHaveAttribute(
         'aria-selected',
         'true'
       );
@@ -2061,10 +2061,10 @@ describe('Dashboards > Detail', () => {
           deprecatedRouterMocks: true,
         }
       );
-      await userEvent.click(await screen.findByText('Edit Access:'));
+      await userEvent.click(await screen.findByText('Editors:'));
 
-      expect(await screen.findByText('All users')).toBeEnabled();
-      expect(await screen.findByRole('option', {name: 'All users'})).toHaveAttribute(
+      expect(await screen.findByText('All Users')).toBeEnabled();
+      expect(await screen.findByRole('option', {name: 'All Users'})).toHaveAttribute(
         'aria-selected',
         'false'
       );
@@ -2136,8 +2136,8 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      await screen.findByText('Edit Access:');
-      expect(screen.getByRole('button', {name: 'Edit Dashboard'})).toBeDisabled();
+      await screen.findByText('Editors:');
+      expect(screen.getByRole('button', {name: 'edit-dashboard'})).toBeDisabled();
       expect(screen.getByRole('button', {name: 'Add Widget'})).toBeDisabled();
     });
 
@@ -2202,8 +2202,8 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      await screen.findByText('Edit Access:');
-      expect(screen.getByRole('button', {name: 'Edit Dashboard'})).toBeDisabled();
+      await screen.findByText('Editors:');
+      expect(screen.getByRole('button', {name: 'edit-dashboard'})).toBeDisabled();
       expect(screen.getByRole('button', {name: 'Add Widget'})).toBeDisabled();
       await userEvent.click(await screen.findByLabelText('Widget actions'));
       expect(
@@ -2219,7 +2219,7 @@ describe('Dashboards > Detail', () => {
       );
     });
 
-    it('renders favorite button in unfavorited state', async () => {
+    it('renders favorite button in Unstard state', async () => {
       const router = RouterFixture({
         location: LocationFixture(),
         params: {orgId: 'org-slug', dashboardId: '1'},
@@ -2248,9 +2248,9 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      const favoriteButton = await screen.findByLabelText('dashboards-favourite');
+      const favoriteButton = await screen.findByLabelText('star-dashboard');
       expect(favoriteButton).toBeInTheDocument();
-      expect(await screen.findByLabelText('Favorite')).toBeInTheDocument();
+      expect(await screen.findByLabelText('Star')).toBeInTheDocument();
     });
 
     it('renders favorite button in favorited state', async () => {
@@ -2282,9 +2282,9 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      const favoriteButton = await screen.findByLabelText('dashboards-favourite');
+      const favoriteButton = await screen.findByLabelText('star-dashboard');
       expect(favoriteButton).toBeInTheDocument();
-      expect(await screen.findByLabelText('UnFavorite')).toBeInTheDocument();
+      expect(await screen.findByLabelText('Unstar')).toBeInTheDocument();
     });
 
     it('toggles favorite button', async () => {
@@ -2322,12 +2322,12 @@ describe('Dashboards > Detail', () => {
         }
       );
 
-      const favoriteButton = await screen.findByLabelText('dashboards-favourite');
+      const favoriteButton = await screen.findByLabelText('star-dashboard');
       expect(favoriteButton).toBeInTheDocument();
 
-      expect(await screen.findByLabelText('UnFavorite')).toBeInTheDocument();
+      expect(await screen.findByLabelText('Unstar')).toBeInTheDocument();
       await userEvent.click(favoriteButton);
-      expect(await screen.findByLabelText('Favorite')).toBeInTheDocument();
+      expect(await screen.findByLabelText('Star')).toBeInTheDocument();
     });
 
     describe('widget builder redesign', () => {