diff --git a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_muting_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_muting_spec.ts index 7c2fc9c65a..f242c49702 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_muting_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_muting_spec.ts @@ -38,7 +38,7 @@ describe('Category muting', () => { cy.get('#sidebarItem_off-topic').should('not.have.class', 'muted'); // # Mute the category - clickCategoryMenuItem('CHANNELS', 'Mute Category'); + clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Mute Category', categoryMenuButtonName: 'Channels'}); // * Verify that the category has been muted cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('have.class', 'muted'); @@ -46,7 +46,7 @@ describe('Category muting', () => { cy.get('#sidebarItem_off-topic').should('have.class', 'muted'); // # Unmute the category - clickCategoryMenuItem('CHANNELS', 'Unmute Category'); + clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Unmute Category', categoryMenuButtonName: 'Channels'}); // * Verify that the category is no longer muted cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('not.have.class', 'muted'); @@ -58,7 +58,7 @@ describe('Category muting', () => { // # Create a new category cy.uiCreateSidebarCategory().then((category) => { // # Mute the new category - clickCategoryMenuItem(category.displayName, 'Mute Category'); + clickCategoryMenuItem({categoryDisplayName: category.displayName, menuItemText: 'Mute Category', categoryMenuButtonName: category.displayName.toLowerCase()}); // * Verify that Town Square starts unmuted cy.get('#sidebarItem_town-square').should('not.have.class', 'muted'); @@ -85,7 +85,7 @@ describe('Category muting', () => { cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('be.visible').should('not.have.class', 'muted'); // # Mute Channels - clickCategoryMenuItem('CHANNELS', 'Mute Category'); + clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Mute Category', categoryMenuButtonName: 'Channels'}); cy.makeClient({user: getAdminAccount()}).then((client) => { // # Have another user create a channel diff --git a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts index ab813297d7..8444fb1af9 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts @@ -34,7 +34,7 @@ describe('Channel sidebar', () => { const categoryName = createCategoryFromSidebarMenu(); // # Create new category from category menu - clickCategoryMenuItem(categoryName, 'Create New Category'); + clickCategoryMenuItem({categoryDisplayName: categoryName, menuItemText: 'Create New Category'}); const newCategoryName = `category-${getRandomId()}`; cy.get('#editCategoryModal input').type(newCategoryName).type('{enter}'); @@ -57,7 +57,7 @@ describe('Channel sidebar', () => { const categoryName = createCategoryFromSidebarMenu(); // # Rename category from category menu - clickCategoryMenuItem(categoryName, 'Rename Category'); + clickCategoryMenuItem({categoryDisplayName: categoryName, menuItemText: 'Rename Category'}); const renameCategory = `category-${getRandomId()}`; @@ -75,7 +75,7 @@ describe('Channel sidebar', () => { const categoryName = createCategoryFromSidebarMenu(); // # Delete category from category menu - clickCategoryMenuItem(categoryName, 'Delete Category'); + clickCategoryMenuItem({categoryDisplayName: categoryName, menuItemText: 'Delete Category'}); // # Click on delete button cy.get('.GenericModal__button.delete').click(); diff --git a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/helpers.ts b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/helpers.ts index 7da3d34ed1..83eaa976e0 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/helpers.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/helpers.ts @@ -3,10 +3,17 @@ import * as TIMEOUTS from '../../../fixtures/timeouts'; -export function clickCategoryMenuItem(categoryDisplayName, menuItemText, isSubMenu = false) { +type ClickCategoryMenuItemProps = { + categoryDisplayName: string; + menuItemText: string; + categoryMenuButtonName?: string; + isSubMenu?: boolean; +} + +export function clickCategoryMenuItem({categoryDisplayName, menuItemText, categoryMenuButtonName = categoryDisplayName, isSubMenu = false}: ClickCategoryMenuItemProps) { cy.get('#SidebarContainer').should('be.visible').within(() => { cy.findByText(categoryDisplayName).should('exist').parents('.SidebarChannelGroupHeader').within(() => { - cy.findByLabelText('Category options').should('exist').click({force: true}); + cy.findByLabelText(`${categoryMenuButtonName} category options`).should('exist').click({force: true}); }); }); @@ -22,7 +29,7 @@ export function clickCategoryMenuItem(categoryDisplayName, menuItemText, isSubMe } export function clickSortCategoryMenuItem(categoryDisplayName, menuItemText) { - clickCategoryMenuItem(categoryDisplayName, 'Sort', true); + clickCategoryMenuItem({categoryDisplayName, menuItemText: 'Sort', isSubMenu: true}); cy.wait(TIMEOUTS.HALF_SEC); diff --git a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/sidebar_category_menu_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/sidebar_category_menu_spec.ts index 5413cae2de..4fd602b723 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/sidebar_category_menu_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/sidebar_category_menu_spec.ts @@ -22,7 +22,7 @@ describe('Sidebar category menu', () => { }); it('MM-T3171_1 Verify that the 3-dot menu on the Channels Category contains an option to Create New Category', () => { - clickCategoryMenuItem('CHANNELS', 'Create New Category'); + clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Create New Category', categoryMenuButtonName: 'Channels'}); cy.wait(TIMEOUTS.ONE_SEC); @@ -43,7 +43,7 @@ describe('Sidebar category menu', () => { cy.contains('.SidebarChannelGroup', 'FAVORITES').find('#sidebarItem_town-square'); // # Verify that Create New Category exists on Favorites category and click on it - clickCategoryMenuItem('FAVORITES', 'Create New Category'); + clickCategoryMenuItem({categoryDisplayName: 'FAVORITES', menuItemText: 'Create New Category', categoryMenuButtonName: 'Favorites'}); cy.wait(TIMEOUTS.ONE_SEC); diff --git a/webapp/channels/src/components/menu/menu.tsx b/webapp/channels/src/components/menu/menu.tsx index 912f6d9454..ceee60916a 100644 --- a/webapp/channels/src/components/menu/menu.tsx +++ b/webapp/channels/src/components/menu/menu.tsx @@ -228,6 +228,7 @@ export function Menu(props: Props) { title={props.menuButtonTooltip.text} isVertical={props.menuButtonTooltip?.isVertical ?? true} disabled={isMenuOpen || props.menuButton?.disabled} + className={props.menuButtonTooltip.class} > {triggerElement} diff --git a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/__snapshots__/index.test.tsx.snap index 373ffcb4aa..e0289b7079 100644 --- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/__snapshots__/index.test.tsx.snap +++ b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/__snapshots__/index.test.tsx.snap @@ -3,6 +3,7 @@ exports[`components/sidebar/sidebar_category/sidebar_category_menu should match snapshot and contain correct buttons 1`] = ` - ); + const markAsReadMenuItem = showUnreadsCategory === false ? ( + + ) : null; return ( - + {markAsReadMenuItem} {markAsReadMenuItem && } {muteUnmuteCategoryMenuItem} diff --git a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/sidebar_category_generic_menu.tsx b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/sidebar_category_generic_menu.tsx index 5806f84792..3e4baf3340 100644 --- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/sidebar_category_generic_menu.tsx +++ b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/sidebar_category_generic_menu.tsx @@ -14,11 +14,13 @@ import * as Menu from 'components/menu'; type Props = { id: string; children: React.ReactNode[]; + name: string; }; const SidebarCategoryGenericMenu = ({ id, children, + name, }: Props) => { const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -42,12 +44,12 @@ const SidebarCategoryGenericMenu = ({ , }} menuButtonTooltip={{ - text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}), + text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}, {name}), class: 'hidden-xs', }} menu={{ diff --git a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_sorting_menu.tsx b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_sorting_menu.tsx index 293ab78f01..adc9079d9e 100644 --- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_sorting_menu.tsx +++ b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_sorting_menu.tsx @@ -193,12 +193,12 @@ const SidebarCategorySortingMenu = ({ , }} menuButtonTooltip={{ - text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}), + text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}, {name: category.display_name}), class: 'hidden-xs', }} menu={{ diff --git a/webapp/channels/src/components/sidebar/unread_channels.tsx b/webapp/channels/src/components/sidebar/unread_channels.tsx index 0137736680..40398f0554 100644 --- a/webapp/channels/src/components/sidebar/unread_channels.tsx +++ b/webapp/channels/src/components/sidebar/unread_channels.tsx @@ -44,8 +44,11 @@ export default function UnreadChannels({ return (
- - + +