@griddo/ax 11.14.4 → 11.14.5-rc.0

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

@@ -68,12 +68,17 @@ const UrlCell = styled(Cell)`
 const LiveCell = styled(Cell)`
   flex: 0 0 100px;
   align-items: center;
-  width: 100px;
   svg {
     width: ${(p) => p.theme.spacing.m};
     height: ${(p) => p.theme.spacing.m};
   }
 `;
+
+const TagCell = styled(Cell)`
+  flex: 0 0 110px;
+  align-items: center;
+`;
+
 const DateCell = styled(Cell)`
   flex: 0 0 200px;
   align-items: center;
@@ -109,4 +114,5 @@ export {
 	DateCell,
 	ActionsCell,
 	ModalContent,
+	TagCell,
 };

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

@@ -1,36 +1,85 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import type { ILanguage, IRootState, ISettingsForm } from "@ax/types";
+import { ErrorToast, FieldsBehavior, Modal } from "@ax/components";
 import { slugify } from "@ax/helpers";
-import { ErrorToast, FieldsBehavior } from "@ax/components";
+import type { ILanguage, IModal, IRootState, ISite } from "@ax/types";
 
 import * as S from "./style";
 
+const INITIAL_FORM_STATE: Partial<ISite> = {
+	name: "",
+	defaultLanguage: null,
+	path: "",
+	domain: null,
+	hidden: true,
+	timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+};
+
+const REQUIRED_MODAL_FIELDS = ["name", "defaultLanguage", "domain", "path"] as const;
+
 const SiteModal = (props: ISiteModalProps): JSX.Element => {
-	const { languages, form, setForm } = props;
+	const { languages, isOpen, toggleModal, saveSettings, setHistoryPush, isSaving } = props;
+
+	const [form, setForm] = useState(INITIAL_FORM_STATE);
 	const { name, defaultLanguage, path, domain } = form;
 	const globalDefaultLang = languages?.find((lang: ILanguage) => lang.isDefault);
 
-	const updateForm = (newValue: Record<string, string | number>) =>
-		setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
+	const updateForm = useCallback(
+		(newValue: Record<string, string | number>) => setForm((state: Partial<ISite>) => ({ ...state, ...newValue })),
+		[],
+	);
 
-	const setNameValue = (value: string) => updateForm({ name: value, path: slugify(value) });
-	const setLangValue = (value: number) => updateForm({ defaultLanguage: value });
-	const setPathValue = (value: string) => updateForm({ path: value });
-	const setDomainValue = (value: number) => updateForm({ domain: value });
+	const setNameValue = useCallback((value: string) => updateForm({ name: value, path: slugify(value) }), [updateForm]);
+	const setLangValue = useCallback((value: number) => updateForm({ defaultLanguage: value }), [updateForm]);
+	const setPathValue = useCallback((value: string) => updateForm({ path: value }), [updateForm]);
+	const setDomainValue = useCallback((value: number) => updateForm({ domain: value }), [updateForm]);
 
 	useEffect(() => {
-		if (globalDefaultLang) {
-			setForm((state: ISettingsForm) => ({ ...state, defaultLanguage: globalDefaultLang.id }));
+		if (isOpen && globalDefaultLang) {
+			setLangValue(globalDefaultLang.id);
+		} else if (!isOpen) {
+			setForm(INITIAL_FORM_STATE);
+		}
+	}, [isOpen, globalDefaultLang, setLangValue]);
+
+	const isFieldValid = (value: any): boolean => {
+		return typeof value === "string" ? value.trim().length > 0 : value !== null && value !== undefined;
+	};
+
+	const isSubmitDisabled =
+		isSaving || !REQUIRED_MODAL_FIELDS.every((field) => isFieldValid(form[field as keyof typeof form]));
+
+	const saveSiteSettings = useCallback(async () => {
+		const result = await saveSettings(form);
+		if (result) {
+			const contentPath = "/sites/settings/globals";
+			setHistoryPush(contentPath, false);
+			setForm(INITIAL_FORM_STATE);
 		}
-	}, [globalDefaultLang, setForm]);
+	}, [form, saveSettings, setHistoryPush]);
 
-	const slugHelpText =
-		"The path is for the site on this language. Please, fill with the name of the site. Example: /the-site-url";
+	const handleClose = useCallback(() => {
+		setForm(INITIAL_FORM_STATE);
+		toggleModal();
+	}, [toggleModal]);
+
+	const mainAction = {
+		title: isSaving ? "Creating..." : "Create site",
+		onClick: saveSiteSettings,
+		disabled: isSubmitDisabled,
+	};
+	const secondaryAction = { title: "Cancel", onClick: handleClose };
 
 	return (
-		<>
+		<Modal
+			isOpen={isOpen}
+			hide={handleClose}
+			size="M"
+			title="New Site"
+			mainAction={mainAction}
+			secondaryAction={secondaryAction}
+		>
 			<ErrorToast size="l" />
 			<S.Form data-testid="site-modal-form">
 				<S.FieldsWrapper>
@@ -71,24 +120,29 @@ const SiteModal = (props: ISiteModalProps): JSX.Element => {
 						mandatory={true}
 						placeholder="/site"
 						onChange={setPathValue}
-						helptext={slugHelpText}
+						helptext="The path is for the site on this language. Please, fill with the name of the site. Example: /the-site-url"
 					/>
 				</S.FieldsWrapper>
 			</S.Form>
-		</>
+		</Modal>
 	);
 };
 
 const mapStateToProps = (state: IRootState) => ({
 	languages: state.app.globalLangs,
+	isSaving: state.app.isSaving,
 });
 
-interface IStateProps {
+interface IReduxProps {
 	languages?: ILanguage[];
-	form: ISettingsForm;
-	setForm: React.Dispatch<React.SetStateAction<ISettingsForm>>;
+	isSaving: boolean;
+}
+
+interface IOwnProps extends IModal {
+	saveSettings: (form: Partial<ISite>) => Promise<boolean>;
+	setHistoryPush: (path: string, isEditor?: boolean) => void;
 }
 
-type ISiteModalProps = IStateProps;
+type ISiteModalProps = IReduxProps & IOwnProps;
 
-export default connect(mapStateToProps, null)(SiteModal);
+export default connect(mapStateToProps)(SiteModal);

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

@@ -1,5 +1,5 @@
+import { Image, Tooltip } from "@ax/components";
 import { trimText } from "@ax/helpers";
-import { Tooltip, Image } from "@ax/components";
 
 import * as S from "./style";
 
@@ -15,7 +15,7 @@ const ItemName = (props: IItemNameProps): JSX.Element => {
 };
 
 const ItemThumbnail = (props: IItemThumbnailProps): JSX.Element => {
-	const { src, width, height, borderRadius } = props;
+	const { src, width = 295, height, borderRadius } = props;
 	const thumbnailPlaceholder = "/img/placeholder/thumbnail@1x.png";
 	return src ? (
 		<S.ImageWrapper data-testid="sites-item-thumbnail-wrapper" borderRadius={borderRadius} height={height}>
@@ -38,8 +38,8 @@ interface IItemNameProps {
 }
 
 interface IItemThumbnailProps {
-	src?: string;
-	width: number;
+	src?: string | null;
+	width?: number;
 	height: number;
 	borderRadius?: boolean;
 }

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

@@ -7,7 +7,6 @@ import {
 	FilterTagsBar,
 	Loading,
 	MainWrapper,
-	Modal,
 	Pagination,
 	SearchTagsBar,
 	TableList,
@@ -16,16 +15,7 @@ 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 type {
-	ICheck,
-	IGetSitesParams,
-	IQueryValue,
-	IRootState,
-	ISettingsForm,
-	ISite,
-	ISiteListConfig,
-	IUser,
-} from "@ax/types";
+import type { ICheck, IGetSitesParams, IQueryValue, IRootState, ISite, ISiteListConfig, IUser } from "@ax/types";
 
 import AllSitesHeader from "./AllSitesHeader";
 import GridSiteItem from "./GridView/GridSiteItem";
@@ -39,13 +29,6 @@ import WelcomeModal from "./WelcomeModal";
 
 import * as S from "./style";
 
-const initialState = {
-	name: "",
-	defaultLanguage: null,
-	path: "",
-	domain: null,
-};
-
 const itemsPerPage = 30;
 const firstPage = 1;
 
@@ -77,7 +60,6 @@ const SitesList = (props: ISitesListProps) => {
 	const isMount = useIsMount();
 
 	const [page, setPage] = useState(firstPage);
-	const [form, setForm] = useState<ISettingsForm>(initialState);
 
 	const currentConfig = useMemo(() => {
 		const raw = localStorage.getItem("sitesConfig");
@@ -99,6 +81,8 @@ const SitesList = (props: ISitesListProps) => {
 	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const errorRef = useRef<HTMLDivElement>(null);
+	const { isOpen, toggleModal } = useModal();
+	const { isOpen: isWelcomeOpen, toggleModal: toggleWelcomeModal } = useModal();
 
 	const scrollToTop = useCallback(() => {
 		if (tableRef.current) {
@@ -125,9 +109,6 @@ const SitesList = (props: ISitesListProps) => {
 		currPage: page,
 	};
 
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isWelcomeOpen, toggleModal: toggleWelcomeModal } = useModal();
-
 	const rightButtonProps = allowedToCreateSite
 		? {
 				label: "New",
@@ -186,21 +167,6 @@ const SitesList = (props: ISitesListProps) => {
 		}
 	}, [error]);
 
-	const saveSiteSettings = async () => {
-		const result = await saveSettings(form);
-		if (result) {
-			const contentPath = "/sites/settings/globals";
-			setHistoryPush(contentPath, false);
-		}
-	};
-
-	const isSubmitDisabled =
-		Object.values(form).filter((el) => (typeof el === "string" ? el.trim().length : el)).length !==
-		Object.keys(initialState).length;
-
-	const mainAction = { title: "Create site", onClick: saveSiteSettings, disabled: isSubmitDisabled };
-	const secondaryAction = { title: "Cancel", onClick: toggleModal };
-
 	const toggleRecentSites = () => {
 		const updatedConfig = { ...currentConfig, displayRecentSites: !isRecentSitesListDisplayed };
 		setListConfig(updatedConfig);
@@ -401,16 +367,12 @@ const SitesList = (props: ISitesListProps) => {
 					</S.AllSitesListWrapper>
 				)}
 			</S.SitesListWrapper>
-			<Modal
+			<SiteModal
 				isOpen={isOpen}
-				hide={toggleModal}
-				size="M"
-				title="New Site"
-				mainAction={mainAction}
-				secondaryAction={secondaryAction}
-			>
-				<SiteModal form={form} setForm={setForm} />
-			</Modal>
+				toggleModal={toggleModal}
+				saveSettings={saveSettings}
+				setHistoryPush={setHistoryPush}
+			/>
 			<WelcomeModal isOpen={isWelcomeOpen} toggleModal={toggleWelcomeModal} />
 		</MainWrapper>
 	);
@@ -444,7 +406,7 @@ const mapStateToProps = (state: IRootState) => ({
 
 interface IDispatchProps {
 	setHistoryPush(path: string, isEditor?: boolean): void;
-	saveSettings(form: ISettingsForm): Promise<boolean>;
+	saveSettings(form: Partial<ISite>): Promise<boolean>;
 	getSites(params: IGetSitesParams): Promise<void>;
 	publishSitesBulk(ids: number[], params?: IGetSitesParams): Promise<void>;
 	unpublishSitesBulk(ids: number[], params?: IGetSitesParams): Promise<void>;

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

@@ -51,19 +51,23 @@ const EmptyStateWrapper = styled.div`
 `;
 
 const ImageWrapper = styled.div<{ borderRadius?: boolean; height: number }>`
-  height: ${(p) => (p.height ? p.height : 199)}px;
+  width: 100%;
+  overflow: hidden;
   img {
+    max-width: 100%;
+    width: 100%;
+    display: block;
     border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
     object-fit: cover;
-    height: 100%;
+    height: ${(p) => (p.height ? p.height : 199)}px;
   }
 `;
 
-const Thumbnail = styled.div<{ backgroundUrl: string; height: number; width: number; borderRadius?: boolean }>`
+const Thumbnail = styled.div<{ backgroundUrl: string; height: number; width?: number; borderRadius?: boolean }>`
   background: url(${(p) => p.backgroundUrl}) no-repeat center;
   background-size: cover;
   height: ${(p) => p.height}px;
-  width: ${(p) => p.width}px;
+  width: ${(p) => (p.width ? `${p.width}px` : "100%")};
   border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
 `;
 

package/src/modules/Users/UserForm/index.tsx

@@ -48,7 +48,7 @@ const UserForm = (props: IProps) => {
 	const { isDirty } = shouldBeSaved(user, form);
 
 	const isSameUser = currentUser && currentUser.id === user.id;
-	const isEditDisabled = currentUser && !currentUser.isSuperAdmin && isSiteView && !isSameUser;
+	const isEditDisabled = !!currentUser && !currentUser.isSuperAdmin && isSiteView && !isSameUser;
 
 	useEffect(() => {
 		if (form.roles.length === 0) {

package/src/types/index.tsx

@@ -156,13 +156,18 @@ export interface ISite {
 	defaultLanguage: number | null;
 	path: string;
 	timezone: string;
-	favicon: string;
-	smallAvatar: string;
-	bigAvatar: string;
-	thumbnail: string;
+	favicon: string | null;
+	smallAvatar: string | null;
+	bigAvatar: string | null;
+	thumbnail: string | null;
 	domain: number | null;
 	lastAccess?: string;
-	navigationModules: any;
+	navigationModules: {
+		header: string;
+		footer: string;
+	} | null;
+	hidden: boolean;
+	showSitemapInRobots: boolean;
 }
 
 export interface IRecentSite {
@@ -657,23 +662,6 @@ export interface ISiteLanguage {
 	isDefault: boolean;
 }
 
-export interface ISettingsForm {
-	name: string;
-	defaultLanguage: number | null;
-	path: string;
-	domain: number | null;
-	timezone?: string;
-	theme?: string;
-	favicon?: IImage | string | null;
-	smallAvatar?: IImage | string | null;
-	bigAvatar?: IImage | string | null;
-	thumbnail?: IImage | string | null;
-	navigationModules?: {
-		header: string;
-		footer: string;
-	};
-}
-
 export interface IDataSource {
 	id: string;
 	title: string;
@@ -910,6 +898,7 @@ export interface IDomainRobot {
 	path: string;
 	fullUrl: string;
 	content: string;
+	computedContent: string;
 }
 
 export interface IRedirect {