MM-26501 Don't show New badge again on categories after channels are …

…removed (#6126)

* MM-26501 Don't show New badge again on categories after channels are removed

* Fix styling

components/sidebar/sidebar_category/sidebar_category.tsx

@@ -212,8 +212,13 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
  }
 
  render() {
- const {category, categoryIndex, isCollapsed, channels} = this.props;
- const isNewCategory = this.props.isNewCategory && !channels.length;
+ const {
+ category,
+ categoryIndex,
+ channels,
+ isCollapsed,
+ isNewCategory,
+ } = this.props;
 
  if (!category) {
  return null;

e2e/cypress/integration/channel_sidebar/new_category_badge_spec.js

@@ -0,0 +1,76 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+// Stage: @prod
+// Group: @channel_sidebar
+
+import {testWithConfig} from '../../support/hooks';
+
+import {getRandomId} from '../../utils';
+
+describe('New category badge', () => {
+ testWithConfig({
+ ServiceSettings: {
+ ExperimentalChannelSidebarOrganization: 'default_on',
+ },
+ });
+
+ before(() => {
+ // # Login as test user and visit town-square
+ cy.apiInitSetup({loginAfter: true}).then(({team}) => {
+ cy.visit(`/${team.name}/channels/town-square`);
+ });
+
+ // # Close "What's new" modal
+ cy.uiCloseWhatsNewModal();
+ });
+
+ it('should show the new badge until a channel is added to the category', () => {
+ const categoryName = `new-${getRandomId()}`;
+
+ // # Click the New Channel Dropdown button
+ cy.get('.AddChannelDropdown_dropdownButton').click();
+
+ // # Click the Create New Category dropdown item
+ cy.get('.AddChannelDropdown').contains('.MenuItem', 'Create New Category').click();
+
+ // # Fill in the category name and click Create
+ cy.get('input[placeholder="Name your category"]').type(categoryName);
+ cy.contains('button', 'Create').click();
+
+ // * Verify that the new category has been added to the sidebar and that it has the required badge and drop target
+ cy.contains('.SidebarChannelGroup', categoryName).as('newCategory');
+ cy.get('@newCategory').should('be.visible');
+ cy.get('@newCategory').find('.SidebarCategory_newLabel').should('be.visible');
+ cy.get('@newCategory').find('.SidebarCategory_newDropBox').should('be.visible');
+
+ // # Move Town Square into the new category
+ cy.get('#sidebarItem_town-square').find('.SidebarMenu_menuButton').click({force: true});
+ cy.get('.SidebarMenu').contains('.SubMenuItem', 'Move to').contains(categoryName).click({force: true});
+
+ // * Verify that Town Square has moved into the new category
+ cy.contains('.SidebarChannelGroup', categoryName).as('newCategory');
+ cy.get('@newCategory').find('#sidebarItem_town-square').should('exist');
+
+ // * Verify that the new category badge and drop target have been removed
+ cy.get('@newCategory').find('.SidebarCategory_newLabel').should('not.exist');
+ cy.get('@newCategory').find('.SidebarCategory_newDropBox').should('not.exist');
+
+ // # Move Town Square out of the new category
+ cy.get('#sidebarItem_town-square').find('.SidebarMenu_menuButton').click({force: true});
+ cy.get('.SidebarMenu').contains('.SubMenuItem', 'Move to').contains('Channels').click({force: true});
+
+ // * Verify that Town Square has moved out of the new category
+ cy.get('@newCategory').find('#sidebarItem_town-square').should('not.exist');
+
+ // * Verify that the new category badge and drop target did not reappear
+ cy.get('@newCategory').find('.SidebarCategory_newLabel').should('not.exist');
+ cy.get('@newCategory').find('.SidebarCategory_newDropBox').should('not.exist');
+ });
+});

reducers/views/channel_sidebar.ts

@@ -3,10 +3,15 @@
 
 import {combineReducers} from 'redux';
 
+import {ChannelCategoryTypes, UserTypes} from 'mattermost-redux/action_types';
+
 import {GenericAction} from 'mattermost-redux/types/actions';
-import {UserTypes} from 'mattermost-redux/action_types';
+import {ChannelCategory} from 'mattermost-redux/types/channel_categories';
+
+import {removeItem} from 'mattermost-redux/utils/array_utils';
 
 import {DraggingState} from 'types/store';
+
 import {ActionTypes} from 'utils/constants';
 
 export function unreadFilterEnabled(state = false, action: GenericAction) {
@@ -42,6 +47,27 @@ export function newCategoryIds(state: string[] = [], action: GenericAction): str
  switch (action.type) {
  case ActionTypes.ADD_NEW_CATEGORY_ID:
  return [...state, action.data];
+ case ChannelCategoryTypes.RECEIVED_CATEGORY: {
+ const category: ChannelCategory = action.data;
+
+ if (category.channel_ids.length > 0) {
+ return removeItem(state, category.id);
+ }
+
+ return state;
+ }
+ case ChannelCategoryTypes.RECEIVED_CATEGORIES: {
+ const categories = action.data;
+
+ return categories.reduce((nextState: string[], category: ChannelCategory) => {
+ if (category.channel_ids.length > 0) {
+ return removeItem(nextState, category.id);
+ }
+
+ return nextState;
+ }, state);
+ }
+
  case UserTypes.LOGOUT_SUCCESS:
  return [];
  default: