Add embedded RapiD editor

hotosm · Dec 21, 2021 · 9fbfc18 · 9fbfc18
1 parent 27fae5b
commit 9fbfc18
Show file tree

Hide file tree

Showing 22 changed files with 416 additions and 29 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -4,7 +4,7 @@ updates:
   directory: "/"
   schedule:
     interval: daily
-    time: "11:00"
+    time: "13:00"
   open-pull-requests-limit: 10
   ignore:
   - dependency-name: python-dotenv
@@ -30,7 +30,7 @@ updates:
   directory: "/frontend"
   schedule:
     interval: daily
-    time: "11:00"
+    time: "13:00"
   open-pull-requests-limit: 10
   ignore:
   - dependency-name: "@testing-library/user-event"
@@ -141,6 +141,16 @@ updates:
     - 2.4.21
     - 2.4.22
     - 2.4.23
+
+  - dependency-name: react-datepicker
+    versions:
+    - 3.7.0
+  - dependency-name: reactjs-popup
+    versions:
+    - 2.0.4
+  - dependency-name: ini
+    versions:
+    - 1.3.8
   - dependency-name: "@formatjs/intl-relativetimeformat"
     versions:
     - 8.0.4
@@ -260,3 +270,53 @@ updates:
   - dependency-name: react-placeholder
     versions:
     - 4.1.0
+- package-ecosystem: pip
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "13:00"
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: python-dotenv
+    versions:
+    - 0.15.0
+    - 0.16.0
+    - 0.17.0
+  - dependency-name: alembic
+    versions:
+    - 1.5.5
+    - 1.5.6
+    - 1.5.7
+  - dependency-name: sentry-sdk[flask]
+    versions:
+    - 0.20.3
+  - dependency-name: greenlet
+    versions:
+    - 1.0.0
+  - dependency-name: gevent
+    versions:
+    - 21.1.2
+  - dependency-name: oauthlib
+    versions:
+    - 3.1.0
+  - dependency-name: bleach
+    versions:
+    - 3.3.0
+  - dependency-name: flask-oauthlib
+    versions:
+    - 0.9.6
+  - dependency-name: flask-cors
+    versions:
+    - 3.0.10
+  - dependency-name: attrs
+    versions:
+    - 20.3.0
+  - dependency-name: werkzeug
+    versions:
+    - 1.0.1
+  - dependency-name: black
+    versions:
+    - 20.8b1
+  - dependency-name: geojson
+    versions:
+    - 2.5.0
diff --git a/backend/models/dtos/project_dto.py b/backend/models/dtos/project_dto.py
@@ -79,7 +79,8 @@ def is_known_editor(value):
         raise ValidationError(
             f"Unknown editor: {value} Valid values are {Editors.ID.name}, "
             f"{Editors.JOSM.name}, {Editors.POTLATCH_2.name}, "
-            f"{Editors.FIELD_PAPERS.name}"
+            f"{Editors.FIELD_PAPERS.name}, "
+            f"{Editors.RAPID.name} "
         )
 
 
@@ -206,6 +207,9 @@ class ProjectDTO(Model):
     imagery = StringType()
     josm_preset = StringType(serialized_name="josmPreset", serialize_when_none=False)
     id_presets = ListType(StringType, serialized_name="idPresets", default=[])
+    rapid_power_user = BooleanType(
+        serialized_name="rapidPowerUser", default=False, required=False
+    )
     mapping_types = ListType(
         StringType,
         serialized_name="mappingTypes",
@@ -500,6 +504,9 @@ class ProjectSummary(Model):
     imagery = StringType()
     license_id = IntType(serialized_name="licenseId")
     id_presets = ListType(StringType, serialized_name="idPresets", default=[])
+    rapid_power_user = BooleanType(
+        serialized_name="rapidPowerUser", default=False, required=False
+    )
     mapping_editors = ListType(
         StringType,
         min_size=1,

diff --git a/backend/models/postgis/project.py b/backend/models/postgis/project.py
@@ -149,6 +149,7 @@ class Project(db.Model):
     imagery = db.Column(db.String)
     josm_preset = db.Column(db.String)
     id_presets = db.Column(ARRAY(db.String))
+    rapid_power_user = db.Column(db.Boolean, default=False)
     last_updated = db.Column(db.DateTime, default=timestamp)
     license_id = db.Column(db.Integer, db.ForeignKey("licenses.id", name="fk_licenses"))
     geometry = db.Column(Geometry("MULTIPOLYGON", srid=4326), nullable=False)
@@ -174,6 +175,7 @@ class Project(db.Model):
             Editors.ID.value,
             Editors.JOSM.value,
             Editors.CUSTOM.value,
+            Editors.RAPID.value,
         ],
         index=True,
         nullable=False,
@@ -184,6 +186,7 @@ class Project(db.Model):
             Editors.ID.value,
             Editors.JOSM.value,
             Editors.CUSTOM.value,
+            Editors.RAPID.value,
         ],
         index=True,
         nullable=False,
@@ -375,6 +378,7 @@ def update(self, project_dto: ProjectDTO):
         self.imagery = project_dto.imagery
         self.josm_preset = project_dto.josm_preset
         self.id_presets = project_dto.id_presets
+        self.rapid_power_user = project_dto.rapid_power_user
         self.last_updated = timestamp()
         self.license_id = project_dto.license_id
 
@@ -841,6 +845,7 @@ def get_project_summary(self, preferred_locale) -> ProjectSummary:
         summary.license_id = self.license_id
         summary.status = ProjectStatus(self.status).name
         summary.id_presets = self.id_presets
+        summary.rapid_power_user = self.rapid_power_user
         summary.imagery = self.imagery
         if self.organisation_id:
             summary.organisation = self.organisation_id
@@ -1004,6 +1009,7 @@ def _get_project_and_base_dto(self):
         base_dto.imagery = self.imagery
         base_dto.josm_preset = self.josm_preset
         base_dto.id_presets = self.id_presets
+        base_dto.rapid_power_user = self.rapid_power_user
         base_dto.country_tag = self.country
         base_dto.organisation_id = self.organisation_id
         base_dto.license_id = self.license_id

diff --git a/backend/models/postgis/statuses.py b/backend/models/postgis/statuses.py
@@ -108,6 +108,7 @@ class Editors(Enum):
     POTLATCH_2 = 2
     FIELD_PAPERS = 3
     CUSTOM = 4
+    RAPID = 5
 
 
 class TeamVisibility(Enum):

diff --git a/example.env b/example.env
@@ -41,6 +41,7 @@ OSM_REGISTER_URL=https://www.openstreetmap.org/user/new
 # You only need to modify it in case you want to direct users to map on a different OSM instance.
 # ID_EDITOR_URL=https://www.openstreetmap.org/edit?editor=id&
 # POTLATCH2_EDITOR_URL=https://www.openstreetmap.org/edit?editor=potlatch2
+# RAPID_EDITOR_URL=https://mapwith.ai/rapid
 
 # Matomo configuration. Optional, configure it in case you have a Matomo instance.
 # TM_MATOMO_ID="site_id"

diff --git a/frontend/.env.expand b/frontend/.env.expand
@@ -41,3 +41,4 @@ REACT_APP_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL
 REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN
 REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT
 REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT
+REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,6 +36,7 @@
     "final-form": "^4.20.2",
     "fromentries": "^1.3.2",
     "humanize-duration": "^3.27.0",
+    "RapiD": "facebookincubator/rapid#rapid-v1.1.4",
     "immutable": "^4.0.0-rc.12",
     "mapbox-gl": "^1.13.1",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
@@ -77,8 +78,8 @@
   },
   "scripts": {
     "build-locales": "combine-messages -i './src/**/messages.js' -o './src/locales/en.json'",
-    "copy-static": "bash -c \"if ! (test -a public/static/index.js); then cp -R node_modules/@hotosm/id/dist/* public/static/; fi\"",
-    "update-static": "bash -c \"cp -R node_modules/@hotosm/id/dist/* public/static/;\"",
+    "copy-static": "bash -c \"mkdir -p public/static/id; mkdir -p public/static/rapid; if ! (test -a public/static/id/index.js); then cp -R node_modules/@hotosm/id/dist/* public/static/id; elif ! (test -a public/static/rapid/index.js); then  cp -R node_modules/RapiD/dist/* public/static/rapid; fi\"",
+    "update-static": "bash -c \"mkdir -p public/static/id; mkdir -p public/static/rapid; cp -R node_modules/@hotosm/id/dist/* public/static/id;  cp -R node_modules/RapiD/dist/* public/static/rapid;\"",
     "preparation": "bash -c \"if (test -a ../tasking-manager.env); then grep -hs ^ ../tasking-manager.env .env.expand > .env; else cp .env.expand .env; fi\"",
     "start": "npm run preparation && npm run copy-static && react-scripts start",
     "build": "npm run preparation && npm run update-static && react-scripts build",

diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
@@ -129,6 +129,12 @@ a:active {
     background-color: $white; // @extend .bg-moon-gray;
     border-color: $red;
   }
+
+  .checkbox-toggle-sm {
+    left: 1rem; // @extend .left-1;
+    background-color: $white; // @extend .bg-moon-gray;
+    border-color: $red;
+  }
 }
 .checkbox-toggle:hover {
   border: dashed red !important;
@@ -289,3 +295,26 @@ div.messageBodyLinks {
     top: 2.5rem;
   }
 }
+
+.rapid-beta {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  color: #eee;
+  margin: 0 10px;
+  width: 1.8em;
+  height: 1.8em;
+  border: 1px solid #909;
+  border-radius: 5px;
+  background: rgb(203,16,237);
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(6%, rgba(108,1,167,1)), color-stop(50%, rgba(203,16,237,1)), color-stop(90%, rgb(229, 140, 253)), to(rgb(201, 42, 251)));
+  background: -o-linear-gradient(bottom, rgba(108,1,167,1) 6%, rgba(203,16,237,1) 50%, rgb(229, 140, 253) 90%, rgb(201, 42, 251) 100%);
+  background: linear-gradient(0deg, rgba(108,1,167,1) 6%, rgba(203,16,237,1) 50%, rgb(229, 140, 253) 90%, rgb(201, 42, 251) 100%);
+
+  &:before {
+    content: '\03b2';
+    font-size: 1.2em;
+    vertical-align: middle;
+  }
+}
diff --git a/frontend/src/components/editor.js b/frontend/src/components/editor.js
@@ -70,7 +70,7 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl }
       // setup the context
       iDContext
         .embed(true)
-        .assetPath('/static/')
+        .assetPath('/static/id/')
         .locale(locale)
         .setsDocumentTitle(false)
         .containerNode(document.getElementById('id-container'));

diff --git a/frontend/src/components/formInputs.js b/frontend/src/components/formInputs.js
@@ -21,7 +21,7 @@ export const RadioField = ({ name, value, className }: Object) => (
   />
 );
 
-export const SwitchToggle = ({ label, isChecked, onChange, labelPosition }: Object) => (
+export const SwitchToggle = ({ label, isChecked, onChange, labelPosition, small = false }: Object) => (
   <div className="v-mid justify-center bg-grey-dark">
     {label && labelPosition !== 'right' && <span className="di mr2 nowrap f6 dn-m">{label}</span>}
     <div className="relative dib">
@@ -31,8 +31,8 @@ export const SwitchToggle = ({ label, isChecked, onChange, labelPosition }: Obje
         checked={isChecked}
         onChange={onChange}
       />
-      <div className="relative z-1 dib w3 h2 bg-blue-grey overflow-hidden br4 v-mid bg-animate checkbox-wrapper">
-        <div className="absolute right-auto left-0 w2 h2 br4 bg-white ba b-grey-light shadow-4 t-cb bg-animate checkbox-toggle"></div>
+      <div className={`relative z-1 dib ${small ? 'w2 h1' : 'w3 h2'} bg-blue-grey overflow-hidden br4 v-mid bg-animate checkbox-wrapper`}>
+        <div className={`absolute right-auto left-0 ${small ? 'w1 h1' : 'w2 h2'} br4 bg-white ba b-grey-light shadow-4 t-cb bg-animate ${small ? 'checkbox-toggle-sm' : 'checkbox-toggle'}`}></div>
       </div>
     </div>
     {label && labelPosition === 'right' && <span className="di ml2 f6">{label}</span>}

diff --git a/frontend/src/components/projectEdit/messages.js b/frontend/src/components/projectEdit/messages.js
@@ -347,6 +347,14 @@ export default defineMessages({
     defaultMessage:
       'If checked, users must edit tasks at random for the initial editing stage (managers and admins are exempt).',
   },
+  rapidPowerUser: {
+    id: 'projects.formInputs.rapid_power_user',
+    defaultMessage: 'Enable RapiD Power User Features',
+  },
+  rapidPowerUserDescription: {
+    id: 'projects.formInputs.rapid_power_user.description',
+    defaultMessage: 'If checked, RapiD will load with the power user dialog enabled.',
+  },
   imagery: {
     id: 'projects.formInputs.imagery',
     defaultMessage: 'Imagery',

diff --git a/frontend/src/components/projectEdit/settingsForm.js b/frontend/src/components/projectEdit/settingsForm.js
@@ -127,6 +127,29 @@ export const SettingsForm = ({ languages, defaultLocale }) => {
           <FormattedMessage {...messages.randomTaskSelectionDescription} />
         </p>
       </div>
+      {(projectInfo.mappingEditors.includes('RAPID') || projectInfo.validationEditors.includes('RAPID')) && (
+        <div className={styleClasses.divClass}>
+          <label className={styleClasses.labelClass} >
+            <FormattedMessage {...messages.rapidPowerUser} />
+            <div className={'rapid-beta'}/>
+          </label>
+
+          <SwitchToggle
+            isChecked={projectInfo.rapidPowerUser}
+            label={<FormattedMessage {...messages.rapidPowerUser} />}
+            labelPosition={'right'}
+            onChange={() =>
+              setProjectInfo({
+                ...projectInfo,
+                rapidPowerUser: !projectInfo.rapidPowerUser
+              })
+            }
+          />
+          <p className={styleClasses.pClass}>
+            <FormattedMessage {...messages.rapidPowerUserDescription} />
+          </p>
+        </div>
+      )}
     </div>
   );
 };