Add latest changes from gitlab-org/gitlab@master

10 files changed, 73 insertions, 28 deletions

diff --git a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
index 1a586bd1e91..bc4df04cb30 100644
--- a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
+++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
@@ -159,8 +159,10 @@ export default {
       </div>
 
       <div class="gl-display-table-cell gl-pr-3 gl-vertical-align-middle">
-        <div class="right-arrow">
-          <i class="right-arrow-head"></i>
+        <div class="right-arrow gl-relative gl-w-full gl-bg-gray-400">
+          <i
+            class="right-arrow-head gl-absolute gl-border-solid gl-border-gray-400 gl-display-inline-block gl-p-2"
+          ></i>
         </div>
       </div>
 
diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index beb3497e250..92f3c3fb8fa 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -90,6 +90,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    disableAttachments: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -223,7 +228,11 @@ export default {
         class="md-area gl-border-none! gl-shadow-none!"
         :class="{ 'is-focused': focused }"
       >
-        <formatting-toolbar ref="toolbar" @enableMarkdownEditor="$emit('enableMarkdownEditor')" />
+        <formatting-toolbar
+          ref="toolbar"
+          :hide-attachment-button="disableAttachments"
+          @enableMarkdownEditor="$emit('enableMarkdownEditor')"
+        />
         <div v-if="showPlaceholder" class="gl-absolute gl-text-gray-400 gl-px-5 gl-pt-4">
           {{ placeholder }}
         </div>
diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index fac259cf6a1..89d7a2c958c 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -16,6 +16,13 @@ export default {
     ToolbarMoreDropdown,
     EditorModeSwitcher,
   },
+  props: {
+    hideAttachmentButton: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
   methods: {
     trackToolbarControlExecution({ contentType, value }) {
       trackUIControl({ property: contentType, value });
@@ -114,6 +121,7 @@ export default {
         />
         <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
         <toolbar-attachment-button
+          v-if="!hideAttachmentButton"
           data-testid="attachment"
           @execute="trackToolbarControlExecution"
         />
diff --git a/app/assets/javascripts/pages/admin/topics/edit/index.js b/app/assets/javascripts/pages/admin/topics/edit/index.js
index b2cbd52fb27..901fd9193a5 100644
--- a/app/assets/javascripts/pages/admin/topics/edit/index.js
+++ b/app/assets/javascripts/pages/admin/topics/edit/index.js
@@ -1,11 +1,10 @@
-import $ from 'jquery';
-import GLForm from '~/gl_form';
 import initFilePickers from '~/file_pickers';
 import ZenMode from '~/zen_mode';
 import { initRemoveAvatar } from '~/admin/topics';
+import { mountMarkdownEditor } from '~/vue_shared/components/markdown/mount_markdown_editor';
 
-new GLForm($('.js-project-topic-form')); // eslint-disable-line no-new
 initFilePickers();
 new ZenMode(); // eslint-disable-line no-new
 
 initRemoveAvatar();
+mountMarkdownEditor();
diff --git a/app/assets/javascripts/pages/admin/topics/new/index.js b/app/assets/javascripts/pages/admin/topics/new/index.js
index c4e05bbd092..fc9ca4fd4e6 100644
--- a/app/assets/javascripts/pages/admin/topics/new/index.js
+++ b/app/assets/javascripts/pages/admin/topics/new/index.js
@@ -1,8 +1,7 @@
-import $ from 'jquery';
-import GLForm from '~/gl_form';
 import initFilePickers from '~/file_pickers';
 import ZenMode from '~/zen_mode';
+import { mountMarkdownEditor } from '~/vue_shared/components/markdown/mount_markdown_editor';
 
-new GLForm($('.js-project-topic-form')); // eslint-disable-line no-new
 initFilePickers();
 new ZenMode(); // eslint-disable-line no-new
+mountMarkdownEditor();
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue
index 936938f3032..4258332ed6e 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue
@@ -1,5 +1,6 @@
 <script>
 import { createAlert } from '~/alert';
+import { joinPaths } from '~/lib/utils/url_utility';
 import commitReferencesQuery from '../graphql/queries/commit_references.query.graphql';
 import containingBranchesQuery from '../graphql/queries/commit_containing_branches.query.graphql';
 import containingTagsQuery from '../graphql/queries/commit_containing_tags.query.graphql';
@@ -64,6 +65,10 @@ export default {
         commitSha: this.commitSha,
       };
     },
+    commitsUrlPart() {
+      const urlPart = joinPaths(gon.relative_url_root || '', `/${this.fullPath}`, `/-/commits/`);
+      return urlPart;
+    },
   },
   methods: {
     async fetchContainingRefs({ query, namespace }) {
@@ -106,6 +111,7 @@ export default {
       :tipping-refs="tippingBranches"
       :containing-refs="containingBranches"
       :namespace="$options.i18n.branches"
+      :url-part="commitsUrlPart"
       @[$options.fetchContainingRefsEvent]="fetchContainingBranches"
     />
     <refs-list
@@ -115,6 +121,7 @@ export default {
       :tipping-refs="tippingTags"
       :containing-refs="containingTags"
       :namespace="$options.i18n.tags"
+      :url-part="commitsUrlPart"
       @[$options.fetchContainingRefsEvent]="fetchContainingTags"
     />
   </div>
diff --git a/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue b/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue
index 602fa26efa7..7e21040a3b1 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue
@@ -12,6 +12,10 @@ export default {
     GlIcon,
   },
   props: {
+    urlPart: {
+      type: String,
+      required: true,
+    },
     containingRefs: {
       type: Array,
       required: false,
@@ -66,9 +70,14 @@ export default {
 <template>
   <div class="gl-pt-4">
     <span data-testid="title" class="gl-mr-2">{{ namespace }}</span>
-    <gl-badge v-for="ref in tippingRefs" :key="ref" class="gl-mt-2 gl-mr-2" size="sm">{{
-      ref
-    }}</gl-badge>
+    <gl-badge
+      v-for="ref in tippingRefs"
+      :key="ref"
+      :href="`${urlPart}${ref}`"
+      class="gl-mt-2 gl-mr-2"
+      size="sm"
+      >{{ ref }}</gl-badge
+    >
     <gl-button
       v-if="hasContainingRefs"
       class="gl-mr-2 gl-font-sm!"
@@ -82,9 +91,14 @@ export default {
     <gl-collapse :visible="isContainingRefsVisible">
       <gl-skeleton-loader v-if="isLoadingRefs" :lines="1" />
       <template v-else>
-        <gl-badge v-for="ref in containingRefs" :key="ref" class="gl-mt-3 gl-mr-2" size="sm">{{
-          ref
-        }}</gl-badge>
+        <gl-badge
+          v-for="ref in containingRefs"
+          :key="ref"
+          :href="`${urlPart}${ref}`"
+          class="gl-mt-3 gl-mr-2"
+          size="sm"
+          >{{ ref }}</gl-badge
+        >
       </template>
     </gl-collapse>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
index d9d4056e997..9fd606d775d 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
@@ -95,6 +95,11 @@ export default {
       required: false,
       default: false,
     },
+    disableAttachments: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -111,6 +116,9 @@ export default {
       // Match textarea focus behavior
       return this.autofocus && !this.autofocused ? 'end' : false;
     },
+    markdownFieldRestrictedToolBarItems() {
+      return this.disableAttachments ? ['attach-file'] : [];
+    },
   },
   watch: {
     value(val) {
@@ -231,7 +239,7 @@ export default {
       v-bind="$attrs"
       data-testid="markdown-field"
       :markdown-preview-path="renderMarkdownPath"
-      can-attach-file
+      :can-attach-file="!disableAttachments"
       :textarea-value="markdown"
       :uploads-path="uploadsPath"
       :enable-autocomplete="enableAutocomplete"
@@ -240,6 +248,7 @@ export default {
       :quick-actions-docs-path="quickActionsDocsPath"
       :show-content-editor-switcher="enableContentEditor"
       :drawio-enabled="drawioEnabled"
+      :restricted-tool-bar-items="markdownFieldRestrictedToolBarItems"
       :remove-border="true"
       @enableContentEditor="onEditingModeChange('contentEditor')"
       @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
@@ -256,8 +265,7 @@ export default {
           :disabled="disabled"
           @input="updateMarkdownFromMarkdownField"
           @keydown="$emit('keydown', $event)"
-        >
-        </textarea>
+        ></textarea>
       </template>
     </markdown-field>
     <div v-else>
@@ -273,6 +281,7 @@ export default {
         :enable-autocomplete="enableAutocomplete"
         :autocomplete-data-sources="autocompleteDataSources"
         :editable="!disabled"
+        :disable-attachments="disableAttachments"
         @initialized="setEditorAsAutofocused"
         @change="updateMarkdownFromContentEditor"
         @keydown="$emit('keydown', $event)"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js
index ac4f06a665d..8ff14220eab 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js
+++ b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { queryToObject, objectToQuery } from '~/lib/utils/url_utility';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import { CLEAR_AUTOSAVE_ENTRY_EVENT } from '../../constants';
 import MarkdownEditor from './markdown_editor.vue';
 import eventHub from './eventhub';
@@ -67,6 +68,9 @@ export function mountMarkdownEditor() {
     newIssuePath,
   } = el.dataset;
 
+  const supportsQuickActions = parseBoolean(el.dataset.supportsQuickActions ?? true);
+  const enableAutocomplete = parseBoolean(el.dataset.enableAutocomplete ?? true);
+  const disableAttachments = parseBoolean(el.dataset.disableAttachments ?? false);
   const hiddenInput = el.querySelector('input[type="hidden"]');
   const formFieldName = hiddenInput.getAttribute('name');
   const formFieldId = hiddenInput.getAttribute('id');
@@ -102,9 +106,11 @@ export function mountMarkdownEditor() {
             'data-qa-selector': qaSelector,
           },
           autosaveKey,
-          enableAutocomplete: true,
+          enableAutocomplete,
           autocompleteDataSources: gl.GfmAutoComplete?.dataSources,
-          supportsQuickActions: true,
+          supportsQuickActions,
+          disableAttachments,
+          autofocus: true,
         },
       });
     },
diff --git a/app/assets/stylesheets/page_bundles/alert_management_settings.scss b/app/assets/stylesheets/page_bundles/alert_management_settings.scss
index ed2707ffbcd..7abde7c1a11 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_settings.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_settings.scss
@@ -3,21 +3,13 @@
 $stroke-size: 1px;
 
 .right-arrow {
-  @include gl-relative;
-  @include gl-w-full;
   height: $stroke-size;
-  background-color: var(--gray-400, $gray-400);
   min-width: $gl-spacing-scale-5;
 
   &-head {
-    @include gl-absolute;
     top: -$gl-spacing-scale-2;
     left: calc(100% - #{$gl-spacing-scale-3} - #{2 * $stroke-size});
-    border-color: var(--gray-400, $gray-400);
-    @include gl-border-solid;
     border-width: 0 $stroke-size $stroke-size 0;
-    @include gl-display-inline-block;
-    @include gl-p-2;
     transform: rotate(-45deg);
   }
 }