Merge branch 'release-2.20.7' into release

Author: raclim

.gitignore

@@ -4,6 +4,7 @@
 .env.staging
 .vscode/
 node_modules/
+minio/
 npm-debug.log
 dump.rdb
 static/dist/

client/components/Dropdown/DropdownMenu.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '../../test-utils';
+import { DropdownMenu, DropdownMenuAlignment } from './DropdownMenu';
+
+describe('DropdownMenu', () => {
+  const renderDropdown = () => {
+    render(
+      <DropdownMenu
+        aria-label="More options"
+        align={DropdownMenuAlignment.RIGHT}
+      >
+        <li role="menuitem">Item One</li>
+        <li role="menuitem">Item Two</li>
+        <li role="menuitem">Item Three</li>
+      </DropdownMenu>
+    );
+  };
+
+  it('should render the dropdown button', () => {
+    renderDropdown();
+
+    const button = screen.getByRole('button', { name: 'More options' });
+    expect(button).toBeInTheDocument();
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('should open dropdown and render menu items when button is clicked', () => {
+    renderDropdown();
+
+    const button = screen.getByRole('button', { name: 'More options' });
+
+    fireEvent.click(button);
+
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+
+    expect(screen.getByText('Item One')).toBeInTheDocument();
+    expect(screen.getByText('Item Two')).toBeInTheDocument();
+    expect(screen.getByText('Item Three')).toBeInTheDocument();
+  });
+
+  it('should close the menu after selecting an item', async () => {
+    renderDropdown();
+
+    const button = screen.getByRole('button', { name: 'More options' });
+    fireEvent.click(button);
+
+    const item = screen.getByText('Item One');
+    fireEvent.mouseUp(item);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+  });
+});

client/i18n.js

@@ -41,7 +41,8 @@ export const availableLanguages = [
   'zh-CN',
   'zh-TW',
   'tr',
-  'ur'
+  'ur',
+  'ne'
 ];
 
 const detectedLanguage = getPreferredLanguage(
@@ -76,7 +77,8 @@ export function languageKeyToLabel(lang) {
     'zh-CN': '简体中文',
     'zh-TW': '正體中文',
     tr: 'Türkçe',
-    ur: 'اردو'
+    ur: 'اردو',
+    ne: 'नेपाली'
   };
   return languageMap[lang];
 }

client/modules/IDE/actions/uploader.js

@@ -82,6 +82,23 @@ export function dropzoneCompleteCallback(file) {
         content: file.content
       };
       dispatch(handleCreateFile(formParams, false));
+    } else if (file.status === 'error' || file.xhr.status >= 400) {
+      let uploadFileErrorMessage = 'Uploading file to AWS failed.';
+      if (file.xhr?.response) {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(file.xhr.response, 'text/xml');
+        const message = xmlDoc.getElementsByTagName('Message')[0]?.textContent;
+        const code = xmlDoc.getElementsByTagName('Code')[0]?.textContent;
+        uploadFileErrorMessage = `${code}: ${message}`;
+      }
+      file.previewElement.classList.add('dz-error');
+      file.previewElement.classList.remove('dz-success');
+      const dzErrorMessageElement = file.previewElement?.querySelector(
+        '[data-dz-errormessage]'
+      );
+      if (dzErrorMessageElement) {
+        dzErrorMessageElement.textContent = uploadFileErrorMessage;
+      }
     }
   };
 }

client/modules/IDE/components/FileUploader.jsx

@@ -23,13 +23,36 @@ const StyledUploader = styled.div`
   .dz-preview.dz-image-preview {
     background-color: transparent;
   }
+  .dz-image img {
+    width: 100%;
+    height: auto;
+  }
+  .dz-details .dz-filename:hover {
+    overflow: hidden;
+  }
+  .dz-error-message span {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    display: block;
+  }
+  .dz-error-mark:hover {
+    cursor: pointer !important;
+  }
 `;
 
 function FileUploader() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const userId = useSelector((state) => state.user.id);
-
+  const deleteUploadErrorFiles = (uploader, file) => {
+    if (file.status === 'error') {
+      file.previewElement.addEventListener('click', (e) => {
+        e.stopPropagation();
+        uploader.removeFile(file);
+      });
+    }
+  };
   useEffect(() => {
     const uploader = new Dropzone('div#uploader', {
       url: s3BucketHttps,
@@ -52,6 +75,7 @@ function FileUploader() {
     });
     uploader.on('complete', (file) => {
       dispatch(dropzoneCompleteCallback(file));
+      deleteUploadErrorFiles(uploader, file);
     });
     return () => {
       uploader.destroy();

client/modules/User/components/AccountForm.tsx

@@ -148,7 +148,7 @@ export function AccountForm() {
             <Field name="currentPassword">
               {(field) => (
                 <p className="form__field">
-                  <label htmlFor="current password" className="form__label">
+                  <label htmlFor="currentPassword" className="form__label">
                     {t('AccountForm.CurrentPassword')}
                   </label>
                   <input
@@ -172,7 +172,7 @@ export function AccountForm() {
             <Field name="newPassword">
               {(field) => (
                 <p className="form__field">
-                  <label htmlFor="new password" className="form__label">
+                  <label htmlFor="newPassword" className="form__label">
                     {t('AccountForm.NewPassword')}
                   </label>
                   <input

client/modules/User/components/NewPasswordForm.tsx

@@ -34,7 +34,7 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
                   className="form__input"
                   aria-label={t('NewPasswordForm.TitleARIA')}
                   type="password"
-                  id="Password"
+                  id="password"
                   autoComplete="new-password"
                   {...field.input}
                 />
@@ -49,14 +49,14 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
           <Field name="confirmPassword">
             {(field) => (
               <p className="form__field">
-                <label htmlFor="confirm password" className="form__label">
+                <label htmlFor="confirmPassword" className="form__label">
                   {t('NewPasswordForm.ConfirmPassword')}
                 </label>
                 <input
                   className="form__input"
                   type="password"
                   aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
-                  id="confirm password"
+                  id="confirmPassword"
                   autoComplete="new-password"
                   {...field.input}
                 />

client/styles/abstracts/_variables.scss

@@ -57,7 +57,7 @@ $themes: (
     error-color: $p5js-pink,
     file-hover-color: $light,
     file-selected-color: $medium-light,
-    form-input-placeholder-text-color: $middle-light,
+    form-input-placeholder-text-color: $middle-gray,
     form-input-text-color: $dark,
     form-navigation-options-color: $middle-dark,
     form-secondary-title-color: $medium-dark,
@@ -91,7 +91,7 @@ $themes: (
     ide-border-color: $medium-light,
     inactive-text-color: $middle-dark,
     input-background-color: $lightest,
-    input-border-color: $middle-light,
+    input-border-color: $middle-dark,
     input-secondary-background-color: $lightest,
     input-selection-background-color: $medium-light,
     input-selection-text-color: $dark,
@@ -155,6 +155,7 @@ $themes: (
     error-color: $p5js-pink,
     file-hover-color: $dark,
     file-selected-color: $medium-dark,
+    form-input-placeholder-text-color: $middle-gray,
     form-navigation-options-color: $middle-light,
     form-secondary-title-color: $medium-light,
     form-title-color: $lightest,
@@ -187,7 +188,7 @@ $themes: (
     ide-border-color: $middle-dark,
     inactive-text-color: $middle-light,
     input-background-color: $dark,
-    input-border-color: $middle-dark,
+    input-border-color: $light,
     input-secondary-background-color: $medium-dark,
     input-selection-background-color: $lightest,
     input-selection-text-color: $darkest,

common/p5Versions.js

@@ -1,4 +1,4 @@
-export const currentP5Version = '1.11.11'; // Don't update to 2.x until 2026
+export const currentP5Version = '1.11.12'; // Don't update to 2.x until 2026
 
 // Generated from https://www.npmjs.com/package/p5?activeTab=versions
 // Run this in the console:
@@ -17,7 +17,8 @@ export const p5Versions = [
   '2.0.2',
   '2.0.1',
   '2.0.0',
-  { version: '1.11.11', label: '(Default)' },
+  { version: '1.11.12', label: '(Default)' },
+  '1.11.11',
   '1.11.10',
   '1.11.9',
   '1.11.8',

contributor_docs/installation.md

@@ -37,6 +37,13 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
 7. Install MongoDB and make sure it is running
    * For Mac OSX with [homebrew](http://brew.sh/): `brew tap mongodb/brew` then `brew install mongodb-community` and finally start the server with `brew services start mongodb-community` or you can visit the installation guide here [Installation Guide For MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
    * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
+   * If you have trouble setting up MongoDB locally, an alternative is to use [MongoDB Atlas](https://cloud.mongodb.com/) to get a connection string that you can use as your `MONGO_URL` in the `.env` file. To get your connection string:
+      - Navigate to [mongodb.com](https://www.mongodb.com/) and sign up or log in.
+      - Create a new project. Give it any name, and either add a key-value pair or skip that step.
+      - Create a cluster by choosing the free tier. Give your cluster a name, choose a region, and keep the provider as AWS.
+      - Set a username and password for your database-user, these will be part of your connection string.
+      - Choose **Node.js** as the driver for your connection method. You will see a connection string, with or without the password filled in.
+      - Copy the string and use it as your `MONGO_URL` in the `.env` file.
 8. `$ cp .env.example .env`
 9. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
    * See the [GitHub API Configuration](#github-api-configuration) section for information on how to authenticate with Github.