Skip to content

[Schema] Only update field active state when save button is clicked #2999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 7, 2024
Merged

[Schema] Only update field active state when save button is clicked #2999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95782bb
task: only update field delete state when save is clicked
finnar-bin Oct 7, 2024
8d60416
task: update e2e test
finnar-bin Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cypress/e2e/schema/field.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -784,7 +784,7 @@ describe("Schema: Fields", () => {
cy.getBySelector(SELECTORS.ADD_FIELD_MODAL_DEACTIVATE_REACTIVATE)
.should("exist")
.click();
cy.getBySelector(SELECTORS.ADD_FIELD_MODAL_CLOSE).should("exist").click();
cy.getBySelector(SELECTORS.SAVE_FIELD_BUTTON).should("exist").click();

cy.wait("@updateField");
cy.wait("@getFields");
Expand Down
55 changes: 34 additions & 21 deletions src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import RuleRoundedIcon from "@mui/icons-material/RuleRounded";
import MenuBookRoundedIcon from "@mui/icons-material/MenuBookRounded";
import SaveRoundedIcon from "@mui/icons-material/SaveRounded";
import PauseCircleOutlineRoundedIcon from "@mui/icons-material/PauseCircleOutlineRounded";
import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
import PlayCircleFilledRoundedIcon from "@mui/icons-material/PlayCircleFilledRounded";

import { FieldIcon } from "../../Field/FieldIcon";
import {
Expand Down Expand Up @@ -112,6 +112,9 @@ export const FieldForm = ({
}: Props) => {
const [activeTab, setActiveTab] = useState<ActiveTab>("details");
const [isSubmitClicked, setIsSubmitClicked] = useState(false);
const [fieldStateOnSaveAction, setFieldStateOnSaveAction] = useState<
"deactivate" | "reactivate"
>(fieldData?.deletedAt ? "reactivate" : "reactivate");
const [isAddAnotherFieldClicked, setIsAddAnotherFieldClicked] =
useState(false);
const { mediaFoldersOptions } = useMediaRules();
Expand Down Expand Up @@ -650,7 +653,25 @@ export const FieldForm = ({
modelZUID: id,
fieldZUID: fieldData.ZUID,
body: updateBody,
});
})
.unwrap()
.then(() => {
// Update the field state after field changes are done
if (fieldStateOnSaveAction === "reactivate" && fieldData?.deletedAt) {
undeleteContentModelField({
modelZUID: id,
fieldZUID: fieldData?.ZUID,
});
} else if (
fieldStateOnSaveAction === "deactivate" &&
!fieldData?.deletedAt
) {
deleteContentModelField({
modelZUID: id,
fieldZUID: fieldData?.ZUID,
});
}
});
} else {
// We want to skip field cache invalidation when creating an in-between field
// We'll let the bulk update rtk query do the invalidation after this call
Expand Down Expand Up @@ -915,33 +936,25 @@ export const FieldForm = ({
<Grid item xs={12}>
<LoadingButton
data-cy="DeactivateReactivateFieldUpdateModal"
variant={fieldData?.deletedAt ? "contained" : "outlined"}
color={fieldData?.deletedAt ? "primary" : "inherit"}
variant="outlined"
color="inherit"
startIcon={
fieldData?.deletedAt ? (
<PlayCircleOutlineRoundedIcon />
fieldStateOnSaveAction === "deactivate" ? (
<PlayCircleFilledRoundedIcon color="action" />
) : (
<PauseCircleOutlineRoundedIcon
color={isDeletingField ? "inherit" : "action"}
/>
<PauseCircleOutlineRoundedIcon color="action" />
)
}
onClick={() => {
if (fieldData?.deletedAt) {
undeleteContentModelField({
modelZUID: id,
fieldZUID: fieldData?.ZUID,
});
} else {
deleteContentModelField({
modelZUID: id,
fieldZUID: fieldData?.ZUID,
});
}
setFieldStateOnSaveAction(
fieldStateOnSaveAction === "deactivate"
? "reactivate"
: "deactivate"
);
}}
loading={isDeletingField || isUndeletingField}
>
{fieldData?.deletedAt
{fieldStateOnSaveAction === "deactivate"
? "Reactivate Field"
: "Deactivate Field"}
</LoadingButton>
Expand Down