diff --git a/cypress/e2e/schema/field.spec.js b/cypress/e2e/schema/field.spec.js index cfd1c4a8d..f5b0b8809 100644 --- a/cypress/e2e/schema/field.spec.js +++ b/cypress/e2e/schema/field.spec.js @@ -308,9 +308,6 @@ describe("Schema: Fields", () => { it("Creates a One-to-one relationship field", () => { cy.intercept("**/fields?showDeleted=true").as("getFields"); - const fieldLabel = `One to One ${timestamp}`; - const fieldName = `one_to_one_${timestamp}`; - // Open the add field modal cy.getBySelector(SELECTORS.ADD_FIELD_BTN) .should("exist") @@ -320,9 +317,6 @@ describe("Schema: Fields", () => { // Select one-to-one relationship field cy.getBySelector(SELECTORS.FIELD_SELECT_ONE_TO_ONE).should("exist").click(); - // Fill up fields - cy.getBySelector(SELECTORS.INPUT_LABEL).should("exist").type(fieldLabel); - // Select a related model cy.getBySelector(SELECTORS.AUTOCOMPLETE_MODEL_ZUID) .should("exist") @@ -359,7 +353,9 @@ describe("Schema: Fields", () => { cy.wait("@getFields"); // Check if field exists - cy.getBySelector(`Field_${fieldName}`).should("exist"); + cy.getBySelector( + "Field_cypress_test__group_with_visible_fields_in_list_" + ).should("exist"); }); it("Creates a currency field", () => { diff --git a/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx b/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx index 4fafb2948..023a34f05 100644 --- a/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx +++ b/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx @@ -79,6 +79,8 @@ export const DialogContentItem = ({ item }: DialogContentItemProps) => { backgroundColor: "grey.100", width: 40, height: 40, + minWidth: 40, + minHeight: 40, alignItems: "center", justifyContent: "center", overflow: "hidden", diff --git a/src/apps/content-editor/src/app/views/ItemList/index.tsx b/src/apps/content-editor/src/app/views/ItemList/index.tsx index 55edf5abb..57cbc7724 100644 --- a/src/apps/content-editor/src/app/views/ItemList/index.tsx +++ b/src/apps/content-editor/src/app/views/ItemList/index.tsx @@ -266,7 +266,7 @@ export const ItemList = () => { CONFIG.SERVICE_MEDIA_RESOLVER }/resolve/${ value?.split(",")[0] - }/getimage/?w=${68}&h=${58}&type=fit` + }/getimage/?w=${68}&h=auto&type=fit` : value?.split(",")?.[0]; break; case "internal_link": 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 1357f409c..5ef4f100f 100644 --- a/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx +++ b/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx @@ -165,10 +165,12 @@ export const FieldForm = ({ ?.sort((a, b) => a.label.localeCompare(b.label)); }, [allModels]); const fieldsOptions: DropdownOptions[] = useMemo(() => { - return selectedModelFields?.map((field) => ({ - label: field.label, - value: field.ZUID, - })); + return selectedModelFields + ?.filter((field) => !field.deletedAt) + ?.map((field) => ({ + label: field.label, + value: field.ZUID, + })); }, [selectedModelFields]); const [ deleteContentModelField, @@ -698,30 +700,35 @@ export const FieldForm = ({ inputName: string; value: FormValue; }) => { - const isAutoPopulateName = inputName === "label" && !isUpdateField; + const modelName = + inputName === "relatedModelZUID" && !!value + ? allModels?.find((model) => model.ZUID === value)?.label + : ""; // Form data update setFormData((prevData) => ({ ...prevData, [inputName]: inputName === "name" ? convertLabelValue(value as string) : value, - })); - // Auto populate "name" when "label" field changes - if (isAutoPopulateName) { - setFormData((prevData) => ({ - ...prevData, - name: convertLabelValue(value as string), - })); - } + // Auto populate "name" when "label" field changes + ...(inputName === "label" && + !isUpdateField && { + name: convertLabelValue(value as string), + }), - // Reset relatedFieldZUID when model zuid changes - if (inputName === "relatedModelZUID") { - setFormData((prevData) => ({ - ...prevData, + // Reset relatedFieldZUID when model zuid changes + ...(inputName === "relatedModelZUID" && { relatedFieldZUID: "", - })); - } + }), + + // Auto populate "name" and "label" when relatedModelZUID changes + ...(inputName === "relatedModelZUID" && + !isUpdateField && { + name: convertLabelValue(modelName), + label: modelName, + }), + })); }; const handleAddAnotherField = () => { diff --git a/src/apps/schema/src/app/components/AddFieldModal/views/FieldSelection.tsx b/src/apps/schema/src/app/components/AddFieldModal/views/FieldSelection.tsx index c86619cd0..053a7482e 100644 --- a/src/apps/schema/src/app/components/AddFieldModal/views/FieldSelection.tsx +++ b/src/apps/schema/src/app/components/AddFieldModal/views/FieldSelection.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { DialogContent, DialogTitle, @@ -23,6 +23,12 @@ interface Props { onFieldClick: (fieldType: string, fieldName: string) => void; onModalClose: () => void; } + +const FIELD_CATEGORIES: Record = { + dateandtime: "Date & Time", + options: "Advanced", +}; + export const FieldSelection = ({ onFieldClick, onModalClose }: Props) => { const user: User = useSelector((state: AppState) => state.user); const [fieldTypes, setFieldTypes] = useState(FIELD_COPY_CONFIG); @@ -137,7 +143,7 @@ export const FieldSelection = ({ onFieldClick, onModalClose }: Props) => { mb={1.5} color="text.secondary" > - {fieldKey === "dateandtime" ? "Date & Time" : fieldKey} + {FIELD_CATEGORIES?.[fieldKey] || fieldKey} { useEffect(() => { if (isSuccess) { onClose(); - history.push("/schema"); + const targetPath = `/${history?.location?.pathname.split("/")[1]}`; + history.push(targetPath); } - }, [isSuccess]); + }, [isSuccess, history]); useEffect(() => { // @ts-ignore diff --git a/src/apps/schema/src/app/components/ModelMenu.tsx b/src/apps/schema/src/app/components/ModelMenu.tsx index 6e7a5452d..6c80f213f 100644 --- a/src/apps/schema/src/app/components/ModelMenu.tsx +++ b/src/apps/schema/src/app/components/ModelMenu.tsx @@ -47,7 +47,12 @@ export const ModelMenu: FC = ({ anchorEl, onClose, modelZUID }) => { return ( - + document.getElementById(modelZUID)!} + > { setShowDialogue("rename"); diff --git a/src/shell/components/FieldTypeTinyMCE/index.tsx b/src/shell/components/FieldTypeTinyMCE/index.tsx index c6c88828c..62dbd337f 100644 --- a/src/shell/components/FieldTypeTinyMCE/index.tsx +++ b/src/shell/components/FieldTypeTinyMCE/index.tsx @@ -339,6 +339,13 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ // Customize editor buttons and actions setup: (editor: any) => { + editor.on("init", function () { + editor.addShortcut("meta+p", "", () => { + window.dispatchEvent( + new KeyboardEvent("keydown", { key: "p", metaKey: true }) + ); + }); + }); editor.on("SkinLoaded", () => { setIsSkinLoaded(true); }); diff --git a/src/shell/components/NavTree/components/NavTreeItem.tsx b/src/shell/components/NavTree/components/NavTreeItem.tsx index 8ac926bfe..a186c96aa 100644 --- a/src/shell/components/NavTree/components/NavTreeItem.tsx +++ b/src/shell/components/NavTree/components/NavTreeItem.tsx @@ -1,4 +1,4 @@ -import React, { FC, HTMLAttributes } from "react"; +import React, { FC } from "react"; import { TreeItem } from "@mui/x-tree-view"; import { Stack, Box, Typography, Tooltip, alpha } from "@mui/material"; @@ -15,8 +15,6 @@ interface Props { nodeData?: any; onItemDrop?: (draggedItem: any, targetItem: any) => void; dragAndDrop?: boolean; - hoveredItemId?: string; - setHoveredItemId?: (id: string) => void; } export const NavTreeItem: FC = React.memo( ({ @@ -30,12 +28,9 @@ export const NavTreeItem: FC = React.memo( nodeData, onItemDrop, dragAndDrop = false, - hoveredItemId = "", - setHoveredItemId = () => {}, }) => { const currentDepth = depth + 1; const depthPadding = currentDepth * 1; - const itemId = `${nodeId}-${currentDepth}`; return ( = React.memo( py: 0.5, pl: 1, borderRadius: 0, - "&.is-hovered": { - backgroundColor: (theme) => - alpha(theme.palette.primary.main, 0.07), - }, ".MuiTreeItem-iconContainer": { width: 20, height: 20, @@ -144,10 +135,7 @@ export const NavTreeItem: FC = React.memo( }, }} ContentProps={{ - className: itemId === hoveredItemId ? "is-hovered" : "", - onMouseEnter: (event: any) => { - setHoveredItemId(itemId); - }, + id: nodeId.split("/").pop(), onDragOver: (event: any) => { if (dragAndDrop) { event.preventDefault(); @@ -189,8 +177,6 @@ export const NavTreeItem: FC = React.memo( actions={item.actions ?? []} onItemDrop={onItemDrop} dragAndDrop={dragAndDrop} - hoveredItemId={hoveredItemId} - setHoveredItemId={setHoveredItemId} /> ); })} diff --git a/src/shell/components/NavTree/index.tsx b/src/shell/components/NavTree/index.tsx index 8465d8297..3e8486068 100644 --- a/src/shell/components/NavTree/index.tsx +++ b/src/shell/components/NavTree/index.tsx @@ -45,7 +45,6 @@ export const NavTree: FC> = ({ dragAndDrop = false, }) => { const history = useHistory(); - const [hoveredItemId, setHoveredItemId] = React.useState(""); return ( <> @@ -89,8 +88,6 @@ export const NavTree: FC> = ({ nodeData={item.nodeData} onItemDrop={onItemDrop} dragAndDrop={dragAndDrop} - hoveredItemId={hoveredItemId} - setHoveredItemId={setHoveredItemId} /> ); })}