Skip to content

Commit

Permalink
Feature/Schema default values (#2681)
Browse files Browse the repository at this point in the history
  • Loading branch information
agalin920 authored Apr 17, 2024
1 parent f34693f commit e2b25d9
Show file tree
Hide file tree
Showing 17 changed files with 987 additions and 46 deletions.
15 changes: 15 additions & 0 deletions cypress/e2e/content/actions.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,21 @@ describe("Actions in content editor", () => {
cy.get("#SchedulePublishClose").click();
});

it("Fills in default values for a new item", () => {
cy.waitOn("/v1/content/models*", () => {
cy.visit("/content/6-a1a600-k0b6f0/new");
});

cy.get("#12-0c3934-8dz720 input").should(
"have.value",
"default single line text field"
);
cy.get("#12-d39a38-85sqdt").contains("zesty-io-logo-horizontal-dark.png");
cy.get("#12-bcd1dcc5f4-2rpm9p").contains(
"5 Tricks to Teach Your Pitbull: Fun & Easy Tips for You & Your Dog!"
);
});

it("Creates a new item", () => {
cy.waitOn("/v1/content/models*", () => {
cy.visit("/content/6-a1a600-k0b6f0/new");
Expand Down
56 changes: 55 additions & 1 deletion cypress/e2e/schema/field.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ const SELECTORS = {
ADD_FIELD_MODAL_DEACTIVATE_REACTIVATE: "DeactivateReactivateFieldUpdateModal",
SHOW_SYSTEM_FIELDS_BTN: "ShowSystemFieldsBtn",
SYSTEM_FIELDS: "SystemFields",
DEFAULT_VALUE_CHECKBOX: "DefaultValueCheckbox",
DEFAULT_VALUE_INPUT: "DefaultValueInput",
};

/**
Expand Down Expand Up @@ -97,6 +99,17 @@ describe("Schema: Fields", () => {
.should("exist")
.should("have.value", fieldName);

// Navigate to rules tab and add default value
cy.getBySelector(SELECTORS.RULES_TAB_BTN).click();
// click on the default value checkbox
cy.getBySelector(SELECTORS.DEFAULT_VALUE_CHECKBOX).click();
// enter a default value
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT).type("default value");
// verify that the default value is set
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT)
.find("input")
.should("have.value", "default value");

// Click done
cy.getBySelector(SELECTORS.SAVE_FIELD_BUTTON).should("exist").click();
cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("not.exist");
Expand Down Expand Up @@ -141,6 +154,19 @@ describe("Schema: Fields", () => {
.should("exist")
.click();

// Navigate to rules tab and add default value
cy.getBySelector(SELECTORS.RULES_TAB_BTN).click();
// click on the default value checkbox
cy.getBySelector(SELECTORS.DEFAULT_VALUE_CHECKBOX).click();
// Open select menu
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT).click();
// Select the option
cy.get("[role=listbox] [role=option]").last().click();
// verify that the default value is set
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT)
.find("input")
.should("have.value", "test");

// Click done
cy.getBySelector(SELECTORS.SAVE_FIELD_BUTTON).should("exist").click();
cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("not.exist");
Expand Down Expand Up @@ -210,6 +236,21 @@ describe("Schema: Fields", () => {
"not.exist"
);

// Navigate to rules tab and add default value
cy.getBySelector(SELECTORS.RULES_TAB_BTN).click();
// click on the default value checkbox
cy.getBySelector(SELECTORS.DEFAULT_VALUE_CHECKBOX).click();
// enter a default value
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT)
.find("button")
.first()
.click();
// verify that the default value is set by aria-pressed attribute
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT)
.find("button")
.first()
.should("have.attr", "aria-pressed", "true");

// Click done
cy.getBySelector(SELECTORS.SAVE_FIELD_BUTTON).should("exist").click();
cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("not.exist");
Expand Down Expand Up @@ -250,6 +291,20 @@ describe("Schema: Fields", () => {
.type("title");
cy.get("[role=listbox] [role=option]").first().click();

// Navigate to rules tab and add default value
cy.getBySelector(SELECTORS.RULES_TAB_BTN).click();
// click on the default value checkbox
cy.getBySelector(SELECTORS.DEFAULT_VALUE_CHECKBOX).click();
// enter a default value
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT).click();
// Select the option
cy.get("[role=listbox] [role=option]").first().click();
// verify that the default value is set
cy.getBySelector(SELECTORS.DEFAULT_VALUE_INPUT)
.find("input")
.should("have.value", "- None -");
cy.getBySelector(SELECTORS.DEFAULT_VALUE_CHECKBOX).click();

// Click done
cy.getBySelector(SELECTORS.SAVE_FIELD_BUTTON).should("exist").click();
cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("not.exist");
Expand Down Expand Up @@ -376,7 +431,6 @@ describe("Schema: Fields", () => {

// Click Rules tab
cy.getBySelector(SELECTORS.RULES_TAB_BTN).should("exist").click();
cy.getBySelector(SELECTORS.RULES_TAB).should("exist");

// Close the modal
cy.getBySelector(SELECTORS.ADD_FIELD_MODAL_CLOSE).should("exist").click();
Expand Down
22 changes: 20 additions & 2 deletions src/apps/content-editor/src/app/components/Editor/Editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ export const MaxLengths = {
textarea: 16000,
wysiwyg_basic: 0,
wysiwyg_advanced: 0,
fontawesome: 150,
markdown: 0,
article_writer: 0,
};

export default memo(function Editor({
Expand All @@ -43,6 +46,7 @@ export default memo(function Editor({
const dispatch = useDispatch();
const isNewItem = itemZUID.slice(0, 3) === "new";
const { data: fields } = useGetContentModelFieldsQuery(modelZUID);
const [isLoaded, setIsLoaded] = useState(false);

const activeFields = useMemo(() => {
if (fields?.length) {
Expand Down Expand Up @@ -181,7 +185,6 @@ export default memo(function Editor({
[fieldErrors]
);

// This function will be built upon when default values are added to the schema builder
const applyDefaultValuesToItemData = useCallback(() => {
activeFields.forEach((field) => {
if (field.datatype === "sort") {
Expand All @@ -192,14 +195,29 @@ export default memo(function Editor({
value: 0,
});
}

if (field?.settings?.defaultValue !== null) {
dispatch({
type: "SET_ITEM_DATA",
itemZUID: itemZUID,
key: field.name,
value: field.settings.defaultValue,
});
}

setIsLoaded(true);
});
}, [activeFields, itemZUID]);

useEffect(() => {
if (isNewItem) {
applyDefaultValuesToItemData();
} else {
setIsLoaded(true);
}
}, [isNewItem]);
}, [isNewItem, setIsLoaded, applyDefaultValuesToItemData]);

if (!isLoaded) return null;

return (
<ThemeProvider theme={theme}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ import { FieldTypeMedia } from "../../FieldTypeMedia";

const AIFieldShell = withAI(FieldShell);

const sortHTML = (a: any, b: any) => {
export const sortHTML = (a: any, b: any) => {
const nameA = String(a.html) && String(a.html).toUpperCase(); // ignore upper and lowercase
const nameB = String(b.html) && String(b.html).toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
Expand All @@ -84,7 +84,7 @@ const sortHTML = (a: any, b: any) => {
return 0;
};

const resolveRelatedOptions = (
export const resolveRelatedOptions = (
fields: Record<string, ContentModelField>,
items: any,
fieldZUID: string,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export type EditorType =
| "wysiwyg_basic"
| "article_writer"
| "html";
const EditorTypes: Record<EditorType, string> = {
export const EditorTypes: Record<EditorType, string> = {
markdown: "Markdown",
wysiwyg_basic: "WYSIWYG",
article_writer: "Inline",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export const ComingSoon = () => {
height="100%"
justifyContent="center"
alignItems="center"
minHeight={428}
>
<Box
display="flex"
Expand Down
98 changes: 98 additions & 0 deletions src/apps/schema/src/app/components/AddFieldModal/DefaultValue.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import {
Box,
FormControl,
FormHelperText,
Checkbox,
Typography,
} from "@mui/material";
import { FormValue } from "./views/FieldForm";
import { MaxLengths } from "../../../../../content-editor/src/app/components/Editor/Editor";
import { FieldSettingsOptions } from "../../../../../../shell/services/types";
import { DefaultValueInput } from "./DefaultValueInput";

type DefaultValueProps = {
type: string;
value: FormValue;
onChange: (value: FormValue) => void;
isDefaultValueEnabled: boolean;
setIsDefaultValueEnabled: (value: boolean) => void;
error: string;
mediaRules: {
limit: FormValue;
group_id: FormValue;
};
relationshipFields: {
relatedModelZUID: string;
relatedFieldZUID: string;
};
options: FieldSettingsOptions[];
};

export const DefaultValue = ({
error,
type,
value,
onChange,
isDefaultValueEnabled,
setIsDefaultValueEnabled,
mediaRules,
relationshipFields,
options,
}: DefaultValueProps) => {
return (
<Box display="flex" gap={1}>
<Checkbox
data-cy="DefaultValueCheckbox"
checked={isDefaultValueEnabled}
size="small"
sx={{ width: "24px", height: "24px" }}
onChange={(event) => {
setIsDefaultValueEnabled(event.target.checked);
if (!event.target.checked) {
onChange(null);
setIsDefaultValueEnabled(false);
}
}}
/>
<Box flex={1}>
<Typography variant="body2" fontWeight="600">
Default Value
</Typography>
<Typography
variant="body3"
color="text.secondary"
fontWeight="600"
sx={{ mb: 1 }}
>
Set a predefined value for this field
</Typography>
{isDefaultValueEnabled && (
<FormControl error={!!error} fullWidth>
<DefaultValueInput
type={type}
value={value}
onChange={onChange}
error={!!error}
mediaRules={mediaRules}
relationshipFields={relationshipFields}
options={options}
/>
<FormHelperText>
<Box display="flex" justifyContent="space-between">
<Box>{error}</Box>
{MaxLengths[type as keyof typeof MaxLengths] !== undefined && (
<Box>
{typeof value === "string" ? value.length : 0}
{MaxLengths[type as keyof typeof MaxLengths] !== 0
? `/${MaxLengths[type as keyof typeof MaxLengths]}`
: null}
</Box>
)}
</Box>
</FormHelperText>
</FormControl>
)}
</Box>
</Box>
);
};
Loading

0 comments on commit e2b25d9

Please sign in to comment.