diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue index 1f8e44814f..a3a7e41dc1 100644 --- a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue +++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue @@ -4,12 +4,13 @@ ref="form" @submit.prevent="submit" > - + class="studio-banner" + > + {{ errorText() }} +

{{ $tr('natureOfYourContentLabel') }}

@@ -264,11 +265,12 @@ import sortBy from 'lodash/sortBy'; import { mapActions, mapState } from 'vuex'; + import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion'; import { generateFormMixin, constantsTranslationMixin } from 'shared/mixins'; import { LicensesList } from 'shared/leUtils/Licenses'; import CountryField from 'shared/views/form/CountryField'; import MultiSelect from 'shared/views/form/MultiSelect'; - import Banner from 'shared/views/Banner'; + import StudioBanner from 'shared/views/StudioBanner'; import InfoModal from 'shared/views/InfoModal'; const formMixin = generateFormMixin({ @@ -320,10 +322,14 @@ components: { CountryField, MultiSelect, - Banner, + StudioBanner, InfoModal, }, mixins: [constantsTranslationMixin, formMixin], + setup() { + const { sendPoliteMessage } = useKLiveRegion(); + return { sendPoliteMessage }; + }, computed: { ...mapState('settings', ['channels']), orgSelected() { @@ -392,6 +398,7 @@ if (this.$refs.form.scrollIntoView) { this.$refs.form.scrollIntoView({ behavior: 'smooth' }); } + this.sendPoliteMessage(this.errorText()); }, // eslint-disable-next-line kolibri/vue-no-unused-methods, vue/no-unused-properties @@ -524,4 +531,9 @@ line-height: 1.5; } + .studio-banner { + margin-top: 8px; + margin-bottom: 8px; + } + diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue b/contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue new file mode 100644 index 0000000000..5800501c20 --- /dev/null +++ b/contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue @@ -0,0 +1,37 @@ + + + + + + + diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/studioBanner.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/studioBanner.spec.js new file mode 100644 index 0000000000..940f72cc35 --- /dev/null +++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/studioBanner.spec.js @@ -0,0 +1,38 @@ +import { render, screen } from '@testing-library/vue'; +import VueRouter from 'vue-router'; +import StudioBanner from '../StudioBanner.vue'; + +const sampleErrorMessage = 'This is an error message'; + +describe('StudioBanner', () => { + test('render with defaults values', () => { + render(StudioBanner, { + props: { + error: false, + }, + routes: new VueRouter(), + slots: { + default: 'normal text', + }, + }); + const banner = screen.getByTestId('studio-banner'); + expect(banner).toBeInTheDocument(); + }); + + test('render with error true', () => { + render(StudioBanner, { + props: { + error: true, + }, + routes: new VueRouter(), + slots: { + default: sampleErrorMessage, + }, + }); + + const banner = screen.getByTestId('studio-banner'); + expect(banner).toBeInTheDocument(); + expect(banner).toHaveStyle('background-color: rgb(255, 217, 211)'); + expect(screen.getByText(sampleErrorMessage)).toBeInTheDocument(); + }); +});