feat(dashboards): add 'my favorites' section to dashboards grid view

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

@@ -10,6 +10,7 @@ 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 {Button} from 'sentry/components/button';
 import {openConfirmModal} from 'sentry/components/confirm';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
@@ -101,6 +102,11 @@ function DashboardGrid({
     }
   }
 
+  // function handleFavorite() {
+  //   // call api
+  //   onDashboardsChange();
+  // }
+
   function renderDropdownMenu(dashboard: DashboardListItem) {
     const menuItems: MenuItemProps[] = [
       {
@@ -164,6 +170,27 @@ function DashboardGrid({
       : {}),
   };
 
+  function renderDashboardCard(dashboard: DashboardListItem, index: number) {
+    return (
+      <DashboardCard
+        key={`${index}-${dashboard.id}`}
+        title={dashboard.title}
+        to={{
+          pathname: `/organizations/${organization.slug}/dashboard/${dashboard.id}/`,
+          ...queryLocation,
+        }}
+        detail={tn('%s widget', '%s widgets', dashboard.widgetPreview.length)}
+        dateStatus={
+          dashboard.dateCreated ? <TimeSince date={dashboard.dateCreated} /> : undefined
+        }
+        createdBy={dashboard.createdBy}
+        renderWidgets={() => renderGridPreview(dashboard)}
+        renderContextMenu={() => renderDropdownMenu(dashboard)}
+        // pass handleFavourite
+      />
+    );
+  }
+
   function renderMiniDashboards() {
     // on pagination, render no dashboards to show placeholders while loading
     if (
@@ -174,23 +201,23 @@ function DashboardGrid({
     }
 
     return currentDashboards?.slice(0, rowCount * columnCount).map((dashboard, index) => {
-      return (
-        <DashboardCard
-          key={`${index}-${dashboard.id}`}
-          title={dashboard.title}
-          to={{
-            pathname: `/organizations/${organization.slug}/dashboard/${dashboard.id}/`,
-            ...queryLocation,
-          }}
-          detail={tn('%s widget', '%s widgets', dashboard.widgetPreview.length)}
-          dateStatus={
-            dashboard.dateCreated ? <TimeSince date={dashboard.dateCreated} /> : undefined
-          }
-          createdBy={dashboard.createdBy}
-          renderWidgets={() => renderGridPreview(dashboard)}
-          renderContextMenu={() => renderDropdownMenu(dashboard)}
-        />
-      );
+      return renderDashboardCard(dashboard, index);
+    });
+  }
+
+  function renderFavoriteDashboards() {
+    if (
+      rowCount * columnCount === currentDashboards?.length &&
+      !isEqual(currentDashboards, dashboards)
+    ) {
+      return [];
+    }
+
+    const favoriteDashboardsRows = Math.ceil(5 / columnCount);
+    rowCount -= favoriteDashboardsRows;
+
+    return currentDashboards?.slice(0, 5).map((dashboard, index) => {
+      return renderDashboardCard(dashboard, index);
     });
   }
 
@@ -210,19 +237,43 @@ function DashboardGrid({
       ? currentDashboards?.length ?? 0
       : dashboards?.length ?? 0;
 
+    const isFirstPage = location.query.cursor === undefined;
+
     return (
-      <DashboardGridContainer
-        rows={rowCount}
-        columns={columnCount}
-        data-test-id={'dashboard-grid'}
-      >
-        {renderMiniDashboards()}
-        {isLoading &&
-          rowCount * columnCount > numDashboards &&
-          new Array(rowCount * columnCount - numDashboards)
-            .fill(0)
-            .map((_, index) => <Placeholder key={index} height="270px" />)}
-      </DashboardGridContainer>
+      <DashboardGridWrapper>
+        {isFirstPage && (
+          <Feature features="dashboards-favourite">
+            <div>
+              <h5>{t('My Favourites')}</h5>
+              <DashboardGridContainer
+                rows={rowCount}
+                columns={columnCount}
+                data-test-id={'dashboard-grid'}
+              >
+                {renderFavoriteDashboards()}
+                {isLoading &&
+                  rowCount * columnCount > numDashboards &&
+                  new Array(rowCount * columnCount - numDashboards)
+                    .fill(0)
+                    .map((_, index) => <Placeholder key={index} height="270px" />)}
+              </DashboardGridContainer>
+            </div>
+          </Feature>
+        )}
+        {isFirstPage && <h5>{t('All Dashboards')}</h5>}
+        <DashboardGridContainer
+          rows={rowCount}
+          columns={columnCount}
+          data-test-id={'dashboard-grid'}
+        >
+          {renderMiniDashboards()}
+          {isLoading &&
+            rowCount * columnCount > numDashboards &&
+            new Array(rowCount * columnCount - numDashboards)
+              .fill(0)
+              .map((_, index) => <Placeholder key={index} height="270px" />)}
+        </DashboardGridContainer>
+      </DashboardGridWrapper>
     );
   }
 
@@ -239,6 +290,14 @@ const DashboardGridContainer = styled('div')<{columns: number; rows: number}>`
   gap: ${DASHBOARD_CARD_GRID_PADDING}px;
 `;
 
+const DashboardGridWrapper = styled('div')`
+  h5 {
+    border-bottom: 1px solid ${p => p.theme.border};
+    padding-bottom: ${space(1)};
+    margin-bottom: ${space(2)};
+  }
+`;
+
 const DropdownTrigger = styled(Button)`
   transform: translateX(${space(1)});
 `;

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

@@ -37,6 +37,7 @@ import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
+import DashboardGrid from 'sentry/views/dashboards/manage/dashboardGrid';
 import {DashboardImportButton} from 'sentry/views/dashboards/manage/dashboardImport';
 import DashboardTable from 'sentry/views/dashboards/manage/dashboardTable';
 import {MetricsRemovedAlertsWidgetsAlert} from 'sentry/views/metrics/metricsRemovedAlertsWidgetsAlert';
@@ -46,7 +47,6 @@ import {getDashboardTemplates} from '../data';
 import {assignDefaultLayout, getInitialColumnDepths} from '../layoutUtils';
 import type {DashboardDetails, DashboardListItem} from '../types';
 
-import DashboardGrid from './dashboardGrid';
 import {
   DASHBOARD_CARD_GRID_PADDING,
   DASHBOARD_GRID_DEFAULT_NUM_CARDS,
@@ -115,11 +115,13 @@ function ManageDashboards() {
     refetch: refetchDashboards,
   } = useApiQuery<DashboardListItem[]>(
     [
+      // here
       `/organizations/${organization.slug}/dashboards/`,
       {
         query: {
           ...pick(location.query, ['cursor', 'query']),
           sort: getActiveSort().value,
+          filter: 'onlyFavorites',
           per_page:
             dashboardsLayout === GRID ? rowCount * columnCount : DASHBOARD_TABLE_NUM_ROWS,
         },