From 6fe126b8751258135123093e76281e99c3fda56a Mon Sep 17 00:00:00 2001
From: Sam Stewart <samgst@amazon.com>
Date: Wed, 25 Sep 2024 12:46:08 -0700
Subject: [PATCH 1/3] Replace <select> with custom-select <div> element

---
 .../src/q-ui/components/ssoLoginForm.vue      | 81 ++++++++++++++++---
 1 file changed, 68 insertions(+), 13 deletions(-)

diff --git a/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue b/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
index 46f38a1a78b..611fe13f9be 100644
--- a/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
+++ b/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
@@ -33,18 +33,24 @@
         <div>
             <div class="title no-bold">Region</div>
             <div class="hint">AWS Region that hosts identity directory</div>
-            <select
-                class="region-select font-amazon"
-                id="regions"
-                name="regions"
-                v-model="selectedRegion"
-                @change="handleRegionInput"
-                tabindex="0"
-            >
-                <option v-for="region in regions" :key="region.id" :value="region.id">
-                    {{ `${region.name} (${region.id})` }}
-                </option>
-            </select>
+            <div class="custom-select" :class="{ 'is-open': isOpen }">
+                <div class="select-trigger"
+                     @click="toggleDropdown"
+                     tabindex="0"
+                     @keydown.space.prevent="toggleDropdown"
+                     @keydown.enter.prevent="toggleDropdown">
+                    {{ selectedRegion }}
+                </div>
+                <div class="options-container" v-if="isOpen">
+                    <div class="option"
+                         v-for="region in regions"
+                         :key="region.id"
+                         @click="selectRegion({regionId : region.id})"
+                         :class="{ 'selected': region.id === selectedRegion }">
+                        {{ `${region.name} (${region.id})` }}
+                    </div>
+                </div>
+            </div>
         </div>
         <br/><br/>
         <button
@@ -70,7 +76,8 @@ export default defineComponent({
     data() {
         return {
             startUrlRegex: /^https:\/\/(([\w-]+(?:\.gamma)?\.awsapps\.com\/start(?:-beta|-alpha)?[\/#]?)|(start\.(?:us-gov-home|us-gov-east-1\.us-gov-home|us-gov-west-1\.us-gov-home)\.awsapps\.com|start\.(?:home|cn-north-1\.home|cn-northwest-1\.home)\.awsapps\.cn)\/directory\/[\w-]+[\/#]?)$/,
-            issueUrlRegex: /^https:\/\/([\w-]+\.)?identitycenter\.(amazonaws\.com|amazonaws\.com\.cn|us-gov\.amazonaws\.com)\/[\w\/-]+[\/#]?$/
+            issueUrlRegex: /^https:\/\/([\w-]+\.)?identitycenter\.(amazonaws\.com|amazonaws\.com\.cn|us-gov\.amazonaws\.com)\/[\w\/-]+[\/#]?$/,
+            isOpen: false,
         }
     },
     computed: {
@@ -128,6 +135,14 @@ export default defineComponent({
         handleRegionInput() {
             this.isRegionValid = this.selectedRegion != "";
         },
+        toggleDropdown() {
+            this.isOpen = !this.isOpen;
+        },
+        selectRegion({regionId}: { regionId: any }){
+            this.selectedRegion = regionId;
+            this.isOpen = false;
+            this.handleRegionInput();
+        },
         async handleContinueClick() {
             if (!this.isInputValid) {
                 return
@@ -151,6 +166,46 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+
+.custom-select {
+    position: relative;
+    width: 100%;
+    font-family: 'Amazon Ember', sans-serif;
+}
+
+.select-trigger {
+    padding: 10px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    background: #fff;
+}
+
+.options-container {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    max-height: 200px;
+    overflow-y: auto;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-top: none;
+    z-index: 1000;
+}
+
+.option {
+    padding: 10px;
+    cursor: pointer;
+}
+
+.option:hover, .option.selected {
+    background-color: #f0f0f0;
+}
+
+.is-open .select-trigger {
+    border-bottom: none;
+}
+
 .hint {
     color: #909090;
     margin-bottom: 5px;

From 1e1fa45c1f5f85f29fa5c144e91d22a1d17ddf11 Mon Sep 17 00:00:00 2001
From: Sam Stewart <samgst@amazon.com>
Date: Wed, 25 Sep 2024 14:40:01 -0700
Subject: [PATCH 2/3] selected region name+id show in the select trigger box

---
 plugins/core/webview/src/q-ui/components/ssoLoginForm.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue b/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
index 611fe13f9be..f6bb034cde5 100644
--- a/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
+++ b/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
@@ -39,7 +39,10 @@
                      tabindex="0"
                      @keydown.space.prevent="toggleDropdown"
                      @keydown.enter.prevent="toggleDropdown">
-                    {{ selectedRegion }}
+                    <template v-for="region in regions" :key="region.id">
+                        <span v-if="region.id === selectedRegion">{{ region.name }} ({{ region.id }})</span>
+                    </template>
+                    <span v-if="!selectedRegion">Select a Region</span>
                 </div>
                 <div class="options-container" v-if="isOpen">
                     <div class="option"

From 45daf84541aaa354480830aa034376f0cd83a269 Mon Sep 17 00:00:00 2001
From: Sam Stewart <samgst@amazon.com>
Date: Wed, 25 Sep 2024 15:30:12 -0700
Subject: [PATCH 3/3] css styling for dropdown box

---
 .../src/q-ui/components/ssoLoginForm.vue      | 60 ++++++++++++-------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue b/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
index f6bb034cde5..580e07a0155 100644
--- a/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
+++ b/plugins/core/webview/src/q-ui/components/ssoLoginForm.vue
@@ -33,7 +33,7 @@
         <div>
             <div class="title no-bold">Region</div>
             <div class="hint">AWS Region that hosts identity directory</div>
-            <div class="custom-select" :class="{ 'is-open': isOpen }">
+            <div class="region-select" :class="{ 'is-open': isOpen }">
                 <div class="select-trigger"
                      @click="toggleDropdown"
                      tabindex="0"
@@ -169,20 +169,42 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-
-.custom-select {
+.region-select {
     position: relative;
     width: 100%;
-    font-family: 'Amazon Ember', sans-serif;
 }
 
 .select-trigger {
     padding: 10px;
-    border: 1px solid #ccc;
+    padding-right: 20px;
     cursor: pointer;
-    background: #fff;
+    position: relative;
+}
+
+.select-trigger::after {
+    content: '';
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid currentColor;
+}
+
+.select-trigger-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.is-open .select-trigger::after {
+    transform: translateY(-50%) rotate(180deg);
 }
 
+
 .options-container {
     position: absolute;
     top: 100%;
@@ -190,9 +212,6 @@ export default defineComponent({
     right: 0;
     max-height: 200px;
     overflow-y: auto;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-top: none;
     z-index: 1000;
 }
 
@@ -201,14 +220,6 @@ export default defineComponent({
     cursor: pointer;
 }
 
-.option:hover, .option.selected {
-    background-color: #f0f0f0;
-}
-
-.is-open .select-trigger {
-    border-bottom: none;
-}
-
 .hint {
     color: #909090;
     margin-bottom: 5px;
@@ -223,17 +234,26 @@ export default defineComponent({
 
 /* Theme specific styles */
 body.jb-dark {
-    .url-input, .region-select, .sso-profile {
+    .url-input, .region-select, .sso-profile, .select-trigger, .options-container {
         background-color: #252526;
         color: white;
-        border: none;
+        border: 1px solid #3c3c3c;
+    }
+
+    .option:hover, .option.selected {
+        background-color: #3c3c3c;
     }
 }
 
 body.jb-light {
-    .url-input, .region-select, .sso-profile {
+    .url-input, .region-select, .sso-profile, .select-trigger, .options-container {
+        background-color: white;
         color: black;
         border: 1px solid #c9ccd6;
     }
+
+    .option:hover, .option.selected {
+        background-color: #f0f0f0;
+    }
 }
 </style>