feat(mimoquage): read-only fields + navigation through saved steps (#3252)

Co-authored-by: Gary van Woerkens <gary.van-woerkens@sg.social.gouv.fr>

Author: LucasCharrier

packages/app/src/e2e/declaration-process-panel.e2e.ts

@@ -120,7 +120,7 @@ test.describe("Declaration process panel", () => {
 			).toBeVisible();
 
 			const ctaLink = panel.getByRole("link", {
-				name: "Commencer la déclaration",
+				name: "Continuer la déclaration",
 			});
 			await expect(ctaLink).toHaveAttribute("href", /evaluation-conjointe/);
 		});
@@ -149,7 +149,7 @@ test.describe("Declaration process panel", () => {
 			).toBeVisible();
 
 			const ctaLink = panel.getByRole("link", {
-				name: "Commencer la déclaration",
+				name: "Continuer la déclaration",
 			});
 			await expect(ctaLink).toHaveAttribute("href", /avis-cse/);
 		});

packages/app/src/modules/declaration-remuneration/shared/FormActions.tsx

@@ -12,6 +12,15 @@ type FormActionsProps = {
 	isSubmitting?: boolean;
 	nextDisabled?: boolean;
 	className?: string;
+	/**
+	 * URL used by the "Suivant" button while admin impersonation is active.
+	 * - Provided (data already saved) → button is rendered as a Link so the admin
+	 *   can navigate without triggering the submit/save mutation.
+	 * - Omitted (data never saved) → button stays disabled, since navigating
+	 *   forward without any saved data would skip a step (issue #3230).
+	 * Ignored when `nextHref` is set (the button is already a Link).
+	 */
+	mimoquageNextHref?: string;
 };
 
 export function FormActions({
@@ -21,6 +30,7 @@ export function FormActions({
 	isSubmitting = false,
 	nextDisabled = false,
 	className,
+	mimoquageNextHref,
 }: FormActionsProps) {
 	const { isReadOnly, buttonProps, tooltip } = useReadOnlyGuard();
 
@@ -43,6 +53,17 @@ export function FormActions({
 				>
 					{nextLabel}
 				</Link>
+			) : isReadOnly && mimoquageNextHref ? (
+				<span>
+					<Link
+						aria-describedby={buttonProps["aria-describedby"]}
+						className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right"
+						href={mimoquageNextHref}
+					>
+						{nextLabel}
+					</Link>
+					{tooltip}
+				</span>
 			) : (
 				<span>
 					<button

packages/app/src/modules/declaration-remuneration/shared/PayGapTable.tsx

@@ -38,6 +38,7 @@ type PayGapTableProps = {
 	rows: PayGapRow[];
 	onRowChange: (index: number, field: PayGapField, value: string) => void;
 	className?: string;
+	disabled?: boolean;
 };
 
 export function PayGapTable({
@@ -46,6 +47,7 @@ export function PayGapTable({
 	rows,
 	onRowChange,
 	className,
+	disabled = false,
 }: PayGapTableProps) {
 	return (
 		<div
@@ -84,6 +86,7 @@ export function PayGapTable({
 													<input
 														aria-label={`${row.label} — Femmes`}
 														className="fr-input"
+														disabled={disabled}
 														inputMode="decimal"
 														onChange={(e) =>
 															onRowChange(i, "womenValue", e.target.value)
@@ -99,6 +102,7 @@ export function PayGapTable({
 													<input
 														aria-label={`${row.label} — Hommes`}
 														className="fr-input"
+														disabled={disabled}
 														inputMode="decimal"
 														onChange={(e) =>
 															onRowChange(i, "menValue", e.target.value)

packages/app/src/modules/declaration-remuneration/shared/__tests__/FormActions.test.tsx

@@ -52,7 +52,7 @@ describe("FormActions", () => {
 			mockedUseSession.mockReset();
 		});
 
-		it("disables the submit button and renders a tooltip when impersonating", () => {
+		function mockImpersonating() {
 			mockedUseSession.mockReturnValue({
 				data: {
 					user: {
@@ -63,6 +63,10 @@ describe("FormActions", () => {
 				},
 				status: "authenticated",
 			} as unknown as ReturnType<typeof useSession>);
+		}
+
+		it("disables the submit button and renders a tooltip when impersonating without a saved record", () => {
+			mockImpersonating();
 
 			render(<FormActions />);
 
@@ -73,6 +77,32 @@ describe("FormActions", () => {
 			expect(button).toHaveAttribute("aria-describedby", tooltip.id);
 		});
 
+		it("renders a Link instead of the submit button when impersonating with mimoquageNextHref", () => {
+			mockImpersonating();
+
+			render(
+				<FormActions mimoquageNextHref="/declaration-remuneration/etape/2" />,
+			);
+
+			expect(
+				screen.queryByRole("button", { name: /suivant/i }),
+			).not.toBeInTheDocument();
+			const link = screen.getByRole("link", { name: /suivant/i });
+			expect(link).toHaveAttribute("href", "/declaration-remuneration/etape/2");
+			const tooltip = screen.getByRole("tooltip");
+			expect(link).toHaveAttribute("aria-describedby", tooltip.id);
+		});
+
+		it("ignores mimoquageNextHref when not impersonating", () => {
+			render(
+				<FormActions mimoquageNextHref="/declaration-remuneration/etape/2" />,
+			);
+
+			const button = screen.getByRole("button", { name: /suivant/i });
+			expect(button).toHaveAttribute("type", "submit");
+			expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+		});
+
 		it("does not render the tooltip when not impersonating", () => {
 			render(<FormActions />);
 

packages/app/src/modules/declaration-remuneration/steps/CompliancePathChoice.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { Controller } from "react-hook-form";
+import { useIsImpersonating } from "~/modules/auth";
 import { saveCompliancePathSchema } from "~/modules/declaration-remuneration/schemas";
 import type { CampaignDeadlines } from "~/modules/domain";
 import { NewTabNotice } from "~/modules/layout/shared/NewTabNotice";
@@ -27,17 +28,20 @@ type Props = {
 function JointEvaluationOption({
 	checked,
 	deadline,
+	disabled,
 	onChange,
 }: {
 	checked: boolean;
 	deadline: Date;
+	disabled?: boolean;
 	onChange: () => void;
 }) {
 	return (
 		<div className="fr-fieldset__element">
 			<CompliancePathOption
 				checked={checked}
 				deadline={deadline}
+				disabled={disabled}
 				id="path-joint"
 				learnMoreHref="https://travail-emploi.gouv.fr/droit-du-travail/egalite-professionnelle"
 				learnMoreLabel="En savoir plus sur évaluation conjointe des rémunérations"
@@ -69,17 +73,20 @@ function JointEvaluationOption({
 function JustifyOption({
 	checked,
 	deadline,
+	disabled,
 	onChange,
 }: {
 	checked: boolean;
 	deadline: Date;
+	disabled?: boolean;
 	onChange: () => void;
 }) {
 	return (
 		<div className="fr-fieldset__element">
 			<CompliancePathOption
 				checked={checked}
 				deadline={deadline}
+				disabled={disabled}
 				id="path-justify"
 				name="compliance-path"
 				onChange={onChange}
@@ -100,11 +107,13 @@ function JustifyOption({
 }
 
 function SecondRoundOptions({
+	disabled,
 	justificationDeadline,
 	jointEvaluationDeadline,
 	selectedPath,
 	setSelectedPath,
 }: {
+	disabled?: boolean;
 	justificationDeadline: Date;
 	jointEvaluationDeadline: Date;
 	selectedPath: CompliancePathValue | undefined;
@@ -115,11 +124,13 @@ function SecondRoundOptions({
 			<JustifyOption
 				checked={selectedPath === "justify"}
 				deadline={justificationDeadline}
+				disabled={disabled}
 				onChange={() => setSelectedPath("justify")}
 			/>
 			<JointEvaluationOption
 				checked={selectedPath === "joint_evaluation"}
 				deadline={jointEvaluationDeadline}
+				disabled={disabled}
 				onChange={() => setSelectedPath("joint_evaluation")}
 			/>
 		</>
@@ -128,12 +139,14 @@ function SecondRoundOptions({
 
 function FirstRoundOptions({
 	correctiveActionDeadline,
+	disabled,
 	jointEvaluationDeadline,
 	justificationDeadline,
 	selectedPath,
 	setSelectedPath,
 }: {
 	correctiveActionDeadline: Date;
+	disabled?: boolean;
 	jointEvaluationDeadline: Date;
 	justificationDeadline: Date;
 	selectedPath: CompliancePathValue | undefined;
@@ -144,6 +157,7 @@ function FirstRoundOptions({
 			<JustifyOption
 				checked={selectedPath === "justify"}
 				deadline={justificationDeadline}
+				disabled={disabled}
 				onChange={() => setSelectedPath("justify")}
 			/>
 
@@ -156,6 +170,7 @@ function FirstRoundOptions({
 				<CompliancePathOption
 					checked={selectedPath === "corrective_action"}
 					deadline={correctiveActionDeadline}
+					disabled={disabled}
 					id="path-corrective"
 					learnMoreHref="https://travail-emploi.gouv.fr/droit-du-travail/egalite-professionnelle"
 					learnMoreLabel="En savoir plus sur actions correctives et seconde déclaration"
@@ -194,12 +209,23 @@ function FirstRoundOptions({
 			<JointEvaluationOption
 				checked={selectedPath === "joint_evaluation"}
 				deadline={jointEvaluationDeadline}
+				disabled={disabled}
 				onChange={() => setSelectedPath("joint_evaluation")}
 			/>
 		</>
 	);
 }
 
+function getCompliancePathHref(path: CompliancePathValue): string {
+	if (path === "corrective_action") {
+		return "/declaration-remuneration/parcours-conformite/etape/1";
+	}
+	if (path === "joint_evaluation") {
+		return "/declaration-remuneration/parcours-conformite/evaluation-conjointe";
+	}
+	return "/avis-cse";
+}
+
 export function CompliancePathChoice({
 	campaignDeadlines,
 	currentYear,
@@ -209,6 +235,7 @@ export function CompliancePathChoice({
 	pdfDownloadHref,
 }: Props) {
 	const router = useRouter();
+	const isImpersonating = useIsImpersonating();
 
 	const form = useZodForm(saveCompliancePathSchema, {
 		defaultValues: { path: initialPath },
@@ -300,6 +327,7 @@ export function CompliancePathChoice({
 
 						{isSecondRound ? (
 							<SecondRoundOptions
+								disabled={isImpersonating}
 								jointEvaluationDeadline={
 									campaignDeadlines.decl2JointEvaluationDeadline
 								}
@@ -314,6 +342,7 @@ export function CompliancePathChoice({
 								correctiveActionDeadline={
 									campaignDeadlines.decl2ModificationDeadline
 								}
+								disabled={isImpersonating}
 								jointEvaluationDeadline={
 									campaignDeadlines.decl1JointEvaluationDeadline
 								}
@@ -330,6 +359,9 @@ export function CompliancePathChoice({
 
 			<FormActions
 				isSubmitting={mutation.isPending}
+				mimoquageNextHref={
+					initialPath ? getCompliancePathHref(initialPath) : undefined
+				}
 				nextDisabled={!selectedPath}
 				nextLabel="Suivant"
 				previousHref="/declaration-remuneration/etape/6"

packages/app/src/modules/declaration-remuneration/steps/Step1Workforce.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
+import { useIsImpersonating } from "~/modules/auth";
 import { useZodForm } from "~/modules/shared/useZodForm";
 import { api } from "~/trpc/react";
 import { updateStep1Schema } from "../schemas";
@@ -30,6 +31,7 @@ export function Step1Workforce({
 	gipPrefillData,
 }: Step1WorkforceProps) {
 	const router = useRouter();
+	const isImpersonating = useIsImpersonating();
 	const isPrefilled = !!gipPrefillData;
 
 	const hasInitialData = initialData.totalWomen > 0 || initialData.totalMen > 0;
@@ -165,6 +167,7 @@ export function Step1Workforce({
 													<input
 														aria-label="Nombre de femmes"
 														className="fr-input"
+														disabled={isImpersonating}
 														inputMode="numeric"
 														onChange={handleWomenChange}
 														pattern="[0-9]*"
@@ -176,6 +179,7 @@ export function Step1Workforce({
 													<input
 														aria-label="Nombre d'hommes"
 														className="fr-input"
+														disabled={isImpersonating}
 														inputMode="numeric"
 														onChange={handleMenChange}
 														pattern="[0-9]*"
@@ -216,6 +220,9 @@ export function Step1Workforce({
 			<FormActions
 				className="fr-mt-0"
 				isSubmitting={mutation.isPending}
+				mimoquageNextHref={
+					hasInitialData ? "/declaration-remuneration/etape/2" : undefined
+				}
 				previousHref="/"
 			/>
 		</form>

packages/app/src/modules/declaration-remuneration/steps/Step2PayGap.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
+import { useIsImpersonating } from "~/modules/auth";
 import { normalizeDecimalInput } from "~/modules/domain";
 import { useZodForm } from "~/modules/shared/useZodForm";
 import { api } from "~/trpc/react";
@@ -35,6 +36,7 @@ export function Step2PayGap({
 	gipPrefillData,
 }: Step2PayGapProps) {
 	const router = useRouter();
+	const isImpersonating = useIsImpersonating();
 
 	const hasSavedData = Object.values(initialData).some((v) => v !== "");
 	const defaultValues = hasSavedData
@@ -131,6 +133,7 @@ export function Step2PayGap({
 					<PayGapTable
 						caption="Écart de rémunération"
 						columnHeader="Rémunération"
+						disabled={isImpersonating}
 						onRowChange={handleRowChange}
 						rows={rows}
 					/>
@@ -159,6 +162,9 @@ export function Step2PayGap({
 			<FormActions
 				className="fr-mt-0"
 				isSubmitting={mutation.isPending}
+				mimoquageNextHref={
+					hasSavedData ? "/declaration-remuneration/etape/3" : undefined
+				}
 				previousHref="/declaration-remuneration/etape/1"
 			/>
 		</form>