diff --git a/contentcuration/contentcuration/frontend/administration/components/CommunityLibraryStatusButton.vue b/contentcuration/contentcuration/frontend/administration/components/CommunityLibraryStatusButton.vue index 46006c211b..ab95f69dcb 100644 --- a/contentcuration/contentcuration/frontend/administration/components/CommunityLibraryStatusButton.vue +++ b/contentcuration/contentcuration/frontend/administration/components/CommunityLibraryStatusButton.vue @@ -105,7 +105,6 @@ .community-library-status-button { @extend %md-standard-func; - width: 9em; padding: 4px; color: v-bind('labelColor'); background-color: v-bind('color'); diff --git a/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue b/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue index e5436bda75..08fd08a06b 100644 --- a/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue +++ b/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue @@ -621,6 +621,7 @@ display: flex; flex-direction: column; gap: 15px; + padding: 24px 32px 16px; } .submission-info-text { diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue index 2dfdec7fae..c5ae96e7d5 100644 --- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue +++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue @@ -304,11 +304,16 @@ fetchQueryParams: keywordSearchFetchQueryParams, } = useKeywordSearch(); + // channelStatusFilter is derived from the current channelType's options, so an + // existing status that's no longer valid for the new type already reads back as + // unset - only default it to the first option in that case. watch( channelTypeFilter, () => { - const options = channelStatusOptions.value; - channelStatusFilter.value = options.length ? options[0].value : null; + if (!channelStatusFilter.value) { + const options = channelStatusOptions.value; + channelStatusFilter.value = options.length ? options[0].value : null; + } }, { immediate: true }, ); diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelTable.spec.js b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelTable.spec.js index 07c08be509..ec50bc8925 100644 --- a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelTable.spec.js +++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelTable.spec.js @@ -11,8 +11,8 @@ localVue.use(router); const channelList = ['test', 'channel', 'table']; -function makeWrapper(store) { - router.replace({ name: RouteNames.CHANNELS }); +function makeWrapper(store, query = {}) { + router.replace({ name: RouteNames.CHANNELS, query }); return mount(ChannelTable, { router, @@ -71,13 +71,32 @@ describe('channelTable', () => { expect(router.currentRoute.query.keywords).toBe('keyword test'); }); - it('changing channel type filter should reset channel status filter', async () => { + it('changing channel type filter should reset channel status filter when it is no longer valid', async () => { + wrapper.vm.channelTypeFilter = ChannelTypeFilter.COMMUNITY_LIBRARY; + wrapper.vm.channelStatusFilter = 'needsReview'; + await wrapper.vm.$nextTick(); + // Kolibri library channels have no "needs review" status + wrapper.vm.channelTypeFilter = ChannelTypeFilter.KOLIBRI_LIBRARY; + await wrapper.vm.$nextTick(); + expect(wrapper.vm.channelStatusFilter).toBe('live'); + }); + it('changing channel type filter should keep the channel status filter when it is still valid', async () => { wrapper.vm.channelTypeFilter = ChannelTypeFilter.COMMUNITY_LIBRARY; wrapper.vm.channelStatusFilter = 'published'; await wrapper.vm.$nextTick(); + // "published" is a valid status for unlisted channels too wrapper.vm.channelTypeFilter = ChannelTypeFilter.UNLISTED; await wrapper.vm.$nextTick(); - expect(wrapper.vm.channelStatusFilter).toBe('live'); + expect(wrapper.vm.channelStatusFilter).toBe('published'); + }); + it('should preserve a valid channel status filter already present in the URL on mount', () => { + // Simulates navigating back to this page with filters still in the URL + // (e.g. after opening a channel and hitting the browser back button). + const backNavWrapper = makeWrapper(store, { + channelType: ChannelTypeFilter.COMMUNITY_LIBRARY, + channelStatus: 'needsReview', + }); + expect(backNavWrapper.vm.channelStatusFilter).toBe('needsReview'); }); }); describe('selection', () => { diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/index.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/index.vue index 7a81d67d1b..384133d99d 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/index.vue +++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/index.vue @@ -97,7 +97,10 @@