feat(deps): update atlaskit/tabs to 8.0.8

There are (at least) two changes that are breaking:
- defaultTab is gone
- The re-rendering logic looks to have been re-written so that
  passing in a new array of tabs causes a re-render, which can
  reset the currently selected tab.

The fixes involved removing defaultTab from each tab configuration,
as it is no longer respected anyway. Also, instead of letting Tabs
be uncontrolled and allowing it to set its own selected, which
would result in the first tab automatically being selected on
Tabs re-render, use Tabs a controlled prop to dicate which
tab is selected; this is accomplished by specifying a selected
prop.

css/_atlaskit_overrides.scss

@@ -18,23 +18,23 @@
     /**
      * The text color of the selected tab and hovered tabs.
      */
-    li.bcVmZW,
-    li.bcVmZW:hover,
-    li.kheoEp:hover {
+    .bVobOt,
+    .bVobOt:hover,
+    .ebveIl:hover {
         color: #172B4D;
     }
 
     /**
      * The color of the inactive tab text.
      */
-    li.kheoEp {
+    .ebveIl {
         color: #FFFFFF;
     }
 
     /**
      * The color of the underline of a selected tab.
      */
-    li>span.kByArU {
+    .kByArU {
         background-color: #172B4D;
     }
 }
@@ -54,4 +54,4 @@
     .gBLqhw[data-role=droplistContent] {
         border: 1px solid #455166;
     }
-}
+}

package-lock.json

@@ -420,37 +420,16 @@
       }
     },
     "@atlaskit/tabs": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-4.0.1.tgz",
-      "integrity": "sha1-vM2WQ8nSO9kR+0GCK4U1oYJHHM8=",
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-8.0.8.tgz",
+      "integrity": "sha512-zNzF/vwazWWrSHLLleIVzuRszALy9xRN7jAaS/u1aaJwrGF5exYbtQ4RZQ9Bx46d7p4HLx3mb+/74GmR6yJ6Gw==",
       "requires": {
-        "@atlaskit/theme": "^2.0.0",
-        "@atlaskit/util-shared-styles": "^1.0.0",
+        "@atlaskit/analytics-next": "^3.0.6",
+        "@atlaskit/theme": "^6.0.2",
         "classnames": "^2.2.5",
         "css-element-queries": "^0.3.2",
         "debounce": "^1.0.0",
-        "keycode": "^2.1.4",
-        "prop-types": "^15.5.10",
-        "styled-components": "^1.3.0"
-      },
-      "dependencies": {
-        "@atlaskit/theme": {
-          "version": "2.4.1",
-          "resolved": "http://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
-          "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
-          "requires": {
-            "prop-types": "^15.5.10",
-            "styled-components": "1.4.6 - 3"
-          }
-        },
-        "@atlaskit/util-shared-styles": {
-          "version": "1.7.1",
-          "resolved": "https://registry.npmjs.org/@atlaskit/util-shared-styles/-/util-shared-styles-1.7.1.tgz",
-          "integrity": "sha1-CDLLbMF5dDHEzPZ9F4qkES3zBeI=",
-          "requires": {
-            "babel-runtime": "^6.11.6"
-          }
-        }
+        "keycode": "^2.1.7"
       }
     },
     "@atlaskit/tag": {
@@ -5229,9 +5208,9 @@
       "dev": true
     },
     "debounce": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
-      "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
     },
     "debug": {
       "version": "2.6.9",

package.json

@@ -30,7 +30,7 @@
     "@atlaskit/modal-dialog": "6.0.12",
     "@atlaskit/multi-select": "11.0.6",
     "@atlaskit/spinner": "9.0.8",
-    "@atlaskit/tabs": "4.0.1",
+    "@atlaskit/tabs": "8.0.8",
     "@atlaskit/theme": "6.0.2",
     "@atlaskit/tooltip": "12.0.14",
     "@microsoft/microsoft-graph-client": "1.1.0",

react/features/base/dialog/components/DialogWithTabs.web.js

@@ -53,6 +53,11 @@ export type Props = {
  */
 type State = {
 
+    /**
+     * The index of the tab that should be displayed.
+     */
+    selectedTab: number,
+
     /**
      * An array of the states of the tabs.
      */
@@ -74,9 +79,11 @@ class DialogWithTabs extends Component<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
+            selectedTab: this.props.defaultTab || 0,
             tabStates: this.props.tabs.map(tab => tab.props)
         };
         this._onSubmit = this._onSubmit.bind(this);
+        this._onTabSelected = this._onTabSelected.bind(this);
         this._onTabStateChange = this._onTabStateChange.bind(this);
     }
 
@@ -125,13 +132,29 @@ class DialogWithTabs extends Component<Props, State> {
         return { ...currentTabState };
     }
 
+    _onTabSelected: (Object, number) => void;
+
+    /**
+     * Callback invoked when the desired tab to display should be changed.
+     *
+     * @param {Object} tab - The configuration passed into atlaskit tabs to
+     * describe how to display the selected tab.
+     * @param {number} tabIndex - The index of the tab within the array of
+     * displayed tabs.
+     * @private
+     * @returns {void}
+     */
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
+        this.setState({ selectedTab: tabIndex });
+    }
+
     /**
      * Renders the tabs from the tab information passed on props.
      *
      * @returns {void}
      */
     _renderTabs() {
-        const { defaultTab = 0, t, tabs } = this.props;
+        const { t, tabs } = this.props;
 
         if (tabs.length === 1) {
             return this._renderTab({
@@ -143,6 +166,8 @@ class DialogWithTabs extends Component<Props, State> {
         if (tabs.length > 1) {
             return (
                 <Tabs
+                    onSelect = { this._onTabSelected }
+                    selected = { this.state.selectedTab }
                     tabs = {
                         tabs.map(({ component, label, styles }, idx) => {
                             return {
@@ -151,7 +176,6 @@ class DialogWithTabs extends Component<Props, State> {
                                     styles,
                                     tabId: idx
                                 }),
-                                defaultSelected: defaultTab === idx,
                                 label: t(label)
                             };
                         })

react/features/desktop-picker/components/DesktopPicker.js

@@ -81,6 +81,7 @@ class DesktopPicker extends Component<*, *> {
 
     state = {
         selectedSource: {},
+        selectedTab: 0,
         sources: {},
         types: []
     };
@@ -283,15 +284,19 @@ class DesktopPicker extends Component<*, *> {
      * Stores the selected tab and updates the selected source via
      * {@code _getSelectedSource}.
      *
-     * @param {int} idx - The index of the selected tab.
+     * @param {Object} tab - The configuration passed into atlaskit tabs to
+     * describe how to display the selected tab.
+     * @param {number} tabIndex - The index of the tab within the array of
+     * displayed tabs.
      * @returns {void}
      */
-    _onTabSelected(idx) {
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
         const { types, sources } = this.state;
 
-        this._selectedTabType = types[idx];
+        this._selectedTabType = types[tabIndex];
         this.setState({
-            selectedSource: this._getSelectedSource(sources)
+            selectedSource: this._getSelectedSource(sources),
+            selectedTab: tabIndex
         });
     }
 
@@ -315,7 +320,6 @@ class DesktopPicker extends Component<*, *> {
                             selectedSourceId = { selectedSource.id }
                             sources = { sources[type] }
                             type = { type } />,
-                        defaultSelected: type === DEFAULT_TAB_TYPE,
                         label: t(TAB_LABELS[type])
                     };
                 });
@@ -323,6 +327,7 @@ class DesktopPicker extends Component<*, *> {
         return (
             <Tabs
                 onSelect = { this._onTabSelected }
+                selected = { this.state.selectedTab }
                 tabs = { tabs } />);
     }
 

react/features/device-selection/components/AudioInputPreview.js

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 
 import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';
 
 /**
  * React component for displaying a audio level meter for a JitsiLocalTrack.
  */
-class AudioInputPreview extends PureComponent {
+class AudioInputPreview extends Component {
     /**
      * AudioInputPreview component's property types.
      *
@@ -53,8 +53,10 @@ class AudioInputPreview extends PureComponent {
      * @returns {void}
      */
     componentWillReceiveProps(nextProps) {
-        this._listenForAudioUpdates(nextProps.track);
-        this._updateAudioLevel(0);
+        if (nextProps.track !== this.props.track) {
+            this._listenForAudioUpdates(nextProps.track);
+            this._updateAudioLevel(0);
+        }
     }
 
     /**

react/features/welcome/components/WelcomePage.web.js

@@ -43,7 +43,8 @@ class WelcomePage extends AbstractWelcomePage {
             ...this.state,
 
             generateRoomnames:
-                interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE
+                interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE,
+            selectedTab: 0
         };
 
         /**
@@ -70,6 +71,7 @@ class WelcomePage extends AbstractWelcomePage {
         this._onRoomChange = this._onRoomChange.bind(this);
         this._setAdditionalContentRef
             = this._setAdditionalContentRef.bind(this);
+        this._onTabSelected = this._onTabSelected.bind(this);
     }
 
     /**
@@ -198,6 +200,20 @@ class WelcomePage extends AbstractWelcomePage {
         super._onRoomChange(event.target.value);
     }
 
+    /**
+     * Callback invoked when the desired tab to display should be changed.
+     *
+     * @param {Object} tab - The configuration passed into atlaskit tabs to
+     * describe how to display the selected tab.
+     * @param {number} tabIndex - The index of the tab within the array of
+     * displayed tabs.
+     * @private
+     * @returns {void}
+     */
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
+        this.setState({ selectedTab: tabIndex });
+    }
+
     /**
      * Renders tabs to show previous meetings and upcoming calendar events. The
      * tabs are purposefully hidden on mobile browsers.
@@ -219,8 +235,7 @@ class WelcomePage extends AbstractWelcomePage {
         if (CalendarList) {
             tabs.push({
                 label: t('welcomepage.calendar'),
-                content: <CalendarList />,
-                defaultSelected: true
+                content: <CalendarList />
             });
         }
 
@@ -235,7 +250,10 @@ class WelcomePage extends AbstractWelcomePage {
                 <div className = 'welcome-page-settings'>
                     <SettingsButton defaultTab = { SETTINGS_TABS.CALENDAR } />
                 </div>
-                <Tabs tabs = { tabs } />
+                <Tabs
+                    onSelect = { this._onTabSelected }
+                    selected = { this.state.selectedTab }
+                    tabs = { tabs } />
             </div>);
     }