Show draft token in channelEdit view

AlexVelezLl · AlexVelezLl · commit 045277a1aa91 · 2026-03-10T05:54:43.000-05:00
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/modals/PreviewDraftChannelModal.vue b/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>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -218,6 +218,7 @@
         cancelAction$,
         languageLabel$,
         languageRequiredMessage$,
+        draftBeingPublishedNotice$,
         versionNotesRequiredMessage$,
       } = communityChannelsStrings;
 
@@ -372,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
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/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']),
diff --git a/contentcuration/contentcuration/frontend/shared/composables/__tests__/useChannelVersionHistory.spec.js b/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);
diff --git a/contentcuration/contentcuration/frontend/shared/composables/useChannelVersionHistory.js b/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 || [];
diff --git a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js b/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',
+  },
 });
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/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',
+  },
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue b/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"
             >
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsPanel.vue b/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
diff --git a/contentcuration/contentcuration/models.py b/contentcuration/contentcuration/models.py
@@ -1388,6 +1388,12 @@ def get_resource_count(self):
     def get_human_token(self):
         return self.secret_tokens.get(is_primary=True)
 
+    def get_draft_token(self):
+        draft_version = self.channel_versions.filter(version=None).first()
+        if not draft_version:
+            return None
+        return draft_version.secret_token
+
     def get_channel_id_token(self):
         return self.secret_tokens.get(token=self.id)
 
diff --git a/contentcuration/contentcuration/tests/test_channel_version.py b/contentcuration/contentcuration/tests/test_channel_version.py
@@ -70,3 +70,35 @@ def test_version_cannot_exceed_channel_version(self):
         )
         with self.assertRaises(ValidationError):
             cv.save()
+
+    def test_get_draft_token_returns_token_when_draft_version_exists(self):
+        """Test get_draft_token returns the secret_token of the version=None ChannelVersion."""
+        draft_version = ChannelVersion.objects.create(
+            channel=self.channel,
+            version=None,
+        )
+        token = draft_version.new_token()
+
+        result = self.channel.get_draft_token()
+        self.assertEqual(result, token)
+        self.assertIsInstance(result, SecretToken)
+        self.assertFalse(result.is_primary)
+
+    def test_get_draft_token_returns_none_when_no_draft_version(self):
+        """Test get_draft_token returns None when no version=None ChannelVersion exists."""
+        # Only create versioned ChannelVersions (not drafts)
+        ChannelVersion.objects.create(
+            channel=self.channel,
+            version=1,
+        )
+        result = self.channel.get_draft_token()
+        self.assertIsNone(result)
+
+    def test_get_draft_token_returns_none_when_draft_has_no_token(self):
+        """Test get_draft_token returns None when a draft version exists but has no token."""
+        ChannelVersion.objects.create(
+            channel=self.channel,
+            version=None,
+        )
+        result = self.channel.get_draft_token()
+        self.assertIsNone(result)
diff --git a/contentcuration/contentcuration/tests/viewsets/test_channel.py b/contentcuration/contentcuration/tests/viewsets/test_channel.py
@@ -931,6 +931,45 @@ def test_admin_restore_channel(self):
             channel.history.filter(actor=user, action=channel_history.RECOVERY).count(),
         )
 
+    def test_channel_detail_includes_draft_token_when_draft_version_exists(self):
+        """Test that the channel API response includes draft_token when a draft ChannelVersion exists."""
+        user = testdata.user()
+        channel = models.Channel.objects.create(
+            actor_id=user.id, **self.channel_metadata
+        )
+        channel.editors.add(user)
+
+        # Create a draft ChannelVersion (version=None) with a token
+        draft_version = ChannelVersion.objects.create(
+            channel=channel,
+            version=None,
+        )
+        token = draft_version.new_token()
+
+        self.client.force_authenticate(user=user)
+        response = self.client.get(
+            reverse("channel-detail", kwargs={"pk": channel.id}),
+            format="json",
+        )
+        self.assertEqual(response.status_code, 200, response.content)
+        self.assertEqual(response.data["draft_token"], token.token)
+
+    def test_channel_detail_draft_token_is_none_when_no_draft_version(self):
+        """Test that the channel API response has draft_token=None when no draft version exists."""
+        user = testdata.user()
+        channel = models.Channel.objects.create(
+            actor_id=user.id, **self.channel_metadata
+        )
+        channel.editors.add(user)
+
+        self.client.force_authenticate(user=user)
+        response = self.client.get(
+            reverse("channel-detail", kwargs={"pk": channel.id}),
+            format="json",
+        )
+        self.assertEqual(response.status_code, 200, response.content)
+        self.assertIsNone(response.data["draft_token"])
+
 
 class UnpublishedChangesQueryTestCase(StudioAPITestCase):
     def test_unpublished_changes_query_with_channel_object(self):
diff --git a/contentcuration/contentcuration/viewsets/channel.py b/contentcuration/contentcuration/viewsets/channel.py

Original file line number	Diff line number	Diff line change
`@@ -26,13 +26,15 @@`
`26`	`26`	`>`
`27`	`27`	`<VTab`
`28`	`28`	`class="px-3"`
	`29`	`+ href="#"`
`29`	`30`	`:disabled="isBusy"`
`30`	`31`	`:value="NotificationsTab.UNREAD"`
`31`	`32`	`>`
`32`	`33`	`{{ unreadNotificationsLabel$() }}`
`33`	`34`	`</VTab>`
`34`	`35`	`<VTab`
`35`	`36`	`class="px-3"`
	`37`	`+ href="#"`
`36`	`38`	`:disabled="isBusy"`
`37`	`39`	`:value="NotificationsTab.ALL"`
`38`	`40`	`>`