Add "Open in JOSM" button to Task Map widget

src/components/Widgets/TaskMapWidget/Messages.js

@@ -28,4 +28,9 @@ export default defineMessages({
     id: "Widgets.TaskMapWidget.reselectTask",
     defaultMessage: "Re-Select Task",
   },
+
+  openInJOSM: {
+    id: "Widgets.TaskMapWidget.openInJOSM",
+    defaultMessage: "Open in JOSM",
+  },
 });

src/components/Widgets/TaskMapWidget/TaskMapWidget.jsx

@@ -1,9 +1,13 @@
 import { Component } from "react";
 import { FormattedMessage } from "react-intl";
 import AsCooperativeWork from "../../../interactions/Task/AsCooperativeWork";
+import { Editor } from "../../../services/Editor/Editor";
 import { WidgetDataTarget, registerWidgetType } from "../../../services/Widget/Widget";
+import Button from "../../Button/Button";
 import MapPane from "../../EnhancedMap/MapPane/MapPane";
+import WithEditor from "../../HOCs/WithEditor/WithEditor";
 import WithKeyboardShortcuts from "../../HOCs/WithKeyboardShortcuts/WithKeyboardShortcuts";
+import WithSearch from "../../HOCs/WithSearch/WithSearch";
 import QuickWidget from "../../QuickWidget/QuickWidget";
 import TaskMap from "../../TaskPane/TaskMap/TaskMap";
 import messages from "./Messages";
@@ -20,7 +24,7 @@ const descriptor = {
   defaultHeight: 19,
 };
 
-export default class TaskMapWidget extends Component {
+export class TaskMapWidget extends Component {
   componentWillUnmount = () => {
     this.props.resumeKeyboardShortcuts();
   };
@@ -38,6 +42,22 @@ export default class TaskMapWidget extends Component {
     }
   }
 
+  openInJOSM = () => {
+    const { task, mapBounds, taskBundle, editTask } = this.props;
+    if (!task || !editTask) {
+      return;
+    }
+
+    editTask(
+      Editor.josm,
+      task,
+      mapBounds,
+      {},
+      taskBundle,
+      task?.parent?.checkinComment,
+    );
+  };
+
   render() {
     const cooperative =
       AsCooperativeWork(this.props.task).isTagType() || this.props.task.cooperativeWork;
@@ -78,18 +98,28 @@ export default class TaskMapWidget extends Component {
           className="mr-mt-2"
           style={{ height: altWorkspaceType ? "calc(100vh - 270px)" : "calc(100% - 3rem)" }}
         >
-          {this.props.getUserAppSetting ? (
-            <>
-              <div className="mr-flex mr-items-center ">
-                <div className="mr-text-yellow mr-mr-1 mr-mt-1 mr-mb-2">
+          <div className="mr-flex mr-items-center mr-justify-between mr-mb-2">
+            {this.props.getUserAppSetting ? (
+              <div className="mr-flex mr-items-center">
+                <div className="mr-text-yellow mr-mr-1 mr-mt-1">
                   <FormattedMessage {...messages.editMode} />
                 </div>
-                <div className="mr-mt-1 mr-mb-2">
+                <div className="mr-mt-1">
                   <EditSwitch {...this.props} disableRapid={disableRapid} editMode={editMode} />
                 </div>
               </div>
-            </>
-          ) : null}
+            ) : (
+              <div />
+            )}
+            {!editMode && (
+              <Button
+                className="mr-button--green-fill mr-button--xsmall mr-px-2 mr-text-sm"
+                onClick={this.openInJOSM}
+              >
+                <FormattedMessage {...messages.openInJOSM} />
+              </Button>
+            )}
+          </div>
           {editMode ? (
             <RapidEditor
               token={this.props.user.osmProfile.requestToken}
@@ -108,4 +138,8 @@ export default class TaskMapWidget extends Component {
   }
 }
 
-registerWidgetType(WithKeyboardShortcuts(TaskMapWidget), descriptor);
+const EnhancedTaskMapWidget = WithSearch(WithEditor(TaskMapWidget), "task");
+
+export default EnhancedTaskMapWidget;
+
+registerWidgetType(WithKeyboardShortcuts(EnhancedTaskMapWidget), descriptor);