fix: Fixed the display of the selection of available time zones

src/account-settings/EditableSelectField.jsx

@@ -98,9 +98,28 @@ 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/test/EditableSelectField.test.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+
+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 IntlEditableSelectField = injectIntl(EditableSelectField);
+
+const mockStore = configureStore();
+
+describe('EditableSelectField', () => {
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <Router>
+      <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', () => {
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders EditableSelectField correctly with editing enabled', () => {
+    props = {
+      ...props,
+      isEditing: true,
+    };
+
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders EditableSelectField with an error', () => {
+    const errorProps = {
+      ...props,
+      error: 'This is an error message',
+    };
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...errorProps} />)).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders selectOptions when option has a group', () => {
+    const propsWithGroup = {
+      ...props,
+      options: [
+        {
+          label: 'User Options',
+          group: [
+            {
+              label: 'Suboption 1',
+              value: 'suboption1',
+            },
+          ],
+        },
+      ],
+    };
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroup} />)).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders selectOptions when option does not have a group', () => {
+    const propsWithoutGroup = {
+      ...props,
+      options: [
+        {
+          label: 'Default Option',
+          value: 'defaultOption',
+        },
+      ],
+    };
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithoutGroup} />)).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders selectOptions with multiple groups', () => {
+    const propsWithGroups = {
+      ...props,
+      options: [
+        {
+          label: 'Mixed Options',
+          group: [
+            {
+              label: 'Suboption 1',
+              value: 'suboption1',
+            },
+            {
+              label: 'Suboption 2',
+              value: 'suboption2',
+            },
+          ],
+        },
+      ],
+    };
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroups} />)).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});