Merge branch 'implement-feature-indicators-in-main-view-des-910'

gui/locales/messages.pot

@@ -2,6 +2,9 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
+msgid "%(amount)d more..."
+msgstr ""
+
 msgid "%(duration)s was added, account paid until %(expiry)s."
 msgstr ""
 
@@ -86,9 +89,15 @@ msgstr ""
 msgid "Connected"
 msgstr ""
 
+msgid "CONNECTED"
+msgstr ""
+
 msgid "Connecting"
 msgstr ""
 
+msgid "CONNECTING..."
+msgstr ""
+
 #. Creating a secure connection that isn't breakable by quantum computers.
 msgid "CREATING QUANTUM SECURE CONNECTION"
 msgstr ""
@@ -99,6 +108,11 @@ msgstr ""
 msgid "Custom"
 msgstr ""
 
+#. This refers to the Custom DNS setting in the VPN settings view. This is
+#. displayed when the feature is on.
+msgid "Custom DNS"
+msgstr ""
+
 msgid "Default"
 msgstr ""
 
@@ -120,10 +134,13 @@ msgstr ""
 msgid "Disconnected"
 msgstr ""
 
+msgid "DISCONNECTED"
+msgstr ""
+
 msgid "Disconnecting"
 msgstr ""
 
-msgid "Dismiss"
+msgid "DISCONNECTING..."
 msgstr ""
 
 msgid "Edit"
@@ -166,6 +183,11 @@ msgstr ""
 msgid "less than a day left"
 msgstr ""
 
+#. This refers to the multihop setting in the VPN settings view. This is
+#. displayed when the feature is on.
+msgid "Multihop"
+msgstr ""
+
 msgid "Name"
 msgstr ""
 
@@ -193,6 +215,11 @@ msgstr ""
 msgid "Port"
 msgstr ""
 
+#. This refers to the quantum resistance setting in the WireGuard settings view.
+#. This is displayed when the feature is on.
+msgid "Quantum resistance"
+msgstr ""
+
 #. The connection is secure and isn't breakable by quantum computers.
 msgid "QUANTUM SECURE CONNECTION"
 msgstr ""
@@ -559,10 +586,18 @@ msgctxt "connect-container"
 msgid "%(city)s (%(hostname)s)"
 msgstr ""
 
+msgctxt "connect-view"
+msgid "Active features"
+msgstr ""
+
 msgctxt "connect-view"
 msgid "Congrats!"
 msgstr ""
 
+msgctxt "connect-view"
+msgid "Connection details"
+msgstr ""
+
 msgctxt "connect-view"
 msgid "Disconnect"
 msgstr ""
@@ -635,12 +670,6 @@ msgctxt "connect-view"
 msgid "You’re all set!"
 msgstr ""
 
-#. %(hostname)s - The current server the app is connected to, e.g. "se-got-wg-001 using DAITA"
-#. %(daita)s - Will be replaced with "DAITA"
-msgctxt "connection-info"
-msgid "%(hostname)s using %(daita)s"
-msgstr ""
-
 #. The hostname line displayed below the country on the main screen
 #. Available placeholders:
 #. %(relay)s - the relay hostname
@@ -653,14 +682,6 @@ msgctxt "connection-info"
 msgid "%(relay)s via Custom bridge"
 msgstr ""
 
-#. The tunnel type line displayed below the hostname line on the main screen
-#. Available placeholders:
-#. %(tunnelType)s - the tunnel type, i.e OpenVPN
-#. %(bridgeType)s - the bridge type, i.e Shadowsocks
-msgctxt "connection-info"
-msgid "%(tunnelType)s via %(bridgeType)s"
-msgstr ""
-
 msgctxt "connection-info"
 msgid "In"
 msgstr ""
@@ -1751,7 +1772,7 @@ msgid "Update your kernel."
 msgstr ""
 
 msgctxt "tunnel-control"
-msgid "Secure my connection"
+msgid "Connect"
 msgstr ""
 
 msgctxt "tunnel-control"
@@ -2255,6 +2276,9 @@ msgstr ""
 msgid "Discard changes?"
 msgstr ""
 
+msgid "Dismiss"
+msgstr ""
+
 msgid "Edit custom lists"
 msgstr ""
 
@@ -2423,6 +2447,9 @@ msgstr ""
 msgid "Reset to default"
 msgstr ""
 
+msgid "Secure my connection"
+msgstr ""
+
 msgid "Secured"
 msgstr ""
 

gui/src/main/daemon-rpc.ts

@@ -29,8 +29,9 @@ import {
   DeviceEvent,
   DeviceState,
   DirectMethod,
-  ErrorState,
   ErrorStateCause,
+  ErrorStateDetails,
+  FeatureIndicator,
   FirewallPolicyError,
   FirewallPolicyErrorType,
   IAppVersionInfo,
@@ -980,6 +981,9 @@ function convertFromTunnelState(tunnelState: grpcTypes.TunnelState): TunnelState
         details:
           tunnelStateObject.connecting?.relayInfo &&
           convertFromTunnelStateRelayInfo(tunnelStateObject.connecting.relayInfo),
+        featureIndicators: convertFromFeatureIndicators(
+          tunnelStateObject.connecting?.featureIndicators?.activeFeaturesList,
+        ),
       };
     case grpcTypes.TunnelState.StateCase.CONNECTED: {
       const relayInfo =
@@ -989,13 +993,16 @@ function convertFromTunnelState(tunnelState: grpcTypes.TunnelState): TunnelState
         relayInfo && {
           state: 'connected',
           details: relayInfo,
+          featureIndicators: convertFromFeatureIndicators(
+            tunnelStateObject.connected?.featureIndicators?.activeFeaturesList,
+          ),
         }
       );
     }
   }
 }
 
-function convertFromTunnelStateError(state: grpcTypes.ErrorState.AsObject): ErrorState {
+function convertFromTunnelStateError(state: grpcTypes.ErrorState.AsObject): ErrorStateDetails {
   const baseError = {
     blockingError: state.blockingError && convertFromBlockingError(state.blockingError),
   };
@@ -1127,6 +1134,47 @@ function convertFromTunnelStateRelayInfo(
   return undefined;
 }
 
+function convertFromFeatureIndicators(
+  featureIndicators?: Array<grpcTypes.FeatureIndicator>,
+): Array<FeatureIndicator> | undefined {
+  return featureIndicators?.map(convertFromFeatureIndicator);
+}
+
+function convertFromFeatureIndicator(
+  featureIndicator: grpcTypes.FeatureIndicator,
+): FeatureIndicator {
+  switch (featureIndicator) {
+    case grpcTypes.FeatureIndicator.QUANTUM_RESISTANCE:
+      return FeatureIndicator.quantumResistance;
+    case grpcTypes.FeatureIndicator.MULTIHOP:
+      return FeatureIndicator.multihop;
+    case grpcTypes.FeatureIndicator.BRIDGE_MODE:
+      return FeatureIndicator.bridgeMode;
+    case grpcTypes.FeatureIndicator.SPLIT_TUNNELING:
+      return FeatureIndicator.splitTunneling;
+    case grpcTypes.FeatureIndicator.LOCKDOWN_MODE:
+      return FeatureIndicator.lockdownMode;
+    case grpcTypes.FeatureIndicator.UDP_2_TCP:
+      return FeatureIndicator.udp2tcp;
+    case grpcTypes.FeatureIndicator.LAN_SHARING:
+      return FeatureIndicator.lanSharing;
+    case grpcTypes.FeatureIndicator.DNS_CONTENT_BLOCKERS:
+      return FeatureIndicator.dnsContentBlockers;
+    case grpcTypes.FeatureIndicator.CUSTOM_DNS:
+      return FeatureIndicator.customDns;
+    case grpcTypes.FeatureIndicator.SERVER_IP_OVERRIDE:
+      return FeatureIndicator.serverIpOverride;
+    case grpcTypes.FeatureIndicator.CUSTOM_MTU:
+      return FeatureIndicator.customMtu;
+    case grpcTypes.FeatureIndicator.CUSTOM_MSS_FIX:
+      return FeatureIndicator.customMssFix;
+    case grpcTypes.FeatureIndicator.DAITA:
+      return FeatureIndicator.daita;
+    case grpcTypes.FeatureIndicator.SHADOWSOCKS:
+      return FeatureIndicator.shadowsocks;
+  }
+}
+
 function convertFromTunnelType(tunnelType: grpcTypes.TunnelType): TunnelType {
   const tunnelTypeMap: Record<grpcTypes.TunnelType, TunnelType> = {
     [grpcTypes.TunnelType.WIREGUARD]: 'wireguard',

gui/src/main/tunnel-state.ts

@@ -46,7 +46,7 @@ export default class TunnelStateHandler {
     this.setTunnelState(
       state === 'disconnecting'
         ? { state, details: 'nothing' as const, location: this.lastKnownDisconnectedLocation }
-        : { state },
+        : { state, featureIndicators: undefined },
     );
 
     this.tunnelStateFallbackScheduler.schedule(() => {

gui/src/renderer/app.tsx

@@ -783,11 +783,11 @@ export default class AppRenderer {
     batch(() => {
       switch (tunnelState.state) {
         case 'connecting':
-          actions.connection.connecting(tunnelState.details);
+          actions.connection.connecting(tunnelState.details, tunnelState.featureIndicators);
           break;
 
         case 'connected':
-          actions.connection.connected(tunnelState.details);
+          actions.connection.connected(tunnelState.details, tunnelState.featureIndicators);
           break;
 
         case 'disconnecting':

gui/src/renderer/components/Accordion.tsx

@@ -7,6 +7,7 @@ interface IProps {
   children?: React.ReactNode;
   onWillExpand?: (contentHeight: number) => void;
   onTransitionEnd?: () => void;
+  className?: string;
 }
 
 interface IState {
@@ -55,6 +56,7 @@ export default class Accordion extends React.Component<IProps, IState> {
     return (
       <Container
         ref={this.containerRef}
+        className={this.props.className}
         $height={this.state.containerHeight}
         $animationDuration={this.props.animationDuration}
         onTransitionEnd={this.onTransitionEnd}>

gui/src/renderer/components/AppRouter.tsx

@@ -8,7 +8,6 @@ import { ITransitionSpecification, transitions, useHistory } from '../lib/histor
 import { RoutePath } from '../lib/routes';
 import Account from './Account';
 import ApiAccessMethods from './ApiAccessMethods';
-import Connect from './Connect';
 import Debug from './Debug';
 import { DeviceRevokedView } from './DeviceRevokedView';
 import { EditApiAccessMethod } from './EditApiAccessMethod';
@@ -23,6 +22,7 @@ import ExpiredAccountErrorView from './ExpiredAccountErrorView';
 import Filter from './Filter';
 import Focus, { IFocusHandle } from './Focus';
 import Launch from './Launch';
+import MainView from './main-view/MainView';
 import OpenVpnSettings from './OpenVpnSettings';
 import ProblemReport from './ProblemReport';
 import SelectLanguage from './SelectLanguage';
@@ -71,7 +71,7 @@ export default function AppRouter() {
             <Route exact path={RoutePath.login} component={LoginPage} />
             <Route exact path={RoutePath.tooManyDevices} component={TooManyDevices} />
             <Route exact path={RoutePath.deviceRevoked} component={DeviceRevokedView} />
-            <Route exact path={RoutePath.main} component={Connect} />
+            <Route exact path={RoutePath.main} component={MainView} />
             <Route exact path={RoutePath.expired} component={ExpiredAccountErrorView} />
             <Route exact path={RoutePath.redeemVoucher} component={VoucherInput} />
             <Route exact path={RoutePath.voucherSuccess} component={VoucherVerificationSuccess} />