@webbio/strapi-plugin-page-builder 0.3.6-platform → 0.3.7-legacy

package/README.md

@@ -1,91 +1,101 @@
-# Strapi plugin page-builder
-
-A quick description of page-builder.
-
-# Werking van de plugin
-
-Voeg de plugin aan de plugin.ts toe
-
-```
-'page-builder': {
-  enabled: true,
-  config: {
-    modules: [
-      'modules.header',
-      'modules.cta',
-      ...
-    ]
-  }
-}
-```
-
-In de modules array voeg je alle modules toe die beschikbaar moeten zijn op een pagina. Deze worden bij het opstarten van de server automatisch toegevoegd aan `Page` en `Template`.
-
-De collectiontypes `Page`, `Template` en `PageType` worden aangemaakt of bijgewerkt op het moment van opstarten van de server. Het kan zijn dat de server een keer crasht, start deze dan even opnieuw op.
-
-## Page Types
-
-Maak voor elke pagina type een Page Type aan. Deze kan, maar hoeft niet, gekoppeld worden aan een collection type. Je moet altijd een UID invoeren, als je wenst geen koppeling te maken met een collection type, vul hier alsnog iets in. Het kan zijn dat dit deel van de plugin nog niet werkt, hier is nog niet mee getest.
-hasPage moet toegevoegd worden aan de collectiontype. Dit komt doordat er gefilterd moet kunnen worden middels graphql. Er is een custom manier gebouwd om ervoor te zorgen dat pages gefilterd kan worden.
-
-Voor elk collection type die een page type is, moet deze properties toegevoegd worden:
-
-```
-"page": {
-  "type": "relation",
-  "relation": "morphMany",
-  "target": "api::page.page",
-  "morphBy": "collectionTypeData"
-},
-"hasPage": {
-  "pluginOptions": {
-    "i18n": {
-      "localized": true
-    }
-  }
-  "type": "boolean",
-  "default": false
-}
-```
-
-Zodra dit goed is ingesteld, kan je via deze collectie types direct een pagina aanmaken.
-
-## Page
-
-Op een page kan je in de Edit View een page type selecteren. Op basis daarvan wordt er een template geselecteerd (indien gekozen in een page type) en kan je zoeken in verschillende entiteiten binnen die page type. Deze kan je koppelen aan een pagina.
-
-## Template
-
-Een template is niets anders dan een sjabloon die je eenmalig kan toevoegen op een pagina. Dit kan via een page type gaan maar kan ook zonder de page type. Een modal zal eerst nog vragen of je zeker bent van je keuze, alle modules zullen vervangen worden.
-
-## Platform
-
-Om wijzigignen aan te brengen in een platform, moeten deze in de schema aangepast worden van de api. `/src/api/platform/content-types/platform/schema.json`
-
-Voor elk collectiontype die je wil toevoegen aan het platform, moet deze relatie toegevoegd worden:
-
-```
-"platform": {
-  "type": "relation",
-  "relation": "oneToOne",
-  "target": "api::platform.platform"
-}
-```
-
-Een platform zit altijd aan een pagina gekoppeld. Deze moet handmatig in de pagina toegevoegd worden.
-
-# Known bugs
-
-- Na het ontkoppelen en opslaan van een collectie item op een pagina, staat deze nog als "Geselecteerd" in de dropdown.
-- Sorteren op pages binnen een collectie type kan niet. Dus stel ik haal alle FAQ's op waarbij ik wil sorteren op een property op de page, kan dat niet.
-
-# Improvements
-
-- Deze readme updaten en naar engels vertalen.
-- Intl gebruiken voor de teksten.
-- Pagetype mag ook een default parent page relation hebben. Bij het aanmaken van een pagina obv een page type, deze relatie als default aan de aangemaakte pagina koppelen. Als ik bijvoorbeeld een post pagina maak, dan wordt de pagina automatisch aan de "actueel" pagina gekoppeld zodat al mijn posts die parent hebben.
-- Filteren op Page in GraphQL binnen een collectiontype met een morph op een page kan niet. Strapi staat dit niet toe. Wellicht in de toekomst wel.
-- Slug en path genereren op basis van de titel van het collection type waarvan je een pagina aanmaakt. Nu wordt deze leeggelaten. Dit moet zorgvuldig gebeuren, bij een bestaande slug wil je bijvoorbeeld een -2 toevoegen oid.
-- Dit vorige punt geldt ook andersom, dus als je een entity koppelt vanuit een pagina. Als de titel en slug nog leeg zijn, vul die dan automatisch in.
-- In het overzicht van een collectiontype moet duidelijk worden of en welke pagina er gekoppeld is. [https://share.getcloudapp.com/BluzGYEd](https://share.getcloudapp.com/BluzGYEd)
-- Bij Page Types moet je handmatig de collectiontype uid invoeren. Dit zou idealiter een select zijn van alle mogelijke collecion type uids. Ook moet dit een mogelijkheid bieden voor geen uid.
+# Strapi plugin page-builder
+
+A quick description of page-builder.
+
+# Werking van de plugin
+
+Voeg de plugin aan de plugin.ts toe
+
+```
+'page-builder': {
+  enabled: true,
+  config: {
+    modules: [
+      'modules.header',
+      'modules.cta',
+      ...
+    ]
+  }
+}
+```
+
+In de modules array voeg je alle modules toe die beschikbaar moeten zijn op een pagina. Deze worden bij het opstarten van de server automatisch toegevoegd aan `Page` en `Template`.
+
+De collectiontypes `Page`, `Template` en `PageType` worden aangemaakt of bijgewerkt op het moment van opstarten van de server. Het kan zijn dat de server een keer crasht, start deze dan even opnieuw op.
+
+## Page Types
+
+Maak voor elke pagina type een Page Type aan. Deze kan, maar hoeft niet, gekoppeld worden aan een collection type. Je moet altijd een UID invoeren, als je wenst geen koppeling te maken met een collection type, vul hier alsnog iets in. Het kan zijn dat dit deel van de plugin nog niet werkt, hier is nog niet mee getest.
+hasPage moet toegevoegd worden aan de collectiontype. Dit komt doordat er gefilterd moet kunnen worden middels graphql. Er is een custom manier gebouwd om ervoor te zorgen dat pages gefilterd kan worden.
+
+Voor elk collection type die een page type is, moet deze properties toegevoegd worden:
+
+```
+"page": {
+  "type": "relation",
+  "relation": "morphMany",
+  "target": "api::page.page",
+  "morphBy": "collectionTypeData"
+},
+"hasPage": {
+  "type": "boolean",
+  "default": false
+}
+```
+
+Zodra dit goed is ingesteld, kan je via deze collectie types direct een pagina aanmaken.
+
+> **Notitie:**
+> `hasPage` wordt gebruikt om aan te tonen dan een collection type item een `published` pagina heeft.
+
+## Page
+
+Op een page kan je in de Edit View een page type selecteren. Op basis daarvan wordt er een template geselecteerd (indien gekozen in een page type) en kan je zoeken in verschillende entiteiten binnen die page type. Deze kan je koppelen aan een pagina.
+
+## Template
+
+Een template is niets anders dan een sjabloon die je eenmalig kan toevoegen op een pagina. Dit kan via een page type gaan maar kan ook zonder de page type. Een modal zal eerst nog vragen of je zeker bent van je keuze, alle modules zullen vervangen worden.
+
+## Platform
+
+Om wijzigignen aan te brengen in een platform, moeten deze in de schema aangepast worden van de api. `/src/api/platform/content-types/platform/schema.json`
+
+Voor elk collectiontype die je wil toevoegen aan het platform, moet deze relatie toegevoegd worden:
+
+```
+    "collectiontype": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "UID van collection type",
+      "mappedBy": "platform"
+    }
+```
+
+bijvoorbeeld :
+
+```
+    "faqs": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "api::faq.faq",
+      "mappedBy": "platform"
+    }
+```
+
+Een platform zit altijd aan een pagina gekoppeld. Deze moet handmatig in de pagina toegevoegd worden.
+
+# Known bugs
+
+- Bij het opslaan van een collectietype wil de gekoppelde pagina of type in het ui wel eens verdwijnen.
+- Na het ontkoppelen en opslaan van een collectie item op een pagina, staat deze nog als "Geselecteerd" in de dropdown.
+
+# Improvements
+
+- Deze readme updaten en naar engels vertalen.
+- Intl gebruiken voor de teksten.
+- Pagetype mag ook een default parent page relation hebben. Bij het aanmaken van een pagina obv een page type, deze relatie als default aan de aangemaakte pagina koppelen. Als ik bijvoorbeeld een post pagina maak, dan wordt de pagina automatisch aan de "actueel" pagina gekoppeld zodat al mijn posts die parent hebben.
+- Filteren op Page in GraphQL binnen een collectiontype met een morph op een page kan niet. Strapi staat dit niet toe. Wellicht in de toekomst wel.
+- Slug en path genereren op basis van de titel van het collection type waarvan je een pagina aanmaakt. Nu wordt deze leeggelaten. Dit moet zorgvuldig gebeuren, bij een bestaande slug wil je bijvoorbeeld een -2 toevoegen oid.
+- Dit vorige punt geldt ook andersom, dus als je een entity koppelt vanuit een pagina. Als de titel en slug nog leeg zijn, vul die dan automatisch in.
+- In het overzicht van een collectiontype moet duidelijk worden of en welke pagina er gekoppeld is. [https://share.getcloudapp.com/BluzGYEd](https://share.getcloudapp.com/BluzGYEd)
+- Bij Page Types moet je handmatig de collectiontype uid invoeren. Dit zou idealiter een select zijn van alle mogelijke collecion type uids. Ook moet dit een mogelijkheid bieden voor geen uid.

package/admin/src/api/collection-type.ts

@@ -26,7 +26,6 @@ type SearchEntitiesQueryParams = {
 	searchQuery?: string;
 	currentCollectionTypeId?: number;
 	currentPageId?: number;
-	platformTitle?: string;
 };
 
 const QUERY_KEY = ['entities'];
@@ -38,8 +37,7 @@ export const getSearchEntities = async ({
 	locale,
 	searchQuery,
 	currentCollectionTypeId,
-	currentPageId,
-	platformTitle
+	currentPageId
 }: SearchEntitiesQueryParams): Promise<SearchResult> => {
 	try {
 		const { get } = fetchClient;
@@ -55,10 +53,6 @@ export const getSearchEntities = async ({
 			searchParams.append('_q', searchQuery);
 		}
 
-		if (platformTitle) {
-			searchParams.append('filters[$and][0][platform][title][$contains]', String(platformTitle));
-		}
-
 		const { data } = await get(`/content-manager/collection-types/${uid}?${searchParams.toString()}`);
 
 		const filteredResults = data.results.filter((p: Record<string, any>) => {

package/admin/src/api/page-type.ts

@@ -9,11 +9,11 @@ export type PageType = {
 
 const QUERY_KEY = 'page-types';
 
-const fetchPageTypes = async ({ fetchClient }: Record<string, any>): Promise<PageType[]> => {
+const fetchPageTypes = async ({ fetchClient }: any): Promise<PageType[]> => {
 	const { get } = fetchClient;
-	const result = await get(`/content-manager/collection-types/api::page-type.page-type?page=1&pageSize=100`);
+	const result = await get(`/content-manager/collection-types/api::page-type.page-type`);
 
-	return result?.data?.results?.map((entity: Record<string, any>) => ({
+	return result?.data?.results?.map((entity: any) => ({
 		id: entity.id,
 		uid: entity.uid,
 		title: entity.title,
@@ -21,12 +21,11 @@ const fetchPageTypes = async ({ fetchClient }: Record<string, any>): Promise<Pag
 	}));
 };
 
-export const useGetPageTypes = (params: Record<string, any>) => {
+export const useGetPageTypes = (params: any) => {
 	const fetchClient = useFetchClient();
 	params = {
 		...params,
 		fetchClient
 	};
-
 	return useQuery<PageType[], Error>(QUERY_KEY, () => fetchPageTypes(params));
 };

package/admin/src/components/EditView/CollectionTypeSearch/index.tsx

@@ -14,10 +14,9 @@ const PAGE = 1;
 
 interface Props {
 	uid: string;
-	platformTitle?: string;
 }
 
-export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
+export const CollectionTypeSearch = ({ uid }: Props) => {
 	const fetchClient = useFetchClient();
 	const form = useCMEditViewDataManager() as any;
 	const { locales } = useSelector((state: any) => state.i18n_locales);
@@ -25,7 +24,6 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 	const defaultLocale = locales.find((locale: any) => locale.isDefault);
 	const selectedLocale = form.initialData?.locale ?? urlLocale ?? defaultLocale.code;
 	const prevUid = usePrevious(uid);
-	const prevPlatformTitle = usePrevious(platformTitle);
 
 	const [selected, setSelected] = useState<SingleValue<IReactSelectValue | null>>(
 		getInitialSelectItem(form.initialData?.collectionTypeId, form.initialData?.collectionTypeTitle)
@@ -40,7 +38,7 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 		}
 	}, []);
 
-	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
+	const getItems = async (inputValue?: string): Promise<IReactSelectValue[]> => {
 		const searchEntities = await getSearchEntities({
 			fetchClient,
 			page: PAGE,
@@ -48,8 +46,7 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 			uid,
 			searchQuery: inputValue,
 			currentCollectionTypeId: form.initialData?.collectionTypeId,
-			currentPageId: form.initialData?.id,
-			platformTitle
+			currentPageId: form.initialData?.id
 		});
 
 		return searchEntities.results.map((x) => ({
@@ -76,28 +73,28 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 	};
 
 	useEffect(() => {
-		if ((prevUid !== null && prevUid !== uid) || (prevPlatformTitle !== null && prevPlatformTitle !== platformTitle)) {
+		if (prevUid !== null && prevUid !== uid) {
 			setSelected(null);
 		}
-	}, [uid, platformTitle]);
+	}, [uid]);
 
-	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
-		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
+	const debouncedFetch = debounce((searchTerm, callback) => {
+		promiseOptions(searchTerm).then((result) => {
 			return callback(result || []);
 		});
 	}, SEARCH_DEBOUNCE_MS);
 
-	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<IReactSelectValue[]> =>
+	const promiseOptions = (inputValue: string): Promise<IReactSelectValue[]> =>
 		new Promise<IReactSelectValue[]>((resolve) => {
-			resolve(getItems(inputValue, selectedPlatformTitle));
+			resolve(getItems(inputValue));
 		});
 
 	return (
 		<Combobox
-			key={`rerenderOnUidOrPlatformChange-${uid}-${platformTitle}`}
+			key={`rerenderOnUidChange-${uid}`}
 			id="collectionTypeSearch"
-			label="Entity"
-			loadOptions={(i, c) => debouncedFetch(i, c, platformTitle)}
+			label="Link"
+			loadOptions={debouncedFetch}
 			cacheOptions
 			onChange={handleChange}
 			customOption={CustomOption}

package/admin/src/components/EditView/CollectionTypeSettings/CreatePageButton/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import slugify from 'slugify';
 import { useHistory } from 'react-router-dom';
 
 import { Plus } from '@strapi/icons';
@@ -7,7 +8,6 @@ import { useFetchClient, useCMEditViewDataManager } from '@strapi/helper-plugin'
 import getRequestUrl from '../../../../utils/getRequestUrl';
 import { sanitizeModules } from '../../../../utils/sanitizeModules';
 import { PAGE_UID } from '../../../../../../shared/utils/constants';
-import { IGetTranslationPageLinks } from '../../../../../../server/controllers/collection-types';
 
 import S from './styles';
 
@@ -16,20 +16,31 @@ export const CreatePageButton = () => {
 	const { layout, initialData } = useCMEditViewDataManager() as any;
 
 	const { post, get, put } = useFetchClient();
-	const url = `/content-manager/collectionType/${PAGE_UID}/create`;
+	const url = `/content-manager/collection-types/${PAGE_UID}/create`;
 
 	const handleCreatePage = async (e: React.MouseEvent<HTMLAnchorElement>) => {
 		e.preventDefault();
+
 		try {
+			// Validate that we have a valid entity ID before proceeding
+			if (!initialData?.id) {
+				console.error('Cannot create page: entity ID is missing');
+				return;
+			}
+
 			const pageTypeUrl = getRequestUrl(`/page-types/${layout.uid}`);
 			const { data: pageType } = await get(pageTypeUrl);
-			const mappedLocalizations = (initialData?.localizations || []).map((x: any) => x?.id).join(',');
-			const linkedPages: { data: IGetTranslationPageLinks[] } = await get(
-				getRequestUrl(`/collection-types-page-links/${layout.uid}/${mappedLocalizations}`)
-			);
-			const createLocalizedPage = !linkedPages?.data?.find((x) => x.locale === initialData?.locale);
-			const locale = initialData?.locale;
-			const modules = sanitizeModules(pageType?.template?.modules || []);
+			// Use the locale from the collection type item
+			const locale = initialData?.locale || 'nl';
+
+			// Get data inside template
+			let templateData;
+
+			if (pageType?.template?.id) {
+				templateData = await get(getRequestUrl(`/template/${pageType.template.id}`));
+			}
+
+			const modules = sanitizeModules(templateData?.data?.modules || [], false);
 
 			const newPage = await createNewPage({
 				title: initialData?.title,
@@ -37,16 +48,14 @@ export const CreatePageButton = () => {
 				post,
 				locale,
 				pageTypeId: pageType.id,
-				platformId: initialData.platform[0]?.id,
 				collectionTypeId: initialData.id,
-				layoutUid: layout.uid,
-				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
+				layoutUid: layout.uid
 			});
 			if (newPage?.id) {
 				await put(`/content-manager/collection-types/${layout.uid}/${initialData.id}`, {
-					hasPage: true
+					hasPage: false
 				});
-				history.push(`/content-manager/collectionType/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
+				history.push(`/content-manager/collection-types/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
 			}
 		} catch (error) {
 			console.error(error);
@@ -68,8 +77,6 @@ interface ICreateNewPageProps {
 	modules?: Record<string, any>[];
 	post: any;
 	pageTypeId: number;
-	platformId: number;
-	relatedEntityId?: number;
 }
 
 const createNewPage = async ({
@@ -79,27 +86,28 @@ const createNewPage = async ({
 	collectionTypeId,
 	layoutUid,
 	modules,
-	pageTypeId,
-	platformId,
-	relatedEntityId
+	pageTypeId
 }: ICreateNewPageProps) => {
-	// Including locale in url is neccesary.
-	const relatedEntityIdQuery = relatedEntityId ? `&plugins[i18n][relatedEntityId]=${relatedEntityId}` : '';
-	const url = `/content-manager/collection-types/${PAGE_UID}?plugins[i18n][locale]=${locale}${relatedEntityIdQuery}`;
-	const { data: page } = await post(url, {
+	// Use custom plugin endpoint that uses entityService.create with explicit locale
+	const url = getRequestUrl('/page/create');
+	const slug = title
+		? slugify(title, {
+				lower: true,
+				trim: true
+			})
+		: undefined;
+
+	const body = {
 		title,
+		slug,
 		locale,
-		pageType: { connect: [{ id: pageTypeId }] },
-		platform: { connect: [{ id: platformId }] },
-		collectionTypeData: {
-			id: collectionTypeId,
-			__type: layoutUid,
-			__pivot: {
-				field: 'page'
-			}
-		},
+		pageTypeId,
+		collectionTypeId,
+		layoutUid,
 		modules
-	});
+	};
+
+	const { data: page } = await post(url, body);
 
 	return page;
 };

package/admin/src/components/EditView/CollectionTypeSettings/index.tsx

@@ -8,19 +8,31 @@ import { Wrapper } from '../wrapper';
 import { CreatePageButton } from './CreatePageButton';
 import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants';
 import S from '../Details/styles';
-import { PlatformSelect } from '../Platform/platform-select';
-import { Platform, useGetPlatforms } from '../../../api/platform';
 
 export const CollectionTypeSettings = () => {
-	const { layout, isCreatingEntry, initialData, onChange } = useCMEditViewDataManager() as any;
-	const { data: platforms } = useGetPlatforms({});
-	const [selectedPlatform, setSelectedPlatform] = useState<Platform | undefined | null>(initialData?.platform?.[0]);
+	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = useCMEditViewDataManager() as any;
+
 	const isUserCreatedContentType = layout.uid.startsWith('api::');
-	const linkedPage = initialData.page?.[0];
+	// Filter pages to find one that matches the current locale
+	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(
+		Array.isArray(initialData.page) ? initialData.page.find((p: any) => p.locale === initialData.locale) : undefined
+	);
 
 	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage;
 	const url = generateLink(linkedPage?.id, initialData?.locale);
 
+	useEffect(() => {
+		if (Array.isArray(modifiedData.page)) {
+			// Filter to find page matching current locale
+			const pageForLocale = modifiedData.page.find((p: any) => p.locale === initialData.locale);
+			setLinkedPage(pageForLocale);
+		}
+
+		if (modifiedData.page === null || modifiedData.page === undefined) {
+			setLinkedPage(undefined);
+		}
+	}, [modifiedData.page, initialData.locale]);
+
 	useEffect(() => {
 		if (isCreatingEntry) {
 			onChange({
@@ -36,62 +48,26 @@ export const CollectionTypeSettings = () => {
 		return null;
 	}
 
-	useEffect(() => {
-		setSelectedPlatform(initialData?.platform?.[0]);
-	}, [initialData]);
-
-	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
-		onChange({
-			target: {
-				name,
-				value
-			},
-			shouldSetInitialValue: true
-		});
-	};
-
-	const handleSelectPlatform = async (platformId: string) => {
-		const platform = platforms?.find((platform) => platform.id === Number(platformId));
-
-		if (platform && platform.title) {
-			setSelectedPlatform(platform);
-			const formPlatform = {
-				...platform,
-				label: platform.title,
-				value: platform.id
-			};
-			setFormValue('platform', [formPlatform]);
-		} else {
-			setFormValue('platform', []);
-			setSelectedPlatform(null);
-		}
-	};
-
 	return (
-		<>
-			<Wrapper title="Platform">
-				<PlatformSelect platforms={platforms} selectedPlatform={selectedPlatform} onChange={handleSelectPlatform} />
-			</Wrapper>
-			<Wrapper title="Gekoppelde pagina">
-				<Flex direction="column" gap={4} width="100%" alignItems="start">
-					{showCreatePageButton && <CreatePageButton />}
+		<Wrapper title="Gekoppelde pagina">
+			<Flex direction="column" gap={4} width="100%" alignItems="start">
+				{showCreatePageButton && <CreatePageButton />}
 
-					{url && (
-						<Flex direction="column" alignItems="start" width="100%" gap={1}>
-							<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
-								{PAGE_TYPE_PAGE}
-							</S.SubtleType>
-							<S.EntityLinkWrapper variant="pi" textColor="neutral800">
-								<S.EntityLink title={linkedPage.title || '-'} to={url} variant="pi">
-									<Link />
-									{linkedPage.title || '-'}
-								</S.EntityLink>
-							</S.EntityLinkWrapper>
-						</Flex>
-					)}
-				</Flex>
-			</Wrapper>
-		</>
+				{url && (
+					<Flex direction="column" alignItems="start" width="100%" gap={1}>
+						<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
+							{PAGE_TYPE_PAGE}
+						</S.SubtleType>
+						<S.EntityLinkWrapper variant="pi" textColor="neutral800">
+							<S.EntityLink title={linkedPage?.title || '-'} to={url} variant="pi">
+								<Link />
+								{linkedPage?.title || '-'}
+							</S.EntityLink>
+						</S.EntityLinkWrapper>
+					</Flex>
+				)}
+			</Flex>
+		</Wrapper>
 	);
 };
 
@@ -99,5 +75,5 @@ const generateLink = (entityId?: string, locale?: string) => {
 	if (!entityId) {
 		return '';
 	}
-	return `/content-manager/collectionType/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
+	return `/content-manager/collection-types/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
 };

package/admin/src/components/EditView/Details/index.tsx

@@ -43,5 +43,5 @@ const generateLink = ({ locale, pageType, entityId }: Props) => {
 		return '';
 	}
 
-	return `/content-manager/collectionType/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
+	return `/content-manager/collection-types/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
 };