This is a squashed reversion of the following, as the experiments we …

…did with native HTML5 drag and drop got to be too painful and risky.

  Revert "Improve comments in IdeaDropTarget"

  This reverts commit de6abdb.

  # This is the commit message #2:

  Revert "Add centered 'linkify' icon on ideas when hovered over in the grouping stage"

  This reverts commit 574158f.

  # This is the commit message #3:

  Revert "Optimization: throttle invocations of handleDragOver's state updates"

  This reverts commit 586f57b.

  # This is the commit message #4:

  Revert "Lint"

  This reverts commit c3ba534.

  # This is the commit message #5:

  Revert "Bugfix: only direct descendants of .dragged-over get overlay styling applied"

  This reverts commit 03dd760.

  # This is the commit message #6:

  Revert "Only enable an 'idea' as a drop target in Grouping Stage"

  This reverts commit 721040b.

  # This is the commit message #7:

  Revert "Leverage IdeaDropTarget in Idea component"

  This reverts commit 18cb296.

  # This is the commit message #8:

  Revert "Extend IdeaDropTarget to allow custom tagName"

  This reverts commit 64f3c35.

  # This is the commit message #9:

  Revert "Disable CategoryColumn drag and drop handlers when not in idea generation"

  This reverts commit 570ac29.

  # This is the commit message #10:

  Revert "Add switch prop for activating/de-activating Idea 'drop' functionality on IdeaDropTarget"

  This reverts commit 75e949f.

  # This is the commit message #11:

  Revert "Refactor: extract drop target handlers and drop styling into component"

  This reverts commit 458f839.

  # This is the commit message #12:

  Revert "Allow any users to drag ideas in 'grouping' stage on desktop"

  This reverts commit 2bf4c6f.

  # This is the commit message #13:

  Revert "Revert "Lint""

  This reverts commit e357038e03eb2414c43837f2c6e6e63288002c62.

test/components/category_column_test.js

@@ -1,96 +1,212 @@
 import React from "react"
-import { spy } from "sinon"
+import { shallow } from "enzyme"
+import { spy, stub } from "sinon"
 
-import { buildIdeaDragEvent } from "../support/js/test_helper"
 import { CategoryColumn, mapStateToProps } from "../../web/static/js/components/category_column"
 import STAGES from "../../web/static/js/configs/stages"
 
 const { IDEA_GENERATION } = STAGES
 
-describe("<CategoryColumn />", () => {
+describe("CategoryColumn", () => {
   let wrapper
-
+  const mockActions = { submitIdeaEditAsync: () => {} }
   const defaultProps = {
-    actions: {},
+    currentUser: { given_name: "daniel" },
+    actions: mockActions,
     votes: [],
     ideas: [],
     stage: IDEA_GENERATION,
     category: "confused",
   }
 
-  context("when an item is dropped upon it", () => {
-    let actions
+  describe("mapStateToProps", () => {
+    context("when every idea passed in the ideas prop matches the column's category", () => {
+      it("returns all of those ideas in the props", () => {
+        const ideas = [{
+          id: 1,
+          body: "tests!",
+          category: "happy",
+        }, {
+          id: 2,
+          body: "winter break!",
+          category: "happy",
+        }]
+
+        const resultingProps = mapStateToProps({ ideas }, { category: "happy" })
+        expect(resultingProps.ideas).to.deep.equal(ideas)
+      })
+    })
+
+    context("when an idea passed in the ideas prop fails to match the column's category", () => {
+      it("excludes that idea from the returned array of ideas passes as props", () => {
+        const ideas = [{
+          id: 1,
+          body: "still no word on tests",
+          category: "confused",
+        }, {
+          id: 2,
+          body: "fassssst build",
+          category: "happy",
+        }]
 
-    const idea = {
-      id: 100,
-      body: "sup",
-      category: "sad",
-      assignee_id: null,
-    }
+        const resultingProps = mapStateToProps({ ideas }, { category: "happy" })
+        expect(resultingProps.ideas).to.deep.equal([{
+          id: 2,
+          body: "fassssst build",
+          category: "happy",
+        }])
+      })
+    })
+  })
 
-    const mockEvent = buildIdeaDragEvent(idea)
+  context("when an item is dragged over it", () => {
+    let mockEvent
 
-    beforeEach(() => {
-      actions = {
-        submitIdeaEditAsync: spy(),
-      }
+    before(() => {
+      mockEvent = { preventDefault: spy(), dataTransfer: { dropEffect: null } }
 
-      wrapper = mountWithConnectedSubcomponents(
+      wrapper = shallow(
         <CategoryColumn
           {...defaultProps}
-          actions={actions}
         />
       )
 
-      wrapper.simulate("dragEnter")
-      wrapper.simulate("drop", mockEvent)
+      wrapper.simulate("dragOver", mockEvent)
     })
 
-    it("pushes an idea edit event, passing the column's 'category'", () => {
-      expect(actions.submitIdeaEditAsync).calledWith({
-        ...idea,
-        category: "confused",
-      })
+    it("prevents the default event behavior", () => {
+      expect(mockEvent.preventDefault).called
     })
-  })
-})
 
-describe("mapStateToProps", () => {
-  context("when every idea passed in the ideas prop matches the column's category", () => {
-    it("returns all of those ideas in the props", () => {
-      const ideas = [{
-        id: 1,
-        body: "tests!",
-        category: "happy",
-      }, {
-        id: 2,
-        body: "winter break!",
-        category: "happy",
-      }]
-
-      const resultingProps = mapStateToProps({ ideas }, { category: "happy" })
-      expect(resultingProps.ideas).to.deep.equal(ideas)
+    it("adds a 'dragged-over' class", () => {
+      expect(wrapper.find(".dragged-over").length).to.equal(1)
     })
-  })
 
-  context("when an idea passed in the ideas prop fails to match the column's category", () => {
-    it("excludes that idea from the returned array of ideas passes as props", () => {
-      const ideas = [{
-        id: 1,
-        body: "still no word on tests",
-        category: "confused",
-      }, {
-        id: 2,
-        body: "fassssst build",
-        category: "happy",
-      }]
-
-      const resultingProps = mapStateToProps({ ideas }, { category: "happy" })
-      expect(resultingProps.ideas).to.deep.equal([{
-        id: 2,
-        body: "fassssst build",
-        category: "happy",
-      }])
+    context("when a dragLeave event follows", () => {
+      const relatedTarget = {}
+
+      context("and the event's target element *does* contain the related (dragged) elemant", () => {
+        beforeEach(() => {
+          mockEvent = {
+            relatedTarget,
+            currentTarget: {
+              contains: stub().withArgs(relatedTarget).returns(true),
+            },
+          }
+
+          wrapper.simulate("dragLeave", mockEvent)
+        })
+
+        it("doesn't remove the dragged-over class", () => {
+          expect(wrapper.find(".dragged-over").length).to.equal(1)
+        })
+      })
+
+      context("and the event's target element *doesn't* contain the related (dragged) elemant", () => {
+        beforeEach(() => {
+          mockEvent = {
+            relatedTarget,
+            currentTarget: {
+              contains: stub().withArgs(relatedTarget).returns(false),
+            },
+          }
+          wrapper.simulate("dragLeave", mockEvent)
+        })
+
+        it("removes the dragged-over class", () => {
+          expect(wrapper.find(".dragged-over").length).to.equal(0)
+        })
+      })
+    })
+
+    context("and an item is dropped on it", () => {
+      let actions
+
+      beforeEach(() => {
+        actions = {
+          submitIdeaEditAsync: spy(),
+        }
+      })
+
+      context("and the data is a serialized idea with snake_cased attributes", () => {
+        const idea = {
+          id: 100,
+          body: "sup",
+          category: "sad",
+          assignee_id: null,
+        }
+
+        const serializedIdea = JSON.stringify(idea)
+
+        const mockEvent = {
+          preventDefault: spy(),
+          dataTransfer: {
+            getData: stub(),
+          },
+        }
+
+        mockEvent.dataTransfer.getData
+          .withArgs("idea").returns(serializedIdea)
+
+        const category = "sad"
+
+        beforeEach(() => {
+          wrapper = mountWithConnectedSubcomponents(
+            <CategoryColumn
+              {...defaultProps}
+              category={category}
+              actions={actions}
+            />
+          )
+
+          wrapper.simulate("dragEnter")
+          wrapper.simulate("drop", mockEvent)
+        })
+
+        it("prevents the default event behavior", () => {
+          expect(mockEvent.preventDefault).called
+        })
+
+        it("pushes an idea_edited event w/ the idea's raw values, camelCased attributes, and its new category", () => {
+          expect(actions.submitIdeaEditAsync).calledWith({
+            id: idea.id,
+            body: idea.body,
+            assignee_id: idea.assignee_id,
+            category,
+          })
+        })
+
+        it("removes the dragged-over class", () => {
+          expect(wrapper.find(".dragged-over").length).to.equal(0)
+        })
+      })
+
+      context("and there is not serialized idea data assciated with the event", () => {
+        const mockEvent = {
+          preventDefault: () => {},
+          dataTransfer: {
+            getData: stub(),
+          },
+        }
+
+        mockEvent.dataTransfer.getData
+          .withArgs("idea").returns("")
+
+        before(() => {
+          wrapper = shallow(
+            <CategoryColumn
+              {...defaultProps}
+              actions={actions}
+            />
+          )
+
+          wrapper.simulate("drop", mockEvent)
+        })
+
+        it("does not invoke the submitIdeaEditAsync action", () => {
+          expect(actions.submitIdeaEditAsync).not.called
+        })
+      })
     })
   })
 })

test/components/conditionally_draggable_idea_content_test.js

@@ -4,7 +4,7 @@ import { spy } from "sinon"
 import ConditionallyDraggableIdeaContent from "../../web/static/js/components/conditionally_draggable_idea_content"
 import STAGES from "../../web/static/js/configs/stages"
 
-const { IDEA_GENERATION, GROUPING } = STAGES
+const { IDEA_GENERATION } = STAGES
 
 describe("<ConditionallyDraggableIdeaContent />", () => {
   let wrapper
@@ -147,22 +147,6 @@ describe("<ConditionallyDraggableIdeaContent />", () => {
         it("sets draggable=false", () => {
           expect(wrapper.html()).to.match(/draggable="false"/)
         })
-
-        context("when the stage is grouping", () => {
-          beforeEach(() => {
-            wrapper = mountWithConnectedSubcomponents(
-              <ConditionallyDraggableIdeaContent
-                {...defaultProps}
-                canUserEditIdeaContents={false}
-                stage={GROUPING}
-              />
-            )
-          })
-
-          it("sets draggable=true", () => {
-            expect(wrapper.html()).to.match(/draggable="true"/)
-          })
-        })
       })
     })