From 3c5017a66aaadf5373ffa00277a4626ae0fc7524 Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Mon, 8 Nov 2021 09:55:02 +0200
Subject: [PATCH] feat(connection-indicator): Add config option to disable
 indicator popover

---
 config.js                                     |  3 +
 .../components/web/ConnectionIndicator.js     | 58 +++++++++++++------
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/config.js b/config.js
index 15a5cc210..536fe06ac 100644
--- a/config.js
+++ b/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,
diff --git a/react/features/connection-indicator/components/web/ConnectionIndicator.js b/react/features/connection-indicator/components/web/ConnectionIndicator.js
index c82900cad..c5fcd9673 100644
--- a/react/features/connection-indicator/components/web/ConnectionIndicator.js
+++ b/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();
-        const indicatorContainerClassNames
-            = `connection-indicator indicator ${colorClass}`;
+        if (this.props._popoverDisabled) {
+            return this._renderIndicator();
+        }
 
         return (
             <Popover
@@ -171,15 +176,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
                 paddedContent = { true }
                 position = { statsPopoverPosition }
                 visible = { this.state.popoverVisible }>
-                <div className = 'popover-trigger'>
-                    <div
-                        className = { indicatorContainerClassNames }
-                        style = {{ fontSize: iconSize }}>
-                        <div className = 'connection indicatoricon'>
-                            { this._renderIcon() }
-                        </div>
-                    </div>
-                </div>
+                { this._renderIndicator() }
             </Popover>
         );
     }
@@ -316,17 +313,41 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
         ];
     }
 
-    _onShowPopover: () => void;
+  _onShowPopover: () => void;
 
-    /**
+  /**
      * Shows popover.
      *
      * @private
      * @returns {void}
      */
-    _onShowPopover() {
-        this.setState({ popoverVisible: true });
-    }
+  _onShowPopover() {
+      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
     };
 }