Merge branch '47825-gitaly-modal' into 'master'

Resolve "Performance bar Gitaly modal is hard to read"

Closes #47825

See merge request gitlab-org/gitlab-ce!19752

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -56,7 +56,7 @@ export default {
     <gl-modal
       :id="`modal-peek-${metric}-details`"
       :header-title-text="header"
-      modal-size="lg"
+      modal-size="xl"
       class="performance-bar-modal"
     >
       <table
@@ -71,7 +71,7 @@ export default {
             <td
               v-for="key in keys"
               :key="key"
-              class="break-word all-words"
+              class="break-word"
             >
               {{ item[key] }}
             </td>

app/assets/javascripts/vue_shared/components/gl_modal.vue

 <script>
 const buttonVariants = ['danger', 'primary', 'success', 'warning'];
-const sizeVariants = ['sm', 'md', 'lg'];
+const sizeVariants = ['sm', 'md', 'lg', 'xl'];
 
 export default {
   name: 'GlModal',

app/assets/stylesheets/framework/common.scss

@@ -440,10 +440,6 @@ img.emoji {
 
 .break-word {
   word-wrap: break-word;
-
-  &.all-words {
-    word-break: break-word;
-  }
 }
 
 /** COMMON CLASSES **/

app/assets/stylesheets/framework/modal.scss

+.modal-xl {
+  max-width: 98%;
+}
+
 .modal-header {
   background-color: $modal-body-bg;
 

app/assets/stylesheets/performance_bar.scss

@@ -107,12 +107,12 @@
   }
 
   .performance-bar-modal {
-    .modal-footer {
-      display: none;
+    .modal-body {
+      padding: 0;
     }
 
-    .modal-dialog {
-      width: 860px;
+    .modal-footer {
+      display: none;
     }
   }
 }

lib/peek/rblineprof/custom_controller_helpers.rb

@@ -41,7 +41,7 @@ module Peek
             ]
           end.sort_by{ |a,b,c,d,e,f| -f }
 
-          output = "<div class='modal-dialog modal-lg'><div class='modal-content'>"
+          output = "<div class='modal-dialog modal-xl'><div class='modal-content'>"
           output << "<div class='modal-header'>"
           output << "<h4>Line profiling: #{human_description(params[:lineprofiler])}</h4>"
           output << "<button class='close' type='button' data-dismiss='modal' aria-label='close'><span aria-hidden='true'>&times;</span></button>"

spec/javascripts/vue_shared/components/gl_modal_spec.js

@@ -208,6 +208,14 @@ describe('GlModal', () => {
       expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true);
     });
 
+    it('should render modal-xl', () => {
+      vm = mountComponent(modalComponent, {
+        modalSize: 'xl',
+      });
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-xl')).toEqual(true);
+    });
+
     it('should not add modal size classes when md size is passed', () => {
       vm = mountComponent(modalComponent, {
         modalSize: 'md',