Merge branch 'epic-sections' of github.com:ideo/shape into resizable-sections

Author: niculistana

__js_test_config/mocks/fakeUiStore.js

@@ -151,6 +151,7 @@ const fakeUiStore = {
   clearTempTextCardItems: jest.fn(),
   setTextEditingCard: jest.fn(),
   positionForCoordinates: jest.fn().mockReturnValue({ x:0, y:0, xPos: 0, yPos: 0, width: 1, height: 1 }),
+  coordinatesForPosition: jest.fn().mockReturnValue({ row: 0, col: 0 }),
   dragGridSpot: new Map(),
   droppingFilesCount: 0,
   foamcoreBoundingRectangle: {

__tests__/stores/UiStore.unit.test.js

@@ -14,6 +14,8 @@ let uiStore
 const fakeCollection = {
   id: '123',
   isCollection: true,
+  isBoard: true,
+  num_columns: 4,
   parent_collection_card: {},
   setCollaborators: jest.fn(),
 }
@@ -319,16 +321,7 @@ describe('UiStore', () => {
       maxY: 200,
     }
     beforeEach(() => {
-      uiStore.setSelectedArea(coords)
-      // cardPositions determines where each card is placed on the grid
-      // gets called in GridCard when it sets the ref
-      uiStore.setCardPosition('1', { top: 0, right: 100, bottom: 100, left: 0 })
-      uiStore.setCardPosition('2', {
-        top: 300,
-        right: 100,
-        bottom: 500,
-        left: 0,
-      })
+      fakeCollection.cardIdsBetweenByColRow = jest.fn().mockReturnValue(['1'])
       uiStore.setViewingRecord({
         ...fakeCollection,
         collection_cards: [],
@@ -338,22 +331,23 @@ describe('UiStore', () => {
 
     it('selects cards in within the selectedArea', () => {
       expect(uiStore.selectedCardIds).toEqual([])
-      uiStore.selectCardsWithinSelectedArea()
+      uiStore.setSelectedArea(coords)
+      expect(fakeCollection.cardIdsBetweenByColRow).toHaveBeenCalledWith({
+        minMaxCorners: {
+          maxCol: 0,
+          maxRow: 0,
+          minCol: 0,
+          minRow: 0,
+        },
+      })
       expect(uiStore.selectedCardIds).toEqual(['1'])
     })
 
     it('adds to selection if shifted', () => {
       uiStore.reselectCardIds(['5'])
       uiStore.setSelectedArea(coords, { shifted: true })
-      uiStore.selectCardsWithinSelectedArea()
       expect(uiStore.selectedCardIds).toEqual(['1', '5'])
     })
-
-    it('omits cards that are not in viewingCollection', () => {
-      uiStore.setViewingRecord({ ...fakeCollection, id: '999', cardIds: ['2'] })
-      uiStore.selectCardsWithinSelectedArea()
-      expect(uiStore.selectedCardIds).toEqual([])
-    })
   })
 
   describe('zoom functions', () => {

__tests__/stores/jsonApi/Collection.unit.test.js

@@ -345,23 +345,38 @@ describe('Collection', () => {
 
       it('returns cards in rectangular area from two cards', () => {
         expect(
-          collection.cardIdsBetweenByColRow(cardIds[0], cardIds[1])
+          collection.cardIdsBetweenByColRow({
+            firstCardId: cardIds[0],
+            lastCardId: cardIds[1],
+          })
         ).toEqual([cardIds[0], cardIds[1]])
 
         expect(
-          collection.cardIdsBetweenByColRow(cardIds[2], cardIds[4])
+          collection.cardIdsBetweenByColRow({
+            firstCardId: cardIds[2],
+            lastCardId: cardIds[4],
+          })
         ).toEqual([cardIds[2], cardIds[4]])
 
         expect(
-          collection.cardIdsBetweenByColRow(cardIds[0], cardIds[2])
+          collection.cardIdsBetweenByColRow({
+            firstCardId: cardIds[0],
+            lastCardId: cardIds[2],
+          })
         ).toEqual([cardIds[0], cardIds[1], cardIds[2]])
 
         expect(
-          collection.cardIdsBetweenByColRow(cardIds[0], cardIds[3])
+          collection.cardIdsBetweenByColRow({
+            firstCardId: cardIds[0],
+            lastCardId: cardIds[3],
+          })
         ).toEqual(cardIds)
 
         expect(
-          collection.cardIdsBetweenByColRow(cardIds[3], cardIds[0])
+          collection.cardIdsBetweenByColRow({
+            firstCardId: cardIds[3],
+            lastCardId: cardIds[0],
+          })
         ).toEqual(cardIds)
       })
     })

__tests__/ui/grid/FoamcoreGrid.unit.test.js

@@ -5,7 +5,6 @@ import CardMoveService from '~/utils/CardMoveService'
 import fakeApiStore from '#/mocks/fakeApiStore'
 import fakeUiStore from '#/mocks/fakeUiStore'
 import { fakeCollectionCard, fakeCollection, fakeItemCard } from '#/mocks/data'
-import v from '~/utils/variables'
 
 // because of mdlPlaceholder... without this mock it blows up
 jest.mock('../../../app/javascript/stores/jsonApi/CollectionCard')
@@ -183,25 +182,10 @@ describe('FoamcoreGrid', () => {
   })
 
   describe('coordinatesForPosition', () => {
-    it('should calculate the appropriate coordinates', () => {
-      const { gridW, gutter } = v.defaultGridSettings
-      const zoom = component.relativeZoomLevel
-      let x = (gridW + gutter) / zoom
-      const y = 0
-      let width = 1
-      expect(component.coordinatesForPosition({ x, y, width })).toEqual({
-        col: 1,
-        outsideDraggableArea: false,
-        row: 0,
-      })
-      x = (16 * (gridW + gutter)) / zoom
-      width = 4
-      expect(component.coordinatesForPosition({ x, y, width })).toEqual({
-        // this will get bumped back to 12 (where it fits)
-        col: 12,
-        outsideDraggableArea: true,
-        row: 0,
-      })
+    it('should call uiStore function', () => {
+      const params = { x: 10, y: 20, width: 2 }
+      component.coordinatesForPosition(params)
+      expect(props.uiStore.coordinatesForPosition).toHaveBeenCalledWith(params)
     })
   })
 

__tests__/ui/grid/GridCard.unit.test.js

@@ -39,7 +39,6 @@ describe('GridCard', () => {
     describe('as viewer', () => {
       beforeEach(() => {
         props.record.can_edit = false
-        uiStore.setCardPosition = jest.fn()
         rerender()
       })
 
@@ -78,16 +77,6 @@ describe('GridCard', () => {
         expect(wrapper.find('SelectionCircle').exists()).toBe(true)
         expect(wrapper.find('GridCardHotspot').exists()).toBe(false)
       })
-
-      it('sets the card ref and calls uiStore.setCardPosition', () => {
-        const rect = {}
-        const fakeRef = { getBoundingClientRect: () => rect }
-        component.setCardRef(fakeRef)
-        expect(uiStore.setCardPosition).toHaveBeenCalledWith(
-          props.card.id,
-          rect
-        )
-      })
     })
 
     describe('as editor', () => {
@@ -308,8 +297,8 @@ describe('GridCard', () => {
 
   describe('when selected', () => {
     beforeEach(() => {
-      props.hoveringOver = false
-      uiStore.selectCardId(props.card.id)
+      // simulate getter function
+      props.card.isSelected = true
       rerender()
     })
 
@@ -417,6 +406,7 @@ describe('GridCard', () => {
       beforeEach(() => {
         uiStore.editingCardCover = null
         uiStore.selectedArea.minX = 10
+        uiStore.selectedArea.maxX = 20
         rerender()
       })
 

__tests__/ui/grid/MovableGridCard.unit.test.js

@@ -33,6 +33,7 @@ uiStore.apiStore = {
 
 const rerender = () => {
   wrapper = shallow(<MovableGridCard {...props} />)
+  component = wrapper.instance()
 }
 
 describe('MovableGridCard', () => {
@@ -165,11 +166,6 @@ describe('MovableGridCard', () => {
   })
 
   describe('handleDrag', () => {
-    beforeEach(() => {
-      rerender()
-      component = wrapper.instance()
-    })
-
     it('should initiate uiStore.drag, but not call other drag functions until >10 px movement', () => {
       const pageX = 0
       const pageY = 10

__tests__/ui/pages/shared/EditableName.unit.test.js

@@ -28,6 +28,7 @@ describe('EditableName', () => {
     beforeEach(() => {
       props.fieldName = 'name'
       props.TypographyComponent = Heading2
+      props.onDoneEditing.mockClear()
       wrapper = shallow(<EditableName.wrappedComponent {...props} canEdit />)
       const fakeEvent = {
         stopPropagation: jest.fn(),
@@ -51,15 +52,24 @@ describe('EditableName', () => {
       expect(props.updateNameHandler).toHaveBeenCalledWith('Stellar Collection')
     })
 
-    it('saves and returns to read-only name when enter is pressed in input', () => {
+    it('saves and returns to read-only name when Enter is pressed in input', () => {
       expect(props.onDoneEditing).not.toHaveBeenCalled()
-      wrapper.find('AutosizeInput').simulate('keyPress', {
+      wrapper.find('AutosizeInput').simulate('keyDown', {
         key: 'Enter',
       })
       expect(props.uiStore.editingName).toEqual([])
       expect(props.onDoneEditing).toHaveBeenCalled()
     })
 
+    it('saves and returns to read-only name when Escape is pressed in input', () => {
+      expect(props.onDoneEditing).not.toHaveBeenCalled()
+      wrapper.find('AutosizeInput').simulate('keyDown', {
+        key: 'Escape',
+      })
+      expect(props.uiStore.editingName).toEqual([])
+      expect(props.onDoneEditing).toHaveBeenCalled()
+    })
+
     describe('with placeholder prop and empty name string', () => {
       beforeEach(() => {
         wrapper.setProps({

app/controllers/api/v1/collection_cards_controller.rb

@@ -580,7 +580,7 @@ def check_valid_duplication
 
   def create_notification(card, action)
     # Only notify for archiving of collections (and not link cards)
-    return if card.link?
+    return if card.link? || card.section?
 
     from_id = @from_collection&.id
     to_id = @to_collection&.id
@@ -678,6 +678,7 @@ def collection_card_update_params
       :order,
       :hidden,
       :section_type,
+      :section_name,
       :font_color,
       :font_background,
       :cover_card_id,

app/javascript/stores/UiStore.js

@@ -12,6 +12,7 @@ import v, {
   FOAMCORE_INTERACTION_LAYER,
   ACTIVITY_LOG_PAGE_KEY,
   COLLECTION_CHANNEL_NAME,
+  SECTION_BORDER,
 } from '~/utils/variables'
 import { POPUP_ACTION_TYPES } from '~/enums/actionEnums'
 import { calculatePopoutMenuOffset } from '~/utils/clickUtils'
@@ -401,11 +402,11 @@ export default class UiStore {
 
     const { minX, minY, maxX, maxY } = selectedArea
     const rect = this.foamcoreBoundingRectangle
-    const scrollTop = window.pageYOffset
-    const scrollLeft = window.pageXOffset
+    const scrollTop = window.pageYOffset || 0
+    const scrollLeft = window.pageXOffset || 0
 
-    const top = rect.y + scrollTop
-    const left = rect.x + scrollLeft
+    const top = rect.top + scrollTop
+    const left = rect.left + scrollLeft
 
     const minRawCoords = {
       x: minX - left,
@@ -445,7 +446,6 @@ export default class UiStore {
   @action
   selectCardsWithinSelectedArea(minMaxCorners) {
     const { selectedCardIds, selectedAreaShifted, viewingCollection } = this
-    // const viewingCardIds = viewingCollection.cardIds
     let newSelectedCardIds = []
 
     if (minMaxCorners.minRow === null || minMaxCorners.minCol === null) {
@@ -472,6 +472,11 @@ export default class UiStore {
     this.editingName.push(nameKey)
   }
 
+  @action
+  clearEditingName() {
+    this.editingName = []
+  }
+
   @action
   performPopupAction(message, actionType) {
     switch (actionType) {
@@ -1954,13 +1959,12 @@ export default class UiStore {
     }
 
     if (isSection) {
-      // sections are positioned in (x,y) by half a card, and adjusted to be smaller by a full card amount
-      // TODO: sections should actually overlap the gutter so this should adjust slightly
+      // sections are positioned in (x,y) by half a card, and adjusted to be smaller by a full card amount.
       _.assign(pos, {
         x: (col * (gridW + gutter) + gridW / 2) / relativeZoomLevel,
         y: (row * (gridH + gutter) + gridH / 2) / relativeZoomLevel,
-        w: (width - 1) * (gridW + gutter) - gutter,
-        h: (height - 1) * (gridH + gutter) - gutter,
+        w: (width - 1) * (gridW + gutter) + SECTION_BORDER,
+        h: (height - 1) * (gridH + gutter) + SECTION_BORDER,
       })
     }
 

app/javascript/stores/jsonApi/Collection.js

@@ -189,12 +189,12 @@ class Collection extends SharedRecordMixin(BaseRecord) {
       return this.cardIdsBetweenByColRow({ firstCardId, lastCardId })
     }
     // For all other collection types, find cards by order
-    return this.cardIdsBetweenByOrder({ firstCardId, lastCardId })
+    return this.cardIdsBetweenByOrder(firstCardId, lastCardId)
   }
 
   // Find all cards that are between these two card ids,
   // using the card order
-  cardIdsBetweenByOrder({ firstCardId, lastCardId }) {
+  cardIdsBetweenByOrder(firstCardId, lastCardId) {
     const firstIdx = this.cardIds.findIndex(id => id === firstCardId)
     const lastIdx = this.cardIds.findIndex(id => id === lastCardId)
     const cardIdsBetween = [...this.cardIds]
@@ -309,6 +309,7 @@ class Collection extends SharedRecordMixin(BaseRecord) {
     const matrix = this.cardMatrix
     const cardIds = []
     _.each(rowRange, row => {
+      if (!matrix[row]) return
       _.each(colRange, col => {
         const card = matrix[row][col]
         if (card && !_.includes(cardIds, card.id)) cardIds.push(card.id)
@@ -2070,8 +2071,9 @@ class Collection extends SharedRecordMixin(BaseRecord) {
   }
 
   get styledTheme() {
-    const { fontColor } = this
+    const { fontColor, uiStore } = this
     const theme = {
+      zoomLevel: uiStore.relativeZoomLevel,
       // can probably deprecate this once we fully migrate 4WFC?
       useResponsiveText: !this.isBoard,
     }