@griddo/ax 11.14.4 → 11.15.0

package/src/components/MainWrapper/AppBar/atoms.tsx

@@ -1,8 +1,28 @@
-import { Button, Icon } from "@ax/components";
+import { useMemo } from "react";
+
+import { Button, Flag, FloatingMenu, Icon, Modal, Tooltip } from "@ax/components";
+import type { IActionMenuOption, ILanguage } from "@ax/types";
 
 import * as S from "./style";
 
-const ActionMenuItem = (item: any, color?: boolean) => {
+interface IMenuButton {
+	action: () => void;
+	disabled?: boolean;
+	label: string;
+	helpText?: string | null;
+}
+
+interface IMenu {
+	button?: IMenuButton | null;
+	options: IActionMenuOption[];
+}
+
+interface IDownArrowButtonProps {
+	inversed?: boolean;
+	disabled?: boolean;
+}
+
+const ActionMenuItem = (item: IActionMenuOption, color?: boolean) => {
 	const { icon, action, label } = item;
 	return (
 		<S.ActionItem data-testid="action-menu-item" className={color ? "" : "grey"} key={icon} onClick={action}>
@@ -12,47 +32,111 @@ const ActionMenuItem = (item: any, color?: boolean) => {
 	);
 };
 
-const ActionMenuBtn = (props: any) => {
-	const { menu } = props;
+const ActionMenuBtn = ({ menu }: { menu?: IMenu }) => {
+	if (!menu?.button) return null;
 	return (
-		menu?.button && (
-			<S.ButtonWrapper>
-				<Button type="button" buttonStyle="line" onClick={menu.button.action} disabled={menu.button.disabled}>
-					{menu.button.label}
-				</Button>
-				{menu.button.helpText && <S.HelpText>{menu.button.helpText}</S.HelpText>}
-			</S.ButtonWrapper>
-		)
+		<S.ButtonWrapper>
+			<Button type="button" buttonStyle="line" onClick={menu.button.action} disabled={menu.button.disabled}>
+				{menu.button.label}
+			</Button>
+			{menu.button.helpText && <S.HelpText>{menu.button.helpText}</S.HelpText>}
+		</S.ButtonWrapper>
 	);
 };
 
-const ActionMenu = (props: any) => {
-	const { menu } = props;
-	return (
-		<S.ActionMenu>
-			<S.ActionMenuTitle> More actions </S.ActionMenuTitle>
-			<ActionMenuBtn menu={menu} />
-			{menu?.options.map((item: any) => item && ActionMenuItem(item))}
-		</S.ActionMenu>
-	);
-};
+const ActionMenu = ({ menu }: { menu: IMenu }) => (
+	<S.ActionMenu>
+		<S.ActionMenuTitle> More actions </S.ActionMenuTitle>
+		<ActionMenuBtn menu={menu} />
+		{menu?.options.map((item) => item && ActionMenuItem(item))}
+	</S.ActionMenu>
+);
 
-const DownArrowButton = (props: any) => (
-	<S.IconWrapper inversed={props.inversed} disabled={props.disabled} data-testid="down-arrow-button-wrapper">
+const DownArrowButton = ({ inversed, disabled }: IDownArrowButtonProps) => (
+	<S.IconWrapper inversed={inversed} disabled={disabled} data-testid="down-arrow-button-wrapper">
 		<Icon name="DownArrow" />
 	</S.IconWrapper>
 );
 
-const ActionSimpleMenu = (props: any) => {
-	const { menu } = props;
-	return (
-		menu &&
-		menu.options.length > 0 && (
-			<S.ActionMenu data-testid="action-simple-menu">
-				{menu.options.map((item: any) => ActionMenuItem(item, true))}
-			</S.ActionMenu>
-		)
+const ActionSimpleMenu = ({ menu }: { menu?: IMenu }) =>
+	menu && menu.options.length > 0 ? (
+		<S.ActionMenu data-testid="action-simple-menu">
+			{menu.options.map((item) => item && ActionMenuItem(item, true))}
+		</S.ActionMenu>
+	) : null;
+
+const StatusBtn = ({ pageStatus }: { pageStatus: string }) => (
+	<S.StatusBtn data-testid="status-button">
+		<Icon name={pageStatus} size="24" />
+	</S.StatusBtn>
+);
+
+interface IPageStatusProps {
+	pageStatus?: string;
+	pageStatusActions?: IActionMenuOption[];
+	hasRightButton?: boolean;
+}
+
+const PageStatus = ({ pageStatus, pageStatusActions, hasRightButton }: IPageStatusProps) => {
+	const ps = pageStatus ?? "offline";
+	const statusMenu: IMenu = { options: pageStatusActions ?? [] };
+	const offset = hasRightButton ? -20 : -135;
+	const BoundStatusBtn = useMemo(() => () => <StatusBtn pageStatus={ps} />, [ps]);
+	return statusMenu.options && statusMenu.options.length > 0 ? (
+		<FloatingMenu Button={BoundStatusBtn} isInAppBar position="left" offset={offset}>
+			<ActionSimpleMenu menu={statusMenu} />
+		</FloatingMenu>
+	) : (
+		<Icon name={ps} size="24" />
 	);
 };
 
-export { ActionMenu, ActionSimpleMenu, DownArrowButton };
+const ErrorCenterBtn = () => (
+	<S.ErrorWrapper>
+		<Tooltip content="Error center" bottom>
+			<Icon name="alert" size="24" />
+		</Tooltip>
+	</S.ErrorWrapper>
+);
+
+interface ILanguageBtnProps {
+	language: { locale: string; id: number | null };
+	availableLanguages?: ILanguage[];
+}
+
+const LanguageBtn = ({ language, availableLanguages }: ILanguageBtnProps) => (
+	<>
+		<S.FlagWrapper data-testid="language-menu-btn">
+			<Flag name={language.locale} size="24" />
+		</S.FlagWrapper>
+		<S.LanguageTextWrapper data-testid="language-locale-label">{language.locale}</S.LanguageTextWrapper>
+		{!!availableLanguages?.length && <DownArrowButton />}
+	</>
+);
+
+interface IChangeLanguageModalProps {
+	isOpen: boolean;
+	hide: () => void;
+	title: string;
+	mainAction: { title: string; onClick: () => void };
+	secondaryAction: { title: string; onClick: () => void };
+}
+
+const ChangeLanguageModal = ({ isOpen, hide, title, mainAction, secondaryAction }: IChangeLanguageModalProps) => (
+	<Modal isOpen={isOpen} hide={hide} title={title} mainAction={mainAction} secondaryAction={secondaryAction}>
+		<S.ModalContent>
+			If you change without saving it, it will be lost. Do you want to discard your changes?
+		</S.ModalContent>
+	</Modal>
+);
+
+export {
+	ActionMenu,
+	ActionSimpleMenu,
+	ChangeLanguageModal,
+	DownArrowButton,
+	ErrorCenterBtn,
+	LanguageBtn,
+	PageStatus,
+	type IMenuButton,
+};

package/src/components/MainWrapper/AppBar/index.tsx

@@ -1,25 +1,31 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { type RouteComponentProps, withRouter } from "react-router-dom";
 
 import {
 	Button,
 	ErrorCenter,
 	ExportButton,
-	Flag,
 	FloatingMenu,
-	Icon,
 	IconAction,
 	LanguageMenu,
-	Modal,
 	SearchField,
 	Tabs,
+	Tag,
 	Tooltip,
 } from "@ax/components";
 import { getScheduleFormatDate, trimText } from "@ax/helpers";
 import { useModal } from "@ax/hooks";
-import type { IErrorItem, ILanguage } from "@ax/types";
+import type { IActionMenuOption, IErrorItem, ILanguage } from "@ax/types";
 
-import { ActionMenu, ActionSimpleMenu, DownArrowButton } from "./atoms";
+import {
+	ActionMenu,
+	ChangeLanguageModal,
+	DownArrowButton,
+	ErrorCenterBtn,
+	type IMenuButton,
+	LanguageBtn,
+	PageStatus,
+} from "./atoms";
 
 import * as S from "./style";
 
@@ -54,6 +60,7 @@ const AppBar = (props: IProps): JSX.Element => {
 		exportAction,
 		scheduledPublication,
 		isSaving,
+		showTagHidden = false,
 	} = props;
 
 	const publishedTooltip: Record<string, string> = {
@@ -69,9 +76,21 @@ const AppBar = (props: IProps): JSX.Element => {
 	const isScheduledPub = !!scheduledPublication && pageStatus === "scheduled";
 	const currentLang = availableLanguages?.find((lang) => lang.id === language?.id);
 
+	const hasLanguageOrMore = !!(language || pageStatus || rightButton || rightLineButton);
+	const hasStatusOrMore = !!(pageStatus || rightButton || rightLineButton);
+	const hasActionItems = !!(rightButton || rightLineButton);
+
+	const languageTooltip = typeof currentPageID === "number" ? "Add language" : undefined;
+
+	const classes = [fixedClass, additionalClass, hasAnimation && "animate"].filter(Boolean).join(" ");
+
 	const { isOpen, toggleModal } = useModal();
 	const [langSelected, setLangSelected] = useState<ILanguage | undefined>(currentLang);
 
+	useEffect(() => {
+		setLangSelected(currentLang);
+	}, [currentLang]);
+
 	const goToPages = () =>
 		typeof backLink === "string" ? props.history.push(backLink, { isFromEditor }) : props.history.goBack();
 
@@ -87,53 +106,6 @@ const AppBar = (props: IProps): JSX.Element => {
 		languageAction(item);
 	};
 
-	const LanguageBtn = () =>
-		language ? (
-			<>
-				<S.FlagWrapper data-testid="language-menu-btn">
-					<Flag name={language.locale} size="24" />
-				</S.FlagWrapper>
-				<S.LanguageTextWrapper data-testid="language-locale-label">{language.locale}</S.LanguageTextWrapper>
-				{!!availableLanguages?.length && <DownArrowButton />}
-			</>
-		) : (
-			<></>
-		);
-
-	const ErrorCenterBtn = () => (
-		<S.ErrorWrapper>
-			<Tooltip content="Error center" bottom>
-				<Icon name="alert" size="24" />
-			</Tooltip>
-		</S.ErrorWrapper>
-	);
-
-	const StatusBtn = () =>
-		pageStatus ? (
-			<S.StatusBtn data-testid="status-button">
-				<Icon name={pageStatus} size="24" />
-			</S.StatusBtn>
-		) : (
-			<></>
-		);
-
-	const statusMenu = {
-		options: pageStatusActions,
-	};
-
-	const PageStatus = () => {
-		const offset = rightButton || rightLineButton ? -20 : -135;
-		return statusMenu.options && statusMenu.options.length > 0 ? (
-			<FloatingMenu Button={StatusBtn} isInAppBar={true} position="left" offset={offset}>
-				<ActionSimpleMenu menu={statusMenu} />
-			</FloatingMenu>
-		) : (
-			<Icon name={pageStatus ?? "offline"} size="24" />
-		);
-	};
-
-	const modalText = <>If you change without saving it, it will be lost. Do you want to discard your changes?</>;
-
 	const mainAction = {
 		title: "Change language",
 		onClick: () => handleLanguage(langSelected),
@@ -147,24 +119,11 @@ const AppBar = (props: IProps): JSX.Element => {
 		},
 	};
 
-	const changeLanguageModalProps = {
-		isOpen,
-		hide: toggleModal,
-		title: "Change language",
-		mainAction,
-		secondaryAction,
-	};
-
-	const ChangeLanguageModal = () => (
-		<Modal {...changeLanguageModalProps}>
-			<S.ModalContent>{modalText}</S.ModalContent>
-		</Modal>
+	const BoundLanguageBtn = useMemo(
+		() => () => <LanguageBtn language={language!} availableLanguages={availableLanguages} />,
+		[language, availableLanguages],
 	);
 
-	const languageTooltip = typeof currentPageID === "number" && "Add language";
-
-	const classes = hasAnimation ? `${fixedClass} ${additionalClass} animate` : `${fixedClass} ${additionalClass}`;
-
 	return (
 		<S.Header className={classes} inversed={inversed} data-testid="appbar-header">
 			<S.WrapperTitle>
@@ -188,7 +147,7 @@ const AppBar = (props: IProps): JSX.Element => {
 							icons={tabs.icons}
 							active={tabs.selectedTab}
 							setSelectedTab={tabs.action}
-							isInAppBar={true}
+							isInAppBar
 							inversed={inversed}
 							disabled={tabs.disabled}
 						/>
@@ -207,17 +166,31 @@ const AppBar = (props: IProps): JSX.Element => {
 								closeOnInactive
 							/>
 						</S.SearchWrapper>
-						{(language || pageStatus || rightButton || rightLineButton) && <S.Separator />}
+						{hasLanguageOrMore && <S.Separator />}
+					</>
+				)}
+				{showTagHidden && (
+					<>
+						<S.TagWrapper>
+							<Tag text="Hidden" type="square" icon="hide" />
+						</S.TagWrapper>
+						{hasLanguageOrMore && <S.Separator />}
 					</>
 				)}
 				{language && availableLanguages && (
 					<>
-						<ChangeLanguageModal />
+						<ChangeLanguageModal
+							isOpen={isOpen}
+							hide={toggleModal}
+							title="Change language"
+							mainAction={mainAction}
+							secondaryAction={secondaryAction}
+						/>
 						<S.LanguageWrapper data-testid="language-wrapper">
 							<Tooltip content={languageTooltip} hideOnClick bottom>
 								<FloatingMenu
-									Button={LanguageBtn}
-									isInAppBar={true}
+									Button={BoundLanguageBtn}
+									isInAppBar
 									position="left"
 									offset={rightButton || rightLineButton ? 0 : -85}
 									disabled={!availableLanguages.length}
@@ -227,32 +200,36 @@ const AppBar = (props: IProps): JSX.Element => {
 										availableLanguages={availableLanguages}
 										currentLanguages={currentLanguages || availableLanguages}
 										setLanguage={handleLanguage}
-										isInAppBar={true}
+										isInAppBar
 										isDraft={pageStatus === "modified"}
 									/>
 								</FloatingMenu>
 							</Tooltip>
 						</S.LanguageWrapper>
-						{(pageStatus || rightButton || rightLineButton) && <S.Separator />}
+						{hasStatusOrMore && <S.Separator />}
 					</>
 				)}
 				{pageStatus && (
 					<>
 						<S.IconStatusWrapper data-testid="page-status-wrapper" last={!rightButton && !rightLineButton}>
 							<Tooltip content={publishedTooltip[pageStatus]} bottom>
-								<PageStatus />
+								<PageStatus
+									pageStatus={pageStatus}
+									pageStatusActions={pageStatusActions}
+									hasRightButton={!!(rightButton || rightLineButton)}
+								/>
 							</Tooltip>
 							{isScheduledPub && (
 								<S.ScheduledDate inversed={inversed}>{getScheduleFormatDate(scheduledPublication)}</S.ScheduledDate>
 							)}
 						</S.IconStatusWrapper>
-						{(rightButton || rightLineButton) && <S.Separator />}
+						{hasActionItems && <S.Separator />}
 					</>
 				)}
 				{isFromEditor && errors && errors.length > 0 && (
 					<>
 						<S.IconStatusWrapper last={false} data-testid="error-center-wrapper">
-							<FloatingMenu Button={ErrorCenterBtn} isInAppBar={true} position="left" offset={-20}>
+							<FloatingMenu Button={ErrorCenterBtn} isInAppBar position="left" offset={-20}>
 								<ErrorCenter errors={errors} actions={errorActions} />
 							</FloatingMenu>
 						</S.IconStatusWrapper>
@@ -278,7 +255,7 @@ const AppBar = (props: IProps): JSX.Element => {
 				)}
 				{downArrowMenu?.displayed && (downArrowMenu.button || downArrowMenu.options.length > 0) && (
 					<Tooltip content="Actions" hideOnClick bottom>
-						<FloatingMenu Button={DownArrowButton} isInAppBar={true} disabled={isSaving}>
+						<FloatingMenu Button={DownArrowButton} isInAppBar disabled={isSaving}>
 							<ActionMenu menu={downArrowMenu} />
 						</FloatingMenu>
 					</Tooltip>
@@ -290,16 +267,16 @@ const AppBar = (props: IProps): JSX.Element => {
 
 export interface IAppBarProps {
 	backLink?: boolean | string;
-	rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };
-	rightLineButton?: { label: string; disabled?: boolean; action: (e: any) => void };
+	rightButton?: { label: string; disabled?: boolean; action: () => void };
+	rightLineButton?: { label: string; disabled?: boolean; action: () => void };
 	tabs?: {
-		tabSet?: any;
+		tabSet?: any[];
 		icons?: { name: string; text: string }[];
 		selectedTab: string;
-		action: (e: any) => void;
+		action: (tab: string) => void;
 		disabled?: boolean;
 	};
-	downArrowMenu?: { displayed: boolean; options: any; button: any };
+	downArrowMenu?: { displayed: boolean; options: IActionMenuOption[]; button?: IMenuButton | null };
 	title: string;
 	subtitle?: string;
 	fixedAppBar?: boolean;
@@ -320,13 +297,14 @@ export interface IAppBarProps {
 		goToPackage?(): void;
 	};
 	isFromEditor?: boolean;
-	pageStatusActions?: any[];
+	pageStatusActions?: IActionMenuOption[];
 	hasAnimation?: boolean;
 	searchValue?: string;
 	isDirty?: boolean;
 	exportAction?(formats: (number | string)[]): void;
 	scheduledPublication?: string | null;
 	isSaving?: boolean;
+	showTagHidden?: boolean;
 }
 
 type IProps = IAppBarProps & RouteComponentProps;

package/src/components/MainWrapper/AppBar/style.tsx

@@ -233,6 +233,10 @@ const ScheduledDate = styled.div<{ inversed?: boolean }>`
   margin-left: ${(p) => p.theme.spacing.xs};
 `;
 
+const TagWrapper = styled.div`
+
+`;
+
 export {
 	ActionItem,
 	ActionMenu,
@@ -258,4 +262,5 @@ export {
 	WrapperEnd,
 	WrapperTabs,
 	WrapperTitle,
+	TagWrapper,
 };

package/src/components/MainWrapper/index.tsx

@@ -1,8 +1,7 @@
 import { Notification } from "@ax/components";
 import { useNetworkStatus } from "@ax/hooks";
-import type { IErrorItem, ILanguage } from "@ax/types";
 
-import AppBar from "./AppBar";
+import AppBar, { type IAppBarProps } from "./AppBar";
 
 import * as S from "./style";
 
@@ -28,47 +27,9 @@ const MainWrapper = (props: IWrapperProps): JSX.Element => {
 	);
 };
 
-export interface IWrapperProps {
+export interface IWrapperProps extends IAppBarProps {
 	children?: any[] | JSX.Element;
-	backLink?: boolean | string;
-	rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };
-	rightLineButton?: { label: string; disabled?: boolean; action: (e: any) => void };
-	title: string;
-	subtitle?: string;
-	fixedAppBar?: boolean;
-	additionalClass?: string;
-	downArrowMenu?: { displayed: boolean; options: any; button: any };
-	tabs?: {
-		tabSet?: any;
-		icons?: { name: string; text: string }[];
-		selectedTab: string;
-		action: (e: any) => void;
-		disabled?: boolean;
-	};
-	pageStatus?: string;
-	language?: { locale: string; id: number | null } | null;
-	availableLanguages?: ILanguage[];
-	currentLanguages?: ILanguage[];
-	inversed?: boolean;
-	currentPageID?: number;
 	fullWidth?: boolean;
-	isFromEditor?: boolean;
-	languageAction?: (lang: ILanguage) => void;
-	searchAction?(query: string): void;
-	filterSearchAction?(filter: string): void;
-	searchFilters?: any;
-	errors?: IErrorItem[];
-	errorActions?: {
-		goToError(editorID: number, tab: string, template: boolean, parentEditorID?: number): void;
-		goToPackage?(): void;
-	};
-	pageStatusActions?: any[];
-	hasAnimation?: boolean;
-	searchValue?: string;
-	isDirty?: boolean;
-	exportAction?(formats: (number | string)[]): void;
-	scheduledPublication?: string | null;
-	isSaving?: boolean;
 }
 
 export default MainWrapper;

package/src/containers/Navigation/Defaults/reducer.tsx

@@ -1,4 +1,4 @@
-import { IBreadcrumbItem, IModule, INavigation, INavPages, ISchema } from "@ax/types";
+import type { IBreadcrumbItem, IModule, INavigation, INavPages, ISchema } from "@ax/types";
 
 import {
 	SET_EDITOR_CONTENT,
@@ -30,7 +30,7 @@ export interface INavigationState {
 	selectedEditorID: number | undefined;
 	header: number | null;
 	footer: number | null;
-	currentDefaultsContent: any;
+	currentDefaultsContent: INavigation[];
 	totalItems: number;
 	currentNavigationLanguages: any[];
 	isNewTranslation: boolean;

package/src/containers/Sites/actions.tsx

@@ -16,7 +16,6 @@ import type {
 	IPage,
 	IQueryValue,
 	IRootState,
-	ISettingsForm,
 	ISite,
 	ISiteListConfig,
 	IThemeElements,
@@ -228,7 +227,7 @@ function getAllSites(): (dispatch: Dispatch) => Promise<void> {
 	};
 }
 
-function saveSettings(form: ISettingsForm): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
+function saveSettings(form: ISite): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
 			const {
@@ -770,7 +769,7 @@ function deleteAndRemoveFromSiteBulk(
 				}
 			}
 
-			return errors > 0 ? false : true;
+			return !(errors > 0);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/modules/Content/index.tsx

@@ -6,6 +6,7 @@ import {
 	EmptyState,
 	ErrorToast,
 	FilterTagsBar,
+	FloatingNote,
 	Loading,
 	MainWrapper,
 	Notification,
@@ -137,10 +138,6 @@ const Content = (props: IProps): JSX.Element => {
 		exportDataContent,
 	} = props;
 
-	if (!currentSiteInfo) {
-		throw new Error(`ERROR: User reached Content with null site info`);
-	}
-
 	const itemsPerPage = 50;
 	const firstPage = 1;
 
@@ -169,6 +166,8 @@ const Content = (props: IProps): JSX.Element => {
 	const isDataEditable = (!isStructuredData || currentStructuredData?.editable) ?? null;
 	const isDataPrivate = currentStructuredData?.private || false;
 	const isDataExportable = currentStructuredData?.exportable || false;
+	const title = currentSiteInfo ? currentSiteInfo.name : `Site Content`;
+	const isSiteLlmsHidden = currentSiteInfo.hidden;
 
 	const pagesIds = currentSitePages?.map((page) => page.id);
 	const dataIds = currentDataContent?.map((data) => data.id);
@@ -786,8 +785,6 @@ const Content = (props: IProps): JSX.Element => {
 
 	const content = isStructuredData ? mapStructuredData() : mapPages();
 
-	const title = currentSiteInfo ? currentSiteInfo.name : `Site Content`;
-
 	const options = {
 		filters: getOptionFilters(structuredData, activatedDataPacks),
 		values: getOptionValues(structuredData),
@@ -845,6 +842,11 @@ const Content = (props: IProps): JSX.Element => {
 		setPage(1);
 	};
 
+	const handleGoToSettings = () => {
+		const path = `/sites/settings/globals`;
+		setHistoryPush(path, false);
+	};
+
 	const rightButtonProps = isAllowedToCreatePages
 		? {
 				label: "New",
@@ -880,6 +882,7 @@ const Content = (props: IProps): JSX.Element => {
 			errors={errors}
 			searchValue={currentSearch}
 			exportAction={exportContent}
+			showTagHidden={isSiteLlmsHidden}
 		>
 			<S.ContentListWrapper>
 				<ContentFilters
@@ -919,6 +922,21 @@ const Content = (props: IProps): JSX.Element => {
 							resetError={() => setNotification(null)}
 						/>
 					)}
+					{isSiteLlmsHidden && (
+						<S.NoteWrapper>
+							<FloatingNote
+								icon="working"
+								message={
+									<>
+										Please note that this is site is <strong>hidden from search engines and AI models</strong>. To index
+										it, go to <strong>General Settings</strong>.
+									</>
+								}
+								btnText="Go to Settings"
+								onClick={handleGoToSettings}
+							/>
+						</S.NoteWrapper>
+					)}
 					<TableList
 						tableHeader={Header}
 						pagination={pagination}
@@ -978,7 +996,7 @@ const Content = (props: IProps): JSX.Element => {
 };
 
 const mapStateToProps = (state: IRootState) => ({
-	currentSiteInfo: state.sites.currentSiteInfo,
+	currentSiteInfo: state.sites.currentSiteInfo!,
 	currentSitePages: state.sites.currentSitePages,
 	allSitePages: state.sites.allSitePages,
 	filter: state.sites.currentFilter,
@@ -1085,7 +1103,7 @@ const mapDispatchToProps = {
 };
 
 interface IPagesProps {
-	currentSiteInfo: ISite | null;
+	currentSiteInfo: ISite;
 	currentSitePages: IPage[];
 	allSitePages: IPage[];
 	filter: any;

package/src/modules/Content/style.tsx

@@ -55,6 +55,10 @@ const SearchTags = styled.div`
   }
 `;
 
+const NoteWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`};
+`;
+
 const LoadingWrapper = styled.div`
   position: relative;
   width: 100%;
@@ -71,4 +75,5 @@ export {
 	SelectWrapper,
 	NotificationWrapper,
 	SearchTags,
+	NoteWrapper,
 };