Add latest changes from gitlab-org/gitlab@master

3 files changed, 160 insertions, 201 deletions

diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
deleted file mode 100644
index 5b624c17b0c..00000000000
--- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<script>
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlLoadingIcon,
-  GlTooltip,
-  GlSprintf,
-  GlButton,
-} from '@gitlab/ui';
-import { createAlert } from '~/flash';
-import updateIssuableSeverity from '../../queries/update_issuable_severity.mutation.graphql';
-import { INCIDENT_SEVERITY, ISSUABLE_TYPES, SEVERITY_I18N as I18N } from '../../constants';
-import SeverityToken from './severity.vue';
-
-export default {
-  i18n: I18N,
-  components: {
-    GlLoadingIcon,
-    GlTooltip,
-    GlSprintf,
-    GlDropdown,
-    GlDropdownItem,
-    GlButton,
-    SeverityToken,
-  },
-  inject: ['canUpdate'],
-  props: {
-    projectPath: {
-      type: String,
-      required: true,
-    },
-    iid: {
-      type: String,
-      required: true,
-    },
-    initialSeverity: {
-      type: String,
-      required: false,
-      default: INCIDENT_SEVERITY.UNKNOWN.value,
-    },
-    issuableType: {
-      type: String,
-      required: false,
-      default: ISSUABLE_TYPES.INCIDENT,
-      validator: (value) => {
-        // currently severity is supported only for incidents, but this list might be extended
-        return [ISSUABLE_TYPES.INCIDENT].includes(value);
-      },
-    },
-  },
-  data() {
-    return {
-      isDropdownShowing: false,
-      isUpdating: false,
-      severity: this.initialSeverity,
-    };
-  },
-  computed: {
-    severitiesList() {
-      switch (this.issuableType) {
-        case ISSUABLE_TYPES.INCIDENT:
-          return Object.values(INCIDENT_SEVERITY);
-        default:
-          return [];
-      }
-    },
-    dropdownClass() {
-      return this.isDropdownShowing ? 'show' : 'gl-display-none';
-    },
-    selectedItem() {
-      return this.severitiesList.find((severity) => severity.value === this.severity);
-    },
-  },
-  mounted() {
-    document.addEventListener('click', this.handleOffClick);
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.handleOffClick);
-  },
-  methods: {
-    handleOffClick(event) {
-      if (!this.isDropdownShowing) {
-        return;
-      }
-
-      if (!this.$refs.sidebarSeverity.contains(event.target)) {
-        this.hideDropdown();
-      }
-    },
-    hideDropdown() {
-      this.isDropdownShowing = false;
-      const event = new Event('hidden.gl.dropdown');
-      this.$el.dispatchEvent(event);
-    },
-    toggleFormDropdown() {
-      this.isDropdownShowing = !this.isDropdownShowing;
-    },
-    updateSeverity(value) {
-      this.hideDropdown();
-      this.isUpdating = true;
-      this.$apollo
-        .mutate({
-          mutation: updateIssuableSeverity,
-          variables: {
-            iid: this.iid,
-            severity: value,
-            projectPath: this.projectPath,
-          },
-        })
-        .then((resp) => {
-          const {
-            data: {
-              issueSetSeverity: {
-                errors = [],
-                issue: { severity },
-              },
-            },
-          } = resp;
-
-          if (errors[0]) {
-            throw errors[0];
-          }
-          this.severity = severity;
-        })
-        .catch(() =>
-          createAlert({
-            message: `${this.$options.i18n.UPDATE_SEVERITY_ERROR} ${this.$options.i18n.TRY_AGAIN}`,
-          }),
-        )
-        .finally(() => {
-          this.isUpdating = false;
-        });
-    },
-  },
-};
-</script>
-
-<template>
-  <div ref="sidebarSeverity" class="block">
-    <div ref="severity" class="sidebar-collapsed-icon" @click="toggleFormDropdown">
-      <severity-token :severity="selectedItem" :icon-size="14" :icon-only="true" />
-      <gl-tooltip :target="() => $refs.severity" boundary="viewport" placement="left">
-        <gl-sprintf :message="$options.i18n.SEVERITY_VALUE">
-          <template #severity>
-            {{ selectedItem.label }}
-          </template>
-        </gl-sprintf>
-      </gl-tooltip>
-    </div>
-
-    <div class="hide-collapsed">
-      <div
-        class="gl-display-flex gl-align-items-center gl-line-height-20 gl-text-gray-900 gl-font-weight-bold"
-      >
-        {{ $options.i18n.SEVERITY }}
-        <gl-button
-          v-if="canUpdate"
-          category="tertiary"
-          size="small"
-          class="gl-ml-auto hide-collapsed gl-mr-n2"
-          data-testid="editButton"
-          @click="toggleFormDropdown"
-          @keydown.esc="hideDropdown"
-        >
-          {{ $options.i18n.EDIT }}
-        </gl-button>
-      </div>
-
-      <gl-dropdown
-        class="gl-mt-3"
-        :class="dropdownClass"
-        block
-        :header-text="__('Assign severity')"
-        :text="selectedItem.label"
-        toggle-class="dropdown-menu-toggle gl-mb-2"
-        @keydown.esc.native="hideDropdown"
-      >
-        <gl-dropdown-item
-          v-for="option in severitiesList"
-          :key="option.value"
-          data-testid="severityDropdownItem"
-          is-check-item
-          :is-checked="option.value === severity"
-          @click="updateSeverity(option.value)"
-        >
-          <severity-token :severity="option" />
-        </gl-dropdown-item>
-      </gl-dropdown>
-
-      <gl-loading-icon v-if="isUpdating" size="sm" :inline="true" />
-
-      <severity-token v-else-if="!isDropdownShowing" :severity="selectedItem" />
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue
new file mode 100644
index 00000000000..ecb9a2809a0
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue
@@ -0,0 +1,154 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlTooltip, GlSprintf } from '@gitlab/ui';
+import { createAlert } from '~/flash';
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
+import updateIssuableSeverity from '../../queries/update_issuable_severity.mutation.graphql';
+import { INCIDENT_SEVERITY, ISSUABLE_TYPES, SEVERITY_I18N as I18N } from '../../constants';
+import SeverityToken from './severity.vue';
+
+export default {
+  i18n: I18N,
+  components: {
+    GlTooltip,
+    GlSprintf,
+    GlDropdown,
+    GlDropdownItem,
+    SeverityToken,
+    SidebarEditableItem,
+  },
+  inject: ['canUpdate'],
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    iid: {
+      type: String,
+      required: true,
+    },
+    initialSeverity: {
+      type: String,
+      required: false,
+      default: INCIDENT_SEVERITY.UNKNOWN.value,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: ISSUABLE_TYPES.INCIDENT,
+      validator: (value) => {
+        // currently severity is supported only for incidents, but this list might be extended
+        return [ISSUABLE_TYPES.INCIDENT].includes(value);
+      },
+    },
+  },
+  data() {
+    return {
+      isUpdating: false,
+      severity: this.initialSeverity,
+    };
+  },
+  computed: {
+    severitiesList() {
+      switch (this.issuableType) {
+        case ISSUABLE_TYPES.INCIDENT:
+          return Object.values(INCIDENT_SEVERITY);
+        default:
+          return [];
+      }
+    },
+    selectedItem() {
+      return this.severitiesList.find((severity) => severity.value === this.severity);
+    },
+  },
+  methods: {
+    updateSeverity(value) {
+      this.$refs.toggle.collapse();
+      this.isUpdating = true;
+      this.$apollo
+        .mutate({
+          mutation: updateIssuableSeverity,
+          variables: {
+            iid: this.iid,
+            severity: value,
+            projectPath: this.projectPath,
+          },
+        })
+        .then((resp) => {
+          const {
+            data: {
+              issueSetSeverity: {
+                errors = [],
+                issue: { severity },
+              },
+            },
+          } = resp;
+
+          if (errors[0]) {
+            throw errors[0];
+          }
+          this.severity = severity;
+        })
+        .catch(() =>
+          createAlert({
+            message: `${this.$options.i18n.UPDATE_SEVERITY_ERROR} ${this.$options.i18n.TRY_AGAIN}`,
+          }),
+        )
+        .finally(() => {
+          this.isUpdating = false;
+        });
+    },
+    showDropdown() {
+      this.$refs.dropdown.show();
+    },
+  },
+};
+</script>
+
+<template>
+  <div ref="sidebarSeverity" class="block">
+    <sidebar-editable-item
+      ref="toggle"
+      :loading="isUpdating"
+      :title="$options.i18n.SEVERITY"
+      :can-edit="canUpdate"
+      @open="showDropdown"
+    >
+      <template #collapsed>
+        <div ref="severity" class="sidebar-collapsed-icon">
+          <severity-token :severity="selectedItem" :icon-size="14" :icon-only="true" />
+          <gl-tooltip :target="() => $refs.severity" boundary="viewport" placement="left">
+            <gl-sprintf :message="$options.i18n.SEVERITY_VALUE">
+              <template #severity>
+                {{ selectedItem.label }}
+              </template>
+            </gl-sprintf>
+          </gl-tooltip>
+        </div>
+        <div class="hide-collapsed">
+          <severity-token :severity="selectedItem" />
+        </div>
+      </template>
+
+      <template #default>
+        <gl-dropdown
+          ref="dropdown"
+          class="gl-mt-3"
+          block
+          :header-text="__('Assign severity')"
+          :text="selectedItem.label"
+        >
+          <gl-dropdown-item
+            v-for="option in severitiesList"
+            :key="option.value"
+            data-testid="severityDropdownItem"
+            is-check-item
+            :is-checked="option.value === severity"
+            @click="updateSeverity(option.value)"
+          >
+            <severity-token :severity="option" />
+          </gl-dropdown-item>
+        </gl-dropdown>
+      </template>
+    </sidebar-editable-item>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index a308dc8d13c..fc12b0b04eb 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -34,7 +34,7 @@ import SidebarParticipantsWidget from './components/participants/sidebar_partici
 import SidebarReferenceWidget from './components/copy/sidebar_reference_widget.vue';
 import SidebarReviewers from './components/reviewers/sidebar_reviewers.vue';
 import SidebarReviewersInputs from './components/reviewers/sidebar_reviewers_inputs.vue';
-import SidebarSeverity from './components/severity/sidebar_severity.vue';
+import SidebarSeverityWidget from './components/severity/sidebar_severity_widget.vue';
 import SidebarDropdownWidget from './components/sidebar_dropdown_widget.vue';
 import StatusDropdown from './components/status/status_dropdown.vue';
 import SidebarSubscriptionsWidget from './components/subscriptions/sidebar_subscriptions_widget.vue';
@@ -576,8 +576,8 @@ function mountSidebarTimeTracking() {
   });
 }
 
-function mountSidebarSeverity() {
-  const el = document.querySelector('.js-sidebar-severity-root');
+function mountSidebarSeverityWidget() {
+  const el = document.querySelector('.js-sidebar-severity-widget-root');
 
   if (!el) {
     return null;
@@ -587,13 +587,13 @@ function mountSidebarSeverity() {
 
   return new Vue({
     el,
-    name: 'SidebarSeverityRoot',
+    name: 'SidebarSeverityWidgetRoot',
     apolloProvider,
     provide: {
       canUpdate: editable,
     },
     render: (createElement) =>
-      createElement(SidebarSeverity, {
+      createElement(SidebarSeverityWidget, {
         props: {
           projectPath: fullPath,
           iid: String(iid),
@@ -725,7 +725,7 @@ export function mountSidebar(mediator, store) {
   mountSidebarSubscriptionsWidget();
   mountCopyEmailToClipboard();
   mountSidebarTimeTracking();
-  mountSidebarSeverity();
+  mountSidebarSeverityWidget();
   mountSidebarEscalationStatus();
 
   new SidebarMoveIssue(