@griddo/ax 11.13.2 → 11.13.3-rc.1

package/src/components/Browser/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 
 import type { IShareData } from "@ax/api";
 import { shareToken as shareTokenApi } from "@ax/api";
-import { BrowserContent, Icon, OcassionalToast, Select, SharePageModal, Toast, Tooltip } from "@ax/components";
+import { BrowserContent, Icon, Loading, OcassionalToast, Select, SharePageModal, Toast, Tooltip } from "@ax/components";
 import { findByEditorID } from "@ax/forms";
 import { DEV_NOW, getShareTokenInfo } from "@ax/helpers";
 import { useModal, useOnMessageReceivedFromIframe, useToast } from "@ax/hooks";
@@ -65,10 +65,10 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	const isKeywordsEditor = editorType === "keywords";
 	const isZoomEditor = isPageEditor || isHeadingsEditor || isKeywordsEditor;
 
-	const frameWrapperRef = useRef<HTMLDivElement>(null);
-
+	const [isIframeLoading, setIsIframeLoading] = useState(!!showIframe);
 	const [previewResolution, setPreviewResolution] = useState("desktop");
 	const [dimensions, setDimensions] = useState({ resolution: DEFAULT_RESOLUTION, zoom: "100" });
+	const frameWrapperRef = useRef<HTMLDivElement>(null);
 
 	const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}${headingFilterParam}${keywordsFilterParam}`;
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
@@ -297,6 +297,11 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 							/>
 						)}
 						<S.FrameWrapper hasBorder={isZoomEditor} isFormEditor={isFormEditor} data-testid="navbar-iframe-wrapper">
+							{isIframeLoading && (
+								<S.FrameLoading>
+									<Loading />
+								</S.FrameLoading>
+							)}
 							{isPreview ? (
 								<iframe
 									title="Preview"
@@ -305,6 +310,8 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 									src={urlPreview}
 									loading="lazy"
 									className="frame-content"
+									onLoad={() => setIsIframeLoading(false)}
+									style={{ visibility: isIframeLoading ? "hidden" : "visible" }}
 								/>
 							) : (
 								<div
@@ -321,11 +328,13 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 										src={urlPreview}
 										loading="lazy"
 										className="frame-content"
+										onLoad={() => setIsIframeLoading(false)}
 										style={{
 											display: "block",
 											transform: isZoomEditor ? `scale(${parseInt(dimensions.zoom) / 100})` : "scale(1)",
 											transformOrigin: "0 0",
 											height: isZoomEditor ? `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%` : "100%",
+											visibility: isIframeLoading ? "hidden" : "visible",
 										}}
 									/>
 								</div>

package/src/components/Browser/style.tsx

@@ -78,6 +78,12 @@ const OuterContainer = styled.div`
   height: 100%;
 `;
 
+const FrameLoading = styled.div`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+`;
+
 const Wrapper = styled.div`
   border-left: 1px solid ${(p) => p.theme.color.uiLine};
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
@@ -146,4 +152,5 @@ export {
 	ResolutionWrapper,
 	ZoomWrapper,
 	SelectLabel,
+	FrameLoading,
 };

package/src/components/ConfigPanel/Form/index.tsx

@@ -1,18 +1,25 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
-import { ISchema, ISchemaTab, ISchemaField } from "@ax/types";
 import { Tabs } from "@ax/components";
 import { usePermission } from "@ax/hooks";
+import type { ISchema, ISchemaField, ISchemaTab } from "@ax/types";
 
 import ConnectedField from "./ConnectedField";
 
 import * as S from "./style";
 
+const tabPermissions: Record<string, string> = {
+	content: "content",
+	config: "config",
+	"seo & analytics": "seo",
+};
+
 export const Form = (props: IFormProps): JSX.Element => {
 	const {
 		schema,
 		selectedTab,
 		setSelectedTab,
+		setSelectedContent,
 		actions,
 		isPage,
 		isGlobal,
@@ -37,15 +44,19 @@ export const Form = (props: IFormProps): JSX.Element => {
 		(!isGlobal && isAllowedToEditConfigPages) || (isGlobal && isAllowedToEditGlobalData);
 	const isAllowedToEditPageSEO = (!isGlobal && isAllowedToEditSiteSeo) || (isGlobal && isAllowedToEditGlobalSeo);
 
+	const permissionsByTab: Record<string, boolean | undefined> = {
+		content: isAllowedToEditPageContent,
+		config: isAllowedToEditPageConfig,
+		seo: isAllowedToEditPageSEO,
+	};
+
 	const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title.toLowerCase() === selectedTab);
-	const setTab = (tab: string) => setSelectedTab(tab);
+
+	const goTo = (editorID: number) => setSelectedContent(editorID);
 
 	const generateFields = (field: ISchemaField) => {
-		const { setSelectedContent } = props;
 		const { key, whiteList } = field;
 
-		const goTo = (editorID: number) => setSelectedContent(editorID);
-
 		return (
 			<ConnectedField
 				selectedTab={selectedTab}
@@ -67,48 +78,47 @@ export const Form = (props: IFormProps): JSX.Element => {
 		);
 	};
 
-	const getTabs = () => {
-		let mappedTabs;
+	const getTabs = (): string[] => {
 		const isHeader = schema.type === "header";
 		const isPageSchema = schema.schemaType === "page";
+
 		if (isHeader && isPage) {
-			mappedTabs = schema.configTabs
-				.map((tab: ISchemaTab) => {
-					const hasModifiableFields = tab.fields.some((field: any) => field.modifiable);
-					return hasModifiableFields && tab.title;
-				})
-				.filter((value: string | boolean) => !!value);
-		} else {
-			mappedTabs = schema.configTabs.reduce((acc: string[], curr: ISchemaTab) => {
-				const currTitle = curr.title.toLowerCase();
-				if (
-					!isPageSchema ||
-					(isPageSchema &&
-						((currTitle === "content" && isAllowedToEditPageContent) ||
-							(currTitle === "config" && isAllowedToEditPageConfig) ||
-							(currTitle === "seo & analytics" && isAllowedToEditPageSEO)))
-				) {
-					return [...acc, currTitle];
-				}
-				return acc;
-			}, []);
+			return schema.configTabs
+				.filter((tab) => tab.fields.some((field: any) => field.modifiable))
+				.map((tab) => tab.title);
 		}
 
-		return mappedTabs;
+		return schema.configTabs
+			.filter((tab: ISchemaTab) => {
+				const currTitle = tab.title.toLowerCase();
+				const permKey = tabPermissions[currTitle];
+				return !isPageSchema || (permKey && permissionsByTab[permKey]);
+			})
+			.map((tab: ISchemaTab) => tab.title.toLowerCase());
 	};
 
 	const tabs = getTabs();
 
-	const handleRestoreHeader = () =>
-		actions.restorePageNavigationAction && actions.restorePageNavigationAction("header");
+	const handleRestore = (type: "header" | "footer") => actions.restorePageNavigationAction?.(type);
 
-	const handleRestoreFooter = () =>
-		actions.restorePageNavigationAction && actions.restorePageNavigationAction("footer");
+	const renderRestoreNotice = (type: "header" | "footer", value?: number | null) => {
+		if (selectedTab !== "content" || isGlobal || value !== 0) return null;
+
+		return (
+			<S.FieldWrapper>
+				This page doesn&apos;t have a {type}. Click{" "}
+				<S.Link data-testid={`${type}-link`} onClick={() => handleRestore(type)}>
+					here
+				</S.Link>{" "}
+				to restore it.
+			</S.FieldWrapper>
+		);
+	};
 
 	return (
 		<S.Wrapper data-testid="form-section">
 			<S.TabsWrapper headerHeight={headerHeight}>
-				<Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
+				<Tabs tabs={tabs} active={selectedTab} setSelectedTab={setSelectedTab} />
 			</S.TabsWrapper>
 			{selectedTab === "content" && isEditLive && (
 				<S.FieldWrapper>
@@ -116,25 +126,9 @@ export const Form = (props: IFormProps): JSX.Element => {
 					published version, you should <strong>discard or publish your draft</strong>.
 				</S.FieldWrapper>
 			)}
-			{selectedTab === "content" && !isGlobal && header === 0 && (
-				<S.FieldWrapper>
-					This page doesn&apos;t have a header. Click{" "}
-					<S.Link data-testid="header-link" onClick={handleRestoreHeader}>
-						here
-					</S.Link>{" "}
-					to restore it.
-				</S.FieldWrapper>
-			)}
-			{selectedTab === "content" && !isGlobal && footer === 0 && (
-				<S.FieldWrapper>
-					This page doesn&apos;t have a footer. Click{" "}
-					<S.Link data-testid="footer-link" onClick={handleRestoreFooter}>
-						here
-					</S.Link>{" "}
-					to restore it.
-				</S.FieldWrapper>
-			)}
-			{tabContent && tabContent.fields.map((field: ISchemaField) => generateFields(field))}
+			{renderRestoreNotice("header", header)}
+			{renderRestoreNotice("footer", footer)}
+			{tabContent?.fields.map((field: ISchemaField) => generateFields(field))}
 		</S.Wrapper>
 	);
 };

package/src/components/Fields/AnalyticsField/PageAnalytics/atoms.tsx

@@ -1,10 +1,8 @@
-import React from "react";
-
 import { FieldsBehavior } from "@ax/components";
 import { splitAndTrim } from "@ax/helpers";
-import { IAnalytics, IDimension } from "@ax/types";
+import type { IAnalytics, IDimension } from "@ax/types";
 
-import { IState } from "..";
+import type { IState } from "..";
 import * as S from "../style";
 
 const DimensionsGroup = (props: {
@@ -25,11 +23,10 @@ const DimensionsGroup = (props: {
 	return (
 		<>
 			<S.FieldsDivider />
-			{groupDimensions &&
-				groupDimensions.map(
-					(dimension, idx) =>
-						dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />,
-				)}
+			{groupDimensions?.map(
+				(dimension, idx) =>
+					dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />,
+			)}
 		</>
 	);
 };
@@ -47,10 +44,9 @@ const DimensionsSelection = (props: {
 	return (
 		<>
 			{selectedDimensions?.length ? <S.FieldsDivider /> : <></>}
-			{selectedDimensions &&
-				selectedDimensions.map((dimension, idx) => (
-					<DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
-				))}
+			{selectedDimensions?.map((dimension, idx) => (
+				<DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
+			))}
 		</>
 	);
 };

package/src/components/Fields/AnalyticsField/PageAnalytics/index.tsx

@@ -1,26 +1,32 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-import { NoteField, FieldsBehavior } from "@ax/components";
+import { FieldsBehavior, NoteField } from "@ax/components";
 
-import { IAnalyticsFieldProps, IState } from "..";
-import { DimensionsGroup, DimensionsSelection } from "./atoms";
+import type { IAnalyticsFieldProps, IState } from "..";
 import * as S from "../style";
+import { DimensionsGroup, DimensionsSelection } from "./atoms";
+
+const initialState: IState = {
+	contentSelect: "",
+	groupSelect: "",
+	dimensionsSelect: [],
+	values: {},
+};
 
 const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 	const { value, onChange, analytics, disabled } = props;
 
-	const initialState = {
-		contentSelect: "",
-		groupSelect: "",
-		dimensionsSelect: [],
-		values: {},
-	};
-
 	const [state, setState] = useState<IState>(value || initialState);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	const isMountRef = useRef(true);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: onChange is not memoized by parent, adding it causes infinite loop
 	useEffect(() => {
-		onChange && onChange(state);
+		if (isMountRef.current) {
+			isMountRef.current = false;
+			return;
+		}
+		onChange?.(state);
 	}, [state]);
 
 	const handleContentSelect = (contentSelect: string) => {
@@ -28,7 +34,7 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 	};
 
 	const handleGroupSelect = (groupSelect: string) => {
-		setState((state: IState) => ({ ...state, groupSelect, values: {} }));
+		setState((prev: IState) => ({ ...prev, groupSelect, values: {} }));
 	};
 
 	const handleDimensionsSelect = (selection: string[]) => {
@@ -36,15 +42,17 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 		let dimensionsSelect = selection;
 
 		if (selection.includes("all")) {
-			dimensionsSelect = analytics.dimensions?.map((dimension) => dimension.name);
+			dimensionsSelect = analytics.dimensions?.map((dimension) => dimension.name) ?? [];
 		}
 
-		dimensionsSelect?.forEach((dimension) => (values[dimension] = state.values[dimension]));
-		setState((state: IState) => ({ ...state, dimensionsSelect, values }));
+		dimensionsSelect.forEach((dimension) => {
+			values[dimension] = state.values[dimension];
+		});
+		setState((prev: IState) => ({ ...prev, dimensionsSelect, values }));
 	};
 
 	const setDimension = (value: Record<string, string>) => {
-		setState((state: IState) => ({ ...state, values: { ...state.values, ...value } }));
+		setState((prev: IState) => ({ ...prev, values: { ...prev.values, ...value } }));
 	};
 
 	const contentOptions = [
@@ -58,10 +66,11 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 		},
 	];
 
-	const groupOptions: { label: string; value: string }[] = [];
-	analytics.groups?.forEach((group) => {
-		groupOptions.push({ label: group.name, value: group.name });
-	});
+	const groupOptions =
+		analytics.groups?.map((group) => ({
+			label: group.name,
+			value: group.name,
+		})) ?? [];
 
 	const noteText = (
 		<>
@@ -82,15 +91,12 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 			value: "all",
 			title: "Select All",
 		},
-	];
-	analytics.dimensions?.forEach((dimension) => {
-		const option = {
+		...(analytics.dimensions?.map((dimension) => ({
 			name: dimension.name,
 			value: dimension.name,
 			title: dimension.name,
-		};
-		dimensionOptions.push(option);
-	});
+		})) ?? []),
+	];
 
 	return (
 		<>
@@ -133,7 +139,9 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 						disabled={disabled}
 						floating
 					/>
-					{!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension, disabled }} />}
+					{state.dimensionsSelect.length > 0 && (
+						<DimensionsSelection {...{ analytics, state, setDimension, disabled }} />
+					)}
 				</>
 			)}
 		</>

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/atoms.tsx

@@ -1,10 +1,8 @@
-import React from "react";
-
 import { FieldsBehavior } from "@ax/components";
 import { splitAndTrim } from "@ax/helpers";
-import { IAnalytics, IDimension } from "@ax/types";
+import type { IAnalytics, IDimension } from "@ax/types";
 
-import { IState } from "..";
+import type { IState } from "..";
 
 const TemplateDimensions = (props: ITemplateDimensions): JSX.Element => {
 	const { analytics, state, setDimension, dimensionNames, disabled } = props;
@@ -16,11 +14,10 @@ const TemplateDimensions = (props: ITemplateDimensions): JSX.Element => {
 
 	return (
 		<>
-			{groupDimensions &&
-				groupDimensions.map(
-					(dimension, idx) =>
-						dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />,
-				)}
+			{groupDimensions?.map(
+				(dimension, idx) =>
+					dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />,
+			)}
 		</>
 	);
 };
@@ -37,10 +34,9 @@ const DimensionsSelection = (props: {
 
 	return (
 		<>
-			{selectedDimensions &&
-				selectedDimensions.map((dimension, idx) => (
-					<DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
-				))}
+			{selectedDimensions?.map((dimension, idx) => (
+				<DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
+			))}
 		</>
 	);
 };

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { FieldsBehavior } from "@ax/components";
 
-import { IAnalyticsFieldProps, IState } from "..";
-import { getTemplateDimensions } from "../utils";
-import { TemplateDimensions, DimensionsSelection } from "./atoms";
+import type { IAnalyticsFieldProps, IState } from "..";
 import * as S from "../style";
+import { getTemplateDimensions } from "../utils";
+import { DimensionsSelection, TemplateDimensions } from "./atoms";
 
 const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 	const { value, onChange, analytics, template, disabled } = props;
@@ -17,28 +17,32 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 
 	const [state, setState] = useState<IState>({ ...initialState, ...value });
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	// biome-ignore lint/correctness/useExhaustiveDependencies: onChange is not memoized by parent, adding it causes infinite loop
 	useEffect(() => {
-		onChange && onChange(state);
+		onChange?.(state);
 	}, [state]);
 
 	const templateDimensions = getTemplateDimensions(analytics.groups, template);
 
 	const handleDimensionsSelect = (selection: string[]) => {
 		const values: Record<string, string> = {};
-		templateDimensions.forEach((dimension) => (values[dimension] = state.values[dimension]));
+		templateDimensions.forEach((dimension) => {
+			values[dimension] = state.values[dimension];
+		});
 		let dimensionsSelect = selection;
 
 		if (selection.includes("all")) {
 			dimensionsSelect = dimensionOptions.map((dimension) => dimension.name);
 		}
 
-		dimensionsSelect?.forEach((dimension) => (values[dimension] = state.values[dimension]));
-		setState((state: IState) => ({ ...state, dimensionsSelect, values }));
+		dimensionsSelect?.forEach((dimension) => {
+			values[dimension] = state.values[dimension];
+		});
+		setState((prev: IState) => ({ ...prev, dimensionsSelect, values }));
 	};
 
 	const setDimension = (value: Record<string, string>) => {
-		setState((state: IState) => ({ ...state, values: { ...state.values, ...value } }));
+		setState((prev: IState) => ({ ...prev, values: { ...prev.values, ...value } }));
 	};
 
 	const dimensionOptions = [
@@ -76,7 +80,9 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 						disabled={disabled}
 						floating
 					/>
-					{!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension, disabled }} />}
+					{state.dimensionsSelect.length > 0 && (
+						<DimensionsSelection {...{ analytics, state, setDimension, disabled }} />
+					)}
 				</>
 			)}
 		</>

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { IAnalytics, IRootState } from "@ax/types";
+import type { IAnalytics, IRootState } from "@ax/types";
 import { isEmptyArray } from "@ax/helpers";
 
 import PageAnalytics from "./PageAnalytics";

package/src/components/Fields/AnalyticsField/utils.tsx

@@ -1,11 +1,11 @@
-import { IDimensionsGroup } from "@ax/types";
 import { splitAndTrim } from "@ax/helpers";
+import type { IDimensionsGroup } from "@ax/types";
 
 const getTemplateDimensions = (groups: IDimensionsGroup[], template: string): string[] => {
 	const templateDimensionsGroups = groups?.filter((group) => group.templates?.includes(template));
-	const templateDimensions = templateDimensionsGroups?.reduce((dimensions: string[], group: IDimensionsGroup) => {
-		return [...dimensions, ...splitAndTrim(group.dimensions, ";")];
-	}, []);
+	const templateDimensions = templateDimensionsGroups?.flatMap((group: IDimensionsGroup) =>
+		splitAndTrim(group.dimensions, ";"),
+	);
 	const uniqueTemplateDimensions = [...new Set(templateDimensions)];
 	return uniqueTemplateDimensions;
 };