fix(autofix): Make starting UI more clear

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

@@ -35,7 +35,7 @@ describe('AutofixBanner', () => {
     expect(screen.getByRole('button', {name: /Set up Autofix/i})).toBeInTheDocument();
   });
 
-  it('renders the banner with "Run Autofix" button when setup is done', () => {
+  it('renders the banner with "Open Autofix" button when setup is done', () => {
     render(
       <AutofixBanner
         group={mockGroup}
@@ -46,7 +46,7 @@ describe('AutofixBanner', () => {
     );
 
     expect(screen.getByText(/Try Autofix/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: /Run Autofix/i})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: /Open Autofix/i})).toBeInTheDocument();
   });
 
   it('opens the AutofixSetupModal when "Set up Autofix" is clicked', async () => {

static/app/components/events/autofix/autofixBanner.tsx

@@ -55,7 +55,7 @@ function SuccessfulSetup({
 
   return (
     <Button onClick={() => openAutofix()} size="sm" ref={openButtonRef}>
-      {t('Run Autofix')}
+      {t('Open Autofix')}
     </Button>
   );
 }

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

@@ -34,7 +34,7 @@ describe('AutofixDrawer', () => {
 
     expect(screen.getByRole('heading', {name: 'Autofix'})).toBeInTheDocument();
 
-    expect(screen.getByText('Ready to begin analyzing the issue?')).toBeInTheDocument();
+    expect(screen.getByText('Ready to Start')).toBeInTheDocument();
 
     const startButton = screen.getByRole('button', {name: 'Start'});
     expect(startButton).toBeInTheDocument();
@@ -88,7 +88,7 @@ describe('AutofixDrawer', () => {
     await userEvent.click(startOverButton);
 
     await waitFor(() => {
-      expect(screen.getByText('Ready to begin analyzing the issue?')).toBeInTheDocument();
+      expect(screen.getByText('Ready to Start')).toBeInTheDocument();
       expect(screen.getByRole('button', {name: 'Start'})).toBeInTheDocument();
     });
   });

static/app/components/events/autofix/autofixDrawer.tsx

@@ -73,9 +73,13 @@ export function AutofixDrawer({group, project, event}: AutofixDrawerProps) {
       <AutofixDrawerBody ref={setContainer}>
         {!autofixData ? (
           <AutofixMessageBox
-            displayText={'Ready to begin analyzing the issue?'}
+            displayText={
+              "If you have any extra context on the issue before we begin, you can share it below. If not, press start when you're ready."
+            }
+            headerTextOverride={'Ready to Start'}
             step={null}
-            inputPlaceholder={'Optionally provide any extra context before we start...'}
+            primaryAction
+            inputPlaceholder={'Optionally provide any extra context here...'}
             responseRequired={false}
             onSend={triggerAutofix}
             actionText={'Start'}

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

@@ -57,6 +57,8 @@ interface AutofixMessageBoxProps {
   runId: string;
   step: AutofixStep | null;
   children?: React.ReactNode;
+  headerTextOverride?: string | null;
+  primaryAction?: boolean;
 }
 
 function StepIcon({step}: {step: AutofixStep}) {
@@ -91,8 +93,10 @@ function StepIcon({step}: {step: AutofixStep}) {
 
 function AutofixMessageBox({
   displayText = '',
+  headerTextOverride = null,
   step = null,
   inputPlaceholder = 'Say something...',
+  primaryAction = false,
   responseRequired = false,
   onSend,
   actionText = 'Send',
@@ -121,7 +125,7 @@ function AutofixMessageBox({
   return (
     <Container>
       <DisplayArea>
-        {step && (
+        {step && !headerTextOverride && (
           <StepHeader>
             <StepIconContainer>
               <StepIcon step={step} />
@@ -133,6 +137,14 @@ function AutofixMessageBox({
             />
           </StepHeader>
         )}
+        {headerTextOverride && (
+          <StepHeader>
+            <StepIconContainer>
+              <IconQuestion size="sm" color="gray300" />
+            </StepIconContainer>
+            <StepTitle>{headerTextOverride}</StepTitle>
+          </StepHeader>
+        )}
         <Message
           dangerouslySetInnerHTML={{
             __html: marked(displayText),
@@ -150,7 +162,11 @@ function AutofixMessageBox({
               placeholder={inputPlaceholder}
               disabled={isDisabled}
             />
-            <Button onClick={handleSend} disabled={isDisabled}>
+            <Button
+              onClick={handleSend}
+              disabled={isDisabled}
+              priority={primaryAction ? 'primary' : 'default'}
+            >
               {actionText}
             </Button>
           </Fragment>
@@ -163,7 +179,7 @@ function AutofixMessageBox({
               placeholder={'Please answer to continue...'}
               disabled={isDisabled}
             />
-            <Button onClick={handleSend} disabled={isDisabled}>
+            <Button onClick={handleSend} disabled={isDisabled} priority={'primary'}>
               {actionText}
             </Button>
           </Fragment>

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

@@ -77,6 +77,6 @@ describe('Autofix', () => {
 
     render(<Autofix event={event} group={group} />);
 
-    expect(await screen.findByRole('button', {name: 'Run Autofix'})).toBeInTheDocument();
+    expect(await screen.findByRole('button', {name: 'Open Autofix'})).toBeInTheDocument();
   });
 });