From 3c3361c765bb1e6614c535b15e88d5cf03b7f52a Mon Sep 17 00:00:00 2001
From: connorhaugh <49422820+connorhaugh@users.noreply.github.com>
Date: Fri, 24 Feb 2023 10:40:56 -0500
Subject: [PATCH] fix: file upload on safari (#254)

* fix: file upload on safari

* fix: lint fix
---
 .../TranscriptWidget/LanguageSelector.jsx     |  71 ++++++++---
 .../LanguageSelector.test.jsx.snap            | 114 ++++++++++--------
 2 files changed, 117 insertions(+), 68 deletions(-)

diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
index acfe89e59..511c59bed 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
@@ -2,8 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Form,
+  ActionRow,
+  Dropdown,
+  Button,
+  Icon,
 } from '@edx/paragon';
+
+import { Check } from '@edx/paragon/icons';
 import { connect, useDispatch } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { thunkActions, selectors } from '../../../../../../data/redux';
@@ -15,9 +20,9 @@ import * as module from './LanguageSelector';
 export const hooks = {
   onSelectLanguage: ({
     dispatch, languageBeforeChange, triggerupload, setLocalLang,
-  }) => (event) => {
+  }) => ({ newLang }) => {
     // IF Language is unset, set language and begin upload prompt.
-    setLocalLang(event.target.value);
+    setLocalLang(newLang);
     if (languageBeforeChange === '') {
       triggerupload();
       return;
@@ -25,7 +30,7 @@ export const hooks = {
     // Else: update language
     dispatch(
       thunkActions.video.updateTranscriptLanguage({
-        newLanguageCode: event.target.value, languageBeforeChange,
+        newLanguageCode: newLang, languageBeforeChange,
       }),
     );
   },
@@ -54,27 +59,57 @@ export const LanguageSelector = ({
   const onLanguageChange = module.hooks.onSelectLanguage({
     dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
   });
+  console.log({ localLang, language, openLanguages });
+
+  const getTitle = () => {
+    if (Object.prototype.hasOwnProperty.call(videoTranscriptLanguages, language)) {
+      return (
+        <ActionRow>
+          {videoTranscriptLanguages[language]}
+          <ActionRow.Spacer />
+          <Icon className="text-primary-500" src={Check} />
+        </ActionRow>
+
+      );
+    }
+    return (
+      <ActionRow>
+        {intl.formatMessage(messages.languageSelectPlaceholder)}
+        <ActionRow.Spacer />
+      </ActionRow>
+    );
+  };
+
   return (
-    <div className="col col-11 p-0">
-      <Form.Group controlId={`selectLanguage-form-${index}`} className="mw-100  m-0">
-        <Form.Control
-          as="select"
+    <>
+
+      <Dropdown
+        className="w-100 mb-2"
+      >
+        <Dropdown.Toggle
+          iconAs={Button}
           aria-label={intl.formatMessage(messages.languageSelectLabel)}
-          defaultValue={language}
-          onChange={(e) => onLanguageChange(e)}
+          block
+          id={`selectLanguage-form-${index}`}
+          className="w-100"
+          variant="outline-primary"
         >
+          {getTitle()}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
           {Object.entries(videoTranscriptLanguages).map(([lang, text]) => {
-            if (language === lang) { return (<option value={lang} selected>{text}</option>); }
-            if (lang === 'placeholder') { return (<option hidden>{intl.formatMessage(messages.languageSelectPlaceholder)}</option>); }
-            if (openLanguages.some(row => row.includes(lang))) {
-              return (<option value={lang}>{text}</option>);
+            if (language === lang) {
+              return (<Dropdown.Item>{text}<Icon className="text-primary-500" src={Check} /></Dropdown.Item>);
             }
-            return (<option value={lang} disabled>{text}</option>);
+            if (openLanguages.some(row => row.includes(lang))) {
+              return (<Dropdown.Item onClick={() => onLanguageChange({ newLang: lang })}>{text}</Dropdown.Item>);
+            }
+            return (<Dropdown.Item className="disabled">{text}</Dropdown.Item>);
           })}
-        </Form.Control>
-      </Form.Group>
+        </Dropdown.Menu>
+      </Dropdown>
       <FileInput fileInput={input} acceptedFiles=".srt" />
-    </div>
+    </>
   );
 };
 
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
index 76243493c..be71c30ca 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
@@ -1,37 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LanguageSelector snapshot transcript option 1`] = `
-<div
-  className="col col-11 p-0"
->
-  <Form.Group
-    className="mw-100  m-0"
-    controlId="selectLanguage-form-undefined"
+<Fragment>
+  <Dropdown
+    className="w-100 mb-2"
   >
-    <Form.Control
+    <Dropdown.Toggle
       aria-label="Languages"
-      as="select"
-      defaultValue="kl"
-      onChange={[Function]}
+      block={true}
+      className="w-100"
+      iconAs="Button"
+      id="selectLanguage-form-undefined"
+      variant="outline-primary"
     >
-      <option
-        selected={true}
-        value="kl"
-      >
+      <ActionRow>
         kLinGon
-      </option>
-      <option
-        value="el"
+        <ActionRow.Spacer />
+        <Icon
+          className="text-primary-500"
+        />
+      </ActionRow>
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item>
+        kLinGon
+        <Icon
+          className="text-primary-500"
+        />
+      </Dropdown.Item>
+      <Dropdown.Item
+        onClick={[Function]}
       >
         eLvIsh
-      </option>
-      <option
-        value="sl"
+      </Dropdown.Item>
+      <Dropdown.Item
+        onClick={[Function]}
       >
         sImLisH
-      </option>
-    </Form.Control>
-  </Form.Group>
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
   <FileInput
     acceptedFiles=".srt"
     fileInput={
@@ -44,43 +52,49 @@ exports[`LanguageSelector snapshot transcript option 1`] = `
       }
     }
   />
-</div>
+</Fragment>
 `;
 
 exports[`LanguageSelector snapshots -- no transcripts no Open Languages, all should be disabled 1`] = `
-<div
-  className="col col-11 p-0"
->
-  <Form.Group
-    className="mw-100  m-0"
-    controlId="selectLanguage-form-undefined"
+<Fragment>
+  <Dropdown
+    className="w-100 mb-2"
   >
-    <Form.Control
+    <Dropdown.Toggle
       aria-label="Languages"
-      as="select"
-      defaultValue="kl"
-      onChange={[Function]}
+      block={true}
+      className="w-100"
+      iconAs="Button"
+      id="selectLanguage-form-undefined"
+      variant="outline-primary"
     >
-      <option
-        selected={true}
-        value="kl"
-      >
+      <ActionRow>
         kLinGon
-      </option>
-      <option
-        disabled={true}
-        value="el"
+        <ActionRow.Spacer />
+        <Icon
+          className="text-primary-500"
+        />
+      </ActionRow>
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item>
+        kLinGon
+        <Icon
+          className="text-primary-500"
+        />
+      </Dropdown.Item>
+      <Dropdown.Item
+        className="disabled"
       >
         eLvIsh
-      </option>
-      <option
-        disabled={true}
-        value="sl"
+      </Dropdown.Item>
+      <Dropdown.Item
+        className="disabled"
       >
         sImLisH
-      </option>
-    </Form.Control>
-  </Form.Group>
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
   <FileInput
     acceptedFiles=".srt"
     fileInput={
@@ -93,5 +107,5 @@ exports[`LanguageSelector snapshots -- no transcripts no Open Languages, all sho
       }
     }
   />
-</div>
+</Fragment>
 `;