Commit 0dba1605 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Merge branch 'djadmin-sast-feedback-alert-ls-dismiss' into 'master'

Persist dismissal of feedback alert in SAST Configuration

See merge request gitlab-org/gitlab!70517
parents 5775623d 3343c317
<script>
import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { GlAlert } from '@gitlab/ui';
import { slugifyWithUnderscore } from '~/lib/utils/text_utility';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
export default {
components: {
GlAlert,
GlSprintf,
GlLink,
LocalStorageSync,
},
props: {
......@@ -15,10 +13,6 @@ export default {
type: String,
required: true,
},
feedbackLink: {
type: String,
required: true,
},
},
data() {
return {
......@@ -44,19 +38,8 @@ export default {
<template>
<div v-show="showAlert">
<local-storage-sync v-model="isDismissed" :storage-key="storageKey" as-json />
<gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissFeedbackAlert">
<gl-sprintf
:message="
__(
'Please share your feedback about %{featureName} %{linkStart}in this issue%{linkEnd} to help us improve the experience.',
)
"
>
<template #featureName>{{ featureName }}</template>
<template #link="{ content }">
<gl-link :href="feedbackLink" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
<gl-alert v-if="showAlert" @dismiss="dismissFeedbackAlert">
<slot></slot>
</gl-alert>
</div>
</template>
<script>
import { GlAlert } from '@gitlab/ui';
export default {
components: {
GlAlert,
},
data() {
return { isAlertDismissed: false };
},
computed: {
showPageAlert() {
return Boolean(this.$slots.alert) && !this.isAlertDismissed;
},
},
};
</script>
<template>
<article>
<gl-alert
v-if="showPageAlert"
data-testid="configuration-page-alert"
class="gl-mt-4"
@dismiss="isAlertDismissed = true"
>
<slot name="alert"></slot
></gl-alert>
<slot name="alert"></slot>
<header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
<h4>
<slot name="heading"></slot>
......@@ -35,7 +9,6 @@ export default {
<slot name="description"></slot>
</p>
</header>
<slot></slot>
</article>
</template>
<script>
import { GlAlert, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import DismissibleFeedbackAlert from '~/vue_shared/components/dismissible_feedback_alert.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import ConfigurationPageLayout from '../../components/configuration_page_layout.vue';
import sastCiConfigurationQuery from '../graphql/sast_ci_configuration.query.graphql';
......@@ -10,6 +11,7 @@ export default {
components: {
ConfigurationForm,
ConfigurationPageLayout,
DismissibleFeedbackAlert,
GlAlert,
GlLink,
GlLoadingIcon,
......@@ -80,11 +82,17 @@ export default {
<template>
<configuration-page-layout>
<template #alert>
<gl-sprintf :message="$options.i18n.feedbackAlertMessage">
<template #link="{ content }">
<gl-link :href="$options.feedbackIssue" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
<dismissible-feedback-alert
feature-name="sast"
class="gl-mt-4"
data-testid="configuration-page-alert"
>
<gl-sprintf :message="$options.i18n.feedbackAlertMessage">
<template #link="{ content }">
<gl-link :href="$options.feedbackIssue" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</dismissible-feedback-alert>
</template>
<template #heading> {{ s__('SecurityConfiguration|SAST Configuration') }} </template>
......
......@@ -2,21 +2,7 @@
exports[`Security Configuration Page Layout component matches the snapshot 1`] = `
<article>
<gl-alert-stub
class="gl-mt-4"
data-testid="configuration-page-alert"
dismissible="true"
dismisslabel="Dismiss"
primarybuttonlink=""
primarybuttontext=""
secondarybuttonlink=""
secondarybuttontext=""
title=""
variant="info"
>
Page alert
</gl-alert-stub>
Page alert
<header
class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
>
......
......@@ -5,21 +5,17 @@ describe('Security Configuration Page Layout component', () => {
let wrapper;
const createComponent = (options = {}) => {
const { slots = {} } = options;
wrapper = shallowMountExtended(ConfigurationPageLayout, {
slots: {
alert: 'Page alert',
heading: 'Page title',
description: 'Scanner description',
default: '<div>form</div>',
...slots,
},
...options,
});
};
const findPageAlert = () => wrapper.findByTestId('configuration-page-alert');
afterEach(() => {
wrapper.destroy();
});
......@@ -28,29 +24,4 @@ describe('Security Configuration Page Layout component', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
describe('page level alert', () => {
it('should render correctly', () => {
createComponent();
expect(findPageAlert().exists()).toBe(true);
});
it('should be disabled when slot is not present', () => {
createComponent({
slots: {
alert: '',
},
});
expect(findPageAlert().exists()).toBe(false);
});
it('should be disabled after dismissal', async () => {
createComponent();
findPageAlert().vm.$emit('dismiss');
await wrapper.vm.$nextTick();
expect(findPageAlert().exists()).toBe(false);
});
});
});
......@@ -75,17 +75,6 @@ describe('SAST Configuration App', () => {
target: '_blank',
});
});
describe('when it is dismissed', () => {
beforeEach(() => {
findFeedbackAlert().vm.$emit('dismiss');
return wrapper.vm.$nextTick();
});
it('should not be displayed', () => {
expect(findFeedbackAlert().exists()).toBe(false);
});
});
});
describe('header', () => {
......
......@@ -25351,9 +25351,6 @@ msgstr ""
msgid "Please set a new password before proceeding."
msgstr ""
msgid "Please share your feedback about %{featureName} %{linkStart}in this issue%{linkEnd} to help us improve the experience."
msgstr ""
msgid "Please solve the captcha"
msgstr ""
......
import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { GlAlert, GlSprintf } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import { useLocalStorageSpy } from 'helpers/local_storage_helper';
import Component from '~/vue_shared/components/dismissible_feedback_alert.vue';
......@@ -8,20 +8,13 @@ describe('Dismissible Feedback Alert', () => {
let wrapper;
const defaultProps = {
featureName: 'Dependency List',
feedbackLink: 'https://gitlab.link',
};
const featureName = 'Dependency List';
const STORAGE_DISMISSAL_KEY = 'dependency_list_feedback_dismissed';
const createComponent = ({ props, shallow } = {}) => {
const mountFn = shallow ? shallowMount : mount;
const createComponent = ({ mountFn = shallowMount } = {}) => {
wrapper = mountFn(Component, {
propsData: {
...defaultProps,
...props,
featureName,
},
stubs: {
GlSprintf,
......@@ -34,8 +27,8 @@ describe('Dismissible Feedback Alert', () => {
wrapper = null;
});
const findAlert = () => wrapper.find(GlAlert);
const findLink = () => wrapper.find(GlLink);
const createFullComponent = () => createComponent({ mountFn: mount });
const findAlert = () => wrapper.findComponent(GlAlert);
describe('with default', () => {
beforeEach(() => {
......@@ -46,17 +39,6 @@ describe('Dismissible Feedback Alert', () => {
expect(findAlert().exists()).toBe(true);
});
it('contains feature name', () => {
expect(findAlert().text()).toContain(defaultProps.featureName);
});
it('contains provided link', () => {
const link = findLink();
expect(link.attributes('href')).toBe(defaultProps.feedbackLink);
expect(link.attributes('target')).toBe('_blank');
});
it('should have the storage key set', () => {
expect(wrapper.vm.storageKey).toBe(STORAGE_DISMISSAL_KEY);
});
......@@ -65,7 +47,7 @@ describe('Dismissible Feedback Alert', () => {
describe('dismissible', () => {
describe('after dismissal', () => {
beforeEach(() => {
createComponent({ shallow: false });
createFullComponent();
findAlert().vm.$emit('dismiss');
});
......@@ -81,7 +63,7 @@ describe('Dismissible Feedback Alert', () => {
describe('already dismissed', () => {
it('should not show the alert once dismissed', async () => {
localStorage.setItem(STORAGE_DISMISSAL_KEY, 'true');
createComponent({ shallow: false });
createFullComponent();
await wrapper.vm.$nextTick();
expect(findAlert().exists()).toBe(false);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment