fix validator needed in form error and remove node 16 and 21

.github/workflows/node.js.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16, 18, 20, 21]
+        node-version: [16, 18, 20]
 
     steps:
     - name: Checkout repository

DEVELOPMENT.md

@@ -4,7 +4,7 @@ This is the repository that holds the front-end code. The back-end and API are d
 
 ### Basic Dependencies:
 
-* [Node 16-21 LTS](https://nodejs.org/)
+* [Node 16-20 LTS](https://nodejs.org/)
 * [yarn](https://yarnpkg.com/)
 * [jq](https://stedolan.github.io/jq/)
 * [curl](https://curl.haxx.se/)

package.json

@@ -13,6 +13,7 @@
     "@popperjs/core": "^2.8.4",
     "@rjsf/core": "^5.14.2",
     "@rjsf/utils": "^5.14.2",
+    "@rjsf/validator-ajv8": "^5.14.3",
     "@turf/bbox": "^6.0.1",
     "@turf/bbox-polygon": "^6.0.1",
     "@turf/bearing": "^6.0.1",

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenge.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Form from "@rjsf/core";
+import validator from "@rjsf/validator-ajv8";
 import classNames from "classnames";
 import _isObject from "lodash/isObject";
 import _isNumber from "lodash/isNumber";
@@ -225,15 +226,15 @@ export class EditChallenge extends Component {
     this.validationPromise = this.validateDataSource(formData, activeStep);
     this.validationPromise
       .then(() => {
-        if (!_isEmpty(this.state.extraErrors)) {
-          this.setState({ extraErrors: {} });
-        }
+      if (!_isEmpty(this.state.extraErrors)) {
+        this.setState({ extraErrors: {} });
+      }
       })
       .catch((dataSourceErrors) => {
-        this.setState({ extraErrors: dataSourceErrors });
+      this.setState({ extraErrors: dataSourceErrors });
       })
       .finally(() => {
-        this.validationPromise = null;
+      this.validationPromise = null;
       });
     return errors;
   };
@@ -295,7 +296,7 @@ export class EditChallenge extends Component {
       .catch((err) => {
         console.log(err);
       }); // Stay on current step if validation fails
-      
+
     return false;
   };
 
@@ -930,6 +931,7 @@ export class EditChallenge extends Component {
                       }
                     )}
                     className="form"
+                    validator={validator}
                     validate={(formData, errors) =>
                       this.validate(formData, errors, activeStep)
                     }

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenges.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Form from "@rjsf/core";
+import validator from "@rjsf/validator-ajv8";
 import _isObject from "lodash/isObject";
 import _isEmpty from "lodash/isEmpty";
 import _omit from "lodash/omit";
@@ -356,6 +357,7 @@ export class EditChallenges extends Component {
                       validate={(formData, errors) =>
                         this.validate(formData, errors, activeStep)
                       }
+                      validator={validator}
                       transformErrors={this.transformErrors(this.props.intl)}
                       widgets={{
                         SelectWidget: CustomSelectWidget,

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Schemas/DataSourceSchema.js

@@ -124,7 +124,7 @@ export const jsSchema = (
         intl.formatMessage(messages.overpassQLLabel),
         intl.formatMessage(messages.localGeoJsonLabel),
         intl.formatMessage(messages.remoteGeoJsonLabel),
-      ],
+    ],
       default: "Overpass Query",
     };
 
@@ -136,7 +136,7 @@ export const jsSchema = (
         enumNames: [
           intl.formatMessage(messages.yesLabel),
           intl.formatMessage(messages.noLabel),
-        ],      
+      ],   
       };
     }
 
@@ -207,7 +207,7 @@ export const uiSchema = (
       "ui:readonly": sourceReadOnly,
     },
     overpassTargetType: {
-      classNames: "",
+      'ui:classNames': "",
       "ui:widget": "select",
       "ui:options": { inline: true },
     },

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Schemas/PrioritiesSchema.js

@@ -181,14 +181,14 @@ export const jsSchema = (intl) => {
  * @private
  */
 const priorityRuleGroupUISchema = (isCollapsed) => ({
-  classNames: "priority-rule-group",
+  'ui:classNames': "priority-rule-group",
   condition: {
     "ui:widget": "select",
   },
   rules: {
     items: {
       "ui:options": { inline: true, label: false },
-      classNames: "priority-rule",
+      'ui:classNames': "priority-rule",
       keyType: {
         "ui:widget": "select",
         "ui:displayLabel": false,
@@ -215,7 +215,7 @@ const priorityRuleGroupUISchema = (isCollapsed) => ({
         "ui:collapsed": isCollapsed,
       },
       ruleGroup: {
-        classNames: "nested-rule-group mr-border mr-border-white-25 mr-p-2 mr-mt-4 mr-flex mr-w-full",
+        'ui:classNames': "nested-rule-group mr-border mr-border-white-25 mr-p-2 mr-mt-4 mr-flex mr-w-full",
         rules: {
           items: {
             key: {
@@ -229,7 +229,7 @@ const priorityRuleGroupUISchema = (isCollapsed) => ({
               "ui:collapsed": isCollapsed,
             },
             ruleGroup: {
-              classNames: "nested-rule-group mr-border mr-border-white-25 mr-p-2 mr-mt-4 mr-flex mr-w-full",
+              'ui:classNames': "nested-rule-group mr-border mr-border-white-25 mr-p-2 mr-mt-4 mr-flex mr-w-full",
               rules: {
                 items: {
                   key: {

src/components/AdminPane/Manage/ManageTasks/EditTask/EditTask.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import Form from '@rjsf/core'
+import validator from "@rjsf/validator-ajv8";
 import _merge from 'lodash/merge'
 import _get from 'lodash/get'
 import _isObject from 'lodash/isObject'
@@ -191,6 +192,7 @@ export class EditTask extends Component {
                 widgets={{SelectWidget: CustomSelectWidget}}
                 className="form"
                 fields={customFields}
+                validator={validator}
                 liveValidate
                 noHtml5Validate
                 showErrorList={false}

src/components/ChallengePane/ChallengePane.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .challenge-pane {
   $tablet-break: 900px;

src/components/Custom/Menu.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 aside.menu {
   ul.menu-list {

src/components/Custom/SimpleDropdown.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .SimpleDropdown {
   .dropdown-trigger {

src/components/Custom/Steps.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 $inactiveColor: #EEE;
 $activeColor: #47725F;

src/components/CustomUrlList/EditCustomUrl.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import Form from '@rjsf/core'
+import validator from "@rjsf/validator-ajv8";
 import { FormattedMessage } from 'react-intl'
 import { jsSchema, uiSchema } from './UrlSchema'
 import messages from './Messages'
@@ -17,6 +18,7 @@ export const EditCustomUrl = props => {
       uiSchema={uiSchema(props.intl)}
       className="form"
       liveValidate
+      validator={validator}
       noHtml5Validate
       showErrorList={false}
       formData={Object.assign({}, props.url, urlFields)}

src/components/EnhancedMap/LassoSelectionControl/LassoSelectionControl.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .fit-bounds-control {
   svg {

src/components/HomePane/HomePane.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .home-pane {
   background-color: $green;

src/components/MapillaryViewer/MapillaryViewer.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../../variables.scss";
 
 .mapillary-viewer {
   .message-header {

src/components/MobileFilterMenu/MobileFilterMenu.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 .mobile-filter-menu {
   padding: 8px 10px;

src/components/Ribbon/Ribbon.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../variables.scss';
 
 $ribbon-color: lighten($primary, 10%);
 

src/components/TaskPane/ActiveTaskDetails/KeyboardShortcutReference/KeyboardShortcutReference.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../../variables.scss';
 
 .active-task-details__keyboard-reference {
   margin-top: 5px;

src/components/TaskPane/TaskManageControls/TaskManageControls.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .active-task-controls__task-manage-controls {
   text-align: center;

src/components/TaskPropertyQueryBuilder/TaskPropertyQueryBuilder.js

@@ -1,6 +1,7 @@
 import React, { Component, createRef } from 'react'
 import { FormattedMessage, injectIntl } from 'react-intl'
 import Form from '@rjsf/core'
+import validator from "@rjsf/validator-ajv8";
 import { CustomSelectWidget }
        from '../Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter'
 import _get from 'lodash/get'
@@ -238,6 +239,7 @@ export class TaskPropertyQueryBuilder extends Component {
           tagType={"taskProperties"}
           widgets={{SelectWidget: CustomSelectWidget}}
           noHtml5Validate
+          validator={validator}
           showErrorList={false}
           formData={data}
           onChange={this.changeHandler}

src/components/Teams/EditTeam/EditTeam.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useMutation } from '@apollo/client'
 import Form from '@rjsf/core'
+import validator from "@rjsf/validator-ajv8";
 import { FormattedMessage } from 'react-intl'
 import _isFinite from 'lodash/isFinite'
 import _isEmpty from 'lodash/isEmpty'
@@ -30,6 +31,7 @@ export const EditTeam = props => {
       uiSchema={uiSchema(props.intl)}
       className="form"
       liveValidate
+      validator={validator}
       noHtml5Validate
       showErrorList={false}
       formData={Object.assign({}, props.team, teamFields)}

src/pages/Profile/UserSettings/UserSettings.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { FormattedMessage, injectIntl } from "react-intl";
 import Form from "@rjsf/core";
+import validator from "@rjsf/validator-ajv8";
 import _each from "lodash/each";
 import _get from "lodash/get";
 import _pick from "lodash/pick";
@@ -305,6 +306,7 @@ class UserSettings extends Component {
           className="form form--2-col"
           liveValidate
           noHtml5Validate
+          validator={validator}
           showErrorList={false}
           validate={this.validate}
           formData={userSettings}
@@ -330,6 +332,7 @@ class UserSettings extends Component {
           widgets={{ SelectWidget: CustomSelectWidget}}
           className="form form--modified-2-col"
           liveValidate
+          validator={validator}
           transformErrors={notificationTransformErrors(this.props.intl)}
           noHtml5Validate
           showErrorList={false}

yarn.lock

@@ -2568,6 +2568,16 @@
     lodash-es "^4.17.21"
     react-is "^18.2.0"
 
+"@rjsf/validator-ajv8@^5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@rjsf/validator-ajv8/-/validator-ajv8-5.14.3.tgz#3c4306e2411e9fb046a73b511353118acfd19aff"
+  integrity sha512-aQU/vXL4zJ1OknIECz9Jj/Aq3ndGzyuFjO5fou1JhZQjk30lqxaivE2LfdX4DdEdZUDHghnx+AzalWw6iVcTCA==
+  dependencies:
+    ajv "^8.12.0"
+    ajv-formats "^2.1.1"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -3985,7 +3995,7 @@ ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0:
+ajv@^8.0.0, ajv@^8.12.0, ajv@^8.6.0, ajv@^8.9.0:
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==