feat(connection-indicator): Add config option to disable indicator popover

config.js

@@ -648,6 +648,9 @@ var config = {
     // Enables sending participants' emails (if available) to callstats and other analytics
     // enableEmailInStats: false,
 
+    // When true, disables the connection indicator popover.
+    // disableConnectionIndicatorDetails: false,
+
     // Controls the percentage of automatic feedback shown to participants when callstats is enabled.
     // The default value is 100%. If set to 0, no automatic feedback will be requested
     // feedbackPercentage: 100,

react/features/connection-indicator/components/web/ConnectionIndicator.js

@@ -69,6 +69,11 @@ type Props = AbstractProps & {
      */
     _connectionIndicatorInactiveDisabled: boolean,
 
+    /**
+     * Wether the indicator popover is disabled.
+     */
+    _popoverDisabled: boolean,
+
     /**
      * Whether or not the component should ignore setting a visibility class for
      * hiding the component when the connection quality is not strong.
@@ -149,13 +154,13 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
      * @returns {ReactElement}
      */
     render() {
-        const { iconSize, enableStatsDisplay, participantId, statsPopoverPosition } = this.props;
+        const { enableStatsDisplay, participantId, statsPopoverPosition } = this.props;
         const visibilityClass = this._getVisibilityClass();
         const rootClassNames = `indicator-container ${visibilityClass}`;
 
-        const colorClass = this._getConnectionColorClass();
+        if (this.props._popoverDisabled) {
-        const indicatorContainerClassNames
+            return this._renderIndicator();
-            = `connection-indicator indicator ${colorClass}`;
+        }
 
         return (
             <Popover
@@ -171,15 +176,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
                 paddedContent = { true }
                 position = { statsPopoverPosition }
                 visible = { this.state.popoverVisible }>
-                <div className = 'popover-trigger'>
+                { this._renderIndicator() }
-                    <div
-                        className = { indicatorContainerClassNames }
-                        style = {{ fontSize: iconSize }}>
-                        <div className = 'connection indicatoricon'>
-                            { this._renderIcon() }
-                        </div>
-                    </div>
-                </div>
             </Popover>
         );
     }
@@ -316,17 +313,41 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
         ];
     }
 
-    _onShowPopover: () => void;
+  _onShowPopover: () => void;
 
-    /**
+  /**
      * Shows popover.
      *
      * @private
      * @returns {void}
      */
-    _onShowPopover() {
+  _onShowPopover() {
-        this.setState({ popoverVisible: true });
+      this.setState({ popoverVisible: true });
-    }
+  }
+
+
+  /**
+     * Creates a ReactElement for displaying the indicator (GSM bar).
+     *
+     * @returns {ReactElement}
+     */
+  _renderIndicator() {
+      const colorClass = this._getConnectionColorClass();
+      const indicatorContainerClassNames
+              = `connection-indicator indicator ${colorClass}`;
+
+      return (
+          <div className = 'popover-trigger'>
+              <div
+                  className = { indicatorContainerClassNames }
+                  style = {{ fontSize: this.props.iconSize }}>
+                  <div className = 'connection indicatoricon'>
+                      { this._renderIcon() }
+                  </div>
+              </div>
+          </div>
+      );
+  }
 }
 
 /**
@@ -344,6 +365,7 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
     return {
         _connectionIndicatorInactiveDisabled:
         Boolean(state['features/base/config'].connectionIndicators?.inactiveDisabled),
+        _popoverDisabled: state['features/base/config'].disableConnectionIndicatorDetails,
         _connectionStatus: participant?.connectionStatus
     };
 }