From 01c3a42eb25c8bfae4afd16ea6d4cc45c50a2cd0 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 7 Dec 2022 11:16:02 -0500
Subject: [PATCH] fix: transcript styling (#159)

---
 .../components/LicenseWidget/LicenseSelector.jsx |  2 +-
 .../__snapshots__/LicenseSelector.test.jsx.snap  | 16 ++++++++++++----
 .../TranscriptWidget/LanguageSelector.jsx        |  4 ++--
 .../components/TranscriptWidget/Transcript.jsx   |  2 +-
 .../__snapshots__/LanguageSelector.test.jsx.snap |  4 ++--
 .../__snapshots__/Transcript.test.jsx.snap       |  8 ++++++--
 .../__snapshots__/index.test.jsx.snap            | 11 +----------
 .../components/TranscriptWidget/index.jsx        |  4 ----
 .../components/TranscriptWidget/messages.js      |  7 ++++++-
 .../__snapshots__/index.test.jsx.snap            |  2 +-
 .../components/VideoSourceWidget/index.jsx       |  2 +-
 src/editors/data/constants/video.js              |  1 +
 12 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
index 20d6070a2..621f4a15a 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -32,7 +32,7 @@ export const LicenseSelector = ({
   const ref = React.useRef();
   return (
     <Form.Group className="mx-2 my-0">
-      <Form.Row>
+      <Form.Row className="flex-nowrap">
         <Form.Control
           as="select"
           ref={ref}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
index 6bf7e1c9e..84a0f4383 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
@@ -4,7 +4,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -60,7 +62,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -104,7 +108,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -160,7 +166,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue=""
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 d10871caf..7542f4605 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
@@ -54,13 +54,13 @@ export const LanguageSelector = ({
   const onLanguageChange = module.hooks.onSelectLanguage({
     dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
   });
-
   return (
     <div className="col col-11">
       <Form.Group controlId={`selectLanguage-form-${index}`} className="mw-100">
-        <Form.Control as="select" defaultValue={language} onChange={(e) => onLanguageChange(e)} floatingLabel={intl.formatMessage(messages.languageSelectLabel)}>
+        <Form.Control as="select" aria-label={intl.formatMessage(messages.languageSelectLabel)} defaultValue={language} onChange={(e) => onLanguageChange(e)}>
           {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>);
             }
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
index 82d1de772..e984c53a1 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
@@ -71,7 +71,7 @@ export const Transcript = ({
           </Card>
         )
         : (
-          <Row>
+          <Row className="flex-nowrap">
             <LanguageSelector
               title={index}
               language={language}
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 801f7f291..27dafc467 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
@@ -9,9 +9,9 @@ exports[`LanguageSelector snapshot transcript option 1`] = `
     controlId="selectLanguage-form-undefined"
   >
     <Form.Control
+      aria-label="Languages"
       as="select"
       defaultValue="kl"
-      floatingLabel="Languages"
       onChange={[Function]}
     >
       <option
@@ -56,9 +56,9 @@ exports[`LanguageSelector snapshots -- no transcripts no Open Languages, all sho
     controlId="selectLanguage-form-undefined"
   >
     <Form.Control
+      aria-label="Languages"
       as="select"
       defaultValue="kl"
-      floatingLabel="Languages"
       onChange={[Function]}
     >
       <option
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
index 97bd670b2..313950356 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
@@ -2,7 +2,9 @@
 
 exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete 1`] = `
 <Fragment>
-  <Component>
+  <Component
+    className="flex-nowrap"
+  >
     <LanguageSelector
       language="lAnG"
       title="sOmenUmBer"
@@ -18,7 +20,9 @@ exports[`Transcript Component component component snapshots: renders as expected
 
 exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete, language is blank so delete is shown instead of action menu 1`] = `
 <Fragment>
-  <Component>
+  <Component
+    className="flex-nowrap"
+  >
     <LanguageSelector
       language=""
       title="sOmenUmBer"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
index 4cda6a402..e27f2998f 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
@@ -396,17 +396,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
   <Stack
     gap={3}
   >
-    <Alert
-      variant="danger"
-    >
-      <FormattedMessage
-        defaultMessage="Only SRT files can be uploaded. Please select a file ending in .srt to upload."
-        description="Message warning users to only upload .srt files"
-        id="authoring.videoeditor.transcripts.fileTypeWarning"
-      />
-    </Alert>
     <FormattedMessage
-      defaultMessage="Add video transcripts for improved accessibility."
+      defaultMessage="Add video transcripts (.srt files only) for improved accessibility."
       description="Message for adding first transcript"
       id="authoring.videoeditor.transcripts.upload.firstTranscriptMessage"
     />
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
index 3178dec37..5e111a7c8 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
@@ -11,7 +11,6 @@ import {
   Button,
   Stack,
   Icon,
-  Alert,
   OverlayTrigger,
   Tooltip,
   ActionRow,
@@ -153,9 +152,6 @@ export const TranscriptWidget = ({
           </Form.Group>
         ) : (
           <>
-            <Alert variant="danger">
-              <FormattedMessage {...messages.fileTypeWarning} />
-            </Alert>
             <FormattedMessage {...messages.addFirstTranscript} />
           </>
         )}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/messages.js
index 5089673c0..dc8b1520a 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/messages.js
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/messages.js
@@ -11,7 +11,7 @@ export const messages = {
   },
   addFirstTranscript: {
     id: 'authoring.videoeditor.transcripts.upload.firstTranscriptMessage',
-    defaultMessage: 'Add video transcripts for improved accessibility.',
+    defaultMessage: 'Add video transcripts (.srt files only) for improved accessibility.',
     description: 'Message for adding first transcript',
   },
   allowDownloadCheckboxLabel: {
@@ -69,6 +69,11 @@ export const messages = {
     defaultMessage: 'Languages',
     description: 'Label For Dropdown, which allows users to set the language associtated with a transcript',
   },
+  languageSelectPlaceholder: {
+    id: 'authoring.videoeditor.transcripts.languageSelectPlaceholder',
+    defaultMessage: 'Select Language',
+    description: 'Placeholder For Dropdown, which allows users to set the language associtated with a transcript',
+  },
   cancelDeleteLabel: {
     id: 'authoring.videoeditor.transcripts.cancelDeleteLabel',
     defaultMessage: 'Cancel',
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
index 024ac1d46..6b5382f37 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
@@ -36,7 +36,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
       />
     </div>
     <Form.Row
-      className="mt-4"
+      className="mt-4 flex-nowrap"
     >
       <Form.Control
         floatingLabel="Video URL"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
index 5a670fd30..978dabc30 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -71,7 +71,7 @@ export const VideoSourceWidget = ({
           <FormattedMessage {...messages.fallbackVideoMessage} />
         </div>
         {fallbackVideos.formValue.map((videoUrl, index) => (
-          <Form.Row className="mt-4">
+          <Form.Row className="mt-4 flex-nowrap">
             <Form.Control
               floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
               onChange={fallbackVideos.onChange(index)}
diff --git a/src/editors/data/constants/video.js b/src/editors/data/constants/video.js
index a0f8e18b7..198afc707 100644
--- a/src/editors/data/constants/video.js
+++ b/src/editors/data/constants/video.js
@@ -1,6 +1,7 @@
 import { StrictDict } from '../../utils';
 
 export const videoTranscriptLanguages = StrictDict({
+  placeholder: '',
   aa: 'Afar',
   ab: 'Abkhazian',
   af: 'Afrikaans',