feat(dashboards): Create table for landing page table view (#80945)

As part of creating table view for the dashboards landing page this PR
creates the actual table with most of the fields that are present in the
mockup (only column left to add is permissions/access column). Switching
the toggle to list view will bring you to this page view. I've defaulted
to 25 items per page (i'm not sure if there's a different amount we want
to use). It's still under the feature flag `dashboards-table-view` which
I only have access to atm.

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/89530817-cd94-4128-ad3a-fa1ea05851d6">

Author: nikkikapadia

static/app/views/dashboards/manage/dashboardList.spec.tsx renamed to static/app/views/dashboards/manage/dashboardGrid.spec.tsx

@@ -13,10 +13,10 @@ import {
   within,
 } from 'sentry-test/reactTestingLibrary';
 
-import DashboardList from 'sentry/views/dashboards/manage/dashboardList';
+import DashboardGrid from 'sentry/views/dashboards/manage/dashboardGrid';
 import {type DashboardListItem, DisplayType} from 'sentry/views/dashboards/types';
 
-describe('Dashboards - DashboardList', function () {
+describe('Dashboards - DashboardGrid', function () {
   let dashboards: DashboardListItem[];
   let deleteMock: jest.Mock;
   let dashboardUpdateMock: jest.Mock;
@@ -100,9 +100,9 @@ describe('Dashboards - DashboardList', function () {
     dashboardUpdateMock = jest.fn();
   });
 
-  it('renders an empty list', function () {
+  it('renders an empty list', async function () {
     render(
-      <DashboardList
+      <DashboardGrid
         onDashboardsChange={jest.fn()}
         organization={organization}
         dashboards={[]}
@@ -113,11 +113,14 @@ describe('Dashboards - DashboardList', function () {
     );
 
     expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    expect(
+      await screen.findByText('Sorry, no Dashboards match your filters.')
+    ).toBeInTheDocument();
   });
 
   it('renders dashboard list', function () {
     render(
-      <DashboardList
+      <DashboardGrid
         onDashboardsChange={jest.fn()}
         organization={organization}
         dashboards={dashboards}
@@ -133,7 +136,7 @@ describe('Dashboards - DashboardList', function () {
 
   it('returns landing page url for dashboards', function () {
     render(
-      <DashboardList
+      <DashboardGrid
         onDashboardsChange={jest.fn()}
         organization={organization}
         dashboards={dashboards}
@@ -156,7 +159,7 @@ describe('Dashboards - DashboardList', function () {
 
   it('persists global selection headers', function () {
     render(
-      <DashboardList
+      <DashboardGrid
         onDashboardsChange={jest.fn()}
         organization={organization}
         dashboards={dashboards}
@@ -175,7 +178,7 @@ describe('Dashboards - DashboardList', function () {
 
   it('can delete dashboards', async function () {
     render(
-      <DashboardList
+      <DashboardGrid
         organization={organization}
         dashboards={dashboards}
         location={{...LocationFixture(), query: {}}}
@@ -213,7 +216,7 @@ describe('Dashboards - DashboardList', function () {
       }),
     ];
     render(
-      <DashboardList
+      <DashboardGrid
         organization={organization}
         dashboards={singleDashboard}
         location={LocationFixture()}
@@ -232,7 +235,7 @@ describe('Dashboards - DashboardList', function () {
 
   it('can duplicate dashboards', async function () {
     render(
-      <DashboardList
+      <DashboardGrid
         organization={organization}
         dashboards={dashboards}
         location={{...LocationFixture(), query: {}}}
@@ -259,7 +262,7 @@ describe('Dashboards - DashboardList', function () {
     });
 
     render(
-      <DashboardList
+      <DashboardGrid
         organization={organization}
         dashboards={dashboards}
         location={{...LocationFixture(), query: {}}}

static/app/views/dashboards/manage/dashboardList.tsx renamed to static/app/views/dashboards/manage/dashboardGrid.tsx

@@ -45,7 +45,7 @@ type Props = {
   isLoading?: boolean;
 };
 
-function DashboardList({
+function DashboardGrid({
   api,
   organization,
   location,
@@ -203,21 +203,25 @@ function DashboardList({
       : dashboards?.length ?? 0;
 
     return (
-      <DashboardGrid rows={rowCount} columns={columnCount}>
+      <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" />)}
-      </DashboardGrid>
+      </DashboardGridContainer>
     );
   }
 
   return <Fragment>{renderDashboardGrid()}</Fragment>;
 }
 
-const DashboardGrid = styled('div')<{columns: number; rows: number}>`
+const DashboardGridContainer = styled('div')<{columns: number; rows: number}>`
   display: grid;
   grid-template-columns: repeat(
     ${props => props.columns},
@@ -231,4 +235,4 @@ const DropdownTrigger = styled(Button)`
   transform: translateX(${space(1)});
 `;
 
-export default withApi(DashboardList);
+export default withApi(DashboardGrid);