From 11e9b7b58837da351f08c18e6f0f4faba4d7d301 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Mon, 29 Jun 2020 19:21:38 +0000
Subject: Add latest changes from gitlab-org/security/gitlab@13-1-stable-ee

---
 .../error_tracking/components/stacktrace_entry.vue | 57 ++++++++------------
 .../issuables_list/components/issuable.vue         | 61 ++++++++++++++--------
 2 files changed, 61 insertions(+), 57 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
index f7f2c450be1..d806c6934a3 100644
--- a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
+++ b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
@@ -1,7 +1,5 @@
 <script>
-import { escape } from 'lodash';
-import { GlTooltip } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { GlTooltip, GlSprintf } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -11,6 +9,7 @@ export default {
     ClipboardButton,
     FileIcon,
     Icon,
+    GlSprintf,
   },
   directives: {
     GlTooltip,
@@ -57,36 +56,6 @@ export default {
     collapseIcon() {
       return this.isExpanded ? 'chevron-down' : 'chevron-right';
     },
-    errorFnText() {
-      return this.errorFn
-        ? sprintf(
-            __(`%{spanStart}in%{spanEnd} %{errorFn}`),
-            {
-              errorFn: `<strong>${escape(this.errorFn)}</strong>`,
-              spanStart: `<span class="text-tertiary">`,
-              spanEnd: `</span>`,
-            },
-            false,
-          )
-        : '';
-    },
-    errorPositionText() {
-      return this.errorLine
-        ? sprintf(
-            __(`%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}`),
-            {
-              errorLine: `<strong>${this.errorLine}</strong>`,
-              errorColumn: this.errorColumn ? `:<strong>${this.errorColumn}</strong>` : ``,
-              spanStart: `<span class="text-tertiary">`,
-              spanEnd: `</span>`,
-            },
-            false,
-          )
-        : '';
-    },
-    errorInfo() {
-      return `${this.errorFnText} ${this.errorPositionText}`;
-    },
   },
   methods: {
     isHighlighted(lineNum) {
@@ -132,7 +101,27 @@ export default {
           :text="filePath"
           css-class="btn-default btn-transparent btn-clipboard position-static"
         />
-        <span v-html="errorInfo"></span>
+
+        <gl-sprintf v-if="errorFn" :message="__('%{spanStart}in%{spanEnd} %{errorFn}')">
+          <template #span="{content}">
+            <span class="gl-text-gray-400">{{ content }}&nbsp;</span>
+          </template>
+          <template #errorFn>
+            <strong>{{ errorFn }}&nbsp;</strong>
+          </template>
+        </gl-sprintf>
+
+        <gl-sprintf :message="__('%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}')">
+          <template #span="{content}">
+            <span class="gl-text-gray-400">{{ content }}&nbsp;</span>
+          </template>
+          <template #errorLine>
+            <strong>{{ errorLine }}</strong>
+          </template>
+          <template #errorColumn>
+            <strong v-if="errorColumn">:{{ errorColumn }}</strong>
+          </template>
+        </gl-sprintf>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/issuables_list/components/issuable.vue b/app/assets/javascripts/issuables_list/components/issuable.vue
index 2fd92e009eb..947c7518289 100644
--- a/app/assets/javascripts/issuables_list/components/issuable.vue
+++ b/app/assets/javascripts/issuables_list/components/issuable.vue
@@ -4,7 +4,7 @@
  * any changes done to the haml need to be reflected here.
  */
 import { escape, isNumber } from 'lodash';
-import { GlLink, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective as GlTooltip, GlSprintf } from '@gitlab/ui';
 import {
   dateInWords,
   formatDate,
@@ -20,10 +20,14 @@ import Icon from '~/vue_shared/components/icon.vue';
 import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
 
 export default {
+  i18n: {
+    openedAgo: __('opened %{timeAgoString} by %{user}'),
+  },
   components: {
     Icon,
     IssueAssignees,
     GlLink,
+    GlSprintf,
   },
   directives: {
     GlTooltip,
@@ -98,23 +102,21 @@ export default {
       }
       return __('Milestone');
     },
-    openedAgoByString() {
-      const { author, created_at } = this.issuable;
+    issuableAuthor() {
+      return this.issuable.author;
+    },
+    issuableCreatedAt() {
+      return getTimeago().format(this.issuable.created_at);
+    },
+    popoverDataAttrs() {
+      const { id, username, name, avatar_url } = this.issuableAuthor;
 
-      return sprintf(
-        __('opened %{timeAgoString} by %{user}'),
-        {
-          timeAgoString: escape(getTimeago().format(created_at)),
-          user: `<a href="${escape(author.web_url)}"
-            data-user-id=${escape(author.id)}
-            data-username=${escape(author.username)}
-            data-name=${escape(author.name)}
-            data-avatar-url="${escape(author.avatar_url)}">
-            ${escape(author.name)}
-          </a>`,
-        },
-        false,
-      );
+      return {
+        'data-user-id': id,
+        'data-username': username,
+        'data-name': name,
+        'data-avatar-url': avatar_url,
+      };
     },
     referencePath() {
       return this.issuable.references.relative;
@@ -160,7 +162,7 @@ export default {
   mounted() {
     // TODO: Refactor user popover to use its own component instead of
     // spawning event listeners on Vue-rendered elements.
-    initUserPopovers([this.$refs.openedAgoByContainer.querySelector('a')]);
+    initUserPopovers([this.$refs.openedAgoByContainer.$el]);
   },
   methods: {
     labelStyle(label) {
@@ -221,17 +223,30 @@ export default {
             ></i>
             <gl-link :href="issuable.web_url">{{ issuable.title }}</gl-link>
           </span>
-          <span v-if="issuable.has_tasks" class="ml-1 task-status d-none d-sm-inline-block">{{
-            issuable.task_status
-          }}</span>
+          <span v-if="issuable.has_tasks" class="ml-1 task-status d-none d-sm-inline-block">
+            {{ issuable.task_status }}
+          </span>
         </div>
 
         <div class="issuable-info">
           <span class="js-ref-path">{{ referencePath }}</span>
 
-          <span class="d-none d-sm-inline-block mr-1">
+          <span data-testid="openedByMessage" class="d-none d-sm-inline-block mr-1">
             &middot;
-            <span ref="openedAgoByContainer" v-html="openedAgoByString"></span>
+            <gl-sprintf :message="$options.i18n.openedAgo">
+              <template #timeAgoString>
+                <span>{{ issuableCreatedAt }}</span>
+              </template>
+              <template #user>
+                <gl-link
+                  ref="openedAgoByContainer"
+                  v-bind="popoverDataAttrs"
+                  :href="issuableAuthor.web_url"
+                >
+                  {{ issuableAuthor.name }}
+                </gl-link>
+              </template>
+            </gl-sprintf>
           </span>
 
           <gl-link
-- 
cgit v1.2.3