[MM-14093] Rename 'team' to 'server' and 'tab' to 'view' in most cases, some additional cleanup (#2711)

* Rename MattermostTeam -> UniqueServer, MattermostTab -> UniqueView * Rename 'team' to 'server' * Some further cleanup * Rename weirdly named function * Rename 'tab' to 'view' in most instances * Fix i18n * PR feedback
2023-05-08 09:17:01 -04:00
parent 9f75ddcf0f
commit 316beba950
110 changed files with 1698 additions and 1757 deletions
--- a/src/renderer/components/ConfigureServer.tsx
+++ b/src/renderer/components/ConfigureServer.tsx
@@ -5,7 +5,7 @@ import React, {useState, useCallback, useEffect} from 'react';
 import {useIntl, FormattedMessage} from 'react-intl';
 import classNames from 'classnames';

-import {MattermostTeam} from 'types/config';
+import {UniqueServer} from 'types/config';

 import {isValidURL, parseURL} from 'common/utils/url';
 import {MODAL_TRANSITION_TIMEOUT} from 'common/utils/constants';
@@ -22,8 +22,8 @@ import 'renderer/css/components/ConfigureServer.scss';
 import 'renderer/css/components/LoadingScreen.css';

 type ConfigureServerProps = {
-    currentTeams: MattermostTeam[];
-    team?: MattermostTeam;
+    currentServers: UniqueServer[];
+    server?: UniqueServer;
    mobileView?: boolean;
    darkMode?: boolean;
    messageTitle?: string;
@@ -32,12 +32,12 @@ type ConfigureServerProps = {
    alternateLinkMessage?: string;
    alternateLinkText?: string;
    alternateLinkURL?: string;
-    onConnect: (data: MattermostTeam) => void;
+    onConnect: (data: UniqueServer) => void;
 };

 function ConfigureServer({
-    currentTeams,
-    team,
+    currentServers,
+    server,
    mobileView,
    darkMode,
    messageTitle,
@@ -54,7 +54,7 @@ function ConfigureServer({
        name: prevName,
        url: prevURL,
        id,
-    } = team || {};
+    } = server || {};

    const [transition, setTransition] = useState<'inFromRight' | 'outToLeft'>();
    const [name, setName] = useState(prevName || '');
@@ -92,14 +92,14 @@ function ConfigureServer({

        if (!newName) {
            return formatMessage({
-                id: 'renderer.components.newTeamModal.error.nameRequired',
+                id: 'renderer.components.newServerModal.error.nameRequired',
                defaultMessage: 'Name is required.',
            });
        }

-        if (currentTeams.find(({name: existingName}) => existingName === newName)) {
+        if (currentServers.find(({name: existingName}) => existingName === newName)) {
            return formatMessage({
-                id: 'renderer.components.newTeamModal.error.serverNameExists',
+                id: 'renderer.components.newServerModal.error.serverNameExists',
                defaultMessage: 'A server with the same name already exists.',
            });
        }
@@ -110,28 +110,28 @@ function ConfigureServer({
    const validateURL = async (fullURL: string) => {
        if (!fullURL) {
            return formatMessage({
-                id: 'renderer.components.newTeamModal.error.urlRequired',
+                id: 'renderer.components.newServerModal.error.urlRequired',
                defaultMessage: 'URL is required.',
            });
        }

        if (!parseURL(fullURL)) {
            return formatMessage({
-                id: 'renderer.components.newTeamModal.error.urlIncorrectFormatting',
+                id: 'renderer.components.newServerModal.error.urlIncorrectFormatting',
                defaultMessage: 'URL is not formatted correctly.',
            });
        }

        if (!isValidURL(fullURL)) {
            return formatMessage({
-                id: 'renderer.components.newTeamModal.error.urlNeedsHttp',
+                id: 'renderer.components.newServerModal.error.urlNeedsHttp',
                defaultMessage: 'URL should start with http:// or https://.',
            });
        }

-        if (currentTeams.find(({url: existingURL}) => parseURL(existingURL)?.toString === parseURL(fullURL)?.toString())) {
+        if (currentServers.find(({url: existingURL}) => parseURL(existingURL)?.toString === parseURL(fullURL)?.toString())) {
            return formatMessage({
-                id: 'renderer.components.newTeamModal.error.serverUrlExists',
+                id: 'renderer.components.newServerModal.error.serverUrlExists',
                defaultMessage: 'A server with the same URL already exists.',
            });
        }
--- a/src/renderer/components/MainPage.tsx
+++ b/src/renderer/components/MainPage.tsx
@@ -10,7 +10,7 @@ import {Container, Row} from 'react-bootstrap';
 import {DropResult} from 'react-beautiful-dnd';
 import {injectIntl, IntlShape} from 'react-intl';

-import {MattermostTab, MattermostTeam} from 'types/config';
+import {UniqueView, UniqueServer} from 'types/config';
 import {DownloadedItems} from 'types/downloads';

 import restoreButton from '../../assets/titlebar/chrome-restore.svg';
@@ -23,7 +23,7 @@ import {playSound} from '../notificationSounds';
 import TabBar from './TabBar';
 import ExtraBar from './ExtraBar';
 import ErrorView from './ErrorView';
-import TeamDropdownButton from './TeamDropdownButton';
+import ServerDropdownButton from './ServerDropdownButton';
 import DownloadsDropdownButton from './DownloadsDropdown/DownloadsDropdownButton';

 import '../css/components/UpgradeButton.scss';
@@ -47,8 +47,8 @@ type Props = {
 type State = {
    activeServerId?: string;
    activeTabId?: string;
-    servers: MattermostTeam[];
-    tabs: Map<string, MattermostTab[]>;
+    servers: UniqueServer[];
+    tabs: Map<string, UniqueView[]>;
    sessionsExpired: Record<string, boolean>;
    unreadCounts: Record<string, boolean>;
    mentionCounts: Record<string, number>;
@@ -147,7 +147,7 @@ class MainPage extends React.PureComponent<Props, State> {

    setInitialActiveTab = async () => {
        const lastActive = await window.desktop.getLastActive();
-        this.setActiveView(lastActive.server, lastActive.tab);
+        this.setActiveView(lastActive.server, lastActive.view);
    }

    updateServers = async () => {
@@ -239,11 +239,11 @@ class MainPage extends React.PureComponent<Props, State> {
            this.setState({unreadCounts: newUnreads, mentionCounts: newMentionCounts, sessionsExpired: expired});
        });

-        window.desktop.onCloseTeamsDropdown(() => {
+        window.desktop.onCloseServersDropdown(() => {
            this.setState({isMenuOpen: false});
        });

-        window.desktop.onOpenTeamsDropdown(() => {
+        window.desktop.onOpenServersDropdown(() => {
            this.setState({isMenuOpen: true});
        });

@@ -290,7 +290,7 @@ class MainPage extends React.PureComponent<Props, State> {
    }

    handleCloseDropdowns = () => {
-        window.desktop.closeTeamsDropdown();
+        window.desktop.closeServersDropdown();
        this.closeDownloadsDropdown();
    }

@@ -307,7 +307,7 @@ class MainPage extends React.PureComponent<Props, State> {
    }

    handleCloseTab = (tabId: string) => {
-        window.desktop.closeTab(tabId);
+        window.desktop.closeView(tabId);
    }

    handleDragAndDrop = async (dropResult: DropResult) => {
@@ -399,7 +399,7 @@ class MainPage extends React.PureComponent<Props, State> {

    render() {
        const {intl} = this.props;
-        let currentTabs: MattermostTab[] = [];
+        let currentTabs: UniqueView[] = [];
        if (this.state.activeServerId) {
            currentTabs = this.state.tabs.get(this.state.activeServerId) ?? [];
        }
@@ -538,7 +538,7 @@ class MainPage extends React.PureComponent<Props, State> {
                        />
                    </button>
                    {activeServer && (
-                        <TeamDropdownButton
+                        <ServerDropdownButton
                            isDisabled={this.state.modalOpen}
                            activeServerName={activeServer.name}
                            totalMentionCount={totalMentionCount}
--- a/src/renderer/components/NewServerModal.tsx
+++ b/src/renderer/components/NewServerModal.tsx
@@ -6,15 +6,15 @@ import React from 'react';
 import {Modal, Button, FormGroup, FormControl, FormLabel, FormText} from 'react-bootstrap';
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl';

-import {MattermostTeam} from 'types/config';
+import {UniqueServer} from 'types/config';

 import {isValidURL} from 'common/utils/url';

 type Props = {
    onClose?: () => void;
-    onSave?: (team: MattermostTeam) => void;
-    team?: MattermostTeam;
-    currentTeams?: MattermostTeam[];
+    onSave?: (server: UniqueServer) => void;
+    server?: UniqueServer;
+    currentServers?: UniqueServer[];
    editMode?: boolean;
    show?: boolean;
    restoreFocus?: boolean;
@@ -24,16 +24,16 @@ type Props = {
 };

 type State = {
-    teamName: string;
-    teamUrl: string;
-    teamId?: string;
-    teamOrder: number;
+    serverName: string;
+    serverUrl: string;
+    serverId?: string;
+    serverOrder: number;
    saveStarted: boolean;
 }

-class NewTeamModal extends React.PureComponent<Props, State> {
+class NewServerModal extends React.PureComponent<Props, State> {
    wasShown?: boolean;
-    teamUrlInputRef?: HTMLInputElement;
+    serverUrlInputRef?: HTMLInputElement;

    static defaultProps = {
        restoreFocus: true,
@@ -44,90 +44,90 @@ class NewTeamModal extends React.PureComponent<Props, State> {

        this.wasShown = false;
        this.state = {
-            teamName: '',
-            teamUrl: '',
-            teamOrder: props.currentOrder || 0,
+            serverName: '',
+            serverUrl: '',
+            serverOrder: props.currentOrder || 0,
            saveStarted: false,
        };
    }

    initializeOnShow() {
        this.setState({
-            teamName: this.props.team ? this.props.team.name : '',
-            teamUrl: this.props.team ? this.props.team.url : '',
-            teamId: this.props.team?.id,
+            serverName: this.props.server ? this.props.server.name : '',
+            serverUrl: this.props.server ? this.props.server.url : '',
+            serverId: this.props.server?.id,
            saveStarted: false,
        });
    }

-    getTeamNameValidationError() {
+    getServerNameValidationError() {
        if (!this.state.saveStarted) {
            return null;
        }
-        if (this.props.currentTeams) {
-            const currentTeams = [...this.props.currentTeams];
-            if (currentTeams.find((team) => team.id !== this.state.teamId && team.name === this.state.teamName)) {
+        if (this.props.currentServers) {
+            const currentServers = [...this.props.currentServers];
+            if (currentServers.find((server) => server.id !== this.state.serverId && server.name === this.state.serverName)) {
                return (
                    <FormattedMessage
-                        id='renderer.components.newTeamModal.error.serverNameExists'
+                        id='renderer.components.newServerModal.error.serverNameExists'
                        defaultMessage='A server with the same name already exists.'
                    />
                );
            }
        }
-        return this.state.teamName.length > 0 ? null : (
+        return this.state.serverName.length > 0 ? null : (
            <FormattedMessage
-                id='renderer.components.newTeamModal.error.nameRequired'
+                id='renderer.components.newServerModal.error.nameRequired'
                defaultMessage='Name is required.'
            />
        );
    }

-    getTeamNameValidationState() {
-        return this.getTeamNameValidationError() === null ? null : 'error';
+    getServerNameValidationState() {
+        return this.getServerNameValidationError() === null ? null : 'error';
    }

-    handleTeamNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleServerNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({
-            teamName: e.target.value,
+            serverName: e.target.value,
        });
    }

-    getTeamUrlValidationError() {
+    getServerUrlValidationError() {
        if (!this.state.saveStarted) {
            return null;
        }
-        if (this.props.currentTeams) {
-            const currentTeams = [...this.props.currentTeams];
-            if (currentTeams.find((team) => team.id !== this.state.teamId && team.url === this.state.teamUrl)) {
+        if (this.props.currentServers) {
+            const currentServers = [...this.props.currentServers];
+            if (currentServers.find((server) => server.id !== this.state.serverId && server.url === this.state.serverUrl)) {
                return (
                    <FormattedMessage
-                        id='renderer.components.newTeamModal.error.serverUrlExists'
+                        id='renderer.components.newServerModal.error.serverUrlExists'
                        defaultMessage='A server with the same URL already exists.'
                    />
                );
            }
        }
-        if (this.state.teamUrl.length === 0) {
+        if (this.state.serverUrl.length === 0) {
            return (
                <FormattedMessage
-                    id='renderer.components.newTeamModal.error.urlRequired'
+                    id='renderer.components.newServerModal.error.urlRequired'
                    defaultMessage='URL is required.'
                />
            );
        }
-        if (!(/^https?:\/\/.*/).test(this.state.teamUrl.trim())) {
+        if (!(/^https?:\/\/.*/).test(this.state.serverUrl.trim())) {
            return (
                <FormattedMessage
-                    id='renderer.components.newTeamModal.error.urlNeedsHttp'
+                    id='renderer.components.newServerModal.error.urlNeedsHttp'
                    defaultMessage='URL should start with http:// or https://.'
                />
            );
        }
-        if (!isValidURL(this.state.teamUrl.trim())) {
+        if (!isValidURL(this.state.serverUrl.trim())) {
            return (
                <FormattedMessage
-                    id='renderer.components.newTeamModal.error.urlIncorrectFormatting'
+                    id='renderer.components.newServerModal.error.urlIncorrectFormatting'
                    defaultMessage='URL is not formatted correctly.'
                />
            );
@@ -135,32 +135,32 @@ class NewTeamModal extends React.PureComponent<Props, State> {
        return null;
    }

-    getTeamUrlValidationState() {
-        return this.getTeamUrlValidationError() === null ? null : 'error';
+    getServerUrlValidationState() {
+        return this.getServerUrlValidationError() === null ? null : 'error';
    }

-    handleTeamUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const teamUrl = e.target.value;
-        this.setState({teamUrl});
+    handleServerUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const serverUrl = e.target.value;
+        this.setState({serverUrl});
    }

-    addProtocolToUrl = (teamUrl: string): Promise<void> => {
-        if (teamUrl.startsWith('http://') || teamUrl.startsWith('https://')) {
+    addProtocolToUrl = (serverUrl: string): Promise<void> => {
+        if (serverUrl.startsWith('http://') || serverUrl.startsWith('https://')) {
            return Promise.resolve(undefined);
        }

-        return window.desktop.modals.pingDomain(teamUrl).
+        return window.desktop.modals.pingDomain(serverUrl).
            then((result: string) => {
-                this.setState({teamUrl: `${result}://${this.state.teamUrl}`});
+                this.setState({serverUrl: `${result}://${this.state.serverUrl}`});
            }).
            catch(() => {
-                console.error(`Could not ping url: ${teamUrl}`);
+                console.error(`Could not ping url: ${serverUrl}`);
            });
    }

    getError() {
-        const nameError = this.getTeamNameValidationError();
-        const urlError = this.getTeamUrlValidationError();
+        const nameError = this.getServerNameValidationError();
+        const urlError = this.getServerUrlValidationError();

        if (nameError && urlError) {
            return (
@@ -179,20 +179,20 @@ class NewTeamModal extends React.PureComponent<Props, State> {
    }

    validateForm() {
-        return this.getTeamNameValidationState() === null &&
-            this.getTeamUrlValidationState() === null;
+        return this.getServerNameValidationState() === null &&
+            this.getServerUrlValidationState() === null;
    }

    save = async () => {
-        await this.addProtocolToUrl(this.state.teamUrl);
+        await this.addProtocolToUrl(this.state.serverUrl);
        this.setState({
            saveStarted: true,
        }, () => {
            if (this.validateForm()) {
                this.props.onSave?.({
-                    url: this.state.teamUrl,
-                    name: this.state.teamName,
-                    id: this.state.teamId,
+                    url: this.state.serverUrl,
+                    name: this.state.serverName,
+                    id: this.state.serverId,
                });
            }
        });
@@ -219,14 +219,14 @@ class NewTeamModal extends React.PureComponent<Props, State> {
        if (this.props.editMode) {
            return (
                <FormattedMessage
-                    id='renderer.components.newTeamModal.title.edit'
+                    id='renderer.components.newServerModal.title.edit'
                    defaultMessage='Edit Server'
                />
            );
        }
        return (
            <FormattedMessage
-                id='renderer.components.newTeamModal.title.add'
+                id='renderer.components.newServerModal.title.add'
                defaultMessage='Add Server'
            />
        );
@@ -241,11 +241,11 @@ class NewTeamModal extends React.PureComponent<Props, State> {
        return (
            <Modal
                bsClass='modal'
-                className='NewTeamModal'
+                className='NewServerModal'
                show={this.props.show}
                id='newServerModal'
                enforceFocus={true}
-                onEntered={() => this.teamUrlInputRef?.focus()}
+                onEntered={() => this.serverUrlInputRef?.focus()}
                onHide={this.props.onClose}
                restoreFocus={this.props.restoreFocus}
                onKeyDown={(e: React.KeyboardEvent) => {
@@ -272,58 +272,58 @@ class NewTeamModal extends React.PureComponent<Props, State> {
                        <FormGroup>
                            <FormLabel>
                                <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverURL'
+                                    id='renderer.components.newServerModal.serverURL'
                                    defaultMessage='Server URL'
                                />
                            </FormLabel>
                            <FormControl
-                                id='teamUrlInput'
+                                id='serverUrlInput'
                                type='text'
-                                value={this.state.teamUrl}
+                                value={this.state.serverUrl}
                                placeholder='https://example.com'
-                                onChange={this.handleTeamUrlChange}
+                                onChange={this.handleServerUrlChange}
                                onClick={(e: React.MouseEvent<HTMLInputElement>) => {
                                    e.stopPropagation();
                                }}
                                ref={(ref: HTMLInputElement) => {
-                                    this.teamUrlInputRef = ref;
+                                    this.serverUrlInputRef = ref;
                                    if (this.props.setInputRef) {
                                        this.props.setInputRef(ref);
                                    }
                                }}
-                                isInvalid={Boolean(this.getTeamUrlValidationState())}
+                                isInvalid={Boolean(this.getServerUrlValidationState())}
                                autoFocus={true}
                            />
                            <FormControl.Feedback/>
                            <FormText>
                                <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverURL.description'
+                                    id='renderer.components.newServerModal.serverURL.description'
                                    defaultMessage='The URL of your Mattermost server. Must start with http:// or https://.'
                                />
                            </FormText>
                        </FormGroup>
-                        <FormGroup className='NewTeamModal-noBottomSpace'>
+                        <FormGroup className='NewServerModal-noBottomSpace'>
                            <FormLabel>
                                <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverDisplayName'
+                                    id='renderer.components.newServerModal.serverDisplayName'
                                    defaultMessage='Server Display Name'
                                />
                            </FormLabel>
                            <FormControl
-                                id='teamNameInput'
+                                id='serverNameInput'
                                type='text'
-                                value={this.state.teamName}
-                                placeholder={this.props.intl.formatMessage({id: 'renderer.components.newTeamModal.serverDisplayName', defaultMessage: 'Server Display Name'})}
-                                onChange={this.handleTeamNameChange}
+                                value={this.state.serverName}
+                                placeholder={this.props.intl.formatMessage({id: 'renderer.components.newServerModal.serverDisplayName', defaultMessage: 'Server Display Name'})}
+                                onChange={this.handleServerNameChange}
                                onClick={(e: React.MouseEvent<HTMLInputElement>) => {
                                    e.stopPropagation();
                                }}
-                                isInvalid={Boolean(this.getTeamNameValidationState())}
+                                isInvalid={Boolean(this.getServerNameValidationState())}
                            />
                            <FormControl.Feedback/>
-                            <FormText className='NewTeamModal-noBottomSpace'>
+                            <FormText className='NewServerModal-noBottomSpace'>
                                <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverDisplayName.description'
+                                    id='renderer.components.newServerModal.serverDisplayName.description'
                                    defaultMessage='The name of the server displayed on your desktop app tab bar.'
                                />
                            </FormText>
@@ -367,4 +367,4 @@ class NewTeamModal extends React.PureComponent<Props, State> {
    }
 }

-export default injectIntl(NewTeamModal);
+export default injectIntl(NewServerModal);
--- a/src/renderer/components/ServerDropdownButton.tsx
+++ b/src/renderer/components/ServerDropdownButton.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import React, {useEffect} from 'react';
 import {FormattedMessage} from 'react-intl';

-import '../css/components/TeamDropdownButton.scss';
+import '../css/components/ServerDropdownButton.scss';

 type Props = {
    isDisabled?: boolean;
@@ -16,7 +16,7 @@ type Props = {
    darkMode: boolean;
 }

-const TeamDropdownButton: React.FC<Props> = (props: Props) => {
+const ServerDropdownButton: React.FC<Props> = (props: Props) => {
    const {isDisabled, activeServerName, totalMentionCount, hasUnreads, isMenuOpen, darkMode} = props;
    const buttonRef: React.RefObject<HTMLButtonElement> = React.createRef();

@@ -30,22 +30,22 @@ const TeamDropdownButton: React.FC<Props> = (props: Props) => {
        event.preventDefault();
        event.stopPropagation();
        if (isMenuOpen) {
-            window.desktop.closeTeamsDropdown();
+            window.desktop.closeServersDropdown();
        } else {
-            window.desktop.openTeamsDropdown();
+            window.desktop.openServersDropdown();
        }
    };

    let badgeDiv: React.ReactNode;
    if (totalMentionCount > 0) {
        badgeDiv = (
-            <div className='TeamDropdownButton__badge-count'>
+            <div className='ServerDropdownButton__badge-count'>
                <span>{totalMentionCount > 99 ? '99+' : totalMentionCount}</span>
            </div>
        );
    } else if (hasUnreads) {
        badgeDiv = (
-            <div className='TeamDropdownButton__badge-unreads'/>
+            <div className='ServerDropdownButton__badge-unreads'/>
        );
    }

@@ -53,7 +53,7 @@ const TeamDropdownButton: React.FC<Props> = (props: Props) => {
        <button
            ref={buttonRef}
            disabled={isDisabled}
-            className={classNames('TeamDropdownButton', {
+            className={classNames('ServerDropdownButton', {
                disabled: isDisabled,
                isMenuOpen,
                darkMode,
@@ -63,14 +63,14 @@ const TeamDropdownButton: React.FC<Props> = (props: Props) => {
                event.stopPropagation();
            }}
        >
-            <div className='TeamDropdownButton__badge'>
+            <div className='ServerDropdownButton__badge'>
                <i className='icon-server-variant'/>
                {badgeDiv}
            </div>
            {activeServerName && <span>{activeServerName}</span>}
            {!activeServerName &&
                <FormattedMessage
-                    id='renderer.components.teamDropdownButton.noServersConfigured'
+                    id='renderer.components.serverDropdownButton.noServersConfigured'
                    defaultMessage='No servers configured'
                />
            }
@@ -79,4 +79,4 @@ const TeamDropdownButton: React.FC<Props> = (props: Props) => {
    );
 };

-export default TeamDropdownButton;
+export default ServerDropdownButton;
--- a/src/renderer/components/TabBar.tsx
+++ b/src/renderer/components/TabBar.tsx
@@ -8,9 +8,9 @@ import {DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDra
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl';
 import classNames from 'classnames';

-import {MattermostTab} from 'types/config';
+import {UniqueView} from 'types/config';

-import {TabType, canCloseTab, getTabDisplayName} from 'common/tabs/TabView';
+import {ViewType, canCloseView, getViewDisplayName} from 'common/views/View';

 type Props = {
    activeTabId?: string;
@@ -19,7 +19,7 @@ type Props = {
    isDarkMode: boolean;
    onSelect: (id: string) => void;
    onCloseTab: (id: string) => void;
-    tabs: MattermostTab[];
+    tabs: UniqueView[];
    sessionsExpired: Record<string, boolean>;
    unreadCounts: Record<string, boolean>;
    mentionCounts: Record<string, number>;
@@ -80,7 +80,7 @@ class TabBar extends React.PureComponent<Props> {
            return (
                <Draggable
                    key={tab.id}
-                    draggableId={`teamTabItem-${tab.id}`}
+                    draggableId={`serverTabItem-${tab.id}`}
                    index={index}
                >
                    {(provided, snapshot) => {
@@ -98,10 +98,10 @@ class TabBar extends React.PureComponent<Props> {
                            <NavItem
                                ref={provided.innerRef}
                                as='li'
-                                id={`teamTabItem${index}`}
+                                id={`serverTabItem${index}`}
                                draggable={false}
-                                title={this.props.intl.formatMessage({id: `common.tabs.${tab.name}`, defaultMessage: getTabDisplayName(tab.name as TabType)})}
-                                className={classNames('teamTabItem', {
+                                title={this.props.intl.formatMessage({id: `common.tabs.${tab.name}`, defaultMessage: getViewDisplayName(tab.name as ViewType)})}
+                                className={classNames('serverTabItem', {
                                    active: this.props.activeTabId === tab.id,
                                    dragging: snapshot.isDragging,
                                })}
@@ -121,12 +121,12 @@ class TabBar extends React.PureComponent<Props> {
                                    <div className='TabBar-tabSeperator'>
                                        <FormattedMessage
                                            id={`common.tabs.${tab.name}`}
-                                            defaultMessage={getTabDisplayName(tab.name as TabType)}
+                                            defaultMessage={getViewDisplayName(tab.name as ViewType)}
                                        />
                                        { badgeDiv }
-                                        {canCloseTab(tab.name as TabType) &&
+                                        {canCloseView(tab.name as ViewType) &&
                                            <button
-                                                className='teamTabItem__close'
+                                                className='serverTabItem__close'
                                                onClick={this.onCloseTab(tab.id!)}
                                            >
                                                <i className='icon-close'/>