fix(dashboards): prepend favourites column in dashboard table view (#82055)

Convert favourites column in dashboard table view as a prepended column.

static/app/views/dashboards/manage/dashboardTable.spec.tsx

@@ -344,7 +344,6 @@ describe('Dashboards - DashboardTable', function () {
       }
     );
 
-    expect((await screen.findAllByTestId('grid-head-cell')).length).toBe(5);
     expect(screen.getByLabelText('Favorite Column')).toBeInTheDocument();
     expect(screen.queryAllByLabelText('Favorite')).toHaveLength(1);
     expect(screen.queryAllByLabelText('UnFavorite')).toHaveLength(1);

static/app/views/dashboards/manage/dashboardTable.tsx

@@ -12,7 +12,6 @@ import {
 } from 'sentry/actionCreators/dashboards';
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import type {Client} from 'sentry/api';
-import Feature from 'sentry/components/acl/feature';
 import {ActivityAvatar} from 'sentry/components/activity/item/avatar';
 import UserAvatar from 'sentry/components/avatar/userAvatar';
 import {Button} from 'sentry/components/button';
@@ -74,36 +73,29 @@ function FavoriteButton({
 }: FavoriteButtonProps) {
   const [favorited, setFavorited] = useState(isFavorited);
   return (
-    <Feature features="dashboards-favourite">
-      <StyledFavoriteButton
-        aria-label={t('Favorite Button')}
-        size="zero"
-        borderless
-        icon={
-          <IconStar
-            color={favorited ? 'yellow300' : 'gray300'}
-            isSolid={favorited}
-            aria-label={favorited ? t('UnFavorite') : t('Favorite')}
-            size="sm"
-          />
+    <Button
+      aria-label={t('Favorite Button')}
+      size="zero"
+      borderless
+      icon={
+        <IconStar
+          color={favorited ? 'yellow300' : 'gray300'}
+          isSolid={favorited}
+          aria-label={favorited ? t('UnFavorite') : t('Favorite')}
+          size="sm"
+        />
+      }
+      onClick={async () => {
+        try {
+          setFavorited(!favorited);
+          await updateDashboardFavorite(api, organization.slug, dashboardId, !favorited);
+          onDashboardsChange();
+        } catch (error) {
+          // If the api call fails, revert the state
+          setFavorited(favorited);
         }
-        onClick={async () => {
-          try {
-            setFavorited(!favorited);
-            await updateDashboardFavorite(
-              api,
-              organization.slug,
-              dashboardId,
-              !favorited
-            );
-            onDashboardsChange();
-          } catch (error) {
-            // If the api call fails, revert the state
-            setFavorited(favorited);
-          }
-        }}
-      />
-    </Feature>
+      }}
+    />
   );
 }
 
@@ -116,9 +108,6 @@ function DashboardTable({
   isLoading,
 }: Props) {
   const columnOrder: GridColumnOrder<ResponseKeys>[] = [
-    ...(organization.features.includes('dashboards-favourite')
-      ? [{key: ResponseKeys.FAVORITE, name: t('Favorite'), width: 50}]
-      : []),
     {key: ResponseKeys.NAME, name: t('Name'), width: COL_WIDTH_UNDEFINED},
     {key: ResponseKeys.WIDGETS, name: t('Widgets'), width: COL_WIDTH_UNDEFINED},
     {key: ResponseKeys.OWNER, name: t('Owner'), width: COL_WIDTH_UNDEFINED},
@@ -300,20 +289,33 @@ function DashboardTable({
       columnSortBy={[]}
       grid={{
         renderBodyCell,
-        renderHeadCell: column => {
-          if (column.key === ResponseKeys.FAVORITE) {
-            return (
-              <Feature features="dashboards-favourite">
-                <StyledIconStar
-                  color="yellow300"
-                  isSolid
-                  aria-label={t('Favorite Column')}
-                />
-              </Feature>
-            );
+        // favorite column
+        renderPrependColumns: (isHeader: boolean, dataRow?: any) => {
+          if (!organization.features.includes('dashboards-favourite')) {
+            return [];
+          }
+          const favoriteColumn = {
+            key: ResponseKeys.FAVORITE,
+            name: t('Favorite'),
+          };
+          if (isHeader) {
+            return [
+              <StyledIconStar
+                color="yellow300"
+                isSolid
+                aria-label={t('Favorite Column')}
+                key="favorite-header"
+              />,
+            ];
+          }
+          if (!dataRow) {
+            return [];
           }
-          return column.name;
+          return [renderBodyCell(favoriteColumn, dataRow) as any];
         },
+        prependColumnWidths: organization.features.includes('dashboards-favourite')
+          ? ['max-content']
+          : [],
       }}
       isLoading={isLoading}
       emptyMessage={
@@ -356,12 +358,6 @@ const StyledButton = styled(Button)`
   box-shadow: none;
 `;
 
-const StyledFavoriteButton = styled(Button)`
-  padding: 0;
-  width: 16px;
-  border: 3px solid transparent;
-`;
-
 const StyledIconStar = styled(IconStar)`
-  margin-left: ${space(0.5)};
+  margin-left: ${space(0.25)};
 `;