Merge branch 'develop' into replace

Author: lindapaiste

README.md

@@ -29,7 +29,7 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 ### How Do I Know My Issue or Pull Request is Getting Reviewed?
 
-To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/9), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
+To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/10), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
 
 Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
 
@@ -38,11 +38,9 @@ Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones
 
 We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
 
-MINOR Release for [p5.js version 1.8.0](https://github.com/processing/p5.js/releases/tag/v1.8.0): By October 27, 2023
+2.9.3 PATCH Release: By November 17, 2023
 
-PATCH Release: By November 2, 2023
-
-MINOR Release: By November 30, 2023
+2.10.0 MINOR Release: By December 15, 2023
 
 [You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
 

client/modules/IDE/actions/project.js

@@ -1,6 +1,6 @@
 import objectID from 'bson-objectid';
 import each from 'async/each';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash';
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import getConfig from '../../../utils/getConfig';

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
-// import find from 'lodash/find';
+// import { find } from 'lodash';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
 import * as ToastActions from '../actions/toast';

client/modules/IDE/components/AssetList.jsx

@@ -107,15 +107,16 @@ class AssetListRowBase extends React.Component {
                 </button>
               </li>
               <li>
-                <Link
-                  to={asset.url}
+                <a
+                  href={asset.url}
                   target="_blank"
+                  rel="noreferrer"
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                   className="asset-table__action-option"
                 >
                   {t('AssetList.OpenNewTab')}
-                </Link>
+                </a>
               </li>
             </ul>
           )}

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
-import find from 'lodash/find';
+import { find } from 'lodash';
 import * as ProjectActions from '../../actions/project';
 import * as ProjectsActions from '../../actions/projects';
 import * as CollectionsActions from '../../actions/collections';

client/modules/IDE/components/EditableInput.jsx

@@ -31,6 +31,9 @@ function EditableInput({
       inputRef.current?.focus();
     }
   }, [isEditing]);
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
 
   function beginEditing() {
     setIsEditing(true);

client/modules/IDE/components/Editor/index.jsx

@@ -594,7 +594,8 @@ Editor.propTypes = {
   linewrap: PropTypes.bool.isRequired,
   lintMessages: PropTypes.arrayOf(
     PropTypes.shape({
-      severity: PropTypes.string.isRequired,
+      severity: PropTypes.oneOf(['error', 'hint', 'info', 'warning'])
+        .isRequired,
       line: PropTypes.number.isRequired,
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired

client/modules/IDE/components/EditorAccessibility.jsx

@@ -37,7 +37,8 @@ const EditorAccessibility = ({ lintMessages = [] }) => {
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.arrayOf(
     PropTypes.shape({
-      severity: PropTypes.string.isRequired,
+      severity: PropTypes.oneOf(['error', 'hint', 'info', 'warning'])
+        .isRequired,
       line: PropTypes.number.isRequired,
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired

client/modules/IDE/components/EditorAccessibility.unit.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { render, screen } from '../../../test-utils';
+
+import EditorAccessibility from './EditorAccessibility';
+
+describe('<EditorAccessibility />', () => {
+  it('renders empty message with no lines', () => {
+    render(<EditorAccessibility lintMessages={[]} />);
+
+    expect(
+      screen.getByRole('listitem', {
+        description: 'There are no lint messages'
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders lint message', () => {
+    render(
+      <EditorAccessibility
+        lintMessages={[
+          {
+            severity: 'info',
+            line: '1',
+            message: 'foo',
+            id: '1a2b3c'
+          }
+        ]}
+      />
+    );
+
+    expect(
+      screen.queryByText('There are no lint messages')
+    ).not.toBeInTheDocument();
+
+    const listItem = screen.getByRole('listitem');
+    expect(listItem).toBeInTheDocument();
+    expect(listItem.textContent).toEqual('info in line1 :foo');
+  });
+});

client/modules/IDE/hooks/useKeyDownHandlers.js

@@ -1,4 +1,4 @@
-import mapKeys from 'lodash/mapKeys';
+import { mapKeys } from 'lodash';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef } from 'react';
 

client/modules/IDE/selectors/collections.js

@@ -1,7 +1,6 @@
 import { createSelector } from 'reselect';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
-import find from 'lodash/find';
-import orderBy from 'lodash/orderBy';
+import { find, orderBy } from 'lodash';
 import { DIRECTION } from '../actions/sorting';
 
 const getCollections = (state) => state.collections;

client/modules/IDE/selectors/projects.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
-import orderBy from 'lodash/orderBy';
+import { orderBy } from 'lodash';
 import { DIRECTION } from '../actions/sorting';
 
 const getSketches = (state) => state.sketches;

client/modules/Legal/components/PolicyContainer.jsx

@@ -7,6 +7,7 @@ import { remSize, prop } from '../../../theme';
 
 const PolicyContainerMain = styled.main`
   max-width: ${remSize(700)};
+  min-height: 100vh;
   margin: 0 auto;
   padding: ${remSize(10)};
   line-height: 1.5em;

client/modules/User/components/APIKeyList.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import orderBy from 'lodash/orderBy';
+import { orderBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
 import { APIKeyPropType } from './APIKeyForm';

client/styles/components/_account.scss

@@ -4,6 +4,12 @@
     background-color: getThemifyVariable('background-color');
   }
   min-height: 100%;
+
+  @media (max-width: 770px) {
+    .account-settings__header {
+      display: none;
+    }
+  }
 }
 
 .account-settings {
@@ -24,6 +30,16 @@
 
 .account__social-stack {
   display: flex;
+  @media (max-width: 770px) {
+    flex-direction: column;
+    align-items: center;
+    gap: #{15 / $base-font-size}rem;
+
+    button, a {
+      width: 100% !important;
+      margin-right: 0;
+    }
+  }
 }
 
 .account__social-stack > * {

client/styles/components/_form-container.scss

@@ -29,6 +29,7 @@
 
 .form-container__content {
 	height: 100%;
+	max-width: 90vw;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -59,6 +60,10 @@
 
 .form-container__divider {
 	padding: #{20 / $base-font-size}rem 0;
+
+	@media (max-width: 770px) {
+		text-align: center;
+	}
 }
 
 .form-container__logo-button {

client/styles/components/_forms.scss

@@ -56,14 +56,19 @@
 }
 
 .form__input {
-  max-width: 90vw;
-  width: #{360 / $base-font-size}rem;
+  min-width: #{355 / $base-font-size}rem;
+  width: 100%;
   height: #{40 / $base-font-size}rem;
   font-size: #{16 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable("form-input-text-color");
     background-color: getThemifyVariable("input-background-color");
   }
+
+  @media (max-width: 770px) {
+    max-width: 100%;
+    width:100%;
+  }
 }
 
 .form__input-flexible-height {

client/styles/components/_modal.scss

@@ -10,8 +10,13 @@
 .modal-content {
   @extend %modal;
   min-height: #{150 / $base-font-size}rem;
-  width: #{500 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
+  
+  @media (min-width: 770px) {
+    width: #{500 / $base-font-size}rem;
+    
+  }
+
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
   }

client/styles/components/_preferences.scss

@@ -10,7 +10,6 @@
   flex-direction: column;
   outline: none;
   height: calc(80vh - #{65 / $base-font-size}rem);
-  max-height: #{460 / $base-font-size}rem;
   & .react-tabs {
     max-height: 100%;
     display: flex;
@@ -19,6 +18,11 @@
   & .react-tabs__tab-panel {
     overflow-y: auto;
   }
+  
+  @media (min-width: 770px) {
+    max-height: #{460 / $base-font-size}rem;
+    
+  }
 }
 
 .preference__minus-button,

server/controllers/collection.controller/updateCollection.js

@@ -1,5 +1,4 @@
-import omitBy from 'lodash/omitBy';
-import isUndefined from 'lodash/isUndefined';
+import { omitBy, isUndefined } from 'lodash';
 import Collection from '../../models/collection';
 
 function removeUndefined(obj) {

server/controllers/user.controller/__tests__/apiKey.test.js

@@ -1,6 +1,6 @@
 /* @jest-environment node */
 
-import last from 'lodash/last';
+import { last } from 'lodash';
 import { Request, Response } from 'jest-express';
 
 import User, { createMock, createInstanceMock } from '../../../models/user';

server/domain-objects/Project.js

@@ -1,5 +1,4 @@
-import isPlainObject from 'lodash/isPlainObject';
-import pick from 'lodash/pick';
+import { isPlainObject, pick } from 'lodash';
 import Project from '../models/project';
 import createId from '../utils/createId';
 import createApplicationErrorClass from '../utils/createApplicationErrorClass';

server/domain-objects/__test__/Project.test.js

@@ -1,4 +1,4 @@
-import find from 'lodash/find';
+import { find } from 'lodash';
 
 import {
   containsRootHtmlFile,

translations/locales/de/translations.json

@@ -530,8 +530,8 @@
     "KeyUpLineNumber": "Zeile {{lineNumber}}"
   },
   "EditorAccessibility": {
-    "NoLintMessages": "Keine Lint-Warnungen vorhanden ",
-    "CurrentLine": " Aktuelle Zeile"
+    "NoLintMessages": "Keine Lint-Warnungen vorhanden",
+    "CurrentLine": "Aktuelle Zeile"
   },
   "Timer": {
     "SavedAgo": "Gesichert: {{timeAgo}}"

translations/locales/en-US/translations.json

@@ -538,8 +538,8 @@
     "KeyUpLineNumber": "line {{lineNumber}}"
   },
   "EditorAccessibility": {
-    "NoLintMessages": "There are no lint messages ",
-    "CurrentLine": " Current line"
+    "NoLintMessages": "There are no lint messages",
+    "CurrentLine": "Current line"
   },
   "Timer": {
     "SavedAgo": "Saved: {{timeAgo}}"

translations/locales/es-419/translations.json

@@ -530,7 +530,7 @@
   },
   "EditorAccessibility": {
     "NoLintMessages": "No hay mensajes de Lint",
-    "CurrentLine": " Línea actual"
+    "CurrentLine": "Línea actual"
   },
   "Timer": {
     "SavedAgo": "Guardado: {{timeAgo}}"

translations/locales/fr-CA/translations.json

@@ -532,8 +532,8 @@
       "KeyUpLineNumber": "ligne {{lineNumber}}"
     },
     "EditorAccessibility": {
-      "NoLintMessages": "Il n'y a pas de messages lint ",
-      "CurrentLine": " Ligne actuelle"
+      "NoLintMessages": "Il n'y a pas de messages lint",
+      "CurrentLine": "Ligne actuelle"
     },
     "Timer": {
       "SavedAgo": "Sauvegardé: {{timeAgo}}"

translations/locales/hi/translations.json

@@ -529,8 +529,8 @@
       "KeyUpLineNumber": "लाइन {{lineNumber}}"
     },
     "EditorAccessibility": {
-      "NoLintMessages": "कोई लिंट मैसेज नहीं ",
-      "CurrentLine": " वर्तमान लाइन"
+      "NoLintMessages": "कोई लिंट मैसेज नहीं",
+      "CurrentLine": "वर्तमान लाइन"
     },
     "Timer": {
       "SavedAgo": "सेव किया: {{timeAgo}}"

translations/locales/it/translations.json

@@ -535,8 +535,8 @@
     "KeyUpLineNumber": "linea {{lineNumber}}"
   },
   "EditorAccessibility": {
-    "NoLintMessages": "Non ci sono messaggi ",
-    "CurrentLine": " Linea attuale"
+    "NoLintMessages": "Non ci sono messaggi",
+    "CurrentLine": "Linea attuale"
   },
   "Timer": {
     "SavedAgo": "Salvato: {{timeAgo}}"

translations/locales/ja/translations.json

@@ -529,8 +529,8 @@
       "KeyUpLineNumber": "{{lineNumber}} 行"
     },
     "EditorAccessibility": {
-      "NoLintMessages": "リントメッセージはありません ",
-      "CurrentLine": " 現在の行"
+      "NoLintMessages": "リントメッセージはありません",
+      "CurrentLine": "現在の行"
     },
     "Timer": {
       "SavedAgo": "保存されました: {{timeAgo}}"

translations/locales/ko/translations.json

@@ -517,8 +517,8 @@
     "KeyUpLineNumber": "line {{lineNumber}}"
   },
   "EditorAccessibility": {
-    "NoLintMessages": "There are no lint messages ",
-    "CurrentLine": " Current line"
+    "NoLintMessages": "There are no lint messages",
+    "CurrentLine": "Current line"
   },
   "Timer": {
     "SavedAgo": "Saved: {{timeAgo}}"