From 02a7af108372c3fe1ea61e95073d1e24ce9f70b4 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Mon, 19 Sep 2022 15:28:56 -0600
Subject: [PATCH] Keep new MR dropdown open when toggling notifications
---
.../subscriptions/sidebar_subscriptions_widget.vue | 7 ++++---
app/assets/stylesheets/page_bundles/merge_requests.scss | 6 ++++++
.../merge_request/user_manages_subscription_spec.rb | 4 ----
3 files changed, 10 insertions(+), 7 deletions(-)
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
index e5bee4df9b849..61e4aa5a8e6b7 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -1,5 +1,5 @@
<script>
-import { GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
+import { GlDropdownForm, GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
import createFlash from '~/flash';
import { IssuableType } from '~/issues/constants';
import { isLoggedIn } from '~/lib/utils/common_utils';
@@ -22,6 +22,7 @@ export default {
GlTooltip: GlTooltipDirective,
},
components: {
+ GlDropdownForm,
GlIcon,
GlLoadingIcon,
GlToggle,
@@ -181,7 +182,7 @@ export default {
</script>
<template>
- <div v-if="isMergeRequest" class="gl-new-dropdown-item">
+ <gl-dropdown-form v-if="isMergeRequest" class="gl-new-dropdown-item">
<div class="gl-px-5 gl-pb-2 gl-pt-1">
<gl-toggle
:value="subscribed"
@@ -192,7 +193,7 @@ export default {
@change="toggleSubscribed"
/>
</div>
- </div>
+ </gl-dropdown-form>
<sidebar-editable-item
v-else
ref="editable"
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 719e4b5aa6de7..4b7ee575d736f 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -832,6 +832,8 @@ $tabs-holder-z-index: 250;
.detail-page-header-actions {
.gl-toggle {
@include gl-ml-auto;
+ @include gl-rounded-pill;
+ @include gl-w-9;
}
}
@@ -844,3 +846,7 @@ $tabs-holder-z-index: 250;
@include gl-font-weight-normal;
}
}
+
+.dropdown-menu li button.gl-toggle:not(.is-checked) {
+ background: $gray-400;
+}
diff --git a/spec/features/merge_request/user_manages_subscription_spec.rb b/spec/features/merge_request/user_manages_subscription_spec.rb
index 9fb85957979d1..ec22201b88f33 100644
--- a/spec/features/merge_request/user_manages_subscription_spec.rb
+++ b/spec/features/merge_request/user_manages_subscription_spec.rb
@@ -50,15 +50,11 @@
wait_for_requests
- click_button 'Toggle dropdown'
-
expect(page).to have_selector('.gl-toggle.is-checked')
find('[data-testid="notifications-toggle"] .gl-toggle').click
wait_for_requests
- click_button 'Toggle dropdown'
-
expect(page).to have_selector('.gl-toggle:not(.is-checked)')
end
end
--
GitLab