Add publish draft button in staging page (#5077)

* Add publish draft button

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: taoerman

contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue

@@ -226,6 +226,14 @@
               {{ $tr('openSummaryDetailsDialogBtn') }}
             </VBtn>
 
+            <VBtn
+              color="primary"
+              data-test="display-publish-draft-dialog-btn"
+              @click="displayPublishDraftDialog = true"
+            >
+              {{ $tr('publishDraft') }}
+            </VBtn>
+
             <VBtn
               color="primary"
               data-test="display-deploy-dialog-btn"
@@ -289,6 +297,46 @@
           </VFlex>
         </VLayout>
       </KModal>
+
+      <KModal
+        v-if="displayPublishDraftDialog"
+        data-test="publish-draft-dialog"
+        :title="$tr('publishDraft')"
+        :submitText="$tr('confirmPublishDraftBtn')"
+        :submitDisabled="isPublishingDraft"
+        :cancelDisabled="isPublishingDraft"
+        :cancelText="$tr('cancelPublishDraftBtn')"
+        @submit="onPublishDraftClick"
+        @cancel="displayPublishDraftDialog = false"
+      >
+        <p>{{ $tr('publishDraftDialogDescription') }}</p>
+
+        <VLayout data-test="deploy-dialog-live-resources">
+          <VFlex
+            xs4
+            class="font-weight-bold"
+          >
+            {{ $tr('liveResources') }}:
+          </VFlex>
+          <VFlex>
+            {{ $tr('topicsCount', { count: topicsCountLive }) }},
+            {{ $tr('resourcesCount', { count: resourcesCountLive }) }}
+          </VFlex>
+        </VLayout>
+
+        <VLayout data-test="deploy-dialog-staged-resources">
+          <VFlex
+            xs4
+            class="font-weight-bold"
+          >
+            {{ $tr('stagedResources') }}:
+          </VFlex>
+          <VFlex>
+            {{ $tr('topicsCount', { count: topicsCountStaged }) }},
+            {{ $tr('resourcesCount', { count: resourcesCountStaged }) }}
+          </VFlex>
+        </VLayout>
+      </KModal>
     </template>
   </div>
 
@@ -352,9 +400,11 @@
         isLoading: true,
         displaySummaryDetailsDialog: false,
         displayDeployDialog: false,
+        displayPublishDraftDialog: false,
         drawer: false,
         elevated: false,
         isDeploying: false,
+        isPublishingDraft: false,
       };
     },
     computed: {
@@ -502,6 +552,7 @@
       ...mapActions('currentChannel', [
         'loadCurrentChannelStagingDiff',
         'deployCurrentChannel',
+        'publishDraftChannel',
         'reloadCurrentChannelStagingDiff',
       ]),
       ...mapActions('currentChannel', { loadCurrentChannel: 'loadChannel' }),
@@ -591,6 +642,25 @@
 
         this.deployCurrentChannel();
       },
+      onPublishDraftClick() {
+        this.displayPublishDraftDialog = false;
+        this.isPublishingDraft = true;
+
+        this.publishDraftChannel()
+          .then(() => {
+            this.isPublishingDraft = false;
+            this.showSnackbar({
+              text: this.$tr('draftPublished'),
+            });
+          })
+          .catch(error => {
+            this.isPublishingDraft = false;
+            this.showSnackbar({
+              text: error.response?.data?.message || this.$tr('publishDraftError'),
+              color: 'error',
+            });
+          });
+      },
     },
     $trs: {
       deploy: 'Deploy',
@@ -617,6 +687,12 @@
       channelDeployed: 'Channel has been deployed',
       emptyTopicText: 'This topic is empty',
       viewDetails: 'View details',
+      publishDraft: 'Publish draft',
+      publishDraftDialogDescription: 'You are about to publish a draft of your staged changes.',
+      cancelPublishDraftBtn: 'Cancel',
+      confirmPublishDraftBtn: 'Publish',
+      draftPublished: 'Draft channel has been published',
+      publishDraftError: 'An error occurred while publishing the draft channel',
     },
   };
 

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

@@ -55,6 +55,10 @@ export function publishChannel(context, version_notes) {
   return Channel.publish(context.state.currentChannelId, version_notes);
 }
 
+export function publishDraftChannel(context) {
+  return Channel.publishDraft(context.state.currentChannelId);
+}
+
 export function channelLanguageExistsInResources(context) {
   const channelId = context.state.currentChannelId;
   return Channel.languageExistsInResources(channelId);

contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js

@@ -7,6 +7,7 @@ import {
   MovedChange,
   CopiedChange,
   PublishedChange,
+  PublishedNextChange,
   SyncedChange,
   DeployedChange,
   UpdatedDescendantsChange,
@@ -252,6 +253,21 @@ describe('Change Types', () => {
     });
   });
 
+  it('should persist only the specified fields in the PublishedNextChange', async () => {
+    const change = new PublishedNextChange({
+      key: '1',
+      table: TABLE_NAMES.CHANNEL,
+      source: CLIENTID,
+    });
+    const rev = await change.saveChange();
+    const persistedChange = await db[CHANGES_TABLE].get(rev);
+    expect(persistedChange).toEqual({
+      rev,
+      channel_id: change.key,
+      ...pick(change, ['type', 'key', 'table', 'source']),
+    });
+  });
+
   it('should persist only the specified fields in the SyncedChange', async () => {
     const change = new SyncedChange({
       key: '1',
@@ -593,6 +609,19 @@ describe('Change Types Unhappy Paths', () => {
     ).toThrow(new TypeError('language is required for a PublishedChange but it was undefined'));
   });
 
+  // PublishedNextChange
+  it('should throw error when PublishedNextChange is instantiated without key', () => {
+    expect(() => new PublishedNextChange({ table: TABLE_NAMES.CHANNEL, source: CLIENTID })).toThrow(
+      new TypeError('key is required for a PublishedNextChange but it was undefined'),
+    );
+  });
+
+  it('should throw error when PublishedNextChange is instantiated with invalid table', () => {
+    expect(() => new PublishedNextChange({ key: '1', table: 'test', source: CLIENTID })).toThrow(
+      new ReferenceError('test is not a valid table value'),
+    );
+  });
+
   // SyncedChange
   it('should throw error when SyncedChange is instantiated without titles_and_descriptions', () => {
     expect(

contentcuration/contentcuration/frontend/shared/data/applyRemoteChanges.js

@@ -8,8 +8,17 @@ import { INDEXEDDB_RESOURCES } from './registry';
 import { RolesNames } from 'shared/leUtils/Roles';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
-const { CREATED, DELETED, UPDATED, MOVED, PUBLISHED, SYNCED, DEPLOYED, UPDATED_DESCENDANTS } =
-  CHANGE_TYPES;
+const {
+  CREATED,
+  DELETED,
+  UPDATED,
+  MOVED,
+  PUBLISHED,
+  PUBLISHED_NEXT,
+  SYNCED,
+  DEPLOYED,
+  UPDATED_DESCENDANTS,
+} = CHANGE_TYPES;
 
 export function applyMods(obj, mods) {
   for (const keyPath in mods) {
@@ -32,6 +41,7 @@ export function collectChanges(changes) {
         [UPDATED]: [],
         [MOVED]: [],
         [PUBLISHED]: [],
+        [PUBLISHED_NEXT]: [],
         [SYNCED]: [],
         [DEPLOYED]: [],
         [UPDATED_DESCENDANTS]: [],

contentcuration/contentcuration/frontend/shared/data/changes.js

@@ -438,6 +438,19 @@ export class PublishedChange extends Change {
   }
 }
 
+export class PublishedNextChange extends Change {
+  constructor(fields) {
+    fields.type = CHANGE_TYPES.PUBLISHED_NEXT;
+    super(fields);
+    if (this.table !== TABLE_NAMES.CHANNEL) {
+      throw TypeError(
+        `${this.changeType} is only supported by ${TABLE_NAMES.CHANNEL} table but ${this.table} was passed instead`,
+      );
+    }
+    this.setChannelAndUserId({ id: this.key });
+  }
+}
+
 export class SyncedChange extends Change {
   constructor({ titles_and_descriptions, resource_details, files, assessment_items, ...fields }) {
     fields.type = CHANGE_TYPES.SYNCED;

contentcuration/contentcuration/frontend/shared/data/constants.js

@@ -10,6 +10,7 @@ export const CHANGE_TYPES = {
   SYNCED: 7,
   DEPLOYED: 8,
   UPDATED_DESCENDANTS: 9,
+  PUBLISHED_NEXT: 10,
 };
 /**
  * An array of change types that directly result in the creation of nodes

contentcuration/contentcuration/frontend/shared/data/resources.js

@@ -42,6 +42,7 @@ import {
   SyncedChange,
   DeployedChange,
   UpdatedDescendantsChange,
+  PublishedNextChange,
 } from './changes';
 import urls from 'shared/urls';
 import { currentLanguage } from 'shared/i18n';
@@ -1233,6 +1234,17 @@ export const Channel = new CreateModelResource({
     });
   },
 
+  publishDraft(id) {
+    const change = new PublishedNextChange({
+      key: id,
+      table: this.tableName,
+      source: CLIENTID,
+    });
+    return this.transaction({ mode: 'rw' }, CHANGES_TABLE, () => {
+      return this._saveAndQueueChange(change);
+    });
+  },
+
   deploy(id) {
     const change = new DeployedChange({
       key: id,

contentcuration/contentcuration/frontend/shared/data/serverSync.js

@@ -36,6 +36,7 @@ const ChangeTypeMapFields = {
     'excluded_descendants',
   ]),
   [CHANGE_TYPES.PUBLISHED]: commonFields.concat(['version_notes', 'language']),
+  [CHANGE_TYPES.PUBLISHED_NEXT]: commonFields,
   [CHANGE_TYPES.SYNCED]: commonFields.concat([
     'titles_and_descriptions',
     'resource_details',