Migrate Studio snackbar to KDS

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -26,8 +26,14 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   export default {
     name: 'ClipboardChip',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       value: {
         type: String,
@@ -47,7 +53,12 @@
       copyToClipboard() {
         if (this.clipboardAvailable) {
           navigator.clipboard.writeText(this.value).then(() => {
-            this.$store.dispatch('showSnackbarSimple', this.successMessage);
+            this.createSnackbar({
+              text: this.successMessage,
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
         }
       },

contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue

@@ -241,6 +241,7 @@
 
   import { computed, ref, watch, getCurrentInstance } from 'vue';
   import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   import camelCase from 'lodash/camelCase';
 
@@ -271,6 +272,7 @@
       CommunityLibraryStatusChip,
     },
     setup(props, { emit }) {
+      const { createSnackbar } = useKSnackbar();
       const isModalVisible = ref(true);
       const tokensTheme = themeTokens();
       const paletteTheme = themePalette();
@@ -471,10 +473,6 @@
         }
       });
 
-      function showSnackbar(params) {
-        return store.dispatch('showSnackbar', params);
-      }
-
       function updateStatusInStore(newStatus) {
         return store.commit('channel/UPDATE_CHANNEL', {
           id: props.channel.id,
@@ -507,21 +505,32 @@
                 ? 'Submission approved'
                 : 'Submission flagged for review';
 
-            showSnackbar({ text: snackbarText });
+            createSnackbar({
+              text: snackbarText,
+              duration: 6000,
+              announce: true,
+            });
             updateStatusInStore(statusChoice.value);
             emit('change');
             emit('close');
           } catch (error) {
-            showSnackbar({ text: 'Changing channel status failed' });
+            createSnackbar({
+              text: 'Changing channel status failed',
+              duration: 6000,
+              announce: true,
+            });
           } finally {
             currentlySubmitting.value = false;
           }
         }, submitDelayMs);
 
-        showSnackbar({
+        createSnackbar({
           text: 'Channel status is changing',
           duration: null,
+          autoDismiss: false,
+          announce: true,
           actionText: 'Cancel',
+          autofocus: true,
           actionCallback: () => {
             clearTimeout(timer);
             // Do not emit close just yet, so that the component isn't unmounted
@@ -531,8 +540,10 @@
             // on the component, and show the side panel in the same state if the user cancels
             isModalVisible.value = true;
             currentlySubmitting.value = false;
-            showSnackbar({
+            createSnackbar({
               text: 'Action cancelled',
+              duration: 6000,
+              announce: true,
             });
           },
         });

contentcuration/contentcuration/frontend/administration/components/sidePanels/__tests__/ReviewSubmissionSidePanel.spec.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 import { factory } from '../../../store';
 import router from '../../../router';
 
@@ -137,6 +138,9 @@ const testData = {
 };
 
 describe('ReviewSubmissionSidePanel', () => {
+  beforeEach(() => {
+    useKSnackbar().clearSnackbar();
+  });
   it('submission data is prefilled', async () => {
     const { channel, submission } = testData.flagged;
     const wrapper = await makeWrapper({ channel, latestSubmission: submission });
@@ -349,7 +353,7 @@ describe('ReviewSubmissionSidePanel', () => {
       const confirmButton = wrapper.findComponent({ ref: 'confirmButtonRef' });
       await confirmButton.trigger('click');
 
-      expect(store.getters['snackbarIsVisible']).toBe(true);
+      expect(useKSnackbar().snackbarIsVisible.value).toBe(true);
       expect(AdminCommunityLibrarySubmission.resolve).not.toHaveBeenCalled();
     });
 
@@ -390,7 +394,7 @@ describe('ReviewSubmissionSidePanel', () => {
           jest.runAllTimers();
           await wrapper.vm.$nextTick();
 
-          expect(store.getters['snackbarOptions'].text).toBe('Submission approved');
+          expect(useKSnackbar().snackbarOptions.value.text).toBe('Submission approved');
           store.replaceState(origStoreState);
         });
 
@@ -481,7 +485,7 @@ describe('ReviewSubmissionSidePanel', () => {
           jest.runAllTimers();
           await wrapper.vm.$nextTick();
 
-          expect(store.getters['snackbarOptions'].text).toBe('Submission flagged for review');
+          expect(useKSnackbar().snackbarOptions.value.text).toBe('Submission flagged for review');
           store.replaceState(origStoreState);
         });
 

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue

@@ -96,6 +96,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { RouteNames } from '../../constants';
   import { channelExportMixin } from 'shared/views/channel/mixins';
   import { CommunityLibraryStatus } from 'shared/constants';
@@ -107,6 +108,10 @@
       StudioBanner,
     },
     mixins: [channelExportMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
@@ -200,12 +205,22 @@
         this.activeDialog = null;
       },
       async downloadPDF() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating PDF...');
+        this.createSnackbar({
+          text: 'Generating PDF...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails([this.channel.id]);
         return this.generateChannelsPDF(channelList);
       },
       async downloadCSV() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating CSV...');
+        this.createSnackbar({
+          text: 'Generating CSV...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails([this.channel.id]);
         return this.generateChannelsCSV(channelList);
       },
@@ -214,37 +229,62 @@
           id: this.channelId,
           deleted: false,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel restored');
+          this.createSnackbar({
+            text: 'Channel restored',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       softDeleteHandler() {
         this.updateChannel({
           id: this.channelId,
           deleted: true,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel deleted');
+          this.createSnackbar({
+            text: 'Channel deleted',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       deleteHandler() {
         this.$emit('deleted');
         return this.deleteChannel(this.channelId).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel deleted permanently');
+          this.createSnackbar({
+            text: 'Channel deleted permanently',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       makePublicHandler() {
         this.updateChannel({
           id: this.channelId,
           isPublic: true,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel changed to public');
+          this.createSnackbar({
+            text: 'Channel changed to public',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       makePrivateHandler() {
         this.updateChannel({
           id: this.channelId,
           isPublic: false,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel changed to private');
+          this.createSnackbar({
+            text: 'Channel changed to private',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
     },

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue

@@ -219,6 +219,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import ClipboardChip from '../../components/ClipboardChip';
   import CommunityLibraryStatusButton from '../../components/CommunityLibraryStatusButton.vue';
   import { RouteNames } from '../../constants';
@@ -236,6 +237,10 @@
       CommunityLibraryStatusButton,
     },
     mixins: [fileSizeMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       value: {
         type: Array,
@@ -296,15 +301,25 @@
           id: this.channelId,
           demo_server_url: this.channel.demo_server_url,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Demo URL saved');
+          this.createSnackbar({
+            text: 'Demo URL saved',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       saveSourceUrl() {
         return this.updateChannel({
           id: this.channelId,
           source_url: this.channel.source_url,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Source URL saved');
+          this.createSnackbar({
+            text: 'Source URL saved',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       onCommunityLibraryButtonClick() {

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue

@@ -141,6 +141,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { getCurrentInstance, onMounted, ref, computed, watch } from 'vue';
   import transform from 'lodash/transform';
   import { ChannelTypeFilter, RouteNames, rowsPerPageItems } from '../../constants';
@@ -184,6 +185,7 @@
     },
     mixins: [channelExportMixin, routerMixin],
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { proxy } = getCurrentInstance();
       const store = proxy.$store;
 
@@ -332,6 +334,7 @@
       });
 
       return {
+        createSnackbar,
         channelTypeFilter,
         channelTypeOptions,
         channelStatusFilter,
@@ -421,12 +424,22 @@
     methods: {
       ...mapActions('channelAdmin', ['getAdminChannelListDetails']),
       async downloadPDF() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating PDF...');
+        this.createSnackbar({
+          text: 'Generating PDF...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails(this.selected);
         return this.generateChannelsPDF(channelList);
       },
       async downloadCSV() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating CSV...');
+        this.createSnackbar({
+          text: 'Generating CSV...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails(this.selected);
         return this.generateChannelsCSV(channelList);
       },

contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js

@@ -5,6 +5,14 @@ import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import ChannelActionsDropdown from '../ChannelActionsDropdown';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -35,7 +43,6 @@ const mockActions = {
   updateChannel: jest.fn(() => Promise.resolve()),
   deleteChannel: jest.fn(() => Promise.resolve()),
   getAdminChannelListDetails: jest.fn(() => Promise.resolve([channel])),
-  showSnackbarSimple: jest.fn(() => Promise.resolve()),
 };
 
 const createMockStore = (channelProps = {}) => {
@@ -61,9 +68,7 @@ const createMockStore = (channelProps = {}) => {
         },
       },
     },
-    actions: {
-      showSnackbarSimple: mockActions.showSnackbarSimple,
-    },
+    actions: {},
   });
 };