Merge pull request #4863 from shruti862/new-branch

Made URL of new channel creation page more generic

contentcuration/contentcuration/frontend/channelList/constants.js

@@ -24,6 +24,7 @@ export const RouteNames = {
   CATALOG_ITEMS: 'CATALOG_ITEMS',
   CATALOG_DETAILS: 'CATALOG_DETAILS',
   CATALOG_FAQ: 'CATALOG_FAQ',
+  NEW_CHANNEL: 'NEW_CHANNEL',
 };
 
 export const ListTypeToRouteMapping = {

contentcuration/contentcuration/frontend/channelList/router.js

@@ -41,6 +41,12 @@ const router = new VueRouter({
       component: ChannelModal,
       props: true,
     },
+    {
+      name: RouteNames.NEW_CHANNEL,
+      path: '/new',
+      component: ChannelModal,
+      props: true,
+    },
     {
       name: RouteNames.CHANNEL_SETS,
       path: '/collections',

contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue

@@ -114,15 +114,12 @@
       this.loadData(this.listType);
     },
     methods: {
-      ...mapActions('channel', ['loadChannelList', 'createChannel']),
+      ...mapActions('channel', ['loadChannelList']),
       newChannel() {
         this.$analytics.trackClick('channel_list', 'Create channel');
-        this.createChannel().then(id => {
-          this.$router.push({
-            name: RouteNames.CHANNEL_EDIT,
-            params: { channelId: id, tab: 'edit' },
-            query: { last: this.$route.name },
-          });
+        this.$router.push({
+          name: RouteNames.NEW_CHANNEL,
+          query: { last: this.$route.name },
         });
       },
       loadData(listType) {

contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelList.spec.js

@@ -2,6 +2,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import VueRouter from 'vue-router';
 import ChannelList from '../ChannelList.vue';
+import { RouteNames } from '../../../constants';
 import { ChannelListTypes } from 'shared/constants';
 
 const localVue = createLocalVue();
@@ -79,9 +80,16 @@ describe('ChannelList', () => {
       expect(getNewChannelButton(wrapper).exists()).toBe(true);
     });
 
-    it('should create a new channel when new channel button is clicked', () => {
-      getNewChannelButton(wrapper).trigger('click');
-      expect(createChannelMock).toHaveBeenCalled();
+    it('should open the new channel modal when the new channel button is clicked', async () => {
+      try {
+        getNewChannelButton(wrapper).trigger('click');
+        await wrapper.vm.$nextTick();
+      } catch (err) {
+        if (err.name !== 'NavigationDuplicated') {
+          throw err;
+        }
+      }
+      expect(wrapper.vm.$route.name).toBe(RouteNames.NEW_CHANNEL);
     });
   });
 });

contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue

@@ -80,7 +80,7 @@
         </VTabItem>
         <VTabItem value="share" data-test="share-content">
           <VCard flat class="pa-5">
-            <ChannelSharing :channelId="channelId" />
+            <ChannelSharing v-if="!isNew" :channelId="channelId" />
           </VCard>
         </VTabItem>
       </VTabsItems>
@@ -111,7 +111,7 @@
   import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
   import ChannelThumbnail from './ChannelThumbnail';
   import ChannelSharing from './ChannelSharing';
-  import { NEW_OBJECT, ErrorTypes } from 'shared/constants';
+  import { ErrorTypes } from 'shared/constants';
   import MessageDialog from 'shared/views/MessageDialog';
   import LanguageDropdown from 'shared/views/LanguageDropdown';
   import ContentDefaults from 'shared/views/form/ContentDefaults';
@@ -166,7 +166,7 @@
         return this.getChannel(this.channelId) || {};
       },
       isNew() {
-        return Boolean(this.channel[NEW_OBJECT]);
+        return !this.channelId || this.$route.path === '/new';
       },
       isRicecooker() {
         return Boolean(this.channel.ricecooker_version);
@@ -269,6 +269,9 @@
     // will never be rendered.
     beforeMount() {
       const channelId = this.$route.params.channelId;
+      if (!channelId) {
+        return;
+      }
       return this.verifyChannel(channelId)
         .then(() => {
           this.header = this.channel.name; // Get channel name when user enters modal
@@ -280,35 +283,44 @@
         .catch(() => {});
     },
     mounted() {
-      // Set expiry to 1ms
-      this.header = this.channel.name; // Get channel name when user enters modal
+      if (this.isNew) {
+        this.header = this.$tr('creatingHeader');
+      } else {
+        this.header = this.channel.name;
+      }
       this.updateTitleForPage();
     },
+
     methods: {
       ...mapActions('channel', ['updateChannel', 'loadChannel', 'commitChannel']),
       ...mapMutations('channel', ['REMOVE_CHANNEL']),
       saveChannel() {
         this.isDisable = true;
+
         if (this.$refs.detailsform.validate()) {
           this.changed = false;
-          if (this.isNew) {
-            return this.commitChannel({ id: this.channelId, ...this.diffTracker }).then(() => {
-              // TODO: Make sure channel gets created before navigating to channel
-              window.location = window.Urls.channel(this.channelId);
-              this.isDisable = false;
-            });
-          } else {
-            return this.updateChannel({ id: this.channelId, ...this.diffTracker }).then(() => {
+
+          const commitOrUpdateChannel = this.isNew
+            ? this.commitChannel({ ...this.diffTracker })
+            : this.updateChannel({ id: this.channelId, ...this.diffTracker });
+
+          return commitOrUpdateChannel.then(channel => {
+            if (this.isNew) {
+              const newChannelId = channel.id;
+
+              window.location.replace(window.Urls.channel(newChannelId));
+            } else {
               this.$store.dispatch('showSnackbarSimple', this.$tr('changesSaved'));
               this.header = this.channel.name;
-              this.isDisable = false;
-            });
-          }
+            }
+            this.isDisable = false;
+          });
         } else if (this.$refs.detailsform.$el.scrollIntoView) {
           this.$refs.detailsform.$el.scrollIntoView({ behavior: 'smooth' });
           this.isDisable = false;
         }
       },
+
       updateTitleForPage() {
         if (this.isNew) {
           this.updateTabTitle(this.$tr('creatingHeader'));

contentcuration/contentcuration/frontend/shared/vuex/channel/actions.js

@@ -82,11 +82,13 @@ export function commitChannel(
     thumbnail_url = NOVALUE,
   } = {}
 ) {
-  if (context.state.channelsMap[id]) {
-    if (!id) {
-      throw ReferenceError('id must be defined to update a channel');
+  const buildChannelData = () => {
+    const channelData = {};
+
+    if (id) {
+      channelData.id = id;
     }
-    const channelData = { id };
+
     if (name !== NOVALUE) {
       channelData.name = name;
     }
@@ -111,17 +113,40 @@ export function commitChannel(
       channelData.thumbnail_url = thumbnail_url;
     }
     if (contentDefaults !== NOVALUE) {
-      const originalData = context.state.channelsMap[id].content_defaults;
-      // Pick out only content defaults that have been changed.
-      contentDefaults = pickBy(contentDefaults, (value, key) => value !== originalData[key]);
-      if (Object.keys(contentDefaults).length) {
+      if (id) {
+        const originalData = context.state.channelsMap[id].content_defaults;
+        contentDefaults = pickBy(contentDefaults, (value, key) => value !== originalData[key]);
+        if (Object.keys(contentDefaults).length) {
+          channelData.content_defaults = contentDefaults;
+        }
+      } else {
         channelData.content_defaults = contentDefaults;
       }
     }
+
+    return channelData;
+  };
+
+  const channelData = buildChannelData();
+
+  if (context.state.channelsMap[id]) {
+    if (!id) {
+      throw new ReferenceError('id must be defined to update a channel');
+    }
     return Channel.createModel(channelData).then(() => {
       context.commit('UPDATE_CHANNEL', { id, ...channelData });
       context.commit('SET_CHANNEL_NOT_NEW', id);
     });
+  } else {
+    return Channel.createModel(channelData).then(response => {
+      const createdChannel = response;
+      if (!createdChannel || !createdChannel.id) {
+        throw new Error('Created channel data is invalid. Missing id.');
+      }
+
+      context.commit('ADD_CHANNEL', createdChannel);
+      return createdChannel;
+    });
   }
 }