Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Persist state of lock store between tabs #531

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

IshavSohal
Copy link
Member

@IshavSohal IshavSohal commented Jan 30, 2025

Related Item(s)

#520

Changes

  • Persist the state of the lock store between tabs, in particular the editor and preview tabs
  • Close the preview's BroadcastChannel upon lang change (this was causing the reported error)

Notes

  • I decided to use this plugin to persist the state of the lock store. If we don't want to use this, let me know of preferred alternatives. I could also try creating our own composable if needed
  • I noticed that, within the preview component, when window.props is not defined (which occurs upon reloading the tab), the BroadcastChannel was not being created. Was this intentional? Currently I'm creating the BroadcastChannel in both cases (hence the plugin), but I can revert this if necessary

Testing

Steps:

  1. Load any product
  2. Open devtools
  3. Within the metadata editor, preview the product
  4. Within the preview tab open devtools
  5. Move your mouse around in the preview tab
  6. Switch back to the editor tab, and notice the console logs indicating that the messages sent by the preview's BroadcastChannel were received
  7. Within the preview tab switch languages and repeat 5-6
  8. Within the preview tab refresh and repeat 5-6
  9. Throughout the testing, the 'Session Extended' toast should not appear on mouse movement in the preview tab

This change is Reviewable

@IshavSohal IshavSohal added PR: Build PR that involves changes to the build. This includes changes to the Github Actions. For JS wizards. PR: Frontend PR that primarily involves frontend changes. UI experts and CSS Wizards are asked to review. labels Jan 30, 2025
Copy link

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/issue-520

Copy link
Member

@mohsin-r mohsin-r left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we don't need the BrodcastChannel in the refresh case because we treat that as a "user loaded preview independently" of the main tab and hence it should not track activity in the main editor tab.

However, this does reopen the case of the language switch and what to do there.

One option to really simplify things is to remove the activity tracker in the preview tab. While this makes it somewhat inconvenient if a user times out while they're looking at their glorious preview, because we now autosave on timeout, they'd just have to lock the storyline again and they'd be able to continue.

Another option is to investigate what causes the toast to trigger when switching languages and stop it there.

Yet a third option is to overrule the idea of a refresh being a new load, and also track activity there, in which case your code is perfect.

Will tag on the meeting topic to this one and see what people think.

Reviewed 7 of 7 files at r1, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @IshavSohal)


src/components/metadata-editor.vue line 840 at r1 (raw file):

                    const msg = e.data;
                    if (msg.action === 'extend') {
                        console.log('metadata - received extend message from preview');

Blocker for console logs before merging


src/components/preview.vue line 207 at r1 (raw file):

        }

        // This broadcast channel will be used to communicate regarding sessions with the main editor tab

So if we put this code block here, it'll also trigger a broadcast channel in the case that someone loads the preview page independently (i.e. without the main editor tab) and in that case there are no sessions to extend or handle.

@szczz szczz added the Meeting Topic topic for future meeting label Feb 14, 2025
Copy link
Member Author

@IshavSohal IshavSohal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we don't need the BroadcastChannel in the refresh case because we treat that as a "user loaded preview independently" of the main tab and hence it should not track activity in the main editor tab.

Ah I see now, considered a refresh as an independent load makes sense. If we want to keep this the way it is, I can move the BroadcastChannel back to the window.props case. Also, we won't need the plugin anymore, since we can just pass the secret to the window in changeLang().

Another option is to investigate what causes the toast to trigger when switching languages and stop it there.

The reason why the Session Extended toast appears on mouse move is because, upon switching languages, window.props doesn't contain the secret (see the changeLang() method). So, the name provided for the BroadcastChannel defined in the preview (undefined) would be different from the name of the one defined in the lockStore, and thus would not be connected to one another.

In addition, BroadcastChannels defined in the preview are not being closed upon a lang change. So, once two lang changes occur, there will be two BroadcastChannels with a name of undefined, and these begin to communicate with each other.

We can fix the toast issue by closing the BroadcastChannel in changeLang()

Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @IshavSohal)

Copy link
Member

@mohsin-r mohsin-r left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see, either removing the toast or making the channel persist on language change seem like good suggestions. I'm in favour of the latter as a user I would still want my session to persist if I'm just previewing the other language.

Having said all of that, I still think its worth holding off on implementing anything now and instead discussing below/in the next meeting whether to remove the broadcasts/activity tracking in the preview tab as it simplifies the code greatly and only takes away what is a very niche benefit. If people are in favour of keeping the activity tracking, then we should probably keep hagglin' on what makes sense to do in a language change.

Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @IshavSohal)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Meeting Topic topic for future meeting PR: Build PR that involves changes to the build. This includes changes to the Github Actions. For JS wizards. PR: Frontend PR that primarily involves frontend changes. UI experts and CSS Wizards are asked to review.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants