Add filter by ownership to GUI

1 files changed, 62 insertions, 6 deletions

diff --git a/gui/src/renderer/components/Filter.tsx b/gui/src/renderer/components/Filter.tsx
index 8a5f763a7c..a7b8272831 100644
--- a/gui/src/renderer/components/Filter.tsx
+++ b/gui/src/renderer/components/Filter.tsx
@@ -1,7 +1,8 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
+import { Ownership } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -9,7 +10,9 @@ import { useBoolean } from '../lib/utilityHooks';
 import { IReduxState, useSelector } from '../redux/store';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
+import { AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
+import Selector from './cell/Selector';
 import { normalText } from './common-styles';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
@@ -44,6 +47,13 @@ export default function Filter() {
   const initialProviders = useSelector(providersSelector);
   const [providers, setProviders] = useState<Record<string, boolean>>(initialProviders);
 
+  const initialOwnership = useSelector((state) =>
+    'normal' in state.settings.relaySettings
+      ? state.settings.relaySettings.normal.ownership
+      : Ownership.any,
+  );
+  const [ownership, setOwnership] = useState<Ownership>(initialOwnership);
+
   const onApply = useCallback(async () => {
     // If all providers are selected it's represented as an empty array.
     const selectedProviders = Object.values(providers).every((provider) => provider)
@@ -51,10 +61,10 @@ export default function Filter() {
       : Object.entries(providers)
           .filter(([, selected]) => selected)
           .map(([name]) => name);
-    await updateRelaySettings({ normal: { providers: selectedProviders } });
 
+    await updateRelaySettings({ normal: { providers: selectedProviders, ownership } });
     history.pop();
-  }, [providers, history, updateRelaySettings]);
+  }, [providers, ownership, history, updateRelaySettings]);
 
   return (
     <BackAction action={history.pop}>
@@ -72,8 +82,8 @@ export default function Filter() {
               </NavigationItems>
             </NavigationBar>
             <StyledNavigationScrollbars>
+              <FilterByOwnership ownership={ownership} setOwnership={setOwnership} />
               <FilterByProvider providers={providers} setProviders={setProviders} />
-              <FilterByOwnership />
             </StyledNavigationScrollbars>
             <StyledFooter>
               <AppButton.GreenButton
@@ -110,8 +120,54 @@ function providersSelector(state: IReduxState): Record<string, boolean> {
   );
 }
 
-function FilterByOwnership() {
-  return null;
+const StyledSelector = (styled(Selector)({
+  marginBottom: 0,
+}) as unknown) as new <T>() => Selector<T>;
+
+interface IFilterByOwnershipProps {
+  ownership: Ownership;
+  setOwnership: (ownership: Ownership) => void;
+}
+
+function FilterByOwnership(props: IFilterByOwnershipProps) {
+  const [expanded, , , toggleExpanded] = useBoolean(false);
+
+  const values = useMemo(
+    () => [
+      {
+        label: messages.gettext('Any'),
+        value: Ownership.any,
+      },
+      {
+        label: messages.pgettext('filter-view', 'Mullvad owned only'),
+        value: Ownership.mullvadOwned,
+      },
+      {
+        label: messages.pgettext('filter-view', 'Rented only'),
+        value: Ownership.rented,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <AriaInputGroup>
+      <Cell.CellButton onClick={toggleExpanded}>
+        <AriaLabel>
+          <Cell.Label>{messages.pgettext('filter-view', 'Ownership')}</Cell.Label>
+        </AriaLabel>
+        <ImageView
+          tintColor={colors.white80}
+          source={expanded ? 'icon-chevron-up' : 'icon-chevron-down'}
+          height={24}
+        />
+      </Cell.CellButton>
+
+      <Accordion expanded={expanded}>
+        <StyledSelector values={values} value={props.ownership} onSelect={props.setOwnership} />
+      </Accordion>
+    </AriaInputGroup>
+  );
 }
 
 interface IFilterByProviderProps {