Skip to content

Commit

Permalink
Revert "MM-41271 : Don't render sidebar channels when collapsed (matt…
Browse files Browse the repository at this point in the history 
…ermost#9732) (mattermost#9799)" (mattermost#9850)

This reverts commit 7846744.
  • Loading branch information
@amyblais
amyblais committed Feb 18, 2022
1 parent 0b61ad2 commit 9a53bbd
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 119 deletions.
28 changes: 11 additions & 17 deletions components/sidebar/sidebar_channel/__snapshots__/sidebar_channel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@

exports[`components/sidebar/sidebar_channel should match snapshot 1`] = `
<li
className="SidebarChannel expanded"
className="SidebarChannel"
draggable="false"
onAnimationEnd={[Function]}
onAnimationStart={[Function]}
onTransitionEnd={[Function]}
role="listitem"
tabIndex={-1}
>
Expand Down Expand Up @@ -37,10 +36,9 @@ exports[`components/sidebar/sidebar_channel should match snapshot 1`] = `

exports[`components/sidebar/sidebar_channel should match snapshot when DM channel 1`] = `
<li
className="SidebarChannel expanded"
className="SidebarChannel"
draggable="false"
onAnimationEnd={[Function]}
onAnimationStart={[Function]}
onTransitionEnd={[Function]}
role="listitem"
tabIndex={-1}
>
Expand Down Expand Up @@ -72,10 +70,9 @@ exports[`components/sidebar/sidebar_channel should match snapshot when DM channe

exports[`components/sidebar/sidebar_channel should match snapshot when GM channel 1`] = `
<li
className="SidebarChannel expanded"
className="SidebarChannel"
draggable="false"
onAnimationEnd={[Function]}
onAnimationStart={[Function]}
onTransitionEnd={[Function]}
role="listitem"
tabIndex={-1}
>
Expand Down Expand Up @@ -107,10 +104,9 @@ exports[`components/sidebar/sidebar_channel should match snapshot when GM channe

exports[`components/sidebar/sidebar_channel should match snapshot when active 1`] = `
<li
className="SidebarChannel expanded active"
className="SidebarChannel active"
draggable="false"
onAnimationEnd={[Function]}
onAnimationStart={[Function]}
onTransitionEnd={[Function]}
role="listitem"
tabIndex={-1}
>
Expand Down Expand Up @@ -144,8 +140,7 @@ exports[`components/sidebar/sidebar_channel should match snapshot when collapsed
<li
className="SidebarChannel collapsed"
draggable="false"
onAnimationEnd={[Function]}
onAnimationStart={[Function]}
onTransitionEnd={[Function]}
role="listitem"
tabIndex={-1}
>
Expand Down Expand Up @@ -177,10 +172,9 @@ exports[`components/sidebar/sidebar_channel should match snapshot when collapsed

exports[`components/sidebar/sidebar_channel should match snapshot when unread 1`] = `
<li
className="SidebarChannel expanded unread"
className="SidebarChannel unread"
draggable="false"
onAnimationEnd={[Function]}
onAnimationStart={[Function]}
onTransitionEnd={[Function]}
role="listitem"
tabIndex={-1}
>
Expand Down
56 changes: 24 additions & 32 deletions components/sidebar/sidebar_channel/sidebar_channel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React, {AnimationEvent} from 'react';
import React from 'react';
import {Draggable} from 'react-beautiful-dnd';
import classNames from 'classnames';

import {Channel} from 'mattermost-redux/types/channels';

import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import {DraggingState} from 'types/store';
import Constants from 'utils/constants';
import Constants, {DraggingStates} from 'utils/constants';

import SidebarBaseChannel from './sidebar_base_channel';
import SidebarDirectChannel from './sidebar_direct_channel';
Expand Down Expand Up @@ -82,25 +82,34 @@ type Props = {
};

type State = {
show: boolean;

};

export default class SidebarChannel extends React.PureComponent<Props, State> {
static defaultProps = {
isDraggable: true,
}

constructor(props: Props) {
super(props);
this.state = {
show: true,
};
}

isCollapsed = (props: Props) => {
return props.isCategoryDragged || (props.isCategoryCollapsed && !this.props.isUnread && !props.isCurrentChannel);
}

componentDidUpdate(prevProps: Props) {
if (this.isCollapsed(this.props) !== this.isCollapsed(prevProps) && (this.props.draggingState.state !== DraggingStates.CAPTURE && this.props.draggingState.state !== DraggingStates.BEFORE)) {
const channelElement = this.getRef();
if (channelElement) {
channelElement.classList.add('animating');
}
}
}

removeAnimation = () => {
const channelElement = this.getRef();
if (channelElement) {
channelElement.classList.remove('animating');
}
}

getRef = () => {
return this.props.getChannelRef(this.props.channel.id);
}
Expand All @@ -112,18 +121,6 @@ export default class SidebarChannel extends React.PureComponent<Props, State> {
};
}

handleAnimationStart = (event: AnimationEvent) => {
if (event && event.animationName === 'toOpaqueAnimation' && !this.isCollapsed(this.props)) {
this.setState({show: true});
}
}

handleAnimationEnd = (event: AnimationEvent) => {
if (event && event.animationName === 'toTransparentAnimation' && this.isCollapsed(this.props)) {
this.setState({show: false});
}
}

render() {
const {
channel,
Expand All @@ -146,28 +143,28 @@ export default class SidebarChannel extends React.PureComponent<Props, State> {
ChannelComponent = SidebarGroupChannel;
}

const component = this.state.show ? (
const component = (
<ChannelComponent
isCollapsed={this.isCollapsed(this.props)}
channel={channel}
currentTeamName={currentTeamName}
/>
) : null;
);

let wrappedComponent: React.ReactNode;

if (isDraggable) {
let selectedCount: React.ReactNode;
if (isChannelSelected && draggingState.state && draggingState.id === channel.id && multiSelectedChannelIds.length > 1) {
selectedCount = this.state.show ? (
selectedCount = (
<div className='SidebarChannel__selectedCount'>
<FormattedMarkdownMessage
id='sidebar_left.sidebar_channel.selectedCount'
defaultMessage='{count} selected'
values={{count: multiSelectedChannelIds.length}}
/>
</div>
) : null;
);
}

wrappedComponent = (
Expand All @@ -182,18 +179,16 @@ export default class SidebarChannel extends React.PureComponent<Props, State> {
ref={this.setRef(provided.innerRef)}
className={classNames('SidebarChannel', {
collapsed: this.isCollapsed(this.props),
expanded: !this.isCollapsed(this.props),
unread: isUnread,
active: isCurrentChannel,
dragging: snapshot.isDragging,
selectedDragging: isChannelSelected && draggingState.state && draggingState.id !== channel.id,
fadeOnDrop: snapshot.isDropAnimating && snapshot.draggingOver && autoSortedCategoryIds.has(snapshot.draggingOver),
noFloat: isAutoSortedCategory && !snapshot.isDragging,
})}
onTransitionEnd={this.removeAnimation}
{...provided.draggableProps}
{...provided.dragHandleProps}
onAnimationStart={this.handleAnimationStart}
onAnimationEnd={this.handleAnimationEnd}
role='listitem'
tabIndex={-1}
>
Expand All @@ -210,12 +205,9 @@ export default class SidebarChannel extends React.PureComponent<Props, State> {
ref={this.setRef()}
className={classNames('SidebarChannel', {
collapsed: this.isCollapsed(this.props),
expanded: !this.isCollapsed(this.props),
unread: isUnread,
active: isCurrentChannel,
})}
onAnimationStart={this.handleAnimationStart}
onAnimationEnd={this.handleAnimationEnd}
role='listitem'
>
{component}
Expand Down
39 changes: 14 additions & 25 deletions e2e/cypress/integration/channel_sidebar/category_collapsing_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
// Group: @channel_sidebar

import * as TIMEOUTS from '../../fixtures/timeouts';
import * as MESSAGES from '../../fixtures/messages';
import {getAdminAccount} from '../../support/env';

describe('Channel sidebar', () => {
Expand Down Expand Up @@ -47,28 +46,22 @@ describe('Channel sidebar', () => {
// # Check that the CHANNELS group header is visible
cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('be.visible').as('channelsGroup');

cy.get('.SidebarChannelGroup').should('exist').and('be.visible').within(() => {
// * Verify that both channels are visible when not collapsed
cy.findByText('Town Square').should('exist').and('be.visible');
cy.findByText('Off-Topic').should('exist').and('be.visible');
});
// * Verify that both channels are visible when not collapsed
cy.get('.SidebarChannel:contains(Off-Topic)').should('be.visible');
cy.get('.SidebarChannel:contains(Town Square)').should('be.visible');

// # Click on CHANNELS
cy.get('@channelsGroup').click();

cy.get('.SidebarChannelGroup').should('exist').and('be.visible').within(() => {
// * Verify that both channels are visible when not collapsed
cy.findByText('Town Square').should('exist').and('be.visible');
cy.findByText('Off-Topic').should('not.exist');
});
// * Verify that Off-Topic is no longer visible but Town Square still is
cy.get('.SidebarChannel:contains(Off-Topic)').should('not.be.visible');
cy.get('.SidebarChannel:contains(Town Square)').should('be.visible');
});

it('should collapse channels that are not unread channels', () => {
const uniqueChannelName = MESSAGES.TINY;

// Create a new channel and post a message into it
cy.apiCreateChannel(testTeam.id, 'channel-test', uniqueChannelName, 'O', '', '', false).then(({channel}) => {
cy.postMessageAs({sender: sysadmin, message: MESSAGES.SMALL, channelId: channel.id});
cy.apiCreateChannel(testTeam.id, 'channel-test', 'Channel Test').then(({channel}) => {
cy.postMessageAs({sender: sysadmin, message: 'Test', channelId: channel.id});

// Force a reload to ensure the unread message displays
cy.reload();
Expand All @@ -77,20 +70,16 @@ describe('Channel sidebar', () => {
// # Check that the CHANNELS group header is visible
cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('be.visible').as('channelsGroup');

cy.get('.SidebarChannelGroup').should('exist').and('be.visible').within(() => {
// * Verify that all channels are visible
cy.findByText('Off-Topic').should('exist').and('be.visible');
cy.findByText(uniqueChannelName).should('exist').and('be.visible');
});
// * Verify that all channels are visible
cy.get('.SidebarChannel:contains(Off-Topic)').should('be.visible');
cy.get('.SidebarChannel:contains(Channel Test)').should('be.visible').should('has.class', 'unread');

// # Click on CHANNELS
cy.get('@channelsGroup').click();

cy.get('.SidebarChannelGroup').should('exist').and('be.visible').within(() => {
// * Verify that Off-Topic is no longer visible but Channel Test still is
cy.findByText('Off-Topic').should('not.exist');
cy.findByText(uniqueChannelName).should('be.visible').and('exist');
});
// * Verify that Off-Topic is no longer visible but Channel Test still is
cy.get('.SidebarChannel:contains(Off-Topic)').should('not.be.visible');
cy.get('.SidebarChannel:contains(Channel Test)').should('be.visible');
});
});

Expand Down
5 changes: 2 additions & 3 deletions e2e/cypress/integration/channel_sidebar/dm_gm_filtering_sorting_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
// Stage: @prod
// Group: @dm_category

import * as MESSAGES from '../../fixtures/messages';
import {getAdminAccount} from '../../support/env';

describe('DM/GM filtering and sorting', () => {
Expand Down Expand Up @@ -44,12 +43,12 @@ describe('DM/GM filtering and sorting', () => {
// # Post a message as the new user
cy.postMessageAs({
sender: user,
message: MESSAGES.TINY,
message: `Hey ${receivingUser.username}`,
channelId: channel.id,
});

// * Verify that the DM count is now correct
cy.get('.SidebarChannelGroup:contains(DIRECT MESSAGES) a[id^="sidebarItem"]').should('have.length', Math.min(i + 1, 2));
cy.get('.SidebarChannelGroup:contains(DIRECT MESSAGES) a[id^="sidebarItem"]').should('have.length', Math.min(i + 1, 20));

// # Click on the new DM channel to mark it read
cy.get(`#sidebarItem_${channel.name}`).should('be.visible').click();
Expand Down
Loading

0 comments on commit 9a53bbd

Please sign in to comment.