Incorrect view only channel

[LianaHarris360]

Summary

Description of the change(s) you made

This pull request resolves the issue where a channel containing imported resources transitions to the 'Unpublished View-only' display after opening a new tab and selecting a different channel.
This pull request also fixes the console error Invalid prop: type check failed for prop "nodeId". Expected String, got Undefined which occurred when rootId/nodeId was undefined within StudioTree.vue.

• Edits TreeViewBase.vue with rootId watcher that triggers an API call if rootId is undefined, allowing the accurate view status of the channel to stay displayed.
• Extends the v-else to v-else-if=“rootId” to avoid rendering StudioTree when rootId is undefined, preventing the invalid prop error from appearing.

Manual verification steps performed

1. Created a new channel and imported resources from an existing channel
2. Opened both channels in 2 separate browser tabs and observed the behavior

Screenshots (if applicable)

TwoTabChannels.mov

---

Reviewer guidance

How can a reviewer test these changes?

1. Create a new channel and import some resources from one of your existing channels
2. Open both channels in 2 separate browser tabs and observe the correct behavior

References

Fixes #4647

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[akolson]

Maybe using mapActions('currentChannel', [ 'loadChannel' ]), and calling this.loadChannel() here might be a better way? A promise would still be returned so we should be good with the catch. I am only conflicted on throwing the error(next line) in this scenario, probably displaying a snackbar would be subtler(for example in situations when the server is disconnected)? @marcellamaki any thoughts?

[akolson]

Maybe the below would be useful for maintainability?

rootId: {
    handler(id) {
            .....
    },
    immediate: true
}

[akolson]

Code changes look correct to me. Manual QA also checks out. Thanks @LianaHarris360

[pcenov]

Thanks @LianaHarris360 - I confirm that this is implemented as specified above, no issues observed while manually testing.