add re-select task button in rapid iframe (#2490)

* add button to reselect task in tapid iframe

src/components/Widgets/TaskMapWidget/Messages.js

@@ -23,4 +23,9 @@ export default defineMessages({
     id: "Widgets.TaskMapWidget.rapidFailed",
     defaultMessage: "Widget Failed! Geometries Null!",
   },
+
+  reselectTask: {
+    id: "Widgets.TaskMapWidget.reselectTask",
+    defaultMessage: "Re-Select Task",
+  },
 })

src/components/Widgets/TaskMapWidget/RapidEditor/RapidEditor.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import _get from 'lodash/get';
 
@@ -10,6 +10,8 @@ import WithSearch from '../../../HOCs/WithSearch/WithSearch';
 import useHash from '../../../../hooks/UseHash';
 import { SET_RAPIDEDITOR } from '../../../../services/RapidEditor/RapidEditor';
 import BusySpinner from '../../../BusySpinner/BusySpinner';
+import { FormattedMessage } from 'react-intl';
+import messages from './../Messages';
 
 /**
  * Generate the initial URL hash for the Rapid editor.
@@ -42,6 +44,7 @@ const RapidEditor = ({ token, task, mapBounds, comment }) => {
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const iframeRef = useRef(null); // Create a ref for the iframe
   let initialHash = generateStartingHash({ task, mapBounds, comment });
   let [, setHash] = useHash();
 
@@ -63,8 +66,21 @@ const RapidEditor = ({ token, task, mapBounds, comment }) => {
     initialHash += `&token=${token}`;
   }
 
+  const handleResetHash = () => {
+    if (iframeRef.current) {
+      iframeRef.current.contentWindow.location.hash = initialHash;
+    }
+  };
+
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <button 
+        onClick={handleResetHash} 
+        className="mr-ml-auto mr-button mr-button--small mr-px-2"
+        style={{ position: 'absolute', right: '0px', top: '-40px' }}
+      >
+        <FormattedMessage {...messages.reselectTask} />
+      </button>
       {isLoading && (
         <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1000 }}>
           <BusySpinner xlarge />
@@ -74,6 +90,7 @@ const RapidEditor = ({ token, task, mapBounds, comment }) => {
         <div>Error: {error.message}</div>
       )}
       <iframe
+        ref={iframeRef}
         id="rapid-container-root"
         style={{ width: '100%', height: '100%' }}
         src={`/static/rapid-editor.html${initialHash}`}