Add latest changes from gitlab-org/gitlab@master

33 files changed, 123 insertions, 126 deletions

diff --git a/app/assets/javascripts/ide/components/branches/item.vue b/app/assets/javascripts/ide/components/branches/item.vue
index e7f4cd796b5..49744d573da 100644
--- a/app/assets/javascripts/ide/components/branches/item.vue
+++ b/app/assets/javascripts/ide/components/branches/item.vue
@@ -33,7 +33,7 @@ export default {
 
 <template>
   <a :href="branchHref" class="btn-link d-flex align-items-center">
-    <span class="d-flex append-right-default ide-search-list-current-icon">
+    <span class="d-flex gl-mr-3 ide-search-list-current-icon">
       <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
index 6a399fc352c..3ffbcbf99e8 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
@@ -12,7 +12,7 @@ export default {
   <div v-if="!lastCommitMsg" class="multi-file-commit-panel-section ide-commit-empty-state">
     <div class="ide-commit-empty-state-container">
       <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
-      <div class="append-right-default gl-ml-3">
+      <div class="gl-mr-3 gl-ml-3">
         <div class="text-content text-center">
           <h4>{{ __('No changes') }}</h4>
           <p>{{ __('Edit files in the editor and commit changes here') }}</p>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
index 35c8e5fb479..327b0b8172f 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -13,7 +13,7 @@ export default {
     <div class="svg-content svg-80">
       <img :src="committedStateSvgPath" :alt="s__('IDE|Successful commit')" />
     </div>
-    <div class="append-right-default gl-ml-3">
+    <div class="gl-mr-3 gl-ml-3">
       <div class="text-content text-center">
         <h4>{{ __('All changes are committed') }}</h4>
         <p v-html="lastCommitMsg"></p>
diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index d459e3b43d3..b6a57d1b6e6 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -48,7 +48,7 @@ export default {
 
 <template>
   <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
-    <strong class="append-right-default"> {{ __('File templates') }} </strong>
+    <strong class="gl-mr-3"> {{ __('File templates') }} </strong>
     <dropdown
       :data="templateTypes"
       :label="selectedTemplateType.name || __('Choose a type...')"
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index be8bf77bba0..db3630bc1d1 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div class="ide-job-item">
-    <job-description :job="job" class="append-right-default" />
+    <job-description :job="job" class="gl-mr-3" />
     <div class="ml-auto align-self-center">
       <button v-if="job.started" type="button" class="btn btn-default btn-sm" @click="clickViewLog">
         {{ __('View log') }}
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
index 3f060392686..8b7b8d5a91c 100644
--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -40,7 +40,7 @@ export default {
 
 <template>
   <a :href="mergeRequestHref" class="btn-link d-flex align-items-center">
-    <span class="d-flex append-right-default ide-search-list-current-icon">
+    <span class="d-flex gl-mr-3 ide-search-list-current-icon">
       <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index bf2a33be653..af45d88b84a 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -102,7 +102,7 @@ export default {
                 class="btn-link d-flex align-items-center"
                 @click.stop="setSearchType(searchType)"
               >
-                <span class="d-flex append-right-default ide-search-list-current-icon">
+                <span class="d-flex gl-mr-3 ide-search-list-current-icon">
                   <icon :size="18" name="search" />
                 </span>
                 <span>{{ searchType.label }}</span>
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 4dfc27117c0..a70611413ae 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -8,9 +8,10 @@ import ModelManager from './common/model_manager';
 import { editorOptions, defaultEditorOptions, defaultDiffEditorOptions } from './editor_options';
 import { themes } from './themes';
 import languages from './languages';
+import schemas from './schemas';
 import keymap from './keymap.json';
 import { clearDomElement } from '~/editor/utils';
-import { registerLanguages } from '../utils';
+import { registerLanguages, registerSchemas } from '../utils';
 
 function setupThemes() {
   themes.forEach(theme => {
@@ -44,6 +45,7 @@ export default class Editor {
 
     setupThemes();
     registerLanguages(...languages);
+    registerSchemas(...schemas);
 
     this.debouncedUpdate = debounce(() => {
       this.updateDimensions();
diff --git a/app/assets/javascripts/ide/lib/schemas/index.js b/app/assets/javascripts/ide/lib/schemas/index.js
new file mode 100644
index 00000000000..38a2f81921b
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/schemas/index.js
@@ -0,0 +1,4 @@
+import json from './json';
+import yaml from './yaml';
+
+export default [json, yaml];
diff --git a/app/assets/javascripts/ide/lib/schemas/json/index.js b/app/assets/javascripts/ide/lib/schemas/json/index.js
new file mode 100644
index 00000000000..900d5442bec
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/schemas/json/index.js
@@ -0,0 +1,8 @@
+export default {
+  language: 'json',
+  options: {
+    validate: true,
+    enableSchemaRequest: true,
+    schemas: [],
+  },
+};
diff --git a/app/assets/javascripts/ide/lib/schemas/yaml/gitlab_ci.js b/app/assets/javascripts/ide/lib/schemas/yaml/gitlab_ci.js
new file mode 100644
index 00000000000..af20744abb3
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/schemas/yaml/gitlab_ci.js
@@ -0,0 +1,4 @@
+export default {
+  uri: 'https://json.schemastore.org/gitlab-ci',
+  fileMatch: ['*.gitlab-ci.yml'],
+};
diff --git a/app/assets/javascripts/ide/lib/schemas/yaml/index.js b/app/assets/javascripts/ide/lib/schemas/yaml/index.js
new file mode 100644
index 00000000000..e3fc406df4b
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/schemas/yaml/index.js
@@ -0,0 +1,12 @@
+import gitlabCi from './gitlab_ci';
+
+export default {
+  language: 'yaml',
+  options: {
+    validate: true,
+    enableSchemaRequest: true,
+    hover: true,
+    completion: true,
+    schemas: [gitlabCi],
+  },
+};
diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js
index c28a2bd9f1d..9ec7b2c06ce 100644
--- a/app/assets/javascripts/ide/utils.js
+++ b/app/assets/javascripts/ide/utils.js
@@ -66,7 +66,7 @@ export const trimPathComponents = path =>
     .join('/');
 
 export function registerLanguages(def, ...defs) {
-  if (defs.length) defs.forEach(lang => registerLanguages(lang));
+  defs.forEach(lang => registerLanguages(lang));
 
   const languageId = def.id;
 
@@ -75,6 +75,19 @@ export function registerLanguages(def, ...defs) {
   languages.setLanguageConfiguration(languageId, def.conf);
 }
 
+export function registerSchemas({ language, options }, ...schemas) {
+  schemas.forEach(schema => registerSchemas(schema));
+
+  const defaults = {
+    json: languages.json.jsonDefaults,
+    yaml: languages.yaml.yamlDefaults,
+  };
+
+  if (defaults[language]) {
+    defaults[language].setDiagnosticsOptions(options);
+  }
+}
+
 export const otherSide = side => (side === SIDE_RIGHT ? SIDE_LEFT : SIDE_RIGHT);
 
 export function trimTrailingWhitespace(content) {
diff --git a/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue b/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue
index 49a89d15c35..f859384916b 100644
--- a/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue
+++ b/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue
@@ -1,5 +1,7 @@
 <script>
 import { GlAlert, GlLabel } from '@gitlab/ui';
+import { last } from 'lodash';
+import { n__ } from '~/locale';
 import getIssuesListDetailsQuery from '../queries/get_issues_list_details.query.graphql';
 import {
   calculateJiraImportLabel,
@@ -47,6 +49,7 @@ export default {
         };
       },
       update: ({ project }) => ({
+        importedIssuesCount: last(project.jiraImports.nodes)?.importedIssuesCount,
         isInProgress: isInProgress(project.jiraImportStatus),
         isFinished: isFinished(project.jiraImportStatus),
         label: calculateJiraImportLabel(
@@ -60,6 +63,13 @@ export default {
     },
   },
   computed: {
+    finishedMessage() {
+      return n__(
+        '%d issue successfully imported with the label',
+        '%d issues successfully imported with the label',
+        this.jiraImport.importedIssuesCount,
+      );
+    },
     labelTarget() {
       return `${this.issuesPath}?label_name[]=${encodeURIComponent(this.jiraImport.label.title)}`;
     },
@@ -87,7 +97,7 @@ export default {
       {{ __('Import in progress. Refresh page to see newly added issues.') }}
     </gl-alert>
     <gl-alert v-if="shouldShowFinishedAlert" variant="success" @dismiss="hideFinishedAlert">
-      {{ __('Issues successfully imported with the label') }}
+      {{ finishedMessage }}
       <gl-label
         :background-color="jiraImport.label.color"
         scoped
diff --git a/app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql b/app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql
index b62b9b2af60..8f9b888d19b 100644
--- a/app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql
+++ b/app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql
@@ -1,5 +1,3 @@
-#import "~/jira_import/queries/jira_import.fragment.graphql"
-
 query($fullPath: ID!) {
   project(fullPath: $fullPath) {
     issues {
@@ -15,7 +13,8 @@ query($fullPath: ID!) {
     jiraImportStatus
     jiraImports {
       nodes {
-        ...JiraImport
+        importedIssuesCount
+        jiraProjectKey
       }
     }
   }
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index 6c252a1eca4..4ee44e50d2f 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -81,7 +81,7 @@ export default {
       v-if="shouldShowDeleteButton"
       :class="{ disabled: deleteLoading }"
       :disabled="deleteLoading"
-      class="btn btn-danger float-right append-right-default qa-delete-button"
+      class="btn btn-danger float-right gl-mr-3 qa-delete-button"
       type="button"
       @click="deleteIssuable"
     >
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
index 67646c537bd..a71dc65e07e 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
@@ -72,7 +72,7 @@ export default {
         <gl-deprecated-button
           v-if="showBack"
           size="sm"
-          class="append-right-default js-back-button"
+          class="gl-mr-3 js-back-button"
           @click="onBackClick"
         >
           <icon name="angle-left" />
diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue
index 51062cd7928..1b47d03aa01 100644
--- a/app/assets/javascripts/reports/components/report_item.vue
+++ b/app/assets/javascripts/reports/components/report_item.vue
@@ -52,7 +52,7 @@ export default {
       v-if="showReportSectionStatusIcon"
       :status="status"
       :status-icon-size="statusIconSize"
-      class="append-right-default"
+      class="gl-mr-3"
     />
 
     <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index b9fc902cd3a..65efc24e968 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -45,7 +45,7 @@ export default {
 </script>
 <template>
   <div class="report-block-list-issue report-block-list-issue-parent align-items-center">
-    <div class="report-block-list-icon append-right-default">
+    <div class="report-block-list-icon gl-mr-3">
       <gl-loading-icon
         v-if="statusIcon === 'loading'"
         css-class="report-block-list-loading-icon"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index 6faa0eeab98..24174c29d51 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -59,7 +59,7 @@ export default {
 
       <template v-else>
         <button
-          class="btn-blank btn s32 square append-right-default"
+          class="btn-blank btn s32 square gl-mr-3"
           type="button"
           :aria-label="ariaLabel"
           :disabled="isLoading"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue
index fd9a370fe05..fd999540f4a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue
@@ -46,7 +46,7 @@ export default {
   <div>
     <div class="mr-widget-body gl-display-flex">
       <span
-        class="gl-display-flex gl-align-items-center gl-justify-content-center append-right-default gl-align-self-start gl-mt-1"
+        class="gl-display-flex gl-align-items-center gl-justify-content-center gl-mr-3 gl-align-self-start gl-mt-1"
       >
         <gl-icon :name="iconName" :size="24" />
       </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
index 57d4d8b7ae6..e1659d9a167 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
@@ -13,7 +13,7 @@ export default {
 </script>
 
 <template>
-  <div class="circle-icon-container append-right-default align-self-start align-self-lg-center">
+  <div class="circle-icon-container gl-mr-3 align-self-start align-self-lg-center">
     <icon :name="name" :size="24" />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index db0f225da8f..3c468adc176 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -129,7 +129,7 @@ export default {
       <div class="media-body gl-ml-3" v-html="errorText"></div>
     </template>
     <template v-else-if="hasPipeline">
-      <a :href="status.details_path" class="align-self-start append-right-default">
+      <a :href="status.details_path" class="align-self-start gl-mr-3">
         <ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
       </a>
       <div class="ci-widget-container d-flex">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index d0df8309dc7..82566682bca 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 <template>
   <div class="d-flex align-self-start">
-    <div class="square s24 h-auto d-flex-center append-right-default">
+    <div class="square s24 h-auto d-flex-center gl-mr-3">
       <div v-if="isLoading" class="mr-widget-icon d-inline-flex">
         <gl-loading-icon size="md" class="mr-loading-icon d-inline-flex" />
       </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
index e4f4032776b..d52e6d38ac6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -83,7 +83,7 @@ export default {
       <gl-deprecated-button
         :aria-label="ariaLabel"
         variant="blank"
-        class="commit-edit-toggle square s24 append-right-default"
+        class="commit-edit-toggle square s24 gl-mr-3"
         @click.stop="toggle()"
       >
         <icon :name="collapseIcon" :size="16" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
index 14e0a9e18a3..efd58341a2d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
@@ -1,6 +1,7 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -25,12 +26,22 @@ export default {
       default: false,
     },
   },
+  computed: {
+    tooltipTitle() {
+      return this.isDisabled ? __('Required in this project.') : false;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="inline">
-    <label :class="{ 'gl-text-gray-600': isDisabled }" data-testid="squashLabel">
+    <label
+      v-tooltip
+      :class="{ 'gl-text-gray-600': isDisabled }"
+      data-testid="squashLabel"
+      :data-title="tooltipTitle"
+    >
       <input
         :checked="value"
         :disabled="isDisabled"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
index 81e6b234a24..7695570753c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
@@ -58,7 +58,7 @@ export default {
 <template>
   <div class="gl-display-flex">
     <span
-      class="gl-display-flex gl-align-items-center gl-justify-content-center append-right-default gl-align-self-start gl-mt-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-mr-3 gl-align-self-start gl-mt-1"
     >
       <gl-icon :name="iconType" :size="18" data-testid="change-type-icon" />
     </span>
diff --git a/app/assets/javascripts/vue_shared/components/file_finder/index.vue b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
index fa69a4abb21..d6f591ccca1 100644
--- a/app/assets/javascripts/vue_shared/components/file_finder/index.vue
+++ b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
@@ -261,7 +261,7 @@ export default {
             </li>
           </template>
           <li v-else class="dropdown-menu-empty-item">
-            <div class="append-right-default gl-ml-3 gl-mt-3 gl-mb-3">
+            <div class="gl-mr-3 gl-ml-3 gl-mt-3 gl-mb-3">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index e26ff51e01e..54e837882ce 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -53,14 +53,9 @@ export default {
     },
     tooltipMessage() {
       return this.canApply
-        ? __('This also resolves the discussion')
+        ? __('This also resolves this thread')
         : __("Can't apply as this line has changed or the suggestion already matches its content.");
     },
-    tooltipMessageBatch() {
-      return !this.canBeBatched
-        ? __("Suggestions that change line count can't be added to batches, yet.")
-        : this.tooltipMessage;
-    },
     isDisableButton() {
       return this.isApplying || !this.canApply;
     },
@@ -129,15 +124,14 @@ export default {
       </gl-deprecated-button>
     </div>
     <div v-else class="d-flex align-items-center">
-      <span v-if="canBeBatched" v-gl-tooltip.viewport="tooltipMessageBatch" tabindex="0">
-        <gl-deprecated-button
-          class="btn-inverted js-add-to-batch-btn btn-grouped"
-          :disabled="isDisableButton"
-          @click="addSuggestionToBatch"
-        >
-          {{ __('Add suggestion to batch') }}
-        </gl-deprecated-button>
-      </span>
+      <gl-deprecated-button
+        v-if="canBeBatched && !isDisableButton"
+        class="btn-inverted js-add-to-batch-btn btn-grouped"
+        :disabled="isDisableButton"
+        @click="addSuggestionToBatch"
+      >
+        {{ __('Add suggestion to batch') }}
+      </gl-deprecated-button>
       <span v-gl-tooltip.viewport="tooltipMessage" tabindex="0">
         <gl-deprecated-button
           class="btn-inverted js-apply-btn btn-grouped"
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_custom_renderer.js b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_custom_renderer.js
index 92bb2c2ca7c..28cd33454ea 100644
--- a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_custom_renderer.js
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_custom_renderer.js
@@ -1,10 +1,11 @@
 import renderKramdownList from './renderers/render_kramdown_list';
 import renderKramdownText from './renderers/render_kramdown_text';
-import renderIdentifierText from './renderers/render_identifier_text';
+import renderIdentifierParagraph from './renderers/render_identifier_paragraph';
 import renderEmbeddedRubyText from './renderers/render_embedded_ruby_text';
 
 const listRenderers = [renderKramdownList];
-const textRenderers = [renderKramdownText, renderIdentifierText, renderEmbeddedRubyText];
+const paragraphRenderers = [renderIdentifierParagraph];
+const textRenderers = [renderKramdownText, renderEmbeddedRubyText];
 
 const executeRenderer = (renderers, node, context) => {
   const availableRenderer = renderers.find(renderer => renderer.canRender(node, context));
@@ -22,13 +23,18 @@ const buildCustomRendererFunctions = (customRenderers, defaults) => {
   return Object.fromEntries(customEntries);
 };
 
-const buildCustomHTMLRenderer = (customRenderers = { list: [], text: [] }) => {
+const buildCustomHTMLRenderer = (customRenderers = { list: [], paragraph: [], text: [] }) => {
   const defaults = {
     list(node, context) {
       const allListRenderers = [...customRenderers.list, ...listRenderers];
 
       return executeRenderer(allListRenderers, node, context);
     },
+    paragraph(node, context) {
+      const allParagraphRenderers = [...customRenderers.list, ...paragraphRenderers];
+
+      return executeRenderer(allParagraphRenderers, node, context);
+    },
     text(node, context) {
       const allTextRenderers = [...customRenderers.text, ...textRenderers];
 
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph.js b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph.js
new file mode 100644
index 00000000000..f5b4502ea3c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph.js
@@ -0,0 +1,16 @@
+import { buildUneditableOpenTokens, buildUneditableCloseToken } from './build_uneditable_token';
+
+const identifierRegex = /(^\[.+\]: .+)/;
+
+const isIdentifier = text => {
+  return identifierRegex.test(text);
+};
+
+const canRender = (node, context) => {
+  return isIdentifier(context.getChildrenText(node));
+};
+
+const render = (_, { entering, origin }) =>
+  entering ? buildUneditableOpenTokens(origin()) : buildUneditableCloseToken();
+
+export default { canRender, render };
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_text.js b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_text.js
deleted file mode 100644
index a1c1f20b923..00000000000
--- a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_text.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  buildUneditableOpenTokens,
-  buildUneditableCloseTokens,
-  buildUneditableTokens,
-} from './build_uneditable_token';
-
-const identifierRegex = /(^\[.+\]: .+)/;
-
-const isBasicIdentifier = ({ literal }) => {
-  return identifierRegex.test(literal);
-};
-
-const isInlineCodeNode = ({ type, tickCount }) => type === 'code' && tickCount === 1;
-
-const hasAdjacentInlineCode = (isForward, node) => {
-  const direction = isForward ? 'next' : 'prev';
-
-  let currentNode = node;
-  while (currentNode[direction] && currentNode.literal !== null) {
-    if (isInlineCodeNode(currentNode)) {
-      return true;
-    }
-
-    currentNode = currentNode[direction];
-  }
-
-  return false;
-};
-
-const hasEnteringPotential = literal => literal.includes('[');
-const hasExitingPotential = literal => literal.includes(']: ');
-
-const hasAdjacentExit = node => {
-  let currentNode = node;
-
-  while (currentNode && currentNode.literal !== null) {
-    if (hasExitingPotential(currentNode.literal)) {
-      return true;
-    }
-
-    currentNode = currentNode.next;
-  }
-
-  return false;
-};
-
-const isEnteringWithAdjacentInlineCode = ({ literal, next }) => {
-  if (next && hasEnteringPotential(literal) && !hasExitingPotential(literal)) {
-    return hasAdjacentInlineCode(true, next) && hasAdjacentExit(next);
-  }
-
-  return false;
-};
-
-const isExitingWithAdjacentInlineCode = ({ literal, prev }) => {
-  if (prev && !hasEnteringPotential(literal) && hasExitingPotential(literal)) {
-    return hasAdjacentInlineCode(false, prev);
-  }
-
-  return false;
-};
-
-const isAdjacentInlineCodeIdentifier = node => {
-  return isEnteringWithAdjacentInlineCode(node) || isExitingWithAdjacentInlineCode(node);
-};
-
-const canRender = (node, context) => {
-  return isBasicIdentifier(node) || isAdjacentInlineCodeIdentifier(node, context);
-};
-
-const render = (node, { origin }) => {
-  if (isEnteringWithAdjacentInlineCode(node)) {
-    return buildUneditableOpenTokens(origin());
-  } else if (isExitingWithAdjacentInlineCode(node)) {
-    return buildUneditableCloseTokens(origin());
-  }
-
-  return buildUneditableTokens(origin());
-};
-
-export default { canRender, render };
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index cb15e939eab..365b7358e16 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -408,7 +408,6 @@ img.emoji {
 .append-right-5 { margin-right: 5px; }
 .append-right-10 { margin-right: 10px; }
 .append-right-15 { margin-right: 15px; }
-.append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-20 { margin-bottom: 20px; }