Add latest changes from gitlab-org/gitlab@master

5 files changed, 38 insertions, 36 deletions

diff --git a/app/assets/javascripts/editor/components/source_editor_toolbar.vue b/app/assets/javascripts/editor/components/source_editor_toolbar.vue
index 0afee7bebe0..f2550d753d6 100644
--- a/app/assets/javascripts/editor/components/source_editor_toolbar.vue
+++ b/app/assets/javascripts/editor/components/source_editor_toolbar.vue
@@ -1,6 +1,5 @@
 <script>
 import { isEmpty } from 'lodash';
-import { GlButtonGroup } from '@gitlab/ui';
 import getToolbarItemsQuery from '~/editor/graphql/get_items.query.graphql';
 import { EDITOR_TOOLBAR_BUTTON_GROUPS } from '~/editor/constants';
 import SourceEditorToolbarButton from './source_editor_toolbar_button.vue';
@@ -9,7 +8,6 @@ export default {
   name: 'SourceEditorToolbar',
   components: {
     SourceEditorToolbarButton,
-    GlButtonGroup,
   },
   data() {
     return {
@@ -52,31 +50,34 @@ export default {
   <section
     v-if="isVisible"
     id="se-toolbar"
-    class="gl-py-3 gl-px-5 gl-bg-white gl-border-b gl-display-flex gl-align-items-center"
+    class="file-buttons gl-display-flex gl-align-items-center gl-justify-content-end"
   >
-    <gl-button-group v-if="hasGroupItems($options.groups.file)">
+    <div v-if="hasGroupItems($options.groups.file)">
       <source-editor-toolbar-button
         v-for="item in getGroupItems($options.groups.file)"
         :key="item.id"
         :button="item"
         @click="$emit('click', item)"
       />
-    </gl-button-group>
-    <gl-button-group v-if="hasGroupItems($options.groups.edit)">
+    </div>
+    <div
+      v-if="hasGroupItems($options.groups.edit)"
+      class="md-header-toolbar gl-display-flex gl-flex-wrap gl-gap-3 gl-ml-auto"
+    >
       <source-editor-toolbar-button
         v-for="item in getGroupItems($options.groups.edit)"
         :key="item.id"
         :button="item"
         @click="$emit('click', item)"
       />
-    </gl-button-group>
-    <gl-button-group v-if="hasGroupItems($options.groups.settings)" class="gl-ml-auto">
+    </div>
+    <div v-if="hasGroupItems($options.groups.settings)" class="gl-align-self-start">
       <source-editor-toolbar-button
         v-for="item in getGroupItems($options.groups.settings)"
         :key="item.id"
         :button="item"
         @click="$emit('click', item)"
       />
-    </gl-button-group>
+    </div>
   </section>
 </template>
diff --git a/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue b/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue
index 38f586f0773..996ecea04e5 100644
--- a/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue
+++ b/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue
@@ -30,6 +30,15 @@ export default {
     showButton() {
       return Object.entries(this.button).length > 0;
     },
+    showLabel() {
+      if (this.button.category === 'tertiary' && this.button.icon) {
+        return false;
+      }
+      return true;
+    },
+    isSelected() {
+      return this.button.category === 'tertiary' && this.button.selected;
+    },
   },
   mounted() {
     if (this.button.data) {
@@ -55,11 +64,12 @@ export default {
     :category="button.category"
     :variant="button.variant"
     type="button"
-    :selected="button.selected"
+    :selected="isSelected"
     :icon="icon"
     :title="label"
     :aria-label="label"
     :class="button.class"
     @click="clickHandler($event)"
-  />
+    ><template v-if="showLabel">{{ label }}</template></gl-button
+  >
 </template>
diff --git a/app/assets/javascripts/editor/extensions/source_editor_extension_base.js b/app/assets/javascripts/editor/extensions/source_editor_extension_base.js
index 8ec83e4df1c..905126cae52 100644
--- a/app/assets/javascripts/editor/extensions/source_editor_extension_base.js
+++ b/app/assets/javascripts/editor/extensions/source_editor_extension_base.js
@@ -151,6 +151,7 @@ export class SourceEditorExtension {
           instance.toolbar.updateItem(EXTENSION_SOFTWRAP_ID, {
             selected: !isSoftWrapped,
           });
+          document.querySelector('.soft-wrap-toggle')?.blur();
         }
       },
     };
diff --git a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
index 9ec1a97ba1a..60aa00da861 100644
--- a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
+++ b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
@@ -14,7 +14,6 @@ import {
   EXTENSION_MARKDOWN_PREVIEW_UPDATE_DELAY,
   EXTENSION_MARKDOWN_PREVIEW_LABEL,
   EXTENSION_MARKDOWN_HIDE_PREVIEW_LABEL,
-  EDITOR_TOOLBAR_BUTTON_GROUPS,
 } from '../constants';
 
 const fetchPreview = (text, previewMarkdownPath) => {
@@ -58,9 +57,6 @@ export class EditorMarkdownPreviewExtension {
     this.toolbarButtons = [];
 
     this.setupPreviewAction(instance);
-    if (instance.toolbar) {
-      this.setupToolbar(instance);
-    }
 
     const debouncedResizeHandler = debounce((entries) => {
       for (const entry of entries) {
@@ -104,25 +100,6 @@ export class EditorMarkdownPreviewExtension {
     instance.layout({ width, height });
   }
 
-  setupToolbar(instance) {
-    this.toolbarButtons = [
-      {
-        id: EXTENSION_MARKDOWN_PREVIEW_ACTION_ID,
-        label: EXTENSION_MARKDOWN_PREVIEW_LABEL,
-        icon: 'live-preview',
-        selected: false,
-        group: EDITOR_TOOLBAR_BUTTON_GROUPS.settings,
-        category: 'primary',
-        selectedLabel: EXTENSION_MARKDOWN_HIDE_PREVIEW_LABEL,
-        onClick: () => instance.togglePreview(),
-        data: {
-          qaSelector: 'editor_toolbar_button',
-        },
-      },
-    ];
-    instance.toolbar.addItems(this.toolbarButtons);
-  }
-
   togglePreviewLayout(instance) {
     const { width } = instance.getLayoutInfo();
     let newWidth;
diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss
index 9e9723d2e5a..0c1979424b1 100644
--- a/app/assets/stylesheets/page_bundles/editor.scss
+++ b/app/assets/stylesheets/page_bundles/editor.scss
@@ -110,11 +110,13 @@
 
     .file-buttons {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      justify-content: space-between;
       width: 100%;
+      padding: $gl-padding-8 0 0;
 
       .md-header-toolbar {
-        margin: $gl-padding 0;
+        margin-left: 0;
       }
 
       .soft-wrap-toggle {
@@ -129,6 +131,17 @@
   }
 }
 
+@include media-breakpoint-down(sm) {
+  .file-editor .file-buttons {
+    flex-direction: column;
+    padding: 0;
+
+    .md-header-toolbar {
+      margin: $gl-padding-8 0;
+    }
+  }
+}
+
 .blob-new-page-title,
 .blob-edit-page-title {
   margin: 19px 0 21px;