@griddo/ax 11.14.4 → 11.14.5-rc.0

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

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
-import { IDomainRobot } from "@ax/types";
-import { FloatingPanel, Button, FieldsBehavior } from "@ax/components";
+import { Button, FloatingPanel } from "@ax/components";
+import type { IDomainRobot } from "@ax/types";
 
 import * as S from "./style";
 
@@ -26,23 +26,40 @@ const RobotsPanel = (props: IProps): JSX.Element => {
 
 	const placeholder = "User-agent: * \nAllow: *";
 
+	const noteTitle = "From site settings · read-only";
+
+	const noteText = (
+		<>
+			Each site under this domain can define its own sitemap and visibility rules for search engines and LLMs from its
+			{` `}
+			<strong>site settings</strong>. Rules from all sites are listed below and will be combined with your custom rules
+			above to generate the final robots.txt.
+			<br />
+			<br />
+			{item.computedContent}
+		</>
+	);
+
 	return (
 		<FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
 			<S.Wrapper>
-				<S.Item>
-					<S.ItemHeader>You are editing</S.ItemHeader>
-					<S.ItemContent>{item.fullUrl}</S.ItemContent>
-				</S.Item>
-				<FieldsBehavior
-					fieldType="TextArea"
-					onChange={setValue}
-					value={value}
-					title="Robots.txt"
-					placeholder={placeholder}
-				/>
-				<Button buttonStyle="text" type="button" icon="refresh" disabled={!value} onClick={resetItem}>
-					Reset to default
-				</Button>
+				<S.Content>
+					<S.Item>
+						<S.ItemHeader>You are editing</S.ItemHeader>
+						<S.ItemContent>{item.fullUrl}</S.ItemContent>
+					</S.Item>
+					<S.StyledFieldsBehavior
+						fieldType="TextArea"
+						onChange={setValue}
+						value={value}
+						title="Robots.txt"
+						placeholder={placeholder}
+					/>
+					<Button buttonStyle="text" type="button" icon="refresh" disabled={!value} onClick={resetItem}>
+						Reset to default
+					</Button>
+					{item.computedContent?.length > 0 && <S.StyledFNoteField value={{ title: noteTitle, text: noteText }} />}
+				</S.Content>
 				<S.Footer>
 					<Button className="button" type="button" onClick={editButton.action}>
 						{editButton.label}

package/src/modules/GlobalSettings/Robots/Item/RobotsPanel/style.tsx

@@ -1,8 +1,31 @@
+import { FieldsBehavior, NoteField } from "@ax/components";
+
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  padding: ${(p) => p.theme.spacing.m};
+  display: flex;
+
+  flex-direction: column;
   height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+`;
+
+const Content = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${(p) => p.theme.spacing.m};
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+    height: 100%;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.colors.iconNonActive};
+  }
 `;
 
 const Item = styled.div`
@@ -27,9 +50,18 @@ const ItemContent = styled.div`
 `;
 
 const Footer = styled.div`
-  position: absolute;
-  bottom: ${(p) => p.theme.spacing.m};
-  right: ${(p) => p.theme.spacing.m};
+  display: flex;
+  flex-shrink: 0;
+  padding: ${(p) => p.theme.spacing.m};
+  justify-content: flex-end;
+`;
+
+const StyledFieldsBehavior = styled((props) => <FieldsBehavior {...props} />)`
+  margin-bottom: 0;
+`;
+
+const StyledFNoteField = styled((props) => <NoteField {...props} />)`
+  margin-top: ${(p) => p.theme.spacing.m};
 `;
 
-export { Wrapper, Item, ItemHeader, ItemContent, Footer };
+export { Wrapper, Content, Item, ItemHeader, ItemContent, Footer, StyledFieldsBehavior, StyledFNoteField };

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

@@ -1,12 +1,13 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IDomainRobot, INavItem, IRootState } from "@ax/types";
+import { ErrorToast, Loading, MainWrapper, Nav } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { domainsActions } from "@ax/containers/Domains";
-import { MainWrapper, ErrorToast, Nav, Loading } from "@ax/components";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty } from "@ax/hooks";
+import type { IDomainRobot, INavItem, IRootState } from "@ax/types";
+
 import Item from "./Item";
 
 import * as S from "./style";

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -1,23 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { connect } from "react-redux";
 import { withErrorBoundary } from "react-error-boundary";
+import { connect } from "react-redux";
 
-import type {
-	IRootState,
-	ISite,
-	INotification,
-	ILanguage,
-	INavigationLanguage,
-	IHeader,
-	IFooter,
-	INavigation,
-} from "@ax/types";
-import { useIsDirty, useModal, usePermission } from "@ax/hooks";
+import { ErrorPage, ErrorToast, Loading, MainWrapper, Modal, Notification, RestoreModal } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { menuActions, navigationActions } from "@ax/containers/Navigation";
 import { RouteLeavingGuard } from "@ax/guards";
+import { useIsDirty, useModal, usePermission } from "@ax/hooks";
+import type { ILanguage, INavigation, INavigationLanguage, INotification, IRootState, ISite } from "@ax/types";
 
-import { appActions } from "@ax/containers/App";
-import { navigationActions, menuActions } from "@ax/containers/Navigation";
-import { ErrorPage, ErrorToast, Loading, MainWrapper, Modal, Notification, RestoreModal } from "@ax/components";
 import Editor from "./Editor";
 
 import * as S from "./style";
@@ -87,7 +78,7 @@ const DefaultsEditor = (props: IProps) => {
 	useEffect(() => {
 		const editorType = editorContent?.type;
 		const navigationModuleComponent = editorType ? currentSiteInfo?.navigationModules?.[editorType] : undefined;
-		const currentNavigation = currentDefaultsContent?.find((item: IHeader | IFooter) => item.id === editorContent?.id);
+		const currentNavigation = currentDefaultsContent?.find((item) => item.id === editorContent?.id);
 		if (navigationModuleComponent && editorContent && currentNavigation) {
 			const isNavigationModuleChanged = navigationModuleComponent !== currentNavigation.component;
 			if (isNavigationModuleChanged) setIsDirty(true);
@@ -260,7 +251,7 @@ interface IStateProps {
 	isLoading: boolean;
 	lang: { locale: string; id: number | null };
 	siteLanguages: ILanguage[];
-	currentDefaultsContent: (IHeader | IFooter)[];
+	currentDefaultsContent: INavigation[];
 	selectedDefault: string;
 	editorContent: INavigation | null;
 	header: number | null;

package/src/modules/Navigation/Defaults/Item/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { IHeader, IFooter, ICheck, ILanguage, INavigationLanguage } from "@ax/types";
+import type { ICheck, ILanguage, INavigationLanguage, INavigation } from "@ax/types";
 import { useModal, usePermission } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { navigationActions, menuActions } from "@ax/containers/Navigation";
@@ -58,16 +58,16 @@ const DefaultItem = (props: IProps): JSX.Element => {
 
 	const handleRenameItem = () => {
 		const updatedItem = { ...defaultContent, title: inputValue };
-		updateNavigation(defaultContent.id, updatedItem);
+		updateNavigation(defaultContent.id!, updatedItem);
 	};
 
-	const handleSetDefault = () => setDefaultNavigation(defaultContent.id, defaultContent.type);
+	const handleSetDefault = () => setDefaultNavigation(defaultContent.id!, defaultContent.type);
 
 	const handleErrorAction = () => toggleReplaceModal();
 
 	const removeItem = async () => {
-		const deleted = await deleteNavigation(defaultContent.id, defaultContent.type, handleErrorAction);
-		setDeletedNav(defaultContent.id);
+		const deleted = await deleteNavigation(defaultContent.id!, defaultContent.type, handleErrorAction);
+		setDeletedNav(defaultContent.id!);
 		if (deleted) {
 			toggleToast();
 		}
@@ -104,15 +104,13 @@ const DefaultItem = (props: IProps): JSX.Element => {
 
 	const getCurrentLanguages = () => {
 		const availables: ILanguage[] = [];
-		navigationLanguages.forEach(
-			(navLang) =>
-				languages &&
-				languages.forEach((siteLang) => {
-					if (siteLang.id === navLang.languageId) {
-						availables.push(siteLang);
-					}
-				}),
-		);
+		navigationLanguages.forEach((navLang) => {
+			languages?.forEach((siteLang) => {
+				if (siteLang.id === navLang.languageId) {
+					availables.push(siteLang);
+				}
+			});
+		});
 
 		return availables;
 	};
@@ -146,7 +144,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
 		const setNav = (id: number) => (isHeader ? setHeader(id) : setFooter(id));
 		const selectedNavLanguage = getSelectedNavLanguage(navigationLanguages, language);
 		const setTranslation = () =>
-			selectedNavLanguage ? setNav(selectedNavLanguage.navigationId) : setNav(defaultContent.id);
+			selectedNavLanguage ? setNav(selectedNavLanguage.navigationId) : setNav(defaultContent.id!);
 		setTranslation();
 		!selectedNavLanguage && createNewTranslation(true);
 		await getMenus();
@@ -162,7 +160,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
 				<S.CheckCell role="cell">
 					<CheckField
 						name="check"
-						value={defaultContent.id}
+						value={defaultContent.id!}
 						checked={isSelected || hoverCheck}
 						onChange={handleOnChange}
 					/>
@@ -229,12 +227,12 @@ const DefaultItem = (props: IProps): JSX.Element => {
 };
 
 interface IProps {
-	defaultContent: IHeader | IFooter;
+	defaultContent: INavigation;
 	languages: ILanguage[];
 	lang: { locale: string; id: number | null };
 	handleClick: (e: any) => void;
 	setHistoryPush(path: string, isEditor?: boolean): any;
-	updateNavigation(navID: number, data: IHeader | IFooter): void;
+	updateNavigation(navID: number, data: INavigation): void;
 	isSelected: boolean;
 	toggleToast(): void;
 	onChange: (e: any) => void;

package/src/modules/Navigation/Defaults/index.tsx

@@ -6,7 +6,7 @@ import { appActions } from "@ax/containers/App";
 import { menuActions, navigationActions } from "@ax/containers/Navigation";
 import { capitalize, isMultipleNavigationModules } from "@ax/helpers";
 import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
-import type { IFooter, IHeader, ILanguage, IRootState, ISite } from "@ax/types";
+import type { IFooter, IHeader, ILanguage, INavigation, IRootState, ISite } from "@ax/types";
 
 import { NavigationModulesWarning } from "./atoms";
 import BulkHeader from "./BulkHeader";
@@ -54,10 +54,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 	const isAllowedToCreate = usePermission(`navigation.createSite${selectedDefault}`);
 	const isAllowedToDelete = usePermission(`navigation.deleteSite${selectedDefault}`);
 
-	const navIds = useMemo(
-		() => currentDefaultsContent?.map((nav: IHeader | IFooter) => nav.id),
-		[currentDefaultsContent],
-	);
+	const navIds = useMemo(() => currentDefaultsContent?.map((nav) => nav.id), [currentDefaultsContent]);
 
 	const {
 		resetBulkSelection,
@@ -105,7 +102,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 		const isNavigationModulesChanged = Boolean(
 			currentSiteInfo?.navigationModules?.[currentType] &&
 				currentDefaultsContent.some(
-					(navigation) => navigation.component !== currentSiteInfo?.navigationModules[currentType],
+					(navigation) => navigation.component !== currentSiteInfo?.navigationModules?.[currentType],
 				),
 		);
 		setIsNavigationNotificationOpen(isNavigationModulesChanged);
@@ -251,7 +248,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 						hasFixedHeader={true}
 						tableRef={tableRef}
 					>
-						{currentDefaultsContent?.map((defaultContent: IHeader | IFooter) => {
+						{currentDefaultsContent?.map((defaultContent) => {
 							const isItemSelected = isSelected(defaultContent.id);
 							return (
 								<DefaultItem
@@ -315,7 +312,7 @@ interface IDefaultsProps {
 	lang: { locale: string; id: number | null };
 	siteLanguages: ILanguage[];
 	selectedDefault: string;
-	currentDefaultsContent: (IHeader | IFooter)[];
+	currentDefaultsContent: INavigation[];
 	totalItems: number;
 	currentSiteInfo: ISite | null;
 }

package/src/modules/Settings/Globals/NavigationModules/index.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction } from "react";
 
 import { Button, Modal } from "@ax/components";
 import { useModal } from "@ax/hooks";

package/src/modules/Settings/Globals/NavigationModules/style.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const Wrapper = styled.div`
   border-top: 1px solid ${(p) => p.theme.color.uiLine};
   margin: ${(p) => p.theme.spacing.m} 0;
-  padding: ${(p) => p.theme.spacing.m} 0;
+  padding-top: ${(p) => p.theme.spacing.m};
 `;
 
 const Heading = styled.div`
@@ -15,7 +15,6 @@ const Heading = styled.div`
 const Text = styled.div`
   ${(p) => p.theme.textStyle.uiM};
   color: ${(p) => p.theme.color.textMediumEmphasis};
-  width: calc(${(p) => p.theme.spacing.l} * 12);
 `;
 
 const Separator = styled.div`