Bulk update dependencies (#2402)

* chore(deps): remove @babel/plugin-proposal-class-properties

* chore: update fontawesome

* chore: update octicons, auth and monitoring packages

* chore(deps): update husky@8.x, skip install on heroku

* chore: bump commitlint

* test(PaletteContainer): update snapshot from upgrading fontawesome

* chore: update eslint

* chore: bump prettier

* chore: prettier formatting

* chore: update stylelint, remove use of optimizeLegibility css

* chore: update browserslist

* chore: update testing-library packages

* chore: update jest@28 and others

- must now install jest-environment-jsdom manually
- add resolver config to work around uuid/nanoid export incompatibility with jest
- jsdom now handles native form input validation, so we remove manual validation code

app.json

@@ -21,6 +21,10 @@
     "CYPRESS_INSTALL_BINARY": {
       "description": "Skip installing Cypress in deployment environments. See https://docs.cypress.io/guides/getting-started/installing-cypress.html#Skipping-installation",
       "value": "0"
+    },
+    "HUSKY": {
+      "description": "Skip installing Husky (v8+).",
+      "value": "0"
     }
   },
   "addons": [

app/controllers/auth0_sign_in_callback.js

@@ -107,7 +107,7 @@ exports.get = function (req, res) {
     grant_type: 'authorization_code',
     client_id: process.env.AUTH0_CLIENT_ID,
     client_secret: process.env.AUTH0_CLIENT_SECRET,
-    code: code,
+    code,
     redirect_uri: redirectUri
   }
 

app/db/migrations/20210506170155-update-user-profile-url.js

@@ -36,16 +36,24 @@ module.exports = {
     //
     // Apologies for the raw SQL. If Sequelize has an interface for this query,
     // please do replace.
-    return queryInterface.sequelize.transaction(t => {
+    return queryInterface.sequelize.transaction((t) => {
       return Promise.all([
-        queryInterface.sequelize.query(`
+        queryInterface.sequelize.query(
+          `
           UPDATE "Users"
           SET profile_image_url = profile_image_url::varchar(255)
           WHERE CHAR_LENGTH(profile_image_url) > 255
-        `, { transaction: t }),
-        queryInterface.changeColumn('Users', 'profile_image_url', {
-          type: Sequelize.STRING
-        }, { transaction: t })
+        `,
+          { transaction: t }
+        ),
+        queryInterface.changeColumn(
+          'Users',
+          'profile_image_url',
+          {
+            type: Sequelize.STRING
+          },
+          { transaction: t }
+        )
       ])
     })
   }

app/resources/services/images.js

@@ -48,7 +48,7 @@ exports.get = async function (req, res) {
   }
 
   const payload = {
-    signature: signature,
+    signature,
     timestamp: query.timestamp,
     api_key: process.env.CLOUDINARY_API_KEY
   }

app/resources/services/integrations/coil.js

@@ -151,7 +151,7 @@ exports.BTPTokenCheck = async (req, res, next) => {
     addOrUpdateByProviderName(identities, coilData)
     await User.update(
       {
-        identities: identities
+        identities
       },
       { where: { auth0Id: userData.auth0Id }, returning: true }
     )
@@ -186,7 +186,7 @@ const refreshAccessToken = async (refreshToken) => {
         Authorization: `Basic ${encodedAuth}`,
         'content-type': 'application/x-www-form-urlencoded'
       },
-      data: data
+      data
     }
     const response = await axios(requestConfig)
     return response.data.access_token

app/resources/services/integrations/helpers.js

@@ -74,7 +74,7 @@ function addUserConnection (account, profile) {
     // be removed.
     await User.update(
       {
-        identities: identities
+        identities
       },
       { where: { auth0Id: account.auth0Id }, returning: true, transaction: t }
     )

app/resources/v1/__tests__/flags.test.js

@@ -13,7 +13,9 @@ describe('get api/v1/flags', function () {
       .get('/api/v1/flags')
       .then((response) => {
         expect(response.statusCode).toEqual(200)
-        expect(response.get('Content-Type').toLowerCase()).toEqual('application/json; charset=utf-8')
+        expect(response.get('Content-Type').toLowerCase()).toEqual(
+          'application/json; charset=utf-8'
+        )
         expect(response.body.GEOTAG.label).toEqual('UI — Geotagging')
       })
   })

app/resources/v1/__tests__/translate.test.js

@@ -17,8 +17,12 @@ describe('get api/v1/translate', function () {
       .get('/api/v1/translate/en/main')
       .then((response) => {
         expect(response.statusCode).toEqual(200)
-        expect(response.get('Content-Type').toLowerCase()).toEqual('application/json; charset=utf-8')
-        expect(response.body.dialogs.welcome.heading).toEqual('Welcome to Streetmix.')
+        expect(response.get('Content-Type').toLowerCase()).toEqual(
+          'application/json; charset=utf-8'
+        )
+        expect(response.body.dialogs.welcome.heading).toEqual(
+          'Welcome to Streetmix.'
+        )
       })
   })
 

app/resources/v1/geo.js

@@ -32,7 +32,7 @@ exports.get = async function (req, res) {
       type: 'Feature',
       geometry: {
         type: 'Point',
-        coordinates: coordinates
+        coordinates
       },
       properties: result
     }

app/resources/v1/street_images.js

@@ -53,7 +53,7 @@ exports.post = async function (req, res) {
   const details = {
     public_id: publicId,
     street_type: streetType,
-    creatorId: creatorId,
+    creatorId,
     edit_count: editCount
   }
 

app/resources/v1/streets.js

@@ -305,13 +305,13 @@ exports.find = async function (req, res) {
       throw new Error(ERRORS.USER_NOT_FOUND)
     }
     return Street.findOne({
-      where: { namespacedId: namespacedId, creatorId: user.id }
+      where: { namespacedId, creatorId: user.id }
     })
   } // END function - findStreetWithCreatorId
 
   const findStreetWithNamespacedId = async function (namespacedId) {
     return Street.findOne({
-      where: { namespacedId: namespacedId, creatorId: null }
+      where: { namespacedId, creatorId: null }
     })
   }
 
@@ -376,7 +376,7 @@ exports.find = async function (req, res) {
           self: selfUri
         }
       },
-      streets: streets
+      streets
     }
 
     if (start > 0) {

app/resources/v1/users.js

@@ -162,7 +162,7 @@ exports.post = async function (req, res) {
         } else {
           const id = generateId(credentials.nickname)
           const newUserData = {
-            id: id,
+            id,
             auth0Id: credentials.auth0Id,
             email: credentials.email,
             profileImageUrl: credentials.profileImageUrl

app/resources/v1/users_streets.js

@@ -60,7 +60,7 @@ exports.get = async function (req, res) {
   } // END function - handleFindUserstreets
 
   const handleFindUserStreets = function (streets) {
-    const json = { streets: streets }
+    const json = { streets }
     res.status(200).json(json).end()
   } // END function - handleFindUserStreets
 

app/resources/v1/votes.js

@@ -201,7 +201,7 @@ exports.put = async function (req, res) {
     return
   }
   const ballot = await Vote.findOne({
-    where: { id: id, voter_id: user.id }
+    where: { id, voter_id: user.id }
   })
 
   if (!ballot) {
@@ -295,7 +295,7 @@ exports.post = async function (req, res) {
     res.status(500).json({ status: 500, msg: 'Error filling ballot.' })
     return
   }
-  const payload = { ballot, savedBallot, updates: updates }
+  const payload = { ballot, savedBallot, updates }
 
   res.status(200).json(payload)
 }

assets/scripts/app/DateTimeRelative.jsx

@@ -13,9 +13,9 @@ const SECONDS_AGO = 1000 * 60
  */
 function isSameDay (a, b) {
   return (
-    (a.getFullYear() === b.getFullYear()) &&
-    (a.getMonth() === b.getMonth()) &&
-    (a.getDate() === b.getDate())
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
   )
 }
 
@@ -28,15 +28,21 @@ export default function DateTimeRelative (props) {
     if (diff < SECONDS_AGO) {
       return (
         <time dateTime={props.value} title={props.value}>
-          <FormattedMessage id="datetime.seconds-ago" defaultMessage="A few seconds ago" />
+          <FormattedMessage
+            id="datetime.seconds-ago"
+            defaultMessage="A few seconds ago"
+          />
         </time>
       )
     }
 
     if (diff < MINUTES_AGO) {
       return (
         <time dateTime={props.value} title={props.value}>
-          <FormattedMessage id="datetime.minutes-ago" defaultMessage="A few minutes ago" />
+          <FormattedMessage
+            id="datetime.minutes-ago"
+            defaultMessage="A few minutes ago"
+          />
         </time>
       )
     }
@@ -90,11 +96,7 @@ export default function DateTimeRelative (props) {
   if (now.getFullYear() === date.getFullYear()) {
     return (
       <time dateTime={props.value} title={props.value}>
-        <FormattedDate
-          value={props.value}
-          month="long"
-          day="numeric"
-        />
+        <FormattedDate value={props.value} month="long" day="numeric" />
       </time>
     )
   }
@@ -114,12 +116,22 @@ export default function DateTimeRelative (props) {
 DateTimeRelative.propTypes = {
   // prop should match an ISO date string, e.g. "2018-04-24T23:37:55.21Z"
   value: (props, propName, componentName) => {
-    if (!/^\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+Z$/.test(props[propName]) &&
-      typeof props[propName] !== 'undefined') {
+    if (
+      !/^\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+Z$/.test(
+        props[propName]
+      ) &&
+      typeof props[propName] !== 'undefined'
+    ) {
       return new Error(
-        'Invalid prop `' + propName + '` supplied to' +
-        ' `' + componentName + '`. It should be an ISO date string.' +
-        ' Validation failed. Value: `' + props[propName] + '`'
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. It should be an ISO date string.' +
+          ' Validation failed. Value: `' +
+          props[propName] +
+          '`'
       )
     }
   },

assets/scripts/app/Flash.jsx

@@ -38,9 +38,7 @@ const Flash = (props) => {
     }
   })
 
-  return (
-    <div className="flash" ref={el} />
-  )
+  return <div className="flash" ref={el} />
 }
 
 export default Flash

assets/scripts/app/StreetView.jsx

@@ -124,7 +124,7 @@ class StreetView extends React.Component {
     )
 
     if (marginUpdated) {
-      this.setState({ resizeType: resizeType })
+      this.setState({ resizeType })
     }
   }
 

assets/scripts/app/StreetViewDirt.jsx

@@ -10,8 +10,8 @@ function getDirtElementHeight () {
 
 const StreetViewDirt = ({ buildingWidth }) => {
   const dirtStyle = {
-    marginLeft: (-buildingWidth) + 'px',
-    marginRight: (-buildingWidth) + 'px',
+    marginLeft: -buildingWidth + 'px',
+    marginRight: -buildingWidth + 'px',
     height: getDirtElementHeight() + 'px'
   }
   const width = `${buildingWidth}px`

assets/scripts/app/WelcomePanel.jsx

@@ -44,10 +44,8 @@ const LOCAL_STORAGE_RETURNING_USER = 'settings-welcome-dismissed'
 
 function WelcomePanel (props) {
   const { readOnly, everythingLoaded } = useSelector((state) => state.app)
-  const {
-    welcomePanelVisible: isVisible,
-    welcomePanelDismissed: isDismissed
-  } = useSelector((state) => state.ui)
+  const { welcomePanelVisible: isVisible, welcomePanelDismissed: isDismissed } =
+    useSelector((state) => state.ui)
   const dispatch = useDispatch()
   const [welcomeType, setWelcomeType] = useState(WELCOME_NONE)
   const [isReturningUser, setIsReturningUser] = useState(

assets/scripts/app/__mocks__/load_resources.js

@@ -6,16 +6,17 @@ const loadImages = (id) => {
   const width = 96
   const height = 96
   const viewBox = '0 0 96 96'
-  const symbolHTML = '<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" id="image-markings--straight-inbound"><path d="M53.538 53.253V19.865H42.862v33.388H31.7l16.5 23.682 16.5-23.682H53.538z" fill="#fff" fill-rule="nonzero"/></symbol></svg>'
+  const symbolHTML =
+    '<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" id="image-markings--straight-inbound"><path d="M53.538 53.253V19.865H42.862v33.388H31.7l16.5 23.682 16.5-23.682H53.538z" fill="#fff" fill-rule="nonzero"/></symbol></svg>'
   const svgHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" width="${width}" height="${height}">${symbolHTML}</svg>`
   const src = 'data:image/svg+xml;base64,' + window.btoa(svgHTML)
 
   const img = new window.Image()
   img.src = src
   images.set(id, {
-    img: img,
-    width: width,
-    height: height
+    img,
+    width,
+    height
   })
 }
 loadImages('markings--straight-inbound')

assets/scripts/app/__tests__/BlockingError.test.js

@@ -7,7 +7,7 @@ import { ERRORS } from '../errors'
 function getInitialState (errorType) {
   return {
     errors: {
-      errorType: errorType
+      errorType
     },
     street: {
       creatorId: 'foo'

assets/scripts/app/__tests__/NotificationBar.test.js

@@ -8,8 +8,7 @@ import NotificationBar from '../NotificationBar'
 const TEST_NOTIFICATION = {
   display: true,
   lede: 'Heads up!',
-  text:
-    'Streetmix will be offline for maintainance on January 1, 2025 at 19:00 GMT.',
+  text: 'Streetmix will be offline for maintainance on January 1, 2025 at 19:00 GMT.',
   link: 'https://twitter.com/streetmix/',
   linkText: 'Follow us on Twitter for updates.'
 }

assets/scripts/app/__tests__/StreetEditable.test.js

@@ -62,12 +62,7 @@ describe('StreetEditable', () => {
     describe('too large', () => {
       it('Pressing `+` does not increase the width of the segment', async () => {
         const street = { width: 400, segments: [segment] }
-        const {
-          getByTestId,
-          store,
-          container,
-          asFragment
-        } = render(
+        const { getByTestId, store, container, asFragment } = render(
           <StreetEditable
             setBuildingWidth={setBuildingWidth}
             updatePerspective={updatePerspective}

assets/scripts/app/blocking_shield.js

@@ -1,9 +1,15 @@
 export function showBlockingShield (mode = 'load') {
-  window.dispatchEvent(new window.CustomEvent('stmx:show_blocking_shield', { detail: { mode } }))
+  window.dispatchEvent(
+    new window.CustomEvent('stmx:show_blocking_shield', { detail: { mode } })
+  )
 }
 
 export function darkenBlockingShield (showCancel = false) {
-  window.dispatchEvent(new window.CustomEvent('stmx:darken_blocking_shield', { detail: { showCancel: !!showCancel } }))
+  window.dispatchEvent(
+    new window.CustomEvent('stmx:darken_blocking_shield', {
+      detail: { showCancel: !!showCancel }
+    })
+  )
 }
 
 export function hideBlockingShield () {

assets/scripts/app/load_resources.js

@@ -175,8 +175,8 @@ function cacheSVGObject (id, svg, svgHTML) {
   // Store properties on svg cache, using its simplified id as the key
   images.set(id, {
     el: svg,
-    src: src,
-    img: img,
+    src,
+    img,
     width: svg.viewBox.baseVal.width,
     height: svg.viewBox.baseVal.height
   })