@griddo/ax 12.8.0 → 12.8.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.8.0",
+	"version": "12.8.2",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -44,36 +44,36 @@
 	"dependencies": {
 		"@dnd-kit/core": "6.3.1",
 		"@dnd-kit/sortable": "10.0.0",
-		"@griddo/api-types": "^1.0.12",
-		"@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
+		"@griddo/api-types": "1.1.3",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
 		"@styled-system/prop-types": "5.1.5",
 		"@styled-system/theme-get": "5.1.2",
 		"@svgr/webpack": "8.1.0",
-		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/jest-dom": "5.17.0",
 		"@testing-library/react": "13.4.0",
-		"@testing-library/user-event": "14.6.1",
+		"@testing-library/user-event": "14.6.6",
 		"@types/compress.js": "1.1.3",
-		"@types/draft-js": "0.11.18",
+		"@types/draft-js": "0.11.20",
 		"@types/lodash.isequal": "4.5.8",
 		"@types/markdown-draft-js": "2.2.7",
-		"@types/node": "20.17.10",
+		"@types/node": "20.19.43",
 		"@types/react": "18.2.79",
-		"@types/react-beautiful-dnd": "13.1.3",
+		"@types/react-beautiful-dnd": "13.1.8",
 		"@types/react-datepicker": "4.19.6",
 		"@types/react-dom": "18.2.25",
-		"@types/react-draft-wysiwyg": "1.13.8",
-		"@types/react-redux": "7.1.25",
+		"@types/react-draft-wysiwyg": "1.13.9",
+		"@types/react-redux": "7.1.34",
 		"@types/react-router-dom": "5.3.3",
 		"@types/react-slick": "0.23.13",
-		"@types/react-test-renderer": "17.0.1",
-		"@types/styled-components": "5.1.26",
+		"@types/react-test-renderer": "17.0.9",
+		"@types/styled-components": "5.1.36",
 		"@types/uuid": "8.3.4",
-		"@types/webpack-env": "1.18.0",
+		"@types/webpack-env": "1.18.8",
 		"axios": "0.19.0",
 		"babel-loader": "9.2.1",
 		"babel-plugin-named-asset-import": "0.3.8",
 		"babel-plugin-root-import": "6.6.0",
-		"babel-plugin-styled-components": "2.1.4",
+		"babel-plugin-styled-components": "2.3.0",
 		"babel-preset-react-app": "10.1.0",
 		"case-sensitive-paths-webpack-plugin": "2.4.0",
 		"compress.js": "1.2.2",
@@ -102,12 +102,12 @@
 		"mini-css-extract-plugin": "2.10.2",
 		"node-polyfill-webpack-plugin": "3.0.0",
 		"pkg-dir": "5.0.0",
-		"polished": "3.4.1",
-		"postcss": "8.5.3",
+		"polished": "3.7.2",
+		"postcss": "8.5.26",
 		"postcss-flexbugs-fixes": "5.0.2",
 		"postcss-loader": "7.3.4",
 		"postcss-normalize": "7.0.1",
-		"postcss-preset-env": "6.7.0",
+		"postcss-preset-env": "6.7.2",
 		"react": "18.2.0",
 		"react-app-polyfill": "1.0.6",
 		"react-datepicker": "4.25.0",
@@ -115,13 +115,13 @@
 		"react-dom": "18.2.0",
 		"react-draft-wysiwyg": "1.15.0",
 		"react-easy-crop": "5.5.7",
-		"react-error-boundary": "4.0.13",
+		"react-error-boundary": "4.1.2",
 		"react-froala-wysiwyg": "4.0.4",
-		"react-qr-code": "2.0.18",
+		"react-qr-code": "2.2.0",
 		"react-redux": "7.2.9",
 		"react-refresh": "0.14.2",
-		"react-router-dom": "5.1.2",
-		"react-select": "5.10.1",
+		"react-router-dom": "5.3.4",
+		"react-select": "5.10.2",
 		"react-slick": "0.30.3",
 		"react-textarea-autosize": "8.5.9",
 		"react-timezone-map-select": "1.2.25",
@@ -129,11 +129,11 @@
 		"redux-devtools-extension": "2.13.9",
 		"redux-persist": "6.0.0",
 		"reflect-metadata": "0.1.13",
-		"resolve": "1.22.10",
+		"resolve": "1.22.12",
 		"resolve-url-loader": "4.0.0",
 		"sass-alias": "1.0.5",
 		"sass-loader": "16.0.8",
-		"semver": "7.6.3",
+		"semver": "7.8.5",
 		"slick-carousel": "1.8.1",
 		"source-map-loader": "1.1.3",
 		"string-replace-loader": "3.1.0",
@@ -149,18 +149,18 @@
 		"webpack-manifest-plugin": "5.0.1"
 	},
 	"devDependencies": {
-		"@babel/core": "7.26.10",
+		"@babel/core": "7.29.7",
 		"@babel/helper-environment-visitor": "7.24.7",
 		"@babel/helper-function-name": "7.24.7",
 		"@babel/helper-hoist-variables": "7.24.7",
 		"@babel/helper-split-export-declaration": "7.24.7",
-		"@babel/plugin-transform-optional-chaining": "7.25.9",
-		"@babel/preset-env": "7.26.9",
-		"@babel/preset-react": "7.26.3",
-		"@babel/preset-typescript": "7.26.0",
+		"@babel/plugin-transform-optional-chaining": "7.29.7",
+		"@babel/preset-env": "7.29.7",
+		"@babel/preset-react": "7.29.7",
+		"@babel/preset-typescript": "7.29.7",
 		"@biomejs/biome": "2.3.8",
-		"@types/redux-mock-store": "1.0.3",
-		"@vitest/coverage-v8": "4.1.6",
+		"@types/redux-mock-store": "1.5.0",
+		"@vitest/coverage-v8": "4.1.10",
 		"axios-mock-adapter": "1.22.0",
 		"prettier": "3.4.2",
 		"react-test-renderer": "18.2.0",
@@ -201,5 +201,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c9c202ecd4e133b8a599e0439cff1aaf93e30bc1"
+	"gitHead": "00a702fad2cd346b673d8454d818d9e0e9d470f3"
 }

package/src/__tests__/modules/GlobalSettings/Robots/Robots.uc.test.tsx

@@ -0,0 +1,401 @@
+import { Router } from "react-router-dom";
+
+import { appReducer, type IAppState } from "@ax/containers/App/reducer";
+import { SET_DOMAINS_ROBOTS } from "@ax/containers/Domains/constants";
+import { domainsReducer, type IDomainsState } from "@ax/containers/Domains/reducer";
+import { parseTheme } from "@ax/helpers";
+import Robots from "@ax/modules/GlobalSettings/Robots";
+import history from "@ax/routes/history";
+import globalTheme from "@ax/themes/theme.json";
+import type { IDomainRobot } from "@ax/types";
+
+import axios from "axios";
+import { applyMiddleware, combineReducers, createStore, type Reducer } from "redux";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+import type { MockedFunction } from "vitest";
+
+import { act, cleanup, fireEvent, render, screen, within } from "../../../../../config/tests/test-utils";
+
+/**
+ * End-to-end test of the use case slice: API → action → reducer → selector → UI,
+ * with only axios mocked. Named `.uc.` and not `.flow.` because "flow" is taken in
+ * GAINUP: an `F-<slug>` is a multi-package spec that links UCs and has no tests of
+ * its own.
+ *
+ * The house pattern for these screens (e.g. Social.test.tsx) mounts them on a
+ * `redux-mock-store`, which accepts dispatches without reducing them — so it can
+ * only assert on the requests that leave. Here the store is the real one, so what
+ * the screen renders IS the result of the reducer running on the server's
+ * response, which is what the acceptance criteria actually claim.
+ *
+ * Only the reducers this screen reads are mounted, not the whole root reducer:
+ * the rest would only add setup noise to a test that is about `domains` + `app`.
+ */
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
+
+const mockComponent = () => null;
+const navItems = [{ title: "Robots.txt", path: "/settings/robots", component: mockComponent }];
+
+const EMPTY: IDomainRobot = {
+	id: 1,
+	path: "/",
+	fullUrl: "https://www.example.edu/",
+	content: "",
+	computedContent: "",
+};
+
+/**
+ * `structuredClone` is load-bearing: the screen still edits by mutating in place
+ * (`handleSetItem` writes `newItems[i].content` into the very objects the store holds —
+ * the live-mutation debt of RTK-MIGRATION.md §2.1, one more site for its list). Handing
+ * the same `EMPTY` module constant to two tests couples them through that mutation, and
+ * the suite runs shuffled (`sequence.shuffle`), so the coupling surfaces as seed-dependent
+ * failures in whichever test draws `EMPTY` after an editing test ran.
+ */
+const ok = (data: unknown) => ({
+	status: 200,
+	data: structuredClone(data),
+	statusText: "OK",
+	headers: {},
+	config: {} as never,
+});
+
+// The casts are the redux-4 spelling of the cast GlobalStore needs too (RTK-MIGRATION.md
+// §8.3): each legacy reducer types its `state` parameter by the literal inferred from its
+// own `initialState`, which is narrower than the interface it returns, so an unannotated
+// `combineReducers` collapses the store type and `getState()` becomes unusable.
+const makeStore = () =>
+	createStore(
+		combineReducers({
+			app: appReducer as Reducer<IAppState>,
+			domains: domainsReducer as Reducer<IDomainsState>,
+		}),
+		applyMiddleware(thunk),
+	);
+
+const renderScreen = async (store: ReturnType<typeof makeStore>) => {
+	await act(async () => {
+		render(
+			<Router history={history}>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<Robots navItems={navItems} currentNavItem={navItems[0]} />
+				</ThemeProvider>
+			</Router>,
+			{ store },
+		);
+	});
+};
+
+/**
+ * Two pieces of state outlive a test here, and the file's tests run shuffled
+ * (`sequence.shuffle.tests`), so leaving either behind makes failures move around between
+ * runs — which is exactly what happened while writing these:
+ *
+ *   - **`history` is a module singleton.** A test that navigates away leaves the next one
+ *     starting somewhere else, and one that gets *blocked* by the guard leaves a pending
+ *     transition behind.
+ *   - **the axios mock is a queue.** `mockResolvedValueOnce` chains are positional, so a
+ *     response left unconsumed by one test is handed to the next one's first request.
+ */
+beforeEach(() => {
+	history.replace("/settings/robots");
+	mockedAxios.mockReset();
+});
+
+afterEach(() => {
+	// Only the dirty-tracking tests fake the clock; this is a no-op for the others.
+	vi.useRealTimers();
+	vi.restoreAllMocks();
+	cleanup();
+});
+
+describe("[UC-AX-configure-seo-analytics] robots.txt end to end", () => {
+	it("AC1 · what the server returns after saving is what the screen shows", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+
+		// Mount: the domain has no robots.txt yet, so the row offers to add one.
+		mockedAxios.mockResolvedValueOnce(ok([EMPTY]));
+		await renderScreen(store);
+
+		expect(screen.getByText("Add robots.txt")).toBeTruthy();
+
+		// An edit is now a precondition for saving at all: since sc-118157 the button is
+		// disabled while the screen is clean, so this test used to click a Save it should never
+		// have been offered.
+		await editContent("Add robots.txt", "typed by the user");
+
+		// Saving: PUT, then the reload the thunk chains. The server deliberately answers with
+		// something DIFFERENT from what was typed — that is what makes the last assertion prove
+		// the reducer ran on the reloaded response rather than on the local edit, which is the
+		// assertion a mock store cannot make.
+		const fromServer = { ...EMPTY, content: "User-agent: *", computedContent: "User-agent: *" };
+		mockedAxios.mockResolvedValueOnce(ok({})).mockResolvedValueOnce(ok([fromServer]));
+		await act(async () => {
+			fireEvent.click(screen.getByText("Save"));
+		});
+
+		expect(screen.getByText("Edit robots.txt")).toBeTruthy();
+		expect(screen.queryByText("Add robots.txt")).toBeNull();
+		expect(store.getState().domains.robots).toEqual([fromServer]);
+	});
+
+	/**
+	 * The dirty tracking of this screen (sc-118183). Two things make it awkward to assert on,
+	 * and both are why it had no test:
+	 *
+	 *   1. **`isDirty` is invisible here.** Unlike Social or the global Analytics, this Save
+	 *      button is `disabled={isSaving}` and never looks at `isDirty`, so the button cannot
+	 *      tell you anything. The only window onto it is the `RouteLeavingGuard`, so these
+	 *      navigate and look for its modal.
+	 *   2. **Asserting "clean after saving" does not discriminate.** It passes just as well
+	 *      with a stale comparison reference as with a correct one. What separates them is
+	 *      **reverting**: going back to the value the field had *before* the edit may only read
+	 *      clean if the reference is still the pre-edit content, i.e. if it never moved.
+	 *
+	 * So the second test is the one that matters, and under the bug the two are inverted:
+	 * saving read dirty and reverting read clean, which is exactly backwards.
+	 */
+	/**
+	 * `TextArea` debounces its `onChange` by 300 ms (`components/Fields/TextArea/index.tsx:13-20`),
+	 * so without driving the clock the typed value never reaches `robotItems` and every
+	 * assertion below would be about a screen that was never edited. This is the trap that
+	 * made the first draft of these tests pass for the wrong reason — same one wave 1 hit on
+	 * Social (docs/RTK-MIGRATION.md §7).
+	 */
+	const DEBOUNCE_MS = 300;
+
+	const typeInto = async (text: string) => {
+		fireEvent.change(screen.getByTestId("text-area-component"), { target: { value: text } });
+		await act(async () => {
+			vi.advanceTimersByTime(DEBOUNCE_MS);
+		});
+	};
+
+	const openRow = async (label: "Add robots.txt" | "Edit robots.txt") => {
+		await act(async () => {
+			fireEvent.click(screen.getByText(label));
+		});
+	};
+
+	const editContent = async (label: "Add robots.txt" | "Edit robots.txt", text: string) => {
+		await openRow(label);
+		await typeInto(text);
+		await applyPanel();
+	};
+
+	/**
+	 * Clicks the panel's footer button, which is what hands the typed value up to the screen.
+	 *
+	 * Scoped **inside the panel**, and that is the whole point: the button's label lives in a
+	 * `<span>` (so `{ selector: "button" }` finds nothing), the panel *title* repeats those
+	 * same words, and `className="button"` is shared with `MainWrapper`'s Save — which sits
+	 * earlier in the DOM, so a bare `querySelector("button.button")` silently clicked **Save**
+	 * and the edit never reached the screen at all.
+	 */
+	const applyPanel = async () => {
+		const apply = within(screen.getByTestId("floating-panel")).getByRole("button", { name: /Robots\.txt$/ });
+		await act(async () => {
+			fireEvent.click(apply);
+		});
+	};
+
+	const navigateAway = async () => {
+		await act(async () => {
+			history.push("/settings/analytics");
+		});
+	};
+
+	/** The guard's modal, which `RouteLeavingGuard` only opens when `when={isDirty}` blocks. */
+	const guardIsShowing = () => screen.queryByText("Unsaved changes") !== null;
+
+	it("AC6 · a successful save leaves the screen clean, so leaving does not warn", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+		mockedAxios.mockResolvedValueOnce(ok([EMPTY]));
+		await renderScreen(store);
+
+		await editContent("Add robots.txt", "User-agent: *");
+		// Dirty now, and the guard proves it — without this the next assertion could pass
+		// simply because the guard never works in this harness.
+		await navigateAway();
+		expect(guardIsShowing()).toBe(true);
+		await act(async () => {
+			fireEvent.click(screen.getByText("Cancel"));
+		});
+
+		// PUT, then the reload the thunk chains. The server echoes the saved content back,
+		// and `computedContent` comes back filled — the reload exists for exactly that.
+		const saved = { ...EMPTY, content: "User-agent: *", computedContent: "User-agent: *" };
+		mockedAxios.mockResolvedValueOnce(ok({})).mockResolvedValueOnce(ok([saved]));
+		await act(async () => {
+			fireEvent.click(screen.getByText("Save"));
+		});
+
+		await navigateAway();
+		expect(guardIsShowing()).toBe(false);
+	});
+
+	it("AC6 · after saving, the reference is what was saved: reverting reads dirty again", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+		mockedAxios.mockResolvedValueOnce(ok([{ ...EMPTY, content: "Allow: /" }]));
+		await renderScreen(store);
+
+		await editContent("Edit robots.txt", "Disallow: /");
+
+		// `computedContent` deliberately comes back UNCHANGED here. It is what makes this test
+		// discriminate: if the reload also moved that field, the reverted state would differ
+		// from the stale reference on `computedContent` alone, so the assertion below would go
+		// green with a broken reference too. Holding it still leaves `content` as the only
+		// difference, which is exactly the thing under test.
+		const saved = { ...EMPTY, content: "Disallow: /" };
+		mockedAxios.mockResolvedValueOnce(ok({})).mockResolvedValueOnce(ok([saved]));
+		await act(async () => {
+			fireEvent.click(screen.getByText("Save"));
+		});
+
+		// Back to what the field held BEFORE the edit. That is a change with respect to what
+		// was just saved, so it has to read dirty. If the reference never moved off the
+		// pre-edit content, this reads clean and the user loses the change on navigating.
+		await editContent("Edit robots.txt", "Allow: /");
+
+		await navigateAway();
+		expect(guardIsShowing()).toBe(true);
+	});
+
+	/**
+	 * The other half of sc-118183, and the one nothing covered: the screen used to arm a
+	 * skip-a-turn token in its mount effect, betting that a hydration would arrive to burn it.
+	 * When the load fails none does — silently, since a network failure never reaches the error
+	 * channel (docs/RTK-MIGRATION.md §4.10) — so the token stayed armed and swallowed the
+	 * user's first edit: they type, the screen says nothing changed, and the leaving guard lets
+	 * them walk away from it.
+	 *
+	 * Reachable because the store survives SPA navigation: coming back to a screen that loaded
+	 * fine earlier renders its rows from the store while the fresh GET is still in flight, so
+	 * there is something to edit even when that GET fails.
+	 */
+	it("AC6 · an edit still registers when the reload behind it failed", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+		// The state a previous visit left behind, so the rows are on screen…
+		store.dispatch({ type: SET_DOMAINS_ROBOTS, payload: { robots: [{ ...EMPTY, content: "Allow: /" }] } });
+		// …and this visit's GET fails, so nothing re-hydrates.
+		mockedAxios.mockResolvedValueOnce({ status: 500, data: {}, statusText: "err", headers: {}, config: {} as never });
+		await renderScreen(store);
+
+		await editContent("Edit robots.txt", "Disallow: /");
+
+		await navigateAway();
+		expect(guardIsShowing()).toBe(true);
+	});
+
+	// The other side of the contract, and the one that would break if the reset were moved back
+	// onto the save path without checking the result: a save that fails must leave the edit
+	// pending, or the user walks away believing it went through.
+	it("AC8 · a failed save keeps the screen dirty", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+		mockedAxios.mockResolvedValueOnce(ok([{ ...EMPTY, content: "Allow: /" }]));
+		await renderScreen(store);
+
+		await editContent("Edit robots.txt", "Disallow: /");
+
+		// The PUT fails, so the thunk never chains its reload.
+		mockedAxios.mockResolvedValueOnce({ status: 400, data: {}, statusText: "e", headers: {}, config: {} as never });
+		await act(async () => {
+			fireEvent.click(screen.getByText("Save"));
+		});
+
+		await navigateAway();
+		expect(guardIsShowing()).toBe(true);
+	});
+
+	/**
+	 * The Save button as a dirty indicator (sc-118157). Until now this screen's button was
+	 * `disabled={isSaving}` and always read "Save", so it said nothing about whether there was
+	 * anything to save — while its sibling settings screens (`Settings/Social/index.tsx:103-104`
+	 * and `Analytics/index.tsx:48-49`, identical to each other) show "Saved" disabled when clean.
+	 *
+	 * These tests only became writable once the bounce of sc-118183 was fixed: with that bug in
+	 * place the screen went dirty again right after saving, so the button would have flipped
+	 * back to an enabled "Save" and the third assertion below could not pass. That is why this
+	 * branch is stacked on `bugfix/ax-118183` rather than cut from main.
+	 */
+	const saveButton = () => screen.getByTestId("main-wrapper").querySelector("button") as HTMLButtonElement;
+
+	it("AC6 · the button reads Saved and is disabled on a screen with nothing to save", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+		mockedAxios.mockResolvedValueOnce(ok([{ ...EMPTY, content: "Allow: /" }]));
+		await renderScreen(store);
+
+		expect(saveButton().textContent).toBe("Saved");
+		expect(saveButton().disabled).toBe(true);
+	});
+
+	it("AC6 · editing turns it into an enabled Save, and saving turns it back", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+		mockedAxios.mockResolvedValueOnce(ok([{ ...EMPTY, content: "Allow: /" }]));
+		await renderScreen(store);
+
+		await editContent("Edit robots.txt", "Disallow: /");
+		expect(saveButton().textContent).toBe("Save");
+		expect(saveButton().disabled).toBe(false);
+
+		mockedAxios.mockResolvedValueOnce(ok({})).mockResolvedValueOnce(ok([{ ...EMPTY, content: "Disallow: /" }]));
+		await act(async () => {
+			fireEvent.click(saveButton());
+		});
+
+		// Back to clean, which is the assertion that needs sc-118183's fix underneath: with the
+		// bounce still there the screen re-dirtied itself and this read "Save".
+		expect(saveButton().textContent).toBe("Saved");
+		expect(saveButton().disabled).toBe(true);
+	});
+
+	it("AC8 · a failed save leaves the button offering to save again", async () => {
+		vi.useFakeTimers();
+		const store = makeStore();
+		mockedAxios.mockResolvedValueOnce(ok([{ ...EMPTY, content: "Allow: /" }]));
+		await renderScreen(store);
+
+		await editContent("Edit robots.txt", "Disallow: /");
+		mockedAxios.mockResolvedValueOnce({ status: 400, data: {}, statusText: "e", headers: {}, config: {} as never });
+		await act(async () => {
+			fireEvent.click(saveButton());
+		});
+
+		// The edit is still pending, so the button must not claim it is saved.
+		expect(saveButton().textContent).toBe("Save");
+		expect(saveButton().disabled).toBe(false);
+	});
+
+	it("AC7 · the screen shows the loading state while the load is in flight", async () => {
+		const store = makeStore();
+		// Held open on purpose: the loading state only exists while the request is in
+		// flight, so the test needs to look at the screen before letting it resolve.
+		let releaseLoad: (value: unknown) => void = () => undefined;
+		const pending = new Promise((resolve) => {
+			releaseLoad = resolve;
+		});
+		mockedAxios.mockReturnValueOnce(pending as never);
+
+		await renderScreen(store);
+
+		// setIsLoading(true) has gone through the real `app` reducer by now.
+		expect(store.getState().app.isLoading).toBe(true);
+		expect(screen.queryByText("Add robots.txt")).toBeNull();
+
+		await act(async () => {
+			releaseLoad(ok([EMPTY]));
+		});
+
+		expect(store.getState().app.isLoading).toBe(false);
+		expect(screen.getByText("Add robots.txt")).toBeTruthy();
+	});
+});

package/src/modules/GlobalSettings/Robots/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import { ErrorToast, Loading, MainWrapper, Nav } from "@ax/components";
@@ -25,28 +25,68 @@ const Robots = (props: IProps): JSX.Element => {
 	} = props;
 
 	const [robotItems, setRobotItems] = useState(robots);
-	const { isDirty, setIsDirty, resetDirty } = useIsDirty(robotItems);
+	const { isDirty, resetDirty } = useIsDirty(robotItems);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		getDomainsRobots();
-		resetDirty();
 	}, []);
 
+	/**
+	 * Hydration, and the ONLY place this screen resets its dirty state (sc-118183).
+	 *
+	 * Whatever the server last sent is by definition the saved state, and `state.domains.robots`
+	 * only ever moves for that reason — the mount load and the reload the save chains
+	 * (`containers/Domains/actions.tsx:38`). So resetting here covers both, and covers them with
+	 * the right reference.
+	 *
+	 * Doing it on the save path instead does NOT work, and that is worth spelling out because a
+	 * one-line `resetDirty()` in `handleSave` looks like it should: the reload exists precisely
+	 * to bring back a `computedContent` the client could not compute, so what the server returns
+	 * is **not** what was on screen when the save resolved. Adopting the on-screen version left
+	 * the reference disagreeing with the reloaded content by that field, and the screen bounced
+	 * back to dirty anyway.
+	 *
+	 * The skip-a-turn token (the argument) is load-bearing, and measured to be: the deciding
+	 * effect inside `useIsDirty` compares against the reference **as read during render**, not
+	 * against the ref this call just moved, so there is a render of lag
+	 * (docs/RTK-MIGRATION.md §4.2). Without the token, the commit that brings the new values
+	 * reads them as an edit whatever the reference says. It is safe to arm here — unlike at
+	 * mount — because a hydration really is arriving to consume it.
+	 *
+	 * No `force`: it was in the first version of this fix and the tests say it changes nothing,
+	 * because an edit sets `isSaved` back to false and this call flipping it to true is already
+	 * enough to move the reference. Left out rather than kept "just in case".
+	 *
+	 * And the reset does NOT run on mount, which is the other half of the fix. The old code
+	 * armed a token in the mount effect on the assumption that a hydration would come to burn
+	 * it; if the initial GET fails, none does — and that failure is silent (§4.10) — so the token
+	 * sat there and ate the user's first edit. At mount there is nothing to hydrate anyway: the
+	 * form is initialised from the store, so the two already agree.
+	 */
+	const hasHydrated = useRef(false);
 	useEffect(() => {
 		setRobotItems(robots);
-	}, [robots]);
-
+		if (hasHydrated.current) resetDirty();
+		hasHydrated.current = true;
+	}, [robots, resetDirty]);
+
+	// Deliberately does not touch the dirty state: the save reloads, and the hydration effect
+	// above owns it. What used to be here — `if (isSaved) setIsDirty(false)` — was the bug: the
+	// raw setter lowers the flag without ever moving the comparison reference (sc-118183). A
+	// failed save reloads nothing, so the form correctly stays dirty and the guard still warns.
 	const handleSave = async () => {
-		const isSaved = await updateDomainRobots(robotItems);
-		if (isSaved) {
-			setIsDirty(false);
-		}
+		await updateDomainRobots(robotItems);
 	};
 
+	// Governed by `isDirty`, like every sibling settings screen — `Settings/Social/index.tsx:103`
+	// and `Analytics/index.tsx:48` are identical to this (sc-118157). The screen already knew
+	// whether it was dirty and fed that same flag to the `RouteLeavingGuard` below; the button
+	// simply never read it, so the guard warned about unsaved changes while the button claimed
+	// nothing was pending — and a click launched a save of nothing.
 	const rightButtonProps = {
-		label: isSaving ? "Saving" : "Save",
-		disabled: isSaving,
+		label: isSaving ? "Saving" : isDirty ? "Save" : "Saved",
+		disabled: isSaving || !isDirty,
 		action: () => handleSave(),
 	};