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

7 files changed, 20 insertions, 12 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 96189e7033a..8473977ce63 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/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>
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index 7ba58bd5959..b4c3b821b83 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -1,6 +1,6 @@
 <script>
 const buttonVariants = ['danger', 'primary', 'success', 'warning'];
-const sizeVariants = ['sm', 'md', 'lg'];
+const sizeVariants = ['sm', 'md', 'lg', 'xl'];
 
 export default {
   name: 'GlModal',
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index e5197e27b82..326499125fc 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/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 **/
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index a7896cc3fc3..ffb40166c15 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -1,3 +1,7 @@
+.modal-xl {
+  max-width: 98%;
+}
+
 .modal-header {
   background-color: $modal-body-bg;
 
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 8cdf2275551..5127ddfde6e 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/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;
     }
   }
 }
diff --git a/lib/peek/rblineprof/custom_controller_helpers.rb b/lib/peek/rblineprof/custom_controller_helpers.rb
index da24a36603e..9beb442bfa3 100644
--- a/lib/peek/rblineprof/custom_controller_helpers.rb
+++ b/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>"
diff --git a/spec/javascripts/vue_shared/components/gl_modal_spec.js b/spec/javascripts/vue_shared/components/gl_modal_spec.js
index 23be8d93b81..e4737714312 100644
--- a/spec/javascripts/vue_shared/components/gl_modal_spec.js
+++ b/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',