@griddo/ax 11.16.0-rc.3 → 11.17.1-rc.0

package/README.md

@@ -53,4 +53,4 @@ node_modules/.bin/biome lint . --only=noConsole
 - :PACKAGE_WITH_PROTOCOL: scoped and bare packages with a protocol.
 - :PATH: absolute and relative paths.
 - :URL: sources starting with https:// and http://.
-- :BLANK_LINE: blank line.
+- :BLANK_LINE: blank line.

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.16.0-rc.3",
+	"version": "11.17.1-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f673c2a5efb5cd37858b5e6477aedbc44370271e"
+	"gitHead": "4111b59796126ce5a803e97d8a13e3f9f6d433ef"
 }

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

@@ -1,16 +1,21 @@
-import * as React from "react";
-
-import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
 import { mock } from "jest-mock-extended";
 import configureStore from "redux-mock-store";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen, waitFor } from "../../../../../config/jest/test-utils";
 import "@testing-library/jest-dom";
-import thunk from "redux-thunk";
 
+import GlobalPageForm, { type IGlobalPageFormProps } from "@ax/components/ConfigPanel/GlobalPageForm";
 import { parseTheme } from "@ax/helpers";
-import GlobalPageForm, { IGlobalPageFormProps } from "@ax/components/ConfigPanel/GlobalPageForm";
 import globalTheme from "@ax/themes/theme.json";
 
+import thunk from "redux-thunk";
+
+jest.mock("@ax/hooks", () => ({
+	...jest.requireActual("@ax/hooks"),
+	useGlobalPermission: jest.fn(() => true),
+}));
+
 beforeEach(() => {
 	cleanup();
 });
@@ -127,7 +132,7 @@ describe("GlobalPageForm component rendering", () => {
 			{ store },
 		);
 
-		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
+		expect(screen.getByText(/This page doesn't have a header. Click/i)).toBeInTheDocument();
 	});
 
 	it("should render the component with no footer warning text", () => {
@@ -140,7 +145,7 @@ describe("GlobalPageForm component rendering", () => {
 			</ThemeProvider>,
 			{ store },
 		);
-		expect(screen.getByText(/This page doesn\'t have a footer. Click/i)).toBeInTheDocument();
+		expect(screen.getByText(/This page doesn't have a footer. Click/i)).toBeInTheDocument();
 	});
 
 	it("should render the connectedField component", () => {
@@ -166,9 +171,9 @@ describe("GlobalPageForm component rendering", () => {
 });
 
 describe("GlobalPageForm component rendering", () => {
-	it("should trigger handleClick", () => {
+	it("should trigger handleClick", async () => {
 		defaultProps.selectedTab = "content";
-		const getGlobalFromLocalPageActionMock = jest.fn();
+		const getGlobalFromLocalPageActionMock = jest.fn(() => Promise.resolve());
 		const saveCurrentSiteInfoActionMock = jest.fn();
 		defaultProps.actions.saveCurrentSiteInfoAction = saveCurrentSiteInfoActionMock;
 		defaultProps.actions.getGlobalFromLocalPageAction = getGlobalFromLocalPageActionMock;
@@ -185,8 +190,10 @@ describe("GlobalPageForm component rendering", () => {
 		const editButton = screen.getByText<HTMLButtonElement>("Edit");
 		expect(editButton).toBeTruthy();
 		fireEvent.click(editButton);
-		expect(getGlobalFromLocalPageActionMock).toBeCalled();
-		expect(saveCurrentSiteInfoActionMock).toBeCalled();
+		await waitFor(() => {
+			expect(getGlobalFromLocalPageActionMock).toBeCalled();
+			expect(saveCurrentSiteInfoActionMock).toBeCalled();
+		});
 	});
 
 	it("should trigger handleRestoreHeader", () => {
@@ -202,7 +209,7 @@ describe("GlobalPageForm component rendering", () => {
 			{ store },
 		);
 
-		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
+		expect(screen.getByText(/This page doesn't have a header. Click/i)).toBeInTheDocument();
 		const headerLink = screen.getByTestId("header-link");
 		expect(headerLink).toBeTruthy();
 		fireEvent.click(headerLink);
@@ -222,7 +229,7 @@ describe("GlobalPageForm component rendering", () => {
 			{ store },
 		);
 
-		expect(screen.getByText(/This page doesn\'t have a footer. Click/i)).toBeInTheDocument();
+		expect(screen.getByText(/This page doesn't have a footer. Click/i)).toBeInTheDocument();
 		const footerLink = screen.getByTestId("footer-link");
 		expect(footerLink).toBeTruthy();
 		fireEvent.click(footerLink);

package/src/__tests__/components/RestrictionsModal/CurrentAccessList/CurrentAccessList.test.tsx

@@ -1,11 +1,12 @@
-import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
 
 import CurrentAccessList from "@ax/components/RestrictionsModal/CurrentAccessList";
-import type { IUser } from "@ax/types";
 import globalTheme from "@ax/themes/theme.json";
+import type { IUser } from "@ax/types";
 
 jest.mock("react-redux", () => ({
 	...jest.requireActual("react-redux"),
@@ -29,7 +30,6 @@ const defaultProps: {
 	currentAccessGrants: { users: number[]; roles: number[] };
 	onEdit: jest.Mock;
 	users: IUser[];
-	canSetPermissions: boolean;
 } = {
 	restrictionType: "users",
 	currentAccessGrants: {
@@ -59,7 +59,6 @@ const defaultProps: {
 			pagePermissions: [],
 		},
 	],
-	canSetPermissions: true,
 };
 
 const renderComponent = (props = defaultProps) =>
@@ -90,23 +89,44 @@ describe("CurrentAccessList component rendering", () => {
 		expect(screen.getByText(/Only these roles/)).toBeTruthy();
 	});
 
-	it("should render the Manage User Access button when canSetPermissions is true", () => {
-		renderComponent({ ...defaultProps, canSetPermissions: true });
+	it("should render the Manage User Access button", () => {
+		renderComponent();
 
 		expect(screen.getByText("MANAGE USER ACCESS")).toBeTruthy();
 	});
 
-	it("should not render the Manage User Access button when canSetPermissions is false", () => {
-		renderComponent({ ...defaultProps, canSetPermissions: false });
-
-		expect(screen.queryByText("MANAGE USER ACCESS")).toBeNull();
-	});
-
 	it("should filter to show only selected users when restrictionType is users", () => {
 		const allUsers = [
-			{ id: 1, username: "john", name: "John Doe", email: "john@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
-			{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
-			{ id: 3, username: "bob", name: "Bob Wilson", email: "bob@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+			{
+				id: 1,
+				username: "john",
+				name: "John Doe",
+				email: "john@example.com",
+				failed: 0,
+				roles: [],
+				isSuperAdmin: false,
+				pagePermissions: [],
+			},
+			{
+				id: 2,
+				username: "jane",
+				name: "Jane Smith",
+				email: "jane@example.com",
+				failed: 0,
+				roles: [],
+				isSuperAdmin: false,
+				pagePermissions: [],
+			},
+			{
+				id: 3,
+				username: "bob",
+				name: "Bob Wilson",
+				email: "bob@example.com",
+				failed: 0,
+				roles: [],
+				isSuperAdmin: false,
+				pagePermissions: [],
+			},
 		];
 
 		renderComponent({
@@ -128,7 +148,6 @@ describe("CurrentAccessList component events", () => {
 
 		renderComponent({
 			...defaultProps,
-			canSetPermissions: true,
 			onEdit: onEditMock,
 		});
 
@@ -153,9 +172,36 @@ describe("CurrentAccessList component events", () => {
 
 	it("should handle multiple users correctly", () => {
 		const allUsers = [
-			{ id: 1, username: "john", name: "John Doe", email: "john@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
-			{ id: 2, username: "jane", name: "Jane Smith", email: "jane@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
-			{ id: 3, username: "bob", name: "Bob Wilson", email: "bob@example.com", failed: 0, roles: [], isSuperAdmin: false, pagePermissions: [] },
+			{
+				id: 1,
+				username: "john",
+				name: "John Doe",
+				email: "john@example.com",
+				failed: 0,
+				roles: [],
+				isSuperAdmin: false,
+				pagePermissions: [],
+			},
+			{
+				id: 2,
+				username: "jane",
+				name: "Jane Smith",
+				email: "jane@example.com",
+				failed: 0,
+				roles: [],
+				isSuperAdmin: false,
+				pagePermissions: [],
+			},
+			{
+				id: 3,
+				username: "bob",
+				name: "Bob Wilson",
+				email: "bob@example.com",
+				failed: 0,
+				roles: [],
+				isSuperAdmin: false,
+				pagePermissions: [],
+			},
 		];
 
 		renderComponent({

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

@@ -1,11 +1,11 @@
-import { act } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import RestrictionsModal from "@ax/components/RestrictionsModal";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
+import type { PageAccessGrantsSummary } from "@ax/types";
 
 jest.mock("@ax/components/RestrictionsModal/utils", () => ({
 	fetchUsers: jest.fn().mockResolvedValue([]),
@@ -32,13 +32,18 @@ jest.mock("react-redux", () => ({
 
 afterEach(cleanup);
 
-const defaultProps = {
+const defaultProps: {
+	isOpen: boolean;
+	toggleModal: jest.Mock;
+	currentAccessGrants: PageAccessGrantsSummary | undefined;
+	onUpdateAccessGrants: jest.Mock;
+	isSaving: boolean;
+} = {
 	isOpen: false,
 	toggleModal: jest.fn(),
 	currentAccessGrants: undefined,
 	onUpdateAccessGrants: jest.fn().mockResolvedValue(undefined),
 	isSaving: false,
-	canSetPermissions: true,
 };
 
 const renderComponent = (props = defaultProps) =>

package/src/__tests__/modules/Sites/SitesList/SitesList.test.tsx

@@ -386,7 +386,7 @@ describe("Sites module events", () => {
 
 		const actionMenuItem = screen.getAllByTestId("action-menu-item");
 		expect(actionMenuItem.length).toEqual(2);
-		fireEvent.click(actionMenuItem[0]);
+		fireEvent.click(actionMenuItem[1]);
 		const deleteModal = screen.getByTestId("delete-modal");
 		expect(deleteModal).toBeTruthy();
 	});
@@ -407,7 +407,7 @@ describe("Sites module events", () => {
 
 		const actionMenuItem = screen.getAllByTestId("action-menu-item");
 		expect(actionMenuItem.length).toEqual(2);
-		fireEvent.click(actionMenuItem[0]);
+		fireEvent.click(actionMenuItem[1]);
 		const deleteModal = screen.getByTestId("delete-modal");
 		expect(deleteModal).toBeTruthy();
 	});
@@ -426,7 +426,7 @@ describe("Sites module events", () => {
 
 		const actionMenuItem = screen.getAllByTestId("action-menu-item");
 		expect(actionMenuItem.length).toEqual(2);
-		fireEvent.click(actionMenuItem[1]);
+		fireEvent.click(actionMenuItem[0]);
 		const publishModal = screen.getByTestId("publish-modal");
 		expect(publishModal).toBeTruthy();
 	});
@@ -447,8 +447,227 @@ describe("Sites module events", () => {
 
 		const actionMenuItem = screen.getAllByTestId("action-menu-item");
 		expect(actionMenuItem.length).toEqual(2);
+		fireEvent.click(actionMenuItem[0]);
+		const publishModal = screen.getByTestId("publish-modal");
+		expect(publishModal).toBeTruthy();
+	});
+
+	it("should disable delete button when confirmation input is incorrect", async () => {
+		await renderSitesList();
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+
+		fireEvent.click(moreInfoButton[0]);
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		fireEvent.click(actionMenuItem[1]);
+
+		const deleteModal = screen.getByTestId("delete-modal");
+		expect(deleteModal).toBeTruthy();
+
+		const mainDeleteButton = screen.getByRole("button", { name: "Delete Site" });
+		expect((mainDeleteButton as HTMLButtonElement).disabled).toBe(true);
+	});
+
+	it("should enable delete button when confirmation input is correct", async () => {
+		await renderSitesList();
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+
+		fireEvent.click(moreInfoButton[0]);
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		fireEvent.click(actionMenuItem[1]);
+
+		const deleteModal = screen.getByTestId("delete-modal");
+		expect(deleteModal).toBeTruthy();
+
+		const input = screen.getByPlaceholderText("Type here") as HTMLInputElement;
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "SITE 1" } });
+		});
+
+		await waitFor(() => {
+			const mainDeleteButton = screen.getByRole("button", { name: "Delete Site" });
+			expect((mainDeleteButton as HTMLButtonElement).disabled).toBe(false);
+		});
+	});
+
+	it("should close delete modal when clicking cancel", async () => {
+		await renderSitesList();
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		fireEvent.click(actionMenuItem[1]);
+
+		const deleteModal = screen.getByTestId("delete-modal");
+		expect(deleteModal).toBeTruthy();
+
+		const cancelButton = screen.getByRole("button", { name: "Cancel" });
+		fireEvent.click(cancelButton);
+
+		expect(screen.queryByTestId("delete-modal")).not.toBeTruthy();
+	});
+
+	it("should show view online option for published sites", async () => {
+		const publishedSitesData = {
+			...initialStore,
+			sites: {
+				totalItems: 1,
+				sites: [
+					{
+						...sitesDataMock.sites[0],
+						isPublished: true,
+						updated: true,
+					},
+				],
+				recentSites: [],
+				config: sitesDataMock.config,
+			},
+		};
+
+		await renderSitesList(publishedSitesData);
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		expect(actionMenuItem.length).toBeGreaterThan(2);
+
+		const viewOnlineItem = screen.getByText("View online");
+		expect(viewOnlineItem).toBeTruthy();
+	});
+
+	it("should show unpublish and republish options for published sites", async () => {
+		const publishedSitesData = {
+			...initialStore,
+			sites: {
+				totalItems: 1,
+				sites: [
+					{
+						...sitesDataMock.sites[0],
+						isPublished: true,
+						updated: true,
+					},
+				],
+				recentSites: [],
+				config: sitesDataMock.config,
+			},
+		};
+
+		await renderSitesList(publishedSitesData);
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const unpublishItem = screen.getByText("Unpublish site");
+		const republishItem = screen.getByText("Republish site");
+
+		expect(unpublishItem).toBeTruthy();
+		expect(republishItem).toBeTruthy();
+	});
+
+	it("should open republish modal when clicking republish option", async () => {
+		const publishedSitesData = {
+			...initialStore,
+			sites: {
+				totalItems: 1,
+				sites: [
+					{
+						...sitesDataMock.sites[0],
+						isPublished: true,
+						updated: true,
+					},
+				],
+				recentSites: [],
+				config: sitesDataMock.config,
+			},
+		};
+
+		await renderSitesList(publishedSitesData);
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const republishItem = screen.getByText("Republish site");
+		fireEvent.click(republishItem);
+
+		const republishModal = screen.getByTestId("republish-site-modal");
+		expect(republishModal).toBeTruthy();
+	});
+
+	it("should open unpublish modal when clicking unpublish option", async () => {
+		const publishedSitesData = {
+			...initialStore,
+			sites: {
+				totalItems: 1,
+				sites: [
+					{
+						...sitesDataMock.sites[0],
+						isPublished: true,
+						updated: true,
+					},
+				],
+				recentSites: [],
+				config: sitesDataMock.config,
+			},
+		};
+
+		await renderSitesList(publishedSitesData);
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
 		fireEvent.click(actionMenuItem[1]);
+
 		const publishModal = screen.getByTestId("publish-modal");
 		expect(publishModal).toBeTruthy();
 	});
+
+	it("should render publish action for unpublished sites", async () => {
+		await renderSitesList();
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const publishItem = screen.getByText("Publish site");
+		expect(publishItem).toBeTruthy();
+	});
+
+	it("should not show view online option for unpublished sites", async () => {
+		await renderSitesList();
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const viewOnlineItem = screen.queryByText("View online");
+		expect(viewOnlineItem).not.toBeTruthy();
+	});
+
+	it("should show 4 action items for published sites", async () => {
+		const publishedSitesData = {
+			...initialStore,
+			sites: {
+				totalItems: 1,
+				sites: [
+					{
+						...sitesDataMock.sites[0],
+						isPublished: true,
+						updated: true,
+					},
+				],
+				recentSites: [],
+				config: sitesDataMock.config,
+			},
+		};
+
+		await renderSitesList(publishedSitesData);
+
+		const moreInfoButton = screen.getAllByTestId("more-info-button");
+		fireEvent.click(moreInfoButton[0]);
+
+		const actionMenuItem = screen.getAllByTestId("action-menu-item");
+		expect(actionMenuItem.length).toEqual(4);
+	});
 });

package/src/api/sites.tsx

@@ -86,6 +86,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 		endpoint: "/site/unpublish/bulk",
 		method: "POST",
 	},
+	REPUBLISH_SITE: {
+		...template,
+		endpoint: ["/site/", "/render-all"],
+		method: "POST",
+	},
 	IMPORT_PAGE: {
 		...template,
 		endpoint: ["/site/", "/pages/global/imports/"],
@@ -374,6 +379,16 @@ const unpublishSite = (siteID: number) => {
 
 const unpublishSiteBulk = (ids: number[]) => sendRequest(SERVICES.UNPUBLISH_SITE_BULK, { sites: ids });
 
+const republishSite = (siteID: number) => {
+	const {
+		host,
+		endpoint: [prefix, suffix],
+	} = SERVICES.REPUBLISH_SITE;
+
+	SERVICES.REPUBLISH_SITE.dynamicUrl = `${host}${prefix}${siteID}${suffix}`;
+	return sendRequest(SERVICES.REPUBLISH_SITE);
+};
+
 const getSelectSites = () => sendRequest(SERVICES.GET_SELECT_SITES);
 
 const setSiteActivity = async (siteID: number) => {
@@ -398,6 +413,7 @@ export default {
 	publishSiteBulk,
 	unpublishSite,
 	unpublishSiteBulk,
+	republishSite,
 	getGlobalPages,
 	getGlobalPagesLight,
 	importPage,

package/src/components/Fields/AsyncSelect/index.tsx

@@ -31,6 +31,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 		languages,
 		contentLanguages,
 		forceLanguage,
+		menuInPortal,
 	} = props;
 
 	const initialState: IState = {
@@ -175,6 +176,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 
 	return (
 		<div data-testid="asyncSelect">
+			<S.MenuGlobalStyle />
 			<S.StyledSelect
 				name={name}
 				value={getObjectValue(value, state.items) || ""}
@@ -194,6 +196,8 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 				inputValue={state.inputText}
 				components={{ Menu }}
 				onKeyDown={handleKeyDown}
+				menuPortalTarget={menuInPortal ? document.body : undefined}
+				styles={menuInPortal ? { menuPortal: (base) => ({ ...base, zIndex: 1280 }) } : undefined}
 			/>
 		</div>
 	);
@@ -237,6 +241,7 @@ export interface IAsyncSelectProps {
 	languages?: ILanguage[];
 	contentLanguages?: "current" | "all" | string[];
 	forceLanguage?: number;
+	menuInPortal?: boolean;
 }
 
 export default AsyncSelect;

package/src/components/Fields/AsyncSelect/style.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from "styled-components";
 import AsyncSelect from "react-select/async";
+import styled, { createGlobalStyle } from "styled-components";
 
 export const StyledSelect = styled(AsyncSelect)<{
 	isDisabled: boolean | undefined;
@@ -49,65 +49,6 @@ export const StyledSelect = styled(AsyncSelect)<{
     border-color: ${(p) => p.theme.color.interactiveDisabled};
   }
 
-  .react-select__menu {
-    box-shadow: none;
-    border-radius: 4px;
-    min-width: calc(${(p) => p.theme.spacing.xl} * 4);
-    max-width: calc(${(p) => p.theme.spacing.xl} * 6);
-    margin-top: 0;
-    z-index: 99;
-
-    .react-select__menu-list {
-      border: 1px solid ${(p) => p.theme.color.uiLine};
-      border-radius: 4px;
-      max-height: calc(${(p) => p.theme.spacing.l} * 3);
-      overflow: auto;
-      padding: 0;
-
-      &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 4px;
-        height: 100%;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border-radius: 4px;
-        background-color: ${(p) => p.theme.colors.iconNonActive};
-      }
-
-      .react-select__option {
-        background-color: ${(p) => p.theme.color.interactiveBackground};
-        min-height: ${(p) => p.theme.spacing.l};
-        padding: ${(p) => `13px ${p.theme.spacing.s} 12px ${p.theme.spacing.s}`};
-        &:first-child {
-          ${(p) =>
-						!p.required &&
-						p.isClearable &&
-						css`
-              font-style: italic;
-              color: ${(p) => p.theme.color.textLowEmphasis};
-              background-color: ${(p) => p.theme.color.uiLineInverse};
-            `}
-        }
-        :hover {
-          cursor: pointer;
-          background-color: ${(p) => p.theme.color.overlayHoverPrimary};
-        }
-        :focus {
-          background-color: ${(p) => p.theme.color.overlayFocusPrimary};
-          border: 0.5px solid ${(p) => p.theme.color.interactive02};
-        }
-        :active {
-          background-color: ${(p) => p.theme.color.overlayPressedPrimary};
-        }
-      }
-      .react-select__option--is-selected {
-        color: ${(p) => p.theme.color.textHighEmphasis};
-        background-color: ${(p) => p.theme.color.overlayPressedPrimary};
-      }
-    }
-  }
-
   &.inline {
     ${(p) => p.theme.textStyle.uiS};
     text-transform: capitalize;
@@ -161,3 +102,59 @@ export const StyledSelect = styled(AsyncSelect)<{
     }
   }
 `;
+
+// Estilos del menú aplicados de forma global: cuando el select usa menuInPortal
+// (menuPortalTarget={document.body}) el menú queda fuera del árbol de StyledSelect,
+// por lo que las reglas anidadas no le alcanzarían. Al ser global sirve para ambos casos.
+export const MenuGlobalStyle = createGlobalStyle`
+  .react-select__menu {
+    ${(p: any) => p.theme.textStyle.fieldContent};
+    color: ${(p) => p.theme.color.textHighEmphasis};
+    box-shadow: none !important;
+    border-radius: 4px;
+    min-width: calc(${(p) => p.theme.spacing.xl} * 4);
+    max-width: calc(${(p) => p.theme.spacing.xl} * 6);
+    margin-top: 0 !important;
+
+    .react-select__menu-list {
+      border: 1px solid ${(p) => p.theme.color.uiLine};
+      border-radius: 4px;
+      max-height: calc(${(p) => p.theme.spacing.l} * 3);
+      overflow: auto;
+      padding: 0;
+
+      &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 4px;
+        height: 100%;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background-color: ${(p) => p.theme.colors.iconNonActive};
+      }
+
+      .react-select__option {
+        background-color: ${(p) => p.theme.color.interactiveBackground};
+        min-height: ${(p) => p.theme.spacing.l};
+        padding: ${(p) => `13px ${p.theme.spacing.s} 12px ${p.theme.spacing.s}`};
+
+        :hover {
+          cursor: pointer;
+          background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+        }
+        :focus {
+          background-color: ${(p) => p.theme.color.overlayFocusPrimary};
+          border: 0.5px solid ${(p) => p.theme.color.interactive02};
+        }
+        :active {
+          background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+        }
+      }
+      .react-select__option--is-selected {
+        color: ${(p) => p.theme.color.textHighEmphasis};
+        background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+      }
+    }
+  }
+`;

package/src/components/Icon/components/Republish.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+const SvgRepublish = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#AFC628"
+      d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96ZM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0 1 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3Z"
+    />
+    <path
+      fill="#AFC628"
+      stroke="#AFC628"
+      strokeWidth={0.25}
+      d="M15.784 12.895a4.125 4.125 0 0 1-4.104 3.713 4.092 4.092 0 0 1-2.92-1.228l-.791.791-.214.213v-2.826h2.827l-.214.213-.864.865a3.046 3.046 0 0 0 2.176.922 3.078 3.078 0 0 0 3.048-2.69l.014-.11h1.056l-.014.137Zm-8.222-.688.014-.137a4.124 4.124 0 0 1 4.104-3.712c1.145 0 2.177.472 2.921 1.226l.79-.79.214-.213v2.826h-2.827l.214-.213.865-.866a3.05 3.05 0 0 0-2.177-.92 3.077 3.077 0 0 0-3.048 2.69l-.014.11H7.562Z"
+    />
+  </svg>
+);
+export default SvgRepublish;

package/src/components/Icon/svgs/Republish.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18Z" fill="#AFC628"/>
+<path d="M15.784 12.8946C15.5777 14.9779 13.8204 16.6075 11.6795 16.6075C10.5338 16.6074 9.50405 16.1335 8.75958 15.38L7.96857 16.171L7.7547 16.3839L7.7547 13.5577L10.5818 13.5577L10.368 13.7706L9.50372 14.6358C10.0603 15.2013 10.8279 15.5576 11.6795 15.5577C13.2435 15.5577 14.5399 14.3815 14.7283 12.8673L14.742 12.7579L15.7977 12.7579L15.784 12.8946ZM7.56232 12.2071L7.57599 12.0704C7.78224 9.98727 9.53878 8.35775 11.6795 8.35751C12.8254 8.35751 13.8568 8.83042 14.6014 9.58408L15.3914 8.79404L15.6053 8.58115L15.6053 11.4073L12.7781 11.4073L12.992 11.1944L13.8572 10.3282C13.3005 9.76263 12.5313 9.40732 11.6795 9.40732C10.1157 9.40755 8.82002 10.5837 8.63165 12.0977L8.61798 12.2071L7.56232 12.2071Z" fill="#AFC628" stroke="#AFC628" stroke-width="0.25"/>
+</svg>

package/src/components/Modal/style.tsx

@@ -66,6 +66,7 @@ const Modal = styled.div<{ size?: string; height?: number | string }>`
   border-radius: 4px;
   width: ${(p) => getWidth(p.size)};
   height: ${(p) => getModalHeight(p.height, p.size)};
+  min-height: ${(p) => getModalHeight(p.height, p.size)};
   max-height: 80vh;
   box-shadow: ${(p) => p.theme.shadow.shadowXL};
   top: 50%;

package/src/components/Toast/index.tsx

@@ -1,7 +1,7 @@
-import { useRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
 import { useLocation } from "react-router-dom";
 
-import { createPortal } from "react-dom";
 import { Button, IconAction } from "@ax/components";
 
 import * as S from "./style";

package/src/containers/Sites/actions.tsx

@@ -815,6 +815,23 @@ function updateCurrentSearch(query: string): (dispatch: Dispatch) => Promise<voi
 	};
 }
 
+function republishSite(siteID: number): (dispatch: Dispatch) => Promise<boolean> {
+	return async (dispatch) => {
+		try {
+			const responseActions = {
+				handleSuccess: () => {},
+				handleError: (response: any) => appActions.handleError(response)(dispatch),
+			};
+			const callback = async () => await sites.republishSite(siteID);
+
+			return await handleRequest(callback, responseActions, [])(dispatch);
+		} catch (e) {
+			console.log(e);
+			return false;
+		}
+	};
+}
+
 export {
 	setCurrentSiteInfo,
 	setCurrentSitePages,
@@ -849,4 +866,5 @@ export {
 	updateCurrentSearch,
 	setIsSitesLoading,
 	getAllSites,
+	republishSite,
 };

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -6,13 +6,23 @@ import { sitesActions } from "@ax/containers/Sites";
 import { isDevelopment } from "@ax/helpers";
 import type { IGetSitesParams, ISite } from "@ax/types";
 
-import { ItemName, ItemThumbnail } from "./../../atoms";
+import { ItemName, ItemThumbnail, RepublishSiteModal } from "./../../atoms";
 import { useSiteActions } from "./../../hooks";
 
 import * as S from "./style";
 
 const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
-	const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams } = props;
+	const {
+		site,
+		setSiteInfo,
+		setHistoryPush,
+		deleteSite,
+		publishSite,
+		unpublishSite,
+		republishSite,
+		getParams,
+		toggleToast,
+	} = props;
 	const { hidden } = site;
 
 	const {
@@ -29,7 +39,20 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 		isOpenPublish,
 		togglePublishModal,
 		publishModal,
-	} = useSiteActions({ site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams });
+		isOpenRepublish,
+		toggleRepublishModal,
+		onRepublish,
+	} = useSiteActions({
+		site,
+		setSiteInfo,
+		setHistoryPush,
+		deleteSite,
+		publishSite,
+		unpublishSite,
+		republishSite,
+		getParams,
+		toggleToast,
+	});
 
 	const { title, mainAction, secondaryAction, content } = publishModal;
 
@@ -92,6 +115,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 			>
 				{isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
 			</Modal>
+			<RepublishSiteModal isOpen={isOpenRepublish} toggleModal={toggleRepublishModal} onRepublish={onRepublish} />
 		</>
 	);
 };
@@ -103,7 +127,9 @@ interface IGridSiteItemProps {
 	deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+	republishSite(siteID: number): Promise<boolean>;
 	getParams: () => IGetSitesParams;
+	toggleToast(message: string): void;
 }
 
 const mapDispatchToProps = {
@@ -112,6 +138,7 @@ const mapDispatchToProps = {
 	deleteSite: sitesActions.deleteSite,
 	publishSite: sitesActions.publishSite,
 	unpublishSite: sitesActions.unpublishSite,
+	republishSite: sitesActions.republishSite,
 };
 
 export default connect(null, mapDispatchToProps)(GridSiteItem);

package/src/modules/Sites/SitesList/ListView/ListSiteItem/index.tsx

@@ -6,7 +6,7 @@ import { sitesActions } from "@ax/containers/Sites";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
 import type { ICheck, IGetSitesParams, ISite } from "@ax/types";
 
-import { ItemName, ItemThumbnail } from "./../../atoms";
+import { ItemName, ItemThumbnail, RepublishSiteModal } from "./../../atoms";
 import { useSiteActions } from "./../../hooks";
 
 import * as S from "./style";
@@ -19,10 +19,12 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 		deleteSite,
 		publishSite,
 		unpublishSite,
+		republishSite,
 		isSelected,
 		onCheck,
 		getParams,
 		hoverCheck,
+		toggleToast,
 	} = props;
 
 	const { hidden } = site;
@@ -41,14 +43,24 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 		isOpenPublish,
 		togglePublishModal,
 		publishModal,
-	} = useSiteActions({ site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams });
+		isOpenRepublish,
+		toggleRepublishModal,
+	} = useSiteActions({
+		site,
+		setSiteInfo,
+		setHistoryPush,
+		deleteSite,
+		publishSite,
+		unpublishSite,
+		republishSite,
+		getParams,
+		toggleToast,
+	});
 
 	const { title, mainAction, secondaryAction, content } = publishModal;
 
 	const handleOnChange = (value: ICheck) => onCheck(value);
 
-	console.log(site, "site");
-
 	return (
 		<>
 			<S.SiteItemRow key={site.id} role="rowgroup" selected={isSelected} data-testid="list-site-item">
@@ -113,6 +125,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 			>
 				{isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
 			</Modal>
+			<RepublishSiteModal isOpen={isOpenRepublish} toggleModal={toggleRepublishModal} onRepublish={() => null} />
 		</>
 	);
 };
@@ -126,8 +139,10 @@ interface IListSiteItemProps {
 	deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+	republishSite(siteID: number): Promise<boolean>;
 	onCheck: (e: ICheck) => void;
 	getParams: () => IGetSitesParams;
+	toggleToast(message: string): void;
 }
 
 const mapDispatchToProps = {
@@ -136,6 +151,7 @@ const mapDispatchToProps = {
 	deleteSite: sitesActions.deleteSite,
 	publishSite: sitesActions.publishSite,
 	unpublishSite: sitesActions.unpublishSite,
+	republishSite: sitesActions.republishSite,
 };
 
 export default connect(null, mapDispatchToProps)(ListSiteItem);

package/src/modules/Sites/SitesList/SiteModal/index.tsx

@@ -101,6 +101,7 @@ const SiteModal = (props: ISiteModalProps): JSX.Element => {
 						entity="languages"
 						onChange={setLangValue}
 						mandatory={true}
+						menuInPortal={true}
 					/>
 				</S.FieldsWrapper>
 				<S.FieldsWrapper>
@@ -112,6 +113,7 @@ const SiteModal = (props: ISiteModalProps): JSX.Element => {
 						value={domain}
 						onChange={setDomainValue}
 						mandatory={true}
+						menuInPortal={true}
 					/>
 					<FieldsBehavior
 						title="Path"

package/src/modules/Sites/SitesList/atoms.tsx

@@ -1,5 +1,6 @@
-import { Image, Tooltip } from "@ax/components";
+import { Image, Modal, Tooltip } from "@ax/components";
 import { trimText } from "@ax/helpers";
+import type { IModal } from "@ax/types";
 
 import * as S from "./style";
 
@@ -44,4 +45,37 @@ interface IItemThumbnailProps {
 	borderRadius?: boolean;
 }
 
-export { ItemName, ItemThumbnail };
+const RepublishSiteModal = (props: IRepublishSiteModal): JSX.Element => {
+	const { isOpen, toggleModal, onRepublish } = props;
+
+	const mainAction = { title: "Yes, republish now", onClick: onRepublish };
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			size="S"
+			height="auto"
+			title="Republish site?"
+			mainAction={mainAction}
+			secondaryAction={secondaryAction}
+		>
+			{isOpen && (
+				<S.ModalContent data-testid="republish-site-modal">
+					<p>
+						This <strong>will refresh all currently public pages</strong> to reflect the latest global changes. Drafts
+						and unpublished content will remain hidden.
+					</p>
+				</S.ModalContent>
+			)}
+		</Modal>
+	);
+};
+
+interface IRepublishSiteModal extends IModal {
+	onRepublish: () => void;
+}
+
+export { ItemName, ItemThumbnail, RepublishSiteModal };

package/src/modules/Sites/SitesList/hooks.tsx

@@ -117,7 +117,9 @@ interface IUseSiteActionsParams {
 	deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+	republishSite(siteID: number): Promise<boolean>;
 	getParams: () => IGetSitesParams;
+	toggleToast(message: string): void;
 }
 
 const publishedTooltip: Record<string, string> = {
@@ -143,9 +145,11 @@ const useSiteActions = ({
 	deleteSite,
 	publishSite,
 	unpublishSite,
+	republishSite,
 	getParams,
+	toggleToast,
 }: IUseSiteActionsParams) => {
-	const { isOpen, toggleModal } = useModals(["delete", "publish"]);
+	const { isOpen, toggleModal } = useModals(["delete", "publish", "republish"]);
 	const [inputValue, setInputValue] = useState("");
 
 	const { allowedToDeleteSite, allowedToPublishSite, allowedToUnpublishSite } = usePermissionsForSite(site.id, {
@@ -154,7 +158,7 @@ const useSiteActions = ({
 		allowedToUnpublishSite: "general.unpublishSite",
 	});
 
-	const { updated, isPublished } = site;
+	const { updated, isPublished, home } = site;
 	const publishedState = getPublishedState(isPublished, updated);
 
 	const setSite = async () => {
@@ -163,21 +167,30 @@ const useSiteActions = ({
 	};
 
 	const deleteOption = allowedToDeleteSite
-		? { label: "delete", icon: "delete", action: () => toggleModal("delete") }
+		? { label: "Delete site", icon: "delete", action: () => toggleModal("delete") }
 		: undefined;
 
 	const publishOptionProps =
 		isPublished && allowedToUnpublishSite
-			? { label: "Unpublish", icon: "offlinePending" }
+			? { label: "Unpublish site", icon: "offlinePending" }
 			: !isPublished && allowedToPublishSite
-				? { label: "Publish", icon: "uploadPending" }
+				? { label: "Publish site", icon: "uploadPending" }
 				: null;
 
 	const publishOption = publishOptionProps
 		? { label: publishOptionProps.label, icon: publishOptionProps.icon, action: () => toggleModal("publish") }
 		: undefined;
 
-	const menuOptions = [deleteOption, publishOption];
+	const republishOption =
+		isPublished && allowedToPublishSite
+			? { label: "Republish site", icon: "republish", action: () => toggleModal("republish") }
+			: undefined;
+
+	const viewOption = isPublished
+		? { label: "View online", icon: "view", action: () => goToPublishedSite() }
+		: undefined;
+
+	const menuOptions = [viewOption, publishOption, republishOption, deleteOption];
 
 	const handleDeleteSite = async () => {
 		const params = getParams();
@@ -190,6 +203,7 @@ const useSiteActions = ({
 		onClick: handleDeleteSite,
 		disabled: inputValue !== site.name.toUpperCase(),
 	};
+
 	const secondaryDeleteAction = { title: "Cancel", onClick: () => toggleModal("delete") };
 
 	const handlePublishSite = async () => {
@@ -204,6 +218,20 @@ const useSiteActions = ({
 		toggleModal("publish");
 	};
 
+	const handleRepublishSite = async () => {
+		const isRepublished = await republishSite(site.id);
+		toggleModal("republish");
+		if (isRepublished) {
+			toggleToast("Republishing site. Changes will be live shortly.");
+		}
+	};
+
+	const goToPublishedSite = () => {
+		if (home) {
+			window.open(home, "_blank");
+		}
+	};
+
 	const publishModal = isPublished
 		? {
 				mainAction: { title: "Unpublish Site", onClick: handleUnpublishSite },
@@ -244,6 +272,9 @@ const useSiteActions = ({
 		isOpenPublish: isOpen("publish"),
 		togglePublishModal: () => toggleModal("publish"),
 		publishModal,
+		isOpenRepublish: isOpen("republish"),
+		toggleRepublishModal: () => toggleModal("republish"),
+		onRepublish: handleRepublishSite,
 	};
 };
 

package/src/modules/Sites/SitesList/index.tsx

@@ -10,11 +10,12 @@ import {
 	Pagination,
 	SearchTagsBar,
 	TableList,
+	Toast,
 } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import type { IError } from "@ax/containers/App/reducer";
 import { sitesActions } from "@ax/containers/Sites";
-import { useBulkSelection, useModal, usePermission } from "@ax/hooks";
+import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
 import type { ICheck, IGetSitesParams, IQueryValue, IRootState, ISite, ISiteListConfig, IUser } from "@ax/types";
 
 import AllSitesHeader from "./AllSitesHeader";
@@ -83,6 +84,7 @@ const SitesList = (props: ISitesListProps) => {
 	const errorRef = useRef<HTMLDivElement>(null);
 	const { isOpen, toggleModal } = useModal();
 	const { isOpen: isWelcomeOpen, toggleModal: toggleWelcomeModal } = useModal();
+	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 
 	const scrollToTop = useCallback(() => {
 		if (tableRef.current) {
@@ -264,7 +266,7 @@ const SitesList = (props: ISitesListProps) => {
 				sites.map((site: ISite) => {
 					const isItemSelected = isSelected(site.id);
 					return displayMode === "grid" ? (
-						<GridSiteItem key={site.id} site={site} getParams={getParams} />
+						<GridSiteItem key={site.id} site={site} getParams={getParams} toggleToast={toggleToast} />
 					) : (
 						<ListSiteItem
 							key={site.id}
@@ -273,6 +275,7 @@ const SitesList = (props: ISitesListProps) => {
 							onCheck={handleAddToBulk}
 							getParams={getParams}
 							hoverCheck={checkState.hoverCheck}
+							toggleToast={toggleToast}
 						/>
 					);
 				})
@@ -281,7 +284,7 @@ const SitesList = (props: ISitesListProps) => {
 					<EmptyState icon="search" message="We couldn't find what you are looking for. Please, try another search." />
 				</S.EmptyStateWrapper>
 			),
-		[sites, displayMode, isSelected, handleAddToBulk, getParams, checkState.hoverCheck],
+		[sites, displayMode, isSelected, handleAddToBulk, getParams, checkState.hoverCheck, toggleToast],
 	);
 
 	const showPagination = totalItems > itemsPerPage;
@@ -374,6 +377,7 @@ const SitesList = (props: ISitesListProps) => {
 				setHistoryPush={setHistoryPush}
 			/>
 			<WelcomeModal isOpen={isWelcomeOpen} toggleModal={toggleWelcomeModal} />
+			{isVisible && <Toast setIsVisible={setIsVisible} message={toastState} />}
 		</MainWrapper>
 	);
 };

package/src/modules/Sites/SitesList/style.tsx

@@ -101,6 +101,14 @@ const SearchTagsGrid = styled.div`
   margin: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
 `;
 
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
 export {
 	SitesListWrapper,
 	GridList,
@@ -112,4 +120,5 @@ export {
 	AllSitesListWrapper,
 	SearchTags,
 	SearchTagsGrid,
+	ModalContent,
 };