Merge branch 'clarify-automatic-bridge-selection'

2 files changed, 66 insertions, 23 deletions

diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 0092315e7a..40810a8e8a 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -1079,10 +1079,6 @@ msgid "%(location)s (%(info)s)"
 msgstr ""
 
 msgctxt "select-location-view"
-msgid "Closest to exit server"
-msgstr ""
-
-msgctxt "select-location-view"
 msgid "Entry"
 msgstr ""
 
@@ -1108,6 +1104,10 @@ msgid "Select location"
 msgstr ""
 
 msgctxt "select-location-view"
+msgid "The app selects a random bridge server, but servers have a higher probability the closer they are to you."
+msgstr ""
+
+msgctxt "select-location-view"
 msgid "While connected, your traffic will be routed through two secure locations, the entry point (a bridge server) and the exit point (a VPN server)."
 msgstr ""
 
diff --git a/gui/src/renderer/components/BridgeLocations.tsx b/gui/src/renderer/components/BridgeLocations.tsx
index a62368e166..9a185915c8 100644
--- a/gui/src/renderer/components/BridgeLocations.tsx
+++ b/gui/src/renderer/components/BridgeLocations.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react';
+import styled from 'styled-components';
+import { colors } from '../../config.json';
 import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
+import { useBoolean } from '../lib/utilityHooks';
 import { IRelayLocationRedux } from '../redux/settings/reducers';
+import * as AppButton from './AppButton';
+import ImageView from './ImageView';
 import LocationList, {
   LocationSelection,
   LocationSelectionType,
@@ -10,11 +15,21 @@ import LocationList, {
   SpecialLocationIcon,
   SpecialLocations,
 } from './LocationList';
+import { ModalAlert, ModalAlertType } from './Modal';
 
 export enum SpecialBridgeLocationType {
   closestToExit = 0,
 }
 
+const StyledInfoIcon = styled(ImageView)({
+  marginRight: '9px',
+});
+
+const StyledAutomaticLabel = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
 interface IBridgeLocationsProps {
   source: IRelayLocationRedux[];
   locale: string;
@@ -30,6 +45,8 @@ const BridgeLocations = React.forwardRef(function BridgeLocationsT(
   props: IBridgeLocationsProps,
   ref: React.Ref<LocationList<SpecialBridgeLocationType>>,
 ) {
+  const [automaticInfoVisible, showAutomaticInfo, hideAutomaticInfo] = useBoolean(false);
+
   const selectedValue:
     | LocationSelection<SpecialBridgeLocationType>
     | undefined = props.selectedValue
@@ -39,26 +56,52 @@ const BridgeLocations = React.forwardRef(function BridgeLocationsT(
     : undefined;
 
   return (
-    <LocationList
-      ref={ref}
-      defaultExpandedLocations={props.defaultExpandedLocations}
-      selectedValue={selectedValue}
-      selectedElementRef={props.selectedElementRef}
-      onSelect={props.onSelect}>
-      <SpecialLocations>
-        <SpecialLocation
-          icon={SpecialLocationIcon.geoLocation}
-          value={SpecialBridgeLocationType.closestToExit}>
-          {messages.pgettext('select-location-view', 'Closest to exit server')}
-        </SpecialLocation>
-      </SpecialLocations>
-      <RelayLocations
-        source={props.source}
-        locale={props.locale}
-        onWillExpand={props.onWillExpand}
-        onTransitionEnd={props.onTransitionEnd}
+    <>
+      <LocationList
+        ref={ref}
+        defaultExpandedLocations={props.defaultExpandedLocations}
+        selectedValue={selectedValue}
+        selectedElementRef={props.selectedElementRef}
+        onSelect={props.onSelect}>
+        <SpecialLocations>
+          <SpecialLocation
+            icon={SpecialLocationIcon.geoLocation}
+            value={SpecialBridgeLocationType.closestToExit}>
+            <StyledAutomaticLabel>
+              {messages.gettext('Automatic')}
+              <StyledInfoIcon
+                source="icon-info"
+                width={18}
+                tintColor={colors.white}
+                tintHoverColor={colors.white80}
+                onClick={showAutomaticInfo}
+              />
+            </StyledAutomaticLabel>
+          </SpecialLocation>
+        </SpecialLocations>
+        <RelayLocations
+          source={props.source}
+          locale={props.locale}
+          onWillExpand={props.onWillExpand}
+          onTransitionEnd={props.onTransitionEnd}
+        />
+      </LocationList>
+
+      <ModalAlert
+        isOpen={automaticInfoVisible}
+        message={messages.pgettext(
+          'select-location-view',
+          'The app selects a random bridge server, but servers have a higher probability the closer they are to you.',
+        )}
+        type={ModalAlertType.info}
+        buttons={[
+          <AppButton.BlueButton key="back" onClick={hideAutomaticInfo}>
+            {messages.gettext('Got it!')}
+          </AppButton.BlueButton>,
+        ]}
+        close={hideAutomaticInfo}
       />
-    </LocationList>
+    </>
   );
 });