fix: rename diagram improved

packages/compass-data-modeling/src/components/data-modeling.tsx

@@ -1,18 +1,20 @@
 import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import DiagramEditor from './diagram-editor';
-import SavedDiagramsList from './saved-diagrams-list';
+import SavedDiagramsList from './list/saved-diagrams-list';
 import NewDiagramFormModal from './new-diagram/new-diagram-modal';
 import type { DataModelingState } from '../store/reducer';
 import { Button, css, DiagramProvider } from '@mongodb-js/compass-components';
 import DiagramEditorSidePanel from './drawer/diagram-editor-side-panel';
 import ReselectCollectionsModal from './reselect-collections-modal';
 import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
 import { useDataModelSavedItems } from '../provider';
+import RenameDiagramModal from './list/rename-modal';
 
 type DataModelingProps = {
   showList: boolean;
   currentDiagramId?: string;
+  renameDiagramId?: string;
 };
 
 const deletedDiagramContainerStyles = css({
@@ -65,6 +67,7 @@ const DataModeling: React.FunctionComponent<DataModelingProps> = ({
       )}
       <NewDiagramFormModal></NewDiagramFormModal>
       <ReselectCollectionsModal></ReselectCollectionsModal>
+      <RenameDiagramModal></RenameDiagramModal>
     </>
   );
 };

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

@@ -22,7 +22,7 @@ import {
 import { useChangeOnBlur } from './use-change-on-blur';
 import { RelationshipsSection } from './relationships-section';
 import { getNamespaceRelationships } from '../../utils/utils';
-import { getIsNewNameValid } from './util';
+import { useNewNameValidation } from '../../utils/use-new-name-validation';
 
 type CollectionDrawerContentProps = {
   namespace: string;
@@ -78,16 +78,12 @@ const CollectionDrawerContent: React.FunctionComponent<
   const {
     isValid: isCollectionNameValid,
     errorMessage: collectionNameEditErrorMessage,
-  } = useMemo(
-    () =>
-      getIsNewNameValid({
-        newName: collectionName,
-        existingNames: namespaces.map((ns) => toNS(ns).collection),
-        currentName: toNS(namespace).collection,
-        entity: 'Collection',
-      }),
-    [collectionName, namespaces, namespace]
-  );
+  } = useNewNameValidation({
+    newName: collectionName,
+    existingNames: namespaces.map((ns) => toNS(ns).collection),
+    currentName: toNS(namespace).collection,
+    entity: 'Collection',
+  });
 
   const noteInputProps = useChangeOnBlur(note, (newNote) => {
     onNoteChange(namespace, newNote);

packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx

@@ -17,11 +17,10 @@ import {
   selectCurrentModelFromState,
   type SelectedItems,
 } from '../../store/diagram';
-import { getDefaultRelationshipName } from '../../utils';
 import FieldDrawerContent from './field-drawer-content';
 import type { FieldPath } from '../../services/data-model-storage';
 import { getFieldFromSchema } from '../../utils/schema-traversal';
-import { isIdField } from '../../utils/utils';
+import { getDefaultRelationshipName, isIdField } from '../../utils/utils';
 import DiagramOverviewDrawerContent from './diagram-overview-drawer-content';
 
 export const DATA_MODELING_DRAWER_ID = 'data-modeling-drawer';

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

@@ -17,9 +17,9 @@ import {
   DMFormFieldContainer,
 } from './drawer-section-components';
 import { useChangeOnBlur } from './use-change-on-blur';
-import { getIsNewNameValid } from './util';
 import { useConnectionInfoForId } from '@mongodb-js/compass-connections/provider';
 import { useDataModelSavedItems } from '../../provider';
+import { useNewNameValidation } from '../../utils/use-new-name-validation';
 
 const infoContainerStyles = css({
   marginTop: spacing[400],
@@ -115,16 +115,12 @@ const DiagramOverviewDrawerContent: React.FunctionComponent<
   const {
     isValid: isDiagramNameValid,
     errorMessage: diagramNameEditErrorMessage,
-  } = useMemo(
-    () =>
-      getIsNewNameValid({
-        newName: diagramName,
-        existingNames: diagramNames,
-        currentName: _diagramName,
-        entity: 'Diagram',
-      }),
-    [diagramName, _diagramName, diagramNames]
-  );
+  } = useNewNameValidation({
+    newName: diagramName,
+    existingNames: diagramNames,
+    currentName: _diagramName,
+    entity: 'Diagram',
+  });
 
   return (
     <>

packages/compass-data-modeling/src/components/drawer/relationships-section.tsx

@@ -13,8 +13,10 @@ import {
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import type { Relationship } from '../../services/data-model-storage';
-import { getDefaultRelationshipName } from '../../utils';
-import { isRelationshipValid } from '../../utils/utils';
+import {
+  getDefaultRelationshipName,
+  isRelationshipValid,
+} from '../../utils/utils';
 
 const titleBtnStyles = css({
   marginLeft: 'auto',

packages/compass-data-modeling/src/components/diagram-card.spec.tsx → packages/compass-data-modeling/src/components/list/diagram-card.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { render, screen } from '@mongodb-js/testing-library-compass';
 import { DiagramCard } from './diagram-card';
-import type { Edit } from '../services/data-model-storage';
+import type { Edit } from '../../services/data-model-storage';
 
 describe('DiagramCard', () => {
   const props = {

packages/compass-data-modeling/src/components/diagram-card.tsx → packages/compass-data-modeling/src/components/list/diagram-card.tsx

@@ -10,7 +10,7 @@ import {
   useDarkMode,
   useFormattedDate,
 } from '@mongodb-js/compass-components';
-import type { MongoDBDataModelDescription } from '../services/data-model-storage';
+import type { MongoDBDataModelDescription } from '../../services/data-model-storage';
 import React from 'react';
 
 // Same as saved-queries-aggregations
@@ -80,7 +80,7 @@ export function DiagramCard({
 }: {
   diagram: MongoDBDataModelDescription;
   onOpen: (diagram: MongoDBDataModelDescription) => void;
-  onRename: (id: string) => void;
+  onRename: (id: string, name: string) => void;
   onDelete: (id: string) => void;
 }) {
   const darkmode = useDarkMode();
@@ -111,7 +111,7 @@ export function DiagramCard({
           onAction={(action) => {
             switch (action) {
               case 'rename':
-                onRename(diagram.id);
+                onRename(diagram.id, diagram.name);
                 break;
               case 'delete':
                 onDelete(diagram.id);

packages/compass-data-modeling/src/components/list/rename-modal.tsx

@@ -0,0 +1,110 @@
+import {
+  Button,
+  css,
+  FormFieldContainer,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+} from '@mongodb-js/compass-components';
+import React, { useCallback, useMemo } from 'react';
+import { useNewNameValidation } from '../../utils/use-new-name-validation';
+import { renameDiagram } from '../../store/diagram';
+import { useDataModelSavedItems } from '../../provider';
+import type { DataModelingState } from '../../store/reducer';
+import { connect } from 'react-redux';
+import { closeRenameDiagramModal } from '../../store/rename-diagram-modal';
+
+const inputStyles = css({
+  height: `84px`,
+  minHeight: `84px`,
+});
+
+type RenameDiagramModalProps = {
+  isModalOpen: boolean;
+  diagramId?: string;
+  diagramName?: string;
+  onRename: (id: string, newName: string) => void;
+  onCloseClick: () => void;
+};
+
+const RenameDiagramModal: React.FC<RenameDiagramModalProps> = ({
+  isModalOpen,
+  diagramId,
+  diagramName: _diagramName,
+  onRename,
+  onCloseClick,
+}) => {
+  const { items: savedDiagrams } = useDataModelSavedItems();
+  const diagramNames = useMemo(
+    () => savedDiagrams.map((diagram) => diagram.name),
+    [savedDiagrams]
+  );
+
+  const [diagramName, setDiagramName] = React.useState<string>(
+    _diagramName ?? ''
+  );
+
+  const handleDiagramNameChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setDiagramName(event.target.value);
+    },
+    []
+  );
+
+  const handleRename = useCallback(() => {
+    if (diagramId) {
+      onRename(diagramId, diagramName);
+    }
+  }, [onRename, diagramId, diagramName]);
+
+  const { isValid, errorMessage } = useNewNameValidation({
+    existingNames: diagramNames,
+    currentName: _diagramName ?? '',
+    newName: diagramName,
+    entity: 'Diagram',
+  });
+
+  return (
+    <Modal
+      open={isModalOpen}
+      setOpen={(open: boolean) => {
+        if (!open) onCloseClick();
+      }}
+    >
+      <ModalHeader title="Rename diagram" />
+      <ModalBody>
+        <FormFieldContainer className={inputStyles}>
+          <TextInput
+            label="Name"
+            onChange={handleDiagramNameChange}
+            state={isValid ? undefined : 'error'}
+            value={diagramName}
+            errorMessage={!isValid && errorMessage}
+          ></TextInput>
+        </FormFieldContainer>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="primary" disabled={!isValid} onClick={handleRename}>
+          Rename
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default connect(
+  (state: DataModelingState) => {
+    return {
+      isModalOpen: state.renameDiagramModal?.isOpen ?? false,
+      diagramId: state.renameDiagramModal?.diagramId,
+      diagramName: state.renameDiagramModal?.diagramName,
+      key: state.renameDiagramModal?.diagramId,
+    };
+  },
+  {
+    onRename: renameDiagram,
+    onCloseClick: closeRenameDiagramModal,
+  }
+)(RenameDiagramModal);