chore(data-modeling): use change on blur hook for collection name for consistency (#7190)

Author: gribnoysup

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import toNS from 'mongodb-ns';
 import type { Relationship } from '../../services/data-model-storage';
@@ -116,8 +116,21 @@ const CollectionDrawerContent: React.FunctionComponent<
   onNoteChange,
   onRenameCollection,
 }) => {
-  const [collectionName, setCollectionName] = useState(
-    () => toNS(namespace).collection
+  const { value: collectionName, ...nameInputProps } = useChangeOnBlur(
+    toNS(namespace).collection,
+    (collectionName) => {
+      const trimmedName = collectionName.trim();
+      if (trimmedName === toNS(namespace).collection) {
+        return;
+      }
+      if (!isCollectionNameValid) {
+        return;
+      }
+      onRenameCollection(
+        namespace,
+        `${toNS(namespace).database}.${trimmedName}`
+      );
+    }
   );
 
   const {
@@ -128,23 +141,6 @@ const CollectionDrawerContent: React.FunctionComponent<
     [collectionName, namespaces, namespace]
   );
 
-  useLayoutEffect(() => {
-    setCollectionName(toNS(namespace).collection);
-  }, [namespace]);
-
-  const onBlurCollectionName = useCallback(() => {
-    const trimmedName = collectionName.trim();
-    if (trimmedName === toNS(namespace).collection) {
-      return;
-    }
-
-    if (!isCollectionNameValid) {
-      return;
-    }
-
-    onRenameCollection(namespace, `${toNS(namespace).database}.${trimmedName}`);
-  }, [collectionName, namespace, onRenameCollection, isCollectionNameValid]);
-
   const noteInputProps = useChangeOnBlur(note, (newNote) => {
     onNoteChange(namespace, newNote);
   });
@@ -157,12 +153,9 @@ const CollectionDrawerContent: React.FunctionComponent<
             label="Name"
             sizeVariant="small"
             value={collectionName}
+            {...nameInputProps}
             state={isCollectionNameValid ? undefined : 'error'}
             errorMessage={collectionNameEditErrorMessage}
-            onChange={(e) => {
-              setCollectionName(e.target.value);
-            }}
-            onBlur={onBlurCollectionName}
           />
         </DMFormFieldContainer>
       </DMDrawerSection>