Add latest changes from gitlab-org/gitlab@master

.gitlab/issue_templates/Feature proposal.md

@@ -28,6 +28,7 @@ Personas are described at https://about.gitlab.com/handbook/marketing/product-ma
 * [Allison (Application Ops)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#allison-application-ops)
 * [Priyanka (Platform Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#priyanka-platform-engineer)
 * [Dana (Data Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#dana-data-analyst)
+* [Eddie (Content Editor)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#eddie-content-editor)
 -->
 
 ### User experience goal

app/assets/javascripts/boards/mixins/sortable_default_options.js

@@ -1,17 +1,12 @@
 /* global DocumentTouch */
 
-import $ from 'jquery';
 import sortableConfig from 'ee_else_ce/sortable/sortable_config';
 
 export function sortableStart() {
-  $('.has-tooltip')
-    .tooltip('hide')
-    .tooltip('disable');
   document.body.classList.add('is-dragging');
 }
 
 export function sortableEnd() {
-  $('.has-tooltip').tooltip('enable');
   document.body.classList.remove('is-dragging');
 }
 

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlSprintf, GlLink } from '@gitlab/ui';
+import { GlSprintf, GlLink, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 import gkeDropdownMixin from './gke_dropdown_mixin';
@@ -10,6 +10,7 @@ export default {
   components: {
     GlSprintf,
     GlLink,
+    GlIcon,
   },
   mixins: [gkeDropdownMixin],
   props: {
@@ -178,14 +179,14 @@ export default {
               'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral'
             "
             target="_blank"
-            >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i
+            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
-          ></gl-link>
+          /></gl-link>
         </template>
 
         <template #docsLink="{ content }">
           <gl-link :href="docsUrl" target="_blank"
-            >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i
+            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
-          ></gl-link>
+          /></gl-link>
         </template>
 
         <template #error>

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -1,6 +1,5 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import tooltip from '~/vue_shared/directives/tooltip';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
 import { stageKeys } from '../constants';
@@ -10,9 +9,6 @@ export default {
     CommitFilesList,
     EmptyState,
   },
-  directives: {
-    tooltip,
-  },
   computed: {
     ...mapState(['changedFiles', 'stagedFiles', 'lastCommitMsg']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),

app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue

@@ -0,0 +1,67 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { __ } from '~/locale';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+export default {
+  name: 'TestCaseDetails',
+  components: {
+    CodeBlock,
+    GlModal,
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+    testCase: {
+      type: Object,
+      required: true,
+      validator: ({ classname, formattedTime, name }) =>
+        Boolean(classname) && Boolean(formattedTime) && Boolean(name),
+    },
+  },
+  text: {
+    name: __('Name'),
+    duration: __('Execution time'),
+    trace: __('System output'),
+  },
+  modalCloseButton: {
+    text: __('Close'),
+    attributes: [{ variant: 'info' }],
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :modal-id="modalId"
+    :title="testCase.classname"
+    :action-primary="$options.modalCloseButton"
+  >
+    <div class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
+      <strong class="gl-text-right col-sm-3">{{ $options.text.name }}</strong>
+      <div class="col-sm-9" data-testid="test-case-name">
+        {{ testCase.name }}
+      </div>
+    </div>
+
+    <div class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
+      <strong class="gl-text-right col-sm-3">{{ $options.text.duration }}</strong>
+      <div class="col-sm-9" data-testid="test-case-duration">
+        {{ testCase.formattedTime }}
+      </div>
+    </div>
+
+    <div
+      v-if="testCase.system_output"
+      class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"
+      data-testid="test-case-trace"
+    >
+      <strong class="gl-text-right col-sm-3">{{ $options.text.trace }}</strong>
+      <div class="col-sm-9">
+        <code-block :code="testCase.system_output" />
+      </div>
+    </div>
+  </gl-modal>
+</template>

app/assets/javascripts/pipelines/components/test_reports/test_reports.vue

@@ -61,7 +61,7 @@ export default {
   <div
     v-else-if="!isLoading && showTests"
     ref="container"
-    class="tests-detail position-relative"
+    class="position-relative"
     data-testid="tests-detail"
   >
     <transition
@@ -69,13 +69,13 @@ export default {
       @before-enter="beforeEnterTransition"
       @after-leave="afterLeaveTransition"
     >
-      <div v-if="showSuite" key="detail" class="w-100 position-absolute slide-enter-to-element">
+      <div v-if="showSuite" key="detail" class="w-100 slide-enter-to-element">
         <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" />
 
         <test-suite-table />
       </div>
 
-      <div v-else key="summary" class="w-100 position-absolute slide-enter-from-element">
+      <div v-else key="summary" class="w-100 slide-enter-from-element">
         <test-summary :report="testReports" />
 
         <test-summary-table @row-click="summaryTableRowClick" />

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

@@ -1,7 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
-import { GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui';
+import { GlModalDirective, GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
+import TestCaseDetails from './test_case_details.vue';
 
 export default {
   name: 'TestsSuiteTable',
@@ -9,9 +10,11 @@ export default {
     GlIcon,
     GlFriendlyWrap,
     GlButton,
+    TestCaseDetails,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    GlModalDirective,
   },
   props: {
     heading: {
@@ -43,7 +46,7 @@ export default {
         <div role="rowheader" class="table-section section-20">
           {{ __('Suite') }}
         </div>
-        <div role="rowheader" class="table-section section-20">
+        <div role="rowheader" class="table-section section-40">
           {{ __('Name') }}
         </div>
         <div role="rowheader" class="table-section section-10">
@@ -52,12 +55,12 @@ export default {
         <div role="rowheader" class="table-section section-10 text-center">
           {{ __('Status') }}
         </div>
-        <div role="rowheader" class="table-section flex-grow-1">
+        <div role="rowheader" class="table-section section-10">
-          {{ __('Trace'), }}
-        </div>
-        <div role="rowheader" class="table-section section-10 text-right">
           {{ __('Duration') }}
         </div>
+        <div role="rowheader" class="table-section section-10">
+          {{ __('Details'), }}
+        </div>
       </div>
 
       <div
@@ -72,7 +75,7 @@ export default {
           </div>
         </div>
 
-        <div class="table-section section-20 section-wrap">
+        <div class="table-section section-40 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
           <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break">
             <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.name" />
@@ -107,24 +110,24 @@ export default {
           </div>
         </div>
 
-        <div class="table-section flex-grow-1">
-          <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div>
-          <div class="table-mobile-content">
-            <pre
-              v-if="testCase.system_output"
-              class="build-trace build-trace-rounded text-left"
-            ><code class="bash p-0">{{testCase.system_output}}</code></pre>
-          </div>
-        </div>
-
         <div class="table-section section-10 section-wrap">
           <div role="rowheader" class="table-mobile-header">
             {{ __('Duration') }}
           </div>
-          <div class="table-mobile-content text-right pr-sm-1">
+          <div class="table-mobile-content pr-sm-1">
             {{ testCase.formattedTime }}
           </div>
         </div>
+
+        <div class="table-section section-10 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Details'), }}</div>
+          <div class="table-mobile-content">
+            <gl-button v-gl-modal-directive="`test-case-details-${index}`">{{
+              __('View details')
+            }}</gl-button>
+            <test-case-details :modal-id="`test-case-details-${index}`" :test-case="testCase" />
+          </div>
+        </div>
       </div>
     </div>
 

app/assets/javascripts/reports/codequality_report/store/getters.js

@@ -1,5 +1,6 @@
 import { LOADING, ERROR, SUCCESS } from '../../constants';
 import { sprintf, __, s__, n__ } from '~/locale';
+import { spriteIcon } from '~/lib/utils/common_utils';
 
 export const hasCodequalityIssues = state =>
   Boolean(state.newIssues?.length || state.resolvedIssues?.length);
@@ -48,7 +49,7 @@ export const codequalityPopover = state => {
         s__('ciReport|%{linkStartTag}Learn more about codequality reports %{linkEndTag}'),
         {
           linkStartTag: `<a href="${state.helpPath}" target="_blank" rel="noopener noreferrer">`,
-          linkEndTag: '<i class="fa fa-external-link" aria-hidden="true"></i></a>',
+          linkEndTag: `${spriteIcon('external-link', 's16')}</a>`,
         },
         false,
       ),

app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue

@@ -16,10 +16,6 @@ export default {
       type: Object,
       required: true,
     },
-    rootPath: {
-      type: String,
-      required: true,
-    },
     tooltipPlacement: {
       type: String,
       default: 'bottom',
@@ -76,7 +72,7 @@ export default {
     <!-- use d-flex so that slot can be appropriately styled -->
     <span class="d-flex">
       <assignee-avatar :user="user" :img-size="32" :issuable-type="issuableType" />
-      <slot :user="user"></slot>
+      <slot></slot>
     </span>
   </gl-link>
 </template>

app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue

@@ -13,10 +13,6 @@ export default {
       type: Array,
       required: true,
     },
-    rootPath: {
-      type: String,
-      required: true,
-    },
     issuableType: {
       type: String,
       required: false,
@@ -66,22 +62,20 @@ export default {
 <template>
   <assignee-avatar-link
     v-if="hasOneUser"
-    #default="{ user }"
     tooltip-placement="left"
     :tooltip-has-name="false"
     :user="firstUser"
-    :root-path="rootPath"
     :issuable-type="issuableType"
   >
     <div class="ml-2 gl-line-height-normal">
-      <div>{{ user.name }}</div>
+      <div>{{ firstUser.name }}</div>
       <div>{{ username }}</div>
     </div>
   </assignee-avatar-link>
   <div v-else>
     <div class="user-list">
       <div v-for="user in uncollapsedUsers" :key="user.id" class="user-item">
-        <assignee-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType" />
+        <assignee-avatar-link :user="user" :issuable-type="issuableType" />
       </div>
     </div>
     <div v-if="renderShowMoreSection" class="user-list-more">

app/assets/javascripts/vue_shared/components/members/table/members_table.vue

@@ -27,6 +27,10 @@ export default {
     RoleDropdown,
     RemoveGroupLinkModal,
     ExpirationDatepicker,
+    LdapOverrideConfirmationModal: () =>
+      import(
+        'ee_component/vue_shared/components/members/ldap/ldap_override_confirmation_modal.vue'
+      ),
   },
   computed: {
     ...mapState(['members', 'tableFields']),
@@ -114,5 +118,6 @@ export default {
       </template>
     </gl-table>
     <remove-group-link-modal />
+    <ldap-override-confirmation-modal />
   </div>
 </template>

app/assets/javascripts/vuex_shared/modules/members/index.js

@@ -1,6 +1,6 @@
 import createState from 'ee_else_ce/vuex_shared/modules/members/state';
-import * as actions from './actions';
+import mutations from 'ee_else_ce/vuex_shared/modules/members/mutations';
-import mutations from './mutations';
+import * as actions from 'ee_else_ce/vuex_shared/modules/members/actions';
 
 export default initialState => ({
   namespaced: true,

app/assets/stylesheets/fontawesome_custom.scss

@@ -101,10 +101,6 @@
   content: '\f071';
 }
 
-.fa-external-link::before {
-  content: '\f08e';
-}
-
 .fa-spinner::before {
   content: '\f110';
 }

app/assets/stylesheets/framework/typography.scss

@@ -453,11 +453,9 @@
   h4,
   h5,
   h6 {
-    position: relative;
-
     a.anchor {
-      left: -16px;
+      float: left;
-      position: absolute;
+      margin-left: -16px;
       text-decoration: none;
       outline: none;
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -463,8 +463,7 @@ $mr-widget-min-height: 69px;
 
 .mr-list {
   .merge-request {
-    padding: 10px 0 10px 15px;
+    padding: 10px $gl-padding;
-    position: relative;
     display: flex;
 
     .issuable-info-container {

app/helpers/commits_helper.rb

@@ -196,7 +196,7 @@ module CommitsHelper
     return unless external_url
 
     link_to(external_url, class: 'btn btn-file-option has-tooltip', target: '_blank', rel: 'noopener noreferrer', title: "View on #{environment.formatted_external_url}", data: { container: 'body' }) do
-      icon('external-link')
+      sprite_icon('external-link')
     end
   end
 

app/views/clusters/clusters/aws/_new.html.haml

@@ -14,4 +14,4 @@
     'kubernetes-integration-help-path' => help_page_path('user/project/clusters/index'),
     'account-and-external-ids-help-path' => help_page_path('user/project/clusters/add_remove_clusters.md', anchor: 'new-eks-cluster'),
     'create-role-arn-help-path' => help_page_path('user/project/clusters/add_remove_clusters.md', anchor: 'new-eks-cluster'),
-    'external-link-icon' => icon('external-link') } }
+    'external-link-icon' => sprite_icon('external-link') } }

app/views/clusters/clusters/gcp/_form.html.haml

@@ -1,5 +1,5 @@
 = javascript_include_tag 'https://apis.google.com/js/api.js'
-- external_link_icon = icon('external-link')
+- external_link_icon = sprite_icon('external-link')
 - zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
 - machine_type_link_url = 'https://cloud.google.com/compute/docs/machine-types'
 - pricing_link_url = 'https://cloud.google.com/compute/pricing#machinetype'

app/views/layouts/nav/sidebar/_project.html.haml

@@ -272,7 +272,6 @@
                     .feature-highlight.js-feature-highlight{ disabled: true,
                       data: { trigger: 'manual',
                         container: 'body',
-                        toggle: 'popover',
                         placement: 'right',
                         highlight: UserCalloutsHelper::GKE_CLUSTER_INTEGRATION,
                         highlight_priority: UserCallout.feature_names[:GKE_CLUSTER_INTEGRATION],

app/views/projects/mattermosts/_no_teams.html.haml

@@ -9,7 +9,7 @@
   To install this service,
   = link_to "#{Gitlab.config.mattermost.host}/select_team", target: '__blank' do
     join a team
-    = icon('external-link')
+    = sprite_icon('external-link')
   and try again.
 %hr
 .clearfix

app/views/projects/mattermosts/_team_selection.html.haml

@@ -19,7 +19,7 @@
     To create a team,
     = link_to "#{Gitlab.config.mattermost.host}/create_team" do
       use Mattermost's interface
-      = icon('external-link')
+      = sprite_icon('external-link')
     or ask your Mattermost system administrator.
   %hr
   %h4 Command trigger word
@@ -38,7 +38,7 @@
       Reserved:
       = link_to 'https://docs.mattermost.com/help/messaging/executing-commands.html#built-in-commands', target: '__blank' do
         see list of built-in slash commands
-        = icon('external-link')
+        = sprite_icon('external-link')
   %hr
   .clearfix
     .float-right

changelogs/unreleased/225953-replace-fa-external-link-icons-with-gitlab-svg-external-link-icon.yml

@@ -0,0 +1,5 @@
+---
+title: Replace external-link icons with GitLab SVG
+merge_request: 45685
+author:
+type: changed

changelogs/unreleased/241534-test-report-modal.yml

@@ -0,0 +1,5 @@
+---
+title: Move test report system output to modal
+merge_request: 45575
+author:
+type: changed

changelogs/unreleased/27142-divider-in-readme-is-overlaying-with-image-anchor-solution.yml

@@ -0,0 +1,5 @@
+---
+title: Fix rendering of markdown headings and floated images
+merge_request: 25442
+author: Gwen_
+type: fixed

changelogs/unreleased/restore-spacing-mr-list-for-mobile.yml

@@ -0,0 +1,5 @@
+---
+title: Simplify CSS for Merge Requests (list)
+merge_request: 45785
+author: Takuya Noguchi
+type: other

doc/ci/cloud_deployment/index.md

@@ -281,3 +281,11 @@ When running your project pipeline at this point:
 - Your built application is pushed to your S3 bucket then and deployed to your EC2 instance, based
   on the related JSON object's content. The deployment job finishes whenever the deployment to EC2
   is done or has failed.
+
+#### Deploy Amazon EKS 
+
+- [How to deploy your application to a GitLab-managed Amazon EKS cluster with Auto DevOps](https://about.gitlab.com/blog/2020/05/05/deploying-application-eks/)
+
+#### Deploy to Google Cloud
+
+- [Deploying with GitLab on Google Cloud](https://about.gitlab.com/solutions/google-cloud-platform/)

doc/ci/environments/index.md

@@ -933,11 +933,10 @@ the [Kubernetes integration](../../user/project/clusters/index.md)), GitLab can
 a terminal session to your environment.
 
 This is a powerful feature that allows you to debug issues without leaving the comfort
-of your web browser. To enable it, just follow the instructions given in the service integration
+of your web browser. To enable it, follow the instructions given in the service integration
 documentation.
 
-NOTE: **Note:**
+Note that container-based deployments often lack basic tools (like an editor), and may
-Container-based deployments often lack basic tools (like an editor), and may
 be stopped or restarted at any time. If this happens, you will lose all your
 changes. Treat this as a debugging tool, not a comprehensive online IDE.
 

doc/ci/environments/protected_environments.md

@@ -72,8 +72,7 @@ they have the following privileges:
 Users granted access to a protected environment, but not push or merge access
 to the branch deployed to it, are only granted access to deploy the environment.
 
-NOTE: **Note:**
+Note that deployment-only access is the only possible access level for users with
-Deployment-only access is the only possible access level for users with
 [Reporter permissions](../../user/permissions.md).
 
 ## Modifying and unprotecting environments
@@ -84,7 +83,6 @@ Maintainers can:
   **Allowed to Deploy** dropdown menu.
 - Unprotect a protected environment by clicking the **Unprotect** button for that environment.
 
-NOTE: **Note:**
 After an environment is unprotected, all access entries are deleted and must
 be re-entered if the environment is re-protected.
 

doc/ci/examples/authenticating-with-hashicorp-vault/index.md

@@ -22,7 +22,8 @@ This tutorial assumes you are familiar with GitLab CI/CD and Vault.
 To follow along, you will need:
 
 - An account on GitLab.
-- A running Vault server and the access required to configure authentication and create roles and policies.
+- A running Vault server and access to it is required to configure authentication and create roles
+  and policies. For HashiCorp Vaults, this can be the Open Source or Enterprise version.
 
 NOTE: **Note:**
 You will need to replace the `vault.example.com` URL below with the URL of your Vault server and `gitlab.example.com` with the URL of your GitLab instance.

doc/ci/runners/README.md

@@ -392,7 +392,10 @@ you must have Owner [permissions](../../user/permissions.md#project-members-perm
 
 You must set up a runner to be able to run all the different types of jobs
 that it may encounter on the projects it's shared over. This would be
-problematic for large amounts of projects, if it weren't for tags.
+problematic for large amounts of projects, if it weren't for tags. 
+
+GitLab CI tags are not the same as Git tags. GitLab CI tags are associated with runners.
+Git tags are associated with commits.
 
 By tagging a runner for the types of jobs it can handle, you can make sure
 shared runners will [only run the jobs they are equipped to run](../yaml/README.md#tags).

doc/development/feature_flags/controls.md

@@ -92,9 +92,7 @@ Guidelines:
 
 1. If the feature meets the requirements for creating a [Change Management](https://about.gitlab.com/handbook/engineering/infrastructure/change-management/#feature-flags-and-the-change-management-process) issue, create a Change Management issue per [criticality guidelines](https://about.gitlab.com/handbook/engineering/infrastructure/change-management/#change-request-workflows).
 1. For simple, low-risk, easily reverted features, proceed and [enable the feature in `#production`](#process).
-1. For features that impact the user experience, consider notifying
+1. For features that impact the user experience, consider notifying `#support_gitlab-com` beforehand.
-  `#support_gitlab-com` first.
-  `#support_gitlab-com` beforehand.
 
 #### Process
 

doc/user/admin_area/analytics/dev_ops_report.md

@@ -10,6 +10,8 @@ The DevOps Report gives you an overview of your entire instance's adoption of
 [Concurrent DevOps](https://about.gitlab.com/topics/concurrent-devops/)
 from planning to monitoring.
 
+To see DevOps Report, go to **Admin Area > Analytics > DevOps Report**.
+
 ## DevOps Score
 
 DevOps Score displays the usage of GitLab's major features on your instance over

doc/user/admin_area/analytics/instance_statistics.md

@@ -4,6 +4,8 @@
 
 Instance Statistics gives you an overview of how much data your instance contains, and how quickly this volume is changing over time.
 
+To see Instance Statistics, go to **Admin Area > Analytics > Instance Statistics**.
+
 ## Total counts
 
 At the top of the page, Instance Statistics shows total counts for:
@@ -16,3 +18,12 @@ At the top of the page, Instance Statistics shows total counts for:
 - Pipelines
 
 These figures can be useful for understanding how much data your instance contains in total.
+
+## Past year trend charts
+
+Instance Statistics also displays line charts that show total counts per month, over the past 12 months,
+in the categories shown in [Total counts](#total-counts).
+
+These charts help you visualize how rapidly these records are being created on your instance.
+
+![Instance Activity Pipelines chart](img/instance_activity_pipelines_chart_v13_6.png)

doc/user/admin_area/analytics/user_cohorts.md

@@ -5,6 +5,8 @@
 As a benefit of having the [usage ping active](../settings/usage_statistics.md),
 GitLab lets you analyze the users' activities over time of your GitLab installation.
 
+To see User Cohorts, go to **Admin Area > Analytics > Cohorts**.
+
 ## Overview
 
 How do we read the user cohorts table? Let's take an example with the following

locale/gitlab.pot

@@ -8618,6 +8618,9 @@ msgstr ""
 msgid "Delete source branch"
 msgstr ""
 
+msgid "Delete subscription"
+msgstr ""
+
 msgid "Delete this attachment"
 msgstr ""
 
@@ -10762,6 +10765,9 @@ msgstr ""
 msgid "Excluding merge commits. Limited to 6,000 commits."
 msgstr ""
 
+msgid "Execution time"
+msgstr ""
+
 msgid "Existing branch name, tag, or commit SHA"
 msgstr ""
 
@@ -16256,6 +16262,15 @@ msgstr ""
 msgid "Members|%{time} by %{user}"
 msgstr ""
 
+msgid "Members|%{userName} is currently a LDAP user. Editing their permissions will override the settings from the LDAP group sync."
+msgstr ""
+
+msgid "Members|An error occurred while trying to enable LDAP override, please try again."
+msgstr ""
+
+msgid "Members|An error occurred while trying to revert to LDAP group sync settings, please try again."
+msgstr ""
+
 msgid "Members|An error occurred while updating the member's expiration date, please try again."
 msgstr ""
 
@@ -16283,6 +16298,9 @@ msgstr ""
 msgid "Members|Are you sure you want to withdraw your access request for \"%{source}\""
 msgstr ""
 
+msgid "Members|Edit permissions"
+msgstr ""
+
 msgid "Members|Expiration date removed successfully."
 msgstr ""
 
@@ -16292,6 +16310,9 @@ msgstr ""
 msgid "Members|Expired"
 msgstr ""
 
+msgid "Members|LDAP override enabled."
+msgstr ""
+
 msgid "Members|Leave \"%{source}\""
 msgstr ""
 
@@ -25702,6 +25723,9 @@ msgstr ""
 msgid "System metrics (Kubernetes)"
 msgstr ""
 
+msgid "System output"
+msgstr ""
+
 msgid "Table of Contents"
 msgstr ""
 
@@ -27828,9 +27852,6 @@ msgstr ""
 msgid "TotalRefCountIndicator|1000+"
 msgstr ""
 
-msgid "Trace"
-msgstr ""
-
 msgid "Tracing"
 msgstr ""
 

package.json

@@ -48,8 +48,8 @@
     "@rails/actioncable": "^6.0.3-3",
     "@rails/ujs": "^6.0.3-2",
     "@sourcegraph/code-host-integration": "0.0.50",
-    "@toast-ui/editor": "^2.4.0",
+    "@toast-ui/editor": "^2.5.0",
-    "@toast-ui/vue-editor": "^2.4.0",
+    "@toast-ui/vue-editor": "^2.5.0",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
@@ -80,7 +80,7 @@
     "deckar01-task_list": "^2.3.1",
     "diff": "^3.4.0",
     "document-register-element": "1.14.3",
-    "dompurify": "^2.1.1",
+    "dompurify": "^2.2.0",
     "dropzone": "^4.2.0",
     "editorconfig": "^0.15.3",
     "emoji-regex": "^7.0.3",

spec/frontend/pipelines/test_reports/test_case_details_spec.js

@@ -0,0 +1,74 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import TestCaseDetails from '~/pipelines/components/test_reports/test_case_details.vue';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+const localVue = createLocalVue();
+
+describe('Test case details', () => {
+  let wrapper;
+  const defaultTestCase = {
+    classname: 'spec.test_spec',
+    name: 'Test#something cool',
+    formattedTime: '10.04ms',
+    system_output: 'Line 42 is broken',
+  };
+
+  const findModal = () => wrapper.find(GlModal);
+  const findName = () => wrapper.find('[data-testid="test-case-name"]');
+  const findDuration = () => wrapper.find('[data-testid="test-case-duration"]');
+  const findSystemOutput = () => wrapper.find('[data-testid="test-case-trace"]');
+
+  const createComponent = (testCase = {}) => {
+    wrapper = shallowMount(TestCaseDetails, {
+      localVue,
+      propsData: {
+        modalId: 'my-modal',
+        testCase: {
+          ...defaultTestCase,
+          ...testCase,
+        },
+      },
+      stubs: { CodeBlock, GlModal },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('required details', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the test case classname as modal title', () => {
+      expect(findModal().attributes('title')).toBe(defaultTestCase.classname);
+    });
+
+    it('renders the test case name', () => {
+      expect(findName().text()).toBe(defaultTestCase.name);
+    });
+
+    it('renders the test case duration', () => {
+      expect(findDuration().text()).toBe(defaultTestCase.formattedTime);
+    });
+  });
+
+  describe('when test case has system output', () => {
+    it('renders the test case system output', () => {
+      createComponent();
+
+      expect(findSystemOutput().text()).toContain(defaultTestCase.system_output);
+    });
+  });
+
+  describe('when test case does not have system output', () => {
+    it('does not render the test case system output', () => {
+      createComponent({ system_output: null });
+
+      expect(findSystemOutput().exists()).toBe(false);
+    });
+  });
+});

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

@@ -1,7 +1,7 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { getJSONFixture } from 'helpers/fixtures';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFriendlyWrap } from '@gitlab/ui';
 import SuiteTable from '~/pipelines/components/test_reports/test_suite_table.vue';
 import * as getters from '~/pipelines/stores/test_reports/getters';
 import { TestStatus } from '~/pipelines/constants';
@@ -40,6 +40,7 @@ describe('Test reports suite table', () => {
     wrapper = shallowMount(SuiteTable, {
       store,
       localVue,
+      stubs: { GlFriendlyWrap },
     });
   };
 

spec/frontend/vue_shared/components/members/mock_data.js

@@ -3,6 +3,7 @@ export const member = {
   canUpdate: false,
   canRemove: false,
   canOverride: false,
+  isOverridden: false,
   accessLevel: { integerValue: 50, stringValue: 'Owner' },
   source: {
     id: 178,

yarn.lock

@@ -1173,20 +1173,20 @@
     dom-accessibility-api "^0.5.1"
     pretty-format "^26.4.2"
 
-"@toast-ui/editor@^2.4.0":
+"@toast-ui/editor@^2.5.0":
-  version "2.4.0"
+  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-2.4.0.tgz#0ed082da7e0160162dbc8f69d00ad3ab2adf81bc"
+  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-2.5.0.tgz#02779b119eaa6dd7601249d75ca031e0b98400f1"
-  integrity sha512-49YCYcDnCjv4mC9VVNlytJ23SA5t6ox540GnmysluJHJ8aGRdWcVoH8hiyCZi9ZVIXi90B/TU+2HUQ7mOCHHRQ==
+  integrity sha512-h4LgcGz+oedTqNAaSCp0VpR+k4C6Ag01hdDb1kPvO4aMQ/aTtT8uA34plpmYQgJvM0CWD1mXqWUSPkyJtRzDyA==
   dependencies:
     "@types/codemirror" "0.0.71"
     codemirror "^5.48.4"
 
-"@toast-ui/vue-editor@^2.4.0":
+"@toast-ui/vue-editor@^2.5.0":
-  version "2.4.0"
+  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/@toast-ui/vue-editor/-/vue-editor-2.4.0.tgz#18b6629006f2dac5bfef4a26388499931d5fa869"
+  resolved "https://registry.yarnpkg.com/@toast-ui/vue-editor/-/vue-editor-2.5.0.tgz#8094136588b0f726241b5f89d0754a7169f2ffee"
-  integrity sha512-fj4H4jM+usW43mD0VEIfBeUpANY9/pQLB8GlXLQH2iAmpmJFX+xMZl6r7d/vw6TDJaHLfFxP/iXcYIfyJobepQ==
+  integrity sha512-GREAaVOe5esQaQFmFCZLjo6iOtIvqvYhANulvsKpbh4QNnsPLaFRIQoUDSImNPVGkDDQn60wxXBnZVKOl9sMmg==
   dependencies:
-    "@toast-ui/editor" "^2.4.0"
+    "@toast-ui/editor" "^2.5.0"
 
 "@types/aria-query@^4.2.0":
   version "4.2.0"
@@ -4174,10 +4174,10 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-dompurify@^2.1.1:
+dompurify@^2.1.1, dompurify@^2.2.0:
-  version "2.1.1"
+  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.1.1.tgz#b5aa988676b093a9c836d8b855680a8598af25fe"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.0.tgz#51d34e76faa38b5d6b4e83a0678530f27fe3965c"
-  integrity sha512-NijiNVkS/OL8mdQL1hUbCD6uty/cgFpmNiuFxrmJ5YPH2cXrPKIewoixoji56rbZ6XBPmtM8GA8/sf9unlSuwg==
+  integrity sha512-bqFOQ7XRmmozp0VsKdIEe8UwZYxj0yttz7l80GBtBqdVRY48cOpXH2J/CVO7AEkV51qY0EBVXfilec18mdmQ/w==
 
 domutils@^1.5.1:
   version "1.6.2"