From a0089eb1beaa019495d2bf6e019fefc6f0a97d3e Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 27 Sep 2023 12:09:27 -0400
Subject: [PATCH] fix: typeahead sort and styling (#396)

---
 .../VideoUploadEditor/VideoUploader.jsx       |  2 +-
 .../__snapshots__/VideoUploader.test.jsx.snap |  4 ++--
 .../__snapshots__/index.test.jsx.snap         |  4 ++--
 .../containers/VideoUploadEditor/index.scss   | 19 +++++++++++--------
 .../TypeaheadDropdown/index.jsx               |  5 ++++-
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx
index 1ff918e11..c2783fe64 100644
--- a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx
+++ b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx
@@ -26,7 +26,7 @@ const URLUploader = () => {
       </div>
       <div className="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal">OR</div>
       <div className="zindex-9 video-id-prompt p-4">
-        <InputGroup>
+        <InputGroup className="video-upload-input-group">
           <FormControl
             placeholder={intl.formatMessage(messages.pasteURL)}
             aria-label={intl.formatMessage(messages.pasteURL)}
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
index bac8ec525..c4307f49a 100644
--- a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
+++ b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
@@ -107,7 +107,7 @@ Object {
                 class="zindex-9 video-id-prompt p-4"
               >
                 <div
-                  class="input-group"
+                  class="video-upload-input-group input-group"
                 >
                   <div
                     class="pgn__form-control-decorator-group"
@@ -265,7 +265,7 @@ Object {
               class="zindex-9 video-id-prompt p-4"
             >
               <div
-                class="input-group"
+                class="video-upload-input-group input-group"
               >
                 <div
                   class="pgn__form-control-decorator-group"
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
index c9d7abaf3..e85627dc6 100644
--- a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
@@ -111,7 +111,7 @@ Object {
                     class="zindex-9 video-id-prompt p-4"
                   >
                     <div
-                      class="input-group"
+                      class="video-upload-input-group input-group"
                     >
                       <div
                         class="pgn__form-control-decorator-group"
@@ -275,7 +275,7 @@ Object {
                   class="zindex-9 video-id-prompt p-4"
                 >
                   <div
-                    class="input-group"
+                    class="video-upload-input-group input-group"
                   >
                     <div
                       class="pgn__form-control-decorator-group"
diff --git a/src/editors/containers/VideoUploadEditor/index.scss b/src/editors/containers/VideoUploadEditor/index.scss
index bb1e3f54c..c1bd2f3be 100644
--- a/src/editors/containers/VideoUploadEditor/index.scss
+++ b/src/editors/containers/VideoUploadEditor/index.scss
@@ -37,13 +37,16 @@
   }
 }
 
-.form-control {
-  font-size: 0.875rem !important;
-  width: 308px !important;
-  height: 44px !important;
+.video-upload-input-group{
+  .form-control {
+    font-size: 0.875rem !important;
+    width: 308px !important;
+    height: 44px !important;
+  }
+  
+  .pgn__icon.pgn__icon__lg {
+    width: 3.625rem !important;
+    height: 3.625rem !important;
+  }
 }
 
-.pgn__icon.pgn__icon__lg {
-  width: 3.625rem !important;
-  height: 3.625rem !important;
-}
diff --git a/src/editors/sharedComponents/TypeaheadDropdown/index.jsx b/src/editors/sharedComponents/TypeaheadDropdown/index.jsx
index e9dd6cd9d..17b50dbb3 100644
--- a/src/editors/sharedComponents/TypeaheadDropdown/index.jsx
+++ b/src/editors/sharedComponents/TypeaheadDropdown/index.jsx
@@ -7,6 +7,7 @@ import {
 } from '@edx/paragon';
 import { Add, ExpandLess, ExpandMore } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
+import { sortBy } from 'lodash-es';
 // eslint-disable-next-line import/no-unresolved
 import onClickOutside from 'react-onclickoutside';
 import FormGroup from './FormGroup';
@@ -45,7 +46,9 @@ class TypeaheadDropdown extends React.Component {
       options = options.filter((option) => (option.toLowerCase().includes(strToFind.toLowerCase())));
     }
 
-    return options.sort().map((opt) => {
+    const sortedOptions = sortBy(options, (option) => option.toLowerCase());
+
+    return sortedOptions.map((opt) => {
       let value = opt;
       if (value.length > 30) {
         value = value.substring(0, 30).concat('...');