fix: Replace custom language names list with standard Intl DisplayNames API #2332

Author: Ahtesham Quraish

package-lock.json

@@ -18,7 +18,7 @@
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",
     "dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "test": "TZ=UTC fedx-scripts jest --passWithNoTests",
     "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
     "types": "tsc --noEmit"
   },
@@ -73,6 +73,7 @@
     "file-saver": "^2.0.5",
     "formik": "2.4.6",
     "frontend-components-tinymce-advanced-plugins": "^1.0.3",
+    "iso-639-1": "^3.1.5",
     "jszip": "^3.10.1",
     "lodash": "4.17.21",
     "meilisearch": "^0.41.0",

package.json

@@ -12,8 +12,8 @@ import { Check } from '@openedx/paragon/icons';
 import { connect, useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { thunkActions, selectors } from '../../../../../../data/redux';
-import { videoTranscriptLanguages } from '../../../../../../data/constants/video';
 import { FileInput, fileInput } from '../../../../../../sharedComponents/FileInput';
+import { getLanguageName } from '../../../../../../data/constants/video';
 import messages from './messages';
 
 export const hooks = {
@@ -45,27 +45,27 @@ export const hooks = {
 };
 
 const LanguageSelector = ({
-  index, // For a unique id for the form control
+  index,
   language,
-  // Redux
-  openLanguages, // Only allow those languages not already associated with a transcript to be selected
+  openLanguages,
 }) => {
   const intl = useIntl();
+  const dispatch = useDispatch();
+
   const [localLang, setLocalLang] = React.useState(language);
-  const input = fileInput({ onAddFile: hooks.addFileCallback({ dispatch: useDispatch(), localLang }) });
+  const input = fileInput({ onAddFile: hooks.addFileCallback({ dispatch, localLang }) });
   const onLanguageChange = hooks.onSelectLanguage({
-    dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
+    dispatch, languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
   });
 
   const getTitle = () => {
-    if (Object.prototype.hasOwnProperty.call(videoTranscriptLanguages, language)) {
+    if (language) {
       return (
         <ActionRow>
-          {videoTranscriptLanguages[language]}
+          {getLanguageName(language)}
           <ActionRow.Spacer />
           <Icon className="text-primary-500" src={Check} />
         </ActionRow>
-
       );
     }
     return (
@@ -78,10 +78,7 @@ const LanguageSelector = ({
 
   return (
     <>
-
-      <Dropdown
-        className="w-100 mb-2"
-      >
+      <Dropdown className="w-100 mb-2">
         <Dropdown.Toggle
           iconAs={Button}
           aria-label={intl.formatMessage(messages.languageSelectLabel)}
@@ -93,14 +90,25 @@ const LanguageSelector = ({
           {getTitle()}
         </Dropdown.Toggle>
         <Dropdown.Menu>
-          {Object.entries(videoTranscriptLanguages).map(([lang, text]) => {
+          {openLanguages.map(lang => {
+            const name = getLanguageName(lang);
+
             if (language === lang) {
-              return (<Dropdown.Item>{text}<Icon className="text-primary-500" src={Check} /></Dropdown.Item>);
-            }
-            if (openLanguages.some(row => row.includes(lang))) {
-              return (<Dropdown.Item onClick={() => onLanguageChange({ newLang: lang })}>{text}</Dropdown.Item>);
+              return (
+                <Dropdown.Item key={lang}>
+                  {name}
+                  <Icon className="text-primary-500" src={Check} />
+                </Dropdown.Item>
+              );
             }
-            return (<Dropdown.Item className="disabled">{text}</Dropdown.Item>);
+            return (
+              <Dropdown.Item
+                key={lang}
+                onClick={() => onLanguageChange({ newLang: lang })}
+              >
+                {name}
+              </Dropdown.Item>
+            );
           })}
         </Dropdown.Menu>
       </Dropdown>

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  render, screen, initializeMocks, fireEvent,
+  render, screen, initializeMocks,
 } from '@src/testUtils';
 import LanguageSelector from './LanguageSelector';
 import { selectors } from '../../../../../../data/redux';
@@ -13,19 +13,22 @@ const lang3 = 'sImLisH';
 const lang3Code = 'sl';
 
 jest.mock('../../../../../../data/constants/video', () => ({
-  videoTranscriptLanguages: {
-    [lang1Code]: lang1,
-    [lang2Code]: lang2,
-    [lang3Code]: lang3,
-  },
+  getLanguageName: jest.fn((code) => {
+    const mockMap = {
+      kl: lang1,
+      el: lang2,
+      sl: lang3,
+    };
+    return mockMap[code] || code;
+  }),
 }));
 
 describe('LanguageSelector', () => {
   const props = {
     onSelect: jest.fn().mockName('props.OnSelect'),
     index: 1,
     language: lang1Code,
-    openLanguages: [[lang2Code, lang2], [lang3Code, lang3]],
+    openLanguages: [lang2Code, lang3Code, lang1Code],
   };
   beforeEach(() => {
     initializeMocks();
@@ -46,13 +49,4 @@ describe('LanguageSelector', () => {
     render(<LanguageSelector {...props} language="" />);
     expect(screen.getByText('Select Language')).toBeInTheDocument();
   });
-
-  test('transcripts no Open Languages, all dropdown items should be disabled', () => {
-    const { video } = selectors;
-    jest.spyOn(video, 'openLanguages').mockReturnValue([]);
-    const { container } = render(<LanguageSelector {...props} language="" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Languages' }));
-    const disabledItems = container.querySelectorAll('.disabled.dropdown-item');
-    expect(disabledItems.length).toBe(3);
-  });
 });