Add daita label to filters in location selector

5 files changed, 55 insertions, 22 deletions

diff --git a/gui/src/main/daemon-rpc.ts b/gui/src/main/daemon-rpc.ts
index 91c63d268c..ba913fea87 100644
--- a/gui/src/main/daemon-rpc.ts
+++ b/gui/src/main/daemon-rpc.ts
@@ -857,9 +857,7 @@ function convertFromRelayList(relayList: grpcTypes.RelayList): IRelayListWithEnd
     relayList: {
       countries: relayList
         .getCountriesList()
-        .map((country: grpcTypes.RelayListCountry) =>
-          convertFromRelayListCountry(country.toObject()),
-        ),
+        .map((country: grpcTypes.RelayListCountry) => convertFromRelayListCountry(country)),
     },
     wireguardEndpointData: convertWireguardEndpointData(relayList.getWireguard()!),
   };
@@ -874,26 +872,37 @@ function convertWireguardEndpointData(
   };
 }
 
-function convertFromRelayListCountry(
-  country: grpcTypes.RelayListCountry.AsObject,
-): IRelayListCountry {
+function convertFromRelayListCountry(country: grpcTypes.RelayListCountry): IRelayListCountry {
+  const countryObject = country.toObject();
   return {
-    ...country,
-    cities: country.citiesList.map(convertFromRelayListCity),
+    ...countryObject,
+    cities: country.getCitiesList().map(convertFromRelayListCity),
   };
 }
 
-function convertFromRelayListCity(city: grpcTypes.RelayListCity.AsObject): IRelayListCity {
+function convertFromRelayListCity(city: grpcTypes.RelayListCity): IRelayListCity {
+  const cityObject = city.toObject();
   return {
-    ...city,
-    relays: city.relaysList.map(convertFromRelayListRelay),
+    ...cityObject,
+    relays: city.getRelaysList().map(convertFromRelayListRelay),
   };
 }
 
-function convertFromRelayListRelay(relay: grpcTypes.Relay.AsObject): IRelayListHostname {
+function convertFromRelayListRelay(relay: grpcTypes.Relay): IRelayListHostname {
+  const relayObject = relay.toObject();
+
+  let daita = false;
+  if (relayObject.endpointType === grpcTypes.Relay.RelayType.WIREGUARD) {
+    const endpointDataU8 = relay.getEndpointData()?.getValue_asU8();
+    if (endpointDataU8) {
+      daita = grpcTypes.WireguardRelayEndpointData.deserializeBinary(endpointDataU8).getDaita();
+    }
+  }
+
   return {
-    ...relay,
-    endpointType: convertFromRelayType(relay.endpointType),
+    ...relayObject,
+    endpointType: convertFromRelayType(relayObject.endpointType),
+    daita,
   };
 }
 
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 892df0afbc..8e59e2c30c 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -557,7 +557,7 @@ function MtuSetting() {
 
 function DaitaSettings() {
   const { setDaitaSettings } = useAppContext();
-  const daita = useSelector((state) => state.settings.wireguard.daita);
+  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
 
   const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean();
 
@@ -584,13 +584,25 @@ function DaitaSettings() {
               <YellowLabel>{messages.gettext('BETA')}</YellowLabel>
             </Cell.InputLabel>
           </AriaLabel>
-          <InfoButton
-            message={messages.pgettext(
-              'wireguard-settings-view',
-              'When this feature is enabled it stops the device from contacting certain domains or websites known for distributing ads, malware, trackers and more.',
-            )}></InfoButton>
+          <InfoButton>
+            <ModalMessage>
+              {
+                // TODO: These texts need to be polished
+                messages.pgettext(
+                  'wireguard-settings-view',
+                  'Enabling DAITA (Defence against AI Traffic Analysis) hides patterns in the VPN tunnel by generating dummy traffic and using a fixed packet size.',
+                )
+              }
+            </ModalMessage>
+            <ModalMessage>
+              {messages.pgettext(
+                'wireguard-settings-view',
+                'DAITA may cause significant overhead. We do not recommend enabling DAITA on a metered internet connection.',
+              )}
+            </ModalMessage>
+          </InfoButton>
           <AriaInput>
-            <Cell.Switch isOn={daita?.enabled ?? false} onChange={setDaita} />
+            <Cell.Switch isOn={daita} onChange={setDaita} />
           </AriaInput>
         </Cell.Container>
       </AriaInputGroup>
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 5ba0203939..e7bd4865cd 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -71,6 +71,7 @@ export default function SelectLocation() {
   const ownership = relaySettings?.ownership ?? Ownership.any;
   const providers = relaySettings?.providers ?? [];
   const filteredProviders = useFilteredProviders(providers, ownership);
+  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
 
   const [searchValue, setSearchValue] = useState('');
 
@@ -122,7 +123,7 @@ export default function SelectLocation() {
 
   const showOwnershipFilter = ownership !== Ownership.any;
   const showProvidersFilter = providers.length > 0;
-  const showFilters = showOwnershipFilter || showProvidersFilter;
+  const showFilters = showOwnershipFilter || showProvidersFilter || daita;
   return (
     <BackAction action={onClose}>
       <Layout>
@@ -220,6 +221,15 @@ export default function SelectLocation() {
                       </StyledClearFilterButton>
                     </StyledFilter>
                   )}
+
+                  {daita && (
+                    <StyledFilter>
+                      {sprintf(
+                        messages.pgettext('select-location-view', 'Setting: %(settingName)s'),
+                        { settingName: 'DAITA' },
+                      )}
+                    </StyledFilter>
+                  )}
                 </StyledFilterRow>
               )}
 
diff --git a/gui/src/shared/daemon-rpc-types.ts b/gui/src/shared/daemon-rpc-types.ts
index fa4f53090b..761dd01a4c 100644
--- a/gui/src/shared/daemon-rpc-types.ts
+++ b/gui/src/shared/daemon-rpc-types.ts
@@ -310,6 +310,7 @@ export interface IRelayListHostname {
   weight: number;
   owned: boolean;
   endpointType: RelayEndpointType;
+  daita: boolean;
 }
 
 export type RelayEndpointType = 'wireguard' | 'openvpn' | 'bridge';
diff --git a/gui/test/e2e/setup/main.ts b/gui/test/e2e/setup/main.ts
index c0114494d9..78da7f59b5 100644
--- a/gui/test/e2e/setup/main.ts
+++ b/gui/test/e2e/setup/main.ts
@@ -94,6 +94,7 @@ class ApplicationMain {
                 weight: 0,
                 owned: true,
                 endpointType: 'wireguard',
+                daita: false,
               },
             ],
           },