Merge pull request learningequality#5729 from AlexVelezLl/draft-tokens

Show draft tokens in Studio

Author: rtibbles

contentcuration/contentcuration/frontend/channelEdit/components/modals/PreviewDraftChannelModal.vue

@@ -0,0 +1,70 @@
+<template>
+
+  <KModal :title="previewYourDraftTitle$()">
+    <template #default>
+      <div>
+        <strong>{{ draftTokenLabel$() }}</strong>
+        <StudioCopyToken
+          :token="channel.draft_token"
+          :showLabel="false"
+        />
+        <p class="mt-16">{{ channelTokenDescription$() }}</p>
+      </div>
+    </template>
+    <template #actions>
+      <KButton
+        :text="dismissAction$()"
+        @click="handleDismiss"
+      />
+    </template>
+  </KModal>
+
+</template>
+
+
+<script setup>
+
+  import { onMounted } from 'vue';
+  import StudioCopyToken from 'shared/views/StudioCopyToken';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+  import { commonStrings } from 'shared/strings/commonStrings';
+  import logging from 'shared/logging';
+
+  const props = defineProps({
+    channel: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  const emit = defineEmits(['close']);
+
+  const { dismissAction$ } = commonStrings;
+  const { previewYourDraftTitle$, draftTokenLabel$, channelTokenDescription$ } =
+    communityChannelsStrings;
+
+  function handleDismiss() {
+    emit('close');
+  }
+
+  onMounted(() => {
+    if (!props.channel.draft_token) {
+      // If there is no draft token, we can't preview the draft, so we just close the modal
+      logging.error(
+        'Attempted to open PreviewDraftChannelModal without a draft token. Closing modal.',
+        { channelId: props.channel.id },
+      );
+      handleDismiss();
+    }
+  });
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .mt-16 {
+    margin-top: 16px;
+  }
+
+</style>

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue

@@ -13,8 +13,9 @@
 
       <template #default>
         <div>
-          <KRadioButtonGroup>
+          <component :is="showDraftMode ? 'KRadioButtonGroup' : 'div'">
             <KRadioButton
+              v-if="showDraftMode"
               :label="modeLive$()"
               :buttonValue="PublishModes.LIVE"
               :currentValue="mode"
@@ -26,7 +27,7 @@
             <div
               v-if="mode === PublishModes.LIVE"
               class="live-mode-content"
-              style="margin-top: 16px; margin-left: 24px"
+              :style="showDraftMode ? { marginLeft: '24px', marginTop: '16px' } : {}"
             >
               <div class="live-publish-info">
                 <KIcon
@@ -126,13 +127,14 @@
             </div>
 
             <KRadioButton
+              v-if="showDraftMode"
               :label="modeDraft$()"
               :buttonValue="PublishModes.DRAFT"
               :currentValue="mode"
               :description="modeDraftDescription$()"
               @input="mode = PublishModes.DRAFT"
             />
-          </KRadioButtonGroup>
+          </component>
         </div>
       </template>
 
@@ -166,6 +168,7 @@
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
   import { LanguagesList } from 'shared/leUtils/Languages';
   import logging from 'shared/logging';
+  import { FeatureFlagKeys } from 'shared/constants';
 
   export default {
     name: 'PublishSidePanel',
@@ -215,12 +218,14 @@
         cancelAction$,
         languageLabel$,
         languageRequiredMessage$,
+        draftBeingPublishedNotice$,
         versionNotesRequiredMessage$,
       } = communityChannelsStrings;
 
       const currentChannel = computed(() => store.getters['currentChannel/currentChannel']);
       const getContentNode = computed(() => store.getters['contentNode/getContentNode']);
       const areAllChangesSaved = computed(() => store.getters['areAllChangesSaved']);
+      const hasFeatureEnabled = computed(() => store.getters['hasFeatureEnabled']);
 
       const incompleteResourcesCount = computed(() => {
         if (!currentChannel.value) return 0;
@@ -259,6 +264,10 @@
         return true;
       });
 
+      const showDraftMode = computed(() =>
+        hasFeatureEnabled.value(FeatureFlagKeys.test_dev_feature),
+      );
+
       const submitText = computed(() => {
         return mode.value === PublishModes.DRAFT ? saveDraft$() : publishAction$();
       });
@@ -364,6 +373,7 @@
             await Channel.publishDraft(currentChannel.value.id, {
               use_staging_tree: false,
             });
+            store.dispatch('showSnackbarSimple', draftBeingPublishedNotice$());
             emit('close');
           } else {
             // `newChannelLanguage.value` is a KSelect option { value, label }, so we need to
@@ -392,6 +402,7 @@
         isChannelLanguageLoading,
         PublishModes,
         mode,
+        showDraftMode,
         version_notes,
         submitting,
         languageOptions,

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/__tests__/PublishSidePanel.spec.js

@@ -51,6 +51,7 @@ const renderComponent = (props = {}) => {
   store.commit('channel/ADD_CHANNEL', currentChannel);
   store.commit('contentNode/ADD_CONTENTNODE', rootNode);
   store.commit('SET_UNSAVED_CHANGES', props.areAllChangesSaved === false);
+  store.commit('UPDATE_SESSION', { is_admin: true });
 
   const router = new VueRouter();
 

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

@@ -192,6 +192,12 @@
                 </VListTileTitle>
               </VListTile>
             </template>
+            <VListTile
+              v-if="currentChannel && currentChannel.draft_token"
+              @click="showPreviewDraftModal = true"
+            >
+              <VListTileTitle>{{ getDraftTokenAction$() }}</VListTileTitle>
+            </VListTile>
             <VListTile
               v-if="isPublished"
               @click="showTokenModal = true"
@@ -277,6 +283,11 @@
       @delete="handleDelete"
       @close="showDeleteModal = false"
     />
+    <PreviewDraftChannelModal
+      v-if="showPreviewDraftModal && currentChannel"
+      :channel="currentChannel"
+      @close="showPreviewDraftModal = false"
+    />
     <VSpeedDial
       v-if="showClipboardSpeedDial"
       v-model="showClipboard"
@@ -340,6 +351,7 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
+  import PreviewDraftChannelModal from '../../components/modals/PreviewDraftChannelModal.vue';
   import Clipboard from '../../components/Clipboard';
   import SyncResourcesModal from '../sync/SyncResourcesModal';
   import ProgressModal from '../progress/ProgressModal';
@@ -361,6 +373,8 @@
   import DraggableRegion from 'shared/views/draggable/DraggableRegion';
   import { DropEffect } from 'shared/mixins/draggable/constants';
   import DraggablePlaceholder from 'shared/views/draggable/DraggablePlaceholder';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+  import { commonStrings } from 'shared/strings/commonStrings';
 
   export default {
     name: 'TreeViewBase',
@@ -381,8 +395,15 @@
       DraggablePlaceholder,
       SavingIndicator,
       QuickEditModal,
+      PreviewDraftChannelModal,
     },
     mixins: [titleMixin],
+    setup() {
+      const { getDraftTokenAction$ } = communityChannelsStrings;
+      return {
+        getDraftTokenAction$,
+      };
+    },
     props: {
       loading: {
         type: Boolean,
@@ -398,6 +419,7 @@
         showSyncModal: false,
         showClipboard: false,
         showDeleteModal: false,
+        showPreviewDraftModal: false,
         syncing: false,
         resubmitToCommunityLibraryModalData: null,
       };
@@ -533,6 +555,22 @@
         },
         immediate: true,
       },
+      isDraftPublishing(newVal, oldVal) {
+        if (!newVal && oldVal) {
+          const { draftPublishedNotice$ } = communityChannelsStrings;
+          const { previewAction$ } = commonStrings;
+          const snackbarData = {
+            text: draftPublishedNotice$(),
+          };
+          if (this.currentChannel.draft_token) {
+            snackbarData.actionText = previewAction$();
+            snackbarData.actionCallback = () => {
+              this.showPreviewDraftModal = true;
+            };
+          }
+          this.$store.dispatch('showSnackbar', snackbarData);
+        }
+      },
     },
     methods: {
       ...mapActions('channel', ['deleteChannel']),

contentcuration/contentcuration/frontend/shared/composables/__tests__/useChannelVersionHistory.spec.js

@@ -37,6 +37,7 @@ describe('useChannelVersionHistory', () => {
       expect(ChannelVersion.fetchCollection).toHaveBeenCalledWith({
         channel: 'channel-id',
         max_results: VERSIONS_PER_PAGE,
+        version__gte: 0,
       });
       expect(versions.value).toEqual(mockVersions);
       expect(hasMore.value).toBe(true);

contentcuration/contentcuration/frontend/shared/composables/useChannelVersionHistory.js

@@ -42,6 +42,7 @@ export function useChannelVersionHistory() {
       const response = await ChannelVersion.fetchCollection({
         channel: channelId,
         max_results: VERSIONS_PER_PAGE,
+        version__gte: 0, // Exclude unpublished versions with version=null
       });
 
       versions.value = response.results || [];

contentcuration/contentcuration/frontend/shared/strings/commonStrings.js

@@ -30,4 +30,12 @@ export const commonStrings = createTranslator('CommonStrings', {
     message: 'Channel Details',
     context: 'Label for a section that displays details about a channel',
   },
+  previewAction: {
+    message: 'Preview',
+    context: 'A label for an action that opens a preview of content',
+  },
+  dismissAction: {
+    message: 'Dismiss',
+    context: 'A label for an action that dismisses a notification or message',
+  },
 });

contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js

@@ -496,4 +496,32 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     message: 'Review',
     context: 'Action button to review a channel version submission to the Community Library',
   },
+
+  // Draft channel strings
+  draftBeingPublishedNotice: {
+    message: 'Draft version is being published',
+    context: 'Label indicating that a draft version of the channel is currently being published',
+  },
+  draftPublishedNotice: {
+    message: 'Draft published successfully',
+    context: 'Label indicating that a draft version of the channel has been successfully published',
+  },
+  previewYourDraftTitle: {
+    message: 'Preview your draft channel in Kolibri',
+    context: 'Title for the modal that shows instructions to preview a draft channel in Kolibri',
+  },
+  channelTokenDescription: {
+    message:
+      'To preview your draft channel right away, simply copy the unique draft channel token. This is the sole method to access the channel.',
+    context: 'Description for the channel token field in the draft preview instructions modal',
+  },
+  getDraftTokenAction: {
+    message: 'Get draft token',
+    context:
+      'Button text for the action to retrieve the draft token in the draft preview instructions modal',
+  },
+  draftTokenLabel: {
+    message: 'Draft token',
+    context: 'Label for the draft token field in the draft preview instructions modal',
+  },
 });

contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue

@@ -26,13 +26,15 @@
           >
             <VTab
               class="px-3"
+              href="#"
               :disabled="isBusy"
               :value="NotificationsTab.UNREAD"
             >
               {{ unreadNotificationsLabel$() }}
             </VTab>
             <VTab
               class="px-3"
+              href="#"
               :disabled="isBusy"
               :value="NotificationsTab.ALL"
             >

contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsPanel.vue

@@ -44,7 +44,23 @@
           :showLabel="false"
         />
         <span v-else>
-          {{ _details.primary_token.slice(0, 5) + '-' + _details.primary_token.slice(5) }}
+          {{ hyphenateToken(_details.primary_token) }}
+        </span>
+      </template>
+    </StudioDetailsRow>
+    <StudioDetailsRow
+      v-if="_details.draft_token"
+      :label="draftTokenLabel$()"
+    >
+      <template #default>
+        <StudioCopyToken
+          v-if="!printing"
+          :token="_details.draft_token"
+          :style="{ maxWidth: 'max-content' }"
+          :showLabel="false"
+        />
+        <span v-else>
+          {{ hyphenateToken(_details.draft_token) }}
         </span>
       </template>
     </StudioDetailsRow>
@@ -421,6 +437,8 @@
   import StudioDetailsRow from './StudioDetailsRow';
   import StudioThumbnail from 'shared/views/files/StudioThumbnail';
   import StudioCopyToken from 'shared/views/StudioCopyToken';
+  import useToken from 'shared/composables/useToken';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
 
   const DEFAULT_DETAILS = {
     name: '',
@@ -473,6 +491,14 @@
       titleMixin,
       metadataTranslationMixin,
     ],
+    setup() {
+      const { hyphenateToken } = useToken();
+      const { draftTokenLabel$ } = communityChannelsStrings;
+      return {
+        hyphenateToken,
+        draftTokenLabel$,
+      };
+    },
     props: {
       // Object matching that returned by the channel details and
       // node details API endpoints, see backend for details of the