feat: Add generic regenerate token modal (#95297)

This PR aims to add the new regenerate token modal and related UTs.

Right now it just defaults to the same token every time because we
haven't created the related GQL mutation and sentry endpoint, so we'll
need to hook up those actions later when they do exist.

Closes
https://linear.app/getsentry/issue/CCMRG-159/token-gen-page-create-generated-token-confirmation-modal



https://github.com/user-attachments/assets/9c7a09f5-9882-421a-abbc-78d877dc8617

<img width="1297" height="683" alt="Screenshot 2025-07-10 at 2 55 41 PM"
src="https://github.com/user-attachments/assets/74cfb9b1-9910-412e-85ab-4269ef812920"
/>



<!--

  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/actionCreators/modal.tsx

@@ -425,3 +425,11 @@ export async function openSaveQueryModal(options: SaveQueryModalProps) {
 
   openModal(deps => <Modal {...deps} {...options} />);
 }
+
+export async function openTokenRegenerationConfirmationModal(options: ModalOptions) {
+  const {default: Modal} = await import(
+    'sentry/components/modals/tokenRegenerationConfirmationModal'
+  );
+
+  openModal(deps => <Modal {...deps} {...options} />);
+}

static/app/components/modals/tokenRegenerationConfirmationModal.spec.tsx

@@ -0,0 +1,72 @@
+import {
+  act,
+  renderGlobalModal,
+  screen,
+  userEvent,
+  waitFor,
+} from 'sentry-test/reactTestingLibrary';
+
+import {openModal} from 'sentry/actionCreators/modal';
+import TokenRegenerationConfirmationModal from 'sentry/components/modals/tokenRegenerationConfirmationModal';
+
+describe('TokenRegenerationConfirmationModal', function () {
+  function renderComponent() {
+    renderGlobalModal();
+    act(() =>
+      openModal(modalProps => <TokenRegenerationConfirmationModal {...modalProps} />)
+    );
+  }
+
+  it('renders modal with correct header', function () {
+    renderComponent();
+
+    expect(screen.getByRole('heading', {name: 'Token created'})).toBeInTheDocument();
+  });
+
+  it('displays warning alert with token safety message', function () {
+    renderComponent();
+
+    expect(
+      screen.getByText(
+        `Please copy this token to a safe place - it won't be shown again.`
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('displays both token inputs', function () {
+    renderComponent();
+
+    const tokenInputs = screen.getAllByRole('textbox');
+    expect(tokenInputs).toHaveLength(2);
+
+    expect(screen.getByDisplayValue('SENTRY_PREVENT_TOKEN')).toBeInTheDocument();
+    expect(
+      screen.getByDisplayValue('91b57316-b1ff-4884-8d55-92b9936a05a3')
+    ).toBeInTheDocument();
+  });
+
+  it('renders Done button', function () {
+    renderComponent();
+
+    expect(screen.getByRole('button', {name: 'Done'})).toBeInTheDocument();
+  });
+
+  it('closes modal when Done button is clicked', async function () {
+    renderComponent();
+
+    await userEvent.click(screen.getByRole('button', {name: 'Done'}));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('heading', {name: 'Token created'})
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('has copy functionality for both tokens', function () {
+    renderComponent();
+
+    const copyButtons = screen.getAllByRole('button', {name: /copy/i});
+    expect(copyButtons).toHaveLength(2);
+  });
+});

static/app/components/modals/tokenRegenerationConfirmationModal.tsx

@@ -0,0 +1,66 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import type {ModalRenderProps} from 'sentry/actionCreators/modal';
+import {Alert} from 'sentry/components/core/alert';
+import {Button} from 'sentry/components/core/button';
+import TextCopyInput from 'sentry/components/textCopyInput';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+
+type Props = ModalRenderProps;
+
+function TokenRegenerationConfirmationModal({Header, Body, Footer, closeModal}: Props) {
+  return (
+    <Fragment>
+      <Header closeButton>
+        <h5>{t('Token created')}</h5>
+      </Header>
+      <Body>
+        <Wrapper>
+          <Alert.Container>
+            <Alert type="warning">
+              {t(`Please copy this token to a safe place - it won't be shown again.`)}
+            </Alert>
+          </Alert.Container>
+          <TokenRow>
+            <StyledTextCopyInput style={{minWidth: '230px'}}>
+              SENTRY_PREVENT_TOKEN
+            </StyledTextCopyInput>
+            <StyledTextCopyInput style={{minWidth: '310px'}}>
+              91b57316-b1ff-4884-8d55-92b9936a05a3
+            </StyledTextCopyInput>
+          </TokenRow>
+        </Wrapper>
+      </Body>
+
+      <Footer>
+        <Button onClick={closeModal} priority="primary">
+          {t('Done')}
+        </Button>
+      </Footer>
+    </Fragment>
+  );
+}
+
+export default TokenRegenerationConfirmationModal;
+
+const Wrapper = styled('div')`
+  margin-bottom: ${space(2)};
+`;
+
+const TokenRow = styled('div')`
+  display: flex;
+  flex-direction: row;
+  gap: ${space(1)};
+`;
+
+const StyledTextCopyInput = styled(TextCopyInput)`
+  box-shadow: none;
+  input {
+    height: 52px;
+    background: #2b2233;
+    color: #f0ecf3;
+    font-size: 12px;
+  }
+`;

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import {openTokenRegenerationConfirmationModal} from 'sentry/actionCreators/modal';
 import Confirm from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import {t, tct} from 'sentry/locale';
@@ -21,7 +22,9 @@ export function renderTableBody({column, row}: TableBodyProps) {
     return (
       <AlignmentContainer alignment={alignment}>
         <Confirm
-          onConfirm={() => {}}
+          onConfirm={() => {
+            openTokenRegenerationConfirmationModal({});
+          }}
           header={<h5>{t('Generate new token')}</h5>}
           cancelText={t('Return')}
           confirmText={t('Generate new token')}

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

@@ -112,7 +112,7 @@ describe('TokensPage', () => {
       expect(await screen.findAllByText('Regenerate token')).toHaveLength(2);
     });
 
-    it('renders a confirm modal when the regenerate token button is clicked', async () => {
+    it('Creates new token when regenerate token button is clicked after opening the modal and clicking the Generate new token button', async () => {
       render(
         <CodecovQueryParamsProvider>
           <TokensPage />
@@ -140,9 +140,25 @@ describe('TokensPage', () => {
 
       expect(await screen.findByRole('dialog')).toBeInTheDocument();
 
+      // Click the Generate new token button to open the modal
       await userEvent.click(screen.getByRole('button', {name: 'Generate new token'}));
 
-      // TODO: Add the action stuff when this is linked up
+      // This is confirming all the new modal stuff
+      expect(
+        await screen.findByRole('heading', {name: 'Token created'})
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          `Please copy this token to a safe place - it won't be shown again.`
+        )
+      ).toBeInTheDocument();
+
+      expect(screen.getByDisplayValue('SENTRY_PREVENT_TOKEN')).toBeInTheDocument();
+      expect(
+        screen.getByDisplayValue('91b57316-b1ff-4884-8d55-92b9936a05a3')
+      ).toBeInTheDocument();
+
+      expect(screen.getByRole('button', {name: 'Done'})).toBeInTheDocument();
     });
   });
 });