feat(autofix): Add checkout locally flow (#82960)

Give option to "checkout locally", which creates branches in the correct
repos and then displays buttons to copy a `git switch` command to
checkout each branch.

<img width="653" alt="Screenshot 2025-01-06 at 10 23 15 AM"
src="https://github.com/user-attachments/assets/b3fdff75-8443-413a-8eb6-61c4811dbfa7"
/>
<img width="650" alt="Screenshot 2025-01-06 at 10 23 22 AM"
src="https://github.com/user-attachments/assets/620b4635-66e4-43ee-90e8-b23d93ec95e3"
/>
<img width="663" alt="Screenshot 2025-01-06 at 11 12 02 AM"
src="https://github.com/user-attachments/assets/6ef014d4-08d7-4cde-a286-e8cc78891e6d"
/>

static/app/components/events/autofix/autofixMessageBox.analytics.spec.tsx

@@ -130,7 +130,7 @@ describe('AutofixMessageBox Analytics', () => {
 
     render(<AutofixMessageBox {...changesStepProps} />);
 
-    await userEvent.click(screen.getByRole('button', {name: 'Approve'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Use this code'}));
 
     // Find the last call to Button that matches our Create PR button
     const createPRButtonCall = mockButton.mock.calls.find(
@@ -160,11 +160,11 @@ describe('AutofixMessageBox Analytics', () => {
 
     render(<AutofixMessageBox {...changesStepProps} />);
 
-    await userEvent.click(screen.getByRole('button', {name: 'Approve'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Use this code'}));
 
     // Find the last call to Button that matches our Setup button
     const setupButtonCall = mockButton.mock.calls.find(
-      call => call[0].children === 'Create PRs'
+      call => call[0].children === 'Draft PR'
     );
     expect(setupButtonCall?.[0]).toEqual(
       expect.objectContaining({

static/app/components/events/autofix/autofixMessageBox.spec.tsx

@@ -204,7 +204,7 @@ describe('AutofixMessageBox', () => {
     render(<AutofixMessageBox {...changesStepProps} />);
 
     expect(screen.getByRole('button', {name: 'Iterate'})).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'Approve'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Use this code'})).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Add tests'})).toBeInTheDocument();
   });
 
@@ -219,7 +219,7 @@ describe('AutofixMessageBox', () => {
     expect(screen.getByRole('button', {name: 'Send'})).toBeInTheDocument();
   });
 
-  it('shows "Create PR" button when "Approve" is selected', async () => {
+  it('shows "Draft PR" button when "Approve" is selected', async () => {
     MockApiClient.addMockResponse({
       url: '/issues/123/autofix/setup/?check_write_access=true',
       method: 'GET',
@@ -234,15 +234,13 @@ describe('AutofixMessageBox', () => {
 
     render(<AutofixMessageBox {...changesStepProps} />);
 
-    await userEvent.click(screen.getByRole('button', {name: 'Approve'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Use this code'}));
 
-    expect(
-      screen.getByText('Draft 1 pull request for the above changes?')
-    ).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'Create PR'})).toBeInTheDocument();
+    expect(screen.getByText('Push the above changes to a branch?')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Draft PR'})).toBeInTheDocument();
   });
 
-  it('shows "Create PRs" button with correct text for multiple changes', async () => {
+  it('shows "Draft PRs" button with correct text for multiple changes', async () => {
     MockApiClient.addMockResponse({
       url: '/issues/123/autofix/setup/?check_write_access=true',
       method: 'GET',
@@ -265,12 +263,10 @@ describe('AutofixMessageBox', () => {
 
     render(<AutofixMessageBox {...multipleChangesProps} />);
 
-    await userEvent.click(screen.getByRole('button', {name: 'Approve'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Use this code'}));
 
-    expect(
-      screen.getByText('Draft 2 pull requests for the above changes?')
-    ).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'Create PRs'})).toBeInTheDocument();
+    expect(screen.getByText('Push the above changes to 2 branches?')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Draft PRs'})).toBeInTheDocument();
   });
 
   it('shows "View PR" buttons when PRs are created', () => {
@@ -298,7 +294,7 @@ describe('AutofixMessageBox', () => {
     );
   });
 
-  it('shows "Create PRs" button that opens setup modal when setup is incomplete', async () => {
+  it('shows "Draft PRs" button that opens setup modal when setup is incomplete', async () => {
     MockApiClient.addMockResponse({
       url: '/issues/123/autofix/setup/?check_write_access=true',
       method: 'GET',
@@ -323,13 +319,11 @@ describe('AutofixMessageBox', () => {
 
     render(<AutofixMessageBox {...changesStepProps} />);
 
-    await userEvent.click(screen.getByRole('button', {name: 'Approve'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Use this code'}));
 
-    expect(
-      screen.getByText('Draft 1 pull request for the above changes?')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Push the above changes to a branch?')).toBeInTheDocument();
 
-    const createPRsButton = screen.getByRole('button', {name: 'Create PRs'});
+    const createPRsButton = screen.getByRole('button', {name: 'Draft PR'});
     expect(createPRsButton).toBeInTheDocument();
 
     renderGlobalModal();
@@ -341,10 +335,10 @@ describe('AutofixMessageBox', () => {
     ).toBeInTheDocument();
   });
 
-  it('shows segmented control options for changes step', () => {
+  it('shows option buttons for changes step', () => {
     render(<AutofixMessageBox {...changesStepProps} />);
 
-    expect(screen.getByRole('button', {name: 'Approve'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Use this code'})).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Iterate'})).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Add tests'})).toBeInTheDocument();
   });