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 @@
+
+
+
+
+ {{ text }}
+
+
+
+
+
+
+
+
+
+
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();
+ });
+});