Migrate UI to use the new "active" flag in the relay list v3 schema

4 files changed, 8 insertions, 3 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 6f54281f3c..c8027223a0 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -555,14 +555,14 @@ export default class AppRenderer {
       .map((country) => ({
         name: country.name,
         code: country.code,
-        hasActiveRelays: country.cities.some((city) => city.relays.length > 0),
+        hasActiveRelays: country.cities.some((city) => city.relays.some((relay) => relay.active)),
         cities: country.cities
           .map((city) => ({
             name: city.name,
             code: city.code,
             latitude: city.latitude,
             longitude: city.longitude,
-            hasActiveRelays: city.relays.length > 0,
+            hasActiveRelays: city.relays.some((relay) => relay.active),
             relays: city.relays,
           }))
           .sort((cityA, cityB) => cityA.name.localeCompare(cityB.name)),
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index 418da66e94..72a3b64f75 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -84,6 +84,7 @@ export default class LocationList extends Component<IProps, IState> {
                       return (
                         <RelayRow
                           key={getLocationKey(relayLocation)}
+                          active={relay.active}
                           hostname={relay.hostname}
                           onSelect={this.handleSelection}
                           {...this.getCommonCellProps(relayLocation)}
diff --git a/gui/src/renderer/components/RelayRow.tsx b/gui/src/renderer/components/RelayRow.tsx
index 69f632e04e..5dff0a33f1 100644
--- a/gui/src/renderer/components/RelayRow.tsx
+++ b/gui/src/renderer/components/RelayRow.tsx
@@ -7,6 +7,7 @@ import RelayStatusIndicator from './RelayStatusIndicator';
 
 interface IProps {
   location: RelayLocation;
+  active: boolean;
   hostname: string;
   selected: boolean;
   onSelect?: (location: RelayLocation) => void;
@@ -30,6 +31,7 @@ export default class RelayRow extends Component<IProps> {
     return (
       oldProps.hostname === nextProps.hostname &&
       oldProps.selected === nextProps.selected &&
+      oldProps.active === nextProps.active &&
       compareRelayLocation(oldProps.location, nextProps.location)
     );
   }
@@ -43,8 +45,9 @@ export default class RelayRow extends Component<IProps> {
       <Cell.CellButton
         onPress={this.handlePress}
         cellHoverStyle={this.props.selected ? styles.selected : undefined}
+        disabled={!this.props.active}
         style={[styles.base, this.props.selected ? styles.selected : undefined]}>
-        <RelayStatusIndicator isActive={true} isSelected={this.props.selected} />
+        <RelayStatusIndicator isActive={this.props.active} isSelected={this.props.selected} />
 
         <Cell.Label>{this.props.hostname}</Cell.Label>
       </Cell.CellButton>
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 80cc2ee5c9..fed04b38e4 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -47,6 +47,7 @@ export interface IRelayLocationRelayRedux {
   hostname: string;
   ipv4AddrIn: string;
   includeInCountry: boolean;
+  active: boolean;
   weight: number;
 }