diff --git a/src/apps/content-editor/src/app/components/ContentBreadcrumbs.tsx b/src/apps/content-editor/src/app/components/ContentBreadcrumbs.tsx
index 3d4dcbd0ab..dfedaa2610 100644
--- a/src/apps/content-editor/src/app/components/ContentBreadcrumbs.tsx
+++ b/src/apps/content-editor/src/app/components/ContentBreadcrumbs.tsx
@@ -4,7 +4,7 @@ import {
useGetContentNavItemsQuery,
} from "../../../../../shell/services/instance";
import { Home } from "@zesty-io/material";
-import { useHistory, useParams } from "react-router";
+import { useHistory, useParams, useLocation } from "react-router";
import { useMemo } from "react";
import { ContentNavItem } from "../../../../../shell/services/types";
import { MODEL_ICON } from "../../../../../shell/constants";
@@ -18,8 +18,12 @@ export const ContentBreadcrumbs = () => {
itemZUID: string;
}>();
const history = useHistory();
+ const location = useLocation();
const breadcrumbData = useMemo(() => {
+ const isInMultipageTableView = !["new", "import"].includes(
+ location?.pathname?.split("/")?.pop()
+ );
let activeItem: ContentNavItem;
const crumbs = [];
@@ -52,6 +56,12 @@ export const ContentBreadcrumbs = () => {
parent = null;
}
}
+
+ if (!itemZUID && isInMultipageTableView) {
+ // Remove the model as a breadcrumb item when viewing in multipage table view
+ crumbs?.pop();
+ }
+
return crumbs.map((item) => ({
node: ,
onClick: () => {
@@ -62,7 +72,7 @@ export const ContentBreadcrumbs = () => {
}
},
}));
- }, [nav, itemZUID]);
+ }, [nav, itemZUID, modelZUID, location]);
return (
{
const [draggedIndex, setDraggedIndex] = useState(null);
const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -77,6 +79,7 @@ export const FieldTypeMedia = ({
const [imageToReplace, setImageToReplace] = useState("");
const [isBynderOpen, setIsBynderOpen] = useState(false);
const { data: rawInstanceSettings } = useGetInstanceSettingsQuery();
+ const [selectionError, setSelectionError] = useState("");
const bynderPortalUrlSetting = rawInstanceSettings?.find(
(setting) => setting.key === "bynder_portal_url"
@@ -109,26 +112,92 @@ export const FieldTypeMedia = ({
}, [bynderTokenSetting]);
const addZestyImage = (selectedImages: any[]) => {
- const newImageZUIDs = selectedImages.map((image) => image.id);
+ const removedImages: any[] = [];
+ const filteredSelectedImages = selectedImages?.filter((selectedImage) => {
+ //remove any images that do not match the file extension
+ if (settings?.fileExtensions) {
+ if (
+ settings?.fileExtensions?.includes(
+ `.${fileExtension(selectedImage.filename)}`
+ )
+ ) {
+ return true;
+ } else {
+ removedImages.push(selectedImage);
+ return false;
+ }
+ } else {
+ return true;
+ }
+ });
+
+ if (removedImages.length) {
+ const filenames = removedImages.map((image) => image.filename);
+ const formattedFilenames =
+ filenames.length > 1
+ ? filenames.slice(0, -1).join(", ") + " and " + filenames.slice(-1)
+ : filenames[0];
+
+ setSelectionError(
+ `Could not add ${formattedFilenames}. ${settings?.fileExtensionsErrorMessage}`
+ );
+ } else {
+ setSelectionError("");
+ }
+
+ const newImageZUIDs = filteredSelectedImages?.map((image) => image.id);
+
// remove any duplicates
const filteredImageZUIDs = newImageZUIDs.filter(
(zuid) => !images.includes(zuid)
);
+ // Do not trigger onChange if no images are added
+ if (![...images, ...filteredImageZUIDs]?.length) return;
+
onChange([...images, ...filteredImageZUIDs].join(","), name);
};
const addBynderAsset = (selectedAsset: any[]) => {
if (images.length > limit) return;
- const newBynderAssets = selectedAsset
+ const removedAssets: any[] = [];
+ const filteredBynderAssets = selectedAsset?.filter((asset) => {
+ if (settings?.fileExtensions) {
+ const assetExtension = `.${asset.extensions[0]}`;
+ if (settings?.fileExtensions?.includes(assetExtension)) {
+ return true;
+ } else {
+ removedAssets.push(asset);
+ return false;
+ }
+ } else {
+ return true;
+ }
+ });
+
+ if (removedAssets.length) {
+ const filenames = removedAssets.map((asset) => asset.name);
+ const formattedFilenames =
+ filenames.length > 1
+ ? filenames.slice(0, -1).join(", ") + " and " + filenames.slice(-1)
+ : filenames[0];
+
+ setSelectionError(
+ `Could not add ${formattedFilenames}. ${settings?.fileExtensionsErrorMessage}`
+ );
+ } else {
+ setSelectionError("");
+ }
+
+ const newBynderAssets = filteredBynderAssets
.slice(0, limit - images.length)
.map((asset) => asset.originalUrl);
- const filteredBynderAssets = newBynderAssets.filter(
+ const filteredBynderAssetsUrls = newBynderAssets.filter(
(asset) => !images.includes(asset)
);
- onChange([...images, ...filteredBynderAssets].join(","), name);
+ onChange([...images, ...filteredBynderAssetsUrls].join(","), name);
};
const removeImage = (imageId: string) => {
@@ -146,6 +215,21 @@ export const FieldTypeMedia = ({
});
// if selected replacement image is already in the list of images, do nothing
if (localImageZUIDs.includes(imageZUID)) return;
+ // if extension is not allowed set error message
+ if (settings?.fileExtensions) {
+ if (
+ !settings?.fileExtensions?.includes(
+ `.${fileExtension(images[0].filename)}`
+ )
+ ) {
+ setSelectionError(
+ `Could not replace. ${settings?.fileExtensionsErrorMessage}`
+ );
+ return;
+ } else {
+ setSelectionError("");
+ }
+ }
const newImageZUIDs = localImageZUIDs.map((zuid) => {
if (zuid === imageToReplace) {
return imageZUID;
@@ -153,6 +237,7 @@ export const FieldTypeMedia = ({
return zuid;
});
+
onChange(newImageZUIDs.join(","), name);
};
@@ -160,6 +245,19 @@ export const FieldTypeMedia = ({
// Prevent adding bynder asset that has already been added
if (localImageZUIDs.includes(selectedAsset.originalUrl)) return;
+ const assetExtension = `.${selectedAsset.extensions[0]}`;
+ if (
+ settings?.fileExtensions &&
+ !settings?.fileExtensions?.includes(assetExtension)
+ ) {
+ setSelectionError(
+ `Could not replace. ${settings?.fileExtensionsErrorMessage}`
+ );
+ return;
+ } else {
+ setSelectionError("");
+ }
+
const newImages = localImageZUIDs.map((image) => {
if (image === imageToReplace) {
return selectedAsset.originalUrl;
@@ -323,6 +421,11 @@ export const FieldTypeMedia = ({
)}
+ {selectionError && (
+
+ {selectionError}
+
+ )}
setIsBynderOpen(false)}>
@@ -421,6 +524,11 @@ export const FieldTypeMedia = ({
)}
+ {selectionError && (
+
+ {selectionError}
+
+ )}
{showFileModal && (
{
Edit Model
-
+ {!isDataset && (
+
+ )}