Merge pull request #4459 from hotosm/develop

v4.4.3 Release
hotosm · Mar 30, 2021 · fa14d8f · fa14d8f
2 parents 8372c16 + f13c709
commit fa14d8f
Show file tree

Hide file tree

Showing 70 changed files with 1,724 additions and 1,012 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,7 +4,7 @@
   "license": "BSD-2-Clause",
   "private": false,
   "dependencies": {
-    "@formatjs/intl-locale": "^2.4.20",
+    "@formatjs/intl-locale": "^2.4.21",
     "@formatjs/intl-pluralrules": "^4.0.12",
     "@formatjs/intl-relativetimeformat": "^8.1.3",
     "@formatjs/macro": "^0.2.8",
@@ -17,8 +17,8 @@
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@mapbox/togeojson": "^0.16.0",
     "@reach/router": "^1.3.4",
-    "@sentry/react": "^6.2.2",
-    "@sentry/tracing": "^6.2.2",
+    "@sentry/react": "^6.2.3",
+    "@sentry/tracing": "^6.2.3",
     "@turf/area": "^6.3.0",
     "@turf/bbox": "^6.3.0",
     "@turf/bbox-polygon": "^6.3.0",
@@ -41,22 +41,22 @@
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "marked": "^2.0.1",
     "osmtogeojson": "^3.0.0-beta.3",
-    "query-string": "^6.14.1",
-    "react": "^17.0.1",
+    "query-string": "^7.0.0",
+    "react": "^17.0.2",
     "react-accessible-accordion": "^3.3.4",
     "react-calendar-heatmap": "^1.8.1",
     "react-chartjs-2": "^2.11.1",
     "react-click-outside": "^3.0.1",
     "react-datepicker": "^3.6.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.1",
-    "react-final-form": "^6.5.2",
-    "react-intl": "^5.13.0",
+    "react-final-form": "^6.5.3",
+    "react-intl": "^5.15.5",
     "react-meta-elements": "^1.0.0",
     "react-placeholder": "^4.1.0",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.3",
     "react-scripts": "^4.0.3",
-    "react-select": "^4.2.1",
+    "react-select": "^4.3.0",
     "react-tooltip": "^4.2.13",
     "reactjs-popup": "^1.5.0",
     "redux": "^4.0.5",
@@ -66,7 +66,7 @@
     "shpjs": "^3.6.3",
     "slug": "^4.0.3",
     "tachyons": "^4.12.0",
-    "use-query-params": "^1.2.0",
+    "use-query-params": "^1.2.2",
     "webfontloader": "^1.6.28",
     "workbox-core": "^6.1.2",
     "workbox-expiration": "^6.1.2",
@@ -104,16 +104,16 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.4",
     "@testing-library/react-hooks": "^5.1.0",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/user-event": "^13.1.1",
     "combine-react-intl-messages": "^4.0.0",
     "jest-canvas-mock": "^2.3.1",
-    "msw": "^0.27.1",
+    "msw": "^0.28.0",
     "prettier": "^2.2.1",
-    "react-select-event": "^5.2.0",
-    "react-test-renderer": "^17.0.1",
+    "react-select-event": "^5.3.0",
+    "react-test-renderer": "^17.0.2",
     "source-map-explorer": "^2.5.2"
   },
   "jest": {

diff --git a/frontend/src/components/button.js b/frontend/src/components/button.js
@@ -1,16 +1,21 @@
 import React from 'react';
 import { Link } from '@reach/router';
 
-export function Button({ onClick, children, className, disabled }: Object) {
+import { LoadingIcon } from './svgIcons';
+
+export function Button({ onClick, children, className, disabled, loading = false }: Object) {
   return (
     <button
       onClick={onClick}
       aria-pressed="false"
       focusindex="0"
-      className={`${className || ''} br1 f5 bn ${disabled ? 'o-50' : 'pointer'}`}
+      className={`${className || ''} br1 f5 bn ${disabled || loading ? 'o-50' : 'pointer'}`}
       style={{ padding: '.75rem 1.5rem' }}
-      disabled={disabled}
+      disabled={disabled || loading}
     >
+      {loading && (
+        <LoadingIcon className="h1 w1 v-mid mr2" style={{ animation: 'spin 1s linear infinite' }} />
+      )}
       {children}
     </button>
   );
@@ -33,15 +38,18 @@ export function FormSubmitButton({ children, className, disabledClassName, disab
   );
 }
 
-export function CustomButton({ onClick, children, className, disabled }: Object) {
+export function CustomButton({ onClick, children, className, disabled, loading = false }: Object) {
   return (
     <button
       onClick={onClick}
       aria-pressed="false"
       focusindex="0"
-      className={`${className || ''} br1 f5 ${disabled ? 'o-50' : 'pointer'}`}
-      disabled={disabled}
+      className={`${className || ''} br1 f5 ${disabled || loading ? 'o-50' : 'pointer'}`}
+      disabled={disabled || loading}
     >
+      {loading && (
+        <LoadingIcon className="h1 w1 v-mid mr2" style={{ animation: 'spin 1s linear infinite' }} />
+      )}
       {children}
     </button>
   );

diff --git a/frontend/src/components/contributions/tests/taskCard.test.js b/frontend/src/components/contributions/tests/taskCard.test.js
@@ -84,7 +84,8 @@ describe('TaskCard', () => {
           taskStatus={'LOCKED_FOR_VALIDATION'}
           lockHolder={'user_1'}
           taskHistory={[]}
-          lastUpdated={'2021-01-22T12:59:37.238281Z'}
+          lastUpdated={new Date()}
+          autoUnlockSeconds={120 * 60}
         />
       </ReduxIntlProviders>,
     );

diff --git a/frontend/src/components/editor.js b/frontend/src/components/editor.js
@@ -5,7 +5,7 @@ import '@hotosm/id/dist/iD.css';
 
 import { OSM_CONSUMER_KEY, OSM_CONSUMER_SECRET, OSM_SERVER_URL } from '../config';
 
-export default function Editor({ setDisable, comment, presets, imageryUrl, gpxUrl }) {
+export default function Editor({ setDisable, comment, presets, imagery, gpxUrl }) {
   const dispatch = useDispatch();
   const session = useSelector((state) => state.auth.get('session'));
   const iDContext = useSelector((state) => state.editor.context);
@@ -16,13 +16,20 @@ export default function Editor({ setDisable, comment, presets, imageryUrl, gpxUr
     iDContext && iDContext.background() && iDContext.background().findSource('custom');
 
   useEffect(() => {
-    if (!customImageryIsSet && imageryUrl && customSource) {
-      iDContext.background().baseLayerSource(customSource.template(imageryUrl));
-      setCustomImageryIsSet(true);
-      // this line is needed to update the value on the custom background dialog
-      window.iD.prefs('background-custom-template', imageryUrl);
+    if (!customImageryIsSet && imagery && customSource) {
+      if (imagery.startsWith('http')) {
+        iDContext.background().baseLayerSource(customSource.template(imagery));
+        setCustomImageryIsSet(true);
+        // this line is needed to update the value on the custom background dialog
+        window.iD.prefs('background-custom-template', imagery);
+      } else {
+        const imagerySource = iDContext.background().findSource(imagery);
+        if (imagerySource) {
+          iDContext.background().baseLayerSource(imagerySource);
+        }
+      }
     }
-  }, [customImageryIsSet, imageryUrl, iDContext, customSource]);
+  }, [customImageryIsSet, imagery, iDContext, customSource]);
 
   useEffect(() => {
     return () => {

diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
@@ -57,8 +57,7 @@ const UserDisplay = ({ username }) => {
   );
 };
 
-const AuthButtons = (props) => {
-  const { logInStyle, signUpStyle, redirectTo } = props;
+const AuthButtons = ({ logInStyle, signUpStyle, redirectTo, alternativeSignUpText = false }) => {
   const [debouncedCreateLoginWindow] = useDebouncedCallback(
     (redirectToPass) => createLoginWindow(redirectToPass),
     3000,
@@ -73,7 +72,11 @@ const AuthButtons = (props) => {
       <Popup
         trigger={
           <Button className={signUpStyle}>
-            <FormattedMessage {...messages.signUp} />
+            {alternativeSignUpText ? (
+              <FormattedMessage {...messages.createAccount} />
+            ) : (
+              <FormattedMessage {...messages.signUp} />
+            )}
           </Button>
         }
         modal
@@ -207,7 +210,6 @@ class Header extends React.Component {
       <div className="dib">
         <LocaleSelector className="bn dn dib-66rem" />
         <AuthButtons
-          aStyle="mh1 v-mid dn dib-ns"
           logInStyle="blue-dark bg-white"
           signUpStyle="bg-blue-dark white ml1 v-mid dn dib-ns"
           redirectTo={this.props.location.pathname}

diff --git a/frontend/src/components/header/messages.js b/frontend/src/components/header/messages.js
@@ -31,6 +31,10 @@ export default defineMessages({
     id: 'header.buttons.signUp',
     defaultMessage: 'Sign up',
   },
+  createAccount: {
+    id: 'header.buttons.createAccount',
+    defaultMessage: 'Create an account',
+  },
   authorize: {
     id: 'header.buttons.authorize',
     defaultMessage: 'Log in',
@@ -67,15 +71,15 @@ export default defineMessages({
   proceedOSMPart1: {
     id: 'signup.proceed_osm.text1',
     defaultMessage:
-      "The Tasking Manager works with OpenStreetMap, a collaborative, open-source map of the world. Everything you map on the Tasking Manager is going to be available on OpenStreetMap.",
+      'The Tasking Manager works with OpenStreetMap, a collaborative, open-source map of the world. Everything you map on the Tasking Manager is going to be available on OpenStreetMap.',
   },
   proceedOSMPart2: {
     id: 'signup.proceed_osm.text2',
     defaultMessage: "First, you'll need an account on OpenStreetMap.org in order to get started.",
   },
   proceedOSMLogin: {
     id: 'signup.proceed_osm.login',
-    defaultMessage: "I already have an OpenStreetMap account",
+    defaultMessage: 'I already have an OpenStreetMap account',
   },
   emailPlaceholder: {
     id: 'input.placeholder.email_address',
@@ -119,7 +123,7 @@ export default defineMessages({
   },
   submitProceedOSM: {
     id: 'signup.button.submit_osm',
-    defaultMessage: "Create OpenStreetMap account",
+    defaultMessage: 'Create OpenStreetMap account',
   },
   signUpQuestion: {
     id: 'signup.modal.question',

diff --git a/frontend/src/components/header/tests/authButtons.test.js b/frontend/src/components/header/tests/authButtons.test.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { ReduxIntlProviders } from '../../../utils/testWithIntl';
+import { AuthButtons } from '../index';
+
+describe('AuthButtons', () => {
+  it('without alternativeSignUpText', () => {
+    render(
+      <ReduxIntlProviders>
+        <AuthButtons
+          logInStyle="blue-dark bg-white"
+          signUpStyle="bg-blue-dark white ml1 v-mid"
+          redirectTo={'/welcome'}
+        />
+      </ReduxIntlProviders>,
+    );
+    expect(screen.getByText('Log in').className).toContain('blue-dark bg-white');
+    expect(screen.getByText('Sign up').className).toContain('bg-blue-dark white ml1 v-mid');
+    expect(screen.queryByText('Create an account')).not.toBeInTheDocument();
+    expect(screen.queryByText('Name')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('Sign up'));
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getByText('Next')).toBeInTheDocument();
+  });
+  it('with alternativeSignUpText', () => {
+    render(
+      <ReduxIntlProviders>
+        <AuthButtons
+          logInStyle="white bg-red"
+          signUpStyle="bg-orange black ml1 v-mid"
+          redirectTo={'/welcome'}
+          alternativeSignUpText={true}
+        />
+      </ReduxIntlProviders>,
+    );
+    expect(screen.getByText('Log in').className).toContain('white bg-red');
+    expect(screen.getByText('Create an account').className).toContain('bg-orange black ml1 v-mid');
+    expect(screen.queryByText('Sign up')).not.toBeInTheDocument();
+    expect(screen.queryByText('Name')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('Create an account'));
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getByText('Next')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/homepage/contactForm.js b/frontend/src/components/homepage/contactForm.js
@@ -4,13 +4,13 @@ import { Form, Field } from 'react-final-form';
 import messages from './messages';
 import { FormSubmitButton } from '../button';
 
-export const ContactForm = props => {
+export const ContactForm = (props) => {
   const labelClasses = 'db pt3 pb2';
   const fieldClasses = 'blue-grey w-100 pv3 ph2 input-reset ba b--grey-light bg-transparent';
 
   return (
     <Form
-      onSubmit={values => props.submitMessage(values)}
+      onSubmit={(values) => props.submitMessage(values)}
       initialValues={props.contactUsValues}
       render={({ handleSubmit, pristine, form, submitting, values }) => {
         return (
@@ -19,7 +19,7 @@ export const ContactForm = props => {
               <h3 className="f3 fw6 dib blue-dark mv0">
                 <FormattedMessage {...messages.contacterTitle} />
               </h3>
-              <div>
+              <div className="pt3">
                 <FormattedMessage {...messages.contacterHeaderText} />
               </div>
               <form id="contact-form" onSubmit={handleSubmit}>

diff --git a/frontend/src/components/projectCard/dueDateBox.js b/frontend/src/components/projectCard/dueDateBox.js
@@ -27,24 +27,24 @@ export function DueDateBox({ dueDate, intervalMili, align = 'right', tooltipMsg
 
   let options = { language: intl.locale.slice(0, 2), fallbacks: ['en'], largest: 1 };
 
-  let className = `dib relative lh-solid f7 tr ${
-    align === 'right' ? 'fr' : 'fl'
-  } br1 link ph1 pv2 bg-grey-light blue-grey truncate mw4`;
-
   if (intervalMili !== undefined) {
-    className = className.replace('mw4', '');
     options = { units: ['h', 'm'], round: true };
   }
-
   const milliDifference = new Date(dueDate) - timer;
-  if (milliDifference < 60000 * 20 && intervalMili !== undefined) {
-    className = className.replace('bg-grey-light', 'bg-red').replace('blue-grey', 'white');
-  }
 
   if (milliDifference > 0) {
     return (
       <>
-        <span className={className} data-tip={tooltipMsg}>
+        <span
+          className={`dib relative lh-solid f7 tr br1 link ph1 pv2 truncate ${
+            align === 'right' ? 'fr' : 'fl'
+          } ${
+            milliDifference < 60000 * 20 && intervalMili !== undefined
+              ? 'bg-red white fw6'
+              : 'bg-grey-light blue-grey'
+          } ${intervalMili ? '' : 'mw4'}`}
+          data-tip={tooltipMsg}
+        >
           <span>
             <ClockIcon className="absolute pl1 top-0 pt1 left-0" />
           </span>