fix: Fixed the display of the selection of available time zones. (#895)

feat: add toggling for the hardcode support link

.env

@@ -31,3 +31,4 @@ MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK=''
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'

.env.development

@@ -32,4 +32,4 @@ MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK='mailto:support@example.com'
-
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'

.env.test

@@ -30,3 +30,4 @@ ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'

package-lock.json

@@ -10,9 +10,9 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-        "@edx/frontend-component-footer": "11.7.1",
-        "@edx/frontend-component-header": "3.7.2",
-        "@edx/frontend-platform": "4.0.2",
+        "@edx/frontend-component-footer": "12.0.0",
+        "@edx/frontend-component-header": "4.0.0",
+        "@edx/frontend-platform": "4.2.0",
         "@edx/paragon": "20.28.5",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
         "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -1989,10 +1989,10 @@
       }
     },
     "node_modules/@edx/frontend-component-footer": {
-      "version": "11.7.1",
-      "license": "AGPL-3.0",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.0.0.tgz",
+      "integrity": "sha512-m8Rx6ZPWzIN5XLrz6Ft3aTuFo0rty0jECd79CBYWdm0D9KD1WxoYEG+fElluyOQp/t42T5jLImHTSWjFURx5kw==",
       "dependencies": {
-        "@edx/frontend-platform": "^4.0.1",
         "@fortawesome/fontawesome-svg-core": "6.4.0",
         "@fortawesome/free-brands-svg-icons": "6.4.0",
         "@fortawesome/free-regular-svg-icons": "6.4.0",
@@ -2000,9 +2000,10 @@
         "@fortawesome/react-fontawesome": "0.2.0"
       },
       "peerDependencies": {
+        "@edx/frontend-platform": "^4.0.0",
         "prop-types": "^15.5.10",
-        "react": "^16.9.0",
-        "react-dom": "^16.9.0"
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0"
       }
     },
     "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/fontawesome-common-types": {
@@ -2058,11 +2059,10 @@
       }
     },
     "node_modules/@edx/frontend-component-header": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-3.7.2.tgz",
-      "integrity": "sha512-tUGatyYfFB5bKg+iqbFfvRNtvLM54A7WlRKWQ4dY3iIjcMDCD99CcdfqGup3gbIMIBehS14o0skDs2J8R3OElw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.0.0.tgz",
+      "integrity": "sha512-r/L3p2ZSI1DitjxVKAor18GmgJllafYslrdpzGI0vcX/gTemH13jf2Xr9iQqrT921DP2nzZ5GOwGJNptTSjiaA==",
       "dependencies": {
-        "@edx/frontend-platform": "^4.0.1",
         "@edx/paragon": "20.30.1",
         "@fortawesome/fontawesome-svg-core": "6.3.0",
         "@fortawesome/free-brands-svg-icons": "6.3.0",
@@ -2074,6 +2074,7 @@
         "react-transition-group": "4.4.5"
       },
       "peerDependencies": {
+        "@edx/frontend-platform": "^4.0.0",
         "prop-types": "^15.5.10",
         "react": "^16.9.0 || ^17.0.0",
         "react-dom": "^16.9.0 || ^17.0.0"
@@ -2223,8 +2224,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "4.0.2",
-      "license": "AGPL-3.0",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.2.0.tgz",
+      "integrity": "sha512-iDoFeccENQKBjqUgdjl5KSwBrjNEj8YW6Ual+6twcHHJUBg3yRoBEphwHIoRREcMgQjhdKVAdWj8eleh4JsEKA==",
       "dependencies": {
         "@cospired/i18n-iso-languages": "2.2.0",
         "@formatjs/intl-pluralrules": "4.3.3",
@@ -2247,13 +2249,14 @@
         "universal-cookie": "4.0.4"
       },
       "bin": {
+        "intl-imports.js": "i18n/scripts/intl-imports.js",
         "transifex-utils.js": "i18n/scripts/transifex-utils.js"
       },
       "peerDependencies": {
         "@edx/paragon": ">= 10.0.0 < 21.0.0",
         "prop-types": "^15.7.2",
-        "react": "^16.9.0",
-        "react-dom": "^16.9.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
         "react-redux": "^7.1.1",
         "react-router-dom": "^5.0.1",
         "redux": "^4.0.4"

package.json

@@ -28,9 +28,9 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "11.7.1",
-    "@edx/frontend-component-header": "3.7.2",
-    "@edx/frontend-platform": "4.0.2",
+    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-header": "4.0.0",
+    "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "20.28.5",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",

src/account-settings/AccountSettingsPage.messages.jsx

@@ -411,8 +411,8 @@ const messages = defineMessages({
     defaultMessage: 'No formal education',
     description: 'Selected by the user to describe their education.',
   },
-  'account.settings.field.education.levels.o': {
-    id: 'account.settings.field.education.levels.o',
+  'account.settings.field.education.levels.other': {
+    id: 'account.settings.field.education.levels.other',
     defaultMessage: 'Other education',
     description: 'Selected by the user if they have a type of education not described by the other choices.',
   },

src/account-settings/EditableField.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Button, Form, StatefulButton,
@@ -155,7 +156,7 @@ const EditableField = (props) => {
                 </Button>
               ) : null}
             </div>
-            <p data-hj-suppress className={isGrayedOut ? 'grayed-out' : null}>{renderValue(value)}</p>
+            <p data-hj-suppress className={classNames('text-truncate', { 'grayed-out': isGrayedOut })}>{renderValue(value)}</p>
             <p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
           </div>
         ),

src/account-settings/EditableSelectField.jsx

@@ -98,9 +98,29 @@ const EditableSelectField = (props) => {
       value: confirmationValue,
     });
   };
-  const selectOptions = options.map(option => (
-    <option value={option.value} key={`${option.value}-${option.label}`}>{option.label}</option>
-  ));
+
+  const selectOptions = options.map((option) => {
+    if (option.group) {
+      // If the option has a 'group' property, it represents an element with sub-options.
+      return (
+        <optgroup label={option.label} key={option.label}>
+          {option.group.map((subOption) => (
+            <option
+              value={subOption.value}
+              key={`${subOption.value}-${subOption.label}`}
+            >
+              {subOption.label}
+            </option>
+          ))}
+        </optgroup>
+      );
+    }
+    return (
+      <option value={option.value} key={`${option.value}-${option.label}`}>
+        {option.label}
+      </option>
+    );
+  });
 
   return (
     <SwitchContent

src/account-settings/data/constants.js

@@ -25,7 +25,7 @@ export const EDUCATION_LEVELS = [
   'jhs',
   'el',
   'none',
-  'o',
+  'other',
 ];
 
 export const GENDER_OPTIONS = [

src/account-settings/delete-account/BeforeProceedingBanner.jsx

@@ -25,10 +25,12 @@ const BeforeProceedingBanner = (props) => {
         defaultMessage="Before proceeding, please {actionLink}."
         description="Error that appears if you are trying to delete your account, but something about your account needs attention first.  The actionLink will be instructions, such as 'unlink your Facebook account'."
         values={{
-          actionLink: (
+          actionLink: supportArticleUrl ? (
             <Hyperlink destination={supportArticleUrl}>
               {intl.formatMessage(messages[instructionMessageId])}
             </Hyperlink>
+          ) : (
+            intl.formatMessage(messages[instructionMessageId])
           ),
           siteName: getConfig().SITE_NAME,
         }}

src/account-settings/delete-account/BeforeProceedingBanner.test.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import { IntlProvider, injectIntl, createIntl } from '@edx/frontend-platform/i18n';
+
+ReactDOM.createPortal = node => node;
+
+import BeforeProceedingBanner from './BeforeProceedingBanner'; // eslint-disable-line import/first
+
+const IntlBeforeProceedingBanner = injectIntl(BeforeProceedingBanner);
+
+describe('BeforeProceedingBanner', () => {
+  it('should match the snapshot if SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT does not have a support link', () => {
+    const props = {
+      instructionMessageId: 'account.settings.delete.account.please.unlink',
+      intl: createIntl({ locale: 'en' }),
+      supportArticleUrl: '',
+    };
+    const tree = renderer
+      .create((
+        <IntlProvider locale="en">
+          <IntlBeforeProceedingBanner
+            {...props}
+          />
+        </IntlProvider>
+      ))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should match the snapshot when SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT has a support link', () => {
+    const props = {
+      instructionMessageId: 'account.settings.delete.account.please.unlink',
+      intl: createIntl({ locale: 'en' }),
+      supportArticleUrl: 'http://test-support.edx',
+    };
+    const tree = renderer
+      .create((
+        <IntlProvider locale="en">
+          <IntlBeforeProceedingBanner
+            {...props}
+          />
+        </IntlProvider>
+      ))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/account-settings/delete-account/DeleteAccount.jsx

@@ -59,6 +59,7 @@ export class DeleteAccount extends React.Component {
       hasLinkedTPA, isVerifiedAccount, status, errorType, intl,
     } = this.props;
     const canDelete = isVerifiedAccount && !hasLinkedTPA;
+    const supportArticleUrl = process.env.SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT;
 
     // TODO: We lack a good way of providing custom language for a particular site.  This is a hack
     // to allow edx.org to fulfill its business requirements.
@@ -122,7 +123,7 @@ export class DeleteAccount extends React.Component {
         {hasLinkedTPA ? (
           <BeforeProceedingBanner
             instructionMessageId="account.settings.delete.account.please.unlink"
-            supportArticleUrl="https://support.edx.org/hc/en-us/articles/207206067"
+            supportArticleUrl={supportArticleUrl}
           />
         ) : null}
 

src/account-settings/delete-account/__snapshots__/BeforeProceedingBanner.test.jsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BeforeProceedingBanner should match the snapshot if SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT does not have a support link 1`] = `
+<div
+  className="alert d-flex align-items-start alert-warning mt-n2"
+>
+  <div>
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+      data-icon="exclamation-triangle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </div>
+  <div>
+    Before proceeding, please unlink all social media accounts.
+  </div>
+</div>
+`;
+
+exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT has a support link 1`] = `
+<div
+  className="alert d-flex align-items-start alert-warning mt-n2"
+>
+  <div>
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+      data-icon="exclamation-triangle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </div>
+  <div>
+    Before proceeding, please 
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://test-support.edx"
+      onClick={[Function]}
+      target="_self"
+    >
+      unlink all social media accounts
+    </a>
+    .
+  </div>
+</div>
+`;

src/account-settings/test/EditableSelectField.test.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { render, screen } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { createMemoryHistory } from 'history';
+
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+import EditableSelectField from '../EditableSelectField';
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+jest.mock('@edx/frontend-platform/auth');
+jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
+
+const history = createMemoryHistory();
+
+const IntlEditableSelectField = injectIntl(EditableSelectField);
+
+const mockStore = configureStore();
+
+describe('EditableSelectField', () => {
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <Router history={history}>
+      <IntlProvider locale="en">
+        <Provider store={store}>{children}</Provider>
+      </IntlProvider>
+    </Router>
+  );
+
+  beforeEach(() => {
+    store = mockStore();
+    props = {
+      name: 'testField',
+      label: 'Main Label',
+      emptyLabel: 'Empty Main Label',
+      type: 'text',
+      value: 'Test Field',
+      userSuppliedValue: '',
+      options: [
+        {
+          label: 'Default Option',
+          value: 'defaultOption',
+        },
+        {
+          label: 'User Options',
+          group: [
+            {
+              label: 'Suboption 1',
+              value: 'suboption1',
+            },
+          ],
+        },
+        {
+          label: 'Other Options',
+          group: [
+            {
+              label: 'Suboption 2',
+              value: 'suboption2',
+            },
+            {
+              label: 'Suboption 3',
+              value: 'suboption3',
+            },
+          ],
+        },
+      ],
+      saveState: 'default',
+      error: '',
+      confirmationMessageDefinition: {
+        id: 'confirmationMessageId',
+        defaultMessage: 'Default Confirmation Message',
+        description: 'Description of the confirmation message',
+      },
+      confirmationValue: 'Confirmation Value',
+      helpText: 'Helpful Text',
+      isEditing: false,
+      isEditable: true,
+      isGrayedOut: false,
+    };
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('renders EditableSelectField correctly with editing disabled', () => {
+    render(reduxWrapper(<IntlEditableSelectField {...props} />));
+
+    expect(screen.getByText('Main Label')).toBeInTheDocument();
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+  });
+
+  it('renders EditableSelectField correctly with editing enabled', () => {
+    props = {
+      ...props,
+      isEditing: true,
+    };
+
+    render(reduxWrapper(<IntlEditableSelectField {...props} />));
+
+    expect(screen.getByText('Main Label')).toBeInTheDocument();
+    expect(screen.getByText('Suboption 1')).toBeInTheDocument();
+    expect(screen.getByText('Default Option')).toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+  });
+});