Merge branch '214550' into 'master'

Add full alerts details view

See merge request gitlab-org/gitlab!31750

app/assets/javascripts/alert_management/components/alert_details.vue

@@ -158,7 +158,15 @@ export default {
             </li>
           </ul>
         </gl-tab>
-        <gl-tab data-testid="fullDetailsTab" :title="$options.i18n.fullAlertDetailsTitle" />
+        <gl-tab data-testid="fullDetailsTab" :title="$options.i18n.fullAlertDetailsTitle">
+          <ul class="list-unstyled">
+            <li v-for="(value, key) in alert" v-if="key !== '__typename'" :key="key">
+              <p class="py-1 my-1 gl-font-base">
+                <strong>{{ key }}: </strong> {{ value }}
+              </p>
+            </li>
+          </ul>
+        </gl-tab>
       </gl-tabs>
     </div>
   </div>

spec/frontend/alert_management/components/alert_management_detail_spec.js

@@ -127,6 +127,13 @@ describe('AlertDetails', () => {
       });
     });
 
+    describe('View full alert details', () => {
+      it('should display a unstyled list of alert details', () => {
+        wrapper.find('[data-testid="fullDetailsTab"]').trigger('click');
+        expect(wrapper.find('.list-unstyled').exists()).toBe(true);
+      });
+    });
+
     describe('loading state', () => {
       beforeEach(() => {
         mountComponent({ loading: true });