feat(prevent): Click to copy button on token regen table (#98878)

This PR aims to add the click to copy behavior on the repo token page

Closes
https://linear.app/getsentry/issue/CCMRG-1589/click-to-copy-on-token

Something like this:

<img width="949" height="84" alt="Screenshot 2025-09-04 at 4 28 18 PM"
src="https://github.com/user-attachments/assets/90f1d8b6-6c26-4d34-a887-c7bf19f0901b"
/>

<!--

  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/views/prevent/tokens/repoTokenTable/repoTokenTable.spec.tsx

@@ -83,8 +83,8 @@ describe('RepoTokenTable', () => {
     // Check table data
     expect(screen.getByText('sentry-frontend')).toBeInTheDocument();
     expect(screen.getByText('sentry-backend')).toBeInTheDocument();
-    expect(screen.getByText('sk_test_token_12345abcdef')).toBeInTheDocument();
-    expect(screen.getByText('sk_test_token_67890ghijkl')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('sk_test_token_12345abcdef')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('sk_test_token_67890ghijkl')).toBeInTheDocument();
 
     // Check regenerate buttons
     const regenerateButtons = screen.getAllByText('Regenerate token');
@@ -157,10 +157,12 @@ describe('RepoTokenTable', () => {
 
       renderWithContext(sortedProps);
 
-      expect(screen.getByRole('img')).toBeInTheDocument();
-      expect(
-        screen.getAllByRole('columnheader', {name: /repository name/i})[1]
-      ).toHaveAttribute('aria-sort', 'descending');
+      // Check for sort arrow specifically in the Repository Name column header
+      const nameHeader = screen.getAllByRole('columnheader', {
+        name: /repository name/i,
+      })[1];
+      expect(nameHeader?.querySelector('svg')).toBeInTheDocument();
+      expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
     });
 
     it('renders without sort indicators when no sort is provided', () => {
@@ -171,10 +173,12 @@ describe('RepoTokenTable', () => {
 
       renderWithContext(unsortedProps);
 
-      expect(screen.queryByRole('img')).not.toBeInTheDocument();
-      expect(
-        screen.getAllByRole('columnheader', {name: /repository name/i})[1]
-      ).toHaveAttribute('aria-sort', 'none');
+      // Check that there's no sort arrow in the Repository Name column header
+      const nameHeader = screen.getAllByRole('columnheader', {
+        name: /repository name/i,
+      })[1];
+      expect(nameHeader?.querySelector('svg')).not.toBeInTheDocument();
+      expect(nameHeader).toHaveAttribute('aria-sort', 'none');
     });
 
     it('shows ascending sort indicator correctly', () => {
@@ -185,10 +189,12 @@ describe('RepoTokenTable', () => {
 
       renderWithContext(ascendingProps);
 
-      expect(screen.getByRole('img')).toBeInTheDocument();
-      expect(
-        screen.getAllByRole('columnheader', {name: /repository name/i})[1]
-      ).toHaveAttribute('aria-sort', 'ascending');
+      // Check for sort arrow specifically in the Repository Name column header
+      const nameHeader = screen.getAllByRole('columnheader', {
+        name: /repository name/i,
+      })[1];
+      expect(nameHeader?.querySelector('svg')).toBeInTheDocument();
+      expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
     });
 
     it('makes repository name column clickable for sorting', () => {

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

@@ -31,7 +31,7 @@ export type ValidSort = Sort & {
 
 const COLUMNS_ORDER: Column[] = [
   {key: 'name', name: t('Repository Name'), width: COL_WIDTH_UNDEFINED},
-  {key: 'token', name: t('Token'), width: COL_WIDTH_UNDEFINED},
+  {key: 'token', name: t('Token'), width: 360},
   {key: 'regenerateToken', name: '', width: 100},
 ];
 

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

@@ -2,7 +2,9 @@ import styled from '@emotion/styled';
 
 import Confirm from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
+import {Text} from 'sentry/components/core/text';
 import {usePreventContext} from 'sentry/components/prevent/context/preventContext';
+import TextCopyInput from 'sentry/components/textCopyInput';
 import {t, tct} from 'sentry/locale';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useRegenerateRepositoryToken} from 'sentry/views/prevent/tokens/repoTokenTable/hooks/useRegenerateRepositoryToken';
@@ -23,11 +25,10 @@ function TableBodyCell({column, row}: TableBodyProps) {
   const {mutate: regenerateToken} = useRegenerateRepositoryToken();
 
   const key = column.key;
-  const alignment = ['regenerateToken', 'token'].includes(key) ? 'right' : 'left';
 
   if (key === 'regenerateToken') {
     return (
-      <AlignmentContainer alignment={alignment}>
+      <Text align="right">
         <Confirm
           onConfirm={() => {
             regenerateToken({
@@ -52,21 +53,25 @@ function TableBodyCell({column, row}: TableBodyProps) {
             {t('Regenerate token')}
           </StyledButton>
         </Confirm>
-      </AlignmentContainer>
+      </Text>
     );
   }
 
   const value = row[key];
 
   if (key === 'name') {
-    return <AlignmentContainer alignment={alignment}>{value}</AlignmentContainer>;
+    return <Text>{value}</Text>;
   }
 
   if (key === 'token') {
-    return <AlignmentContainer alignment={alignment}>{value}</AlignmentContainer>;
+    return (
+      <Text>
+        <StyledTextCopyInput>{value}</StyledTextCopyInput>
+      </Text>
+    );
   }
 
-  return <AlignmentContainer alignment={alignment}>{value}</AlignmentContainer>;
+  return <Text>{value}</Text>;
 }
 
 export function renderTableBody(props: TableBodyProps) {
@@ -77,6 +82,14 @@ const StyledButton = styled(Button)`
   max-width: 175px;
 `;
 
-const AlignmentContainer = styled('div')<{alignment: string}>`
-  text-align: ${p => (p.alignment === 'left' ? 'left' : 'right')};
+const StyledTextCopyInput = styled(TextCopyInput)`
+  input {
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    &:focus-within {
+      border: none;
+      box-shadow: none;
+    }
+  }
 `;

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

@@ -21,7 +21,7 @@ export const renderTableHeader = ({column, sort}: TableHeaderParams) => {
   }
 
   return (
-    <Flex justify="end" width="100%">
+    <Flex justify="start" width="100%">
       <Text as="span" size="sm">
         {name}
       </Text>

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

@@ -179,7 +179,7 @@ describe('TokensPage', () => {
 
       expect(await screen.findByRole('table')).toBeInTheDocument();
       expect(screen.getByText('test2')).toBeInTheDocument();
-      expect(screen.getByText('test2Token')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('test2Token')).toBeInTheDocument();
       expect(await screen.findAllByText('Regenerate token')).toHaveLength(2);
     });