don't close bct when creating a card from the hot edge; deletes placeholder card and reset grid when clicking away after creating from the hot edge - The placeholder is kept around when creating a card from the hot edge since it's used during CollectionCard::API_create

Author: niculistana

__tests__/stores/UiStore.unit.test.js

@@ -62,9 +62,14 @@ describe('UiStore', () => {
         expect(blankContentToolState.col).toBe(4)
       })
 
-      describe('with placeholderCard', () => {
+      describe('with placeholderCard that is placed in a different spot as the bct', () => {
         beforeEach(() => {
-          uiStore.setBctPlaceholderCard({ id: '99' })
+          const { blankContentToolState } = uiStore
+          uiStore.setBctPlaceholderCard({
+            id: '99',
+            col: blankContentToolState.col + 1,
+            row: blankContentToolState.row,
+          })
           uiStore.closeBlankContentTool = jest.fn()
         })
         it('should call closeBlankContentTool to clear the card', () => {

app/javascript/stores/UiStore.js

@@ -882,16 +882,35 @@ export default class UiStore {
   // --- BCT + GridCard properties
   @action
   async openBlankContentTool(options = {}) {
-    const { viewingCollection } = this
-    if (this.blankContentToolState.placeholderCard) {
+    const { viewingCollection, blankContentToolState } = this
+    const { placeholderCard } = blankContentToolState
+    if (
+      placeholderCard &&
+      (placeholderCard.col !== options.col ||
+        placeholderCard.row !== options.row)
+    ) {
+      // if we have a placeholder and we're trying to open from the a different spot, close it
       await this.closeBlankContentTool()
     }
     runInAction(() => {
       this.deselectCards()
       this.closeCardMenu()
       this.clearTextEditingCard()
+      const { placeholderCard, blankType } = this.blankContentToolState
+      const openingBctFromHotEdge =
+        placeholderCard &&
+        blankType === 'hotcell' &&
+        options &&
+        options.blankType !== 'hotcell'
+      const bctState = openingBctFromHotEdge
+        ? {
+            ...this.defaultBCTState,
+            placeholderCard,
+          }
+        : this.defaultBCTState
+
       this.blankContentToolState = {
-        ...this.defaultBCTState,
+        ...bctState,
         order: 0,
         width: 1,
         height: 1,

app/javascript/stores/jsonApi/Collection.js

@@ -991,6 +991,10 @@ class Collection extends SharedRecordMixin(BaseRecord) {
     const res = await apiStore.fetch('collection_cards', cardId, true)
     // make sure it's in our current collection
     const card = res.data
+    if (card.destroyed) {
+      // don't add the card since it was destroyed while being fetched
+      return
+    }
     this.addCard(card)
     return card
   }

app/javascript/stores/jsonApi/CollectionCard.js

@@ -380,6 +380,7 @@ class CollectionCard extends TitleAndCoverEditingMixin(BaseRecord) {
       return
     }
     try {
+      this.destroyed = true
       this.destroy()
       this.parentCollection.removeCard(this)
       return

app/javascript/ui/grid/interactionLayer/FoamcoreInteractionLayer.js

@@ -428,13 +428,9 @@ class FoamcoreInteractionLayer extends React.Component {
     }
 
     const { blankContentToolState } = uiStore
-    const { blankType } = blankContentToolState
+    const { placeholderCard } = blankContentToolState
 
-    // BCT is already open as a hotcell, just modify it. But don't do this
-    // if you're opening a new hotcell.
-    if (blankType === 'hotcell') {
-      await uiStore.closeBlankContentTool()
-    }
+    const creatingContentAfterHotEdge = !hotEdge && !!placeholderCard
 
     uiStore.openBlankContentTool({
       row,
@@ -451,10 +447,12 @@ class FoamcoreInteractionLayer extends React.Component {
     }
 
     this.resetHoveringRowCol()
-    if (!hotEdge && contentType === 'text') {
-      // don't create placeholders when creating a text card
+
+    if (creatingContentAfterHotEdge || contentType === 'text') {
+      // don't create a placeholder since we already have it or if creating a text card
       return
     }
+
     const placeholder = new CollectionCard(
       {
         row,
@@ -463,13 +461,16 @@ class FoamcoreInteractionLayer extends React.Component {
       },
       apiStore
     )
-    await placeholder.API_createBct()
     uiStore.setBctPlaceholderCard(placeholder)
-    // add placeholder to datx store to trigger warning before unload
-    collection.addCard(placeholder)
+    await placeholder.API_createBct()
     if (this.creatingHotEdge) {
       runInAction(() => (this.creatingHotEdge = false))
     }
+    if (!uiStore.blankContentToolIsOpen) {
+      // NOTE: the bct was closed during placeholder.API_createBct
+      placeholder.API_destroy()
+      return
+    }
   }
 
   onCloseHtc = () => {

cypress/integration/collections/CreateFoamcoreBoard.feature

@@ -14,27 +14,19 @@ Feature: Creating a FoamcoreBoard Collection
     And I create a textItem card at 1,1 on the board with "Hello."
     # hotspot in between two cards
     When I click the "FoamcoreHotEdge-0:1"
-    And I wait for "@apiCreateCollectionCardBct" to finish
     And I wait for "@apiGetCollectionCard" to finish
+
     # should move the card out of the way
     Then I should see the text "To my board." in the card at 0,2
-
-    # click any quadrant
+    # closing it should move back
     When I wait for 1 second
+    # click any quadrant
     And I click the "HotCellQuadrant-foamcoreBoard"
-    And I wait for "@apiDeleteCollectionCard" to finish
-    And I wait for "@apiCreateCollectionCardBct" to finish
-    And I wait for "@apiGetCollectionCard" to finish
-    And I wait for 1 second
-    # closing it should move back
     And I click the "BCT-closeButton"
-    And I wait for "@apiDeleteCollectionCard" to finish
     Then I should see the text "To my board." in the card at 0,1
 
     # There should be a hotspot to the left of the 0,0 card
-    When I wait for 1 second
     And I create a text item card "Inserted!" using the first hot edge
-    And I wait for "@apiDeleteCollectionCard" to finish
     # should move both row 0 cards out of the way
     Then I should see the text "Inserted!" in the card at 0,0
     Then I should see the text "Welcome!" in the card at 0,1