Merge pull request #2909 from marcellamaki/update-progress-modal

Update progress modal

Author: rtibbles

contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue

@@ -165,11 +165,17 @@
     <slot></slot>
 
     <PublishModal v-if="showPublishModal" v-model="showPublishModal" />
-    <ProgressModal />
+    <ProgressModal v-model="showProgressModal" :syncing="syncing" :noSyncNeeded="noSyncNeeded" />
     <template v-if="isPublished">
       <ChannelTokenModal v-model="showTokenModal" :channel="currentChannel" />
     </template>
-    <SyncResourcesModal v-if="currentChannel" v-model="showSyncModal" :channel="currentChannel" />
+    <SyncResourcesModal
+      v-if="currentChannel"
+      v-model="showSyncModal"
+      :channel="currentChannel"
+      @syncing="syncInProgress"
+      @nosync="noResourcesToSync"
+    />
     <MessageDialog v-model="showDeleteModal" :header="$tr('deleteTitle')">
       {{ $tr('deletePrompt') }}
       <template #buttons="{ close }">
@@ -281,8 +287,11 @@
         showPublishModal: false,
         showTokenModal: false,
         showSyncModal: false,
+        showProgressModal: false,
         showClipboard: false,
         showDeleteModal: false,
+        syncing: false,
+        noSyncNeeded: false,
       };
     },
     computed: {
@@ -397,6 +406,14 @@
         this.showSyncModal = true;
         this.trackClickEvent('Sync');
       },
+      syncInProgress() {
+        this.syncing = true;
+        this.showProgressModal = true;
+      },
+      noResourcesToSync() {
+        this.noSyncNeeded = true;
+        this.showProgressModal = true;
+      },
       deleteChannel() {
         this.showDeleteModal = true;
         this.trackClickEvent('Delete channel');

contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue

@@ -2,7 +2,7 @@
 
   <div>
     <VDialog
-      v-if="(currentChannel && currentChannel.publishing) || currentTask"
+      v-if="isSyncing || nothingToSync || isPublishing"
       :value="true"
       persistent
       :width="575"
@@ -20,6 +20,7 @@
                 {{ descriptionText }}
               </p>
               <ProgressBar
+                v-if="!nothingToSync"
                 :progressPercent="progressPercent"
                 :currentTaskError="currentTaskError"
               />
@@ -108,19 +109,52 @@
         type: String,
         default: '',
       },
+      syncing: {
+        type: Boolean,
+        default: false,
+      },
+      noSyncNeeded: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
         step: 1,
       };
     },
     computed: {
-      ...mapGetters('task', ['publishTaskForChannel']),
+      ...mapGetters('task', ['currentTasksForChannel']),
       ...mapGetters('currentChannel', ['currentChannel']),
+      currentTasks() {
+        return this.currentTasksForChannel(this.currentChannel.id) || null;
+      },
+      isSyncing() {
+        return this.syncing && this.currentChannel && !this.currentChannel.publishing;
+      },
+      // this handles validation errors from the Sync Resources Modal
+      // where .sync itself errors because of the validation error
+      // for not syncing channels with no imported resources
+      // this property is added her as a way to manager feedback to the user
+      nothingToSync() {
+        return this.noSyncNeeded;
+      },
+      isPublishing() {
+        return this.currentChannel && this.currentChannel.publishing;
+      },
       currentTask() {
-        return this.publishTaskForChannel(this.currentChannel.id) || null;
+        if (this.isSyncing) {
+          return this.currentTasks.find(task => task.task_type === 'sync-channel');
+        } else if (this.isPublishing) {
+          return this.currentTasks.find(task => task.task_type === 'export-channel');
+        } else {
+          return null;
+        }
       },
       progressPercent() {
+        if (this.nothingToSync) {
+          return 100;
+        }
         return get(this.currentTask, ['metadata', 'progress'], 0);
       },
       currentTaskError() {
@@ -133,16 +167,15 @@
         if (this.currentTask) {
           if (this.currentTask.task_type === 'duplicate-nodes') {
             return this.$tr('copyHeader');
-          } else if (this.currentTask.task_type === 'export-channel') {
+          } else if (this.isPublishing) {
             return this.$tr('publishHeader');
           } else if (this.currentTask.task_type === 'move-nodes') {
             return this.$tr('moveHeader');
-          } else if (
-            this.currentTask.task_type === 'sync-channel' ||
-            this.currentTask.task_type === 'sync-nodes'
-          ) {
+          } else if (this.isSyncing || this.nothingToSync) {
             return this.$tr('syncHeader');
           }
+        } else if (this.nothingToSync) {
+          return this.$tr('syncHeader');
         }
         return this.$tr('publishHeader');
       },
@@ -152,16 +185,15 @@
             return this.$tr('finishedMessage');
           } else if (this.currentTask.task_type === 'duplicate-nodes') {
             return this.$tr('copyDescription');
-          } else if (this.currentTask.task_type === 'export-channel') {
+          } else if (this.isPublishing) {
             return this.$tr('publishDescription');
           } else if (this.currentTask.task_type === 'move-nodes') {
             return this.$tr('moveDescription');
-          } else if (
-            this.currentTask.task_type === 'sync-channel' ||
-            this.currentTask.task_type === 'sync-nodes'
-          ) {
+          } else if (this.isSyncing) {
             return this.$tr('syncDescription');
           }
+        } else if (this.nothingToSync) {
+          return this.$tr('finishedMessage');
         }
         return this.$tr('publishDescription');
       },

contentcuration/contentcuration/frontend/channelEdit/views/progress/__tests__/progressModal.spec.js

@@ -5,24 +5,40 @@ import { factory } from '../../../store';
 const store = factory();
 
 const task = { task: { id: 123, task_type: 'test-task' } };
+const tasks = [
+  { task: { id: 123, task_type: 'test-task' } },
+  { task: { id: 456, task_type: 'test-task-2' } },
+];
 
 function makeWrapper(computed = {}) {
   return mount(ProgressModal, {
     store,
     computed: {
+      currentTasks() {
+        return tasks;
+      },
       currentTask() {
         return task;
       },
+      isPublishing() {
+        return true;
+      },
       ...computed,
     },
   });
 }
 
 describe('progressModal', () => {
-  it('should be hidden if there is no task', () => {
+  it('should be hidden if the user is not syncing or publishing', () => {
     let wrapper = makeWrapper({
-      currentTask() {
-        return null;
+      isSyncing() {
+        return false;
+      },
+      nothingToSync() {
+        return false;
+      },
+      isPublishing() {
+        return false;
       },
     });
     expect(wrapper.find('[data-test="progressmodal"]').exists()).toBe(false);

contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue

@@ -170,9 +170,19 @@
           tags: this.syncTags,
           files: this.syncFiles,
           assessment_items: this.syncExercises,
-        }).then(() => {
-          this.confirmSyncModal = false;
-        });
+        })
+          .then(() => {
+            this.confirmSyncModal = false;
+            this.$emit('syncing');
+          })
+          .catch(() => {
+            // add a way for the progress modal to provide feedback
+            // since the available error message doesn't make sense here,
+            // for now we will just have the operation be reported complete
+            // see ProgressModal nothingToSync for more info
+            this.confirmSyncModal = false;
+            this.$emit('nosync');
+          });
       },
     },
     $trs: {

contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js

@@ -63,9 +63,9 @@ export function publishChannel(context, version_notes) {
 
 export function stopPublishing(context) {
   return Channel.clearPublish(context.state.currentChannelId).then(() => {
-    const publishTask = context.rootGetters['task/publishTaskForChannel'](
+    const publishTask = context.rootGetters['task/currentTasksForChannel'](
       context.state.currentChannelId
-    );
+    ).find(task => task.task_type === 'export-channel');
     return publishTask
       ? context.dispatch('task/deleteTask', publishTask, { root: true })
       : Promise.resolve();

contentcuration/contentcuration/frontend/channelEdit/vuex/task/index.js

@@ -24,11 +24,9 @@ export default {
         return state.asyncTasksMap[taskId];
       };
     },
-    publishTaskForChannel(state, getters) {
+    currentTasksForChannel(state, getters) {
       return function(id) {
-        return getters.asyncTasks.find(
-          task => task.task_type === 'export-channel' && task.channel === id
-        );
+        return getters.asyncTasks.filter(task => task.channel === id);
       };
     },
   },