WIP DND POC

canonical · Jun 19, 2019 · 418ceb5 · 418ceb5
1 parent 2f69349
commit 418ceb5
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 43 deletions.
diff --git a/static/js/publisher/release/components/releasesTableRow.js b/static/js/publisher/release/components/releasesTableRow.js
@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { DragSource } from "react-dnd";
 
 import { getArchitectures, getPendingChannelMap } from "../selectors";
 import ReleasesTableCell from "./releasesTableCell";
@@ -20,6 +21,25 @@ import { getChannelName, isInDevmode } from "../helpers";
 import PromoteMenu from "./promoteMenu";
 import AvailableRevisionsMenu from "./availableRevisionsMenu";
 
+export const ItemTypes = {
+  RELEASE: "release"
+};
+
+const cellSource = {
+  beginDrag(props) {
+    console.log("beginDrop", props);
+    return {};
+  }
+};
+
+function collect(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+}
+
 const disabledBecauseDevmode = (
   <Fragment>
     Revisions with devmode confinement or devel grade <br />
@@ -188,51 +208,73 @@ class ReleasesTableRow extends Component {
     return (
       <Fragment>
         {risk === AVAILABLE && <h4>Revisions available to promote</h4>}
-        <div
-          className={`p-releases-table__row p-releases-table__row--channel p-releases-table__row--${risk}`}
-        >
+        {this.props.connectDragPreview(
           <div
-            className={`p-releases-channel ${
-              filteredChannel === channel ? "is-active" : ""
-            }`}
+            className={`p-releases-table__row p-releases-table__row--channel p-releases-table__row--${risk}`}
+            style={{
+              opacity: this.props.isDragging ? 0.5 : 1
+            }}
           >
-            {risk === AVAILABLE ? (
-              <span className="p-releases-channel__name">{channelName}</span>
-            ) : (
-              <span className="p-releases-channel__name p-release-data__info p-tooltip p-tooltip--btm-center">
-                <span className="p-release-data__title">{channelName}</span>
-                <span className="p-release-data__meta">{channelVersion}</span>
-                {channelVersion && (
-                  <span className="p-tooltip__message">
-                    {channelVersionTooltip}
-                  </span>
+            <div
+              className={`p-releases-channel ${
+                filteredChannel === channel ? "is-active" : ""
+              }`}
+              style={{
+                width: "280px"
+              }}
+            >
+              {this.props.connectDragSource(
+                <span
+                  className="p-releases-channel__name"
+                  style={{
+                    flexGrow: 0,
+                    cursor: "move"
+                  }}
+                >
+                  <i className="p-icon--contextual-menu" />
+                </span>
+              )}
+              {risk === AVAILABLE ? (
+                <span className="p-releases-channel__name">{channelName}</span>
+              ) : (
+                <span className="p-releases-channel__name p-release-data__info p-tooltip p-tooltip--btm-center">
+                  <span className="p-release-data__title">{channelName}</span>
+                  <span className="p-release-data__meta">{channelVersion}</span>
+                  {channelVersion && (
+                    <span className="p-tooltip__message">
+                      {channelVersionTooltip}
+                    </span>
+                  )}
+                </span>
+              )}
+
+              <span className="p-releases-table__menus">
+                {canBePromoted && (
+                  <PromoteMenu
+                    tooltip={promoteTooltip}
+                    targetChannels={targetChannels}
+                    promoteToChannel={this.onPromoteToChannel.bind(
+                      this,
+                      channel
+                    )}
+                  />
+                )}
+                {canBeClosed && (
+                  <button
+                    className="p-button--base p-icon-button u-no-margin"
+                    onClick={this.onCloseChannel.bind(this, channel)}
+                    title={`Close channel ${channel}`}
+                  >
+                    <i className="p-icon--delete" />
+                  </button>
                 )}
               </span>
+            </div>
+            {archs.map(arch =>
+              this.renderRevisionCell(track, risk, arch, showVersion)
             )}
-
-            <span className="p-releases-table__menus">
-              {canBePromoted && (
-                <PromoteMenu
-                  tooltip={promoteTooltip}
-                  targetChannels={targetChannels}
-                  promoteToChannel={this.onPromoteToChannel.bind(this, channel)}
-                />
-              )}
-              {canBeClosed && (
-                <button
-                  className="p-button--base p-icon-button u-no-margin"
-                  onClick={this.onCloseChannel.bind(this, channel)}
-                  title={`Close channel ${channel}`}
-                >
-                  <i className="p-icon--delete" />
-                </button>
-              )}
-            </span>
           </div>
-          {archs.map(arch =>
-            this.renderRevisionCell(track, risk, arch, showVersion)
-          )}
-        </div>
+        )}
       </Fragment>
     );
   }
@@ -256,7 +298,12 @@ ReleasesTableRow.propTypes = {
 
   // actions
   closeChannel: PropTypes.func.isRequired,
-  promoteChannel: PropTypes.func.isRequired
+  promoteChannel: PropTypes.func.isRequired,
+
+  // dnd
+  connectDragSource: PropTypes.func,
+  connectDragPreview: PropTypes.func,
+  isDragging: PropTypes.bool
 };
 
 const mapStateToProps = state => {
@@ -277,7 +324,13 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
+const DraggableReleasesTableRow = DragSource(
+  ItemTypes.RELEASE,
+  cellSource,
+  collect
+)(ReleasesTableRow);
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(ReleasesTableRow);
+)(DraggableReleasesTableRow);
diff --git a/static/js/publisher/release/releasesController.js b/static/js/publisher/release/releasesController.js
@@ -2,6 +2,8 @@ import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import "whatwg-fetch";
+import { DndProvider } from 'react-dnd'
+import HTML5Backend from 'react-dnd-html5-backend'
 
 import ReleasesTable from "./components/releasesTable";
 import Notification from "./components/notification";
@@ -263,7 +265,7 @@ class ReleasesController extends Component {
 
   render() {
     return (
-      <Fragment>
+      <DndProvider backend={HTML5Backend}>
         <div className="row">
           {this.state.error && (
             <Notification status="error" appearance="negative">
@@ -279,7 +281,7 @@ class ReleasesController extends Component {
         </div>
 
         <ReleasesTable />
-      </Fragment>
+      </DndProvider>
     );
   }
 }