ref(autofix): Rename additional context to instruction on frontend (#67074)

Renames additional context to instructions, which fits more into how
this free form text box is used for Autofix.

<img width="1162" alt="Screenshot 2024-03-15 at 12 30 03 PM"
src="https://github.com/getsentry/sentry/assets/30991498/6ffbc879-c587-4c66-8b6b-97d445c3d335">

<img width="638" alt="Screenshot 2024-03-15 at 12 30 11 PM"
src="https://github.com/getsentry/sentry/assets/30991498/2ef63501-81a8-455c-8682-68b1e4bb71ce">

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

@@ -40,7 +40,7 @@ describe('AutofixBanner', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('can run without context', async () => {
+  it('can run without instructions', async () => {
     const mockTriggerAutofix = jest.fn();
 
     render(<AutofixBanner triggerAutofix={mockTriggerAutofix} />);
@@ -50,16 +50,16 @@ describe('AutofixBanner', () => {
     expect(mockTriggerAutofix).toHaveBeenCalledWith('');
   });
 
-  it('can provide additional context', async () => {
+  it('can provide instructions', async () => {
     const mockTriggerAutofix = jest.fn();
 
     render(<AutofixBanner triggerAutofix={mockTriggerAutofix} />);
     renderGlobalModal();
 
-    await userEvent.click(screen.getByRole('button', {name: 'Start With Some Context'}));
-    await userEvent.type(screen.getByRole('textbox'), 'more context');
+    await userEvent.click(screen.getByRole('button', {name: 'Give Instructions'}));
+    await userEvent.type(screen.getByRole('textbox'), 'instruction!');
     await userEvent.click(screen.getByRole('button', {name: "Let's go!"}));
 
-    expect(mockTriggerAutofix).toHaveBeenCalledWith('more context');
+    expect(mockTriggerAutofix).toHaveBeenCalledWith('instruction!');
   });
 });

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

@@ -7,7 +7,7 @@ import bannerStars from 'sentry-images/spot/ai-suggestion-banner-stars.svg';
 
 import {openModal} from 'sentry/actionCreators/modal';
 import {Button} from 'sentry/components/button';
-import {AutofixContextModal} from 'sentry/components/events/autofix/autofixContextModal';
+import {AutofixInstructionsModal} from 'sentry/components/events/autofix/autofixInstructionsModal';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import {t} from 'sentry/locale';
@@ -20,8 +20,10 @@ type Props = {
 
 export function AutofixBanner({triggerAutofix}: Props) {
   const isSentryEmployee = useIsSentryEmployee();
-  const onClickAdditionalContext = () => {
-    openModal(deps => <AutofixContextModal {...deps} triggerAutofix={triggerAutofix} />);
+  const onClickGiveInstructions = () => {
+    openModal(deps => (
+      <AutofixInstructionsModal {...deps} triggerAutofix={triggerAutofix} />
+    ));
   };
 
   return (
@@ -40,8 +42,8 @@ export function AutofixBanner({triggerAutofix}: Props) {
           <Button onClick={() => triggerAutofix('')} size="sm">
             {t('Gimme Fix')}
           </Button>
-          <Button onClick={onClickAdditionalContext} size="sm">
-            {t('Start With Some Context')}
+          <Button onClick={onClickGiveInstructions} size="sm">
+            {t('Give Instructions')}
           </Button>
         </ContextArea>
         {isSentryEmployee && (

static/app/components/events/autofix/autofixContextModal.tsx → static/app/components/events/autofix/autofixInstructionsModal.tsx

@@ -12,7 +12,7 @@ interface AutofixContextModalProps extends ModalRenderProps {
   triggerAutofix: (value: string) => void;
 }
 
-export function AutofixContextModal({
+export function AutofixInstructionsModal({
   Header,
   Footer,
   closeModal,
@@ -22,26 +22,24 @@ export function AutofixContextModal({
     <Form
       hideFooter
       onSubmit={data => {
-        triggerAutofix(data.additionalContext ?? '');
+        triggerAutofix(data.instruction ?? '');
         closeModal();
       }}
     >
       <Header>
-        <h4>{t('Give the Autofix Agent More Context')}</h4>
+        <h4>{t('Give the Autofix Agent Some Instructions')}</h4>
       </Header>
 
       <div>
-        <FullSizeFieldGroup
-          name="additionalContext"
-          inline={false}
-          flexibleControlStateSize
-        >
+        <FullSizeFieldGroup name="instruction" inline={false} flexibleControlStateSize>
           {({id, name, onChange, onBlur, disabled, value}) => (
             <FullSizeTextAreaField
               id={id}
               name={name}
-              aria-label={t('Provide additional context')}
-              placeholder={t('Include any text content that might be relevant…')}
+              aria-label={t('Provide instructions')}
+              placeholder={t(
+                'This error seems to be caused by ... go look at path/file to make sure it does …'
+              )}
               onChange={e => onChange((e.target as HTMLTextAreaElement).value, e)}
               disabled={disabled}
               value={value}

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

@@ -39,7 +39,7 @@ export const useAiAutofix = (group: GroupWithAutofix, event: Event) => {
   }, [apiData?.autofix, overwriteData]);
 
   const triggerAutofix = useCallback(
-    async (additionalContext: string) => {
+    async (instruction: string) => {
       setOverwriteData({
         status: 'PROCESSING',
         steps: [
@@ -59,7 +59,7 @@ export const useAiAutofix = (group: GroupWithAutofix, event: Event) => {
           method: 'POST',
           data: {
             event_id: event.id,
-            additional_context: additionalContext,
+            instruction,
           },
         });
       } catch (e) {