fix: duplicate page name error does not disappear on navigating to other pages (#36320)
## Description **Issue:** Duplicate page name error does not disappear on navigating to other pages. This PR addresses issue #35949 by resetting the isPageNameValid state to undefined using useEffect hook when the Page settings loads. Fixes #35949 > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!CAUTION] > If you modify the content in this section, you are likely to disrupt the CI result for your PR. <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved page name validation by resetting its state when the page data updates, ensuring accurate checks based on new information. - **Style** - Minor formatting adjustment for better code readability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
6ca9ef549e
commit
66270b44b1
|
|
@ -71,9 +71,7 @@ function PageSettings(props: { page: Page }) {
|
||||||
|
|
||||||
const [pageName, setPageName] = useState(page.pageName);
|
const [pageName, setPageName] = useState(page.pageName);
|
||||||
const [isPageNameSaving, setIsPageNameSaving] = useState(false);
|
const [isPageNameSaving, setIsPageNameSaving] = useState(false);
|
||||||
const [isPageNameValid, setIsPageNameValid] = useState<string | undefined>(
|
const [pageNameError, setPageNameError] = useState<string | null>(null);
|
||||||
undefined,
|
|
||||||
);
|
|
||||||
|
|
||||||
const [customSlug, setCustomSlug] = useState(page.customSlug);
|
const [customSlug, setCustomSlug] = useState(page.customSlug);
|
||||||
const [isCustomSlugSaving, setIsCustomSlugSaving] = useState(false);
|
const [isCustomSlugSaving, setIsCustomSlugSaving] = useState(false);
|
||||||
|
|
@ -126,8 +124,12 @@ function PageSettings(props: { page: Page }) {
|
||||||
}
|
}
|
||||||
}, [isUpdatingEntity]);
|
}, [isUpdatingEntity]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setPageNameError(null);
|
||||||
|
}, [page]);
|
||||||
|
|
||||||
const savePageName = useCallback(() => {
|
const savePageName = useCallback(() => {
|
||||||
if (!canManagePages || !!isPageNameValid || page.pageName === pageName)
|
if (!canManagePages || pageNameError !== null || page.pageName === pageName)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
const payload: UpdatePageActionPayload = {
|
const payload: UpdatePageActionPayload = {
|
||||||
|
|
@ -137,7 +139,7 @@ function PageSettings(props: { page: Page }) {
|
||||||
|
|
||||||
setIsPageNameSaving(true);
|
setIsPageNameSaving(true);
|
||||||
dispatch(updatePageAction(payload));
|
dispatch(updatePageAction(payload));
|
||||||
}, [page.pageId, page.pageName, pageName, isPageNameValid]);
|
}, [page.pageId, page.pageName, pageName, pageNameError]);
|
||||||
|
|
||||||
const saveCustomSlug = useCallback(() => {
|
const saveCustomSlug = useCallback(() => {
|
||||||
if (!canManagePages || page.customSlug === customSlug) return;
|
if (!canManagePages || page.customSlug === customSlug) return;
|
||||||
|
|
@ -167,15 +169,15 @@ function PageSettings(props: { page: Page }) {
|
||||||
);
|
);
|
||||||
|
|
||||||
const onPageNameChange = (value: string) => {
|
const onPageNameChange = (value: string) => {
|
||||||
let isValid = undefined;
|
let errorMessage = null;
|
||||||
|
|
||||||
if (!value || value.trim().length === 0) {
|
if (!value || value.trim().length === 0) {
|
||||||
isValid = PAGE_SETTINGS_NAME_EMPTY_MESSAGE();
|
errorMessage = PAGE_SETTINGS_NAME_EMPTY_MESSAGE();
|
||||||
} else if (value !== page.pageName && hasActionNameConflict(value)) {
|
} else if (value !== page.pageName && hasActionNameConflict(value)) {
|
||||||
isValid = PAGE_SETTINGS_ACTION_NAME_CONFLICT_ERROR(value);
|
errorMessage = PAGE_SETTINGS_ACTION_NAME_CONFLICT_ERROR(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
setIsPageNameValid(isValid);
|
setPageNameError(errorMessage);
|
||||||
setPageName(toValidPageName(value));
|
setPageName(toValidPageName(value));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -190,13 +192,13 @@ function PageSettings(props: { page: Page }) {
|
||||||
<div
|
<div
|
||||||
className={classNames({
|
className={classNames({
|
||||||
"pt-1 pb-2 relative": true,
|
"pt-1 pb-2 relative": true,
|
||||||
"pb-4": !isPageNameValid,
|
"pb-4": !pageNameError,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{isPageNameSaving && <TextLoaderIcon />}
|
{isPageNameSaving && <TextLoaderIcon />}
|
||||||
<Input
|
<Input
|
||||||
defaultValue={pageName}
|
defaultValue={pageName}
|
||||||
errorMessage={isPageNameValid}
|
errorMessage={pageNameError}
|
||||||
id="t--page-settings-name"
|
id="t--page-settings-name"
|
||||||
isDisabled={!canManagePages}
|
isDisabled={!canManagePages}
|
||||||
label={PAGE_SETTINGS_PAGE_NAME_LABEL()}
|
label={PAGE_SETTINGS_PAGE_NAME_LABEL()}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user