Merge pull request #4890 from shruti862/fix-2450

Made URL of new collection page generic

contentcuration/contentcuration/frontend/channelList/constants.js

@@ -21,6 +21,7 @@ export const RouteNames = {
   CHANNEL_EDIT: 'CHANNEL_EDIT',
   CHANNEL_SETS: 'CHANNEL_SETS',
   CHANNEL_SET_DETAILS: 'CHANNEL_SET_DETAILS',
+  NEW_CHANNEL_SET: 'NEW_CHANNEL_SET',
   CATALOG_ITEMS: 'CATALOG_ITEMS',
   CATALOG_DETAILS: 'CATALOG_DETAILS',
   CATALOG_FAQ: 'CATALOG_FAQ',

contentcuration/contentcuration/frontend/channelList/router.js

@@ -17,6 +17,24 @@ const router = new VueRouter({
       component: ChannelList,
       props: { listType: ChannelListTypes.EDITABLE },
     },
+
+    {
+      name: RouteNames.CHANNEL_SETS,
+      path: '/collections',
+      component: ChannelSetList,
+    },
+    {
+      name: RouteNames.NEW_CHANNEL_SET,
+      path: '/collections/new',
+      component: ChannelSetModal,
+      props: true,
+    },
+    {
+      name: RouteNames.CHANNEL_SET_DETAILS,
+      path: '/collections/:channelSetId',
+      component: ChannelSetModal,
+      props: true,
+    },
     {
       name: RouteNames.CHANNELS_STARRED,
       path: '/starred',
@@ -47,17 +65,7 @@ const router = new VueRouter({
       component: ChannelModal,
       props: true,
     },
-    {
-      name: RouteNames.CHANNEL_SETS,
-      path: '/collections',
-      component: ChannelSetList,
-    },
-    {
-      name: RouteNames.CHANNEL_SET_DETAILS,
-      path: '/collections/:channelSetId',
-      component: ChannelSetModal,
-      props: true,
-    },
+
     {
       name: RouteNames.CATALOG_ITEMS,
       path: '/public',

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue

@@ -107,13 +107,10 @@
       });
     },
     methods: {
-      ...mapActions('channelSet', ['loadChannelSetList', 'createChannelSet']),
+      ...mapActions('channelSet', ['loadChannelSetList']),
       newChannelSet() {
-        this.createChannelSet().then(id => {
-          this.$router.push({
-            name: RouteNames.CHANNEL_SET_DETAILS,
-            params: { channelSetId: id },
-          });
+        this.$router.push({
+          name: RouteNames.NEW_CHANNEL_SET,
         });
       },
     },

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue

@@ -97,7 +97,10 @@
                     :key="listType.id"
                     lazy
                   >
-                    <ChannelSelectionList v-model="channels" :listType="listType" />
+                    <ChannelSelectionList 
+                      v-model="channels" 
+                      :listType="listType"  
+                    />
                   </VTabItem>
                 </Tabs>
               </VContainer>
@@ -158,7 +161,7 @@
   import { RouteNames } from '../../constants';
   import ChannelItem from './ChannelItem';
   import ChannelSelectionList from './ChannelSelectionList';
-  import { NEW_OBJECT, ChannelListTypes, ErrorTypes } from 'shared/constants';
+  import { ChannelListTypes, ErrorTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import CopyToken from 'shared/views/CopyToken';
   import MessageDialog from 'shared/views/MessageDialog';
@@ -181,7 +184,7 @@
     props: {
       channelSetId: {
         type: String,
-        required: true,
+        default: '',
       },
     },
     data() {
@@ -199,7 +202,7 @@
     computed: {
       ...mapGetters('channelSet', ['getChannelSet']),
       isNew() {
-        return Boolean(this.channelSet[NEW_OBJECT]);
+        return this.$route.path === '/collections/new';
       },
       nameRules() {
         return [name => (name && name.trim().length ? true : this.$tr('titleRequiredText'))];
@@ -245,7 +248,11 @@
       },
     },
     beforeMount() {
-      return this.verifyChannelSet(this.channelSetId);
+      if (this.channelSetId) {
+        return this.verifyChannelSet(this.channelSetId);
+      } else {
+        this.setup();
+      }
     },
     mounted() {
       this.updateTitleForPage();
@@ -297,6 +304,7 @@
       removeChannel(channelId) {
         this.channels = this.channels.filter(c => c !== channelId);
       },
+
       loadChannels() {
         if (this.channelSet.channels && this.channelSet.channels.length) {
           this.loadingChannels = true;
@@ -307,6 +315,7 @@
           this.loadingChannels = false;
         }
       },
+
       setChannelSet(data) {
         for (const key in data) {
           Vue.set(this.diffTracker, key, data[key]);
@@ -323,15 +332,37 @@
         }
         this.saving = true;
         this.showUnsavedDialog = false;
+
         if (this.$refs.channelsetform.validate()) {
           let promise;
+
           if (this.isNew) {
-            promise = this.commitChannelSet({ id: this.channelSetId, ...this.diffTracker });
+            const channelSetData = { ...this.diffTracker };
+            promise = this.commitChannelSet(channelSetData)
+              .then(newCollection => {
+                if (!newCollection || !newCollection.id) {
+                  this.saving = false;
+                  return;
+                }
+
+                const newCollectionId = newCollection.id;
+
+                this.$router.replace({
+                  name: 'CHANNEL_SET_DETAILS',
+                  params: { channelSetId: newCollectionId },
+                });
+
+                return newCollection;
+              })
+              .catch(() => {
+                this.saving = false;
+              });
           } else {
             promise = this.saveChannels().then(() => {
               return this.updateChannelSet({ id: this.channelSetId, ...this.diffTracker });
             });
           }
+
           promise
             .then(() => {
               this.close();
@@ -341,6 +372,7 @@
             });
         }
       },
+
       cancelChanges() {
         if (this.changed) {
           this.showUnsavedDialog = true;
@@ -350,16 +382,23 @@
       },
       confirmCancel() {
         if (this.isNew) {
-          return this.deleteChannelSet(this.channelSet).then(this.close);
+          if (this.channelSet && this.channelSet.id) {
+            return this.deleteChannelSet(this.channelSet).then(this.close);
+          } else {
+            this.close();
+          }
+        } else {
+          this.close();
         }
-        this.close();
       },
+
       close() {
         this.changed = false;
         this.showUnsavedDialog = false;
         this.diffTracker = {};
         this.$router.push({ name: RouteNames.CHANNEL_SETS });
       },
+
       verifyChannelSet(channelSetId) {
         return new Promise((resolve, reject) => {
           // Check if we already have the channel locally
@@ -368,7 +407,6 @@
             resolve();
             return;
           }
-
           // If not, try to load the channel
           this.loadChannelSet(channelSetId).then(channelset => {
             // Did our fetch return any channels, then we have a channel!
@@ -378,7 +416,6 @@
               return;
             }
             // If not, reject!
-
             this.$store.dispatch('errors/handleGenericError', {
               errorType: ErrorTypes.PAGE_NOT_FOUND,
               errorText: this.$tr('collectionErrorText'),
@@ -388,6 +425,7 @@
         });
       },
     },
+
     $trs: {
       creatingChannelSet: 'New collection',
       collectionErrorText: 'This collection does not exist',

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetList.spec.js

@@ -24,10 +24,14 @@ describe('channelSetList', () => {
   const createChannelSetStub = jest.fn().mockImplementation(() => Promise.resolve(id));
   beforeEach(() => {
     wrapper = makeWrapper(createChannelSetStub);
-  });
-  it('should create a new channel set when new set button is clicked', () => {
     wrapper.setData({ loading: false });
-    wrapper.find('[data-test="add-channelset"]').trigger('click');
-    expect(createChannelSetStub).toHaveBeenCalled();
+  });
+  it('should open a new channel set modal when new set button is clicked', async () => {
+    const push = jest.fn();
+    wrapper.vm.$router.push = push;
+    await wrapper.find('[data-test="add-channelset"]').trigger('click');
+    expect(push).toHaveBeenCalledWith({
+      name: RouteNames.NEW_CHANNEL_SET,
+    });
   });
 });

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js

@@ -10,7 +10,6 @@ import channelSet from '../../../vuex/channelSet';
 import ChannelSetModal from '../ChannelSetModal';
 import channel from 'shared/vuex/channel';
 import storeFactory from 'shared/vuex/baseStore';
-import { NEW_OBJECT } from 'shared/constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -39,12 +38,6 @@ const CHANNEL_SET = {
   },
 };
 
-const NEW_CHANNEL_SET = {
-  id: 'id-new-channel-set',
-  channels: [],
-  [NEW_OBJECT]: true,
-};
-
 const loadChannelSetMock = (cs, store) => {
   return jest.fn().mockImplementation(() => {
     store.commit('channelSet/ADD_CHANNELSET', cs);
@@ -238,20 +231,6 @@ describe('ChannelSetModal', () => {
         expect(wrapper.vm.$route.name).toBe(RouteNames.CHANNEL_SETS);
       });
 
-      it('should delete a channel set if it is new', () => {
-        const storeConfig = cloneDeep(STORE_CONFIG);
-        const deleteChannelSet = jest.fn();
-        storeConfig.modules.channelSet.actions.deleteChannelSet = deleteChannelSet;
-        const store = storeFactory(storeConfig);
-        store.commit('channelSet/ADD_CHANNELSET', NEW_CHANNEL_SET);
-
-        wrapper = makeWrapper({ store, channelSetId: NEW_CHANNEL_SET.id });
-
-        getCloseButton(wrapper).trigger('click');
-        expect(deleteChannelSet).toHaveBeenCalledTimes(1);
-        expect(deleteChannelSet.mock.calls[0][1]).toEqual(NEW_CHANNEL_SET);
-      });
-
       it('should prompt user if there are unsaved changes', () => {
         expect(getUnsavedDialog(wrapper).attributes('data-test-visible')).toBeFalsy();
 

contentcuration/contentcuration/frontend/channelList/vuex/channelSet/actions.js

@@ -42,9 +42,13 @@ export function commitChannelSet(
   { id, name = NOVALUE, description = NOVALUE, channels = [] } = {}
 ) {
   const channelSetData = {};
+
   if (!id) {
-    throw ReferenceError('id must be defined to commit a channel');
+    channelSetData.isNew = true;
+  } else {
+    channelSetData.id = id;
   }
+
   if (name !== NOVALUE) {
     channelSetData.name = name;
   }
@@ -55,10 +59,21 @@ export function commitChannelSet(
   for (const channel of channels) {
     channelSetData.channels[channel] = true;
   }
-  return ChannelSet.createModel(channelSetData).then(data => {
-    context.commit('SET_CHANNELSET_NOT_NEW', id);
-    context.commit('UPDATE_CHANNELSET', data);
-  });
+
+  return ChannelSet.createModel(channelSetData)
+    .then(data => {
+      if (!data || !data.id) {
+        throw ReferenceError('id must be defined to commit a channel');
+      }
+
+      context.commit('SET_CHANNELSET_NOT_NEW', data.id);
+      context.commit('UPDATE_CHANNELSET', data);
+
+      return data;
+    })
+    .catch(error => {
+      throw error;
+    });
 }
 
 export function updateChannelSet(context, { id, name = NOVALUE, description = NOVALUE } = {}) {