Hide share button in TreeViewBase if user does not have permissions t… #5550
Conversation
AlexVelezLl
left a comment
AlexVelezLl
left a comment
There was a problem hiding this comment.
Everything looks good with the production code! Just one little comment to make tests a little bit easier to read, and to prevent ourselves from having to make a lot of updates on these tests when we update this component to KDS.
| stubs: { | ||
| ToolBar: { | ||
| template: '<div><slot /><slot name="extension" /></div>', | ||
| }, | ||
| MainNavigationDrawer: true, | ||
| PublishSidePanel: true, | ||
| SubmitToCommunityLibrarySidePanel: true, | ||
| ProgressModal: true, | ||
| ChannelTokenModal: true, | ||
| SyncResourcesModal: true, | ||
| Clipboard: true, | ||
| OfflineText: true, | ||
| ContentNodeIcon: true, | ||
| DraggablePlaceholder: true, | ||
| MessageDialog: true, | ||
| SavingIndicator: true, | ||
| QuickEditModal: true, | ||
| BaseMenu: { | ||
| name: 'BaseMenu', | ||
| template: | ||
| '<div><slot name="activator" :on="{}" /><div class="menu-content"><slot /></div></div>', | ||
| }, | ||
| KButton: { | ||
| template: '<button class="share-button"><slot /></button>', | ||
| }, | ||
| VList: { | ||
| template: '<div class="v-list"><slot /></div>', | ||
| }, | ||
| VListTile: { | ||
| template: '<div class="v-list-tile"><slot /></div>', | ||
| }, | ||
| VListTileTitle: { | ||
| template: '<div class="v-list-tile-title"><slot /></div>', | ||
| }, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| const getShareButton = wrapper => { | ||
| const allBaseMenus = wrapper.findAllComponents({ name: 'BaseMenu' }); | ||
| for (let i = 0; i < allBaseMenus.length; i++) { | ||
| const baseMenu = allBaseMenus.at(i); | ||
| const shareButton = baseMenu.find('.share-button'); | ||
| if (shareButton.exists()) { | ||
| return shareButton; | ||
| } | ||
| } | ||
| return { exists: () => false }; | ||
| }; | ||
| const getShareMenuItems = wrapper => { | ||
| const allBaseMenus = wrapper.findAllComponents({ name: 'BaseMenu' }); | ||
| for (let i = 0; i < allBaseMenus.length; i++) { | ||
| const baseMenu = allBaseMenus.at(i); | ||
| const shareButton = baseMenu.find('.share-button'); | ||
| if (shareButton.exists()) { | ||
| return baseMenu.findAll('.v-list-tile'); | ||
| } | ||
| } | ||
| return { length: 0, wrappers: [] }; | ||
| }; |
There was a problem hiding this comment.
Although stubbing these components may make the tests run faster, I don't think we need to stub every child/descendant component. For example, I don't think we may need to stub presentational components like the VList, VListTile, VListTileTitle, etc. And components like KButton neither. I think we can perhaps just stub some components for which setting up the environment for them to work properly is not worth it, e.g. the QuickEditModal component.
There was a problem hiding this comment.
Thanks Alex, I've fixed the code.
2 participants
…o see any option
Summary
Fixes issue by hiding the Share button in TreeViewBase when the user cannot use any share options.
Added canShareChannel (returns true if canManage or isPublished) to control button visibility.
Added CanSubmitToCommunityLibrary to control the "Submit to community library" menu item.
The Share button now renders only when at least one option is available (invite collaborators, share token, or submit to community library), and each menu item is conditionally shown based on permissions.
Added tests covering computed properties, button visibility, and menu item visibility across permission and channel state combinations.
References
Fixed #5453
Reviewer guidance
Run unit tests or Test manually.