diff --git a/ee/app/assets/javascripts/ai/components/global_callout/duo_chat_callout.vue b/ee/app/assets/javascripts/ai/components/global_callout/duo_chat_callout.vue
index 1e034ad3331799594400c6eafe1ee21612621833..b96e6f690a4dd967aa79836aade7a90f0ad63fb9 100644
--- a/ee/app/assets/javascripts/ai/components/global_callout/duo_chat_callout.vue
+++ b/ee/app/assets/javascripts/ai/components/global_callout/duo_chat_callout.vue
@@ -1,5 +1,5 @@
<script>
-import { GlPopover, GlLink, GlBadge, GlOutsideDirective as Outside } from '@gitlab/ui';
+import { GlPopover, GlLink, GlBadge } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
import DUO_CHAT_ILLUSTRATION from './callout_illustration.svg?url';
@@ -24,7 +24,6 @@ export default {
GlBadge,
UserCalloutDismisser,
},
- directives: { Outside },
beforeMount() {
const allButtons = Array.from(
document.querySelectorAll(`.${DUO_CHAT_GLOBAL_BUTTON_CSS_CLASS}`),
@@ -81,36 +80,34 @@ export default {
data-testid="duo-chat-promo-callout-popover"
@close-button-clicked="dismissCallout(dismiss)"
>
- <div v-outside="() => dismissCallout(dismiss)">
- <img
- :src="$options.DUO_CHAT_ILLUSTRATION"
- :alt="''"
- class="gl-absolute gl-top-0 gl-left-0 gl-w-full gl-pointer-events-none"
- />
- <h5 class="gl-my-3 gl-mr-3">
- {{ $options.i18n.POPOVER_LABEL }}
- <gl-badge size="sm" variant="muted" href="" icon-size="sm">
- {{ __('Beta') }}
- </gl-badge>
- </h5>
- <p class="gl-m-0 gl-w-70p" data-testid="duo-chat-callout-description">
- {{ $options.i18n.POPOVER_DESCRIPTION }}
- </p>
- <ul class="gl-pt-3 gl-pl-5">
- <li v-for="item in $options.i18n.POPOVER_LIST_ITEMS" :key="item">{{ item }}</li>
- </ul>
- <gl-link
- ref="popoverLink"
- class="gl-button btn btn-confirm block gl-mb-2 gl-mt-4"
- variant="confirm"
- category="primary"
- target="_blank"
- block
- @click="dismissAndNotify(dismiss)"
- >
- {{ $options.i18n.POPOVER_BUTTON }}
- </gl-link>
- </div>
+ <img
+ :src="$options.DUO_CHAT_ILLUSTRATION"
+ :alt="''"
+ class="gl-absolute gl-top-0 gl-left-0 gl-w-full gl-pointer-events-none"
+ />
+ <h5 class="gl-my-3 gl-mr-3">
+ {{ $options.i18n.POPOVER_LABEL }}
+ <gl-badge size="sm" variant="muted" href="" icon-size="sm">
+ {{ __('Beta') }}
+ </gl-badge>
+ </h5>
+ <p class="gl-m-0 gl-w-70p" data-testid="duo-chat-callout-description">
+ {{ $options.i18n.POPOVER_DESCRIPTION }}
+ </p>
+ <ul class="gl-pt-3 gl-pl-5">
+ <li v-for="item in $options.i18n.POPOVER_LIST_ITEMS" :key="item">{{ item }}</li>
+ </ul>
+ <gl-link
+ ref="popoverLink"
+ class="gl-button btn btn-confirm block gl-mb-2 gl-mt-4"
+ variant="confirm"
+ category="primary"
+ target="_blank"
+ block
+ @click="dismissAndNotify(dismiss)"
+ >
+ {{ $options.i18n.POPOVER_BUTTON }}
+ </gl-link>
</gl-popover>
</template>
</user-callout-dismisser>
diff --git a/ee/spec/frontend/ai/components/global_callout/duo_chat_callout_spec.js b/ee/spec/frontend/ai/components/global_callout/duo_chat_callout_spec.js
index 74ae0dcd9b15dcb303deff4262633a6f3757a912..530229b02c53cd84b82fdbd0ccc16f5022774b3e 100644
--- a/ee/spec/frontend/ai/components/global_callout/duo_chat_callout_spec.js
+++ b/ee/spec/frontend/ai/components/global_callout/duo_chat_callout_spec.js
@@ -1,6 +1,6 @@
import { shallowMount } from '@vue/test-utils';
import { GlPopover, GlLink } from '@gitlab/ui';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { createMockDirective } from 'helpers/vue_mock_directive';
import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
@@ -20,7 +20,6 @@ describe('DuoChatCallout', () => {
const findFirstTargetElement = () => findTargetElements()[0];
const findParagraphWithinPopover = () =>
wrapper.find('[data-testid="duo-chat-callout-description"]');
- const findOutsideCallsWatcher = () => findPopoverWithinDismisser().find('div');
const createComponent = ({ shouldShowCallout = true } = {}) => {
userCalloutDismissSpy = jest.fn();
@@ -95,15 +94,11 @@ describe('DuoChatCallout', () => {
});
describe('interaction', () => {
- it.each`
- desc | trigger
- ${"the popover's close button is clicked"} | ${() => findPopoverWithinDismisser().vm.$emit('close-button-clicked')}
- ${'user clicks outside of the callout'} | ${() => getBinding(findOutsideCallsWatcher().element, 'outside').value()}
- `("dismisses the callout when $desc, but doesn't open the chat", ({ trigger }) => {
+ it("dismisses the callout when the popover's close button is clicked, but doesn't open the chat", () => {
expect(userCalloutDismissSpy).not.toHaveBeenCalled();
expect(wrapper.emitted('callout-dismissed')).toBeUndefined();
- trigger();
+ findPopoverWithinDismisser().vm.$emit('close-button-clicked');
expect(userCalloutDismissSpy).toHaveBeenCalled();
expect(wrapper.emitted('callout-dismissed')).toBeUndefined();
diff --git a/qa/qa/page/main/login.rb b/qa/qa/page/main/login.rb
index f935d1590c53e5ad6e5412136baaaf4acb3db550..244f5999c4a60a38cd93937bc8fec2b16673ba38 100644
--- a/qa/qa/page/main/login.rb
+++ b/qa/qa/page/main/login.rb
@@ -103,6 +103,8 @@ def sign_in_using_ldap_credentials(user:)
end
Page::Main::Menu.perform(&:signed_in?)
+
+ dismiss_duo_chat_popup
end
# Handle request for password change
@@ -243,6 +245,8 @@ def sign_in_using_gitlab_credentials(user:, skip_page_validation: false)
wait_for_gitlab_to_respond
+ dismiss_duo_chat_popup
+
return if skip_page_validation
Page::Main::Menu.validate_elements_present!
@@ -250,6 +254,14 @@ def sign_in_using_gitlab_credentials(user:, skip_page_validation: false)
validate_canary!
end
+ def dismiss_duo_chat_popup
+ return unless has_element?('duo-chat-promo-callout-popover')
+
+ within_element('duo-chat-promo-callout-popover') do
+ click_element('close-button')
+ end
+ end
+
def fill_in_credential(user)
fill_element 'username-field', user.username
fill_element 'password-field', user.password