address PR suggestions

Author: paula-stacho

packages/compass-components/src/components/drawer-portal.tsx

@@ -32,6 +32,12 @@ type DrawerSectionProps = Omit<SectionData, 'content' | 'onClick'> & {
   order?: number;
 };
 
+type DrawerOpenStateContextValue = {
+  current: {
+    isDrawerOpen: boolean;
+  };
+};
+
 type DrawerActionsContextValue = {
   current: {
     openDrawer: (id: string) => void;
@@ -43,6 +49,14 @@ type DrawerActionsContextValue = {
 
 const DrawerStateContext = React.createContext<DrawerSectionProps[]>([]);
 
+const DrawerOpenStateContext = React.createContext<DrawerOpenStateContextValue>(
+  {
+    current: {
+      isDrawerOpen: false,
+    },
+  }
+);
+
 const DrawerActionsContext = React.createContext<DrawerActionsContextValue>({
   current: {
     openDrawer: () => undefined,
@@ -126,8 +140,10 @@ export const DrawerContentProvider: React.FunctionComponent = ({
 const DrawerContextGrabber: React.FunctionComponent = ({ children }) => {
   const drawerToolbarContext = useDrawerToolbarContext();
   const actions = useContext(DrawerActionsContext);
+  const state = useContext(DrawerOpenStateContext);
   actions.current.openDrawer = drawerToolbarContext.openDrawer;
   actions.current.closeDrawer = drawerToolbarContext.closeDrawer;
+  state.current.isDrawerOpen = drawerToolbarContext.isDrawerOpen;
   return <>{children}</>;
 };
 
@@ -323,11 +339,11 @@ export function useDrawerActions() {
 }
 
 export const useDrawerState = () => {
-  const drawerToolbarContext = useDrawerToolbarContext();
+  const drawerToolbarContext = useContext(DrawerOpenStateContext);
   const drawerState = useContext(DrawerStateContext);
   return {
     isOpen:
-      drawerToolbarContext.isDrawerOpen &&
+      drawerToolbarContext.current.isDrawerOpen &&
       // the second check is a workaround, because LG doesn't set isDrawerOpen to false when it's empty
       drawerState.length > 0,
   };

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

@@ -19,7 +19,6 @@ import {
 import {
   createNewRelationship,
   deleteRelationship,
-  nameDraftCollection,
   renameCollection,
   selectCurrentModelFromState,
   selectRelationship,
@@ -44,7 +43,6 @@ type CollectionDrawerContentProps = {
   onDeleteRelationshipClick: (rId: string) => void;
   onNoteChange: (namespace: string, note: string) => void;
   onRenameCollection: (fromNS: string, toNS: string) => void;
-  onCreateCollection: (ns: string, position?: [number, number]) => void;
 };
 
 const titleBtnStyles = css({
@@ -122,25 +120,18 @@ const CollectionDrawerContent: React.FunctionComponent<
   onDeleteRelationshipClick,
   onNoteChange,
   onRenameCollection,
-  onCreateCollection,
 }) => {
   const namespaces = useMemo(() => {
     return collections.map((c) => c.ns);
   }, [collections]);
-  const database = useMemo(() => toNS(namespaces[0]).database, [namespaces]); // TODO(COMPASS-9718) use diagram.database
-
   const { value: collectionName, ...nameInputProps } = useChangeOnBlur(
     toNS(namespace).collection,
     (collectionName) => {
       const trimmedName = collectionName.trim();
       if (!isCollectionNameValid) {
         return;
       }
-      if (isDraftCollection) {
-        onCreateCollection(`${database}.${trimmedName}`);
-        return;
-      }
-      if (trimmedName === toNS(namespace).collection) {
+      if (!isDraftCollection && trimmedName === toNS(namespace).collection) {
         return;
       }
       onRenameCollection(
@@ -290,6 +281,5 @@ export default connect(
     onDeleteRelationshipClick: deleteRelationship,
     onNoteChange: updateCollectionNote,
     onRenameCollection: renameCollection,
-    onCreateCollection: nameDraftCollection,
   }
 )(CollectionDrawerContent);

packages/compass-data-modeling/src/store/diagram.spec.ts

@@ -9,7 +9,7 @@ import {
   undoEdit,
   selectFieldsForCurrentModel,
   addCollection,
-  nameDraftCollection,
+  renameCollection,
 } from './diagram';
 import type {
   Edit,
@@ -260,7 +260,9 @@ describe('Data Modeling store', function () {
 
       // name the new collection
       const newCollectionNs = 'db.myCollection';
-      store.dispatch(nameDraftCollection(newCollectionNs));
+      store.dispatch(
+        renameCollection(firstCollectionDraftName, newCollectionNs)
+      );
 
       // now the collection is added to the edit history
       const diagramAfterCreation = getCurrentDiagramFromState(store.getState());

packages/compass-data-modeling/src/store/diagram.ts

@@ -197,22 +197,23 @@ export const diagramReducer: Reducer<DiagramState> = (
       updatedAt: new Date().toISOString(),
     };
   }
-  if (isAction(action, DiagramActionTypes.DRAFT_COLLECTION_NAMED)) {
-    if (!state.draftCollection) {
-      throw new Error('There is no draft collection to name');
-    }
+  if (
+    isAction(action, DiagramActionTypes.APPLY_EDIT) &&
+    state.draftCollection &&
+    action.edit.type === 'RenameCollection'
+  ) {
     return {
       ...state,
       edits: getEditsAfterDraftCollectionNamed(
         state.edits,
         state.draftCollection,
-        action.namespace
+        action.edit.toNS
       ),
       editErrors: undefined,
       updatedAt: new Date().toISOString(),
       selectedItems: {
         type: 'collection',
-        id: action.namespace,
+        id: action.edit.toNS,
       },
       draftCollection: undefined,
     };
@@ -341,12 +342,11 @@ const updateSelectedItemsFromAppliedEdit = (
   currentSelection: SelectedItems | null,
   edit: Edit
 ): SelectedItems | null => {
-  if (!currentSelection) {
-    return currentSelection;
-  }
-
   switch (edit.type) {
     case 'RenameCollection': {
+      if (!currentSelection) {
+        return currentSelection;
+      }
       if (
         currentSelection?.type === 'collection' &&
         currentSelection.id === edit.fromNS
@@ -358,6 +358,12 @@ const updateSelectedItemsFromAppliedEdit = (
       }
       break;
     }
+    case 'AddCollection': {
+      return {
+        type: 'collection',
+        id: edit.ns,
+      };
+    }
   }
 
   return currentSelection;
@@ -467,15 +473,6 @@ export function renameCollection(
   };
 }
 
-export function nameDraftCollection(
-  namespace: string
-): DataModelingThunkAction<void, DraftCollectionNamedAction> {
-  return (dispatch, getState, { dataModelStorage }) => {
-    dispatch({ type: DiagramActionTypes.DRAFT_COLLECTION_NAMED, namespace });
-    void dataModelStorage.save(getCurrentDiagramFromState(getState()));
-  };
-}
-
 export function applyEdit(
   rawEdit: EditAction
 ): DataModelingThunkAction<boolean, ApplyEditAction | ApplyEditFailedAction> {
@@ -694,7 +691,6 @@ export function addCollection(
       position,
     };
     dispatch(applyEdit(edit));
-    dispatch(selectCollection(ns));
     return true;
   };
 }