1 files changed, 17 insertions, 1 deletions
diff --git a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
index 7551b181a58..cc88812c7b0 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
@@ -14,6 +14,11 @@ export default {
     },
   },
   props: {
+    buttonId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     title: {
       type: String,
       required: false,
@@ -48,6 +53,11 @@ export default {
       required: false,
       default: true,
     },
+    shouldShowConfirmationPopover: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -97,6 +107,11 @@ export default {
       window.removeEventListener('keyup', this.collapseOnEscape);
     },
     toggle({ emitEvent = true } = {}) {
+      if (this.shouldShowConfirmationPopover) {
+        this.$emit('edit-confirm');
+        return;
+      }
+
       if (this.edit) {
         this.collapse({ emitEvent });
       } else {
@@ -132,6 +147,7 @@ export default {
       <slot name="collapsed-right"></slot>
       <gl-button
         v-if="canUpdate && !initialLoading && canEdit"
+        :id="buttonId"
         category="tertiary"
         size="small"
         class="gl-text-gray-900! gl-ml-auto hide-collapsed gl-mr-n2 shortcut-sidebar-dropdown-toggle"
@@ -151,7 +167,7 @@ export default {
         <slot name="collapsed">{{ __('None') }}</slot>
       </div>
       <div v-show="edit" data-testid="expanded-content" :class="{ 'gl-mt-3': !isClassicSidebar }">
-        <slot :edit="edit"></slot>
+        <slot :edit="edit" :toggle="toggle"></slot>
       </div>
     </template>
   </div>