npm - @griddo/ax - Versions diffs - 12.7.1 → 12.8.1 - Mend

@griddo/ax 12.7.1 → 12.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/package.json +2 -2
package/src/GlobalStore.tsx +3 -1
package/src/__tests__/components/ConfigPanel/GlobalPageForm/GlobalPageForm.test.tsx +7 -3
package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.style.test.tsx +44 -0
package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.test.tsx +109 -0
package/src/__tests__/components/Nav/Nav.test.tsx +75 -2
package/src/__tests__/components/ResizePanel/ResizePanel.test.tsx +50 -21
package/src/__tests__/components/Toast/Toast.test.tsx +37 -1
package/src/__tests__/hooks/broadcast.test.tsx +263 -0
package/src/__tests__/modules/GlobalSettings/Robots/Robots.uc.test.tsx +401 -0
package/src/api/utils.tsx +7 -6
package/src/components/Browser/index.tsx +10 -2
package/src/components/ConfigPanel/GlobalPageForm/index.tsx +3 -4
package/src/components/Fields/Wysiwyg/atoms.tsx +1 -1
package/src/components/Fields/Wysiwyg/index.tsx +28 -0
package/src/components/Fields/Wysiwyg/style.tsx +41 -1
package/src/components/MainWrapper/index.tsx +14 -2
package/src/components/Nav/index.tsx +21 -6
package/src/components/ResizePanel/index.tsx +8 -3
package/src/components/Toast/index.tsx +4 -1
package/src/containers/ActivityLog/actions.tsx +4 -7
package/src/containers/PageEditor/actions.tsx +14 -3
package/src/helpers/containerEvaluations.tsx +8 -0
package/src/hooks/broadcast.ts +160 -0
package/src/hooks/index.tsx +5 -0
package/src/modules/ActivityLog/index.tsx +1 -0
package/src/modules/Analytics/index.tsx +1 -1
package/src/modules/App/index.tsx +21 -6
package/src/modules/Content/PageItem/index.tsx +36 -19
package/src/modules/Content/index.tsx +5 -7
package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/index.tsx +5 -14
package/src/modules/FileDrive/index.tsx +1 -1
package/src/modules/Forms/FormUseModal/index.tsx +3 -8
package/src/modules/GlobalEditor/atoms.tsx +35 -1
package/src/modules/GlobalEditor/index.tsx +169 -51
package/src/modules/GlobalSettings/Robots/index.tsx +52 -12
package/src/modules/MediaGallery/ImageModal/DetailPanel/UsageContent/index.tsx +6 -15
package/src/modules/MediaGallery/index.tsx +1 -1
package/src/modules/PageEditor/atoms.tsx +35 -1
package/src/modules/PageEditor/index.tsx +168 -48
package/src/modules/Redirects/index.tsx +1 -0
package/src/modules/Settings/Languages/index.tsx +1 -1
package/src/modules/Settings/SeoAnalyticsSettings/Analytics/index.tsx +1 -0
package/src/modules/Settings/Social/index.tsx +1 -1
package/src/modules/StructuredData/Form/index.tsx +108 -10
package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx +31 -11
package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx +17 -3
package/src/modules/StructuredData/StructuredDataList/index.tsx +6 -4
package/src/modules/StructuredData/atoms.tsx +35 -1
package/src/routes/multisite.tsx +34 -18
package/src/routes/site.tsx +40 -21
package/src/storeRegistry.ts +5 -0
package/src/modules/StructuredData/index.tsx +0 -18

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.7.1",
+	"version": "12.8.1",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -201,5 +201,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1cb1a5a34c3445d33631135712a85e8dd80fa2be"
+	"gitHead": "f035f7339bf7550addec2f02e9c9257cd3de5ccc"
 }

package/src/GlobalStore.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
 import { createStore, type Reducer, combineReducers, applyMiddleware, type Action, type StoreEnhancer } from "redux";
+import { connectRouter, routerMiddleware } from "connected-react-router";
 import { persistReducer, persistStore, type PersistConfig, type Persistor } from "redux-persist";
 import storage from "redux-persist/lib/storage"; // defaults to localStorage for web
-import { connectRouter, routerMiddleware } from "connected-react-router";
+import { setStore } from "./storeRegistry";
 import { composeWithDevTools } from "redux-devtools-extension";
 import thunk from "redux-thunk";
@@ -94,6 +95,7 @@ export class GlobalStore {
 			middleware = composeWithDevTools(middleware);
 		}
 		const store = createStore(persistReducer(this.persistConfig, rootReducer), middleware);
+		setStore(store);
 		const persistor: Persistor = persistStore(store);
 		return { store, persistor };
 	}

package/src/__tests__/components/ConfigPanel/GlobalPageForm/GlobalPageForm.test.tsx CHANGED Viewed

@@ -9,13 +9,13 @@ import GlobalPageForm, { type IGlobalPageFormProps } from "@ax/components/Config
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import thunk from "redux-thunk";
 vi.mock("@ax/hooks", async () => ({
 	...(await vi.importActual("@ax/hooks")),
 	useGlobalPermission: vi.fn(() => true),
 }));
+import thunk from "redux-thunk";
 beforeEach(() => {
 	cleanup();
 });
@@ -173,10 +173,12 @@ describe("GlobalPageForm component rendering", () => {
 describe("GlobalPageForm component rendering", () => {
 	it("should trigger handleClick", async () => {
 		defaultProps.selectedTab = "content";
-		const getGlobalFromLocalPageActionMock = vi.fn(() => Promise.resolve());
+		const getGlobalFromLocalPageActionMock = vi.fn(() => Promise.resolve(42));
 		const saveCurrentSiteInfoActionMock = vi.fn();
+		const setHistoryPushMock = vi.fn();
 		defaultProps.actions.saveCurrentSiteInfoAction = saveCurrentSiteInfoActionMock;
 		defaultProps.actions.getGlobalFromLocalPageAction = getGlobalFromLocalPageActionMock;
+		defaultProps.setHistoryPush = setHistoryPushMock;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
@@ -194,6 +196,8 @@ describe("GlobalPageForm component rendering", () => {
 			expect(getGlobalFromLocalPageActionMock).toBeCalled();
 			expect(saveCurrentSiteInfoActionMock).toBeCalled();
 		});
+		// sc-111850: navigates to the page the action returns, not to the shared editor path
+		expect(setHistoryPushMock).toHaveBeenCalledWith("/data/pages/editor/42", true);
 	});
 	it("should trigger handleRestoreHeader", () => {

package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.style.test.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { FULLSCREEN_LAYER } from "@ax/components/Fields/Wysiwyg/style";
+import { Wrapper as FloatingPanelWrapper } from "@ax/components/FloatingPanel/style";
+import { ModalOverlay } from "@ax/components/Modal/style";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import { render } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+// Froala's fullscreen buries everything the field portals into <body>, so the
+// field re-stacks that layer by hand (FullscreenGlobalStyle). Those numbers only
+// hold as long as the components it stacks against keep their own, and nothing
+// else would catch that drift: the rule lives in a createGlobalStyle, which
+// injects nothing under vitest, and jsdom models no stacking contexts either.
+// So this reads the real z-index out of those components and checks the layer
+// still lines up. The behaviour itself is covered by the e2e spec.
+const zIndexOf = (Component: any, props: Record<string, unknown> = {}) => {
+	const { container } = render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<Component {...props} />
+		</ThemeProvider>,
+	);
+	const element = container.firstElementChild as HTMLElement;
+	return Number(getComputedStyle(element).zIndex);
+};
+describe("Wysiwyg fullscreen layer", () => {
+	it("should keep the whole layer under the modals the field opens", () => {
+		const layer = Object.values(FULLSCREEN_LAYER);
+		expect(Math.max(...layer)).toBeLessThan(zIndexOf(ModalOverlay));
+	});
+	it("should lift the link popover and the page finder panel over the editor", () => {
+		expect(FULLSCREEN_LAYER.popoverOverlay).toBeGreaterThan(FULLSCREEN_LAYER.editor);
+		expect(FULLSCREEN_LAYER.popover).toBeGreaterThan(FULLSCREEN_LAYER.popoverOverlay);
+		expect(FULLSCREEN_LAYER.panel).toBeGreaterThan(FULLSCREEN_LAYER.popover);
+	});
+	it("should need the panel override, whose own z-index sits under the editor", () => {
+		expect(zIndexOf(FloatingPanelWrapper, { isOpen: true })).toBeLessThan(FULLSCREEN_LAYER.editor);
+	});
+});

package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.test.tsx CHANGED Viewed

@@ -19,6 +19,10 @@ vi.mock("react-froala-wysiwyg", () => ({
 					$el: { get: vi.fn(() => editorElRef.current!) },
 					el: editorElRef.current,
 					edit: { on: vi.fn(), off: vi.fn() },
+					commands: { exec: vi.fn() },
+					opts: { zIndex: 1 },
+					$tb: { css: vi.fn() },
+					fullscreen: { isActive: vi.fn(() => false) },
 					link: { insert: vi.fn() },
 					image: { insert: vi.fn(), get: vi.fn(() => null) },
 					html: { get: vi.fn(() => props.model) },
@@ -32,6 +36,7 @@ vi.mock("react-froala-wysiwyg", () => ({
 				};
 				props.config.events.initialized.call(mockEditor);
 				(window as any).__froalaEditorInstance = mockEditor;
+				(window as any).__froalaEditorConfig = props.config;
 			}
 		}, [props]);
@@ -51,6 +56,7 @@ afterEach(() => {
 	cleanup();
 	vi.resetAllMocks();
 	delete (window as any).__froalaEditorInstance;
+	delete (window as any).__froalaEditorConfig;
 });
 const initialStore = {
@@ -843,3 +849,106 @@ describe("Wysiwyg event listeners - link and gallery operations", () => {
 		// linkData can have: isImageLink, isEditing, url, newTab, noFollow, linkPageId
 	});
 });
+describe("Wysiwyg keyboard shortcuts", () => {
+	const renderWysiwyg = (overrides?: Partial<IWysiwygProps>) =>
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Wysiwyg {...createMockProps(overrides)} />
+			</ThemeProvider>,
+			{ store },
+		);
+	const triggerShortcut = (cmd: string) => {
+		const editor = (window as any).__froalaEditorInstance;
+		const event = { preventDefault: vi.fn() } as unknown as KeyboardEvent;
+		const cancelled = (window as any).__froalaEditorConfig.events.shortcut.call(editor, event, cmd) === false;
+		return { editor, event, cancelled };
+	};
+	it("should open the Griddo link popover on Ctrl/Cmd+K instead of Froala's own command", () => {
+		renderWysiwyg({ full: true });
+		const { editor, event, cancelled } = triggerShortcut("insertLink");
+		expect(editor.commands.exec).toHaveBeenCalledWith("insertLinkGriddo");
+		expect(event.preventDefault).toHaveBeenCalled();
+		// Froala calls plugin commands unbound, so its own insertLink has to be cancelled
+		expect(cancelled).toBe(true);
+	});
+	it("should leave the rest of the shortcuts to Froala", () => {
+		renderWysiwyg({ full: true });
+		const { editor, event, cancelled } = triggerShortcut("bold");
+		expect(editor.commands.exec).not.toHaveBeenCalled();
+		expect(event.preventDefault).not.toHaveBeenCalled();
+		expect(cancelled).toBe(false);
+	});
+	it("should not insert links in inline fields, whose toolbar has no link button", () => {
+		renderWysiwyg({ inline: true });
+		const { editor, cancelled } = triggerShortcut("insertLink");
+		expect(editor.commands.exec).not.toHaveBeenCalled();
+		expect(cancelled).toBe(true);
+	});
+});
+describe("Wysiwyg fullscreen", () => {
+	const renderWysiwyg = (overrides?: Partial<IWysiwygProps>) =>
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Wysiwyg {...createMockProps(overrides)} />
+			</ThemeProvider>,
+			{ store },
+		);
+	const events = () => (window as any).__froalaEditorConfig.events;
+	it("should hand Froala the key it restores the editor z-index from", () => {
+		renderWysiwyg({ full: true });
+		const editor = (window as any).__froalaEditorInstance;
+		events()["commands.before"].call(editor, "fullscreen");
+		expect(editor.opts.z_index).toBe(editor.opts.zIndex);
+	});
+	it("should drop the z-index Froala pinned on the toolbar when leaving fullscreen", () => {
+		renderWysiwyg({ full: true });
+		const editor = (window as any).__froalaEditorInstance;
+		events()["commands.after"].call(editor, "fullscreen");
+		expect(editor.$tb.css).toHaveBeenCalledWith("z-index", "");
+	});
+	it("should keep its hands off while fullscreen is on", () => {
+		renderWysiwyg({ full: true });
+		const editor = (window as any).__froalaEditorInstance;
+		editor.fullscreen.isActive.mockReturnValue(true);
+		// Entering: the toolbar has to stay over the editor. Leaving: seeding here
+		// would save Froala's own 2147483641 as the value to restore.
+		events()["commands.after"].call(editor, "fullscreen");
+		events()["commands.before"].call(editor, "fullscreen");
+		expect(editor.opts.z_index).toBeUndefined();
+		expect(editor.$tb.css).not.toHaveBeenCalled();
+	});
+	it("should leave the rest of the commands alone", () => {
+		renderWysiwyg({ full: true });
+		const editor = (window as any).__froalaEditorInstance;
+		events()["commands.before"].call(editor, "bold");
+		events()["commands.after"].call(editor, "bold");
+		expect(editor.opts.z_index).toBeUndefined();
+		expect(editor.$tb.css).not.toHaveBeenCalled();
+	});
+});

package/src/__tests__/components/Nav/Nav.test.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Prompt, Router } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "@testing-library/react";
+import { render, cleanup, fireEvent, screen } from "@testing-library/react";
+import { createMemoryHistory } from "history";
 import { parseTheme } from "@ax/helpers";
 import "@testing-library/jest-dom";
@@ -54,3 +55,75 @@ describe("Nav component rendering", () => {
 		expect(links).toHaveLength(0);
 	});
 });
+/**
+ * How many times ONE click navigates (sc-118192).
+ *
+ * The nav used to wrap its label in a `<NavLink to="#">` inside the `<MenuItem onClick>`, so a
+ * single click fired two transitions: the link's first — it is the inner element, so its
+ * handler runs first as the event bubbles — and then the real one from `onClick`. `MenuItem`
+ * does call `preventDefault`, but by then react-router's Link has already read
+ * `defaultPrevented` as false and pushed.
+ *
+ * Two symptoms, and the second is the one a user reports:
+ *
+ *   - on a clean screen both transitions run, so every click leaves a spurious history entry
+ *     before the real one and the browser's Back button misbehaves;
+ *   - on a screen with unsaved changes, a `RouteLeavingGuard`'s `<Prompt>` intercepts BOTH,
+ *     and its handler calls a real toggle (`hooks/modals.tsx:6-8`), so the modal opens and
+ *     closes in the same tick. Nothing navigates and nothing warns: the click does nothing at
+ *     all.
+ *
+ * Found by running the QA suite's robots spec, whose positive control exercises exactly this
+ * (the jsdom tests of the screens never saw it — they drive navigation directly rather than
+ * through the nav).
+ */
+describe("Nav navigation", () => {
+	const items = [
+		{ title: "Item 1", path: "/item1", component: "Item1" },
+		{ title: "Item 2", path: "/item2", component: "Item2" },
+	];
+	const renderNav = (history: ReturnType<typeof createMemoryHistory>, guard = false) =>
+		render(
+			<Router history={history}>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					{/* Stands in for a screen with unsaved changes: `RouteLeavingGuard` blocks the
+					    same way, by returning false from the Prompt's message handler. */}
+					{guard && <Prompt when={true} message={() => false} />}
+					<Nav items={items} current={items[0]} onClick={(path: string) => history.push(path)} />
+				</ThemeProvider>
+			</Router>,
+		);
+	it("navigates once per click, leaving no spurious history entry", () => {
+		const history = createMemoryHistory({ initialEntries: ["/item1"] });
+		renderNav(history);
+		fireEvent.click(screen.getByText("Item 2"));
+		expect(history.location.pathname).toBe("/item2");
+		// The whole point: 2 would mean the extra `to="#"` transition went out first.
+		expect(history.entries).toHaveLength(2);
+	});
+	it("fires a single blocked transition when the screen has unsaved changes", () => {
+		const history = createMemoryHistory({ initialEntries: ["/item1"] });
+		const blocked = vi.fn(() => false);
+		render(
+			<Router history={history}>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<Prompt when={true} message={blocked as never} />
+					<Nav items={items} current={items[0]} onClick={(path: string) => history.push(path)} />
+				</ThemeProvider>
+			</Router>,
+		);
+		fireEvent.click(screen.getByText("Item 2"));
+		// Called twice is what made the guard's modal toggle open and straight back shut, so the
+		// user got no warning and no navigation.
+		expect(blocked).toHaveBeenCalledTimes(1);
+		expect(history.location.pathname).toBe("/item1");
+	});
+});

package/src/__tests__/components/ResizePanel/ResizePanel.test.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
-import type { MockedFunction } from "vitest";
-import React, { useRef } from "react";
+import React from "react";
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen, fireEvent, act } from "@testing-library/react";
@@ -18,25 +17,6 @@ beforeEach(() => {
 	});
 });
-vi.mock("react", async () => {
-	const originReact = await vi.importActual("react");
-	const mUseRef = vi.fn();
-	return {
-		...originReact,
-		useRef: mUseRef,
-	};
-});
-const useMockRef = useRef as MockedFunction<typeof useRef>;
-// `useRef` está mockeado a nivel de módulo y sin implementación devuelve
-// undefined. El primer test dejaba puesto un `mockReturnValue` que `clearMocks`
-// no borra —solo limpia el historial de llamadas— y los dos últimos dependían
-// de él: al reordenarlos petaban con `... reading 'current'`.
-beforeEach(() => {
-	useMockRef.mockReturnValue({ current: {} });
-});
 describe("ResizePanel component rendering", () => {
 	it("should render the component with fixed panel", () => {
 		const defaultProps: IResizePanelProps = {
@@ -164,3 +144,52 @@ describe("ResizePanel mouse events", () => {
 		expect(width).toBe("368px");
 	});
 });
+describe("ResizePanel while Froala is in fullscreen", () => {
+	const renderPanel = () => {
+		Object.defineProperty(document.body, "offsetWidth", { value: 1440, configurable: true });
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ResizePanel leftPanel={<div>Left Panel</div>} rightPanel={<div>Right Panel</div>} fixed={true} />
+			</ThemeProvider>,
+		);
+		const rightPanel = screen.getByTestId("right-panel");
+		// The width the user dragged the panel to
+		fireEvent.mouseDown(screen.getByTestId("handler"));
+		fireEvent.mouseMove(window, { clientX: 1000, clientY: 100 });
+		fireEvent.mouseUp(window);
+		return rightPanel;
+	};
+	const resizeWindow = async () => {
+		await act(async () => {
+			fireEvent(window, new Event("resize"));
+			await new Promise((resolve) => setTimeout(resolve, 32));
+		});
+	};
+	it("should not adopt the width Froala's fullscreen forces on the panel", async () => {
+		const rightPanel = renderPanel();
+		// Froala tags every ancestor of the editor, this panel included, and its
+		// rule widens them to 100%
+		rightPanel.classList.add("fr-fullscreen-wrapper");
+		vi.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(1200);
+		await resizeWindow();
+		expect(getComputedStyle(rightPanel).width).toBe("440px");
+	});
+	it("should still follow the panel width on a plain window resize", async () => {
+		const rightPanel = renderPanel();
+		vi.spyOn(rightPanel, "offsetWidth", "get").mockReturnValue(1200);
+		await resizeWindow();
+		expect(getComputedStyle(rightPanel).width).toBe("1200px");
+	});
+});

package/src/__tests__/components/Toast/Toast.test.tsx CHANGED Viewed

@@ -10,10 +10,12 @@ import globalTheme from "@ax/themes/theme.json";
 afterEach(cleanup);
+const routerMock = vi.hoisted(() => ({ pathname: "localhost:3000/example/path" }));
 vi.mock("react-router-dom", async () => ({
 	...(await vi.importActual("react-router-dom")),
 	useLocation: () => ({
-		pathname: "localhost:3000/example/path",
+		pathname: routerMock.pathname,
 	}),
 }));
@@ -105,3 +107,37 @@ describe("Toast component events", () => {
 		expect(toastWrapper.classList.contains("close-animation")).toBeTruthy();
 	});
 });
+describe("Toast positioning by route", () => {
+	// Editors have no side nav, so the toast slides left. `spacing.m` is 24px.
+	const AT_EDGE = "calc(24px * 1)";
+	const CLEARS_NAV = "calc(24px * 4)";
+	afterEach(() => {
+		routerMock.pathname = "localhost:3000/example/path";
+	});
+	const renderAt = (pathname: string) => {
+		routerMock.pathname = pathname;
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Toast {...makeProps({ message: "1 module copied to clipboard" })} />
+			</ThemeProvider>,
+		);
+		return screen.getByTestId("toast-wrapper");
+	};
+	it("sits at the edge in the page editor", () => {
+		expect(renderAt("/sites/pages/editor/42")).toHaveStyleRule("left", AT_EDGE);
+	});
+	it("sits at the edge in a structured data item", () => {
+		expect(renderAt("/sites/data/5/content/12")).toHaveStyleRule("left", AT_EDGE);
+	});
+	it("clears the side nav on the content types settings", () => {
+		expect(renderAt("/sites/settings/content-types")).toHaveStyleRule("left", CLEARS_NAV);
+	});
+});