From 66270b44b12c171d29b71251359f2312a9c4801e Mon Sep 17 00:00:00 2001
From: Abhishek Pandey <66054987+a6hishekpandey@users.noreply.github.com>
Date: Thu, 19 Sep 2024 21:50:25 +0530
Subject: [PATCH] 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=""

### :mag: 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 -->
---
 .../AppSettings/PageSettings.tsx              | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/client/src/pages/Editor/AppSettingsPane/AppSettings/PageSettings.tsx b/app/client/src/pages/Editor/AppSettingsPane/AppSettings/PageSettings.tsx
index 5354d3d9fa..0f55e54b68 100644
--- a/app/client/src/pages/Editor/AppSettingsPane/AppSettings/PageSettings.tsx
+++ b/app/client/src/pages/Editor/AppSettingsPane/AppSettings/PageSettings.tsx
@@ -71,9 +71,7 @@ function PageSettings(props: { page: Page }) {
 
   const [pageName, setPageName] = useState(page.pageName);
   const [isPageNameSaving, setIsPageNameSaving] = useState(false);
-  const [isPageNameValid, setIsPageNameValid] = useState<string | undefined>(
-    undefined,
-  );
+  const [pageNameError, setPageNameError] = useState<string | null>(null);
 
   const [customSlug, setCustomSlug] = useState(page.customSlug);
   const [isCustomSlugSaving, setIsCustomSlugSaving] = useState(false);
@@ -126,8 +124,12 @@ function PageSettings(props: { page: Page }) {
     }
   }, [isUpdatingEntity]);
 
+  useEffect(() => {
+    setPageNameError(null);
+  }, [page]);
+
   const savePageName = useCallback(() => {
-    if (!canManagePages || !!isPageNameValid || page.pageName === pageName)
+    if (!canManagePages || pageNameError !== null || page.pageName === pageName)
       return;
 
     const payload: UpdatePageActionPayload = {
@@ -137,7 +139,7 @@ function PageSettings(props: { page: Page }) {
 
     setIsPageNameSaving(true);
     dispatch(updatePageAction(payload));
-  }, [page.pageId, page.pageName, pageName, isPageNameValid]);
+  }, [page.pageId, page.pageName, pageName, pageNameError]);
 
   const saveCustomSlug = useCallback(() => {
     if (!canManagePages || page.customSlug === customSlug) return;
@@ -167,15 +169,15 @@ function PageSettings(props: { page: Page }) {
   );
 
   const onPageNameChange = (value: string) => {
-    let isValid = undefined;
+    let errorMessage = null;
 
     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)) {
-      isValid = PAGE_SETTINGS_ACTION_NAME_CONFLICT_ERROR(value);
+      errorMessage = PAGE_SETTINGS_ACTION_NAME_CONFLICT_ERROR(value);
     }
 
-    setIsPageNameValid(isValid);
+    setPageNameError(errorMessage);
     setPageName(toValidPageName(value));
   };
 
@@ -190,13 +192,13 @@ function PageSettings(props: { page: Page }) {
       <div
         className={classNames({
           "pt-1 pb-2 relative": true,
-          "pb-4": !isPageNameValid,
+          "pb-4": !pageNameError,
         })}
       >
         {isPageNameSaving && <TextLoaderIcon />}
         <Input
           defaultValue={pageName}
-          errorMessage={isPageNameValid}
+          errorMessage={pageNameError}
           id="t--page-settings-name"
           isDisabled={!canManagePages}
           label={PAGE_SETTINGS_PAGE_NAME_LABEL()}