feat(dashboards): Dashboards landing page layout toggle (#80790)

Adds a toggle to change the dashboards layout from grid to table. This
is under feature flag and available to only me right now (since there is
no functionality to the toggle as of yet). Actual table layout will be
implemented in further PRs.

<img width="1277" alt="image"
src="https://github.com/user-attachments/assets/019b15fd-3c90-40f1-ab43-deed724a4793">


ALSO I am aware that the icon for grid right now is the dashboards icon,
Vasudha is working on getting the proper icon for the grid.

Author: nikkikapadia

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

@@ -7,10 +7,13 @@ import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import selectEvent from 'sentry-test/selectEvent';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
+import localStorage from 'sentry/utils/localStorage';
 import {useNavigate} from 'sentry/utils/useNavigate';
-import ManageDashboards from 'sentry/views/dashboards/manage';
+import ManageDashboards, {LAYOUT_KEY} from 'sentry/views/dashboards/manage';
 import {getPaginationPageLink} from 'sentry/views/organizationStats/utils';
 
+jest.mock('sentry/utils/localStorage');
+
 const FEATURES = [
   'global-views',
   'dashboards-basic',
@@ -211,4 +214,24 @@ describe('Dashboards > Detail', function () {
 
     expect(mockNavigate).not.toHaveBeenCalled();
   });
+
+  it('toggles between grid and list view', async function () {
+    render(<ManageDashboards />, {
+      ...RouteComponentPropsFixture(),
+      organization: {
+        ...mockAuthorizedOrg,
+        features: [...FEATURES, 'dashboards-table-view'],
+      },
+    });
+
+    expect(await screen.findByTestId('list')).toBeInTheDocument();
+    await userEvent.click(await screen.findByTestId('list'));
+
+    expect(localStorage.setItem).toHaveBeenCalledWith(LAYOUT_KEY, '"list"');
+
+    expect(await screen.findByTestId('grid')).toBeInTheDocument();
+    await userEvent.click(await screen.findByTestId('grid'));
+
+    expect(localStorage.setItem).toHaveBeenCalledWith(LAYOUT_KEY, '"grid"');
+  });
 });

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

@@ -19,9 +19,10 @@ import NoProjectMessage from 'sentry/components/noProjectMessage';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import Pagination from 'sentry/components/pagination';
 import SearchBar from 'sentry/components/searchBar';
+import {SegmentedControl} from 'sentry/components/segmentedControl';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import Switch from 'sentry/components/switchButton';
-import {IconAdd} from 'sentry/icons';
+import {IconAdd, IconDashboard, IconList} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {SelectValue} from 'sentry/types/core';
@@ -64,12 +65,23 @@ const SORT_OPTIONS: SelectValue<string>[] = [
 ];
 
 const SHOW_TEMPLATES_KEY = 'dashboards-show-templates';
+export const LAYOUT_KEY = 'dashboards-overview-layout';
+
+const GRID = 'grid';
+const LIST = 'list';
+
+type DashboardsLayout = 'grid' | 'list';
 
 function shouldShowTemplates(): boolean {
   const shouldShow = localStorage.getItem(SHOW_TEMPLATES_KEY);
   return shouldShow === 'true' || shouldShow === null;
 }
 
+function getDashboardsOverviewLayout(): DashboardsLayout {
+  const dashboardsLayout = localStorage.getItem(LAYOUT_KEY);
+  return dashboardsLayout === GRID || dashboardsLayout === LIST ? dashboardsLayout : GRID;
+}
+
 function ManageDashboards() {
   const organization = useOrganization();
   const navigate = useNavigate();
@@ -81,6 +93,10 @@ function ManageDashboards() {
     SHOW_TEMPLATES_KEY,
     shouldShowTemplates()
   );
+  const [dashboardsLayout, setDashboardsLayout] = useLocalStorageState(
+    LAYOUT_KEY,
+    getDashboardsOverviewLayout()
+  );
   const [{rowCount, columnCount}, setGridSize] = useState({
     rowCount: DASHBOARD_GRID_DEFAULT_NUM_ROWS,
     columnCount: DASHBOARD_GRID_DEFAULT_NUM_COLUMNS,
@@ -230,13 +246,37 @@ function ManageDashboards() {
   function renderActions() {
     const activeSort = getActiveSort();
     return (
-      <StyledActions>
+      <StyledActions listView={organization.features.includes('dashboards-table-view')}>
         <SearchBar
           defaultQuery=""
           query={getQuery()}
           placeholder={t('Search Dashboards')}
           onSearch={query => handleSearch(query)}
         />
+        <Feature features={'organizations:dashboards-table-view'}>
+          <SegmentedControl<DashboardsLayout>
+            onChange={setDashboardsLayout}
+            size="md"
+            value={dashboardsLayout}
+            aria-label={t('Layout Control')}
+          >
+            <SegmentedControl.Item
+              key="grid"
+              textValue="grid"
+              aria-label={t('Grid View')}
+            >
+              {/* TODO (nikkikapadia): replace this icon with correct one once made */}
+              <IconDashboard />
+            </SegmentedControl.Item>
+            <SegmentedControl.Item
+              key="list"
+              textValue="list"
+              aria-label={t('List View')}
+            >
+              <IconList />
+            </SegmentedControl.Item>
+          </SegmentedControl>
+        </Feature>
         <CompactSelect
           triggerProps={{prefix: t('Sort By')}}
           value={activeSort.value}
@@ -444,9 +484,10 @@ function ManageDashboards() {
   );
 }
 
-const StyledActions = styled('div')`
+const StyledActions = styled('div')<{listView: boolean}>`
   display: grid;
-  grid-template-columns: auto max-content;
+  grid-template-columns: ${p =>
+    p.listView ? 'auto max-content max-content' : 'auto max-content'};
   gap: ${space(2)};
   margin-bottom: ${space(2)};