Refreshing the channel creation page leads to 404 channel not found

[jayoshih]

Observed behavior

When opening the page to create a new channel, if I refresh the page, I receive a 404 channel not found error.

This was especially annoying when my thumbnail failed to upload and I had to refresh the page, only to be led outside of the channel creation page

GIF-refresh.mp4

Desired behavior

Refreshing the channel creation page should not result in a 404.

Constraints

• At this time, maintaining the field inputs on refresh is out of scope

[jonboiser]

This is happening because when "New Channel" is clicked, the user is taken to a URL like

https://develop.studio.learningequality.org/channels/#/d16a3b21d49547888cf0bc9fd2d4bd1d/edit?last=CHANNELS_EDITABLE,

where I'm assuming the d16a3b21d49547888cf0bc9fd2d4bd1d was automatically generated on the client side, since I don't see a POST request for a new channel that coincides with navigating to this page.

So it makes sense that if the user refreshes on that URL before actually creating the channel, you would get a 404 page, so I'm not sure this aspect of the behavior is actually a bug.

I think the proper thing to do might be to not optimistically assign the new channel an actual ID (esp. if we're not creating a new record on the DB) open up the New Channel workflow with a more generic URL.

[MisRob]

@jonboiser

Yes, we generate ID's on the client side.

So it makes sense that if the user refreshes on that URL before actually creating the channel, you would get a 404 page, so I'm not sure this aspect of the behavior is actually a bug.

It's a bug at this point. This is what you'll see:

404 page would be helpful but it still feels a bit confusing from the user point of view.

I think the proper thing to do might be to not optimistically assign the new channel an actual ID (esp. if we're not creating a new record on the DB) open up the New Channel workflow with a more generic URL.

It sounds like a good idea that would simplify the process a lot. It would be nice to have something like /channels/#/new URL and do not generate ID until "Save" is hit and also do not send any requests - right now, I can see two that seem to be unnecessary before actually creating a new channel:

[MisRob]

I see that in the video attached to the original report, there actually is 404 page displayed.

The gif with no 404 page and infinite loading I uploaded above was recorded in Firefox. I've just checked that in Chrome, 404 page is displayed properly indeed.

[jonboiser]

I just tried this in Firefox and I get the same empty page + loader, along seeing the "terms and conditions" modal.

[Pursottam6003]

Is this issue still open to work?

[rtibbles]

Hi @Pursottam6003 - it should be! It seems like the consensus here is to use a generic new URL when creating a new channel, so would need to add special handling for that.

[rtibbles]

I have assigned you, do let me know if you need to be unassigned at any point - thanks for your interest!

[SoumyoPurkayastha]

@MisRob If this issue is still open, can I work on it?

[Pritam1729]

Hi @MisRob, I'd appreciate it if you could assign me to work on the open issue. Thanks!

[MisRob]

Hi @SoumyoPurkayastha and @Pritam1729, thank you for volunteering! I'm sorry for delayed response, I just returned from a long vacation, and the whole team had holidays too. I'm assigning @SoumyoPurkayastha as you asked first. Please let us know if you still wish to work on it.

@Pritam1729 We currently have other contributing opportunities in three repositories. You can see the contributing guidelines including links to issues suitable for contribution for each repository here:

• Kolibri Contributing Guidelines
• Kolibri Design System Contributing Guidelines
• Studio Contributing Guidelines

[SoumyoPurkayastha]

I'd love to work on it @MisRob. I'll keep you updated on my progress

[MisRob]

Alright, thank you, I will assign you then @SoumyoPurkayastha

[SoumyoPurkayastha]

Hey @MisRob, while setting up this project I had some troubles with docker. After inspecting the errors I finally found the problem to be Postgre docker image link. Adding an http:// to the link solved the issue for me. I'm new to OS projects so I don't know if the link is intended to be this way. If it isn't, should I add this change with the PR for this issue, or should I create a separate issue for the same.
I'd also like to apologise for not updating you on my progress sooner. Thank you

[MisRob]

Hi @SoumyoPurkayastha, thank you. I think it'd make sense to open a separate pull request for the Docker issue. I'm glad you resolved it and thanks for debugging and sharing about it.

No need to apologize, we appreciate that you volunteer your time and energy. Best wishes.

[MisRob]

Hello @SoumyoPurkayastha, are your working on this or should we unassign?

[SoumyoPurkayastha]

@MisRob You may unassign me.
Apologies for not informing you about the same.

[MisRob]

No worries, thank you

[ghost]

Hello i am a beginner and i would like to contribute to the org. Is this issue still open? I am thinking of use something like transaction here so only if the the channel is created then only a new id is going to be assigned to the channel.

[akolson]

Hello @yashru2712! Yes this issue should be available for assignment, thank you. I assigned it to you! Please feel free to read through the discussion on this issue to get a better sense of what needs to be done. And, in case you have any more questions, do not hesitate to ask.

[ghost]

i am kind of stuck can you guide where the respective files are it is first time working with such a big code base.

[MisRob]

Hi @yashru2712, first I'd recommend you reproduce this issue from a user point of view. Then, after you can do this, install the Vue DevTools https://devtools.vuejs.org/ plugin to your browser. It has a feature where on any page you can easily inspect used Vue components and then you can located them in the codebase by name. Hope this helps!

[MisRob]

Regarding the steps to reproduce, I don't think you have access to the linked document, so here's the recording copy for you @yashru2712

GIF-refresh.mp4

[ghost]

@MisRob when i was trying to locally setting up the project using docker compose , i am facing issue like pull access denied for studio-app , celery-worker and cloudprober . Can you please help me out with that .

[bjester]

@yashru2712 Did you perhaps run docker compose build before?

[ghost]

can you please guide with the step in order to run it locally using docker . And i haven't use docker compose build but after running that command , encountered error
` ERROR [studio-nginx stage-0 4/4] RUN /tmp/download_sigil.sh
=> CANCELED [studio-nginx stage-1 2/5] RUN rm /etc/nginx/conf.d/*

[studio-nginx stage-0 4/4] RUN /tmp/download_sigil.sh:
1.048 /bin/sh: /tmp/download_sigil.sh: not found

failed to solve: process "/bin/sh -c /tmp/download_sigil.sh" did not complete successfully: exit code: 127`

[bjester]

@yashru2712 Thank you for posting a snippet of the error.

Some of the images you're describing that have issues (cloudprober and the one producing the error you shared) are not needed for local development. The other ones you mentioned (studio-app and celery-worker) are really only needed if you intend to run Studio entirely through docker. It seems you're running Windows, and unless you use Windows Subsystem for Linux (WSL), running entirely through docker is probably the best approach. Developing on Studio isn't recommended on Windows directly (WSL is okay).

Most of the team uses this setup, which I highly recommend you use if you can setup WSL.

Otherwise, I would suggest only building and running the necessary services/images. So instead of docker compose up, I would suggest running docker compose up studio-app celery-worker. If that produces an error, please share a text snippet of it or a screenshot so I can determine how to best help. Please be aware, that there may be other challenges with this approach.

[ghost]

so this is the issue i am running into. Can you please guide me.

[shruti862]

@bjester @MisRob As I see no one is assigned on this issue. Can you please assign me this issue .

[bjester]

@shruti862 I will assign you. Thanks

[shruti862]

@bjester Thank you for assigning me the issue. I have raised the PR regarding it. Please review it whenever you gets time may be after the holidays :) and let me know any changes needed to be done.

[akolson]

Thanks @shruti862! We will definitely review your pr and provide you with any feedback when back fully, next year! Thanks again