Update channel publishing UX to support publishing channel draft versions #5274

taoerman · 2025-08-12T05:18:00Z

Summary

Enhanced publish functionality to support "Live" and "Draft" publish types. Draft publishes save content without marking it as published or incrementing channel version. Updated PublishSidePanel.vue with mode selection, dynamic titles, and improved status display in ProgressModal.vue showing "Saving draft..." for drafts and "Published X minutes ago" for live publishes.

Manual verification: Tested draft publish functionality, confirmed PublishedNextChange entry creation, verified channel version remains unchanged, and main tree stays unpublished. PUBLISH button correctly remains enabled after draft save for subsequent live publishing.

References

#5209

Reviewer guidance

Test locally

…ions fix some typo fix a bug modal fix some bugs fix frame bug

update tests for publish draft using main tree Enhanced publish functionality to support three publish types fixed fix frontend tests

…ions fix some typo fix a bug modal fix some bugs fix frame bug

AlexVelezLl

Thanks @taoerman! Apologies, I forgot to add some instructions in the issue description regarding some of the patterns we want to use in new components. If you have any question, please let us know!

AlexVelezLl · 2025-08-12T14:16:34Z

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

@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <SidePanelModal


Apologies I didn't link how we use this component in other parts. This was a copy of the SidePanelModal component we have in Kolibri. Here you can see some examples of how we use it there. So there are couple of differences here, for example, we dont set the aria label to the modal, because its label is actually defined in the <hX> tag in the header. Also The side panel internally already handles the keyup.esc event

AlexVelezLl · 2025-08-12T14:17:44Z

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

+      @closePanel="onClose"
+    >
+      <template #header>
+        <h2 style="margin: 0">{{ getPanelTitle() }}</h2>


We treat a side panel as another page, so we usually use an h1 tag for its title

AlexVelezLl · 2025-08-12T14:20:01Z

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

+
+      <template #default>
+        <div class="form-section">
+          <VRadioGroup v-model="mode">


Apologies for not flagging this in the issue (I thought I had done it 😓). Currently, most of the Studio frontend codebase is built with Vuetify. However, for all these new features, we want to prioritize using our Kolibri Design System (KDS) as much as possible (unless relevant shared components already exist). So for example, for this RadioGroup, we can use our KRadioButtonGroup, and for radio buttons we can use our KRadioButton, and so on.

AlexVelezLl · 2025-08-12T14:23:29Z

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

+
+                                            <div class="form-section" style="width: 100%; max-width: 100%;">
+                  <div class="textarea-container">
+                    <label class="label">{{ $tr('versionNotesLabel') }}</label>


Here, we can also replicate the way the previous publish modal renders its description textarea using the KTextbox component

AlexVelezLl · 2025-08-12T14:24:40Z

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

+                    <textarea
+                      v-model="version_notes"
+                      :rows="4"
+                      :maxlength="30"


I know the designs shows a maxlength of 30, but it is too short. We can keep it in 250 instead.

AlexVelezLl · 2025-08-12T14:28:17Z

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

+      submitting: false,
+    };
+  },
+  computed: {


This is something I also forgot to describe in the issue, but we also encourage the use of the Vue Composition API for new components, though using the Options API is acceptable if you find it more comfortable :). Here you can find an example of how we use it in Kolibri.

AlexVelezLl · 2025-08-12T14:32:10Z

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

+    },
+  },
+  $trs: {
+    publishToLibrary: 'Publish to library',


For all these new strings, it will be better if we store them in the communityChannelsStrings file. Here you can find an example of how we usually build these strings files. And then, if we use the composition api, we can import this file, and destructure the needed string appending a "$" (e.g. here), and this is a function we can invoke to get the string (e.g. here).

taoerman · 2025-08-12T19:29:15Z

Hi @AlexVelezLl , I have fixed the code according to you comments. At the same time, I added language selector. Thanks!

AlexVelezLl

Thanks @taoerman! The draft publishing is working good! But there are some tweaks we can do in the code to follow some of our conventions in LE. I have noted most of them, as always, if you have any questions please let us know.

Also, I see that the lint check is not working properly. Could you please run pnpm lint-frontend:format to correct the code formatting? Thanks!

AlexVelezLl · 2025-08-12T21:10:12Z

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

+            <!-- Live mode content nested under the radio button -->
+            <div v-if="mode === 'live'" class="live-mode-content" style="margin-left: 24px; margin-top: 16px;">
+              <div class="info-section">
+                <VIconWrapper class="info-icon">info</VIconWrapper>


Here we can use our KIcon component instead. Here you will find the list of available icons!

Thanks! I used KIcon instead already.

AlexVelezLl · 2025-08-12T21:10:29Z

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

+
+              <div v-if="incompleteResourcesCount > 0" class="form-section warning-section">
+                <div class="warning-content">
+                  <VIconWrapper class="warning-icon">warning</VIconWrapper>


same to here.

AlexVelezLl · 2025-08-12T21:10:54Z

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

+
+      <template #bottomNavigation>
+        <div class="footer">
+          <VBtn flat @click="onClose">{{ cancel$() }}</VBtn>


Here we can use our KButton component instead :)

I have changed all VBtn in PublishSidePanel to KButton.

AlexVelezLl · 2025-08-12T21:14:45Z

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

+            <div v-if="mode === 'live'" class="live-mode-content" style="margin-left: 24px; margin-top: 16px;">
+              <div class="info-section">
+                <VIconWrapper class="info-icon">info</VIconWrapper>
+                <span>{{ publishingInfo$({ version: currentChannel.version, time: formattedPublishTime }) }}</span>


(Apologies for deviating from the figma specs, but can we show the next version instead? e.g. "You are publishing: Version 5".

That make sense, thanks!

AlexVelezLl · 2025-08-12T21:23:10Z

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

+import VIconWrapper from 'shared/views/VIconWrapper';
+import KRadioButtonGroup from 'kolibri-design-system/lib/KRadioButtonGroup';
+import KRadioButton from 'kolibri-design-system/lib/KRadioButton';
+import KTextbox from 'kolibri-design-system/lib/KTextbox';


All our KDS components are globally available, and we don't need to declare them in each component, as they are globally registered when we install KDS! https://github.com/misrob/kolibri-design-system/blob/9003ff6a56d99451be5f607a6f3b14baa0dbb4b9/lib/KThemePlugin.js#L126.

So we can skip these imports here!

Yes, i have deleted them.

AlexVelezLl · 2025-08-13T14:01:28Z

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

+    channelId: { type: String, required: true },
+  },
+  emits: ['close', 'submitted'],
+  setup(props, { emit }) {


great! 🎉

AlexVelezLl · 2025-08-13T14:03:14Z

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

+    };
+
+    const getPanelTitle = () => {
+      return mode.value === 'draft' ? publishToLibrary$() : publishChannel$();


I think we can keep the publishChannel$ title for both modes.

got it! that make sense!

AlexVelezLl · 2025-08-13T14:09:20Z

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

+.radio-description {
+  margin-left: 24px;
+  margin-bottom: 16px;
+  color: rgba(0, 0, 0, 0.6);


We don't usually use burned colors in the styles. Instead we have the $themePalette and $themeTokens global variables that we can use to manage dynamic branding colors https://design-system.learningequality.org/colors/#usage. Here you can see the tokens, and here the whole palette. Here you can see some examples of how we use them. We usually just add them as inline styles in the template, but if you want to define any variable inside the setup method, we usually do this instead (importing the themeTokens function from KDS).

Thanks for your link!

AlexVelezLl · 2025-08-13T14:14:22Z

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

+        const change = new PublishedChange({
+          key: id,
+          version_notes,
+          language: channel.language || currentLanguage,


The language in the publish method is just used to set the language of the email that will be sent to the user once the publish has finished. So I don't think the desired behavior here would be to prioritize the channel.language for this.

AlexVelezLl · 2025-08-13T14:27:02Z

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

    });
  },

+  _monitorDraftCompletion(channelId) {
+    const checkInterval = setInterval(async () => {


(Non blocking) Seems like there is a liveQuery we can use instead of this setInverval

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

Line 1307 in b12fefa

return this.table

.

got it. I've used liveQuery instead of setInterval.

taoerman · 2025-08-14T04:53:13Z

Thank you so much, @AlexVelezLl ! I have fixed the code according to your comments. Additionally, pnpm run test-jest and pnpm lint-frontend:format both passed!

I have learned a great deal about frontend development in this issue, especially Vue.

Thanks again!

taoerman · 2025-08-14T06:44:36Z

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

@@ -1209,45 +1209,86 @@ export const Channel = new CreateModelResource({
    });
  },

-  publish(id, version_notes) {
+  publish(id, version_notes, language) {


if I do not update publish function. After publishing, the language in change table would be "en" default.

Not necessarily, it will be set to the currentLanguage which is the language of the channel editor's UI. We should send the email in the language the user is currently seeing. If the user has set the system language to spanish, the success email should be sent in spanish, even if the language of the channel they were editing is english.

Also, there is a distinction here, one thing is the content language, i.e. the language the resources, folders, etc has. And a very different thing is the system language, which is the language the UI is showing to the user. We have support for ~285 content languages, i.e. the user can create resources for any of these 285 languages. But we have support just for 5 system languages, i.e. the user can see the studio interface just in 5 languages. So, if we are publishing a channel which language is in "Acholi", the email will try to be translated to this language, but since we dont have system language support for "Acholi", it will very likely fail to send the email, or it will send the email in a weird format.

So thats why here we should only rely on the currentLanguage, no matter what language the user selected on the publish modal, or what language is currently set in the channel

AlexVelezLl

Thanks @taoerman! We're getting there!! After this I think the implementation will be pretty much the same as the design specs! 😃

AlexVelezLl · 2025-08-18T17:46:34Z

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

+                <span>{{
+                  publishingInfo$({
+                    version: currentChannel.version + 1,
+                    time: formattedPublishTime,


(Apologies for deviating from the designs 😓) Here we should not show the current time for the publish version, it should only say "(i) You're publishing: Version 1" Without showing the current datetime

I've removed current time.

AlexVelezLl · 2025-08-18T17:46:36Z

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

+                  :invalidText="
+                    version_notes.length === 0 ? 'Version notes are required' : maxLengthError$()
+                  "
+                  :showInvalidText="version_notes.length === 0 || version_notes.length > 250"


There is a little, small UX problem with setting this validation directly here, and is that this validation is shown inmediately after the user open the side panel, but the user hasn't made any error yet, so we should show this just when the user has already interacted (i.e. blurred) the input. The previous publish modal implemented a "lazy validation", by creating a ref variable to set if the invalid text should be showed or not, and then they set this value on the submit handler, we can do the same, but in the @blur event that is emitted from the KTextbox.

I've added lazy validation into version notes.

AlexVelezLl · 2025-08-18T17:55:00Z

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

+                <div
+                  class="warning-content"
+                  :style="{
+                    backgroundColor: $themeTokens.warning,


Just a couple of design changes we need to fully align the implementation with the specs:

The background color of this warning should be $themePalette.yellow.v_100. Without border.

The warning Icon should have the color $themePalette.yellow.v_500.

The border radius should be 4px.

The incompleteResourcesDescription should be separated in two strings and added in two different paragraphs, to show two lines. We can name it incompleteResourcesDescription1 and incompleteResourcesDescription2, or incompleteResourcesDescription and incompleteResourcesCallToAction, the way you prefer!

I've fixed the design.

AlexVelezLl · 2025-08-18T21:07:58Z

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

+      </template>
+
+      <template #bottomNavigation>
+        <div class="footer">


It seems there is something a bit weird here, I am seeing the buttons aligned to the left

.

It seems we need to set a width: 100% to the footer class

AlexVelezLl · 2025-08-18T21:10:04Z

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

+      <template #bottomNavigation>
+        <div class="footer">
+          <KButton
+            flat


Here the way we have to set a flat button is using the appearance prop set to flat-button. But we don't need it here.

I've added width: 100% and used appearance prop.

AlexVelezLl · 2025-08-18T21:44:21Z

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

+    message: 'Publish channel',
+  },
+  publishLive: {
+    message: 'PUBLISH',


The KButton component already takes care of setting the letter case for the label, so here we can just set the message to "Publish". The same with "Save draft".

AlexVelezLl · 2025-08-18T21:47:15Z

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

+    message: "You're publishing: Version {version} ({time})",
+  },
+  incompleteResourcesWarning: {
+    message: '{count} incomplete resources.',


To support the distinction between plural vs singular messsages, we can replace this message to be:

Suggested change

message: '{count} incomplete resources.',

message: '{count, number} {count, plural, one {incomplete resource} other {incomplete resources}}.',

Thanks, I've fixed according to comment.

AlexVelezLl · 2025-08-18T21:48:23Z

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

+      "Incomplete resources will not be published and made available for download in Kolibri. Click 'Publish' to confirm that you would like to publish anyway.",
+  },
+  maxLengthError: {
+    message: 'Maximum 250 characters allowed',


Just saw that we don't have any max character limits error. It seems that our KTextbox will never have a value with more than the maxLength characters long

AlexVelezLl · 2025-08-18T22:03:59Z

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

+                >
+                  <KIcon
+                    icon="warning"
+                    :style="{ color: $themeTokens.warningText }"


Here we should use the prop color instead of setting the color on the styles.

I've used prop color instead of style.

AlexVelezLl · 2025-08-18T22:04:45Z

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

+  maxLengthError: {
+    message: 'Maximum 250 characters allowed',
+  },
+  cancel: {


Could we name this message cancelAction instead? Thanks!

I've changed cancel to cancelAction.

taoerman · 2025-08-21T01:59:30Z

Hi @AlexVelezLl , thanks for your review and patience. I have fixed the code according to your comments.

AlexVelezLl and others added 3 commits August 11, 2025 23:08

Copy side panel modal to Studio

cd3a96f

Add community channels strings file

0fd741d

Update channel publishing UX to support publishing channel draft vers…

8352770

…ions fix some typo fix a bug modal fix some bugs fix frame bug

taoerman force-pushed the community-channels branch from 6cf5b0c to 8352770 Compare August 12, 2025 06:08

taoerman and others added 7 commits August 11, 2025 23:10

Update channel logic to support publishing channel draft

b394400

update tests for publish draft using main tree Enhanced publish functionality to support three publish types fixed fix frontend tests

delete version_notes and language for publish next

3d3d4d3

delete all version_notes and language for publish_next

1bb3c4c

Copy side panel modal to Studio

a6ddd3e

Add community channels strings file

a0545da

Update channel publishing UX to support publishing channel draft vers…

39ce0a3

…ions fix some typo fix a bug modal fix some bugs fix frame bug

Merge branch 'community-channels' into community-channels

b3ab688

marcellamaki added this to the Studio: Easy Sharing of Community Channels milestone Aug 12, 2025

AlexVelezLl reviewed Aug 12, 2025

View reviewed changes

taoerman added 2 commits August 12, 2025 12:10

fix code

cf1a789

fix code

b12fefa

AlexVelezLl requested changes Aug 13, 2025

View reviewed changes

AlexVelezLl self-assigned this Aug 13, 2025

taoerman added 2 commits August 13, 2025 21:00

fix code according to comments

c234fc3

fix language code

0a52d4f

fix language selector

62b20fc

taoerman commented Aug 14, 2025

View reviewed changes

continue to fix language selector

0c68491

AlexVelezLl reviewed Aug 18, 2025

View reviewed changes

fix according to comments

6cefdde

fixed code to pass format test

30b48bb

	message: '{count} incomplete resources.',
	message: '{count, number} {count, plural, one {incomplete resource} other {incomplete resources}}.',

Update channel publishing UX to support publishing channel draft versions #5274

Are you sure you want to change the base?

Update channel publishing UX to support publishing channel draft versions #5274

Conversation

taoerman commented Aug 12, 2025

Summary

References

Reviewer guidance

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

taoerman commented Aug 12, 2025

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

taoerman commented Aug 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!