feat(prevent): Initial RepoTokenTable (#94381)

This PR adds the initial repo token table to the tokens page. Right now
there's just mock data doing into the table and talking with
@adrian-codecov and @calvin-codecov maybe not the final version of the
row selection stuff, but otherwise it's a good start and will at least
unblock being able to start on the modal / confirmation.

Adds some new repo selection state which we'll use to populate the text
on the modal, and which gets updated if you click anywhere on the row.
**NOTE:** This makes an update to the Reusable GridEditable component
adding an additional prop for onClick row so that we can have the radio
button row behavior shown in the video below

**Latest Update:** We're using multiple "regenerate token" buttons now
on each row to avoid users having to do an additional click for repo
they want -> regenerate. Screenshot below reflects

<img width="1481" alt="Screenshot 2025-06-27 at 10 49 26 AM"
src="https://github.com/user-attachments/assets/d0d8c117-e1ad-4103-8f5d-54c171eeec8c"
/>



<!--

  Sentry employees and contractors can delete or ignore the following.

-->

### Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

Author: ajay-sentry

static/app/components/tables/gridEditable/index.tsx

@@ -114,7 +114,6 @@ type GridEditableProps<DataRow, ColumnKey> = {
 
   minimumColWidth?: number;
   onRowMouseOut?: (row: DataRow, key: number, event: React.MouseEvent) => void;
-
   onRowMouseOver?: (row: DataRow, key: number, event: React.MouseEvent) => void;
   /**
    * Whether columns in the grid can be resized.

static/app/views/codecov/tokens/repoTokenTable/repoTokenTable.tsx

@@ -0,0 +1,82 @@
+import GridEditable, {
+  COL_WIDTH_UNDEFINED,
+  type GridColumnHeader,
+} from 'sentry/components/tables/gridEditable';
+import {t} from 'sentry/locale';
+import type {Sort} from 'sentry/utils/discover/fields';
+import {renderTableBody} from 'sentry/views/codecov/tokens/repoTokenTable/tableBody';
+import {renderTableHeader} from 'sentry/views/codecov/tokens/repoTokenTable/tableHeader';
+
+type RepoTokenTableResponse = {
+  createdAt: string;
+  name: string;
+  token: string;
+};
+
+export type Row = Pick<RepoTokenTableResponse, 'name' | 'token' | 'createdAt'>;
+export type Column = GridColumnHeader<'name' | 'token' | 'createdAt' | 'regenerateToken'>;
+
+type ValidField = (typeof SORTABLE_FIELDS)[number];
+
+export function isAValidSort(sort: Sort): sort is ValidSort {
+  return SORTABLE_FIELDS.includes(sort.field as ValidField);
+}
+
+export type ValidSort = Sort & {
+  field: ValidField;
+};
+
+const COLUMNS_ORDER: Column[] = [
+  {key: 'name', name: t('Repository Name'), width: 350},
+  {key: 'token', name: t('Token'), width: 275},
+  {key: 'createdAt', name: t('Created Date'), width: COL_WIDTH_UNDEFINED},
+  {key: 'regenerateToken', name: '', width: 100},
+];
+
+export const SORTABLE_FIELDS = ['name', 'createdAt'] as const;
+
+export const DEFAULT_SORT: ValidSort = {
+  field: 'createdAt',
+  kind: 'desc',
+};
+
+interface Props {
+  response: {
+    data: Row[];
+    isLoading: boolean;
+    error?: Error | null;
+  };
+  sort: ValidSort;
+}
+
+export default function RepoTokenTable({response, sort}: Props) {
+  const {data, isLoading} = response;
+
+  return (
+    <GridEditable
+      aria-label={t('Repository Tokens Table')}
+      isLoading={isLoading}
+      error={response.error}
+      data={data}
+      columnOrder={COLUMNS_ORDER}
+      columnSortBy={[
+        {
+          key: sort.field,
+          order: sort.kind,
+        },
+      ]}
+      grid={{
+        renderHeadCell: (column: Column) =>
+          renderTableHeader({
+            column,
+            sort,
+          }),
+        renderBodyCell: (column: Column, row: Row) =>
+          renderTableBody({
+            column,
+            row,
+          }),
+      }}
+    />
+  );
+}

static/app/views/codecov/tokens/repoTokenTable/tableBody.tsx

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+
+import {Button} from 'sentry/components/core/button';
+import {
+  type Column,
+  type Row,
+} from 'sentry/views/codecov/tokens/repoTokenTable/repoTokenTable';
+
+interface TableBodyProps {
+  column: Column;
+  row: Row;
+}
+
+export function renderTableBody({column, row}: TableBodyProps) {
+  const key = column.key;
+  const alignment = ['regenerateToken', 'token'].includes(key) ? 'right' : 'left';
+
+  if (key === 'regenerateToken') {
+    return (
+      <AlignmentContainer alignment={alignment}>
+        <StyledButton
+          size="sm"
+          priority="default"
+          onClick={() => {}}
+          aria-label="regenerate token"
+        >
+          Regenerate token
+        </StyledButton>
+      </AlignmentContainer>
+    );
+  }
+
+  const value = row[key];
+
+  if (key === 'name') {
+    return <AlignmentContainer alignment={alignment}>{value}</AlignmentContainer>;
+  }
+
+  if (key === 'token') {
+    return <AlignmentContainer alignment={alignment}>{value}</AlignmentContainer>;
+  }
+
+  if (key === 'createdAt') {
+    return <DateContainer>{value}</DateContainer>;
+  }
+
+  return <AlignmentContainer alignment={alignment}>{value}</AlignmentContainer>;
+}
+
+const StyledButton = styled(Button)`
+  max-width: 175px;
+`;
+
+export const AlignmentContainer = styled('div')<{alignment: string}>`
+  text-align: ${p => (p.alignment === 'left' ? 'left' : 'right')};
+`;
+
+const DateContainer = styled('div')`
+  color: ${p => p.theme.tokens.content.muted};
+  text-align: 'left';
+`;

static/app/views/codecov/tokens/repoTokenTable/tableHeader.tsx

@@ -0,0 +1,22 @@
+import type {Sort} from 'sentry/utils/discover/fields';
+import SortableHeader from 'sentry/views/codecov/tests/testAnalyticsTable/sortableHeader';
+import type {Column} from 'sentry/views/codecov/tokens/repoTokenTable/repoTokenTable';
+
+type TableHeaderParams = {
+  column: Column;
+  sort?: Sort;
+};
+
+export const renderTableHeader = ({column, sort}: TableHeaderParams) => {
+  const {key, name} = column;
+
+  return (
+    <SortableHeader
+      alignment={key === 'token' ? 'right' : 'left'}
+      sort={sort}
+      fieldName={key}
+      label={name}
+      enableToggle={false}
+    />
+  );
+};

static/app/views/codecov/tokens/tokens.spec.tsx

@@ -1,4 +1,4 @@
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import CodecovQueryParamsProvider from 'sentry/components/codecov/container/codecovParamsProvider';
 import TokensPage from 'sentry/views/codecov/tokens/tokens';
@@ -58,7 +58,7 @@ describe('TokensPage', () => {
       ).toBeInTheDocument();
     });
 
-    it('renders the regenerate token button', async () => {
+    it('renders a table component', async () => {
       render(
         <CodecovQueryParamsProvider>
           <TokensPage />
@@ -75,34 +75,9 @@ describe('TokensPage', () => {
         }
       );
 
-      const regenerateButton = await screen.findByRole('button', {
-        name: 'regenerate token',
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
       });
-      expect(regenerateButton).toBeInTheDocument();
-      expect(regenerateButton).toHaveTextContent('Regenerate token');
-    });
-
-    it('handles regenerate token button click', async () => {
-      render(
-        <CodecovQueryParamsProvider>
-          <TokensPage />
-        </CodecovQueryParamsProvider>,
-        {
-          initialRouterConfig: {
-            location: {
-              pathname: '/codecov/tokens/',
-              query: {
-                integratedOrg: 'some-org-name',
-              },
-            },
-          },
-        }
-      );
-
-      const regenerateButton = await screen.findByRole('button', {
-        name: 'regenerate token',
-      });
-      await userEvent.click(regenerateButton);
     });
   });
 });

static/app/views/codecov/tokens/tokens.tsx

@@ -2,35 +2,55 @@ import styled from '@emotion/styled';
 
 import {useCodecovContext} from 'sentry/components/codecov/context/codecovContext';
 import {IntegratedOrgSelector} from 'sentry/components/codecov/integratedOrgSelector/integratedOrgSelector';
-import {Button} from 'sentry/components/core/button';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {decodeSorts} from 'sentry/utils/queryString';
+import {useLocation} from 'sentry/utils/useLocation';
+
+import type {ValidSort} from './repoTokenTable/repoTokenTable';
+import RepoTokenTable, {
+  DEFAULT_SORT,
+  isAValidSort,
+} from './repoTokenTable/repoTokenTable';
 
 export default function TokensPage() {
   const {integratedOrg} = useCodecovContext();
+  const location = useLocation();
+
+  const sorts: [ValidSort] = [
+    decodeSorts(location.query?.sort).find(isAValidSort) ?? DEFAULT_SORT,
+  ];
+
+  const response = {
+    data: [
+      {
+        name: 'test',
+        token: 'test',
+        createdAt: 'Mar 20, 2024 6:33:30 PM CET',
+      },
+      {
+        name: 'test2',
+        token: 'test2',
+        createdAt: 'Mar 19, 2024 6:33:30 PM CET',
+      },
+    ],
+    isLoading: false,
+    error: null,
+  };
 
   return (
     <LayoutGap>
       <PageFilterBar condensed>
         <IntegratedOrgSelector />
       </PageFilterBar>
       <HeaderValue>{t('Repository tokens')}</HeaderValue>
-      <TopRow>
-        <p>
-          {t('View the list of tokens created for your repositories in')}{' '}
-          <strong>{integratedOrg}</strong>.{' '}
-          {t("Use them for uploading reports to all Sentry Prevent's features.")}
-        </p>
-        <StyledButton
-          size="sm"
-          priority="primary"
-          onClick={() => {}}
-          aria-label="regenerate token"
-        >
-          Regenerate token
-        </StyledButton>
-      </TopRow>
+      <p>
+        {t('View the list of tokens created for your repositories in')}{' '}
+        <strong>{integratedOrg}</strong>.{' '}
+        {t("Use them for uploading reports to all Sentry Prevent's features.")}
+      </p>
+      <RepoTokenTable response={response} sort={sorts[0]} />
     </LayoutGap>
   );
 }
@@ -46,12 +66,3 @@ const HeaderValue = styled('div')`
   font-size: ${p => p.theme.headerFontSize};
   font-weight: ${p => p.theme.fontWeight.bold};
 `;
-
-const StyledButton = styled(Button)`
-  max-width: 175px;
-`;
-
-const TopRow = styled('div')`
-  display: flex;
-  justify-content: space-between;
-`;