Merge branch '47049-performance-modal' into 'master'

Resolve "Performance bar modal is hard to read"

Closes #47049

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

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

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

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

 <script>
 const buttonVariants = ['danger', 'primary', 'success', 'warning'];
+const sizeVariants = ['sm', 'md', 'lg'];
 
 export default {
   name: 'GlModal',
-
   props: {
     id: {
       type: String,
       required: false,
       default: null,
     },
+    modalSize: {
+      type: String,
+      required: false,
+      default: 'md',
+      validator: value => sizeVariants.includes(value),
+    },
     headerTitleText: {
       type: String,
       required: false,
@@ -27,7 +33,11 @@ export default {
       default: '',
     },
   },
-
+  computed: {
+    modalSizeClass() {
+      return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
+    },
+  },
   methods: {
     emitCancel(event) {
       this.$emit('cancel', event);
@@ -48,6 +58,7 @@ export default {
   >
     <div
       class="modal-dialog"
+      :class="modalSizeClass"
       role="document"
     >
       <div class="modal-content">

app/assets/stylesheets/framework/common.scss

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

spec/javascripts/vue_shared/components/gl_modal_spec.js

@@ -190,4 +190,37 @@ describe('GlModal', () => {
       });
     });
   });
+
+  describe('handling sizes', () => {
+    it('should render modal-sm', () => {
+      vm = mountComponent(modalComponent, {
+        modalSize: 'sm',
+      });
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(true);
+    });
+
+    it('should render modal-lg', () => {
+      vm = mountComponent(modalComponent, {
+        modalSize: 'lg',
+      });
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true);
+    });
+
+    it('should not add modal size classes when md size is passed', () => {
+      vm = mountComponent(modalComponent, {
+        modalSize: 'md',
+      });
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-md')).toEqual(false);
+    });
+
+    it('should not add modal size classes by default', () => {
+      vm = mountComponent(modalComponent, {});
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(false);
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(false);
+    });
+  });
 });