[MM-62650][MM-62651] Remove bootstrap/react-bootstrap from TabBar, MainPage (#3292)

src/renderer/components/ErrorView.tsx

@@ -8,6 +8,9 @@ import React from 'react';
 import {Container, Row, Col} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
+// TODO: Will remove in https://mattermost.atlassian.net/browse/MM-62724
+import 'bootstrap/dist/css/bootstrap.min.css';
+
 type Props = {
     errorInfo?: string;
     url?: string;

src/renderer/components/MainPage.tsx

@@ -5,7 +5,6 @@
 import classNames from 'classnames';
 import React, {Fragment} from 'react';
 import type {DropResult} from 'react-beautiful-dnd';
-import {Container, Row} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
 import {injectIntl} from 'react-intl';
 
@@ -433,7 +432,7 @@ class MainPage extends React.PureComponent<Props, State> {
         const activeServer = this.state.servers.find((srv) => srv.id === this.state.activeServerId);
 
         const topRow = (
-            <Row
+            <div
                 className={topBarClassName}
                 onDoubleClick={this.handleDoubleClick}
             >
@@ -489,7 +488,7 @@ class MainPage extends React.PureComponent<Props, State> {
                         <span style={{width: `${window.innerWidth - (window.navigator.windowControlsOverlay?.getTitlebarAreaRect().width ?? 0)}px`}}/>
                     )}
                 </div>
-            </Row>
+            </div>
         );
 
         const views = () => {
@@ -526,9 +525,9 @@ class MainPage extends React.PureComponent<Props, State> {
 
         const viewsRow = (
             <Fragment>
-                <Row>
+                <div>
                     {views()}
-                </Row>
+                </div>
             </Fragment>);
 
         return (
@@ -536,10 +535,10 @@ class MainPage extends React.PureComponent<Props, State> {
                 className='MainPage'
                 onClick={this.focusOnWebView}
             >
-                <Container fluid={true}>
+                <div>
                     {topRow}
                     {viewsRow}
-                </Container>
+                </div>
             </div>
         );
     }

src/renderer/components/TabBar.tsx

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import React from 'react';
 import type {DraggingStyle, DropResult, NotDraggingStyle} from 'react-beautiful-dnd';
 import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
-import {Nav, NavItem, NavLink} from 'react-bootstrap';
 import type {IntlShape} from 'react-intl';
 import {FormattedMessage, injectIntl} from 'react-intl';
 
@@ -119,9 +118,8 @@ class TabBar extends React.PureComponent<Props, State> {
                         }
 
                         return (
-                            <NavItem
+                            <li
                                 ref={provided.innerRef}
-                                as='li'
                                 id={`serverTabItem${index}`}
                                 draggable={false}
                                 title={this.props.intl.formatMessage({id: `common.tabs.${tab.name}`, defaultMessage: getViewDisplayName(tab.name as ViewType)})}
@@ -133,14 +131,16 @@ class TabBar extends React.PureComponent<Props, State> {
                                 {...provided.dragHandleProps}
                                 style={getStyle(provided.draggableProps.style)}
                             >
-                                <NavLink
+                                <a
-                                    eventKey={index}
                                     draggable={false}
-                                    active={this.props.activeTabId === tab.id}
+                                    onClick={() => {
-                                    disabled={this.props.tabsDisabled}
+                                        if (!this.props.tabsDisabled) {
-                                    onSelect={() => {
+                                            this.props.onSelect(tab.id!);
-                                        this.props.onSelect(tab.id!);
+                                        }
                                     }}
+                                    className={classNames({
+                                        disabled: this.props.tabsDisabled,
+                                    })}
                                 >
                                     <div className='TabBar-tabSeperator'>
                                         <FormattedMessage
@@ -157,8 +157,8 @@ class TabBar extends React.PureComponent<Props, State> {
                                             </button>
                                         }
                                     </div>
-                                </NavLink>
+                                </a>
-                            </NavItem>
+                            </li>
                         );
                     }}
                 </Draggable>
@@ -176,19 +176,18 @@ class TabBar extends React.PureComponent<Props, State> {
                     direction='horizontal'
                 >
                     {(provided) => (
-                        <Nav
+                        <div
                             ref={provided.innerRef}
                             className={classNames('TabBar', {
                                 darkMode: this.props.isDarkMode,
                             })}
                             id={this.props.id}
-                            variant='tabs'
                             {...provided.droppableProps}
                         >
                             {tabs}
                             {this.props.isMenuOpen ? <span className='TabBar-nonDrag'/> : null}
                             {provided.placeholder}
-                        </Nav>
+                        </div>
                     )}
                 </Droppable>
             </DragDropContext>

src/renderer/css/components/ServerDropdownButton.scss

@@ -86,6 +86,7 @@
     top: -5px;
     right: -1px;
     border: 2px solid #efefef;
+    box-sizing: border-box;
 }
 
 .ServerDropdownButton.darkMode {

src/renderer/css/components/TabBar.css

@@ -7,6 +7,8 @@
   justify-content: flex-start;
   -webkit-app-region: drag;
   padding: 6px 8px;
+  margin-bottom: 0;
+  list-style: none;
 }
 
 .TabBar-nonDrag {
@@ -33,6 +35,8 @@
 }
 
 .TabBar>li>a {
+  display: block;
+  cursor: pointer;
   color: rgba(61,60,64,0.7);
   font-family: "Open Sans", sans-serif;
   font-weight: 600;
@@ -43,12 +47,24 @@
   border-radius: 4px;
   border: none !important;
   padding: 0;
+  text-decoration: none;
+}
+
+.TabBar>li>a.disabled {
+  color: #6c757d;
+  background-color: transparent;
+  pointer-events: none;
+  cursor: default;
 }
 
 .TabBar.darkMode>li>a {
   color: rgba(221,221,221,0.64);
 }
 
+.TabBar.darkMode>li>a.disabled {
+  color: #6c757d;
+}
+
 .TabBar>li>a:hover {
   background-color: rgba(255,255,255,0.56);
   text-decoration: none;

src/renderer/index.tsx

@@ -2,7 +2,6 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import 'bootstrap/dist/css/bootstrap.min.css';
 import 'renderer/css/index.css';
 
 import React from 'react';