}
+ onChange={(_, value) => {
+ handleMode(value ? value.value : 1, "canonicalTagMode");
+ }}
+ />
{mode == "2" ? (
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/CanonicalTag.less b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/CanonicalTag.less
similarity index 100%
rename from src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/CanonicalTag.less
rename to src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/CanonicalTag.less
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/ItemParent.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/ItemParent.tsx
new file mode 100644
index 0000000000..a9cb8bd91b
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/ItemParent.tsx
@@ -0,0 +1,262 @@
+import { Box, Autocomplete, TextField, ListItem } from "@mui/material";
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { useDispatch, useSelector } from "react-redux";
+import { AppState } from "../../../../../../../../shell/store/types";
+import {
+ ContentItemWithDirtyAndPublishing,
+ ContentNavItem,
+} from "../../../../../../../../shell/services/types";
+import { debounce, uniqBy } from "lodash";
+import { useEffect, useState } from "react";
+import { useLocation, useParams } from "react-router";
+import { notify } from "../../../../../../../../shell/store/notifications";
+import { searchItems } from "../../../../../../../../shell/store/content";
+import { useGetContentNavItemsQuery } from "../../../../../../../../shell/services/instance";
+
+type ParentOption = {
+ value: string;
+ text: string;
+};
+const getParentOptions = (
+ currentItemLangID: number,
+ path: string,
+ items: Record
+) => {
+ const options: ParentOption[] = Object.entries(items)
+ ?.reduce((acc, [itemZUID, itemData]) => {
+ if (
+ itemZUID.slice(0, 3) !== "new" && // Exclude new items
+ itemData?.meta?.ZUID && // must have a ZUID
+ itemData?.web?.path && // must have a path
+ itemData?.web.path !== "/" && // Exclude homepage
+ itemData?.web.path !== path && // Exclude current item
+ itemData?.meta?.langID === currentItemLangID // display only relevant language options
+ ) {
+ acc.push({
+ value: itemZUID,
+ text: itemData.web.path,
+ });
+ }
+
+ return acc;
+ }, [])
+ .sort((a, b) => {
+ if (a.text > b.text) {
+ return 1;
+ } else if (a.text < b.text) {
+ return -1;
+ } else {
+ return 0;
+ }
+ });
+
+ // Insert the home route
+ options.unshift({
+ text: "/",
+ value: "0", // 0 = root level
+ });
+
+ return uniqBy(options, "value");
+};
+
+const findNavParent = (zuid: string, nav: ContentNavItem[], count = 0): any => {
+ count++;
+ const navEntry = nav?.find((el: any) => el.ZUID === zuid);
+ if (navEntry) {
+ // This first item should be the model we are resolving for so
+ // continue on up the nav tree
+ if (count === 0) {
+ return findNavParent(navEntry.parentZUID, nav, count);
+ } else {
+ if (navEntry.type === "item") {
+ return navEntry.ZUID;
+ } else if (navEntry.parentZUID) {
+ return findNavParent(navEntry.parentZUID, nav, count);
+ } else {
+ return "0";
+ }
+ }
+ } else {
+ return "0";
+ }
+};
+
+type ItemParentProps = {
+ onChange: (value: string, name: string) => void;
+};
+export const ItemParent = ({ onChange }: ItemParentProps) => {
+ const { modelZUID, itemZUID } = useParams<{
+ modelZUID: string;
+ itemZUID: string;
+ }>();
+ const dispatch = useDispatch();
+ const location = useLocation();
+ const isCreateItemPage = location?.pathname?.split("/")?.pop() === "new";
+ const items = useSelector((state: AppState) => state.content);
+ const item = items[isCreateItemPage ? `new:${modelZUID}` : itemZUID];
+ const { data: rawNavData } = useGetContentNavItemsQuery();
+ const [selectedParent, setSelectedParent] = useState({
+ value: "0", // "0" = root level route
+ text: "/",
+ });
+ const [options, setOptions] = useState(
+ getParentOptions(item?.meta?.langID, item?.web?.path, items)
+ );
+ const [isLoadingOptions, setIsLoadingOptions] = useState(false);
+
+ const handleSearchOptions = debounce((filterTerm) => {
+ if (filterTerm) {
+ dispatch(searchItems(filterTerm))
+ // @ts-expect-error untyped
+ .then((res) => {
+ setOptions(
+ getParentOptions(item?.meta?.langID, item?.web?.path, {
+ ...items,
+ // needs to reduce and converts this data as the same format of the items to
+ // prevent having an issue on having an itemZUID with an incorrect format
+ // the reason is that the item has a format of {[itemZUID]:data}
+ // while the res.data has a value of an array which cause the needs of converting
+ // the response to an object with a zuid as a key
+ ...res?.data.reduce(
+ (
+ acc: Record,
+ curr: ContentItemWithDirtyAndPublishing
+ ) => {
+ return { ...acc, [curr.meta.ZUID]: curr };
+ },
+ {}
+ ),
+ })
+ );
+ })
+ .finally(() => setIsLoadingOptions(false));
+ }
+ }, 1000);
+
+ useEffect(() => {
+ let { parentZUID } = item?.web;
+ const { ZUID: itemZUID } = item?.meta;
+
+ // If it's a new item chase down the parentZUID within navigation
+ // This way we avoid an API request
+ if (itemZUID && itemZUID.slice(0, 3) === "new") {
+ const result = findNavParent(modelZUID, rawNavData);
+
+ // change for preselection
+ parentZUID = result;
+
+ // Update redux store so if the item is saved we know it's parent
+ onChange(parentZUID, "parentZUID");
+ }
+
+ // Try to preselect parent
+ if (parentZUID && parentZUID !== "0") {
+ const parentItem = items[parentZUID];
+ if (parentItem?.meta?.ZUID && parentItem?.web?.path) {
+ setSelectedParent({
+ value: parentItem.meta.ZUID,
+ text: parentItem.web.path,
+ });
+ } else {
+ dispatch(searchItems(parentZUID))
+ // @ts-expect-error untyped
+ .then((res) => {
+ if (res?.data) {
+ if (Array.isArray(res.data) && res.data.length) {
+ // Handles cases where the model's parent is the homepage. This is no longer possible for newly created models but
+ // there are some old models that still have the homepage as their parent models.
+ if (res.data[0]?.web?.path === "/") {
+ setSelectedParent({
+ value: "0", // "0" = root level route
+ text: "/",
+ });
+ } else {
+ setSelectedParent({
+ value: res.data?.[0]?.meta?.ZUID,
+ text: res.data?.[0]?.web?.path,
+ });
+ /**
+ * // HACK Because we pre-load all item publishings and store them in the same reducer as the `content`
+ * we can't use array length comparision to determine a new parent has been added. Also since updates to the item
+ * currently being edited cause a new `content` object to be created in it's reducer we can't use
+ * referential equality checks to determine re-rendering. This scenario causes either the parent to not be pre-selected
+ * or a performance issue. To work around this we maintain the `parents` state internal and add the new parent we load from the
+ * API to allow it to be pre-selected while avoiding re-renders on changes to this item.
+ */
+
+ setOptions(
+ getParentOptions(item?.meta?.langID, item?.web?.path, {
+ ...items,
+ [res.data[0].meta.ZUID]: res.data[0],
+ })
+ );
+ }
+ } else {
+ dispatch(
+ notify({
+ kind: "warn",
+ heading: `Cannot Save: ${item?.web?.metaTitle}`,
+ message: `Page's Parent does not exist or has been deleted`,
+ })
+ );
+ }
+ } else {
+ dispatch(
+ notify({
+ kind: "warn",
+ message: `API failed to return data. Try Again.`,
+ })
+ );
+ }
+ });
+ }
+ }
+ }, []);
+
+ return (
+
+
+ }
+ renderOption={(props, value) => (
+
+ {value.text}
+
+ )}
+ getOptionLabel={(option) => option.text}
+ onInputChange={(_, filterTerm) => {
+ if (filterTerm !== "/") {
+ setIsLoadingOptions(!!filterTerm);
+ handleSearchOptions(filterTerm);
+ }
+ }}
+ onChange={(_, value) => {
+ // Always default to homepage when no parent is selected
+ setSelectedParent(
+ value !== null ? value : { text: "/", value: "0" }
+ );
+ onChange(value !== null ? value.value : "0", "parentZUID");
+ }}
+ loading={isLoadingOptions}
+ sx={{
+ "& .MuiOutlinedInput-root": {
+ padding: "2px",
+ },
+ }}
+ />
+
+
+ );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/ItemRoute.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/ItemRoute.tsx
new file mode 100644
index 0000000000..806649a69c
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/ItemRoute.tsx
@@ -0,0 +1,201 @@
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
+import {
+ TextField,
+ InputAdornment,
+ CircularProgress,
+ Typography,
+ Box,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useParams } from "react-router";
+import { debounce } from "lodash";
+import { CheckCircleRounded, CancelRounded } from "@mui/icons-material";
+
+import { withCursorPosition } from "../../../../../../../../shell/components/withCursorPosition";
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { searchItems } from "../../../../../../../../shell/store/content";
+import { notify } from "../../../../../../../../shell/store/notifications";
+import { AppState } from "../../../../../../../../shell/store/types";
+import { ContentItemWithDirtyAndPublishing } from "../../../../../../../../shell/services/types";
+import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+import { hasErrors } from "./util";
+
+const TextFieldWithCursorPosition = withCursorPosition(TextField);
+
+type ItemRouteProps = {
+ onChange: (value: string, name: string) => void;
+ error: Error;
+ onUpdateErrors: (name: string, error: Error) => void;
+};
+export const ItemRoute = ({
+ onChange,
+ error,
+ onUpdateErrors,
+}: ItemRouteProps) => {
+ const dispatch = useDispatch();
+ const { itemZUID, modelZUID } = useParams<{
+ itemZUID: string;
+ modelZUID: string;
+ }>();
+ const domain = useDomain();
+ const location = useLocation();
+ const isCreateItemPage = location?.pathname?.split("/")?.pop() === "new";
+ const items = useSelector((state: AppState) => state.content);
+ const item = items[isCreateItemPage ? `new:${modelZUID}` : itemZUID];
+ const [pathPart, setPathPart] = useState(item?.web?.pathPart);
+ const [isLoading, setIsLoading] = useState(false);
+ const [isUnique, setIsUnique] = useState(true);
+
+ const parent = items[item?.web?.parentZUID];
+
+ const validate = useCallback(
+ debounce((path) => {
+ if (!path) {
+ setIsUnique(false);
+ return;
+ }
+
+ const fullPath = parent ? `${parent.web?.path}${path}/` : `/${path}/`;
+
+ setIsLoading(true);
+
+ return (
+ dispatch(searchItems(fullPath))
+ // @ts-expect-error untyped
+ .then((res) => {
+ if (res?.data) {
+ if (Array.isArray(res.data) && res.data.length) {
+ // check list of partial matches for exact path match
+ const matches = res.data.filter(
+ (_item: ContentItemWithDirtyAndPublishing) => {
+ /**
+ * Exclude currently viewed item zuid, as it's currently saved path would match.
+ * Check if other results have a matching path, if so then it is already taken and
+ * can not be used.
+ * Result paths come with leading and trailing slashes
+ */
+ return (
+ _item.meta.ZUID !== item?.meta?.ZUID &&
+ _item.web.path === fullPath
+ );
+ }
+ );
+
+ setIsUnique(!matches.length);
+ onUpdateErrors("pathPart", {
+ CUSTOM_ERROR: !!matches.length
+ ? "This URL Path Part is already taken. Please enter a new different URL Path part."
+ : "",
+ });
+ } else {
+ setIsUnique(true);
+ onUpdateErrors("pathPart", {
+ CUSTOM_ERROR: "",
+ });
+ }
+ } else {
+ dispatch(
+ notify({
+ kind: "warn",
+ message: `API failed to return data ${res.status}`,
+ })
+ );
+ }
+ })
+ .finally(() => setIsLoading(false))
+ );
+ }, 1000),
+ [parent]
+ );
+
+ const handleInputChange = (evt: ChangeEvent) => {
+ // All URLs are lowercased
+ // Replace ampersand characters with 'and'
+ // Only allow alphanumeric characters
+ const path = evt.target.value
+ .toLowerCase()
+ .replace(/\&/g, "and")
+ .replace(/[^a-zA-Z0-9]/g, "-");
+
+ validate(path);
+ setPathPart(path);
+
+ onChange(path, "pathPart");
+ };
+
+ // Revalidate when parent path changes
+ useEffect(() => {
+ validate(pathPart);
+ }, [parent?.web, pathPart]);
+
+ useEffect(() => {
+ setPathPart(item?.web?.pathPart || "");
+ }, [item?.web]);
+
+ return (
+
+
+
+ ),
+ }}
+ helperText={
+ !!pathPart &&
+ isUnique && (
+
+ {domain}
+ {parent ? parent.web?.path + pathPart : `/${pathPart}`}
+
+ )
+ }
+ error={hasErrors(error)}
+ />
+
+
+ );
+};
+
+type AdornmentProps = {
+ isLoading: boolean;
+ isUnique: boolean;
+};
+const Adornment = ({ isLoading, isUnique }: AdornmentProps) => {
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ {isUnique ? (
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaDescription.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaDescription.tsx
new file mode 100644
index 0000000000..8e9668f751
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaDescription.tsx
@@ -0,0 +1,72 @@
+import { useState, useEffect, ChangeEvent } from "react";
+import { connect, useDispatch } from "react-redux";
+import { TextField, Box } from "@mui/material";
+
+import { notify } from "../../../../../../../../shell/store/notifications";
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { MaxLengths } from "..";
+import { hasErrors } from "./util";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+import { withAI } from "../../../../../../../../shell/components/withAi";
+import { MutableRefObject } from "react";
+
+const AIFieldShell = withAI(FieldShell);
+
+type MetaDescriptionProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+ onResetFlowType: () => void;
+ aiButtonRef?: MutableRefObject;
+ isAIAssistedFlow: boolean;
+ required: boolean;
+};
+export default connect()(function MetaDescription({
+ value,
+ onChange,
+ error,
+ onResetFlowType,
+ aiButtonRef,
+ isAIAssistedFlow,
+ required,
+}: MetaDescriptionProps) {
+ return (
+
+ ) => {
+ onChange(evt.target.value, "metaDescription");
+ onResetFlowType?.();
+ }}
+ onResetFlowType={() => {
+ onResetFlowType?.();
+ }}
+ isAIAssistedFlow={isAIAssistedFlow}
+ >
+ onChange(evt.target.value, "metaDescription")}
+ multiline
+ rows={3}
+ error={hasErrors(error)}
+ />
+
+
+ );
+});
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaImage.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaImage.tsx
new file mode 100644
index 0000000000..40f5ee4817
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaImage.tsx
@@ -0,0 +1,334 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+import { Dialog, IconButton, Stack } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import { AddRounded, Close, EditRounded } from "@mui/icons-material";
+import { MemoryRouter, useLocation, useParams } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
+
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { AppState } from "../../../../../../../../shell/store/types";
+import {
+ useCreateContentModelFieldMutation,
+ useGetContentModelFieldsQuery,
+ useUndeleteContentModelFieldMutation,
+} from "../../../../../../../../shell/services/instance";
+import {
+ FieldTypeMedia,
+ MediaItem,
+} from "../../../../components/FieldTypeMedia";
+import { MediaApp } from "../../../../../../../media/src/app";
+import { useLazyGetFileQuery } from "../../../../../../../../shell/services/mediaManager";
+import { fileExtension } from "../../../../../../../media/src/app/utils/fileUtils";
+import { fetchFields } from "../../../../../../../../shell/store/fields";
+
+type MetaImageProps = {
+ onChange: (value: string, name: string) => void;
+};
+export const MetaImage = ({ onChange }: MetaImageProps) => {
+ const dispatch = useDispatch();
+ const location = useLocation();
+ const isCreateItemPage = location?.pathname?.split("/")?.pop() === "new";
+ const { modelZUID, itemZUID } = useParams<{
+ modelZUID: string;
+ itemZUID: string;
+ }>();
+ const item = useSelector(
+ (state: AppState) =>
+ state.content[isCreateItemPage ? `new:${modelZUID}` : itemZUID]
+ );
+ const fieldTypeMedia = useRef(null);
+ const { data: modelFields } = useGetContentModelFieldsQuery(modelZUID);
+ const [
+ createContentModelField,
+ {
+ isLoading: isCreatingOgImageField,
+ isSuccess: isOgImageFieldCreated,
+ error: ogImageFieldCreationError,
+ },
+ ] = useCreateContentModelFieldMutation();
+ const [
+ undeleteContentModelField,
+ { isLoading: isUndeletingField, isSuccess: isFieldUndeleted },
+ ] = useUndeleteContentModelFieldMutation();
+ const [getFile] = useLazyGetFileQuery();
+ const [imageModal, setImageModal] = useState(null);
+ const [autoOpenMediaBrowser, setAutoOpenMediaBrowser] = useState(false);
+ const [temporaryMetaImageURL, setTemporaryMetaImageURL] =
+ useState(null);
+ const [showOGImageField, setShowOGImageField] = useState(false);
+
+ const isBynderSessionValid =
+ localStorage.getItem("cvrt") && localStorage.getItem("cvad");
+
+ const contentImages = useMemo(() => {
+ if (!modelFields?.length || !Object.keys(item?.data ?? {})?.length) return;
+ const mediaFieldsWithImageOnTheName: string[] = [];
+ const otherMediaFields: string[] = [];
+
+ modelFields.forEach((field) => {
+ if (
+ !field.deletedAt &&
+ field.datatype === "images" &&
+ field?.name !== "og_image" &&
+ !!item?.data?.[field.name]
+ ) {
+ if (
+ field.label.toLowerCase().includes("image") ||
+ field.name.toLocaleLowerCase().includes("image")
+ ) {
+ mediaFieldsWithImageOnTheName.push(
+ ...String(item.data[field.name]).split(",")
+ );
+ } else {
+ otherMediaFields.push(...String(item.data[field.name]).split(","));
+ }
+ }
+ });
+
+ return [...mediaFieldsWithImageOnTheName, ...otherMediaFields];
+ }, [modelFields, item?.data]);
+
+ useEffect(() => {
+ if (!contentImages?.length) {
+ setTemporaryMetaImageURL(null);
+ return;
+ }
+
+ let validImages = contentImages.map(async (value) => {
+ const isZestyMediaFile = value.startsWith("3-");
+ // Need to resolve media zuids to determine if these are actually images
+ const res = isZestyMediaFile && (await getFile(value).unwrap());
+ const isImage = [
+ "png",
+ "jpg",
+ "jpeg",
+ "svg",
+ "gif",
+ "tif",
+ "webp",
+ ].includes(fileExtension(isZestyMediaFile ? res.url : value));
+
+ if (isImage) {
+ return value;
+ }
+ });
+
+ Promise.all(validImages).then((data) => {
+ setTemporaryMetaImageURL(data?.[0]);
+ });
+ }, [JSON.stringify(contentImages), temporaryMetaImageURL]);
+
+ const handleCreateOgImageField = () => {
+ const existingOgImageField = modelFields?.find(
+ (field) => field.name === "og_image"
+ );
+
+ if (!!existingOgImageField && !!existingOgImageField.deletedAt) {
+ // If the og_image field already exists in the model but was deactivated, reactivate it
+ undeleteContentModelField({
+ modelZUID,
+ fieldZUID: existingOgImageField.ZUID,
+ });
+ } else {
+ // If the model has no og_image field yet, create it
+ createContentModelField({
+ modelZUID,
+ body: {
+ contentModelZUID: modelZUID,
+ datatype: "images",
+ description:
+ "This field allows you to set an open graph image via the SEO tab. An Open Graph (OG) image is an image that appears on a social media post when a web page is shared.",
+ label: "Meta Image",
+ name: "og_image",
+ required: false,
+ settings: {
+ defaultValue: null,
+ group_id: "",
+ limit: 1,
+ list: false,
+ },
+ sort: modelFields?.length, // Adds it to the end of the current model's field list
+ },
+ });
+ }
+
+ setShowOGImageField(true);
+ };
+
+ useEffect(() => {
+ if (
+ (!isCreatingOgImageField && isOgImageFieldCreated) ||
+ (!isUndeletingField && isFieldUndeleted)
+ ) {
+ // Initiate the empty og_image field
+ onChange(null, "og_image");
+ dispatch(fetchFields(modelZUID));
+ }
+ }, [
+ isOgImageFieldCreated,
+ isCreatingOgImageField,
+ isUndeletingField,
+ isFieldUndeleted,
+ ]);
+
+ useEffect(() => {
+ // Automatically opens the media browser when the og_image field has no value
+ if (autoOpenMediaBrowser && "og_image" in item?.data) {
+ if (!item?.data?.["og_image"]) {
+ fieldTypeMedia.current?.triggerOpenMediaBrowser();
+ }
+ setAutoOpenMediaBrowser(false);
+ }
+ }, [item?.data, autoOpenMediaBrowser]);
+
+ // If there is already a field named og_image and it is storing a value
+ if (
+ "og_image" in item?.data &&
+ (!!item?.data?.og_image || showOGImageField)
+ ) {
+ const ogImageValue = item.data.og_image;
+
+ return (
+ <>
+
+ {
+ setImageModal(opts);
+ }}
+ onChange={(value: string, name: string) => {
+ if (!value) {
+ setShowOGImageField(false);
+ }
+
+ onChange(value, name);
+ }}
+ lockedToGroupId={null}
+ settings={{
+ fileExtensions: [
+ ".png",
+ ".jpg",
+ ".jpeg",
+ ".svg",
+ ".gif",
+ ".tif",
+ ".webp",
+ ],
+ fileExtensionsErrorMessage:
+ "Only files with the following extensions are allowed: .png, .jpg, .jpeg, .svg, .gif, .tif, .webp",
+ }}
+ />
+
+ {imageModal && (
+
+
+
+ )}
+
+ );
+ }
+
+ // If there is a media field with an API ID containing the word "image" and is storing a file
+ if (!!temporaryMetaImageURL) {
+ return (
+
+
+
+ }
+ variant="outlined"
+ sx={{ width: "fit-content" }}
+ onClick={() => {
+ handleCreateOgImageField();
+ setAutoOpenMediaBrowser(true);
+ }}
+ >
+ Customize Image
+
+
+
+ );
+ }
+
+ // If no image field
+ return (
+
+ }
+ variant="outlined"
+ sx={{ width: "fit-content", mt: 0.75 }}
+ onClick={handleCreateOgImageField}
+ >
+ Add Meta Image
+
+
+ );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaKeywords.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaKeywords.tsx
similarity index 56%
rename from src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaKeywords.js
rename to src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaKeywords.tsx
index 30f238dde3..6aa050b170 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaKeywords.js
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaKeywords.tsx
@@ -1,17 +1,23 @@
import { memo } from "react";
-import { TextField } from "@mui/material";
+import { TextField, Box } from "@mui/material";
-import { FieldShell } from "../../../../../components/Editor/Field/FieldShell";
-import { MaxLengths } from "../ItemSettings";
-import styles from "./MetaKeywords.less";
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { MaxLengths } from "..";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+
+type MetaKeywordsProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+};
export const MetaKeywords = memo(function MetaKeywords({
- meta_keywords,
+ value,
onChange,
- errors,
-}) {
+ error,
+}: MetaKeywordsProps) {
return (
-
+
onChange(evt.target.value, "metaKeywords")}
/>
-
+
);
});
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaLinkText.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaLinkText.tsx
new file mode 100644
index 0000000000..17dc9a1f5a
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaLinkText.tsx
@@ -0,0 +1,40 @@
+import { memo } from "react";
+
+import { TextField, Box } from "@mui/material";
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { MaxLengths } from "..";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+
+type MetaLinkTextProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+};
+export const MetaLinkText = memo(function MetaLinkText({
+ value,
+ onChange,
+ error,
+}: MetaLinkTextProps) {
+ return (
+
+
+ onChange(evt.target.value, "metaLinkText")}
+ />
+
+
+ );
+});
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaTitle.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaTitle.tsx
new file mode 100644
index 0000000000..fc15fe43f6
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaTitle.tsx
@@ -0,0 +1,67 @@
+import { ChangeEvent, memo, MutableRefObject } from "react";
+
+import { TextField, Box } from "@mui/material";
+
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { MaxLengths } from "..";
+import { hasErrors } from "./util";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+import { withAI } from "../../../../../../../../shell/components/withAi";
+
+const AIFieldShell = withAI(FieldShell);
+
+type MetaTitleProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+ saveMetaTitleParameters?: boolean;
+ onResetFlowType: () => void;
+ onAIMetaTitleInserted?: () => void;
+ aiButtonRef?: MutableRefObject;
+};
+export const MetaTitle = memo(function MetaTitle({
+ value,
+ onChange,
+ error,
+ saveMetaTitleParameters,
+ onResetFlowType,
+ onAIMetaTitleInserted,
+ aiButtonRef,
+}: MetaTitleProps) {
+ return (
+
+ ) => {
+ onChange(evt.target.value, "metaTitle");
+ onAIMetaTitleInserted?.();
+ }}
+ onResetFlowType={() => {
+ onResetFlowType?.();
+ }}
+ >
+ onChange(evt.target.value, "metaTitle")}
+ error={hasErrors(error)}
+ />
+
+
+ );
+});
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/OGDescription.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/OGDescription.tsx
new file mode 100644
index 0000000000..027728fc81
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/OGDescription.tsx
@@ -0,0 +1,46 @@
+import { TextField, Box } from "@mui/material";
+
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { hasErrors } from "./util";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+import { ContentModelField } from "../../../../../../../../shell/services/types";
+import { MaxLengths } from "..";
+
+type OGDescriptionProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+ field: ContentModelField;
+};
+export const OGDescription = ({
+ value,
+ onChange,
+ error,
+ field,
+}: OGDescriptionProps) => {
+ return (
+
+
+ onChange(evt.target.value, "og_description")}
+ error={hasErrors(error)}
+ />
+
+
+ );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/OGTitle.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/OGTitle.tsx
new file mode 100644
index 0000000000..fb28d0323f
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/OGTitle.tsx
@@ -0,0 +1,39 @@
+import { TextField, Box } from "@mui/material";
+
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { hasErrors } from "./util";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+import { ContentModelField } from "../../../../../../../../shell/services/types";
+import { MaxLengths } from "..";
+
+type OGTitleProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+ field: ContentModelField;
+};
+export const OGTitle = ({ value, onChange, error, field }: OGTitleProps) => {
+ return (
+
+
+ onChange(evt.target.value, "og_title")}
+ error={hasErrors(error)}
+ />
+
+
+ );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/SitemapPriority.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/SitemapPriority.js
new file mode 100644
index 0000000000..66ab8a19cb
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/SitemapPriority.js
@@ -0,0 +1,88 @@
+import { memo } from "react";
+
+import { Autocomplete, TextField } from "@mui/material";
+
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import styles from "./SitemapPriority.less";
+
+const OPTIONS = [
+ {
+ value: -1.0,
+ label: "Automatically Set Priority",
+ },
+ {
+ value: 1.0,
+ label: "1.0",
+ },
+ {
+ value: 0.9,
+ label: "0.9",
+ },
+ {
+ value: 0.8,
+ label: "0.8",
+ },
+ {
+ value: 0.7,
+ label: "0.7",
+ },
+ {
+ value: 0.6,
+ label: "0.6",
+ },
+ {
+ value: 0.5,
+ label: "0.5",
+ },
+ {
+ value: 0.4,
+ label: "0.4",
+ },
+ {
+ value: 0.3,
+ label: "0.3",
+ },
+ {
+ value: 0.2,
+ label: "0.2",
+ },
+ {
+ value: 0.1,
+ label: "0.1",
+ },
+ {
+ value: -2.0,
+ label: "Do Not Display in Sitemap",
+ },
+];
+
+export const SitemapPriority = memo(function SitemapPriority(props) {
+ return (
+
+
+ option.value === props.sitemapPriority
+ ) || {
+ value: -1.0,
+ label: "Automatically Set Priority",
+ }
+ }
+ fullWidth
+ renderInput={(params) => }
+ onChange={(_, value) => {
+ props.onChange(value ? value.value : -1.0, "sitemapPriority");
+ }}
+ />
+
+
+ );
+});
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/SitemapPriority.less b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/SitemapPriority.less
similarity index 100%
rename from src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/SitemapPriority.less
rename to src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/SitemapPriority.less
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/TCDescription.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/TCDescription.tsx
new file mode 100644
index 0000000000..5084e76406
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/TCDescription.tsx
@@ -0,0 +1,46 @@
+import { TextField, Box } from "@mui/material";
+
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { hasErrors } from "./util";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+import { ContentModelField } from "../../../../../../../../shell/services/types";
+import { MaxLengths } from "../index";
+
+type TCDescriptionProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+ field: ContentModelField;
+};
+export const TCDescription = ({
+ value,
+ onChange,
+ error,
+ field,
+}: TCDescriptionProps) => {
+ return (
+
+
+ onChange(evt.target.value, "tc_description")}
+ error={hasErrors(error)}
+ />
+
+
+ );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/TCTitle.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/TCTitle.tsx
new file mode 100644
index 0000000000..3ebab4a1d5
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/TCTitle.tsx
@@ -0,0 +1,39 @@
+import { TextField, Box } from "@mui/material";
+
+import { FieldShell } from "../../../../components/Editor/Field/FieldShell";
+import { hasErrors } from "./util";
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+import { ContentModelField } from "../../../../../../../../shell/services/types";
+import { MaxLengths } from "../index";
+
+type TCTitleProps = {
+ value: string;
+ onChange: (value: string, name: string) => void;
+ error: Error;
+ field: ContentModelField;
+};
+export const TCTitle = ({ value, onChange, error, field }: TCTitleProps) => {
+ return (
+
+
+ onChange(evt.target.value, "tc_title")}
+ error={hasErrors(error)}
+ />
+
+
+ );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/util.ts b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/util.ts
new file mode 100644
index 0000000000..0aa2242464
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/util.ts
@@ -0,0 +1,35 @@
+import { Error } from "../../../../components/Editor/Field/FieldShell";
+
+export const hasErrors = (errors: Error) => {
+ if (!errors) return false;
+
+ return Object.values(errors).some((error) => !!error);
+};
+
+export const validateMetaDescription = (value: string) => {
+ let message = "";
+
+ if (!value) return message;
+
+ if (!(value.indexOf("\u0152") === -1)) {
+ message =
+ "Found OE ligature. These special characters are not allowed in meta descriptions.";
+ } else if (!(value.indexOf("\u0153") === -1)) {
+ message =
+ "Found oe ligature. These special characters are not allowed in meta descriptions.";
+ } else if (!(value.indexOf("\xAB") === -1)) {
+ message =
+ "Found << character. These special characters are not allowed in meta descriptions.";
+ } else if (!(value.indexOf("\xBB") === -1)) {
+ message =
+ "Found >> character. These special characters are not allowed in meta descriptions.";
+ } else if (/[\u201C\u201D\u201E]/.test(value)) {
+ message =
+ "Found Microsoft Smart double quotes and/or apostrophe. These special characters are not allowed in meta descriptions as it may lead to incorrect rendering, where characters show up as � or other odd symbols. Please use straight quotes (' and \") instead.";
+ } else if (/[\u2018\u2019\u201A]/.test(value)) {
+ message =
+ "Found Microsoft Smart single quotes and/or apostrophe. These special characters are not allowed in meta descriptions as it may lead to incorrect rendering, where characters show up as � or other odd symbols. Please use straight quotes (' and \") instead.";
+ }
+
+ return message;
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
index 2a9d069f13..07c43a29fd 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
@@ -64,8 +64,8 @@ export const ItemEditHeaderActions = ({
itemZUID: string;
}>();
const dispatch = useDispatch();
- const canPublish = usePermission("PUBLISH");
- const canUpdate = usePermission("UPDATE");
+ const canPublish = usePermission("PUBLISH", itemZUID);
+ const canUpdate = usePermission("UPDATE", itemZUID);
const [publishMenu, setPublishMenu] = useState(null);
const [publishAfterSave, setPublishAfterSave] = useState(false);
const [unpublishDialogOpen, setUnpublishDialogOpen] = useState(false);
@@ -229,7 +229,7 @@ export const ItemEditHeaderActions = ({
onClick={() => {
onSave();
}}
- loading={saving && !publishAfterSave}
+ loading={saving}
disabled={!canUpdate}
id="SaveItemButton"
>
@@ -314,7 +314,7 @@ export const ItemEditHeaderActions = ({
setIsConfirmPublishModalOpen(true);
}
}}
- loading={publishing || publishAfterSave || isFetching}
+ loading={publishing || saving || isFetching}
color="success"
variant="contained"
id="PublishButton"
@@ -332,7 +332,7 @@ export const ItemEditHeaderActions = ({
onClick={(e) => {
setPublishMenu(e.currentTarget);
}}
- disabled={publishing || publishAfterSave || isFetching}
+ disabled={publishing || saving || isFetching}
data-cy="PublishMenuButton"
>
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/LanguageSelector.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/LanguageSelector.tsx
index 617c83d054..8ed340b481 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/LanguageSelector.tsx
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/LanguageSelector.tsx
@@ -11,6 +11,7 @@ import { useDispatch, useSelector } from "react-redux";
import { ContentItem } from "../../../../../../../../shell/services/types";
import { AppState } from "../../../../../../../../shell/store/types";
import { selectLang } from "../../../../../../../../shell/store/user";
+import getFlagEmoji from "../../../../../../../../utility/getFlagEmoji";
const getCountryCode = (langCode: string) => {
const splitTag = langCode.split("-");
@@ -19,18 +20,6 @@ const getCountryCode = (langCode: string) => {
return countryCode;
};
-const getFlagEmojiFromIETFTag = (langCode: string) => {
- const countryCode = getCountryCode(langCode);
-
- // Convert country code to flag emoji.
- // Unicode flag emojis are made up of regional indicator symbols, which are a sequence of two letters.
- const baseOffset = 0x1f1e6;
- return (
- String.fromCodePoint(baseOffset + (countryCode.charCodeAt(0) - 65)) +
- String.fromCodePoint(baseOffset + (countryCode.charCodeAt(1) - 65))
- );
-};
-
export const LanguageSelector = () => {
const dispatch = useDispatch();
const history = useHistory();
@@ -97,7 +86,7 @@ export const LanguageSelector = () => {
data-cy="language-selector"
>
- {getFlagEmojiFromIETFTag(activeLanguage?.code)}
+ {getFlagEmoji(getCountryCode(activeLanguage?.code))}
{" "}
{activeLanguage?.code?.split("-")[0]?.toUpperCase()} (
{getCountryCode(activeLanguage?.code)})
@@ -130,7 +119,7 @@ export const LanguageSelector = () => {
onSelect(language.code);
}}
>
- {getFlagEmojiFromIETFTag(language.code)}{" "}
+ {getFlagEmoji(getCountryCode(language.code))}{" "}
{language.code.split("-")[0]?.toUpperCase()} (
{getCountryCode(language.code)})
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/MoreMenu.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/MoreMenu.tsx
index 0ff94721c6..5a5dcb2ced 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/MoreMenu.tsx
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/MoreMenu.tsx
@@ -1,10 +1,8 @@
import {
- Chip,
IconButton,
ListItemIcon,
Menu,
MenuItem,
- Typography,
Tooltip,
} from "@mui/material";
import {
@@ -16,23 +14,18 @@ import {
CodeRounded,
DeleteRounded,
CheckRounded,
- DesignServicesRounded,
- VisibilityRounded,
KeyboardArrowRightRounded,
} from "@mui/icons-material";
import { useState } from "react";
import { Database } from "@zesty-io/material";
import { useHistory, useParams } from "react-router";
-import { useSelector } from "react-redux";
-import { AppState } from "../../../../../../../../shell/store/types";
-import { ContentItem } from "../../../../../../../../shell/services/types";
import { DuplicateItemDialog } from "./DuplicateItemDialog";
-import { ApiType } from "../../../../../../../schema/src/app/components/ModelApi";
-import { useGetDomainsQuery } from "../../../../../../../../shell/services/accounts";
import { useFilePath } from "../../../../../../../../shell/hooks/useFilePath";
import { DeleteItemDialog } from "./DeleteItemDialog";
import { useGetContentModelsQuery } from "../../../../../../../../shell/services/instance";
import { usePermission } from "../../../../../../../../shell/hooks/use-permissions";
+import { CascadingMenuItem } from "../../../../../../../../shell/components/CascadingMenuItem";
+import { APIEndpoints } from "../../../../components/APIEndpoints";
export const MoreMenu = () => {
const { modelZUID, itemZUID } = useParams<{
@@ -42,22 +35,13 @@ export const MoreMenu = () => {
const [anchorEl, setAnchorEl] = useState(null);
const [isCopied, setIsCopied] = useState(false);
const [showDuplicateItemDialog, setShowDuplicateItemDialog] = useState(false);
- const [showApiEndpoints, setShowApiEndpoints] = useState(
- null
- );
const [showDeleteItemDialog, setShowDeleteItemDialog] = useState(false);
- const [apiEndpointType, setApiEndpointType] = useState("quick-access");
const history = useHistory();
- const item = useSelector(
- (state: AppState) => state.content[itemZUID] as ContentItem
- );
- const instance = useSelector((state: AppState) => state.instance);
- const { data: domains } = useGetDomainsQuery();
const codePath = useFilePath(modelZUID);
const { data: contentModels } = useGetContentModelsQuery();
const type =
contentModels?.find((model) => model.ZUID === modelZUID)?.type ?? "";
- const canDelete = usePermission("DELETE");
+ const canDelete = usePermission("DELETE", itemZUID);
const handleCopyClick = (data: string) => {
navigator?.clipboard
@@ -73,13 +57,6 @@ export const MoreMenu = () => {
});
};
- const apiTypeEndpointMap: Partial> = {
- "quick-access": `/-/instant/${itemZUID}.json`,
- "site-generators": item ? `/${item?.web?.path}/?toJSON` : "/?toJSON",
- };
-
- const liveDomain = domains?.find((domain) => domain.branch == "live");
-
return (
<>
{
Copy ZUID
-
+
+
{type !== "dataset" && (
-
+
+
)}
-
+
+
{!isDataset && (
-
+
+
)}
-
-
-
diff --git a/src/apps/content-editor/src/app/views/ItemList/ItemListFilters.tsx b/src/apps/content-editor/src/app/views/ItemList/ItemListFilters.tsx
index b791dae062..75d836eea0 100644
--- a/src/apps/content-editor/src/app/views/ItemList/ItemListFilters.tsx
+++ b/src/apps/content-editor/src/app/views/ItemList/ItemListFilters.tsx
@@ -1,12 +1,23 @@
-import { Box, Menu, MenuItem, Button, Typography } from "@mui/material";
+import {
+ Box,
+ Menu,
+ MenuItem,
+ Button,
+ Typography,
+ MenuList,
+ ListItemText,
+} from "@mui/material";
import {
DateFilter,
FilterButton,
UserFilter,
} from "../../../../../../shell/components/Filters";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useContext } from "react";
import { useParams } from "../../../../../../shell/hooks/useParams";
-import { ArrowDropDownOutlined } from "@mui/icons-material";
+import {
+ ChevronRightOutlined,
+ KeyboardArrowDownRounded,
+} from "@mui/icons-material";
import {
useGetContentModelFieldsQuery,
useGetLangsQuery,
@@ -14,12 +25,14 @@ import {
import { useDateFilterParams } from "../../../../../../shell/hooks/useDateFilterParams";
import { useGetUsersQuery } from "../../../../../../shell/services/accounts";
import { useParams as useRouterParams } from "react-router";
+import { CascadingMenuItem } from "../../../../../../shell/components/CascadingMenuItem";
+import { TableSortContext } from "./TableSortProvider";
const SORT_ORDER = {
- dateSaved: "Date Saved",
- datePublished: "Date Published",
- dateCreated: "Date Created",
- status: "Status",
+ lastSaved: "Last Saved",
+ lastPublished: "Last Published",
+ createdOn: "Date Created",
+ version: "Status",
} as const;
const STATUS_FILTER = {
@@ -87,6 +100,9 @@ export const ItemListFilters = () => {
const { data: users } = useGetUsersQuery();
const { data: fields, isFetching: isFieldsFetching } =
useGetContentModelFieldsQuery(modelZUID);
+ const [sortModel, setSortModel] = useContext(TableSortContext);
+
+ const activeSortOrder = sortModel?.[0]?.field;
const userOptions = useMemo(() => {
return users?.map((user) => ({
@@ -97,17 +113,49 @@ export const ItemListFilters = () => {
}));
}, [users]);
+ const handleUpdateSortOrder = (sortType: string) => {
+ setAnchorEl({
+ currentTarget: null,
+ id: "",
+ });
+
+ setSortModel([
+ {
+ field: sortType,
+ sort: "desc",
+ },
+ ]);
+ };
+
+ const getButtonText = (activeSortOrder: string) => {
+ if (!activeSortOrder) {
+ return SORT_ORDER.lastSaved;
+ }
+
+ if (activeSortOrder === "createdBy") {
+ return "Created By";
+ }
+
+ if (activeSortOrder === "zuid") {
+ return "ZUID";
+ }
+
+ if (SORT_ORDER.hasOwnProperty(activeSortOrder)) {
+ return SORT_ORDER[activeSortOrder as keyof typeof SORT_ORDER];
+ }
+
+ const fieldLabel = fields?.find(
+ (field) => field.name === activeSortOrder
+ )?.label;
+ return fieldLabel;
+ };
+
return (
field.name === params.get("sort"))
- ?.label) ??
- SORT_ORDER.dateSaved
- }`}
+ buttonText={`Sort: ${getButtonText(activeSortOrder)}`}
onOpenMenu={(event: React.MouseEvent) => {
setAnchorEl({
currentTarget: event.currentTarget,
@@ -134,23 +182,46 @@ export const ItemListFilters = () => {
>
{Object.entries(SORT_ORDER).map(([key, value]) => (
))}
+
+ More
+
+
+ }
+ PaperProps={{
+ sx: {
+ width: 240,
+ },
+ }}
+ >
+
+
+
+
+
{
?.map((field) => (
);
diff --git a/src/apps/media/src/app/components/FileModal/FileTypePreview.tsx b/src/apps/media/src/app/components/FileModal/FileTypePreview.tsx
index 66c22b5b67..7de1e7b234 100644
--- a/src/apps/media/src/app/components/FileModal/FileTypePreview.tsx
+++ b/src/apps/media/src/app/components/FileModal/FileTypePreview.tsx
@@ -32,6 +32,7 @@ import ReportGmailerrorredIcon from "@mui/icons-material/ReportGmailerrorred";
interface Props {
src: string;
filename: string;
+ updatedAt?: string;
imageSettings?: any;
isMediaThumbnail?: boolean;
}
@@ -41,6 +42,7 @@ export const FileTypePreview: FC = ({
filename,
imageSettings,
isMediaThumbnail,
+ updatedAt,
}) => {
const theme = useTheme();
const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
@@ -86,6 +88,11 @@ export const FileTypePreview: FC = ({
const defaultImageSettings = {
width: 800,
optimize: "high",
+ // Prevents browser image cache when a certain file has been already replaced
+ ...(!!updatedAt &&
+ !isNaN(new Date(updatedAt).getTime()) && {
+ versionHash: new Date(updatedAt).getTime(),
+ }),
};
if (isLargeScreen) {
@@ -377,7 +384,8 @@ export const FileTypePreview: FC = ({
void;
+ onCancel: () => void;
+};
+export const ReplaceFileModal = ({
+ onClose,
+ originalFile,
+ onCancel,
+}: ReplaceFileModalProps) => {
+ const dispatch = useDispatch();
+ const [newFile, setNewFile] = useState(null);
+ const [showUploadingFileModal, setShowUploadingFileModal] = useState(false);
+ const hiddenFileInput = useRef(null);
+ const { data: currentUserRoles } = useGetCurrentUserRolesQuery();
+ const uploads = useSelector((state: AppState) => state.mediaRevamp.uploads);
+ const filesToUpload = uploads.filter((upload) => upload.status !== "failed");
+
+ const canReplaceImage = currentUserRoles
+ ?.filter((role) => role.entityZUID === instanceZUID)
+ ?.some((role) => ["admin", "owner"].includes(role.name?.toLowerCase()));
+
+ const acceptedExtension =
+ fileExtension(originalFile?.url) === "jpg" ||
+ fileExtension(originalFile?.url) === "jpeg"
+ ? ".jpg, .jpeg"
+ : `.${fileExtension(originalFile?.url)}`;
+
+ useEffect(() => {
+ if (newFile) {
+ dispatch(
+ fileUploadStage([
+ {
+ file: newFile,
+ bin_id: originalFile.bin_id,
+ group_id: originalFile.group_id,
+ replacementFile: true,
+ },
+ ])
+ );
+ setShowUploadingFileModal(true);
+ setNewFile(null);
+ }
+ }, [newFile]);
+
+ const handleCloseUploadingFileModal = () => {
+ dispatch(dismissFileUploads());
+
+ if (filesToUpload.length) {
+ dispatch(
+ mediaManagerApi.util.invalidateTags([
+ { type: "GroupData", id: originalFile.group_id },
+ "BinFiles",
+ ])
+ );
+ }
+
+ onClose();
+ };
+
+ if (!canReplaceImage) {
+ return (
+
+ );
+ }
+
+ if (showUploadingFileModal) {
+ return (
+
+ );
+ }
+
+ return (
+ <>
+
+ {
+ setNewFile(evt.target.files[0]);
+ }}
+ hidden
+ accept={acceptedExtension}
+ style={{ display: "none" }}
+ />
+
+ );
+};
diff --git a/src/apps/media/src/app/components/FileModal/index.tsx b/src/apps/media/src/app/components/FileModal/index.tsx
index e726957cd5..282c6877d0 100644
--- a/src/apps/media/src/app/components/FileModal/index.tsx
+++ b/src/apps/media/src/app/components/FileModal/index.tsx
@@ -18,6 +18,7 @@ import { useGetFileQuery } from "../../../../../../shell/services/mediaManager";
import { OTFEditor } from "./OTFEditor";
import { File } from "../../../../../../shell/services/types";
import { useParams } from "../../../../../../shell/hooks/useParams";
+import { ReplaceFileModal } from "./ReplaceFileModal";
const styledModal = {
position: "absolute",
@@ -48,6 +49,8 @@ export const FileModal: FC = ({
const location = useLocation();
const { data, isLoading, isError, isFetching } = useGetFileQuery(fileId);
const [showEdit, setShowEdit] = useState(false);
+ const [showReplaceFileModal, setShowReplaceFileModal] = useState(false);
+ const [fileToReplace, setFileToReplace] = useState(null);
const [params, setParams] = useParams();
const [adjacentFiles, setAdjacentFiles] = useState({
prevFile: null,
@@ -150,128 +153,145 @@ export const FileModal: FC = ({
};
}, []);
+ if (isFetching || (!data && !isError)) {
+ return (
+
+ );
+ }
+
+ if (showReplaceFileModal) {
+ return (
+ setShowReplaceFileModal(false)}
+ onClose={handleCloseModal}
+ />
+ );
+ }
+
+ if (!data) {
+ return <>;
+ }
+
return (
- <>
- {data && !isError && !isFetching ? (
-
- ) : isFetching || (!data && !isError) ? (
-
+
+
+ )}
+
+ {/* */}
+
-
-
- ) : (
- <>
- )}
-
+
+
+
+
+ {showEdit ? (
+
+ ) : (
+ {
+ setShowReplaceFileModal(true);
+ }}
+ />
+ )}
+
+ {/* */}
+
+
);
};
diff --git a/src/apps/media/src/app/components/Thumbnail/ThumbnailContent.tsx b/src/apps/media/src/app/components/Thumbnail/ThumbnailContent.tsx
index 6ce30ef6a5..009ff0de1e 100644
--- a/src/apps/media/src/app/components/Thumbnail/ThumbnailContent.tsx
+++ b/src/apps/media/src/app/components/Thumbnail/ThumbnailContent.tsx
@@ -17,16 +17,20 @@ interface Props {
filename: string;
onFilenameChange?: (value: string) => void;
onTitleChange?: (value: string) => void;
- isEditable?: boolean;
isSelected?: boolean;
+ isFilenameEditable?: boolean;
+ isTitleEditable?: boolean;
+ title?: string;
}
export const ThumbnailContent: FC = ({
filename,
onFilenameChange,
onTitleChange,
- isEditable,
isSelected,
+ isFilenameEditable,
+ isTitleEditable,
+ title,
}) => {
const styledCardContent = {
px: onFilenameChange ? 0 : 1,
@@ -48,13 +52,16 @@ export const ThumbnailContent: FC = ({
{onFilenameChange ? (
-
+
) =>
onFilenameChange(e.target.value.replace(" ", "-"))
}
@@ -79,15 +86,16 @@ export const ThumbnailContent: FC = ({
},
}}
/>
-
+
void;
onTitleChange?: (value: string) => void;
onClick?: () => void;
+ showRemove?: boolean;
+ isFilenameEditable?: boolean;
+ isTitleEditable?: boolean;
+ title?: string;
}
export const Thumbnail: FC = ({
src,
url,
filename,
- isEditable,
+ isDraggable,
showVideo,
onRemove,
onFilenameChange,
@@ -83,6 +87,10 @@ export const Thumbnail: FC = ({
onTitleChange,
imageHeight,
selectable,
+ showRemove = true,
+ isFilenameEditable,
+ isTitleEditable,
+ title,
}) => {
const theme = useTheme();
const imageEl = useRef();
@@ -119,6 +127,10 @@ export const Thumbnail: FC = ({
};
const RemoveIcon = () => {
+ if (!showRemove) {
+ return <>;
+ }
+
return (
<>
{onRemove && (
@@ -331,7 +343,7 @@ export const Thumbnail: FC = ({
sx={styledCard}
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
data-cy={id}
>
@@ -408,10 +420,12 @@ export const Thumbnail: FC = ({
file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -425,7 +439,7 @@ export const Thumbnail: FC = ({
sx={styledCard}
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
data-cy={id}
onDragStart={(evt) => onDragStart(evt)}
>
@@ -503,8 +517,9 @@ export const Thumbnail: FC = ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -516,7 +531,7 @@ export const Thumbnail: FC = ({
sx={styledCard}
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -588,7 +604,7 @@ export const Thumbnail: FC = ({
sx={styledCard}
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -663,7 +680,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -737,7 +755,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -812,7 +831,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -889,7 +909,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -972,7 +993,7 @@ export const Thumbnail: FC = ({
elevation={0}
data-cy={id}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1069,7 +1091,7 @@ export const Thumbnail: FC = ({
elevation={0}
data-cy={id}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1147,7 +1170,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1220,7 +1244,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1293,7 +1318,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1366,7 +1392,7 @@ export const Thumbnail: FC = ({
elevation={0}
data-cy={id}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1439,7 +1466,7 @@ export const Thumbnail: FC = ({
elevation={0}
data-cy={id}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1515,7 +1543,7 @@ export const Thumbnail: FC = ({
elevation={0}
data-cy={id}
onClick={isSelecting ? handleSelect : onClick}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1595,7 +1624,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1675,7 +1705,7 @@ export const Thumbnail: FC = ({
elevation={0}
onClick={isSelecting ? handleSelect : onClick}
data-cy={id}
- draggable={!isEditable}
+ draggable={!isDraggable}
onDragStart={(evt) => onDragStart(evt)}
>
= ({
filename={filename}
onFilenameChange={onFilenameChange}
onTitleChange={onTitleChange}
- isEditable={isEditable}
isSelected={selectedFiles.some((file) => file.id === id)}
+ isTitleEditable={isTitleEditable}
+ isFilenameEditable={isFilenameEditable}
/>
);
@@ -1759,6 +1790,6 @@ export const Thumbnail: FC = ({
};
Thumbnail.defaultProps = {
- isEditable: false,
+ isDraggable: false,
showVideo: true,
};
diff --git a/src/apps/media/src/app/components/UploadModal.tsx b/src/apps/media/src/app/components/UploadModal.tsx
index d7cee6d083..3c2c4e0eec 100644
--- a/src/apps/media/src/app/components/UploadModal.tsx
+++ b/src/apps/media/src/app/components/UploadModal.tsx
@@ -31,9 +31,13 @@ import pluralizeWord from "../../../../../utility/pluralizeWord";
export const UploadModal: FC = () => {
const dispatch = useDispatch();
- const uploads = useSelector((state: AppState) => state.mediaRevamp.uploads);
+ const uploads = useSelector((state: AppState) =>
+ state.mediaRevamp.uploads.filter((upload) => !upload.replacementFile)
+ );
const filesToUpload = useSelector((state: AppState) =>
- state.mediaRevamp.uploads.filter((upload) => upload.status !== "failed")
+ state.mediaRevamp.uploads.filter(
+ (upload) => upload.status !== "failed" && !upload.replacementFile
+ )
);
const ids = filesToUpload.length && {
currentBinId: filesToUpload[0].bin_id,
@@ -186,8 +190,14 @@ const UploadErrors = () => {
type UploadHeaderTextProps = {
uploads: Upload[];
+ headerKeyword?: string;
+ showCount?: boolean;
};
-const UploadHeaderText = ({ uploads }: UploadHeaderTextProps) => {
+export const UploadHeaderText = ({
+ uploads,
+ headerKeyword = "File",
+ showCount = true,
+}: UploadHeaderTextProps) => {
const filesUploading = uploads?.filter(
(upload) => upload.status === "inProgress"
);
@@ -225,12 +235,18 @@ const UploadHeaderText = ({ uploads }: UploadHeaderTextProps) => {
)}
+ {showCount ? (
+ filesUploading?.length > 0 ? (
+ filesUploading.length
+ ) : (
+ filesUploaded.length
+ )
+ ) : (
+ <>
+ )}{" "}
{filesUploading?.length > 0
- ? filesUploading.length
- : filesUploaded.length}{" "}
- {filesUploading?.length > 0
- ? pluralizeWord("File", filesUploading.length)
- : pluralizeWord("File", filesUploaded.length)}{" "}
+ ? pluralizeWord(headerKeyword, filesUploading.length)
+ : pluralizeWord(headerKeyword, filesUploaded.length)}{" "}
{filesUploading?.length > 0 ? "Uploading" : "Uploaded"}
diff --git a/src/apps/media/src/app/components/UploadThumbnail.tsx b/src/apps/media/src/app/components/UploadThumbnail.tsx
index 83504e031f..35d7f0b5c2 100644
--- a/src/apps/media/src/app/components/UploadThumbnail.tsx
+++ b/src/apps/media/src/app/components/UploadThumbnail.tsx
@@ -13,13 +13,23 @@ import {
Upload,
fileUploadSetFilename,
deleteUpload,
+ replaceFile,
} from "../../../../../shell/store/media-revamp";
+import { File as ZestyMediaFile } from "../../../../../shell/services/types";
interface Props {
file: Upload;
+ action?: "new" | "replace";
+ originalFile?: ZestyMediaFile;
+ showRemove?: boolean;
}
-export const UploadThumbnail: FC = ({ file }) => {
+export const UploadThumbnail: FC = ({
+ file,
+ action = "new",
+ originalFile,
+ showRemove = true,
+}) => {
const dispatch = useDispatch();
const { data: bin } = mediaManagerApi.useGetBinQuery(file.bin_id, {
@@ -28,7 +38,11 @@ export const UploadThumbnail: FC = ({ file }) => {
useEffect(() => {
if (bin && file.status === "staged") {
- dispatch(uploadFile(file, bin[0]));
+ if (action === "new") {
+ dispatch(uploadFile(file, bin[0]));
+ } else {
+ dispatch(replaceFile(file, originalFile));
+ }
}
}, [bin]);
@@ -61,10 +75,14 @@ export const UploadThumbnail: FC = ({ file }) => {
>
{
if (file.status === "success") {
dispatch(
diff --git a/src/apps/schema/src/app/components/AddFieldModal/DefaultValue.tsx b/src/apps/schema/src/app/components/AddFieldModal/DefaultValue.tsx
index 4a57292a00..d0b6a5427a 100644
--- a/src/apps/schema/src/app/components/AddFieldModal/DefaultValue.tsx
+++ b/src/apps/schema/src/app/components/AddFieldModal/DefaultValue.tsx
@@ -27,6 +27,7 @@ type DefaultValueProps = {
relatedFieldZUID: string;
};
options: FieldSettingsOptions[];
+ currency?: string;
};
export const DefaultValue = ({
@@ -39,6 +40,7 @@ export const DefaultValue = ({
mediaRules,
relationshipFields,
options,
+ currency,
}: DefaultValueProps) => {
return (
@@ -69,15 +71,16 @@ export const DefaultValue = ({
variant="body3"
color="text.secondary"
fontWeight="600"
- sx={{ mb: 1, display: "block" }}
+ sx={{ display: "block" }}
>
Set a predefined value for this field
}
/>
-
- {isDefaultValueEnabled && (
+
+ {isDefaultValueEnabled && (
+
@@ -102,8 +106,8 @@ export const DefaultValue = ({
- )}
-
+
+ )}
);
};
diff --git a/src/apps/schema/src/app/components/AddFieldModal/DefaultValueInput.tsx b/src/apps/schema/src/app/components/AddFieldModal/DefaultValueInput.tsx
index 633776d5a9..91c52679db 100644
--- a/src/apps/schema/src/app/components/AddFieldModal/DefaultValueInput.tsx
+++ b/src/apps/schema/src/app/components/AddFieldModal/DefaultValueInput.tsx
@@ -65,6 +65,7 @@ type DefaultValueInputProps = {
relatedFieldZUID: string;
};
options: FieldSettingsOptions[];
+ currency?: string;
};
export const DefaultValueInput = ({
@@ -75,6 +76,7 @@ export const DefaultValueInput = ({
mediaRules,
relationshipFields: { relatedModelZUID, relatedFieldZUID },
options,
+ currency,
}: DefaultValueInputProps) => {
const [imageModal, setImageModal] = useState(null);
const dispatch = useDispatch();
@@ -573,12 +575,11 @@ export const DefaultValueInput = ({
return (
);
case "date":
diff --git a/src/apps/schema/src/app/components/AddFieldModal/FieldFormInput.tsx b/src/apps/schema/src/app/components/AddFieldModal/FieldFormInput.tsx
index a41e038880..7517f00c6d 100644
--- a/src/apps/schema/src/app/components/AddFieldModal/FieldFormInput.tsx
+++ b/src/apps/schema/src/app/components/AddFieldModal/FieldFormInput.tsx
@@ -14,6 +14,10 @@ import {
Button,
IconButton,
Stack,
+ AutocompleteProps,
+ InputProps,
+ OutlinedInputProps,
+ FilledInputProps,
} from "@mui/material";
import { SelectChangeEvent } from "@mui/material/Select";
import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
@@ -25,6 +29,7 @@ import { FormValue } from "./views/FieldForm";
import { FieldSettingsOptions } from "../../../../../../shell/services/types";
import { convertDropdownValue } from "../../utils";
import { withCursorPosition } from "../../../../../../shell/components/withCursorPosition";
+import { Currency } from "../../../../../../shell/components/FieldTypeCurrency/currencies";
const TextFieldWithCursorPosition = withCursorPosition(TextField);
@@ -49,7 +54,10 @@ export type FieldNames =
| "regexRestrictPattern"
| "regexRestrictErrorMessage"
| "minValue"
- | "maxValue";
+ | "maxValue"
+ | "currency"
+ | "fileExtensions"
+ | "fileExtensionsErrorMessage";
type FieldType =
| "input"
| "checkbox"
@@ -78,7 +86,14 @@ export interface DropdownOptions {
label: string;
value: string;
}
-interface FieldFormInputProps {
+export type AutocompleteConfig = {
+ inputProps?:
+ | Partial
+ | Partial
+ | Partial;
+ maxHeight?: number;
+};
+type FieldFormInputProps = {
fieldConfig: InputField;
errorMsg?: string | [string, string][];
onDataChange: ({
@@ -89,9 +104,13 @@ interface FieldFormInputProps {
value: FormValue;
}) => void;
prefillData?: FormValue;
- dropdownOptions?: DropdownOptions[];
+ dropdownOptions?: DropdownOptions[] | Currency[];
disabled?: boolean;
-}
+ autocompleteConfig?: AutocompleteConfig;
+} & Pick<
+ AutocompleteProps,
+ "renderOption" | "filterOptions"
+>;
export const FieldFormInput = ({
fieldConfig,
errorMsg,
@@ -99,6 +118,9 @@ export const FieldFormInput = ({
prefillData,
dropdownOptions,
disabled,
+ renderOption,
+ filterOptions,
+ autocompleteConfig,
}: FieldFormInputProps) => {
const options =
fieldConfig.type === "options" ||
@@ -212,9 +234,19 @@ export const FieldFormInput = ({
{fieldConfig.type === "autocomplete" && (
<>
-
- {fieldConfig.label}
-
+
+
+ {fieldConfig.label}
+
+ {fieldConfig.tooltip && (
+
+
+
+ )}
+
)}
isOptionEqualToValue={(option, value) =>
@@ -246,16 +284,22 @@ export const FieldFormInput = ({
height: "40px",
},
}}
+ renderOption={renderOption}
+ filterOptions={filterOptions}
+ slotProps={{
+ paper: {
+ sx: {
+ "& .MuiAutocomplete-listbox": {
+ maxHeight: autocompleteConfig?.maxHeight || "40vh",
+ boxSizing: "border-box",
+ },
+ },
+ },
+ }}
/>
{prefillData &&
!dropdownOptions.find((option) => option.value === prefillData) && (
-
+
{fieldConfig.name === "group_id" &&
"The folder this was locked to has been deleted"}
{fieldConfig.name === "relatedModelZUID" &&
@@ -324,12 +368,9 @@ export const FieldFormInput = ({
error={Boolean(errorMsg)}
helperText={
errorMsg && (
-
+
{errorMsg}
-
+
)
}
type={fieldConfig.inputType || "text"}
@@ -445,9 +486,9 @@ const KeyValueInput = ({
handleDataChanged("value", e.target?.value);
}}
helperText={
-
+
{labelErrorMsg}
-
+
}
error={Boolean(labelErrorMsg)}
disabled={disabledFields.includes("value")}
@@ -463,9 +504,9 @@ const KeyValueInput = ({
handleDataChanged("key", e.target?.value);
}}
helperText={
-
+
{valueErrorMsg}
-
+
}
error={Boolean(valueErrorMsg)}
disabled={disabledFields.includes("key")}
diff --git a/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx b/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx
index 18223ec1a1..101eb794fc 100644
--- a/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx
+++ b/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx
@@ -4,14 +4,22 @@ import {
Checkbox,
Typography,
Stack,
+ InputLabel,
+ Autocomplete,
+ TextField,
+ Chip,
} from "@mui/material";
-import { FormValue } from "./views/FieldForm";
+import { Errors, FormValue } from "./views/FieldForm";
import { CustomGroup } from "../hooks/useMediaRules";
-
import { InputField } from "./FieldFormInput";
import { FieldFormInput, FieldNames } from "./FieldFormInput";
+import { useEffect, useState } from "react";
+
+type MediaFieldName = Extract<
+ FieldNames,
+ "limit" | "group_id" | "fileExtensions"
+>;
-type MediaFieldName = Extract;
const MediaLabelsConfig: {
[key in MediaFieldName]: { label: string; subLabel: string };
} = {
@@ -24,8 +32,83 @@ const MediaLabelsConfig: {
label: "Lock to a folder",
subLabel: "Ensures files can only be selected from a specific folder",
},
+ fileExtensions: {
+ label: "Limit File Types",
+ subLabel: "Ensures only certain file types can be accepted",
+ },
};
+const ExtensionPresets = [
+ {
+ label: "Images",
+ value: [".png", ".jpg", ".jpeg", ".svg", ".gif", ".tif", ".webp"],
+ },
+ {
+ label: "Videos",
+ value: [
+ ".mob",
+ ".avi",
+ ".wmv",
+ ".mp4",
+ ".mpeg",
+ ".mkv",
+ ".m4v",
+ ".mpg",
+ ".webm",
+ ],
+ },
+ {
+ label: "Audios",
+ value: [
+ ".mp3",
+ ".flac",
+ ".wav",
+ ".m4a",
+ ".aac",
+ ".ape",
+ ".opus",
+ ".aiff",
+ ".aif",
+ ],
+ },
+ {
+ label: "Documents",
+ value: [".doc", ".pdf", ".docx", ".txt", ".rtf", ".odt", ".pages"],
+ },
+ {
+ label: "Presentations",
+ value: [
+ ".ppt",
+ ".pptx",
+ ".key",
+ ".odp",
+ ".pps",
+ ".ppsx",
+ ".sldx",
+ ".potx",
+ ".otp",
+ ".sxi",
+ ],
+ },
+ {
+ label: "Spreadsheets",
+ value: [
+ ".xls",
+ ".xlsx",
+ ".csv",
+ ".tsv",
+ ".numbers",
+ ".ods",
+ ".xlsm",
+ ".xlsb",
+ ".xlt",
+ ".xltx",
+ ],
+ },
+] as const;
+
+const RestrictedExtensions = [".exe", ".dmg"];
+
interface Props {
fieldConfig: InputField[];
groups: CustomGroup[];
@@ -37,13 +120,90 @@ interface Props {
value: FormValue;
}) => void;
fieldData: { [key: string]: FormValue };
+ errors: Errors;
}
+
export const MediaRules = ({
fieldConfig,
onDataChange,
groups,
fieldData,
+ errors,
}: Props) => {
+ const [inputValue, setInputValue] = useState("");
+ const [autoFill, setAutoFill] = useState(
+ !fieldData.fileExtensionsErrorMessage
+ );
+ const [extensionsError, setExtensionsError] = useState(false);
+
+ useEffect(() => {
+ if (autoFill) {
+ onDataChange({
+ inputName: "fileExtensionsErrorMessage",
+ value:
+ "Only files with the following extensions are allowed: " +
+ (fieldData["fileExtensions"] as string[])?.join(", "),
+ });
+ }
+ }, [autoFill, fieldData["fileExtensions"]]);
+
+ const handleInputChange = (
+ event: any,
+ newInputValue: string,
+ ruleName: string
+ ) => {
+ const formattedInput = newInputValue.trim().toLowerCase();
+ if (formattedInput && formattedInput[0] !== ".") {
+ setInputValue(`.${formattedInput}`);
+ } else {
+ setInputValue(formattedInput);
+ }
+ };
+
+ const handleKeyDown = (event: any, ruleName: string) => {
+ if (
+ (event.key === "Enter" || event.key === "," || event.key === " ") &&
+ inputValue
+ ) {
+ event.preventDefault();
+ const newOption = inputValue.toLowerCase().trim();
+ if (
+ newOption &&
+ !(fieldData[ruleName] as string[]).includes(newOption) &&
+ !RestrictedExtensions.includes(newOption)
+ ) {
+ onDataChange({
+ inputName: ruleName,
+ value: [...(fieldData[ruleName] as string[]), newOption],
+ });
+ setInputValue("");
+ }
+ } else if (event.key === "Backspace" && !inputValue) {
+ const newTags = [...(fieldData[ruleName] as string[])];
+ newTags.pop();
+ if (!newTags.length) {
+ setExtensionsError(true);
+ }
+ onDataChange({
+ inputName: ruleName,
+ value: newTags,
+ });
+ }
+ };
+
+ const handleDelete = (option: string, ruleName: string) => {
+ const newTags = (fieldData[ruleName] as string[]).filter(
+ (item) => item.trim() !== option.trim()
+ );
+ if (!newTags.length) {
+ setExtensionsError(true);
+ }
+ onDataChange({
+ inputName: ruleName,
+ value: newTags,
+ });
+ };
+
return (
{fieldConfig?.map((rule: InputField, key: number) => {
- if (rule.name === "defaultValue") return;
+ if (
+ rule.name === "defaultValue" ||
+ rule.name === "fileExtensionsErrorMessage"
+ )
+ return null;
return (
@@ -101,7 +274,9 @@ export const MediaRules = ({
}
/>
- {Boolean(fieldData[rule.name]) && (
+ {Boolean(
+ fieldData[rule.name] && rule.name !== "fileExtensions"
+ ) && (
)}
+
+ {Boolean(fieldData[rule.name]) && rule.name === "fileExtensions" && (
+
+ Extensions *
+ (
+ handleKeyDown(event, rule.name)}
+ />
+ )}
+ onInputChange={(event, newInputValue) =>
+ handleInputChange(event, newInputValue, rule.name)
+ }
+ renderTags={(tagValue, getTagProps) =>
+ tagValue.map((option, index) => (
+ handleDelete(option, rule.name)}
+ clickable={false}
+ sx={{
+ backgroundColor: "common.white",
+ borderColor: "grey.300",
+ borderWidth: 1,
+ borderStyle: "solid",
+ }}
+ />
+ ))
+ }
+ />
+ {errors["fileExtensions"] && extensionsError && (
+
+ {errors["fileExtensions"]}
+
+ )}
+
+ Add:
+ {ExtensionPresets.map((preset) => (
+ {
+ const newTags = fieldData[rule.name] as string[];
+ const tags = new Set(newTags);
+ preset.value.forEach((tag) => tags.add(tag));
+ onDataChange({
+ inputName: rule.name,
+ value: Array.from(tags),
+ });
+ }}
+ sx={{
+ backgroundColor: "common.white",
+ borderColor: "grey.300",
+ borderWidth: 1,
+ borderStyle: "solid",
+ }}
+ />
+ ))}
+
+
+ Custom Error Message *
+
+ {
+ setAutoFill(false);
+ onDataChange({
+ inputName: "fileExtensionsErrorMessage",
+ value: e.target.value,
+ });
+ }}
+ />
+ {errors["fileExtensionsErrorMessage"] && (
+
+ {errors["fileExtensionsErrorMessage"]}
+
+ )}
+
+ )}
);
})}
diff --git a/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx b/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx
index c315404b73..661edcf3ff 100644
--- a/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx
+++ b/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx
@@ -13,6 +13,11 @@ import {
Button,
Grid,
Stack,
+ ListItem,
+ FilledInputProps,
+ InputProps,
+ OutlinedInputProps,
+ InputAdornment,
} from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import { isEmpty } from "lodash";
@@ -27,7 +32,11 @@ import PauseCircleOutlineRoundedIcon from "@mui/icons-material/PauseCircleOutlin
import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
import { FieldIcon } from "../../Field/FieldIcon";
-import { FieldFormInput, DropdownOptions } from "../FieldFormInput";
+import {
+ FieldFormInput,
+ DropdownOptions,
+ AutocompleteConfig,
+} from "../FieldFormInput";
import { useMediaRules } from "../../hooks/useMediaRules";
import { MediaRules } from "../MediaRules";
import {
@@ -64,6 +73,11 @@ import { DefaultValue } from "../DefaultValue";
import { CharacterLimit } from "../CharacterLimit";
import { Rules } from "./Rules";
import { MaxLengths } from "../../../../../../content-editor/src/app/components/Editor/Editor";
+import {
+ Currency,
+ currencies,
+} from "../../../../../../../shell/components/FieldTypeCurrency/currencies";
+import getFlagEmoji from "../../../../../../../utility/getFlagEmoji";
type ActiveTab = "details" | "rules" | "learn";
type Params = {
@@ -223,6 +237,12 @@ export const FieldForm = ({
formFields[field.name] = fieldData.settings[field.name] ?? null;
} else if (field.name === "maxValue") {
formFields[field.name] = fieldData.settings[field.name] ?? null;
+ } else if (field.name === "currency") {
+ formFields[field.name] = fieldData.settings?.currency ?? "USD";
+ } else if (field.name === "fileExtensions") {
+ formFields[field.name] = fieldData.settings[field.name] ?? null;
+ } else if (field.name === "fileExtensionsErrorMessage") {
+ formFields[field.name] = fieldData.settings[field.name] ?? null;
} else {
formFields[field.name] = fieldData[field.name] as FormValue;
}
@@ -249,7 +269,9 @@ export const FieldForm = ({
field.name === "regexRestrictPattern" ||
field.name === "regexRestrictErrorMessage" ||
field.name === "minValue" ||
- field.name === "maxValue"
+ field.name === "maxValue" ||
+ field.name === "fileExtensions" ||
+ field.name === "fileExtensionsErrorMessage"
) {
formFields[field.name] = null;
} else {
@@ -393,6 +415,26 @@ export const FieldForm = ({
}
}
+ if (inputName === "currency" && !formData.currency) {
+ newErrorsObj[inputName] = "Please select a currency";
+ }
+
+ if (
+ inputName === "fileExtensions" &&
+ formData.fileExtensions !== null &&
+ !(formData.fileExtensions as string[])?.length
+ ) {
+ newErrorsObj[inputName] = "This field is required";
+ }
+
+ if (
+ inputName === "fileExtensionsErrorMessage" &&
+ formData.fileExtensions !== null &&
+ formData.fileExtensionsErrorMessage === ""
+ ) {
+ newErrorsObj[inputName] = "This field is required";
+ }
+
if (
inputName in errors &&
![
@@ -405,6 +447,9 @@ export const FieldForm = ({
"regexRestrictErrorMessage",
"minValue",
"maxValue",
+ "currency",
+ "fileExtensions",
+ "fileExtensionsErrorMessage",
].includes(inputName)
) {
const { maxLength, label, validate } = FORM_CONFIG[type].details.find(
@@ -508,7 +553,9 @@ export const FieldForm = ({
errors.regexRestrictPattern ||
errors.regexRestrictErrorMessage ||
errors.minValue ||
- errors.maxValue
+ errors.maxValue ||
+ errors.fileExtensions ||
+ errors.fileExtensionsErrorMessage
) {
setActiveTab("rules");
} else {
@@ -562,6 +609,16 @@ export const FieldForm = ({
...(formData.maxValue !== null && {
maxValue: formData.maxValue as number,
}),
+ ...(formData.currency !== null && {
+ currency: formData.currency as string,
+ }),
+ ...(formData.fileExtensions && {
+ fileExtensions: formData.fileExtensions as string[],
+ }),
+ ...(formData.fileExtensionsErrorMessage && {
+ fileExtensionsErrorMessage:
+ formData.fileExtensionsErrorMessage as string,
+ }),
},
sort: isUpdateField ? fieldData.sort : sort, // Just use the length since sort starts at 0
};
@@ -757,6 +814,9 @@ export const FieldForm = ({
let dropdownOptions: DropdownOptions[];
let disabled = false;
+ let renderOption: any;
+ let filterOptions: any;
+ let autocompleteConfig: AutocompleteConfig = {};
if (fieldConfig.name === "relatedModelZUID") {
dropdownOptions = modelsOptions;
@@ -768,6 +828,74 @@ export const FieldForm = ({
disabled = isFetchingSelectedModelFields;
}
+ if (fieldConfig.name === "currency") {
+ const selectedValue = currencies.find(
+ (currency) => currency.value === formData.currency
+ );
+ dropdownOptions = currencies;
+ renderOption = (props: any, value: Currency) => (
+
+
+
+ {value.value} {value.symbol_native}
+
+ {value.label}
+
+ );
+ filterOptions = (options: Currency[], state: any) => {
+ if (state.inputValue) {
+ return options.filter(
+ (option) =>
+ option.label
+ ?.toLowerCase()
+ .includes(state.inputValue.toLowerCase()) ||
+ option.value
+ ?.toLowerCase()
+ .includes(state.inputValue.toLowerCase())
+ );
+ } else {
+ return options;
+ }
+ };
+ autocompleteConfig.inputProps = {
+ startAdornment: !!selectedValue && (
+
+
+
+ {selectedValue.value} {selectedValue.symbol_native}
+
+
+ ),
+ };
+ autocompleteConfig.maxHeight = 256;
+ }
+
return (
);
})}
diff --git a/src/apps/schema/src/app/components/AddFieldModal/views/Rules.tsx b/src/apps/schema/src/app/components/AddFieldModal/views/Rules.tsx
index 8c7d473707..a92b5caf27 100644
--- a/src/apps/schema/src/app/components/AddFieldModal/views/Rules.tsx
+++ b/src/apps/schema/src/app/components/AddFieldModal/views/Rules.tsx
@@ -48,18 +48,6 @@ export const Rules = ({
return (
- {type === "images" && (
-
- )}
-
+ {type === "images" && (
+
+ )}
+
{(type === "text" || type === "textarea") && (
<>
{
+ const { contentModelZUID } = useParams<{ contentModelZUID: string }>();
+ const { data: modelData } = useGetContentModelQuery(contentModelZUID, {
+ skip: !contentModelZUID,
+ });
+
+ const filteredApiTypes = useMemo(() => {
+ if (modelData?.type === "dataset") {
+ return apiTypes.filter((apiType) => apiType !== "site-generators");
+ }
+
+ return apiTypes;
+ }, [modelData]);
+
return (
{
height: "100%",
}}
>
- {apiTypes.map((apiType) => (
+ {filteredApiTypes?.map((apiType) => (
))}
diff --git a/src/apps/schema/src/app/components/ModelApi/ApiDetails.tsx b/src/apps/schema/src/app/components/ModelApi/ApiDetails.tsx
index 0e14b4327a..89822d8800 100644
--- a/src/apps/schema/src/app/components/ModelApi/ApiDetails.tsx
+++ b/src/apps/schema/src/app/components/ModelApi/ApiDetails.tsx
@@ -8,7 +8,7 @@ import {
Stack,
CircularProgress,
} from "@mui/material";
-import { useHistory, useLocation } from "react-router";
+import { useHistory, useLocation, useParams } from "react-router";
import { SvgIconComponent } from "@mui/icons-material";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import BoltRoundedIcon from "@mui/icons-material/BoltRounded";
@@ -24,8 +24,12 @@ import { useSelector } from "react-redux";
import { AppState } from "../../../../../../shell/store/types";
import { ApiDomainEndpoints } from "./ApiDomainEndpoints";
import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
-import { useGetInstanceSettingsQuery } from "../../../../../../shell/services/instance";
+import {
+ useGetContentModelQuery,
+ useGetInstanceSettingsQuery,
+} from "../../../../../../shell/services/instance";
import { HeadlessSwitcher } from "./HeadlessSwitcher";
+import { useEffect, useMemo } from "react";
const apiTypeIconMap: Record = {
"quick-access": BoltRoundedIcon,
@@ -46,6 +50,10 @@ const apiTypesWithEndpoints = [
export const ApiDetails = () => {
const history = useHistory();
const location = useLocation();
+ const { contentModelZUID } = useParams<{ contentModelZUID: string }>();
+ const { data: modelData } = useGetContentModelQuery(contentModelZUID, {
+ skip: !contentModelZUID,
+ });
const installedApps = useSelector((state: AppState) => state.apps.installed);
const selectedType = location.pathname.split("/").pop() as ApiType;
const { data: instanceSettings, isFetching } = useGetInstanceSettingsQuery(
@@ -56,6 +64,14 @@ export const ApiDetails = () => {
instanceSettings?.find((setting) => setting.key === "mode")?.value !==
"traditional";
+ const filteredApiTypes = useMemo(() => {
+ if (modelData?.type === "dataset") {
+ return apiTypes.filter((apiType) => apiType !== "site-generators");
+ }
+
+ return apiTypes;
+ }, [modelData]);
+
const handleVisualLayoutClick = () => {
const layoutApp = installedApps?.find(
(app: any) => app?.name === "layouts"
@@ -67,6 +83,12 @@ export const ApiDetails = () => {
}
};
+ useEffect(() => {
+ if (selectedType === "site-generators" && modelData?.type === "dataset") {
+ history.replace(`${location.pathname.split("/").slice(0, -1).join("/")}`);
+ }
+ }, [selectedType, modelData]);
+
return (
{
- {apiTypes.map((type) => (
+ {filteredApiTypes?.map((type) => (
= {
rules: [...COMMON_RULES],
},
currency: {
- details: [...COMMON_FIELDS],
+ details: [
+ {
+ name: "currency",
+ type: "autocomplete",
+ label: "Currency",
+ required: true,
+ gridSize: 12,
+ tooltip:
+ "The selected currency code, symbol, and flag will be displayed for this field in the content item and can be accessed through the field settings via the API.",
+ placeholder: "Select a Currency",
+ autoFocus: true,
+ },
+ {
+ ...COMMON_FIELDS[0],
+ autoFocus: false,
+ },
+ ...COMMON_FIELDS.slice(1),
+ ],
rules: [...COMMON_RULES, ...INPUT_RANGE_RULES],
},
date: {
@@ -556,6 +573,20 @@ const FORM_CONFIG: Record = {
required: false,
gridSize: 12,
},
+ {
+ name: "fileExtensions",
+ type: "input",
+ label: "File Extensions",
+ required: false,
+ gridSize: 12,
+ },
+ {
+ name: "fileExtensionsErrorMessage",
+ type: "input",
+ label: "File extensions error message",
+ required: false,
+ gridSize: 12,
+ },
...COMMON_RULES,
],
},
diff --git a/src/apps/seo/src/views/RedirectsManager/RedirectsTable/RedirectCreator/RedirectCreator.js b/src/apps/seo/src/views/RedirectsManager/RedirectsTable/RedirectCreator/RedirectCreator.js
index 2b5e624c94..50b0fc2646 100644
--- a/src/apps/seo/src/views/RedirectsManager/RedirectsTable/RedirectCreator/RedirectCreator.js
+++ b/src/apps/seo/src/views/RedirectsManager/RedirectsTable/RedirectCreator/RedirectCreator.js
@@ -48,7 +48,6 @@ export function RedirectCreator(props) {
)
.then(() => {
setFrom("");
- setTo("");
setContentSearchValue("");
});
};
@@ -123,7 +122,7 @@ export function RedirectCreator(props) {
variant="outlined"
size="small"
fullWidth
- defaultValue={to}
+ value={to}
InputProps={{
startAdornment: (
diff --git a/src/shell/app.config.js b/src/shell/app.config.js
index 2a15352d20..ab721713b8 100644
--- a/src/shell/app.config.js
+++ b/src/shell/app.config.js
@@ -8,6 +8,7 @@ module.exports = {
API_METRICS: "https://metrics.api.zesty.io",
API_INSTANCE: ".api.zesty.io/v1",
API_INSTANCE_PROTOCOL: "https://",
+ API_ANALYTICS: "https://analytics.api.zesty.io",
CLOUD_FUNCTIONS_DOMAIN: "https://us-central1-zesty-prod.cloudfunctions.net",
@@ -56,6 +57,7 @@ module.exports = {
API_METRICS: "https://metrics.api.stage.zesty.io",
API_INSTANCE: ".api.stage.zesty.io/v1",
API_INSTANCE_PROTOCOL: "https://",
+ API_ANALYTICS: "https://analytics.api.stage.zesty.io",
CLOUD_FUNCTIONS_DOMAIN:
"https://us-central1-zesty-stage.cloudfunctions.net",
@@ -80,7 +82,7 @@ module.exports = {
URL_ACCOUNTS: "https://accounts.stage.zesty.io",
URL_MARKETPLACE:
"https://kfg6bckb-dev.webengine.zesty.io/marketplace/apps/",
- URL_APPS: "https://apps.stage.zesty.io",
+ URL_APPS: "https://apps-beta.zesty.io",
COOKIE_NAME: "STAGE_APP_SID",
COOKIE_DOMAIN: ".zesty.io",
@@ -101,6 +103,7 @@ module.exports = {
API_METRICS: "https://metrics.api.dev.zesty.io",
API_INSTANCE: ".api.dev.zesty.io/v1",
API_INSTANCE_PROTOCOL: "https://",
+ API_ANALYTICS: "https://analytics-api-m3rbwjxm5q-uc.a.run.app",
CLOUD_FUNCTIONS_DOMAIN: "https://us-central1-zesty-dev.cloudfunctions.net",
@@ -129,7 +132,7 @@ module.exports = {
URL_ACCOUNTS: "https://zesty.io",
URL_MARKETPLACE:
"https://kfg6bckb-dev.webengine.zesty.io/marketplace/apps/",
- URL_APPS: "https://apps.dev.zesty.io",
+ URL_APPS: "https://apps-beta.zesty.io",
COOKIE_NAME: "DEV_APP_SID",
COOKIE_DOMAIN: ".zesty.io",
@@ -147,6 +150,7 @@ module.exports = {
API_ACCOUNTS: "//accounts.api.zesty.localdev:3022/v1",
API_INSTANCE: ".api.zesty.localdev:3023/v1",
API_INSTANCE_PROTOCOL: "http://",
+ API_ANALYTICS: "https://analytics-api-m3rbwjxm5q-uc.a.run.app",
SERVICE_AUTH: "http://auth.api.zesty.localdev:3011",
SERVICE_EMAIL: "",
diff --git a/src/shell/components/CascadingMenuItem/index.tsx b/src/shell/components/CascadingMenuItem/index.tsx
index b929507ad7..abd0bdce44 100644
--- a/src/shell/components/CascadingMenuItem/index.tsx
+++ b/src/shell/components/CascadingMenuItem/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
import {
MenuItem,
MenuItemProps,
@@ -23,11 +23,37 @@ export const CascadingMenuItem: FC = ({
...props
}) => {
const [anchorEl, setAnchorEl] = useState(null);
+ const [isChildHovered, setIsChildHovered] = useState(false);
+ const [isParentHovered, setIsParentHovered] = useState(false);
+
+ /** Note: This essentially adds a small delay to allow a user to move their mouse
+ * to the child component instead of just immediately closing it outright
+ */
+ useEffect(() => {
+ let timeoutId: NodeJS.Timeout;
+
+ if (!isParentHovered) {
+ timeoutId = setTimeout(() => {
+ if (!isChildHovered) {
+ setAnchorEl(null);
+ }
+ }, 100);
+ }
+
+ return () => {
+ clearTimeout(timeoutId);
+ };
+ }, [isParentHovered, isChildHovered]);
return (
+ ),
+ }}
+ />
+ )}
+ slotProps={{
+ paper: {
+ sx: {
+ maxHeight: 300,
+ },
+ },
+ }}
+ />
+
+
+ )}
-
- Generating Content
-
- }
- sx={{ mt: 3 }}
- onClick={() => request.current?.abort()}
+
- Stop
-
-
+
+ {!!data?.length ? (
+
+ }
+ onClick={() => setData(null)}
+ >
+ Regenerate
+
+
+
+ ) : (
+
+ )}
+
+
);
}
+ // Content item field types
return (
-
-
+ `1px solid ${theme.palette.border}`,
- }}
+ p={2.25}
+ gap={1.5}
+ bgcolor="background.paper"
+ borderRadius="2px 2px 0 0"
>
-
-
-
- {data ? "Your Content is Generated!" : "Generate Content"}
+
+
+ theme.palette.common.white }} />
+
+
+
+
+
+ {!!data?.length ? "Your Content is Generated!" : "Generate Content"}
-
-
-
-
-
+
+ {!!data?.length
+ ? "Our AI assistant can make mistakes. Please check important info."
+ : "Use our AI assistant to write content for you"}
+
+
+
`1px solid ${theme.palette.border}`,
+ overflowY: "auto",
+ borderTop: 1,
+ borderBottom: 1,
+ borderColor: "border",
}}
>
- {data ? (
+ {!!data?.length ? (
- {label}
+ Generated Content
setData(event.target.value)}
+ value={data[0]}
+ onChange={(event) => setData([event.target.value])}
multiline
- rows={8}
+ rows={15}
fullWidth
/>
) : (
- <>
- Topic
-
- Describe what you want the AI to write for you
-
- setTopic(event.target.value)}
- placeholder={`e.g. "Hikes in Washington"`}
- multiline
- rows={2}
- fullWidth
- />
-
-
- {aiType === "text" && (
- <>
- Character Limit
- setLimit(event.target.value)}
- fullWidth
- />
-
+
+
+ Topic *
+ {
+ if (!!event.target.value) {
+ setHasFieldError(false);
+ }
+
+ updateFieldData({ topic: event.target.value });
+ }}
+ placeholder={`e.g. Hikes in Washington`}
+ multiline
+ rows={3}
+ fullWidth
+ error={hasFieldError}
+ helperText={
+ hasFieldError &&
+ "This is field is required. Please enter a value."
+ }
+ />
+
+
+ Describe your Audience
+
+ updateFieldData({ audienceDescription: evt.target.value })
+ }
+ placeholder="e.g. Freelancers, Designers, ....."
+ fullWidth
+ />
+
+
+
+ Tone
+
+
+
+
+
+ option.value === value.value
+ }
+ onChange={(_, value) => updateFieldData({ tone: value.value })}
+ value={TONE_OPTIONS.find(
+ (option) => option.value === fieldData.tone
)}
- {aiType === "paragraph" && (
- <>
- Paragraph Limit
-
-
+ options={TONE_OPTIONS}
+ renderInput={(params: any) => (
+
)}
+ />
+
+
+
+
+
+ {aiType === "text" && "Character"}
+ {aiType === "paragraph" && "Word"} Limit
+
+
+
+
+
+ updateFieldData({ limit: value })}
+ hasError={false}
+ />
-
- Language
+
+
+ Language
+
+
+
+
option.value === value.value
}
- onChange={(event, value) => setLanguage(value)}
- value={language as any}
+ onChange={(event, value) =>
+ updateFieldData({ language: value })
+ }
+ value={fieldData.language as any}
options={languageOptions}
renderInput={(params: any) => (
-
+
+
+
+ ),
+ }}
+ />
)}
+ slotProps={{
+ paper: {
+ sx: {
+ maxHeight: 300,
+ },
+ },
+ }}
/>
-
-
+
+
)}
-
-
)}
-
+
);
};
diff --git a/src/shell/components/withAi/AIGeneratorProvider.tsx b/src/shell/components/withAi/AIGeneratorProvider.tsx
new file mode 100644
index 0000000000..454832ce17
--- /dev/null
+++ b/src/shell/components/withAi/AIGeneratorProvider.tsx
@@ -0,0 +1,68 @@
+import {
+ Dispatch,
+ createContext,
+ useReducer,
+ useState,
+ ReactNode,
+} from "react";
+
+import { ToneOption } from "./AIGenerator";
+
+type ParameterData = {
+ topic?: string;
+ audienceDescription: string;
+ tone: ToneOption;
+ keywords?: string;
+ limit?: number;
+ language: {
+ label: string;
+ value: string;
+ };
+};
+type AIGeneratorContextType = [
+ string | null,
+ Dispatch,
+ Record,
+ Dispatch>
+];
+
+export const AIGeneratorContext = createContext([
+ null,
+ () => {},
+ null,
+ () => {},
+]);
+
+type AIGeneratorProviderProps = {
+ children?: ReactNode;
+};
+export const AIGeneratorProvider = ({ children }: AIGeneratorProviderProps) => {
+ const [lastOpenedItem, setLastOpenedItem] = useState(null);
+ // const [parameterData, setParameterData] = useState>(null);
+ const [parameterData, updateParameterData] = useReducer(
+ (
+ state: Record,
+ action: Record
+ ) => {
+ const newState = {
+ ...state,
+ ...action,
+ };
+ return newState;
+ },
+ {}
+ );
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/shell/components/withAi/index.tsx b/src/shell/components/withAi/index.tsx
index ce93f8a519..2681deee23 100644
--- a/src/shell/components/withAi/index.tsx
+++ b/src/shell/components/withAi/index.tsx
@@ -1,13 +1,24 @@
-import { memo, useMemo } from "react";
-import { Popover, IconButton } from "@mui/material";
+import { useRef, forwardRef, useImperativeHandle } from "react";
+import { Popover, Button, IconButton, alpha } from "@mui/material";
import { Brain, theme } from "@zesty-io/material";
import { ThemeProvider } from "@mui/material/styles";
import { ComponentType, MouseEvent, useState } from "react";
-import { AIGenerator } from "./AIGenerator";
import { useSelector } from "react-redux";
-import { AppState } from "../../store/types";
+import { keyframes } from "@mui/system";
import moment from "moment-timezone";
+
+import { AppState } from "../../store/types";
import instanceZUID from "../../../utility/instanceZUID";
+import { AIGenerator, TONE_OPTIONS } from "./AIGenerator";
+
+const rotateAnimation = keyframes`
+ 0% {
+ background-position: 0% 0%;
+ }
+ 100% {
+ background-position: 0% 100%;
+ }
+`;
// This date is used determine if the AI feature is enabled
const enabledDate = "2023-01-13";
@@ -26,109 +37,188 @@ const paragraphFormat = (text: string) => {
.join("")}
`;
};
-export const withAI = (WrappedComponent: ComponentType) => (props: any) => {
- const instanceCreatedAt = useSelector(
- (state: AppState) => state.instance.createdAt
- );
- const isEnabled =
- moment(instanceCreatedAt).isSameOrAfter(moment(enabledDate)) ||
- enabledZUIDs.includes(instanceZUID);
- const [anchorEl, setAnchorEl] = useState(null);
- const [focused, setFocused] = useState(false);
- const [key, setKey] = useState(0);
-
- const handleClick = (event: React.MouseEvent) => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- const handleApprove = (generatedText: string) => {
- if (
- props.datatype === "article_writer" ||
- props.datatype === "markdown" ||
- props.datatype === "wysiwyg_advanced" ||
- props.datatype === "wysiwyg_basic"
- ) {
- props.onChange(
- `${props.value || ""}${
- props.datatype === "markdown"
- ? generatedText
- : paragraphFormat(generatedText)
- }`,
- props.name,
- props.datatype
+export const withAI = (WrappedComponent: ComponentType) =>
+ forwardRef((props: any, ref) => {
+ const instanceCreatedAt = useSelector(
+ (state: AppState) => state.instance.createdAt
+ );
+ const isEnabled =
+ moment(instanceCreatedAt).isSameOrAfter(moment(enabledDate)) ||
+ enabledZUIDs.includes(instanceZUID);
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [focused, setFocused] = useState(false);
+ const [key, setKey] = useState(0);
+ const aiButtonRef = useRef(null);
+
+ useImperativeHandle(
+ ref,
+ () => {
+ return {
+ triggerAIButton() {
+ if (!anchorEl) {
+ aiButtonRef.current?.scrollIntoView({ behavior: "smooth" });
+
+ // Makes sure that the popup is placed correctly after
+ // the scrollIntoView function is ran
+ setTimeout(() => {
+ aiButtonRef.current?.click();
+ }, 500);
+ }
+ },
+ };
+ },
+ []
+ );
+
+ const handleClick = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = (reason: "close" | "insert") => {
+ if (
+ reason === "close" ||
+ (reason === "insert" && props.ZUID === "metaDescription")
+ ) {
+ // Reset the meta details flow type
+ props.onResetFlowType?.();
+ }
+ setAnchorEl(null);
+ };
+
+ const handleApprove = (generatedText: string) => {
+ if (
+ props.datatype === "article_writer" ||
+ props.datatype === "markdown" ||
+ props.datatype === "wysiwyg_advanced" ||
+ props.datatype === "wysiwyg_basic"
+ ) {
+ props.onChange(
+ `${props.value || ""}${
+ props.datatype === "markdown"
+ ? generatedText
+ : paragraphFormat(generatedText)
+ }`,
+ props.name,
+ props.datatype
+ );
+ // Force re-render after appending generated AI text due to uncontrolled component
+ setKey(key + 1);
+ } else {
+ props.onChange(
+ { target: { value: `${props.value || ""}${generatedText}` } },
+ props.name
+ );
+ }
+ };
+
+ if (isEnabled) {
+ return (
+ <>
+
+ }
+ variant="text"
+ color="inherit"
+ onClick={handleClick}
+ ref={aiButtonRef}
+ sx={{
+ backgroundColor: (theme) =>
+ Boolean(anchorEl)
+ ? alpha(theme.palette.primary.main, 0.08)
+ : "transparent",
+ minWidth: 0,
+ fontWeight: 600,
+ fontSize: 14,
+ lineHeight: "14px",
+ px: 0.5,
+ py: 0.25,
+ color: Boolean(anchorEl) ? "primary.main" : "text.disabled",
+
+ "&:hover": {
+ backgroundColor: (theme) =>
+ alpha(theme.palette.primary.main, 0.08),
+ color: "primary.main",
+ },
+
+ "&:hover .MuiButton-endIcon .MuiSvgIcon-root": {
+ fill: (theme) => theme.palette.primary.main,
+ },
+
+ "& .MuiButton-endIcon": {
+ ml: 0.5,
+ mr: 0,
+ },
+
+ "& .MuiButton-endIcon .MuiSvgIcon-root": {
+ fontSize: 16,
+ fill: (theme) =>
+ Boolean(anchorEl)
+ ? theme.palette.primary.main
+ : theme.palette.action.active,
+ },
+ }}
+ >
+ AI
+
+
+ }
+ onFocus={() => setFocused(true)}
+ onBlur={() => setFocused(false)}
+ />
+
+ {
+ console.log("closing ai generator");
+ handleClose("close");
+ }}
+ slotProps={{
+ paper: {
+ sx: {
+ overflowY: "hidden",
+
+ "&:after": {
+ content: '""',
+ position: "absolute",
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ background:
+ "linear-gradient(0deg, rgba(255,93,10,1) 0%, rgba(18,183,106,1) 25%, rgba(11,165,236,1) 50%, rgba(238,70,188,1) 75%, rgba(105,56,239,1) 100%)",
+ animation: `${rotateAnimation} 1.5s linear alternate infinite`,
+ backgroundSize: "300% 300%",
+ },
+ },
+ },
+ }}
+ >
+ handleClose(reason)}
+ aiType={props.aiType}
+ label={props.label}
+ isAIAssistedFlow={props.isAIAssistedFlow}
+ />
+
+
+
);
- // Force re-render after appending generated AI text due to uncontrolled component
- setKey(key + 1);
} else {
- props.onChange(
- { target: { value: `${props.value}${generatedText}` } },
- props.name
- );
+ return ;
}
- };
-
- if (isEnabled) {
- return (
- <>
-
-
- focused
- ? "primary.main"
- : `${theme.palette.action.active}`,
- },
- "svg:hover": {
- color: "primary.main",
- },
- }}
- onClick={(event: MouseEvent) => {
- const target = event.target as HTMLElement;
- if (target.nodeName === "svg" || target.nodeName === "path") {
- handleClick(event);
- }
- }}
- size="xxsmall"
- >
-
-
-
- }
- onFocus={() => setFocused(true)}
- onBlur={() => setFocused(false)}
- />
-
-
-
-
-
-
- );
- } else {
- return ;
- }
-};
+ });
diff --git a/src/shell/components/withCursorPosition/index.tsx b/src/shell/components/withCursorPosition/index.tsx
index 94084b9b32..4bb01d4276 100644
--- a/src/shell/components/withCursorPosition/index.tsx
+++ b/src/shell/components/withCursorPosition/index.tsx
@@ -13,11 +13,19 @@ export const withCursorPosition = (WrappedComponent: ComponentType) =>
const inputRef = useRef(null);
useEffect(() => {
- inputRef.current?.setSelectionRange(cursorPosition, cursorPosition);
+ /*
+ In Safari, setting the cursor position can cause the input to refocus,
+ leading to a poor user experience if the input isn't already focused.
+ This conditional check ensures the cursor position is only set if the input is focused,
+ preventing unnecessary refocusing on value changes, which is a problem in Safari.
+ */
+ if (document.activeElement === inputRef.current) {
+ inputRef.current?.setSelectionRange(cursorPosition, cursorPosition);
+ }
}, [props.value]);
const handleChange = (e: React.ChangeEvent) => {
- setCursorPosition(e.target.selectionStart);
+ setCursorPosition(e.target.selectionStart || 0);
props.onChange && props.onChange(e);
};
diff --git a/src/shell/hooks/use-permissions.js b/src/shell/hooks/use-permissions.js
index 23c00df880..f2886bcdfc 100644
--- a/src/shell/hooks/use-permissions.js
+++ b/src/shell/hooks/use-permissions.js
@@ -33,9 +33,14 @@ export function usePermission(action, zuid = instanceZUID) {
return true;
}
- const granularRole = role?.granularRoles?.find(
- (r) => r.resourceZUID === zuid
- );
+ /*
+ If the user is not a super user, check granular roles.
+ First check specific resource, if not found check instance level.
+ TODO: Check additional granular roles for parent resources depending on resource type (e.g. content model when checking content item)
+ */
+ const granularRole =
+ role?.granularRoles?.find((r) => r.resourceZUID === zuid) ||
+ role?.granularRoles?.find((r) => r.resourceZUID === instanceZUID);
// Check system
switch (action) {
diff --git a/src/shell/services/analytics.ts b/src/shell/services/analytics.ts
new file mode 100644
index 0000000000..d14de01a81
--- /dev/null
+++ b/src/shell/services/analytics.ts
@@ -0,0 +1,85 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { getResponseData, prepareHeaders } from "./util";
+import instanceZUID from "../../utility/instanceZUID";
+
+//Define service using a base URL and expected endpoints
+export const analyticsApi = createApi({
+ reducerPath: "analyticsApi",
+ baseQuery: fetchBaseQuery({
+ // @ts-ignore
+ baseUrl: `${__CONFIG__.API_ANALYTICS}`,
+ prepareHeaders,
+ }),
+ endpoints: (builder) => ({
+ getAnalyticsPropertyDataByQuery: builder.query({
+ query: (body) => {
+ return {
+ url: `ga4/reports`,
+ method: "POST",
+ body,
+ params: {
+ zuid: instanceZUID,
+ },
+ };
+ },
+ }),
+ getAnalyticsProperties: builder.query({
+ query: () => {
+ return {
+ url: `ga4/properties`,
+ method: "GET",
+ params: {
+ zuid: instanceZUID,
+ },
+ };
+ },
+ }),
+ getAnalyticsPagePathsByFilter: builder.query<
+ string[],
+ {
+ filter: "popular" | "gainer" | "loser";
+ startDate: string;
+ endDate: string;
+ propertyId: string;
+ limit: number;
+ order: "asc" | "desc";
+ }
+ >({
+ query: ({ filter, startDate, endDate, propertyId, limit, order }) => {
+ return {
+ url: `ga4/page-paths`,
+ method: "GET",
+ params: {
+ q: filter,
+ date_start: startDate,
+ date_end: endDate,
+ property_id: propertyId,
+ limit,
+ order,
+ zuid: instanceZUID,
+ },
+ };
+ },
+ }),
+ disconnectGoogleAnalytics: builder.mutation({
+ query: () => {
+ return {
+ url: `ga4/auth/disconnect`,
+ method: "DELETE",
+ params: {
+ zuid: instanceZUID,
+ },
+ };
+ },
+ }),
+ }),
+});
+
+// Export hooks for usage in functional components, which are
+// auto-generated based on the defined endpoints
+export const {
+ useGetAnalyticsPropertiesQuery,
+ useGetAnalyticsPropertyDataByQueryQuery,
+ useGetAnalyticsPagePathsByFilterQuery,
+ useDisconnectGoogleAnalyticsMutation,
+} = analyticsApi;
diff --git a/src/shell/services/cloudFunctions.ts b/src/shell/services/cloudFunctions.ts
index 34a973ba03..315a17b6ac 100644
--- a/src/shell/services/cloudFunctions.ts
+++ b/src/shell/services/cloudFunctions.ts
@@ -23,77 +23,10 @@ export const cloudFunctionsApi = createApi({
};
},
}),
- getAnalyticsPropertyDataByQuery: builder.query({
- query: (body) => {
- return {
- url: `getPropertyDataByQuery`,
- method: "POST",
- body,
- params: {
- zuid: instanceZUID,
- },
- };
- },
- }),
- getAnalyticsProperties: builder.query({
- query: () => {
- return {
- url: `getPropertyList`,
- method: "GET",
- params: {
- zuid: instanceZUID,
- },
- };
- },
- }),
- getAnalyticsPagePathsByFilter: builder.query<
- string[],
- {
- filter: "popular" | "gainer" | "loser";
- startDate: string;
- endDate: string;
- propertyId: string;
- limit: number;
- order: "asc" | "desc";
- }
- >({
- query: ({ filter, startDate, endDate, propertyId, limit, order }) => {
- return {
- url: `getPagePathByFilter`,
- method: "GET",
- params: {
- q: filter,
- date_start: startDate,
- date_end: endDate,
- property_id: propertyId,
- limit,
- order,
- zuid: instanceZUID,
- },
- };
- },
- }),
- disconnectGoogleAnalytics: builder.mutation({
- query: () => {
- return {
- url: `disconnectGoogleAnalytics`,
- method: "DELETE",
- params: {
- zuid: instanceZUID,
- },
- };
- },
- }),
}),
});
// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
-export const {
- useRefreshCacheMutation,
- useAiGenerationMutation,
- useGetAnalyticsPropertiesQuery,
- useGetAnalyticsPropertyDataByQueryQuery,
- useGetAnalyticsPagePathsByFilterQuery,
- useDisconnectGoogleAnalyticsMutation,
-} = cloudFunctionsApi;
+export const { useRefreshCacheMutation, useAiGenerationMutation } =
+ cloudFunctionsApi;
diff --git a/src/shell/services/marketing.ts b/src/shell/services/marketing.ts
index 3a0f367010..a23b553684 100644
--- a/src/shell/services/marketing.ts
+++ b/src/shell/services/marketing.ts
@@ -43,7 +43,7 @@ export const marketingApi = createApi({
video_link,
start_date_and_time,
end_date_and_time,
- created_at: currVal?.version?.history?.data?.pop()?.createdAt,
+ created_at: currVal?.version?.createdAt,
},
];
}
diff --git a/src/shell/services/mediaManager.ts b/src/shell/services/mediaManager.ts
index e2d68fca3d..bfc2506a12 100644
--- a/src/shell/services/mediaManager.ts
+++ b/src/shell/services/mediaManager.ts
@@ -369,6 +369,7 @@ export const mediaManagerApi = createApi({
// auto-generated based on the defined endpoints
export const {
useGetFileQuery,
+ useLazyGetFileQuery,
useGetBinQuery,
useGetBinsQuery,
useGetAllBinFilesQuery,
diff --git a/src/shell/services/types.ts b/src/shell/services/types.ts
index 62c7cd1aac..b8658b0d48 100644
--- a/src/shell/services/types.ts
+++ b/src/shell/services/types.ts
@@ -60,6 +60,8 @@ export interface File {
deleted_at?: string;
deleted_from_storage_at?: string;
thumbnail: string;
+ storage_driver: string;
+ storage_name: string;
}
export type ModelType = "pageset" | "templateset" | "dataset";
@@ -203,12 +205,16 @@ export interface FieldSettings {
regexRestrictErrorMessage?: string;
minValue?: number;
maxValue?: number;
+ currency?: string;
+ fileExtensions?: string[];
+ fileExtensionsErrorMessage?: string;
}
export type ContentModelFieldValue =
| string
| number
| boolean
+ | string[]
| FieldSettings
| FieldSettingsOptions[];
diff --git a/src/shell/services/util.js b/src/shell/services/util.js
index a8e232048c..1b3236a582 100644
--- a/src/shell/services/util.js
+++ b/src/shell/services/util.js
@@ -10,5 +10,13 @@ export const prepareHeaders = (headers) => {
return headers;
};
-export const generateThumbnail = (file) =>
- `${file.url}?width=300&height=300&fit=bounds`;
+export const generateThumbnail = (file) => {
+ if (!!file.updated_at && !isNaN(new Date(file.updated_at).getTime())) {
+ // Prevents browser image cache when a certain file has been already replaced
+ return `${file.url}?width=300&height=300&fit=bounds&versionHash=${new Date(
+ file.updated_at
+ ).getTime()}`;
+ }
+
+ return `${file.url}?width=300&height=300&fit=bounds`;
+};
diff --git a/src/shell/store/content.js b/src/shell/store/content.js
index 1a89b29c52..401358d1bb 100644
--- a/src/shell/store/content.js
+++ b/src/shell/store/content.js
@@ -208,13 +208,13 @@ export function content(state = {}, action) {
}
// create the new item in the store
-export function generateItem(modelZUID) {
+export function generateItem(modelZUID, data = {}) {
return (dispatch, getState) => {
const state = getState();
const itemZUID = `new:${modelZUID}`;
const item = {
dirty: false,
- data: {},
+ data,
web: {
canonicalTagMode: 1,
},
@@ -379,7 +379,11 @@ export function fetchItems(modelZUID, options = {}) {
// };
// }
-export function saveItem(itemZUID, action = "") {
+export function saveItem({
+ itemZUID,
+ action = "",
+ skipContentItemValidation = false,
+}) {
return (dispatch, getState) => {
const state = getState();
const item = cloneDeep(state.content[itemZUID]);
@@ -431,12 +435,15 @@ export function saveItem(itemZUID, action = "") {
item.data[field.name] > field.settings?.maxValue)
);
+ // When skipContentItemValidation is true, this means that only the
+ // SEO meta tags were changed, so we skip validating the content item
if (
- missingRequired?.length ||
- lackingCharLength?.length ||
- regexPatternMismatch?.length ||
- regexRestrictPatternMatch?.length ||
- invalidRange?.length
+ !skipContentItemValidation &&
+ (missingRequired?.length ||
+ lackingCharLength?.length ||
+ regexPatternMismatch?.length ||
+ regexRestrictPatternMatch?.length ||
+ invalidRange?.length)
) {
return Promise.resolve({
err: "VALIDATION_ERROR",
@@ -507,7 +514,7 @@ export function saveItem(itemZUID, action = "") {
};
}
-export function createItem(modelZUID, itemZUID) {
+export function createItem({ modelZUID, itemZUID, skipPathPartValidation }) {
return (dispatch, getState) => {
const state = getState();
@@ -536,9 +543,16 @@ export function createItem(modelZUID, itemZUID) {
item.meta.createdByUserZUID = state.user.user_zuid;
}
- // Check required fields are not empty
+ // Check required fields are not empty, except the og and tc fields since these
+ // are handled by the meta component
const missingRequired = fields.filter((field) => {
- if (!field.deletedAt && field.required) {
+ if (
+ !field.deletedAt &&
+ !["og_title", "og_description", "tc_title", "tc_description"].includes(
+ field.name
+ ) &&
+ field.required
+ ) {
if (!item.data[field.name] && item.data[field.name] != 0) {
return true;
}
@@ -546,6 +560,12 @@ export function createItem(modelZUID, itemZUID) {
return false;
});
+ const hasMissingRequiredSEOFields = skipPathPartValidation
+ ? !item?.web?.metaTitle
+ : !item?.web?.metaTitle ||
+ !item?.web?.metaDescription ||
+ !item?.web?.pathPart;
+
// Check minlength is satisfied
const lackingCharLength = fields?.filter(
(field) =>
@@ -583,7 +603,8 @@ export function createItem(modelZUID, itemZUID) {
lackingCharLength?.length ||
regexPatternMismatch?.length ||
regexRestrictPatternMatch?.length ||
- invalidRange?.length
+ invalidRange?.length ||
+ hasMissingRequiredSEOFields
) {
return Promise.resolve({
err: "VALIDATION_ERROR",
diff --git a/src/shell/store/index.js b/src/shell/store/index.js
index 0ceea53fbe..42dec2b778 100644
--- a/src/shell/store/index.js
+++ b/src/shell/store/index.js
@@ -39,6 +39,7 @@ import { mediaManagerApi } from "../services/mediaManager";
import { metricsApi } from "../services/metrics";
import { cloudFunctionsApi } from "../services/cloudFunctions";
import { marketingApi } from "../services/marketing";
+import { analyticsApi } from "../services/analytics";
// Middleware is applied in order of array
const middlewares = [
@@ -56,6 +57,7 @@ const middlewares = [
metricsApi.middleware,
cloudFunctionsApi.middleware,
marketingApi.middleware,
+ analyticsApi.middleware,
];
/**
@@ -122,6 +124,7 @@ function createReducer(asyncReducers) {
[metricsApi.reducerPath]: metricsApi.reducer,
[cloudFunctionsApi.reducerPath]: cloudFunctionsApi.reducer,
[marketingApi.reducerPath]: marketingApi.reducer,
+ [analyticsApi.reducerPath]: analyticsApi.reducer,
};
return combineReducers({
diff --git a/src/shell/store/media-revamp.ts b/src/shell/store/media-revamp.ts
index f75d83af73..239303430b 100644
--- a/src/shell/store/media-revamp.ts
+++ b/src/shell/store/media-revamp.ts
@@ -27,12 +27,18 @@ export type UploadFile = {
loading?: boolean;
bin_id?: string;
group_id?: string;
+ replacementFile?: boolean;
};
type FileUploadStart = StoreFile & { file: File };
type FileUploadSuccess = StoreFile & FileBase & { id: string };
type FileUploadProgress = { uploadID: string; progress: number };
-type FileUploadStageArg = { file: File; bin_id: string; group_id: string };
+type FileUploadStageArg = {
+ file: File;
+ bin_id: string;
+ group_id: string;
+ replacementFile?: boolean;
+};
type StagedUpload = {
status: "staged";
@@ -146,6 +152,7 @@ const mediaSlice = createSlice({
uploadID: uuidv4(),
url: URL.createObjectURL(file.file),
filename: file.file.name,
+ replacementFile: file.replacementFile,
...file,
};
});
@@ -334,11 +341,11 @@ type FileAugmentation = {
group_id?: string;
};
-async function getSignedUrl(file: any, bin: Bin) {
+async function getSignedUrl(filename: string, storageName: string) {
try {
return request(
//@ts-expect-error
- `${CONFIG.SERVICE_MEDIA_STORAGE}/signed-url/${bin.storage_name}/${file.file.name}`
+ `${CONFIG.SERVICE_MEDIA_STORAGE}/signed-url/${storageName}/${filename}`
).then((res) => res.data.url);
} catch (err) {
console.error(err);
@@ -349,6 +356,152 @@ async function getSignedUrl(file: any, bin: Bin) {
}
}
+export function replaceFile(newFile: UploadFile, originalFile: FileBase) {
+ return async (dispatch: Dispatch, getState: () => AppState) => {
+ const bodyData = new FormData();
+ const req = new XMLHttpRequest();
+ const file = {
+ progress: 0,
+ loading: true,
+ ...newFile,
+ };
+
+ bodyData.append("file", file.file, originalFile.filename);
+ bodyData.append("file_id", originalFile.id);
+
+ req.upload.addEventListener("progress", function (e) {
+ file.progress = (e.loaded / e.total) * 100;
+
+ dispatch(fileUploadProgress(file));
+ });
+
+ function handleError() {
+ dispatch(fileUploadError(file));
+ dispatch(
+ notify({
+ message: "Failed uploading file",
+ kind: "error",
+ })
+ );
+ }
+
+ req.addEventListener("abort", handleError);
+ req.addEventListener("error", handleError);
+ req.addEventListener("load", (_) => {
+ if (req.status === 200) {
+ dispatch(
+ notify({
+ message: `File Replaced: ${originalFile.filename}`,
+ kind: "success",
+ })
+ );
+ const successFile = {
+ ...originalFile,
+ uploadID: file.uploadID,
+ progress: 100,
+ loading: false,
+ url: URL.createObjectURL(file.file),
+ };
+ dispatch(fileUploadSuccess(successFile));
+ } else {
+ dispatch(
+ notify({
+ message: "Failed uploading file",
+ kind: "error",
+ })
+ );
+ dispatch(fileUploadError(file));
+ }
+ });
+
+ // Use signed url flow for large files
+ if (file.file.size > 32000000) {
+ /**
+ * GAE has an inherent 32mb limit at their global nginx load balancer
+ * We use a signed url for large file uploads directly to the assocaited bucket
+ */
+
+ const signedUrl = await getSignedUrl(
+ originalFile?.filename,
+ originalFile?.storage_name
+ );
+ req.open("PUT", signedUrl);
+
+ // The sent content-type needs to match what was provided when generating the signed url
+ // @see https://medium.com/imersotechblog/upload-files-to-google-cloud-storage-gcs-from-the-browser-159810bb11e3
+ req.setRequestHeader("Content-Type", file.file.type);
+
+ req.addEventListener("load", () => {
+ if (req.status === 200) {
+ return request(
+ //@ts-expect-error
+ `${CONFIG.SERVICE_MEDIA_MANAGER}/file/${originalFile?.id}/purge?triggerUpdate=true`,
+ {
+ method: "POST",
+ json: true,
+ }
+ )
+ .then((res) => {
+ if (res.status === 200) {
+ const state: State = getState().mediaRevamp;
+ if (state.uploads.length) {
+ dispatch(
+ fileUploadSuccess({
+ ...res.data,
+ uploadID: file.uploadID,
+ })
+ );
+ } else {
+ dispatch(
+ notify({
+ message: `Successfully uploaded file`,
+ kind: "success",
+ })
+ );
+ }
+ } else {
+ throw res;
+ }
+ })
+ .catch((err) => {
+ dispatch(fileUploadError(file));
+ dispatch(
+ notify({
+ message:
+ "Failed creating file record after signed url upload",
+ kind: "error",
+ })
+ );
+ });
+ } else {
+ dispatch(fileUploadError(file));
+ dispatch(
+ notify({
+ message: "Failed uploading file to signed url",
+ kind: "error",
+ })
+ );
+ }
+ });
+
+ // When sending directly to bucket it needs to be just the file
+ // and not the extra meta data for the zesty services
+ req.send(file.file);
+ } else {
+ req.withCredentials = true;
+ req.open(
+ "PUT",
+ //@ts-expect-error
+ `${CONFIG.SERVICE_MEDIA_STORAGE}/replace/${originalFile?.storage_driver}/${originalFile?.storage_name}`
+ );
+
+ req.send(bodyData);
+ }
+
+ dispatch(fileUploadStart(file));
+ };
+}
+
//type FileMonstrosity = {file: File } & FileAugmentation & FileBase
export function uploadFile(fileArg: UploadFile, bin: Bin) {
return async (dispatch: Dispatch, getState: () => AppState) => {
@@ -417,7 +570,7 @@ export function uploadFile(fileArg: UploadFile, bin: Bin) {
* We use a signed url for large file uploads directly to the assocaited bucket
*/
- const signedUrl = await getSignedUrl(file, bin);
+ const signedUrl = await getSignedUrl(file.file.name, bin.storage_name);
req.open("PUT", signedUrl);
// The sent content-type needs to match what was provided when generating the signed url
@@ -596,16 +749,18 @@ export function dismissFileUploads() {
);
}
if (successfulUploads.length) {
- dispatch(
- notify({
- message: `Successfully uploaded ${successfulUploads.length} files${
- inProgressUploads.length
- ? `...${inProgressUploads.length} files still in progress`
- : ""
- }`,
- kind: "success",
- })
- );
+ if (!successfulUploads[0].replacementFile) {
+ dispatch(
+ notify({
+ message: `Successfully uploaded ${successfulUploads.length} files${
+ inProgressUploads.length
+ ? `...${inProgressUploads.length} files still in progress`
+ : ""
+ }`,
+ kind: "success",
+ })
+ );
+ }
}
if (failedUploads.length) {
dispatch(
@@ -622,6 +777,12 @@ export function dismissFileUploads() {
kind: "warn",
})
);
+ } else {
+ successfulUploads?.forEach((upload) => {
+ dispatch(
+ mediaManagerApi.util.invalidateTags([{ type: "File", id: upload.id }])
+ );
+ });
}
dispatch(fileUploadReset());
};
diff --git a/src/shell/store/notifications.ts b/src/shell/store/notifications.ts
index 271ac555b4..7c6e89514d 100644
--- a/src/shell/store/notifications.ts
+++ b/src/shell/store/notifications.ts
@@ -26,7 +26,7 @@ type NotifyArgs = {
kind: "warn" | "error" | "success";
HTML?: unknown;
heading?: string;
- message?: string;
+ message: string;
};
type Notification = NotifyArgs & {
diff --git a/src/shell/store/products.js b/src/shell/store/products.js
index 6b5b9befd3..c0e5fece04 100644
--- a/src/shell/store/products.js
+++ b/src/shell/store/products.js
@@ -20,6 +20,7 @@ export function fetchProducts() {
// seo: 31-71cfc74-s30
case "31-71cfc74-0wn3r":
case "31-71cfc74-4dm13":
+ case "31-71cfc74-4cc4dm13":
data = [
"launchpad",
"content",
@@ -35,6 +36,7 @@ export function fetchProducts() {
];
break;
case "31-71cfc74-d3v3l0p3r":
+ case "31-71cfc74-d3vc0n":
data = [
"launchpad",
"content",
diff --git a/src/shell/store/types.ts b/src/shell/store/types.ts
index b3c678b2e7..268bf7dc07 100644
--- a/src/shell/store/types.ts
+++ b/src/shell/store/types.ts
@@ -1,6 +1,10 @@
import { UIState } from "./ui";
import { State as MediaRevampState } from "./media-revamp";
-import { InstalledApp, ModelType } from "../services/types";
+import {
+ InstalledApp,
+ ModelType,
+ ContentItemWithDirtyAndPublishing,
+} from "../services/types";
/*
TODO
The UI state is well typed but the rest of the application state is entirely
@@ -32,7 +36,7 @@ export type AppState = {
languages: any;
models: any;
fields: any;
- content: any;
+ content: Record;
contentVersions: any;
mediaRevamp: MediaRevampState;
media: any;
diff --git a/src/utility/getFlagEmoji.ts b/src/utility/getFlagEmoji.ts
new file mode 100644
index 0000000000..dd4b9854ec
--- /dev/null
+++ b/src/utility/getFlagEmoji.ts
@@ -0,0 +1,9 @@
+export default (countryCode: string) => {
+ // Convert country code to flag emoji.
+ // Unicode flag emojis are made up of regional indicator symbols, which are a sequence of two letters.
+ const baseOffset = 0x1f1e6;
+ return (
+ String.fromCodePoint(baseOffset + (countryCode.charCodeAt(0) - 65)) +
+ String.fromCodePoint(baseOffset + (countryCode.charCodeAt(1) - 65))
+ );
+};