Update Rapid to v2.3.1 from v2.2.5

example.env

@@ -36,6 +36,7 @@ TM_ORG_GITHUB=https://github.com/hotosm
 # Information about the OSM server - Customize your server here
 # By default, it's the public OpenStreetMap.org server
 OSM_SERVER_URL=https://www.openstreetmap.org
+OSM_SERVER_API_URL=https://api.openstreetmap.org
 OSM_NOMINATIM_SERVER_URL=https://nominatim.openstreetmap.org
 OSM_REGISTER_URL=https://www.openstreetmap.org/user/new
 

frontend/.env.expand

@@ -35,6 +35,7 @@ REACT_APP_OSM_CLIENT_ID=$TM_CLIENT_ID
 REACT_APP_OSM_CLIENT_SECRET=$TM_CLIENT_SECRET
 REACT_APP_OSM_REDIRECT_URI=$TM_REDIRECT_URI
 REACT_APP_OSM_SERVER_URL=$OSM_SERVER_URL
+REACT_APP_OSM_SERVER_API_URL=$OSM_SERVER_API_URL
 REACT_APP_TM_ORG_NAME=$TM_ORG_NAME
 REACT_APP_OSM_REGISTER_URL=$OSM_REGISTER_URL
 REACT_APP_ID_EDITOR_URL=$ID_EDITOR_URL

frontend/package.json

@@ -5,13 +5,13 @@
   "private": false,
   "dependencies": {
     "@hotosm/id": "^2.21.1",
-    "@hotosm/underpass-ui": "^0.0.4",
     "@hotosm/iso-countries-languages": "^1.1.2",
+    "@hotosm/underpass-ui": "^0.0.4",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@mapbox/mapbox-gl-geocoder": "^5.0.2",
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@placemarkio/geo-viewport": "^1.0.2",
-    "@rapideditor/rapid": "^2.1.1",
+    "@rapideditor/rapid": "^2.3.1",
     "@sentry/react": "^7.102.0",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",

frontend/src/components/rapidEditor.js

@@ -3,7 +3,13 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import PropTypes from 'prop-types';
 
-import { OSM_CLIENT_ID, OSM_CLIENT_SECRET, OSM_REDIRECT_URI, OSM_SERVER_URL } from '../config';
+import {
+  OSM_CLIENT_ID,
+  OSM_CLIENT_SECRET,
+  OSM_REDIRECT_URI,
+  OSM_SERVER_API_URL,
+  OSM_SERVER_URL,
+} from '../config';
 import { types } from '../store/actions/editor';
 
 // We import from a CDN using a SEMVER minor version range
@@ -190,6 +196,7 @@ function RapidEditor({
       context.apiConnections = [
         {
           url: OSM_SERVER_URL,
+          apiUrl: OSM_SERVER_API_URL,
           client_id: OSM_CLIENT_ID,
           client_secret: OSM_CLIENT_SECRET,
           redirect_uri: OSM_REDIRECT_URI,
@@ -223,7 +230,7 @@ function RapidEditor({
 
   useEffect(() => {
     const containerRoot = document.getElementById('rapid-container-root');
-    const editListener = () => updateDisableState(setDisable, context.systems.edits);
+    const editListener = () => updateDisableState(setDisable, context.systems.editor);
     if (context && dom) {
       containerRoot.appendChild(dom);
       // init the ui or restart if it was loaded previously
@@ -239,35 +246,38 @@ function RapidEditor({
 
       /* Perform tasks after Rapid has started up */
       promise.then(() => {
-        /* Keep track of edits */
-        const editSystem = context.systems.edits;
+        if (context?.systems?.editor) {
+          /* Keep track of edits */
+          const editSystem = context.systems.editor;
 
-        editSystem.on('change', editListener);
-        editSystem.on('reset', editListener);
+          editSystem.on('stablechange', editListener);
+          editSystem.on('reset', editListener);
+        }
       });
     }
     return () => {
       if (containerRoot?.childNodes && dom in containerRoot.childNodes) {
         document.getElementById('rapid-container-root')?.removeChild(dom);
       }
-      if (context?.systems?.edits) {
-        const editSystem = context.systems.edits;
-        editSystem.off('change', editListener);
+      if (context?.systems?.editor) {
+        const editSystem = context.systems.editor;
+        editSystem.off('stablechange', editListener);
         editSystem.off('reset', editListener);
       }
     };
   }, [dom, context, setDisable]);
 
   useEffect(() => {
-    if (context) {
-      return () => context.save();
+    if (context?.systems?.editor) {
+      return () => context.systems.editor.saveBackup();
     }
   }, [context]);
 
   useEffect(() => {
     if (context && session) {
       context.preauth = {
         url: OSM_SERVER_URL,
+        apiUrl: OSM_SERVER_API_URL,
         client_id: OSM_CLIENT_ID,
         client_secret: OSM_CLIENT_SECRET,
         redirect_uri: OSM_REDIRECT_URI,

frontend/src/config/index.js

@@ -51,6 +51,8 @@ export const SENTRY_FRONTEND_DSN = process.env.REACT_APP_SENTRY_FRONTEND_DSN;
 // OSM API and Editor URLs
 export const OSM_SERVER_URL =
   process.env.REACT_APP_OSM_SERVER_URL || 'https://www.openstreetmap.org';
+export const OSM_SERVER_API_URL =
+  process.env.REACT_APP_OSM_SERVER_API_URL || 'https://api.openstreetmap.org';
 export const ID_EDITOR_URL =
   process.env.REACT_APP_ID_EDITOR_URL || 'https://www.openstreetmap.org/edit?editor=id&';
 export const POTLATCH2_EDITOR_URL =

frontend/src/network/genericJSONRequest.js

@@ -1,7 +1,6 @@
 import { handleErrors } from '../utils/promise';
 import { API_URL } from '../config';
 
-
 /**
  * Fetch data from an external JSON API
  * @param {string} url The url to fetch from
@@ -10,7 +9,7 @@ import { API_URL } from '../config';
  */
 export function fetchExternalJSONAPI(url, init = {}): Promise<*> {
   if (!init.headers) {
-    init.headers = {'Content-Type': 'application/json'};
+    init.headers = { 'Content-Type': 'application/json' };
   }
   init.headers['Content-Type'] = 'application/json';
 

frontend/src/views/projectLiveMonitoring.js

@@ -54,7 +54,7 @@ export function ProjectLiveMonitoring() {
 
   const [areaOfInterest, setAreaOfInterest] = useState(null);
   const [project, setProject] = useState(null);
-  const defaultComment = `${TM_DEFAULT_CHANGESET_COMMENT}-${id}`.replace("#","");
+  const defaultComment = `${TM_DEFAULT_CHANGESET_COMMENT}-${id}`.replace('#', '');
 
   const hasLiveMonitoringFeature = useHasLiveMonitoringFeature();
 
@@ -270,45 +270,53 @@ export function ProjectLiveMonitoring() {
               </>
             )}
             {project && areaOfInterest && (
-              <><div className="border-b-2 pb-5 space-y-3">
-                <UnderpassFeatureStats
-                  tags={tags}
-                  hashtag={defaultComment}
-                  featureType={featureType}
-                  apiUrl={underpassConfig.API_URL}
-                  area={areaOfInterest} />
-                <UnderpassValidationStats
-                  tags={tags}
-                  hashtag={defaultComment}
-                  featureType={featureType}
-                  apiUrl={underpassConfig.API_URL}
-                  status="badgeom"
-                  area={areaOfInterest} />
-              </div><div className="border-b-2 py-5 mb-4">
+              <>
+                <div className="border-b-2 pb-5 space-y-3">
+                  <UnderpassFeatureStats
+                    tags={tags}
+                    hashtag={defaultComment}
+                    featureType={featureType}
+                    apiUrl={underpassConfig.API_URL}
+                    area={areaOfInterest}
+                  />
+                  <UnderpassValidationStats
+                    tags={tags}
+                    hashtag={defaultComment}
+                    featureType={featureType}
+                    apiUrl={underpassConfig.API_URL}
+                    status="badgeom"
+                    area={areaOfInterest}
+                  />
+                </div>
+                <div className="border-b-2 py-5 mb-4">
                   <form className="space-x-2">
                     <input
                       onChange={() => {
                         setRealtimeList(!realtimeList);
-                      } }
+                      }}
                       name="liveListCheckbox"
-                      type="checkbox" />
+                      type="checkbox"
+                    />
                     <label target="liveListCheckbox">Live list</label>
                     <input
                       onChange={() => {
                         setRealtimeMap(!realtimeMap);
-                      } }
+                      }}
                       name="liveMapCheckbox"
-                      type="checkbox" />
+                      type="checkbox"
+                    />
                     <label target="liveMapCheckbox">Live map</label>
                     <input
                       onChange={() => {
                         setListAll(!listAll);
-                      } }
+                      }}
                       name="listAllCheckbox"
-                      type="checkbox" />
+                      type="checkbox"
+                    />
                     <label target="listAllCheckbox">List all</label>
                   </form>
-                </div><UnderpassFeatureList
+                </div>
+                <UnderpassFeatureList
                   style={{
                     display: 'flex',
                     flexFlow: 'column',
@@ -326,7 +334,7 @@ export function ProjectLiveMonitoring() {
                     const tags = JSON.stringify(feature.tags);
                     const status = feature.status;
                     setActiveFeature({ properties: { tags, status }, ...feature });
-                  } }
+                  }}
                   realtime={realtimeList}
                   config={underpassConfig}
                   status={listAll ? '' : status}
@@ -335,7 +343,9 @@ export function ProjectLiveMonitoring() {
                     if (mostRecentFeature) {
                       setCoords([mostRecentFeature.lat, mostRecentFeature.lon]);
                     }
-                  } } /></>
+                  }}
+                />
+              </>
             )}
           </div>
         </div>