MM-61525, MM-61868: Autohide channel bookmarks when empty (#29454)

e2e-tests/cypress/tests/integration/channels/channel/channel_bookmarks_spec.ts

@@ -25,209 +25,368 @@ describe('Channel Bookmarks', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     let user1: UserProfile;
     let admin: UserProfile;
-    let channel: Channel;
+    let publicChannel: Channel;
+    let privateChannel: Channel;
+
+    const BOOKMARK_LIMIT = 50;
 
     before(() => {
+        cy.apiRequireLicense();
+
         cy.apiGetMe().then(({user: adminUser}) => {
             admin = adminUser;
 
-            cy.apiInitSetup().then(({team, user}) => {
+            cy.apiInitSetup().then(({team, user, channel}) => {
                 testTeam = team;
                 user1 = user;
+                publicChannel = channel;
 
-                cy.visit(`/${testTeam.name}/channels/town-square`);
-                cy.getCurrentChannelId().then((channelId) => {
-                    cy.makeClient().then(async (client) => {
-                        channel = await client.getChannel(channelId);
-                    });
+                cy.apiCreateChannel(testTeam.id, 'private-channel', 'private channel', 'P').then((result) => {
+                    privateChannel = result.channel;
+                    cy.apiAddUserToChannel(privateChannel.id, user1.id);
                 });
+
+                cy.visit(`/${testTeam.name}/channels/${publicChannel.name}`);
             });
         });
     });
 
-    it('create link bookmark', () => {
-        // # Create link
-        const {link, realLink} = createLinkBookmark();
+    describe('functionality', () => {
+        it('bookmarks bar hidden when empty', () => {
+        // # Go to channel menu
+            cy.uiGetChannelInfoButton();
+            cy.makeClient().then(async (client) => {
+                const bookmarks = await client.getChannelBookmarks(publicChannel.id);
+                cy.wrap(bookmarks.length).should('eq', 0);
+            });
 
-        cy.findByTestId('channel-bookmarks-container').within(() => {
+            // * Verify bookmarks bar not present
+            cy.findByTestId('channel-bookmarks-container').should('not.exist');
+        });
+
+        it('create link bookmark from channel menu', () => {
+        // # Create link
+            const {link, realLink} = createLinkBookmark({fromChannelMenu: true});
+
+            // * Verify bar now visible
+            cy.findByTestId('channel-bookmarks-container').within(() => {
             // * Verify href
-            cy.findByRole('link', {name: link}).should('have.attr', 'href', realLink);
+                cy.findByRole('link', {name: link}).should('have.attr', 'href', realLink);
+            });
         });
-    });
 
-    it('create link bookmark, with emoji and custom title', () => {
-        const {realLink, displayName, emojiName} = createLinkBookmark({displayName: 'custom display name', emojiName: 'smiling_face_with_3_hearts'});
+        it('create link bookmark', () => {
+        // # Create link
+            const {link, realLink} = createLinkBookmark();
 
-        cy.findByTestId('channel-bookmarks-container').within(() => {
+            cy.findByTestId('channel-bookmarks-container').within(() => {
+            // * Verify href
+                cy.findByRole('link', {name: link}).should('have.attr', 'href', realLink);
+            });
+        });
+
+        it('create link bookmark, with emoji and custom title', () => {
+            const {realLink, displayName, emojiName} = createLinkBookmark({displayName: 'custom display name', emojiName: 'smiling_face_with_3_hearts'});
+
+            cy.findByTestId('channel-bookmarks-container').within(() => {
             // * Verify emoji, displayname, and href
-            cy.findByRole('link', {name: `:${emojiName}: ${displayName}`}).should('have.attr', 'href', realLink);
+                cy.findByRole('link', {name: `:${emojiName}: ${displayName}`}).should('have.attr', 'href', realLink);
+            });
         });
-    });
 
-    it('create file bookmark, and open preview', () => {
+        it('create file bookmark from channel menu', () => {
         // # Create bookmark
-        const {file} = createFileBookmark({file: 'small-image.png'});
+            const {file} = createFileBookmark({file: 'mp4-video-file.mp4', fromChannelMenu: true});
 
-        // * Verify preview icon
-        cy.findByRole('link', {name: file}).as('link').find('.file-icon.image');
-
-        // # Open preview
-        cy.get('@link').click();
-
-        // * Verify preview opened
-        cy.get('.file-preview-modal').findByRole('heading', {name: file});
-        cy.get('.file-preview-modal__file-details-user-name').should('have.text', admin.username);
-        cy.get('.file-preview-modal__channel').should('have.text', `Shared in ~${channel.display_name}`);
-        cy.get('.icon-close').click();
-    });
-
-    it('create file bookmark, progress and cancel upload', () => {
-        const file = 'powerpointx-file.pptx';
-
-        cy.intercept(
-            {method: 'POST', pathname: 'files', middleware: true, times: 1},
-            () => {
-                return new Promise((resolve) =>
-                    setTimeout(() => resolve(), 2000),
-                );
-            }).as('uploadRequest');
+            // * Verify uploaded
+            cy.findByRole('link', {name: file});
+        });
 
+        it('create file bookmark, and open preview', () => {
         // # Create bookmark
-        createFileBookmark({file, save: false});
+            const {file} = createFileBookmark({file: 'small-image.png'});
 
-        // # Cancel upload
-        cy.get('a.file-preview__remove').click();
+            // * Verify preview icon
+            cy.findByRole('link', {name: file}).as('link').find('.file-icon.image');
 
-        // * Verify empty preview container
-        cy.get('.file-preview__container.empty');
+            // # Open preview
+            cy.get('@link').click();
 
-        // * Verify upload cancelled
-        cy.wait('@uploadRequest').its('state').should('eq', 'Errored');
+            // * Verify preview opened
+            cy.get('.file-preview-modal').findByRole('heading', {name: file});
+            cy.get('.file-preview-modal__file-details-user-name').should('have.text', admin.username);
+            cy.get('.file-preview-modal__channel').should('have.text', `Shared in ~${publicChannel.display_name}`);
+            cy.get('.icon-close').click();
+        });
 
-        // * Verify cannot save
-        cy.findByRole('button', {name: 'Add bookmark'}).should('be.disabled');
+        it('create file bookmark, progress and cancel upload', () => {
+            const file = 'powerpointx-file.pptx';
 
-        // # Try upload file again
-        cy.get('#bookmark-create-file-input-in-modal').attachFile(file);
+            cy.intercept(
+                {method: 'POST', pathname: 'files', middleware: true, times: 1},
+                () => {
+                    return new Promise((resolve) =>
+                        setTimeout(() => resolve(), 2000),
+                    );
+                }).as('uploadRequest');
 
-        // * Verify uploaded
-        cy.findByTestId('titleInput').should('have.value', file);
-        cy.findByRole('link', {name: `file thumbnail ${file}`});
+            // # Create bookmark
+            createFileBookmark({file, save: false});
 
-        // # Save
-        editModalCreate();
+            // # Cancel upload
+            cy.get('a.file-preview__remove').click();
 
-        // * Verify bookmark created
-        cy.findByRole('link', {name: file});
-    });
+            // * Verify empty preview container
+            cy.get('.file-preview__container.empty');
 
-    it('create file bookmark, with emoji and custom title', () => {
+            // * Verify upload cancelled
+            cy.wait('@uploadRequest').its('state').should('eq', 'Errored');
+
+            // * Verify cannot save
+            cy.findByRole('button', {name: 'Add bookmark'}).should('be.disabled');
+
+            // # Try upload file again
+            cy.get('#bookmark-create-file-input-in-modal').attachFile(file);
+
+            // * Verify uploaded
+            cy.findByTestId('titleInput').should('have.value', file);
+            cy.findByRole('link', {name: `file thumbnail ${file}`});
+
+            // # Save
+            editModalCreate();
+
+            // * Verify bookmark created
+            cy.findByRole('link', {name: file});
+        });
+
+        it('create file bookmark, with emoji and custom title', () => {
         // # Create bookmark
-        const {file, displayName, emojiName} = createFileBookmark({file: 'm4a-audio-file.m4a', displayName: 'custom displayname small-image', emojiName: 'smiling_face_with_3_hearts'});
+            const {file, displayName, emojiName} = createFileBookmark({file: 'm4a-audio-file.m4a', displayName: 'custom displayname small-image', emojiName: 'smiling_face_with_3_hearts'});
 
-        // * Verify emoji and custom display name
-        cy.findByRole('link', {name: `:${emojiName}: ${displayName}`}).click();
+            // * Verify emoji and custom display name
+            cy.findByRole('link', {name: `:${emojiName}: ${displayName}`}).click();
 
-        // * Verify preview opened
-        cy.get('.file-preview-modal').findByRole('heading', {name: file});
-        cy.get('.icon-close').click();
-    });
+            // * Verify preview opened
+            cy.get('.file-preview-modal').findByRole('heading', {name: file});
+            cy.get('.icon-close').click();
+        });
 
-    it('edit link bookmark', () => {
+        it('edit link bookmark', () => {
         // # Create link
-        const {displayName} = createLinkBookmark();
+            const {displayName} = createLinkBookmark();
 
-        const nextLink = 'google.com/q=test001';
-        const realNextLink = `http://${nextLink}`;
-        const nextDisplayName = 'Next custom display name';
-        const nextEmojiName = 'handshake';
+            const nextLink = 'google.com/q=test001';
+            const realNextLink = `http://${nextLink}`;
+            const nextDisplayName = 'Next custom display name';
+            const nextEmojiName = 'handshake';
 
-        // # Open edit
-        openEditModal(displayName);
+            // # Open edit
+            openEditModal(displayName);
 
-        // # Change link, displayname, emoji
-        editTextInput('linkInput', nextLink);
-        editTextInput('titleInput', nextDisplayName);
-        selectEmoji(nextEmojiName);
+            // # Change link, displayname, emoji
+            editTextInput('linkInput', nextLink);
+            editTextInput('titleInput', nextDisplayName);
+            selectEmoji(nextEmojiName);
 
-        // # Save
-        editModalSave();
+            // # Save
+            editModalSave();
 
-        // * Verify changes
-        cy.findAllByRole('link', {name: `:${nextEmojiName}: ${nextDisplayName}`}).should('have.attr', 'href', realNextLink);
-    });
+            // * Verify changes
+            cy.findAllByRole('link', {name: `:${nextEmojiName}: ${nextDisplayName}`}).should('have.attr', 'href', realNextLink);
+        });
 
-    it('edit link bookmark, only display name and emoji', () => {
+        it('edit link bookmark, only display name and emoji', () => {
         // # Create link
-        const {displayName, realLink} = createLinkBookmark();
+            const {displayName, realLink} = createLinkBookmark();
 
-        const nextDisplayName = 'Next custom display name 2';
-        const nextEmojiName = 'handshake';
+            const nextDisplayName = 'Next custom display name 2';
+            const nextEmojiName = 'handshake';
 
-        // # Open edit
-        openEditModal(displayName);
+            // # Open edit
+            openEditModal(displayName);
 
-        // # Change link, displayname, emoji
-        editTextInput('titleInput', nextDisplayName);
-        selectEmoji(nextEmojiName);
+            // # Change link, displayname, emoji
+            editTextInput('titleInput', nextDisplayName);
+            selectEmoji(nextEmojiName);
 
-        // # Save
-        editModalSave();
+            // # Save
+            editModalSave();
 
-        // * Verify changes
-        cy.findAllByRole('link', {name: `:${nextEmojiName}: ${nextDisplayName}`}).should('have.attr', 'href', realLink);
-    });
+            // * Verify changes
+            cy.findAllByRole('link', {name: `:${nextEmojiName}: ${nextDisplayName}`}).should('have.attr', 'href', realLink);
+        });
 
-    it('delete bookmark', () => {
-        const {displayName} = createLinkBookmark();
+        it('delete bookmark', () => {
+            const {displayName} = createLinkBookmark();
 
-        // * Verify bookmark exists
-        cy.findByRole('link', {name: displayName});
+            // * Verify bookmark exists
+            cy.findByRole('link', {name: displayName});
 
-        // # Start delete bookmark flow
-        openDotMenu(displayName);
-        cy.findByRole('menuitem', {name: 'Delete'}).click();
-        cy.findByRole('dialog', {name: 'Delete bookmark'}).within(() => {
+            // # Start delete bookmark flow
+            openDotMenu(displayName);
+            cy.findByRole('menuitem', {name: 'Delete'}).click();
+            cy.findByRole('dialog', {name: 'Delete bookmark'}).within(() => {
             // * Verify delete dialog contents
-            cy.findByRole('heading', {name: 'Delete bookmark'});
-            cy.contains(`Are you sure you want to delete the bookmark ${displayName}?`);
+                cy.findByRole('heading', {name: 'Delete bookmark'});
+                cy.contains(`Are you sure you want to delete the bookmark ${displayName}?`);
 
-            // # Delete bookmark
-            cy.findByRole('button', {name: 'Yes, delete'}).click();
+                // # Delete bookmark
+                cy.findByRole('button', {name: 'Yes, delete'}).click();
+            });
+
+            // * Verify bookmark deleted
+            cy.findByRole('link', {name: displayName}).should('not.exist');
         });
 
-        // * Verify bookmark deleted
-        cy.findByRole('link', {name: displayName}).should('not.exist');
-    });
+        it('reorder bookmark', () => {
+            const {displayName: name1} = createFileBookmark({file: 'm4a-audio-file.m4a', displayName: 'custom displayname 1'});
+            const {displayName: name2} = createFileBookmark({file: 'm4a-audio-file.m4a', displayName: 'custom displayname 2'});
 
-    it('reorder bookmark', () => {
-        const {displayName: name1} = createFileBookmark({file: 'm4a-audio-file.m4a', displayName: 'custom displayname 1'});
-        const {displayName: name2} = createFileBookmark({file: 'm4a-audio-file.m4a', displayName: 'custom displayname 2'});
+            // # Start reorder bookmark flow
+            cy.findByTestId('channel-bookmarks-container').within(() => {
+                cy.findAllByRole('link').should('be.visible').as('bookmarks');
+                cy.get('@bookmarks').eq(-1).scrollIntoView();
+                cy.get('@bookmarks').eq(-2).should('contain', name1);
+                cy.get('@bookmarks').eq(-1).should('contain', name2);
 
-        // # Start reorder bookmark flow
-        cy.findByTestId('channel-bookmarks-container').within(() => {
-            cy.findAllByRole('link').should('be.visible').as('bookmarks');
-            cy.get('@bookmarks').eq(-1).scrollIntoView();
-            cy.get('@bookmarks').eq(-2).should('contain', name1);
-            cy.get('@bookmarks').eq(-1).should('contain', name2);
+                // # Perform drag using keyboard
+                cy.get(`a:contains(${name1})`).
+                    trigger('keydown', {keyCode: SpaceKeyCode}).
+                    trigger('keydown', {keyCode: RightArrowKeyCode, force: true}).wait(TIMEOUTS.THREE_SEC).
+                    trigger('keydown', {keyCode: SpaceKeyCode, force: true}).wait(TIMEOUTS.THREE_SEC);
 
-            // # Perform drag using keyboard
-            cy.get(`a:contains(${name1})`).
-                trigger('keydown', {keyCode: SpaceKeyCode}).
-                trigger('keydown', {keyCode: RightArrowKeyCode, force: true}).wait(TIMEOUTS.THREE_SEC).
-                trigger('keydown', {keyCode: SpaceKeyCode, force: true}).wait(TIMEOUTS.THREE_SEC);
-
-            // * Verify correct order
-            cy.findAllByRole('link').should('be.visible').as('bookmarks-after');
-            cy.get('@bookmarks-after').eq(-2).should('contain', name2);
-            cy.get('@bookmarks-after').eq(-1).should('contain', name1);
+                // * Verify correct order
+                cy.findAllByRole('link').should('be.visible').as('bookmarks-after');
+                cy.get('@bookmarks-after').eq(-2).should('contain', name2);
+                cy.get('@bookmarks-after').eq(-1).should('contain', name1);
+            });
         });
     });
+
+    describe('manage bookmarks - permissions enforcement', () => {
+        before(() => {
+            // # Prep: disable manage bookmarks for users - public and private channels
+            cy.uiResetPermissionsToDefault();
+            cy.findByTestId('all_users-public_channel-manage_public_channel_bookmarks-checkbox').click();
+            cy.findByTestId('all_users-private_channel-manage_private_channel_bookmarks-checkbox').click();
+            cy.uiSaveConfig();
+            cy.visit(`/${testTeam.name}/channels/${publicChannel.name}`);
+        });
+
+        after(() => {
+            // # Reset permissions
+            cy.apiAdminLogin();
+            cy.uiResetPermissionsToDefault();
+            cy.visit(`/${testTeam.name}/channels/${publicChannel.name}`);
+        });
+
+        it('can add bookmark: public channel, admin', () => {
+            // # To public channel with bookmark
+            createLinkBookmark({fromChannelMenu: true});
+
+            // * Verify admin can create in public channel
+            verifyCanCreate();
+        });
+
+        it('can add bookmark: private channel, admin', () => {
+            // # To private channel with bookmark
+            cy.visit(`/${testTeam.name}/channels/${privateChannel.name}`);
+            createLinkBookmark({fromChannelMenu: true});
+
+            // * Verify admin can create in private channel
+            verifyCanCreate();
+        });
+
+        it('cannot add bookmark: private channel, non-admin', () => {
+            // # Switch to non-admin user
+            cy.apiLogin(user1);
+
+            // # private channel
+            cy.visit(`/${testTeam.name}/channels/${privateChannel.name}`);
+
+            // * Verify non-admin user cannot create in private channel
+            verifyCannotCreate();
+        });
+
+        it('cannot add bookmark: public channel, non-admin', () => {
+            // # To public channel with bookmark
+            cy.visit(`/${testTeam.name}/channels/${publicChannel.name}`);
+
+            // * Verify non-admin user cannot create in public channel
+            verifyCannotCreate();
+        });
+
+        const verifyCanCreate = () => {
+            // * Verify can access create UI - bookmarks bar
+            promptAddLink();
+            cy.uiCloseModal('Add a bookmark');
+
+            // * Verify can access create UI - channel menu
+            promptAddLink(true);
+            cy.uiCloseModal('Add a bookmark');
+        };
+
+        const verifyCannotCreate = () => {
+            // * Verify cannot access create UI - channel menu
+            cy.uiOpenChannelMenu();
+            cy.findByRole('menuitem', {name: 'Bookmarks Bar submenu icon'}).should('not.exist');
+
+            // * Verify cannot access create UI - bookmarks bar
+            cy.get('#channelBookmarksPlusMenuButton').should('not.exist');
+        };
+    });
+
+    describe('limits enforced', () => {
+        it('max bookmarks', () => {
+            // # Create links, fill to max
+            makeBookmarks(publicChannel);
+
+            // * Verify add bookmark button is disabled
+            cy.findAllByRole('button', {name: 'Add a bookmark'}).should('be.disabled');
+
+            // * Verify create bookmark submenu in channel menu is not shown
+            cy.uiOpenChannelMenu();
+            cy.findByRole('menuitem', {name: 'Bookmarks Bar submenu icon'}).should('not.exist');
+        });
+    });
+
+    function makeBookmarks(channel: Channel, n?: number) {
+        cy.makeClient().then(async (client) => {
+            const nToMake = n ?? BOOKMARK_LIMIT - (await client.getChannelBookmarks(channel.id))?.length;
+
+            await Promise.allSettled(Array(nToMake).fill(0).map(() => {
+                return client.createChannelBookmark(publicChannel.id, {
+                    type: 'link',
+                    display_name: 'google.com',
+                    link_url: `https://google.com/?q=test${getRandomId(7)}`,
+                }, '');
+            }));
+        });
+    }
 });
 
-function promptAddLink() {
-    cy.get('#channelBookmarksPlusMenuButton').click();
-    cy.get('#channelBookmarksAddLink').click();
+function promptAddLink(fromChannelMenu = false) {
+    if (fromChannelMenu) {
+        cy.uiOpenChannelMenu();
+
+        cy.findByRole('menuitem', {name: 'Bookmarks Bar submenu icon'}).trigger('mouseover');
+        cy.findByRole('menuitem', {name: 'Add a link not selected'}).click();
+    } else {
+        cy.get('#channelBookmarksPlusMenuButton').click();
+        cy.get('#channelBookmarksAddLink').click();
+    }
+}
+
+function promptAddFile(fromChannelMenu = false) {
+    if (fromChannelMenu) {
+        cy.uiOpenChannelMenu();
+
+        cy.findByRole('menuitem', {name: 'Bookmarks Bar submenu icon'}).trigger('mouseover');
+        cy.findByRole('menuitem', {name: 'Attach a file not selected'}).click();
+    } else {
+        cy.get('#channelBookmarksPlusMenuButton').click();
+        cy.get('#channelBookmarksAttachFile').click();
+    }
 }
 
 function openEditModal(name: string) {
@@ -256,11 +415,12 @@ function createLinkBookmark({
     displayName = '',
     emojiName = '', // e.g. smile
     save = true,
+    fromChannelMenu = false,
 } = {}) {
     const realLink = `http://${link}`;
 
     // # Add link
-    promptAddLink();
+    promptAddLink(fromChannelMenu);
 
     // # Enter link
     editTextInput('linkInput', link);
@@ -290,8 +450,10 @@ function createFileBookmark({
     displayName = '',
     emojiName = '', // e.g. smile
     save = true,
+    fromChannelMenu = false,
 } = {}) {
-    cy.get('#bookmark-create-file-input').attachFile(file);
+    promptAddFile(fromChannelMenu);
+    cy.get('#root-portal #bookmark-create-file-input').attachFile(file);
 
     if (displayName) {
         // # Enter displayname