Add loader if channel is being published and community library side p… by taoerman · Pull Request #5523 · learningequality/studio

taoerman · 2025-10-30T22:48:46Z

Summary

made the submit panel publishing-aware: it shows a centered “Channel is being published” loader, disables form and submit while publishing, then re-enables after polling.
Backend now blocks submissions if the channel is publishing (via main_tree.publishing).
Added unit tests for both frontend behavior and backend validation.

References

Fixed #5452

Reviewer guidance

run frontend and backend unit tests,
test the frontend manually.

…anel is open

AlexVelezLl · 2025-10-31T14:48:18Z

contentcuration/contentcuration/viewsets/community_library_submission.py

+        # Prevent creating submissions while a publish is in progress
+        if getattr(getattr(channel, "main_tree", None), "publishing", False):
+            raise ValidationError(
+                "Cannot create a community library submission while the channel is being published."
+            )


AlexVelezLl · 2025-10-31T14:49:42Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

+      let publishPollId = null;
+      function startPublishPolling() {
+        if (publishPollId || !isPublishing.value) return;
+        publishPollId = setInterval(() => {
+          Channel.fetchModel(props.channel.id).then(ch => {
+            if (ch) {
+              isPublishing.value = Boolean(ch.publishing);
+              if (!isPublishing.value) {
+                currentChannelVersion.value = ch.version;
+                clearInterval(publishPollId);
+                publishPollId = null;
+              }
+            }
+          });
+        }, 2000);


Oh, I think here we can use the liveQuery method instead? Just as you did for the draft version publishing! https://github.com/taoerman/studio/blob/781d95378f7f20dd1dc1cf2f4f10bdf15b0457a2/contentcuration/contentcuration/frontend/shared/data/resources.js#L1275

AlexVelezLl

Apologies for me leading us in the wrong direction 😅. It seems there is an easier way to monitor the publishing property without a liveQuery :)

AlexVelezLl · 2025-11-07T14:21:12Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

+      const isPublishing = ref(Boolean(props.channel.publishing));
+      const currentChannelVersion = ref(props.channel.version);
      const replacementConfirmed = ref(false);

+      // Monitor publishing completion using liveQuery to watch channel's publishing property
+      let publishSubscription = null;
+      let publishTimeout = null;
+
+      function startPublishMonitoring() {
+        if (publishSubscription || !isPublishing.value) return;
+
+        if (!Channel.table || !Channel.table.get) return;
+
+        const observable = liveQuery(() => {
+          return Channel.table.get(props.channel.id);
+        });
+
+        publishSubscription = observable.subscribe({
+          next: async channel => {
+            if (channel && !channel.publishing) {
+              stopPublishMonitoring();
+              isPublishing.value = false;
+              currentChannelVersion.value = channel.version;
+              await store.dispatch('channel/loadChannel', props.channel.id);
+            }
+          },
+        });
+
+        publishTimeout = setTimeout(() => {
+          stopPublishMonitoring();
+        }, 300000);
+      }
+
+      function stopPublishMonitoring() {
+        if (publishSubscription) {
+          publishSubscription.unsubscribe();
+          publishSubscription = null;
+        }
+        if (publishTimeout) {
+          clearTimeout(publishTimeout);
+          publishTimeout = null;
+        }
+      }
+
+      if (isPublishing.value) {
+        startPublishMonitoring();
+      }
+
+      watch(
+        () => currentChannel.value?.publishing,
+        (newPublishing, oldPublishing) => {
+          isPublishing.value = Boolean(newPublishing);
+          if (newPublishing && !oldPublishing) {
+            startPublishMonitoring();
+          } else if (!newPublishing && oldPublishing) {
+            stopPublishMonitoring();
+          }
+        },
+      );
+
+      onUnmounted(() => {
+        stopPublishMonitoring();
+      });


A hundred apologies, I did not catch this earlier... 🥲, but.... since the props.channel prop is already reactive, then a simply computed property would automatically watch any changes on the publishing property:

const isPublishing = computed(() => props.channel?.publishing === true);

And we wouldn't need to set up the monitoring machinery.

Fixed, Thanks!

AlexVelezLl · 2025-11-07T14:22:08Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

        () => currentChannel.value?.publishing,
        async (isPublishing, wasPublishing) => {
          if (wasPublishing === true && isPublishing === false && props.channel.id) {
-            await Channel.fetchModel(props.channel.id);
+            const ch = await Channel.fetchModel(props.channel.id);
+            if (ch) {
+              currentChannelVersion.value = ch.version;
+            }
            await store.dispatch('channel/loadChannel', props.channel.id);
          }
        },


Now that we can rely on the reactiveness of the props.channel, we can get rid of this watcher too!

Removed it, Thanks!

AlexVelezLl · 2025-11-07T14:23:40Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

+        if (isPublishing.value) {
+          showSnackbar({ text: submittingSnackbar$() });
+          return;
+        }


In theory, this should never get here, right? And even if it does, I don't think it'd be appropriate to show a "submitting" snackbar. Was there any particular reason for this?

I read the code again and tested the workflow manually and it would not get there. Removed, Thanks.

AlexVelezLl · 2025-11-07T14:30:16Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

      const countries = ref([]);
      const description = ref('');
+      const isPublishing = ref(Boolean(props.channel.publishing));
+      const currentChannelVersion = ref(props.channel.version);


Seems like the definition of this currentChannelVersion can also be replaced with a computed property: const currentChannelVersion = computed(() => props.channel.version);.

I tried it, and... it seems there is an error with the reactiveness of the version, as the version never gets updated!

However, this is not a problem with the reactiveness of the props.channel property, but with how we manage the changes in Studio. The reason why the version of props.channel doesn't change is that in the backend, when we create the change that informs the publish task has finished, we don't specify the new version in that change, and therefore, when changes are synced to the frontend, we don't update the channel version property. Therefore, the fix for this would be to include the new version of the channel in the channel update event after publishing a new version here! After this, we shouldn't need to reload the channel from the backend to get the proper updates of the version 😄.

Thanks Alex! LOL, I used const isPublishing = ref(Boolean(props.channel.publishing)); const currentChannelVersion = ref(props.channel.version); They worked on my laptop, but they needed some time to load. However, your idea is looks more reasonable! I will fix the code according to your idea.

AlexVelezLl · 2025-11-07T14:41:05Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

        if (!publishedData.value) return undefined;

-        return publishedData.value[currentChannel.value?.version];
+        return publishedData.value[currentChannelVersion.value];


Just a note that we may have a problem with this publishedData not being reloaded when the channel is published. Would you like to take a look and come up with a way to keep this updated smoothly? We can open another issue for this if that makes more sense 😄.

Fixed, Thanks!

AlexVelezLl · 2025-11-07T14:44:32Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

@@ -376,7 +454,10 @@
        () => currentChannel.value?.publishing,


I did not flag this earlier because I wanted to have the complete picture regarding this currentChannel prop with this PR. And now that it seems that props.channel is indeed reactive, then I think we can just always use props.channel, and avoid the definition of this currentChannel here?

The pros of using props.channel instead of currentChannel are that we make this side panel less coupled to the channel edit context. And if, for some reason, we want to show it in another place, it will be easier to implement.

Fixed Thanks!

AlexVelezLl

Thanks @taoerman! Just one little requirement before merging!

AlexVelezLl · 2025-11-12T15:06:41Z

...ation/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

+      // Watch for version changes and refetch publishedData
+      watch(currentChannelVersion, (newVersion, oldVersion) => {
+        if (newVersion && newVersion !== oldVersion) {
+          fetchPublishedData();
+        }
+      });


I think we can remove this and rely on the isPublishing watcher. If we keep both, we may end up making the same fetch twice, consuming time and resources unnecessarily.

Thanks Alex, I checked the code and found it truly redundant and duplicate. I've removed this watch.

AlexVelezLl

Thank you @taoerman!!

taoerman and others added 2 commits October 30, 2025 15:44

Add loader if channel is being published and community library side p…

0241323

…anel is open

[pre-commit.ci lite] apply automatic fixes

1a7b5c5

AlexVelezLl reviewed Oct 31, 2025

View reviewed changes

rtibbles assigned AlexVelezLl Nov 4, 2025

fix conflict

27fd389

AlexVelezLl mentioned this pull request Nov 6, 2025

Show resubmit channel to community library CTA after channel publish #5451

Closed

AlexVelezLl requested changes Nov 7, 2025

View reviewed changes

fix bug

f3540aa

AlexVelezLl reviewed Nov 12, 2025

View reviewed changes

remove redundant code

0d8c949

AlexVelezLl approved these changes Nov 12, 2025

View reviewed changes

AlexVelezLl merged commit 9932b7d into learningequality:unstable Nov 12, 2025
13 checks passed

Comments

Conversation

taoerman commented Oct 30, 2025

Summary

References

Reviewer guidance

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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

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!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AlexVelezLl left a comment •

edited

Loading