@griddo/ax 11.10.23 → 11.10.24

package/config/griddo-config/index.js

@@ -87,6 +87,7 @@ const griddoAxAliases = {
 	"@ax/routes": path.resolve(__dirname, "../../src/routes"),
 	"@ax/types": path.resolve(__dirname, "../../src/types"),
 	"@ax/schemas": path.resolve(__dirname, "../../src/schemas"),
+	"@ax/services": path.resolve(__dirname, "../../src/services"),
 	"@ax/locales": path.resolve(__dirname, "../../src/locales"),
 };
 

package/package.json

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

package/src/Style/index.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
-
-import { ThemeProvider, createGlobalStyle } from "styled-components";
 import { parseTheme } from "@ax/helpers";
-import reset from "styled-reset";
+
 import { normalize } from "polished";
-import fonts from "./fonts";
+import { createGlobalStyle, ThemeProvider } from "styled-components";
+import reset from "styled-reset";
+
 import globalTheme from "../themes/theme.json";
+import fonts from "./fonts";
 
 const GlobalStyle = createGlobalStyle`
   ${reset}
@@ -25,9 +25,11 @@ const GlobalStyle = createGlobalStyle`
   body {
     min-width: 1280px;
   }
-  body.no-select {
-    user-select: none !important;
-  }
+
+ /* Resize panel helper classes */
+  body.no-select { cursor: col-resize !important; user-select: none !important; }
+  body.no-select * { cursor: col-resize !important; pointer-events: none !important; }
+
   * { box-sizing: border-box; }
   a { color: inherit; text-decoration: none; }
   img { display: block; width: 100%; max-width: 100%; }

package/src/__tests__/components/ConfigPanel/ConfigPanel.test.tsx

@@ -1,19 +1,20 @@
-import * as React from "react";
-
-import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../config/jest/test-utils";
 import { mock } from "jest-mock-extended";
 import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
 import "@testing-library/jest-dom";
 
+import ConfigPanel, { type IStateProps } from "@ax/components/ConfigPanel";
 import { parseTheme } from "@ax/helpers";
-import ConfigPanel, { IStateProps } from "@ax/components/ConfigPanel";
 import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, render, screen } from "../../../../config/jest/test-utils";
 import { defaultStore } from "./../../../__mocks__/store/GenericStore";
 
 afterEach(cleanup);
 
-const middlewares: any = [];
+const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
 const initialStore = {
 	...defaultStore,
@@ -136,6 +137,9 @@ defaultProps.schema = {
 		},
 	],
 };
+defaultProps.setSelectedTab.mockImplementation((tab) => {
+	console.log("Tab seleccionada:", tab);
+});
 defaultProps.actions = { deleteModule: jest.fn() };
 defaultProps.breadcrumb = [
 	{
@@ -146,9 +150,7 @@ defaultProps.breadcrumb = [
 ];
 defaultProps.selectedParent = null;
 defaultProps.activatedModules = ["Accordion", "AddressCollection"];
-const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
 defaultProps.selectedTab = "content";
-const setSelectedTabMocked = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
 defaultProps.isPage = false;
 defaultProps.isEditable = true;
 defaultProps.theme = "default-theme";

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/PageConnectedField.test.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
 import axios from "axios";
-
-import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../../../config/jest/test-utils";
 import configureStore from "redux-mock-store";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../../../config/jest/test-utils";
 import "@testing-library/jest-dom";
-import thunk from "redux-thunk";
 
-import { parseTheme } from "@ax/helpers";
 import PageConnectedField from "@ax/components/ConfigPanel/Form/ConnectedField/PageConnectedField";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
+import thunk from "redux-thunk";
+
 beforeEach(() => {
 	cleanup();
 });
@@ -18,6 +18,73 @@ beforeEach(() => {
 jest.mock("axios");
 const mockedAxios = axios as jest.MockedFunction<typeof axios>;
 
+// Mock schemasService to prevent access to undefined config and ensure all helper functions work
+jest.mock("@ax/services", () => ({
+	schemasService: {
+		isLoaded: jest.fn(() => true),
+		getSchemas: jest.fn(() => ({
+			ui: {
+				modules: {},
+				components: {},
+				templates: {
+					BasicTemplate: {
+						component: "BasicTemplate",
+						displayName: "Basic Template",
+						type: "template",
+						default: {},
+						config: [
+							{
+								title: "Template Options",
+								key: "templateOptions",
+								type: "TextField",
+							},
+						],
+					},
+				},
+			},
+			config: {
+				themes: [
+					{
+						value: "default",
+						label: "Default Theme",
+						default: true,
+					},
+				],
+				moduleCategories: [
+					{
+						label: "Header",
+						value: "header",
+						featured: true,
+					},
+				],
+				menuItems: {},
+				richTextConfig: {},
+			},
+			contentTypes: {
+				dataPacks: {},
+				structuredData: {},
+			},
+			forms: {
+				templates: {},
+				categories: [],
+				fields: {},
+			},
+			languages: [],
+			languagesDefinition: {},
+			version: "1.0.0",
+			defaultLanguage: { id: 1, locale: "en", language: "English", label: "English", isDefault: true },
+		})),
+		setSchemas: jest.fn(),
+		clear: jest.fn(),
+	},
+}));
+
+// Mock schemas to prevent getPageSchemas from accessing schemasService
+jest.mock("@ax/schemas", () => ({
+	getPageSchemas: jest.fn(() => ({})),
+	getFixedSchemas: jest.fn(() => ({})),
+}));
+
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
 const updateEditorContentMock = jest.fn();
@@ -117,6 +184,13 @@ const templateProps = {
 		title: "Header",
 		component: "Header",
 		type: "header",
+		config: [
+			{
+				title: "Template Options",
+				key: "templateOptions",
+				type: "TextField",
+			},
+		],
 		configTabs: [
 			{
 				title: "content",
@@ -136,6 +210,7 @@ const templateProps = {
 	isGlobal: true,
 	selectedTab: "config",
 	theme: "default-theme",
+	isForm: false,
 };
 
 const data = {
@@ -174,8 +249,11 @@ describe("PageConnectedField component rendering", () => {
 			{ store },
 		);
 
-		const templateText = screen.getByText(/Template Options/i);
-		expect(templateText).toBeInTheDocument();
+		// Check that "Template Options" title is rendered
+		const templateTitles = screen.getAllByText("Template Options");
+		expect(templateTitles).toHaveLength(2); // Title and label
+		const titleElement = templateTitles[0]; // First one should be the title
+		expect(titleElement.tagName).toBe("P");
 	});
 
 	it("should call getPageBreadCrumb", () => {

package/src/__tests__/components/SideModal/SideModal.test.tsx

@@ -8,6 +8,57 @@ import { parseTheme } from "@ax/helpers";
 import SideModal, { ISideModalProps } from "@ax/components/SideModal";
 import globalTheme from "@ax/themes/theme.json";
 
+// Mock schemasService to prevent access to undefined schemas
+jest.mock("@ax/services", () => ({
+	schemasService: {
+		isLoaded: jest.fn(() => true),
+		getSchemas: jest.fn(() => ({
+			ui: {
+				modules: {
+					BasicContent: {
+						displayName: "Basic Content",
+						component: "BasicContent",
+						type: "module",
+						category: "content",
+					},
+					CardCollection: {
+						displayName: "Card Collection",
+						component: "CardCollection",
+						type: "module",
+						category: "content",
+					},
+				},
+				components: {},
+				templates: {},
+			},
+			config: {
+				themes: [],
+				moduleCategories: [],
+				menuItems: {},
+			},
+			contentTypes: {
+				dataPacks: {},
+			},
+			forms: {
+				templates: {},
+				categories: [],
+			},
+			languages: [],
+			languagesDefinition: {},
+			version: "1.0.0",
+			defaultLanguage: { id: 1, locale: "en", language: "English", label: "English", isDefault: true },
+		})),
+		setSchemas: jest.fn(),
+		clear: jest.fn(),
+	},
+}));
+
+// Mock schemas to prevent getPageSchemas from accessing schemasService
+jest.mock("@ax/schemas", () => ({
+	getPageSchemas: jest.fn(() => ({})),
+	getFixedSchemas: jest.fn(() => ({})),
+}));
+
 afterEach(cleanup);
 
 const defaultProps = mock<ISideModalProps>();
@@ -277,6 +328,19 @@ describe("SideModal component events", () => {
 	});
 
 	it("should filter by query", () => {
+		const handleClickMock = jest.fn();
+		const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+		defaultProps.categories = [
+			{ featured: true, label: "All", value: "all" },
+			{ label: "Content", value: "content" },
+			{ label: "Collections", value: "collections" },
+		];
+		defaultProps.isOpen = true;
+		defaultProps.theme = "default-theme";
+		defaultProps.whiteList = ["BasicContent", "CardCollection"];
+		defaultProps.onClick = handleClickMock;
+		defaultProps.toggleModal = toggleModalMock;
+		defaultProps.optionsType = "modules";
 		defaultProps.showSearch = true;
 
 		render(

package/src/__tests__/hooks/useSchemas.test.tsx

@@ -0,0 +1,224 @@
+import { Provider } from "react-redux";
+
+import * as AppActions from "@ax/containers/App/actions";
+import { useSchemas } from "@ax/hooks";
+import type { ISchemas } from "@ax/services";
+import { schemasService } from "@ax/services";
+
+import { renderHook } from "@testing-library/react";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+
+// Mock del servicio
+jest.mock("@ax/services", () => ({
+	schemasService: {
+		isLoaded: jest.fn(),
+		getSchemas: jest.fn(),
+		clear: jest.fn(),
+	},
+}));
+
+// Mock de la acción loadSchemas
+jest.mock("@ax/containers/App/actions", () => ({
+	loadSchemas: jest.fn(() => ({
+		type: "LOAD_SCHEMAS",
+	})),
+}));
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe("useSchemas hook", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		(schemasService.clear as jest.Mock).mockImplementation(() => {});
+	});
+
+	const createWrapper = (store: ReturnType<typeof mockStore>) => {
+		return ({ children }: { children: React.ReactNode }) => <Provider store={store}>{children}</Provider>;
+	};
+
+	it("should return null schemas when not loaded", () => {
+		const initialState = {
+			app: {
+				schemasLoading: false,
+				schemasError: null,
+			},
+		};
+
+		const store = mockStore(initialState);
+		(schemasService.isLoaded as jest.Mock).mockReturnValue(false);
+
+		const { result } = renderHook(() => useSchemas(), {
+			wrapper: createWrapper(store),
+		});
+
+		expect(result.current.schemas).toBe(null);
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.error).toBe(null);
+	});
+
+	it("should return schemas when service is loaded", () => {
+		const mockSchemas: ISchemas = {
+			ui: {
+				modules: {},
+				components: {},
+				templates: {},
+			},
+			config: {
+				themes: [],
+				moduleCategories: [],
+				menuItems: {},
+			},
+			contentTypes: {
+				dataPacks: {},
+			},
+			languagesDefinition: {},
+			version: "1.0.0",
+			languages: [
+				{
+					id: 1,
+					locale: "en-US",
+					language: "en",
+					label: "English",
+					isDefault: true,
+				},
+			],
+			defaultLanguage: {
+				id: 1,
+				locale: "en-US",
+				language: "en",
+				label: "English",
+				isDefault: true,
+			},
+		};
+
+		const initialState = {
+			app: {
+				schemasLoading: false,
+				schemasError: null,
+			},
+		};
+
+		const store = mockStore(initialState);
+		(schemasService.isLoaded as jest.Mock).mockReturnValue(true);
+		(schemasService.getSchemas as jest.Mock).mockReturnValue(mockSchemas);
+
+		const { result } = renderHook(() => useSchemas(), {
+			wrapper: createWrapper(store),
+		});
+
+		expect(result.current.schemas).toEqual(mockSchemas);
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.error).toBe(null);
+	});
+
+	it("should dispatch loadSchemas action on mount", () => {
+		const initialState = {
+			app: {
+				schemasLoading: false,
+				schemasError: null,
+			},
+		};
+
+		const store = mockStore(initialState);
+		(schemasService.isLoaded as jest.Mock).mockReturnValue(false);
+
+		renderHook(() => useSchemas(), {
+			wrapper: createWrapper(store),
+		});
+
+		const actions = store.getActions();
+		expect(actions).toEqual([{ type: "LOAD_SCHEMAS" }]);
+		expect(AppActions.loadSchemas).toHaveBeenCalled();
+	});
+
+	it("should return loading state when schemasLoading is true", () => {
+		const initialState = {
+			app: {
+				schemasLoading: true,
+				schemasError: null,
+			},
+		};
+
+		const store = mockStore(initialState);
+		(schemasService.isLoaded as jest.Mock).mockReturnValue(false);
+
+		const { result } = renderHook(() => useSchemas(), {
+			wrapper: createWrapper(store),
+		});
+
+		expect(result.current.isLoading).toBe(true);
+	});
+
+	it("should return error state when schemasError is set", () => {
+		const errorMessage = "Failed to load schemas";
+
+		const initialState = {
+			app: {
+				schemasLoading: false,
+				schemasError: errorMessage,
+			},
+		};
+
+		const store = mockStore(initialState);
+		(schemasService.isLoaded as jest.Mock).mockReturnValue(false);
+
+		const { result } = renderHook(() => useSchemas(), {
+			wrapper: createWrapper(store),
+		});
+
+		expect(result.current.error).toBe(errorMessage);
+		expect(result.current.isLoading).toBe(false);
+	});
+
+	it("should handle error when getSchemas throws", () => {
+		const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
+		const initialState = {
+			app: {
+				schemasLoading: false,
+				schemasError: null,
+			},
+		};
+
+		const store = mockStore(initialState);
+		(schemasService.isLoaded as jest.Mock).mockReturnValue(true);
+		(schemasService.getSchemas as jest.Mock).mockImplementation(() => {
+			throw new Error("Failed to get schemas");
+		});
+
+		const { result } = renderHook(() => useSchemas(), {
+			wrapper: createWrapper(store),
+		});
+
+		expect(result.current.schemas).toBe(null);
+		expect(consoleErrorSpy).toHaveBeenCalled();
+
+		consoleErrorSpy.mockRestore();
+	});
+
+	it("should NOT re-dispatch loadSchemas on re-render", () => {
+		const initialState = {
+			app: {
+				schemasLoading: false,
+				schemasError: null,
+			},
+		};
+
+		const store = mockStore(initialState);
+		(schemasService.isLoaded as jest.Mock).mockReturnValue(false);
+
+		const { rerender } = renderHook(() => useSchemas(), {
+			wrapper: createWrapper(store),
+		});
+
+		expect(AppActions.loadSchemas).toHaveBeenCalledTimes(1);
+
+		jest.clearAllMocks();
+
+		rerender();
+
+		expect(AppActions.loadSchemas).not.toHaveBeenCalled();
+	});
+});

package/src/__tests__/services/SchemasService.test.ts

@@ -0,0 +1,135 @@
+import { type ISchemas, schemasService } from "@ax/services";
+
+describe("SchemasService", () => {
+	beforeEach(() => {
+		// Limpiar el estado del servicio antes de cada test
+		schemasService.clear();
+	});
+
+	describe("isLoaded", () => {
+		it("should return false initially", () => {
+			expect(schemasService.isLoaded()).toBe(false);
+		});
+
+		it("should return true after schemas are set", () => {
+			const mockSchemas = createMockSchemas();
+			schemasService.setSchemas(mockSchemas);
+			expect(schemasService.isLoaded()).toBe(true);
+		});
+
+		it("should return false after clear is called", () => {
+			const mockSchemas = createMockSchemas();
+			schemasService.setSchemas(mockSchemas);
+			schemasService.clear();
+			expect(schemasService.isLoaded()).toBe(false);
+		});
+	});
+
+	describe("getSchemas", () => {
+		it("should throw SchemasNotLoadedError when schemas are not loaded", () => {
+			let error: Error | undefined;
+			try {
+				schemasService.getSchemas();
+			} catch (e) {
+				error = e as Error;
+			}
+
+			expect(error).toBeDefined();
+			expect(error).toBeInstanceOf(Error);
+			expect(error?.name).toBe("SchemasNotLoadedError");
+			expect(error?.message).toBe("Schemas have not been loaded yet. Call loadSchemas() first.");
+		});
+
+		it("should return the schemas after they are set", () => {
+			const mockSchemas = createMockSchemas();
+			schemasService.setSchemas(mockSchemas);
+			const retrievedSchemas = schemasService.getSchemas();
+			expect(retrievedSchemas).toEqual(mockSchemas);
+		});
+	});
+
+	describe("setSchemas", () => {
+		it("should store schemas correctly", () => {
+			const mockSchemas = createMockSchemas();
+			schemasService.setSchemas(mockSchemas);
+			expect(schemasService.isLoaded()).toBe(true);
+			expect(schemasService.getSchemas()).toEqual(mockSchemas);
+		});
+
+		it("should overwrite existing schemas", () => {
+			const firstSchemas = createMockSchemas("1.0.0");
+			const secondSchemas = createMockSchemas("2.0.0");
+			schemasService.setSchemas(firstSchemas);
+			schemasService.setSchemas(secondSchemas);
+			expect(schemasService.getSchemas().version).toBe("2.0.0");
+		});
+	});
+
+	describe("clear", () => {
+		it("should clear stored schemas", () => {
+			const mockSchemas = createMockSchemas();
+			schemasService.setSchemas(mockSchemas);
+			expect(schemasService.isLoaded()).toBe(true);
+			schemasService.clear();
+			expect(schemasService.isLoaded()).toBe(false);
+
+			let error: Error | undefined;
+			try {
+				schemasService.getSchemas();
+			} catch (e) {
+				error = e as Error;
+			}
+
+			expect(error).toBeDefined();
+			expect(error).toBeInstanceOf(Error);
+			expect(error?.name).toBe("SchemasNotLoadedError");
+		});
+	});
+
+	describe("getInstanceId", () => {
+		it("should return a string instance ID", () => {
+			const instanceId = schemasService.getInstanceId();
+			expect(typeof instanceId).toBe("string");
+			expect(instanceId.length).toBeGreaterThan(0);
+		});
+	});
+});
+
+/**
+ * Helper function to create a mock ISchemas object for testing
+ */
+function createMockSchemas(version = "1.0.0"): ISchemas {
+	return {
+		ui: {
+			modules: {},
+			components: {},
+			templates: {},
+		},
+		config: {
+			themes: [],
+			moduleCategories: [],
+			menuItems: {},
+		},
+		contentTypes: {
+			dataPacks: {},
+		},
+		languagesDefinition: {},
+		version,
+		languages: [
+			{
+				id: 1,
+				locale: "en-US",
+				language: "en",
+				label: "English",
+				isDefault: true,
+			},
+		],
+		defaultLanguage: {
+			id: 1,
+			locale: "en-US",
+			language: "en",
+			label: "English",
+			isDefault: true,
+		},
+	};
+}

package/src/api/schemas.tsx

@@ -1,5 +1,5 @@
 import { template } from "./config";
-import { IServiceConfig, sendRequest } from "./utils";
+import { type IServiceConfig, sendRequest } from "./utils";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
 	SCHEMAS_SELECT_ALL: {
@@ -7,12 +7,22 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 		endpoint: "/schemas/select/all",
 		method: "GET",
 	},
+	SCHEMAS: {
+		...template,
+		endpoint: "/schemas",
+		method: "GET",
+	},
 };
 
 const getSchemasSelectAll = async () => {
 	return sendRequest(SERVICES.SCHEMAS_SELECT_ALL);
 };
 
+const getSchemas = async () => {
+	return sendRequest(SERVICES.SCHEMAS);
+};
+
 export default {
 	getSchemasSelectAll,
+	getSchemas,
 };