Fixed dropdown hover styles

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/64340

3 files changed, 48 insertions, 5 deletions

diff --git a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
index 99d77a75c23..197a0706062 100644
--- a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
+++ b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
@@ -105,7 +105,7 @@ export default {
 </script>
 
 <template>
-  <div class="form-group">
+  <div class="confidential-merge-request-fork-group form-group">
     <label>{{ __('Project') }}</label>
     <div>
       <dropdown
@@ -126,6 +126,14 @@ export default {
           {{ __('No forks available to you.') }}<br />
           <span v-html="noForkText"></span>
         </template>
+        <gl-link
+          :href="helpPagePath"
+          class="w-auto p-0 d-inline-block text-primary bg-transparent"
+          target="_blank"
+        >
+          <span class="sr-only">{{ __('Read more') }}</span>
+          <i class="fa fa-question-circle" aria-hidden="true"></i>
+        </gl-link>
       </p>
     </div>
   </div>
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index e75c1379dfb..29f63e9578d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -63,7 +63,8 @@
   margin-top: 11px;
 }
 
-.dropdown-toggle {
+.dropdown-toggle,
+.confidential-merge-request-fork-group .dropdown-toggle {
   padding: 6px 8px 6px 10px;
   background-color: $white-light;
   color: $gl-text-color;
@@ -288,7 +289,7 @@
     padding: 0 1px;
 
     a,
-    button:not(.dropdown-toggle,.ci-action-icon-container),
+    button,
     .menu-item {
       @include dropdown-link;
     }
diff --git a/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap b/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap
index fd307ce5ab3..47bdc677068 100644
--- a/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap
+++ b/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Confidential merge request project form group component renders empty state when response is empty 1`] = `
 <div
-  class="form-group"
+  class="confidential-merge-request-fork-group form-group"
 >
   <label>
     Project
@@ -28,6 +28,23 @@ exports[`Confidential merge request project form group component renders empty s
         </a>
          and set the forks visiblity to private.
       </span>
+       
+      <gllink-stub
+        class="w-auto p-0 d-inline-block text-primary bg-transparent"
+        href="/help"
+        target="_blank"
+      >
+        <span
+          class="sr-only"
+        >
+          Read more
+        </span>
+         
+        <i
+          aria-hidden="true"
+          class="fa fa-question-circle"
+        />
+      </gllink-stub>
     </p>
   </div>
 </div>
@@ -35,7 +52,7 @@ exports[`Confidential merge request project form group component renders empty s
 
 exports[`Confidential merge request project form group component renders fork dropdown 1`] = `
 <div
-  class="form-group"
+  class="confidential-merge-request-fork-group form-group"
 >
   <label>
     Project
@@ -61,6 +78,23 @@ exports[`Confidential merge request project form group component renders fork dr
         </a>
          and set the forks visiblity to private.
       </span>
+       
+      <gllink-stub
+        class="w-auto p-0 d-inline-block text-primary bg-transparent"
+        href="/help"
+        target="_blank"
+      >
+        <span
+          class="sr-only"
+        >
+          Read more
+        </span>
+         
+        <i
+          aria-hidden="true"
+          class="fa fa-question-circle"
+        />
+      </gllink-stub>
     </p>
   </div>
 </div>