feat(dashboards): Add foundation for manage page table view (#95157)

Adds the foundation for the split tables in the manage page starting
with owned dashboards. I'll need to create a similar hook for shared
dashboards and create a similar table below.

Most of the functionality is not implemented and thus you cannot
favorite, duplicate, or delete dashboards from this view. It is also
missing information such as environments, filters, and last viewed
because they are not yet exposed. I have tickets for each of these as
subtasks.

Author: narsaynorath

static/app/views/dashboards/hooks/useOwnedDashboards.tsx

@@ -0,0 +1,36 @@
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+import type {DashboardListItem} from 'sentry/views/dashboards/types';
+
+export function useOwnedDashboards({
+  query,
+  cursor,
+  sort,
+  enabled,
+}: {
+  cursor: string;
+  enabled: boolean;
+  query: string;
+  sort: string;
+}) {
+  const organization = useOrganization();
+  return useApiQuery<DashboardListItem[]>(
+    [
+      `/organizations/${organization.slug}/dashboards/`,
+      {
+        query: {
+          query,
+          cursor,
+          sort,
+          filter: 'owned',
+          pin: 'favorites',
+          per_page: 20,
+        },
+      },
+    ],
+    {
+      staleTime: 0,
+      enabled,
+    }
+  );
+}

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

@@ -229,10 +229,10 @@ describe('Dashboards > Detail', function () {
       },
     });
 
-    expect(await screen.findByTestId('list')).toBeInTheDocument();
-    await userEvent.click(await screen.findByTestId('list'));
+    expect(await screen.findByTestId('table')).toBeInTheDocument();
+    await userEvent.click(await screen.findByTestId('table'));
 
-    expect(localStorage.setItem).toHaveBeenCalledWith(LAYOUT_KEY, '"list"');
+    expect(localStorage.setItem).toHaveBeenCalledWith(LAYOUT_KEY, '"table"');
     expect(await screen.findByTestId('grid-editable')).toBeInTheDocument();
 
     expect(await screen.findByTestId('grid')).toBeInTheDocument();

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

@@ -38,11 +38,15 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {getDashboardTemplates} from 'sentry/views/dashboards/data';
+import {useOwnedDashboards} from 'sentry/views/dashboards/hooks/useOwnedDashboards';
 import {
   assignDefaultLayout,
   getInitialColumnDepths,
 } from 'sentry/views/dashboards/layoutUtils';
 import DashboardTable from 'sentry/views/dashboards/manage/dashboardTable';
+import OwnedDashboardsTable, {
+  OWNED_CURSOR_KEY,
+} from 'sentry/views/dashboards/manage/tableView/ownedDashboardsTable';
 import type {DashboardsLayout} from 'sentry/views/dashboards/manage/types';
 import type {DashboardDetails, DashboardListItem} from 'sentry/views/dashboards/types';
 import {usePrefersStackedNav} from 'sentry/views/nav/usePrefersStackedNav';
@@ -82,6 +86,13 @@ function shouldShowTemplates(): boolean {
 
 function getDashboardsOverviewLayout(): DashboardsLayout {
   const dashboardsLayout = localStorage.getItem(LAYOUT_KEY);
+
+  // There was a bug where the layout was saved as 'list' instead of 'table'
+  // this coerces it back to TABLE in case we still rely on it anywhere
+  if (dashboardsLayout === 'list') {
+    return TABLE;
+  }
+
   return dashboardsLayout === GRID || dashboardsLayout === TABLE
     ? dashboardsLayout
     : GRID;
@@ -128,9 +139,24 @@ function ManageDashboards() {
         },
       },
     ],
-    {staleTime: 0}
+    {
+      staleTime: 0,
+      enabled: !(
+        organization.features.includes('dashboards-starred-reordering') &&
+        dashboardsLayout === TABLE
+      ),
+    }
   );
 
+  const ownedDashboards = useOwnedDashboards({
+    query: decodeScalar(location.query.query, ''),
+    cursor: decodeScalar(location.query[OWNED_CURSOR_KEY], ''),
+    sort: getActiveSort()!.value,
+    enabled:
+      organization.features.includes('dashboards-starred-reordering') &&
+      dashboardsLayout === TABLE,
+  });
+
   const dashboardsPageLinks = getResponseHeader?.('Link') ?? '';
 
   function setRowsAndColumns(containerWidth: number) {
@@ -275,14 +301,14 @@ function ManageDashboards() {
           aria-label={t('Layout Control')}
         >
           <SegmentedControl.Item
-            key="grid"
-            textValue="grid"
+            key={GRID}
+            textValue={GRID}
             aria-label={t('Grid View')}
             icon={<IconGrid />}
           />
           <SegmentedControl.Item
-            key="list"
-            textValue="list"
+            key={TABLE}
+            textValue={TABLE}
             aria-label={t('List View')}
             icon={<IconList />}
           />
@@ -320,6 +346,12 @@ function ManageDashboards() {
         rowCount={rowCount}
         columnCount={columnCount}
       />
+    ) : organization.features.includes('dashboards-starred-reordering') ? (
+      <OwnedDashboardsTable
+        dashboards={ownedDashboards.data ?? []}
+        isLoading={ownedDashboards.isLoading}
+        pageLinks={ownedDashboards.getResponseHeader?.('Link') ?? undefined}
+      />
     ) : (
       <DashboardTable
         api={api}
@@ -492,7 +524,10 @@ function ManageDashboards() {
                     <div ref={dashboardGridRef} id="dashboard-list-container">
                       {renderDashboards()}
                     </div>
-                    {renderPagination()}
+                    {!(
+                      organization.features.includes('dashboards-starred-reordering') &&
+                      dashboardsLayout === TABLE
+                    ) && renderPagination()}
                   </Layout.Main>
                 </Layout.Body>
               </NoProjectMessage>

static/app/views/dashboards/manage/tableView/ownedDashboardsTable.tsx

@@ -0,0 +1,24 @@
+import {t} from 'sentry/locale';
+
+import type {DashboardTableProps} from './table';
+import {DashboardTable} from './table';
+
+export const OWNED_CURSOR_KEY = 'ownedCursor';
+
+function OwnedDashboardsTable({
+  dashboards,
+  isLoading,
+  pageLinks,
+}: Pick<DashboardTableProps, 'dashboards' | 'isLoading' | 'pageLinks'>) {
+  return (
+    <DashboardTable
+      title={t('Created by Me')}
+      cursorKey={OWNED_CURSOR_KEY}
+      dashboards={dashboards}
+      isLoading={isLoading}
+      pageLinks={pageLinks}
+    />
+  );
+}
+
+export default OwnedDashboardsTable;

static/app/views/dashboards/manage/tableView/table.spec.tsx

@@ -0,0 +1,40 @@
+import {DashboardListItemFixture} from 'sentry-fixture/dashboard';
+import {UserFixture} from 'sentry-fixture/user';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {DashboardTable} from './table';
+
+describe('DashboardTable', () => {
+  it('should render', () => {
+    render(
+      <DashboardTable
+        dashboards={[
+          DashboardListItemFixture({
+            id: '1',
+            title: 'Test',
+            projects: [],
+            createdBy: UserFixture({
+              name: 'Test User',
+            }),
+            isFavorited: true,
+            widgetPreview: [],
+          }),
+        ]}
+        isLoading={false}
+        title="My custom dashboards"
+        cursorKey="test"
+      />
+    );
+
+    expect(screen.getByText('My custom dashboards')).toBeInTheDocument();
+    expect(screen.getByText('Test')).toBeInTheDocument();
+    expect(screen.getByText('My Projects')).toBeInTheDocument();
+
+    // 0 widgets
+    expect(screen.getByText('0')).toBeInTheDocument();
+
+    // The dashboard is starred, so the button should prompt "Unstar"
+    expect(screen.getByLabelText('Unstar')).toBeInTheDocument();
+  });
+});