Updates syncing metadata fields on syncing modal

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

@@ -1,6 +1,9 @@
 <template>
 
-  <VContainer fluid class="pa-0">
+  <VContainer
+    fluid
+    class="pa-0"
+  >
     <ToolBar
       v-if="currentChannel"
       color="white"
@@ -13,7 +16,10 @@
       <VToolbarTitle class="notranslate">
         {{ currentChannel.name }}
       </VToolbarTitle>
-      <VToolbarItems v-if="$vuetify.breakpoint.smAndUp" class="ml-4">
+      <VToolbarItems
+        v-if="$vuetify.breakpoint.smAndUp"
+        class="ml-4"
+      >
         <router-link
           :to="viewChannelDetailsLink"
           @click="trackClickEvent('Summary')"
@@ -30,7 +36,12 @@
         >
           <VBadge color="transparent">
             <template #badge>
-              <Icon v-if="!currentChannel.language" color="red" small class="edit-channel-error">
+              <Icon
+                v-if="!currentChannel.language"
+                color="red"
+                small
+                class="edit-channel-error"
+              >
                 error
               </Icon>
             </template>
@@ -46,10 +57,20 @@
       <VSpacer />
       <OfflineText indicator />
       <ProgressModal />
-      <div v-if="errorsInChannel && canEdit" class="mx-1">
-        <VTooltip bottom lazy>
+      <div
+        v-if="errorsInChannel && canEdit"
+        class="mx-1"
+      >
+        <VTooltip
+          bottom
+          lazy
+        >
           <template #activator="{ on }">
-            <div class="amber--text title" style="width: max-content;" v-on="on">
+            <div
+              class="amber--text title"
+              style="width: max-content;"
+              v-on="on"
+            >
               {{ $formatNumber(errorsInChannel) }}
               <Icon color="amber">
                 warning
@@ -60,13 +81,24 @@
         </VTooltip>
       </div>
       <template v-if="$vuetify.breakpoint.smAndUp">
-        <span v-if="canManage && isRicecooker" class="font-weight-bold grey--text subheading">
+        <span
+          v-if="canManage && isRicecooker"
+          class="font-weight-bold grey--text subheading"
+        >
           {{ $tr('apiGenerated') }}
         </span>
-        <VTooltip v-if="!loading && canManage" bottom attach="body" lazy>
+        <VTooltip
+          v-if="!loading && canManage"
+          bottom
+          attach="body"
+          lazy
+        >
           <template #activator="{ on }">
             <!-- Need to wrap in div to enable tooltip when button is disabled -->
-            <div style="height: 100%;" v-on="on">
+            <div
+              style="height: 100%;"
+              v-on="on"
+            >
               <VBtn
                 color="primary"
                 flat
@@ -82,14 +114,21 @@
           </template>
           <span>{{ publishButtonTooltip }}</span>
         </VTooltip>
-        <span v-else-if="!loading" class="font-weight-bold grey--text subheading">
+        <span
+          v-else-if="!loading"
+          class="font-weight-bold grey--text subheading"
+        >
           {{ $tr('viewOnly') }}
         </span>
       </template>
       <VToolbarItems>
         <Menu v-if="showChannelMenu">
           <template #activator="{ on }">
-            <VBtn flat icon v-on="on">
+            <VBtn
+              flat
+              icon
+              v-on="on"
+            >
               <Icon>more_horiz</Icon>
             </VBtn>
           </template>
@@ -105,7 +144,10 @@
               <VListTile :to="viewChannelDetailsLink">
                 <VListTileTitle>{{ $tr('channelDetails') }}</VListTileTitle>
               </VListTile>
-              <VListTile v-if="canEdit" :to="editChannelLink">
+              <VListTile
+                v-if="canEdit"
+                :to="editChannelLink"
+              >
                 <VListTileTitle>
                   {{ $tr('editChannel') }}
                   <Icon
@@ -164,24 +206,41 @@
     <MainNavigationDrawer v-model="drawer" />
     <slot></slot>
 
-    <PublishModal v-if="showPublishModal" v-model="showPublishModal" />
+    <PublishModal
+      v-if="showPublishModal"
+      v-model="showPublishModal"
+    />
     <template v-if="isPublished">
-      <ChannelTokenModal v-model="showTokenModal" :channel="currentChannel" />
+      <ChannelTokenModal
+        v-model="showTokenModal"
+        :channel="currentChannel"
+      />
     </template>
     <SyncResourcesModal
       v-if="currentChannel"
       v-model="showSyncModal"
       :channel="currentChannel"
       @syncing="syncInProgress"
     />
-    <MessageDialog v-model="showDeleteModal" :header="$tr('deleteTitle')">
+    <MessageDialog
+      v-model="showDeleteModal"
+      :header="$tr('deleteTitle')"
+    >
       {{ $tr('deletePrompt') }}
       <template #buttons="{ close }">
         <VSpacer />
-        <VBtn color="primary" flat @click="close">
+        <VBtn
+          color="primary"
+          flat
+          @click="close"
+        >
           {{ $tr('cancel') }}
         </VBtn>
-        <VBtn color="primary" data-test="delete" @click="handleDelete">
+        <VBtn
+          color="primary"
+          data-test="delete"
+          @click="handleDelete"
+        >
           {{ $tr('deleteChannelButton') }}
         </VBtn>
       </template>
@@ -203,7 +262,11 @@
           @draggableDrop="$emit('dropToClipboard', $event)"
         >
           <template #default>
-            <VBtn v-model="showClipboard" fab class="clipboard-fab">
+            <VBtn
+              v-model="showClipboard"
+              fab
+              class="clipboard-fab"
+            >
               <Icon>content_paste</Icon>
             </VBtn>
           </template>

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

@@ -1,14 +1,21 @@
 <template>
 
   <div class="px-1">
-    <div v-if="isSyncing && !syncError" class="grey--text" data-test="progress">
+    <div
+      v-if="showSyncingProgress"
+      class="grey--text"
+      data-test="progress"
+    >
       <span>{{ $tr('syncHeader') }}</span>&nbsp;<span>{{ progressPercent }}</span>
     </div>
     <div
       v-else-if="syncError"
       class="red--text"
     >
-      <Icon small color="red">
+      <Icon
+        small
+        color="red"
+      >
         error
       </Icon>
       {{ $tr('syncError') }}
@@ -17,15 +24,25 @@
       v-else-if="currentPublishTaskError"
       class="red--text"
     >
-      <Icon small color="red">
+      <Icon
+        small
+        color="red"
+      >
         error
       </Icon>
       {{ $tr('defaultErrorText') }}
     </div>
-    <div v-else-if="isPublishing" class="grey--text" data-test="progress">
+    <div
+      v-else-if="isPublishing"
+      class="grey--text"
+      data-test="progress"
+    >
       <span>{{ $tr('publishHeader') }}</span>&nbsp;<span>{{ progressPercent }}</span>
     </div>
-    <div v-else class="grey--text">
+    <div
+      v-else
+      class="grey--text"
+    >
       {{ lastPublished ?
         $tr('lastPublished', { last_published: $formatRelative(lastPublished, now) }) :
         $tr('unpublishedText')
@@ -37,7 +54,7 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
+  import { mapActions, mapGetters } from 'vuex';
   import get from 'lodash/get';
   import { TASK_ID } from 'shared/data/constants';
 
@@ -47,8 +64,8 @@
       now: Date.now(),
     }),
     computed: {
-      ...mapGetters('task', ['getAsyncTask', 'getPublishTaskForChannel']),
       ...mapGetters('currentChannel', ['currentChannel', 'canManage']),
+      ...mapGetters('task', ['getAsyncTask', 'getPublishTaskForChannel']),
       isSyncing() {
         return this.currentTask && this.currentTask.task_name === 'sync-channel';
       },
@@ -64,8 +81,7 @@
         return this.getAsyncTask(this.currentChannel[TASK_ID]) || null;
       },
       progressPercent() {
-        const progressPercent = get(this.currentTask, ['progress'], 0);
-        return this.$formatNumber(Math.round(progressPercent || 0) / 100, {
+        return this.$formatNumber(Math.round(get(this.currentTask, ['progress'], 0) || 0) / 100, {
           style: 'percent',
           minimumFractionDigits: 0,
           maximumFractionDigits: 0,
@@ -95,6 +111,18 @@
         }
         return date;
       },
+      showSyncingProgress() {
+        return this.isSyncing && !this.syncError;
+      },
+    },
+    watch: {
+      showSyncingProgress: {
+        handler(newValue, oldValue) {
+          this.showSnackbarOnCompleteSync(newValue, oldValue);
+        },
+        immediate: true,
+        deep: true,
+      },
     },
     mounted() {
       this.timer = setInterval(() => {
@@ -104,13 +132,24 @@
     beforeDestroy() {
       clearInterval(this.timer);
     },
+    methods: {
+      ...mapActions(['showSnackbar']),
+      showSnackbarOnCompleteSync(newShowProgress, oldShowProgress) {
+        if (!newShowProgress && oldShowProgress) {
+          this.showSnackbar({
+            text: this.$tr('syncedSnackbar'),
+          });
+        }
+      },
+    },
     $trs: {
       defaultErrorText: 'Last attempt to publish failed',
       publishHeader: 'Publishing channel',
       lastPublished: 'Published {last_published}',
       unpublishedText: 'Unpublished',
-      syncHeader: 'Syncing channel',
+      syncHeader: 'Syncing resources',
       syncError: 'Last attempt to sync failed',
+      syncedSnackbar: 'Resources synced',
     },
   };
 

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

@@ -165,7 +165,7 @@ describe('ProgressModal', () => {
       });
 
       it('should display syncing message', () => {
-        expect(wrapper.text()).toContain('Syncing channel');
+        expect(wrapper.text()).toContain('Syncing resources');
       });
 
       it('should display progress', () => {