fix issue with same name save

appsmithorg · Oct 30, 2024 · 56726c4 · 56726c4
1 parent 697d132
commit 56726c4
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 35 deletions.
diff --git a/app/client/src/IDE/Components/EditableName/EditableName.tsx b/app/client/src/IDE/Components/EditableName/EditableName.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Spinner, Text, Tooltip } from "@appsmith/ads";
 import { useEventCallback, useEventListener } from "usehooks-ts";
 import { usePrevious } from "@mantine/hooks";
@@ -41,41 +47,49 @@ export const EditableName = ({
     entityName: name,
   });
 
-  const attemptSave = () => {
-    const nameError = validate(editableName);
-
-    if (nameError === null) {
-      exitEditing();
-      onNameSave(editableName);
-    }
-  };
-
-  const exitWithoutSaving = () => {
+  const exitWithoutSaving = useCallback(() => {
     exitEditing();
     setEditableName(name);
     setValidationError(null);
-  };
+  }, [exitEditing, name]);
 
-  const validate = (name: string) => {
-    const nameError = validateName(name);
+  const validate = useCallback(
+    (name: string) => {
+      const nameError = validateName(name);
 
-    if (nameError === null) {
-      setValidationError(null);
-    } else {
-      setValidationError(nameError);
-    }
+      if (nameError === null) {
+        setValidationError(null);
+      } else {
+        setValidationError(nameError);
+      }
 
-    return nameError;
-  };
+      return nameError;
+    },
+    [validateName],
+  );
+
+  const attemptSave = useCallback(() => {
+    const nameError = validate(editableName);
+
+    if (editableName === name) {
+      exitWithoutSaving();
+    } else if (nameError === null) {
+      exitEditing();
+      onNameSave(editableName);
+    }
+  }, [
+    editableName,
+    exitEditing,
+    exitWithoutSaving,
+    name,
+    onNameSave,
+    validate,
+  ]);
 
   const handleKeyUp = useEventCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Enter") {
-        if (editableName === name) {
-          exitWithoutSaving();
-        } else {
-          attemptSave();
-        }
+        attemptSave();
       } else if (e.key === "Escape") {
         exitWithoutSaving();
       }

diff --git a/app/client/src/IDE/Components/EditableName/useNameEditor.ts b/app/client/src/IDE/Components/EditableName/useNameEditor.ts
@@ -6,8 +6,8 @@ import {
 import { shallowEqual, useSelector } from "react-redux";
 import type { AppState } from "ee/reducers";
 import { getUsedActionNames } from "selectors/actionSelectors";
-import { useEventCallback } from "usehooks-ts";
 import { isNameValid, removeSpecialChars } from "utils/helpers";
+import { useCallback } from "react";
 
 interface UseNameEditorProps {
   entityName: string;
@@ -25,15 +25,18 @@ export function useNameEditor(props: UseNameEditorProps) {
     shallowEqual,
   );
 
-  const validateName = useEventCallback((name: string): string | null => {
-    if (!name || name.trim().length === 0) {
-      return createMessage(ACTION_INVALID_NAME_ERROR);
-    } else if (name !== entityName && !isNameValid(name, usedEntityNames)) {
-      return createMessage(nameErrorMessage, name);
-    }
+  const validateName = useCallback(
+    (name: string): string | null => {
+      if (!name || name.trim().length === 0) {
+        return createMessage(ACTION_INVALID_NAME_ERROR);
+      } else if (name !== entityName && !isNameValid(name, usedEntityNames)) {
+        return createMessage(nameErrorMessage, name);
+      }
 
-    return null;
-  });
+      return null;
+    },
+    [entityName, nameErrorMessage, usedEntityNames],
+  );
 
   return {
     validateName,