Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

1 files changed, 21 insertions, 53 deletions

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 2595d67af34..194b482c12e 100644
--- a/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue
+++ b/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue
@@ -1,7 +1,5 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import updateToolbarItemMutation from '~/editor/graphql/update_item.mutation.graphql';
-import getToolbarItemQuery from '~/editor/graphql/get_item.query.graphql';
 
 export default {
   name: 'SourceEditorToolbarButton',
@@ -20,70 +18,40 @@ export default {
       },
     },
   },
-  data() {
-    return {
-      buttonItem: this.button,
-    };
-  },
-  apollo: {
-    buttonItem: {
-      query: getToolbarItemQuery,
-      variables() {
-        return {
-          id: this.button.id,
-        };
-      },
-      update({ item }) {
-        return item;
-      },
-      skip() {
-        return !this.button.id;
-      },
-    },
-  },
   computed: {
     icon() {
-      return this.buttonItem.selected
-        ? this.buttonItem.selectedIcon || this.buttonItem.icon
-        : this.buttonItem.icon;
+      return this.button.selected ? this.button.selectedIcon || this.button.icon : this.button.icon;
     },
     label() {
-      return this.buttonItem.selected
-        ? this.buttonItem.selectedLabel || this.buttonItem.label
-        : this.buttonItem.label;
+      return this.button.selected
+        ? this.button.selectedLabel || this.button.label
+        : this.button.label;
+    },
+    showButton() {
+      return Object.entries(this.button).length > 0;
     },
   },
   methods: {
     clickHandler() {
-      if (this.buttonItem.onClick) {
-        this.buttonItem.onClick();
+      if (this.button.onClick) {
+        this.button.onClick();
       }
-      this.$apollo.mutate({
-        mutation: updateToolbarItemMutation,
-        variables: {
-          id: this.buttonItem.id,
-          propsToUpdate: {
-            selected: !this.buttonItem.selected,
-          },
-        },
-      });
       this.$emit('click');
     },
   },
 };
 </script>
 <template>
-  <div>
-    <gl-button
-      v-gl-tooltip.hover
-      :category="buttonItem.category"
-      :variant="buttonItem.variant"
-      type="button"
-      :selected="buttonItem.selected"
-      :icon="icon"
-      :title="label"
-      :aria-label="label"
-      @click="clickHandler"
-    />
-  </div>
+  <gl-button
+    v-if="showButton"
+    v-gl-tooltip.hover
+    :category="button.category"
+    :variant="button.variant"
+    type="button"
+    :selected="button.selected"
+    :icon="icon"
+    :title="label"
+    :aria-label="label"
+    @click="clickHandler"
+  />
 </template>