Merge branch 'develop' into chore/legacy-mobile

Author: raclim

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/images/p5js-logo-small.svg

@@ -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';
@@ -270,9 +270,7 @@ export function resetProject() {
 }
 
 export function newProject() {
-  setTimeout(() => {
-    browserHistory.push('/');
-  }, 0);
+  browserHistory.push('/', { confirmed: true });
   return resetProject();
 }
 

client/modules/IDE/actions/project.js

@@ -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/AddToCollectionSketchList.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/AssetList.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/CollectionList/CollectionList.jsx

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

client/modules/IDE/components/EditableInput.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/Editor/index.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.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/components/EditorAccessibility.unit.test.jsx

@@ -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/hooks/useKeyDownHandlers.js

@@ -56,7 +56,8 @@ function WarnIfUnsavedChanges() {
           isAuth(nextLocation.pathname) ||
           isAuth(currentLocation.pathname) ||
           isOverlay(nextLocation.pathname) ||
-          isOverlay(currentLocation.pathname)
+          isOverlay(currentLocation.pathname) ||
+          nextLocation.state?.confirmed
         ) {
           return true; // allow navigation
         }

client/modules/IDE/pages/IDEView.jsx

@@ -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/collections.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/IDE/selectors/projects.js

@@ -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/Legal/components/PolicyContainer.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/modules/User/components/APIKeyList.jsx

@@ -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/_account.scss

@@ -98,7 +98,7 @@ pre.CodeMirror-line {
     margin-left: 0;
   }
 
-  // z-index: 20;
+  z-index: 1;
 
   width: 580px;
   font-family: Montserrat, sans-serif;

client/styles/components/_editor.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/_form-container.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/_forms.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/_modal.scss

@@ -162,21 +162,26 @@
     position: absolute;
   }
 }
-.svg__logo g > path {
+
+.svg__logo {
+
   @include themify() {
-    fill: getThemifyVariable('logo-color');
+    // Set background color of the logo
+    background-color: getThemifyVariable('logo-color');
   }
-}
-.svg__logo g g:first-of-type path {
-  fill: none;
+
 }
 
-.svg__logo g g:first-of-type use {
+.svg__logo g path{
+  
   @include themify() {
+    // Set internal color of the logo;
     fill: getThemifyVariable('logo-background-color');
   }
+
 }
 
+
 .nav__keyboard-shortcut {
   font-size: #{12 / $base-font-size}rem;
   font-family: Inconsololata, monospace;

client/styles/components/_nav.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,

client/styles/components/_preferences.scss

@@ -125,8 +125,12 @@
 }
 
 .toolbar__autorefresh-label {
+	cursor: pointer;
 	@include themify() {
 		color: getThemifyVariable('secondary-text-color');
+		&:hover {
+			color: getThemifyVariable('logo-color');
+		}
 	}
 	margin-left: #{5 / $base-font-size}rem;
 	font-size: #{12 / $base-font-size}rem;