add "bundle" button

src/components/HOCs/WithTaskBundle/WithTaskBundle.jsx

@@ -241,6 +241,17 @@ export function WithTaskBundle(WrappedComponent) {
       this.setState({ taskBundle: updatedTaskBundle })
     }
 
+    addTaskToBundle = async (taskId) => {
+      const { taskBundle } = this.state
+      const task =  await this.lockTask(taskId)
+      const updatedTaskBundle = { 
+        ...taskBundle, 
+        taskIds: [...taskBundle.taskIds, taskId], 
+        tasks: [...taskBundle.tasks, task] 
+      }
+      this.setState({ taskBundle: updatedTaskBundle })
+    }
+
     updateTaskBundle = async () => {
       const { taskBundle, initialBundle } = this.state
       if (taskBundle || initialBundle) {
@@ -272,6 +283,7 @@ export function WithTaskBundle(WrappedComponent) {
           updateTaskBundle={this.updateTaskBundle}
           resetTaskBundle={this.resetTaskBundle}
           removeTaskFromBundle={this.removeTaskFromBundle}
+          addTaskToBundle={this.addTaskToBundle}
           clearActiveTaskBundle={this.clearActiveTaskBundle}
           setSelectedTasks={(selectedTasks) => this.setState({ selectedTasks })}
           selectedTasks={this.state.selectedTasks}

src/components/HOCs/WithTaskClusterMarkers/WithTaskClusterMarkers.jsx

@@ -33,14 +33,14 @@ export const WithTaskClusterMarkers = function(WrappedComponent) {
      */
     updateMapMarkers() {
       const markers = _map(this.props.taskClusters, cluster => {
-        const cluserStatus = cluster.status ?? cluster.taskStatus
+        const clusterStatus = cluster.status ?? cluster.taskStatus
         const clusterId = cluster.id ?? cluster.taskId 
-        const alreadyBundled = cluster.bundleId && !this.props.taskBundle?.bundleId !== cluster.bundleId
+        const alreadyBundled = cluster.bundleId && this.props.initialBundle?.bundleId !== cluster.bundleId
 
         const bundleConflict = Boolean(
           (clusterId &&
           this.props.task &&
-          ![0, 3, 6].includes(cluserStatus) &&
+          ![0, 3, 6].includes(clusterStatus) &&
           !this.props.taskBundle?.taskIds?.includes(clusterId) &&
           !this.props.initialBundle?.taskIds?.includes(clusterId)) ||
           alreadyBundled

src/components/TaskAnalysisTable/TaskAnalysisTable.jsx

@@ -255,6 +255,7 @@ export class TaskAnalysisTableInternal extends Component {
               <ViewTaskSubComponent taskId={props.original.id} />
             }
             unbundleTask={this.props.unbundleTask}
+            bundleTask={this.props.bundleTask}
             collapseOnDataChange={false}
             minRows={1}
             manual
@@ -444,6 +445,23 @@ const setupColumnTypes = (props, taskBaseRoute, manager, data, openComments) =>
               <FormattedMessage {...messages.unbundle} />
             </button>
           )}
+
+
+          {!isActiveTask && validBundlingStatus && !isInActiveBundle && !alreadyBundled && (
+            <button
+              disabled={props.bundleEditsDisabled}
+              className="mr-text-green-lighter"
+              style={{
+                cursor: props.bundleEditsDisabled ? 'default' : 'pointer',
+                opacity: props.bundleEditsDisabled ? 0.3 : 1,
+                pointerEvents: props.bundleEditsDisabled ? 'none' : 'auto'
+              }}
+              onClick={() => props.bundleTask(row._original)}
+            >
+              <FormattedMessage {...messages.bundle} />
+            </button>
+          )}
+
 
           {isActiveTask && <div className="mr-text-yellow">Primary Task</div>}
         </div>

src/components/TaskClusterMap/TaskClusterMap.jsx

@@ -62,7 +62,7 @@ export const TaskClusterMap = (props) => {
 
   useEffect(() => {
     // Check condition for toggling showAsClusters
-    if (!props.showAsClusters && props.totalTaskCount > UNCLUSTER_THRESHOLD) {
+    if (!props.showAsClusters && props.totalTaskCount > UNCLUSTER_THRESHOLD && !props.createTaskBundle) {
       props.toggleShowAsClusters();
     }
 
@@ -250,7 +250,7 @@ export const TaskClusterMap = (props) => {
       <ResizeMap />
       <AttributionControl position="bottomleft" prefix={false} />
       {(Boolean(props.loading) || Boolean(props.loadingChallenge)) && <BusySpinner mapMode xlarge />}
-      {props.totalTaskCount && props.totalTaskCount <= UNCLUSTER_THRESHOLD && !searchOpen && !props.loading &&
+      {props.totalTaskCount && props.totalTaskCount <= UNCLUSTER_THRESHOLD && !searchOpen && !props.loading && !props.createTaskBundle &&
         <label htmlFor="show-clusters-input" className="mr-absolute mr-z-10 mr-top-0 mr-left-0 mr-mt-2 mr-ml-2 mr-shadow mr-rounded-sm mr-bg-black-50 mr-px-2 mr-py-1 mr-text-white mr-text-xs mr-flex mr-items-center">
           <input
             id="show-clusters-input"

src/components/Widgets/TaskBundleWidget/Messages.js

@@ -93,6 +93,11 @@ export default defineMessages({
     id: "Widgets.TaskBundleWidget.removeFromBundle",
     defaultMessage: "Remove from bundle",
   },
+
+  addToBundle: {
+    id: "Widgets.TaskBundleWidget.addToBundle",
+    defaultMessage: "Add to bundle",
+  },
 
   unbundleTasksLabel: {
     id: "Widgets.TaskBundleWidget.controls.stopBundlinsg.label",

src/components/Widgets/TaskBundleWidget/TaskBundleWidget.jsx

@@ -62,7 +62,7 @@ const descriptor = {
 const ClusterMap = WithChallengeTaskClusters(
   WithTaskClusterMarkers(TaskClusterMap('taskBundling')),
   true,
-  true,
+  false,
   false,
   false
 )
@@ -92,7 +92,7 @@ export default class TaskBundleWidget extends Component {
 
     const shortcuts = keyboardShortcutGroups.taskEditing;
     if (event.key === shortcuts.completeTogether.key) {
-      this.bundleTasks()
+      this.createBundle()
     }
   }
 
@@ -116,7 +116,7 @@ export default class TaskBundleWidget extends Component {
     }
   }
 
-  bundleTasks = () => {
+  createBundle = () => {
     if (this.props.taskBundle || this.props.bundleEditsDisabled) {
       return;
     }
@@ -144,6 +144,12 @@ export default class TaskBundleWidget extends Component {
     this.props.toggleTaskSelection(task)
   }
 
+  bundleTask = (task) => {
+    const taskId = task.id ?? task.taskId 
+    this.props.addTaskToBundle(taskId)
+    this.props.toggleTaskSelection(task)
+  }
+
   setBoundsToNearbyTask = () => {
     const taskList = _get(this.props, 'nearbyTasks.tasks')
 
@@ -258,8 +264,9 @@ export default class TaskBundleWidget extends Component {
           {...this.props}
           saveFilters={this.saveFilters}
           revertFilters={this.revertFilters}
-          bundleTasks={this.bundleTasks}
+          createBundle={this.createBundle}
           unbundleTask={this.unbundleTask}
+          bundleTask={this.bundleTask}
           loading={this.props.loading}
         />
         {this.props.errorMessage && (
@@ -486,7 +493,7 @@ const BuildBundle = props => {
   const bundleButton = !props.taskReadOnly && props.selectedTaskCount(totalTaskCount) > 1 && !props.bundleEditsDisabled ? (
       <button
         className="mr-button mr-button--green-lighter mr-button--small"
-        onClick={props.bundleTasks}
+        onClick={props.createBundle}
       >
         <FormattedMessage {...messages.bundleTasksLabel} />
       </button>

src/components/Widgets/TaskBundleWidget/TaskMarkerContent.jsx

@@ -119,7 +119,21 @@ class TaskMarkerContent extends Component {
                     >
                       <FormattedMessage {...messages.removeFromBundle} />
                     </button>
-                  ) : null}
+                  ) : (
+                    !alreadyBundled && (
+                      <button
+                        disabled={this.props.bundleEditsDisabled}
+                        onClick={() => this.props.bundleTask(this.props.marker.options)}
+                        className="mr-text-green mr-border-solid mr-border mr-border-green mr-px-2 mr-mb-1"
+                        style={{
+                          cursor: this.props.bundleEditsDisabled ? 'default' : 'pointer',
+                          opacity: this.props.bundleEditsDisabled ? 0.3 : 1,
+                        }}
+                      >
+                        <FormattedMessage {...messages.addToBundle} />
+                      </button>
+                    )
+                  )}
                 </div>
               ) : null}
             </label>

src/services/Error/AppErrors.js

@@ -33,7 +33,6 @@ export default {
     locked: messages.taskLocked,
     lockRefreshFailure: messages.taskLockRefreshFailure,
     bundleFailure: messages.taskBundleFailure,
-    removeTaskFromBundleFailure: messages.removeTaskFromBundleFailure,
     bundleCooperative: messages.taskBundleCooperative,
     addCommentFailure: messages.addCommentFailure,
     bundleNotCooperative: messages.taskBundleNotCooperative,

src/services/Error/Messages.js

@@ -95,10 +95,6 @@ export default defineMessages({
     id: "Errors.task.bundleFailure",
     defaultMessage: "Unable to bundle tasks together",
   },
-  removeTaskFromBundleFailure: {
-    id: "Errors.task.removeTaskFromBundleFailure",
-    defaultMessage: "Unable to remove task from bundle",
-  },
   taskBundleCooperative: {
     id: "Errors.task.bundleCooperative",
     defaultMessage: "The main task is Cooperative. All selected tasks must be Cooperative.",

src/services/Server/APIRoutes.js

@@ -118,7 +118,6 @@ const apiRoutes = (factory) => {
       bundle: factory.post("/taskBundle"),
       updateBundle: factory.post("/taskBundle/:bundleId/update"),
       deleteBundle: factory.delete("/taskBundle/:bundleId"),
-      removeTaskFromBundle: factory.post("/taskBundle/:id/unbundle"),
       fetchBundle: factory.post("/taskBundle/:bundleId"),
       bundled: {
         updateStatus: factory.put("/taskBundle/:bundleId/:status"),

src/services/Task/Task.js

@@ -997,29 +997,6 @@ export const deleteTaskBundle = function(bundleId) {
   }
 }
 
-export const removeTaskFromBundle = function (initialBundleTaskIds, bundleId, taskIds) {
-  return function (dispatch) {
-    return new Endpoint(api.tasks.removeTaskFromBundle, {
-      variables: { id: bundleId },
-      params: { id: bundleId, taskIds: taskIds, preventTaskIdUnlocks: initialBundleTaskIds || [] },
-    })
-      .execute()
-      .then((results) => {
-        return results;
-      })
-      .catch((error) => {
-        if (isSecurityError(error)) {
-          dispatch(ensureUserLoggedIn()).then(() =>
-            dispatch(addError(AppErrors.user.unauthorized))
-          );
-        } else {
-          dispatch(addError(AppErrors.task.removeTaskFromBundleFailure));
-          console.log(error.response || error);
-        }
-      });
-  };
-};
-
 /**
  * Retrieve and process a single task retrieval from the given endpoint (next
  * task, previous task, random task, etc).