diff --git a/components/troubleshooting-flow.tsx b/components/troubleshooting-flow.tsx index 9ff1383..921da8f 100644 --- a/components/troubleshooting-flow.tsx +++ b/components/troubleshooting-flow.tsx @@ -20,13 +20,12 @@ type TroubleshootingPath = { type EvidenceFields = { projectName: string; username: string; + ticketIssuerName: string; appVersion: string; extensionVersion: string; operatingSystem: string; task: string; reproductionSteps: string; - expectedResult: string; - actualResult: string; errorText: string; screenshotNotes: string; }; @@ -35,6 +34,10 @@ type EvidenceFieldKey = keyof EvidenceFields; const COPY_RESET_MS = 2500; +const HISTORY_STEP_KEY = 'troubleshootingStep' as const; + +type TroubleshootingHistoryState = { [HISTORY_STEP_KEY]: number }; + const STEP_LABELS = [ 'Choose issue', 'Confirm symptoms', @@ -240,13 +243,17 @@ const requiredFields: { key: EvidenceFieldKey; label: string; placeholder: strin { key: 'appVersion', label: 'Codex app version', placeholder: 'e.g. 1.108.11148', multiline: false, helpHref: `${VERSION_HELP_HREF}`, helpLabel: 'How to find this (Help → About)' }, { key: 'extensionVersion', label: 'Extension version', placeholder: 'e.g. 1.8.0', multiline: false, helpHref: `${VERSION_HELP_HREF}`, helpLabel: 'How to find this (Extensions panel)' }, { key: 'operatingSystem', label: 'Operating system', placeholder: 'e.g. macOS 15, Ubuntu 24.04, Windows 11', multiline: false }, - { key: 'task', label: 'What were you trying to do?', placeholder: 'Describe the workflow or action', multiline: false }, + { key: 'task', label: 'Describe the issue', placeholder: 'What is going wrong?', multiline: false }, { key: 'reproductionSteps', label: 'Exact steps to reproduce', placeholder: 'List the steps someone else could follow', multiline: true }, - { key: 'expectedResult', label: 'Expected result', placeholder: 'What should have happened?', multiline: true }, - { key: 'actualResult', label: 'Actual result', placeholder: 'What happened instead?', multiline: true }, ]; -const optionalFields: { key: EvidenceFieldKey; label: string; placeholder: string }[] = [ +const optionalFields: { key: EvidenceFieldKey; label: string; placeholder: string; multiline?: boolean }[] = [ + { + key: 'ticketIssuerName', + label: 'Ticket issuer name', + placeholder: 'If a manager or teammate is submitting on your behalf, enter their name', + multiline: false, + }, { key: 'errorText', label: 'Error text (if any)', placeholder: 'Paste the exact error message or console output' }, { key: 'screenshotNotes', label: 'Screenshot or recording notes', placeholder: 'Mention any attachments you plan to include' }, ]; @@ -254,13 +261,12 @@ const optionalFields: { key: EvidenceFieldKey; label: string; placeholder: strin const emptyEvidence: EvidenceFields = { projectName: '', username: '', + ticketIssuerName: '', appVersion: '', extensionVersion: '', operatingSystem: '', task: '', reproductionSteps: '', - expectedResult: '', - actualResult: '', errorText: '', screenshotNotes: '', }; @@ -391,6 +397,7 @@ export function TroubleshootingFlow() { Project: ${templateValue(evidence.projectName)} Username: ${templateValue(evidence.username)} +Ticket issuer (if different from username): ${templateValue(evidence.ticketIssuerName)} Environment - Codex version: ${templateValue(evidence.appVersion)} @@ -398,9 +405,7 @@ Environment - Operating system: ${templateValue(evidence.operatingSystem)} Problem summary -- What I was trying to do: ${templateValue(evidence.task)} -- Expected result: ${templateValue(evidence.expectedResult)} -- Actual result: ${templateValue(evidence.actualResult)} +- Describe the issue: ${templateValue(evidence.task)} Reproduction steps ${templateValue(evidence.reproductionSteps)} @@ -428,25 +433,41 @@ ${docsList}`; containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, []); - const goTo = useCallback( + const advanceToStep = useCallback( (target: number) => { + if (typeof window !== 'undefined') { + window.history.pushState({ [HISTORY_STEP_KEY]: target } satisfies TroubleshootingHistoryState, '', ''); + } setStep(target); scrollToTop(); }, [scrollToTop], ); + useEffect(() => { + const onPopState = (e: PopStateEvent) => { + const s = (e.state as TroubleshootingHistoryState | null)?.[HISTORY_STEP_KEY]; + if (typeof s === 'number' && s >= 0 && s <= 5) { + setStep(s); + } else { + setStep(0); + } + }; + window.addEventListener('popstate', onPopState); + return () => window.removeEventListener('popstate', onPopState); + }, []); + const handleSelectPath = (pathId: string) => { setSelectedPathId(pathId); setCompletedChecks(new Set()); setCopyState('idle'); - goTo(1); + advanceToStep(1); }; const handleSkipToEvidence = () => { setSelectedPathId(null); setCompletedChecks(new Set()); - goTo(4); + advanceToStep(4); }; const handleToggleCheck = (index: number) => { @@ -537,8 +558,8 @@ ${docsList}`; goTo(0)} - onNext={() => goTo(2)} + onBack={() => window.history.back()} + onNext={() => advanceToStep(2)} nextLabel="Yes, continue to fixes" backLabel="Pick a different issue" /> @@ -546,7 +567,7 @@ ${docsList}`;
goTo(2)} - onNext={() => goTo(4)} + onBack={() => window.history.back()} + onNext={() => advanceToStep(4)} nextLabel="Still stuck — continue to support form" /> @@ -657,6 +678,7 @@ ${docsList}`; Fill in as much as you can. This generates the support template you will paste into Discord or a bug report.

+

* indicates required fields

{requiredFields.map((field) => ( @@ -665,7 +687,10 @@ ${docsList}`; className={`text-sm font-medium text-fd-foreground ${field.multiline ? 'md:col-span-2' : ''}`} > - {field.label} + + {field.label} + * + {field.helpHref && ( (