feat(dashboards): enable sorting by column in table view (#82239)

Enable sorting by column in dashboards table view.

- This PR adds sorting by `name`, `date created`, and `owner`
- Added sort by `Name (Z-A)` to dropdown to maintain consistency b/w
grid and table view
- Sorting by `owner` column makes your dashboards show up on top (i.e.
`myDashboards` in the sort dropdown)
- The plan is to remove the sort dropdown for the table view in the
future

<img width="800" alt="Screenshot 2024-12-17 at 1 03 30 PM"
src="https://github.com/user-attachments/assets/6393a5ec-2b3c-43e8-8dca-2731060c6add"
/>

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

@@ -21,13 +21,15 @@ import GridEditable, {
   COL_WIDTH_UNDEFINED,
   type GridColumnOrder,
 } from 'sentry/components/gridEditable';
+import SortLink from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
 import TimeSince from 'sentry/components/timeSince';
 import {IconCopy, IconDelete, IconStar} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {decodeScalar} from 'sentry/utils/queryString';
 import withApi from 'sentry/utils/withApi';
 import EditAccessSelector from 'sentry/views/dashboards/editAccessSelector';
 import type {
@@ -56,6 +58,12 @@ enum ResponseKeys {
   FAVORITE = 'isFavorited',
 }
 
+const SortKeys = {
+  title: {asc: 'title', desc: '-title'},
+  dateCreated: {asc: 'dateCreated', desc: '-dateCreated'},
+  createdBy: {asc: 'mydashboards', desc: 'mydashboards'},
+};
+
 type FavoriteButtonProps = {
   api: Client;
   dashboardId: string;
@@ -159,6 +167,41 @@ function DashboardTable({
       : {}),
   };
 
+  function renderHeadCell(column: GridColumnOrder<string>) {
+    if (column.key in SortKeys) {
+      const urlSort = decodeScalar(location.query.sort, 'mydashboards');
+      const isCurrentSort =
+        urlSort === SortKeys[column.key].asc || urlSort === SortKeys[column.key].desc;
+      const sortDirection =
+        !isCurrentSort || column.key === 'createdBy'
+          ? undefined
+          : urlSort.startsWith('-')
+            ? 'desc'
+            : 'asc';
+
+      return (
+        <SortLink
+          align={'left'}
+          title={column.name}
+          direction={sortDirection}
+          canSort
+          generateSortLink={() => {
+            const newSort = isCurrentSort
+              ? sortDirection === 'asc'
+                ? SortKeys[column.key].desc
+                : SortKeys[column.key].asc
+              : SortKeys[column.key].asc;
+            return {
+              ...location,
+              query: {...location.query, sort: newSort},
+            };
+          }}
+        />
+      );
+    }
+    return column.name;
+  }
+
   const renderBodyCell = (
     column: GridColumnOrder<string>,
     dataRow: DashboardListItem
@@ -289,6 +332,7 @@ function DashboardTable({
       columnSortBy={[]}
       grid={{
         renderBodyCell,
+        renderHeadCell: column => renderHeadCell(column),
         // favorite column
         renderPrependColumns: (isHeader: boolean, dataRow?: any) => {
           if (!organization.features.includes('dashboards-favourite')) {

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

@@ -60,6 +60,7 @@ import TemplateCard from './templateCard';
 const SORT_OPTIONS: SelectValue<string>[] = [
   {label: t('My Dashboards'), value: 'mydashboards'},
   {label: t('Dashboard Name (A-Z)'), value: 'title'},
+  {label: t('Dashboard Name (Z-A)'), value: '-title'},
   {label: t('Date Created (Newest)'), value: '-dateCreated'},
   {label: t('Date Created (Oldest)'), value: 'dateCreated'},
   {label: t('Most Popular'), value: 'mostPopular'},