;
openModal: (modalData: ModalData
) => void;
closeModal: (modalId: string) => void;
- getChannelStats: (channelId: string) => void;
- setGlobalItem: (name: string, value: string) => void;
closeRightHandSide: () => void;
}
@@ -84,8 +73,6 @@ function mapDispatchToProps(dispatch: Dispatch) {
searchMoreChannels,
openModal,
closeModal,
- getChannelStats,
- setGlobalItem,
closeRightHandSide,
}, dispatch),
};
diff --git a/webapp/channels/src/components/more_channels/more_channels.scss b/webapp/channels/src/components/more_channels/more_channels.scss
deleted file mode 100644
index d86fd138a7..0000000000
--- a/webapp/channels/src/components/more_channels/more_channels.scss
+++ /dev/null
@@ -1,295 +0,0 @@
-@charset 'UTF-8';
-
-#moreChannelsModal {
- .modal-content {
- min-height: 600px;
- max-height: calc(50vh - 240px);
- }
-
- .modal-dialog {
- margin-top: calc(45vh - 240px) !important;
- }
-
- .filter-row--full {
- position: relative;
- margin: 0 32px;
-
- .input-clear {
- top: 16px;
- right: 16px;
- }
-
- #searchIcon {
- position: absolute;
- top: 14px;
- left: 16px;
- color: rgba(var(--center-channel-color-rgb), 0.64);
- pointer-events: none;
- }
-
- #searchChannelsTextbox {
- height: 48px;
- padding-left: 40px;
- border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
- box-shadow: none;
- font-size: 16px;
-
- &::placeholder {
- color: var(--center-channel-color);
- }
-
- &:focus {
- border: 2px solid var(--button-bg);
- }
- }
- }
-
- .more-modal__dropdown {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 32px;
- border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
- margin: 0;
-
- span {
- color: rgba(var(--center-channel-color-rgb), 0.64);
- font-size: 12px;
- line-height: 16px;
- }
-
- .MenuItem__primary-text {
- width: 100%;
- color: var(--center-channel-color);
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
-
- svg {
- margin-left: auto;
- }
- }
-
- .Menu__content {
- border-color: rgba(var(--center-channel-color-rgb), 0.16);
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
- }
-
- #channelCountLabel {
- color: var(--center-channel-color);
- font-size: 12px;
- font-weight: 400;
- }
-
- #modalPreferenceContainer {
- display: flex;
- align-items: center;
- justify-content: center;
-
- .get-app__checkbox {
- display: flex;
- width: 16px;
- height: 16px;
- align-items: center;
- border: 1px solid rgba(var(--center-channel-color-rgb), 0.24);
- }
-
- #hideJoinedPreferenceCheckbox {
- display: flex;
- align-items: center;
- cursor: pointer;
- }
-
- #channelsMoreDropdown {
- margin: 0 8px;
- }
-
- #menuWrapper {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 4px 6px 4px 8px;
- }
-
- .MenuWrapper:hover {
- background-color: rgba(var(--center-channel-color-rgb), 0.08);
- border-radius: 4px;
- }
-
- .MenuWrapper--open {
- background-color: rgba(var(--button-bg-rgb), 0.12);
- border-radius: 4px;
-
- &:hover {
- background-color: rgba(var(--button-bg-rgb), 0.12);
- }
- }
- }
- }
-
- .modal-body {
- padding: 15px 0 0;
-
- .filtered-user-list {
- height: 500px;
- }
-
- .more-modal__row {
- padding: 0 32px;
- border-bottom: none;
-
- .more-modal__details {
- padding-left: 0;
- color: rgba(var(--center-channel-color-rgb), 0.56);
-
- svg {
- flex-shrink: 0;
- }
-
- .more-modal__name {
- align-items: center;
- margin-top: 0;
-
- span {
- color: var(--center-channel-color);
- font-weight: 500;
- }
- }
-
- #channelPurposeContainer {
- display: flex;
- align-items: center;
- justify-content: flex-start;
-
- .dot {
- width: 3px;
- height: 3px;
- flex-shrink: 0;
- background-color: rgba(var(--center-channel-color-rgb), 0.56);
- border-radius: 50%;
- }
-
- .more-modal__description {
- margin-left: 4px;
- font-weight: 400;
- }
-
- #membershipIndicatorContainer {
- display: flex;
- align-items: center;
-
- span,
- svg {
- color: var(--online-indicator);
- }
- }
-
- span {
- margin: 0 4px;
- font-size: 12px;
- font-weight: 600;
- line-height: 12px;
- opacity: 1;
- }
- }
- }
-
- .more-modal__actions {
- button {
- display: none;
- min-width: 54px;
- height: 32px;
- font-size: 12px;
- font-weight: 600;
- }
- }
- }
-
- .more-modal__row:hover,
- .more-modal__row:focus {
- background-color: rgba(var(--center-channel-color-rgb), 0.08);
- cursor: pointer;
-
- .more-modal__actions {
- .primaryButton,
- .outlineButton {
- display: inline-block;
- }
- }
- }
-
- .form-group {
- padding: 0 32px;
- margin-bottom: 0;
- }
-
- ::-webkit-scrollbar {
- width: 4px;
- }
-
- ::-webkit-scrollbar-track {
- background: none;
- }
- }
-
- .modal-header {
- .GenericModal__header {
- display: flex;
- width: 95%;
- align-items: center;
- justify-content: space-between;
- padding-right: 4px;
- }
-
- .close {
- top: 22px;
- }
- }
-
- .outlineButton {
- border: 1px solid var(--button-bg);
- background: none;
- border-radius: 4px;
- color: var(--button-bg);
- font-size: 12px;
- font-weight: 600;
- line-height: 16px;
- }
-
- .outlineButton:hover {
- background-color: rgba(var(--button-bg-rgb), 0.08);
- }
-
- .filter-controls {
- padding: 0;
-
- button {
- min-width: 72px;
- margin: 8px 32px;
- }
- }
-}
-
-#moreChannelsList {
- .primary-message {
- margin-top: 8px;
- color: var(--center-channel-color);
- line-height: 28px;
- }
-
- .secondary-message {
- margin-bottom: 30px;
- }
-
- .primaryButton {
- background-color: var(--button-bg);
- border-radius: 4px;
- color: var(--button-color);
- font-size: 14px;
- font-weight: 600;
- }
-
- #createNewChannelButton {
- padding: 10px 20px;
- }
-}
diff --git a/webapp/channels/src/components/more_channels/more_channels.test.tsx b/webapp/channels/src/components/more_channels/more_channels.test.tsx
index 4d05021650..a591bfef5b 100644
--- a/webapp/channels/src/components/more_channels/more_channels.test.tsx
+++ b/webapp/channels/src/components/more_channels/more_channels.test.tsx
@@ -7,7 +7,7 @@ import {shallow} from 'enzyme';
import {ActionResult} from 'mattermost-redux/types/actions';
import MoreChannels, {Props} from 'components/more_channels/more_channels';
-import SearchableChannelList from 'components/more_channels/searchable_channel_list.jsx';
+import SearchableChannelList from 'components/searchable_channel_list.jsx';
import {getHistory} from 'utils/browser_history';
import {TestHelper} from 'utils/test_helper';
@@ -59,16 +59,7 @@ describe('components/MoreChannels', () => {
};
const baseProps: Props = {
- channels: [
- TestHelper.getChannelMock({
- id: 'channel-1',
- name: 'channel-1',
- }),
- TestHelper.getChannelMock({
- id: 'channel-2',
- name: 'channel-2',
- }),
- ],
+ channels: [TestHelper.getChannelMock({})],
archivedChannels: [TestHelper.getChannelMock({
id: 'channel_id_2',
team_id: 'channel_team_2',
@@ -82,14 +73,6 @@ describe('components/MoreChannels', () => {
teamName: 'team_name',
channelsRequestStarted: false,
canShowArchivedChannels: true,
- myChannelMemberships: {
- 'channel-2': TestHelper.getChannelMembershipMock({
- channel_id: 'channel-2',
- user_id: 'user-1',
- }),
- },
- allChannelStats: {},
- shouldHideJoinedChannels: false,
actions: {
getChannels: jest.fn(),
getArchivedChannels: jest.fn(),
@@ -97,8 +80,6 @@ describe('components/MoreChannels', () => {
searchMoreChannels: jest.fn(channelActions.searchMoreChannels),
openModal: jest.fn(),
closeModal: jest.fn(),
- getChannelStats: jest.fn(),
- setGlobalItem: jest.fn(),
closeRightHandSide: jest.fn(),
},
};
@@ -110,6 +91,7 @@ describe('components/MoreChannels', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.state('searchedChannels')).toEqual([]);
+ expect(wrapper.state('show')).toEqual(true);
expect(wrapper.state('shouldShowArchivedChannels')).toEqual(false);
expect(wrapper.state('search')).toEqual(false);
expect(wrapper.state('serverError')).toBeNull();
@@ -120,6 +102,16 @@ describe('components/MoreChannels', () => {
expect(wrapper.instance().props.actions.getChannels).toHaveBeenCalledWith(wrapper.instance().props.teamId, 0, 100);
});
+ test('should match state on handleHide', () => {
+ const wrapper = shallow(
+ ,
+ );
+ wrapper.setState({show: true});
+
+ wrapper.instance().handleHide();
+ expect(wrapper.state('show')).toEqual(false);
+ });
+
test('should call closeModal on handleExit', () => {
const wrapper = shallow(
,
@@ -160,7 +152,7 @@ describe('components/MoreChannels', () => {
,
);
- wrapper.setState({loading: false, search: true, searching: true});
+ wrapper.setState({search: true, searching: true});
const searchList = wrapper.find(SearchableChannelList);
expect(searchList.props().loading).toEqual(true);
});
@@ -219,6 +211,7 @@ describe('components/MoreChannels', () => {
process.nextTick(() => {
expect(getHistory().push).toHaveBeenCalledTimes(1);
expect(callback).toHaveBeenCalledTimes(1);
+ expect(wrapper.state('show')).toEqual(false);
done();
});
});
@@ -256,7 +249,7 @@ describe('components/MoreChannels', () => {
jest.runOnlyPendingTimers();
expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledTimes(1);
- expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledWith('fail', false, false);
+ expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledWith('fail', false);
process.nextTick(() => {
expect(wrapper.state('search')).toEqual(true);
expect(wrapper.state('searching')).toEqual(false);
@@ -283,7 +276,7 @@ describe('components/MoreChannels', () => {
jest.runOnlyPendingTimers();
expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledTimes(1);
- expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledWith('channel', false, false);
+ expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledWith('channel', false);
process.nextTick(() => {
expect(wrapper.state('search')).toEqual(true);
expect(wrapper.state('searching')).toEqual(false);
@@ -310,7 +303,7 @@ describe('components/MoreChannels', () => {
jest.runOnlyPendingTimers();
expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledTimes(1);
- expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledWith('channel', true, false);
+ expect(wrapper.instance().props.actions.searchMoreChannels).toHaveBeenCalledWith('channel', true);
process.nextTick(() => {
expect(wrapper.state('search')).toEqual(true);
expect(wrapper.state('searching')).toEqual(false);
@@ -318,16 +311,4 @@ describe('components/MoreChannels', () => {
done();
});
});
-
- test('should hide joined channels from channels props when shouldHideJoinedChannels prop is true', () => {
- const props = {
- ...baseProps,
- shouldHideJoinedChannels: true,
- };
- const wrapper = shallow(
- ,
- );
-
- expect(wrapper.instance().activeChannels).not.toContain(baseProps.channels[1]);
- });
});
diff --git a/webapp/channels/src/components/more_channels/more_channels.tsx b/webapp/channels/src/components/more_channels/more_channels.tsx
index 235744166e..b51606db19 100644
--- a/webapp/channels/src/components/more_channels/more_channels.tsx
+++ b/webapp/channels/src/components/more_channels/more_channels.tsx
@@ -2,32 +2,23 @@
// See LICENSE.txt for license information.
import React from 'react';
+import {Modal} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
-import classNames from 'classnames';
-
import {ActionResult} from 'mattermost-redux/types/actions';
-import {Channel, ChannelMembership, ChannelStats} from '@mattermost/types/channels';
+import {Channel} from '@mattermost/types/channels';
import Permissions from 'mattermost-redux/constants/permissions';
-import {RelationOneToOne} from '@mattermost/types/utilities';
-
import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
+import SearchableChannelList from 'components/searchable_channel_list.jsx';
import TeamPermissionGate from 'components/permissions_gates/team_permission_gate';
-import GenericModal from 'components/generic_modal';
-import LoadingScreen from 'components/loading_screen';
import {ModalData} from 'types/actions';
import {RhsState} from 'types/store/rhs';
import {getHistory} from 'utils/browser_history';
-import {ModalIdentifiers, StoragePrefixes, RHSStates} from 'utils/constants';
+import {ModalIdentifiers, RHSStates} from 'utils/constants';
import {getRelativeChannelURL} from 'utils/url';
-import {localizeMessage} from 'utils/utils';
-
-import SearchableChannelList from './searchable_channel_list';
-
-import './more_channels.scss';
const CHANNELS_CHUNK_SIZE = 50;
const CHANNELS_PER_PAGE = 50;
@@ -37,15 +28,9 @@ type Actions = {
getChannels: (teamId: string, page: number, perPage: number) => void;
getArchivedChannels: (teamId: string, page: number, channelsPerPage: number) => void;
joinChannel: (currentUserId: string, teamId: string, channelId: string) => Promise;
- searchMoreChannels: (term: string, shouldShowArchivedChannels: boolean, shouldHideJoinedChannels: boolean) => Promise;
+ searchMoreChannels: (term: string, shouldShowArchivedChannels: boolean) => Promise;
openModal: (modalData: ModalData
) => void;
closeModal: (modalId: string) => void;
- getChannelStats: (channelId: string) => void;
-
- /*
- * Function to set a key-value pair in the local storage
- */
- setGlobalItem: (name: string, value: string) => void;
closeRightHandSide: () => void;
}
@@ -58,27 +43,23 @@ export type Props = {
channelsRequestStarted?: boolean;
canShowArchivedChannels?: boolean;
morePublicChannelsModalType?: string;
- myChannelMemberships: RelationOneToOne;
- allChannelStats: RelationOneToOne;
- shouldHideJoinedChannels: boolean;
rhsState?: RhsState;
rhsOpen?: boolean;
actions: Actions;
}
type State = {
+ show: boolean;
shouldShowArchivedChannels: boolean;
search: boolean;
searchedChannels: Channel[];
serverError: React.ReactNode | string;
searching: boolean;
searchTerm: string;
- loading: boolean;
}
export default class MoreChannels extends React.PureComponent {
public searchTimeoutId: number;
- activeChannels: Channel[] = [];
constructor(props: Props) {
super(props);
@@ -86,27 +67,25 @@ export default class MoreChannels extends React.PureComponent {
this.searchTimeoutId = 0;
this.state = {
+ show: true,
shouldShowArchivedChannels: this.props.morePublicChannelsModalType === 'private',
search: false,
searchedChannels: [],
serverError: null,
searching: false,
searchTerm: '',
- loading: true,
};
}
- async componentDidMount() {
- await this.props.actions.getChannels(this.props.teamId, 0, CHANNELS_CHUNK_SIZE * 2);
+ componentDidMount() {
+ this.props.actions.getChannels(this.props.teamId, 0, CHANNELS_CHUNK_SIZE * 2);
if (this.props.canShowArchivedChannels) {
- await this.props.actions.getArchivedChannels(this.props.teamId, 0, CHANNELS_CHUNK_SIZE * 2);
+ this.props.actions.getArchivedChannels(this.props.teamId, 0, CHANNELS_CHUNK_SIZE * 2);
}
- await this.props.channels.forEach((channel) => this.props.actions.getChannelStats(channel.id));
- this.loadComplete();
}
- loadComplete = () => {
- this.setState({loading: false});
+ handleHide = () => {
+ this.setState({show: false});
}
handleNewChannel = () => {
@@ -145,17 +124,14 @@ export default class MoreChannels extends React.PureComponent {
handleJoin = async (channel: Channel, done: () => void) => {
const {actions, currentUserId, teamId, teamName} = this.props;
- let result;
+ const result = await actions.joinChannel(currentUserId, teamId, channel.id);
- if (!this.isMemberOfChannel(channel.id)) {
- result = await actions.joinChannel(currentUserId, teamId, channel.id);
- }
-
- if (result?.error) {
+ if (result.error) {
this.setState({serverError: result.error.message});
} else {
getHistory().push(getRelativeChannelURL(teamName, channel.name));
this.closeEditRHS();
+ this.handleHide();
}
if (done) {
@@ -177,7 +153,7 @@ export default class MoreChannels extends React.PureComponent {
const searchTimeoutId = window.setTimeout(
async () => {
try {
- const {data} = await this.props.actions.searchMoreChannels(term, this.state.shouldShowArchivedChannels, this.props.shouldHideJoinedChannels);
+ const {data} = await this.props.actions.searchMoreChannels(term, this.state.shouldShowArchivedChannels);
if (searchTimeoutId !== this.searchTimeoutId) {
return;
}
@@ -207,47 +183,29 @@ export default class MoreChannels extends React.PureComponent {
this.setState({shouldShowArchivedChannels});
}
- isMemberOfChannel(channelId: string) {
- return this.props.myChannelMemberships[channelId];
- }
-
- handleShowJoinedChannelsPreference = (shouldHideJoinedChannels: boolean) => {
- // search again when switching channels to update search results
- this.search(this.state.searchTerm);
- this.props.actions.setGlobalItem(StoragePrefixes.HIDE_JOINED_CHANNELS, shouldHideJoinedChannels.toString());
- }
-
- otherChannelsWithoutJoined = this.props.channels.filter((channel) => !this.isMemberOfChannel(channel.id));
- archivedChannelsWithoutJoined = this.props.archivedChannels.filter((channel) => !this.isMemberOfChannel(channel.id));
-
render() {
const {
channels,
archivedChannels,
teamId,
channelsRequestStarted,
- shouldHideJoinedChannels,
} = this.props;
const {
search,
searchedChannels,
serverError: serverErrorState,
+ show,
searching,
shouldShowArchivedChannels,
} = this.state;
- const otherChannelsWithoutJoined = channels.filter((channel) => !this.isMemberOfChannel(channel.id));
- const archivedChannelsWithoutJoined = archivedChannels.filter((channel) => !this.isMemberOfChannel(channel.id));
+ let activeChannels;
- if (shouldShowArchivedChannels && shouldHideJoinedChannels) {
- this.activeChannels = search ? searchedChannels : archivedChannelsWithoutJoined;
- } else if (shouldShowArchivedChannels && !shouldHideJoinedChannels) {
- this.activeChannels = search ? searchedChannels : archivedChannels;
- } else if (!shouldShowArchivedChannels && shouldHideJoinedChannels) {
- this.activeChannels = search ? searchedChannels : otherChannelsWithoutJoined;
+ if (shouldShowArchivedChannels) {
+ activeChannels = search ? searchedChannels : archivedChannels;
} else {
- this.activeChannels = search ? searchedChannels : channels;
+ activeChannels = search ? searchedChannels : channels;
}
let serverError;
@@ -256,87 +214,87 @@ export default class MoreChannels extends React.PureComponent {
;
}
- const createNewChannelButton = (className: string, icon?: JSX.Element) => {
- const buttonClassName = classNames('btn', className);
- return (
-
+
- );
- };
-
- const noResultsText = (
- <>
-
-
- {createNewChannelButton('primaryButton', )}
-
+
+
);
- const body = this.state.loading ? : (
+ const createChannelHelpText = (
+
+
+
+
+
+ );
+
+ const body = (
{serverError}
);
- const title = (
-
- );
-
return (
-
- {body}
-
+
+
+ {body}
+
+
);
}
}
diff --git a/webapp/channels/src/components/more_channels/searchable_channel_list.jsx b/webapp/channels/src/components/more_channels/searchable_channel_list.jsx
deleted file mode 100644
index 0efe317296..0000000000
--- a/webapp/channels/src/components/more_channels/searchable_channel_list.jsx
+++ /dev/null
@@ -1,483 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
-
-import {AccountOutlineIcon, ArchiveOutlineIcon, CheckIcon, ChevronDownIcon, GlobeIcon, LockOutlineIcon, MagnifyIcon} from '@mattermost/compass-icons/components';
-
-import classNames from 'classnames';
-
-import {isPrivateChannel} from 'mattermost-redux/utils/channel_utils';
-
-import LoadingScreen from 'components/loading_screen';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
-import QuickInput from 'components/quick_input';
-import LocalizedInput from 'components/localized_input/localized_input';
-import CheckboxCheckedIcon from 'components/widgets/icons/checkbox_checked_icon';
-import MagnifyingGlassSVG from 'components/common/svg_images_components/magnifying_glass_svg';
-import MenuWrapper from 'components/widgets/menu/menu_wrapper';
-import Menu from 'components/widgets/menu/menu';
-
-import {t} from 'utils/i18n';
-import * as UserAgent from 'utils/user_agent';
-import Constants, {ModalIdentifiers} from 'utils/constants';
-import {isKeyPressed, localizeMessage, localizeAndFormatMessage} from 'utils/utils';
-
-import {isArchivedChannel} from 'utils/channel_utils';
-
-const NEXT_BUTTON_TIMEOUT_MILLISECONDS = 500;
-
-export default class SearchableChannelList extends React.PureComponent {
- static getDerivedStateFromProps(props, state) {
- return {isSearch: props.isSearch, page: props.isSearch && !state.isSearch ? 0 : state.page};
- }
-
- constructor(props) {
- super(props);
-
- this.nextTimeoutId = 0;
-
- this.state = {
- joiningChannel: '',
- page: 0,
- nextDisabled: false,
- channelSearchValue: '',
- };
-
- this.filter = React.createRef();
- this.channelListScroll = React.createRef();
- }
-
- componentDidMount() {
- // only focus the search box on desktop so that we don't cause the keyboard to open on mobile
- if (!UserAgent.isMobile() && this.filter.current) {
- this.filter.current.focus();
- }
- document.addEventListener('keydown', this.onKeyDown);
- }
-
- componentWillUnmount() {
- document.removeEventListener('keydown', this.onKeyDown);
- }
-
- onKeyDown = (e) => {
- const target = e.target;
- const isEnterKeyPressed = isKeyPressed(e, Constants.KeyCodes.ENTER);
- if (isEnterKeyPressed && (e.shiftKey || e.ctrlKey || e.altKey)) {
- return;
- }
- if (isEnterKeyPressed && target.classList.contains('more-modal__row')) {
- target.click();
- }
- }
-
- handleJoin = (channel, e) => {
- e.stopPropagation();
- this.setState({joiningChannel: channel.id});
- this.props.handleJoin(
- channel,
- () => {
- this.setState({joiningChannel: ''});
- },
- );
- if (this.isMemberOfChannel(channel.id)) {
- this.props.closeModal(ModalIdentifiers.MORE_CHANNELS);
- }
- }
-
- isMemberOfChannel(channelId) {
- return this.props.myChannelMemberships[channelId];
- }
-
- createChannelRow = (channel) => {
- const ariaLabel = `${channel.display_name}, ${channel.purpose}`.toLowerCase();
- let channelTypeIcon;
-
- let memberCount = 0;
- if (this.props.allChannelStats[channel.id]) {
- memberCount = this.props.allChannelStats[channel.id].member_count;
- }
-
- if (isArchivedChannel(channel)) {
- channelTypeIcon = ;
- } else if (isPrivateChannel(channel)) {
- channelTypeIcon = ;
- } else {
- channelTypeIcon = ;
- }
-
- const membershipIndicator = this.isMemberOfChannel(channel.id) ? (
-
-
-
-
-
- ) : null;
-
- const channelPurposeContainerAriaLabel = localizeAndFormatMessage(
- t('more_channels.channel_purpose'),
- 'Channel Information: Membership Indicator: Joined, Member count {memberCount} , Purpose: {channelPurpose}',
- {memberCount, channelPurpose: channel.purpose || ''},
- );
-
- const channelPurposeContainer = (
-
- {membershipIndicator}
-
- {memberCount}
- {channel.purpose.length > 0 && }
- {channel.purpose}
- this.handleJoin(channel, e)}
- tabIndex={0}
- >
-
-
- {channelTypeIcon}
- {channel.display_name}
-
- {channelPurposeContainer}
-
-
- {joinViewChannelButton}
-
-
0 ?
- localizeAndFormatMessage(t('more_channels.noMore'), 'No results for {text}', {text: this.state.channelSearchValue}) :
- localizeMessage('widgets.channels_input.empty', 'No channels found')
- }
- >
-
-
- {emptyStateMessage}
-
- {this.props.noResultsText}
-
- );
- } else {
- const pageStart = this.state.page * this.props.channelsPerPage;
- const pageEnd = pageStart + this.props.channelsPerPage;
- const channelsToDisplay = this.props.channels.slice(pageStart, pageEnd);
- listContent = channelsToDisplay.map(this.createChannelRow);
-
- if (channelsToDisplay.length >= this.props.channelsPerPage && pageEnd < this.props.channels.length) {
- nextButton = (
-
- );
- }
-
- if (this.state.page > 0) {
- previousButton = (
-
- );
- }
- }
-
- const input = (
-
-
-
-
-
-
- );
-
- let channelDropdown;
- let checkIcon;
-
- if (this.props.canShowArchivedChannels) {
- checkIcon = (
-
- );
- channelDropdown = (
-
-
-
-
- );
- }
-
- const hideJoinedButtonClass = classNames('get-app__checkbox', {checked: this.props.rememberHideJoinedChannelsChecked});
- const hideJoinedPreferenceCheckbox = (
-
-
-
-
- );
-
- let channelCountLabel;
- if (channels.length === 0) {
- channelCountLabel = localizeMessage('more_channels.count_zero', '0 Results');
- } else if (channels.length === 1) {
- channelCountLabel = localizeMessage('more_channels.count_one', '1 Result');
- } else if (channels.length > 1) {
- channelCountLabel = localizeAndFormatMessage(t('more_channels.count'), '0 Results', {count: channels.length});
- } else {
- channelCountLabel = localizeMessage('more_channels.count_zero', '0 Results');
- }
-
- const dropDownContainer = (
-
-
{channelCountLabel}
-
- {channelDropdown}
- {hideJoinedPreferenceCheckbox}
-
-
- {input}
- {dropDownContainer}
-
-
- {previousButton}
- {nextButton}
-
-
+
+
+
{channel.purpose}
+
+
+
+
+
+
+
+
+ {this.props.noResultsText}
+
+ );
+ } else {
+ const pageStart = this.state.page * this.props.channelsPerPage;
+ const pageEnd = pageStart + this.props.channelsPerPage;
+ const channelsToDisplay = this.props.channels.slice(pageStart, pageEnd);
+ listContent = channelsToDisplay.map(this.createChannelRow);
+
+ if (channelsToDisplay.length >= this.props.channelsPerPage && pageEnd < this.props.channels.length) {
+ nextButton = (
+
+ );
+ }
+
+ if (this.state.page > 0) {
+ previousButton = (
+
+ );
+ }
+ }
+
+ let input = (
+
+ );
+
+ if (this.props.createChannelButton) {
+ input = (
+
+
+
+
+
+ {this.props.createChannelButton}
+
+
+ {input}
+ {channelDropdown}
+
+
+ {previousButton}
+ {nextButton}
+
+
- 
-