Add latest changes from gitlab-org/gitlab@master

3 files changed, 59 insertions, 55 deletions

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 e6db30384dc..2ee735fd123 100644
--- a/app/assets/javascripts/issuables_list/components/issuable.vue
+++ b/app/assets/javascripts/issuables_list/components/issuable.vue
@@ -6,7 +6,7 @@
 
 // TODO: need to move this component to graphql - https://gitlab.com/gitlab-org/gitlab/-/issues/221246
 import { escape, isNumber } from 'lodash';
-import { GlLink, GlTooltipDirective as GlTooltip, GlLabel } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective as GlTooltip, GlSprintf, GlLabel } from '@gitlab/ui';
 import {
   dateInWords,
   formatDate,
@@ -24,12 +24,15 @@ import { isScopedLabel } from '~/lib/utils/common_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
-  isScopedLabel,
+  i18n: {
+    openedAgo: __('opened %{timeAgoString} by %{user}'),
+  },
   components: {
     Icon,
     IssueAssignees,
     GlLink,
     GlLabel,
+    GlSprintf,
   },
   directives: {
     GlTooltip,
@@ -105,23 +108,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;
@@ -167,7 +168,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: {
     issuableLink(params) {
@@ -233,9 +234,22 @@ export default {
         <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
diff --git a/app/assets/javascripts/jira_import/components/jira_import_app.vue b/app/assets/javascripts/jira_import/components/jira_import_app.vue
index ef0fc4716dd..25068d498d2 100644
--- a/app/assets/javascripts/jira_import/components/jira_import_app.vue
+++ b/app/assets/javascripts/jira_import/components/jira_import_app.vue
@@ -98,6 +98,7 @@ export default {
             input: {
               projectPath: this.projectPath,
               jiraProjectKey: project,
+              usersMapping: [],
             },
           },
           update: (store, { data }) =>