show button toggle value as primary text color when single project is selected

2 files changed, 8 insertions, 1 deletions

diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index 7efb038566d..bd63bfbd5ba 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -56,6 +56,9 @@ export default {
   computed: {
     ...mapState(['selectedProject']),
     ...mapGetters(['hasProject']),
+    hasOneProject() {
+      return this.items.length === 1;
+    },
     isDisabled() {
       return this.items.length < 2;
     },
@@ -158,7 +161,7 @@ export default {
         :value="selectedProject.projectId"
       />
       <dropdown-button
-        :class="{ 'gl-field-error-outline': hasErrors }"
+        :class="{ 'gl-field-error-outline': hasErrors, 'read-only': hasOneProject }"
         :is-disabled="isDisabled"
         :is-loading="isLoading"
         :toggle-text="toggleText"
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 664aade7375..6576f7ca3b3 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -63,6 +63,10 @@
   border-radius: $border-radius-base;
   white-space: nowrap;
 
+  &:disabled.read-only {
+    color: $gl-text-color !important;
+  }
+
   &.no-outline {
     outline: 0;
   }