Merge branch 'develop' into replacing-any-by-unknown-as-a-good-practice-in-ts

Author: cassiano

client/index.jsx

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
 
+import { useTranslation } from 'react-i18next';
 import browserHistory from './browserHistory';
 import configureStore from './store';
 import Routing from './routes';
@@ -63,14 +64,32 @@ if (
   document.body.appendChild(buttonScript);
 }
 
-const App = () => (
-  <div>
-    <Router history={browserHistory}>
-      <SkipLink targetId="play-sketch" text="PlaySketch" />
-      <Routing />
-    </Router>
-  </div>
-);
+const App = () => {
+  const { t } = useTranslation();
+
+  setTimeout(() => {
+    const donateButton = document.getElementsByClassName(
+      'dbox-donation-button'
+    )[0];
+
+    if (donateButton) {
+      const donateLogoImage = document.createElement('img');
+      donateLogoImage.src = 'https://donorbox.org/images/white_logo.svg';
+
+      donateButton.text = t('About.Donate');
+      donateButton.prepend(donateLogoImage);
+    }
+  }, 0);
+
+  return (
+    <div>
+      <Router history={browserHistory}>
+        <SkipLink targetId="play-sketch" text="PlaySketch" />
+        <Routing />
+      </Router>
+    </div>
+  );
+};
 
 render(
   <Provider store={store}>

client/modules/About/pages/About.jsx

@@ -52,7 +52,7 @@ const About = () => {
 
   const p5version = useSelector((state) => {
     const index = state.files.find((file) => file.name === 'index.html');
-    return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
+    return index?.content.match(/\/p5@([\d.]+)\//)?.[1];
   });
 
   return (

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

@@ -442,43 +442,44 @@ describe('<Preferences />', () => {
         );
       });
     });
-    describe('start wordwrap at false', () => {
-      it('wordwrap toggle, starting at false', () => {
-        // render the component with wordwrap prop set to false
-        subject({ wordwrap: false });
-
-        // get ahold of the radio buttons for toggling wordwrap
-        const wordwrapRadioFalse = screen.getByRole('radio', {
+    // TODO: Consolidate "linewrap" (reference from backend/User model) and "word wrap" (currently used in UI) into consistent naming.
+    describe('start linewrap at false', () => {
+      it('linewrap toggle, starting at false', () => {
+        // render the component with linewrap prop set to false
+        subject({ linewrap: false });
+
+        // get ahold of the radio buttons for toggling linewrap
+        const linewrapRadioFalse = screen.getByRole('radio', {
           name: /wordwrap off/i
         });
-        const wordwrapRadioTrue = screen.getByRole('radio', {
+        const linewrapRadioTrue = screen.getByRole('radio', {
           name: /wordwrap on/i
         });
 
         testToggle(
-          wordwrapRadioFalse,
-          wordwrapRadioTrue,
+          linewrapRadioFalse,
+          linewrapRadioTrue,
           props.setLinewrap,
           true
         );
       });
     });
-    describe('start wordwrap at true', () => {
-      it('wordwrap toggle, starting at true', () => {
-        // render the component with wordwrap prop set to true
-        subject({ wordwrap: true });
+    describe('start linewrap at true', () => {
+      it('linewrap toggle, starting at true', () => {
+        // render the component with linewrap prop set to true
+        subject({ linewrap: true });
 
-        // get ahold of the radio buttons for toggling wordwrap
-        const wordwrapRadioFalse = screen.getByRole('radio', {
+        // get ahold of the radio buttons for toggling linewrap
+        const linewrapRadioFalse = screen.getByRole('radio', {
           name: /wordwrap off/i
         });
-        const wordwrapRadioTrue = screen.getByRole('radio', {
+        const linewrapRadioTrue = screen.getByRole('radio', {
           name: /wordwrap on/i
         });
 
         testToggle(
-          wordwrapRadioTrue,
-          wordwrapRadioFalse,
+          linewrapRadioTrue,
+          linewrapRadioFalse,
           props.setLinewrap,
           false
         );

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

@@ -43,7 +43,7 @@ export default function Preferences() {
     tabIndex,
     fontSize,
     autosave,
-    wordwrap,
+    linewrap,
     lineNumbers,
     lintWarning,
     textOutput,
@@ -398,7 +398,7 @@ export default function Preferences() {
                 id="wordwrap-on"
                 className="preference__radio-button"
                 value="On"
-                checked={wordwrap}
+                checked={linewrap}
               />
               <label htmlFor="wordwrap-on" className="preference__option">
                 {t('Preferences.On')}
@@ -411,7 +411,7 @@ export default function Preferences() {
                 id="wordwrap-off"
                 className="preference__radio-button"
                 value="Off"
-                checked={!wordwrap}
+                checked={!linewrap}
               />
               <label htmlFor="wordwrap-off" className="preference__option">
                 {t('Preferences.Off')}