Merge branch 'confidential_mr_styling' into 'master'

Styling to avoid wrapping and make button look more like a button

Closes #35834

See merge request gitlab-org/gitlab!20176

app/assets/javascripts/confidential_merge_request/components/project_form_group.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import { __, sprintf } from '../../locale';
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { __ } from '../../locale';
 import createFlash from '../../flash';
 import Api from '../../api';
 import state from '../state';
@@ -9,6 +9,7 @@ import Dropdown from './dropdown.vue';
 export default {
   components: {
     GlLink,
+    GlSprintf,
     Dropdown,
   },
   props: {
@@ -38,15 +39,6 @@ export default {
     selectedProject() {
       return state.selectedProject;
     },
-    noForkText() {
-      return sprintf(
-        __(
-          "To protect this issue's confidentiality, %{link_start}fork the project%{link_end} and set the forks visibility to private.",
-        ),
-        { link_start: `<a href="${this.newForkPath}" class="help-link">`, link_end: '</a>' },
-        false,
-      );
-    },
   },
   mounted() {
     this.fetchProjects();
@@ -123,8 +115,20 @@ export default {
           }}
         </template>
         <template v-else>
-          {{ __('No forks available to you.') }}<br />
-          <span v-html="noForkText"></span>
+          {{ __('No forks are available to you.') }}<br />
+          <gl-sprintf
+            :message="
+              __(
+                `To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private.`,
+              )
+            "
+          >
+            <template #forkLink>
+              <a :href="newForkPath" target="_blank" class="help-link">{{
+                __('fork this project')
+              }}</a>
+            </template>
+          </gl-sprintf>
         </template>
         <gl-link
           :href="helpPagePath"

app/assets/stylesheets/framework/dropdowns.scss

@@ -288,7 +288,7 @@
     list-style: none;
     padding: 0 1px;
 
-    a,
+    a:not(.help-link),
     button,
     .menu-item {
       @include dropdown-link;

app/assets/stylesheets/pages/issues.scss

@@ -214,7 +214,6 @@ ul.related-merge-requests > li {
   }
 
   .create-merge-request-dropdown-menu {
-    width: 300px;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);

app/views/projects/issues/_new_branch.html.haml

@@ -28,7 +28,7 @@
         %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-right.gl-show-field-errors{ class: ("create-confidential-merge-request-dropdown-menu" if can_create_confidential_merge_request?), data: { dropdown: true } }
           - if can_create_merge_request
             %li.droplab-item-selected{ role: 'button', data: { value: 'create-mr', text: create_mr_text } }
-              .menu-item
+              .menu-item.text-nowrap
                 = icon('check', class: 'icon')
                 - if can_create_confidential_merge_request?
                   = _('Create confidential merge request and branch')

changelogs/unreleased/confidential_mr_styling.yml

+---
+title: Improve create confidential MR dropdown styling.
+merge_request: 20176
+author: Lee Tickett
+type: other

locale/gitlab.pot

@@ -11641,7 +11641,7 @@ msgstr ""
 msgid "No files found."
 msgstr ""
 
-msgid "No forks available to you."
+msgid "No forks are available to you."
 msgstr ""
 
 msgid "No issues for the selected time period."
@@ -18447,7 +18447,7 @@ msgstr ""
 msgid "To preserve performance only <strong>%{display_size} of %{real_size}</strong> files are displayed."
 msgstr ""
 
-msgid "To protect this issue's confidentiality, %{link_start}fork the project%{link_end} and set the forks visibility to private."
+msgid "To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
 msgstr ""
 
 msgid "To protect this issue's confidentiality, a private fork of this project was selected."
@@ -21049,6 +21049,9 @@ msgstr ""
 msgid "for this project"
 msgstr ""
 
+msgid "fork this project"
+msgstr ""
+
 msgid "from"
 msgstr ""
 

spec/features/issues/user_creates_confidential_merge_request_spec.rb

@@ -29,7 +29,7 @@ describe 'User creates confidential merge request on issue page', :js do
       click_button 'Create confidential merge request'
 
       page.within '.create-confidential-merge-request-dropdown-menu' do
-        expect(page).to have_content('No forks available to you')
+        expect(page).to have_content('No forks are available to you')
       end
     end
   end

spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap

@@ -15,19 +15,12 @@ exports[`Confidential merge request project form group component renders empty s
       class="text-muted mt-1 mb-0"
     >
       
-        No forks available to you.
+        No forks are available to you.
       <br />
        
-      <span>
-        To protect this issue's confidentiality, 
-        <a
-          class="help-link"
-          href="https://test.com"
-        >
-          fork the project
-        </a>
-         and set the forks visibility to private.
-      </span>
+      <glsprintf-stub
+        message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
+      />
        
       <gllink-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"
@@ -65,19 +58,12 @@ exports[`Confidential merge request project form group component renders fork dr
       class="text-muted mt-1 mb-0"
     >
       
-        No forks available to you.
+        No forks are available to you.
       <br />
        
-      <span>
-        To protect this issue's confidentiality, 
-        <a
-          class="help-link"
-          href="https://test.com"
-        >
-          fork the project
-        </a>
-         and set the forks visibility to private.
-      </span>
+      <glsprintf-stub
+        message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
+      />
        
       <gllink-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"