Skip to content

Commit

Permalink
[Schema] Only update field active state when save button is clicked (#…
Browse files Browse the repository at this point in the history
…2999)

Resolves #2966 

### Preview
[Screencast from 10-07-2024 11:46:10
AM.webm](https://github.com/user-attachments/assets/f90abace-fa99-4ed0-8c00-8eccb26e72f2)
  • Loading branch information
finnar-bin authored Oct 7, 2024
1 parent dcf4278 commit 9f31ad5
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 22 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/schema/field.spec.js
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
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

0 comments on commit 9f31ad5

Please sign in to comment.