Fix display of proxy history and improve naming

mullvad · Feb 2, 2024 · 9e37ed5 · 9e37ed5
1 parent 4d701a8
commit 9e37ed5
Show file tree

Hide file tree

Showing 11 changed files with 219 additions and 131 deletions.
diff --git a/src/components/Location.vue b/src/components/Location.vue
@@ -9,14 +9,14 @@ import useListProxies from '@/composables/useListProxies';
 import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
 import useActiveTab from '@/composables/useActiveTab';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
 const { activeTabHost } = useActiveTab();
 const { hostProxySelect, toggleLocations } = useLocations();
 const { proxiesList } = useListProxies();
 const { setCurrentHostProxy, setGlobalProxy } = useSocksProxy();
-const { storeSocksProxyUsage } = useHistoricConnections();
+const { storeSocksProxyUsage } = useProxyHistory();
 
 const currentOrAllWebsites = computed(() =>
   hostProxySelect.value ? activeTabHost.value : 'all your browser traffic',
@@ -59,10 +59,10 @@ const clickCountryOrCity = (country: string, city?: string) => {
   setProxy(country, hostname, ipv4_address, city, port);
 };
 
-const selectLocation = (connection: HistoricConnection) => {
+const selectLocation = (connection: HistoryEntry) => {
   const { country, city, hostname, ipv4_address } = connection;
   if (hostname) {
-    clickSocksProxy(country, city, hostname, ipv4_address);
+    clickSocksProxy(country, city!, hostname, ipv4_address!);
   } else {
     clickCountryOrCity(country, city);
   }

diff --git a/src/components/LocationTabs.vue b/src/components/LocationTabs.vue
@@ -3,8 +3,8 @@ import { NTabPane, NTabs, TabsProps } from 'naive-ui';
 
 import RecentLocationButtons from '@/components/RecentLocationButtons.vue';
 import MostUsedLocationButtons from '@/components/MostUsedLocationButtons.vue';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
 type TabsThemeOverrides = NonNullable<TabsProps['themeOverrides']>;
 const tabsThemeOverrides: TabsThemeOverrides = {
@@ -14,9 +14,9 @@ const tabsThemeOverrides: TabsThemeOverrides = {
   tabTextColorLine: 'var(--light-grey)',
 };
 
-defineProps<{ selectLocation: (connection: HistoricConnection) => void }>();
+defineProps<{ selectLocation: (connection: HistoryEntry) => void }>();
 
-const { mostRecent } = useHistoricConnections();
+const { mostRecent } = useProxyHistory();
 </script>
 
 <template>

diff --git a/src/components/MostUsedLocationButtons.test.ts b/src/components/MostUsedLocationButtons.test.ts
@@ -1,20 +1,26 @@
 import { mount } from '@vue/test-utils';
 import MostUsedLocationButtons from '@/components/MostUsedLocationButtons.vue';
 
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
 import Button from '@/components/Buttons/Button.vue';
 
-jest.mock('@/composables/useHistoricConnections/useHistoricConnections', () => ({
+jest.mock('@/composables/useProxyHistory/useProxyHistory', () => ({
   __esModule: true,
   default: jest.fn(),
 }));
 
 describe('MostUsedLocationButtons', () => {
   it('should render one button', () => {
-    (useHistoricConnections as jest.Mock).mockReturnValueOnce({
-      mostUsed: [{ country: 'Argentina' }],
+    (useProxyHistory as jest.Mock).mockReturnValueOnce({
+      mostUsed: {
+        value: [{ country: 'Argentina' }],
+      },
+      mostRecent: {
+        value: [{ country: 'Argentina' }],
+      },
       getLabel: ({ country }: { country: string }) => country,
     });
+
     const wrapper = mount(MostUsedLocationButtons, { props: { selectLocation: jest.fn() } });
     const buttons = wrapper.findAllComponents(Button);
 
@@ -25,15 +31,27 @@ describe('MostUsedLocationButtons', () => {
   });
 
   it('should render three buttons', () => {
-    (useHistoricConnections as jest.Mock).mockReturnValueOnce({
-      mostUsed: [
-        { country: 'Sweden' },
-        { country: 'Norway' },
-        { country: 'Iceland' },
-        { country: 'Denmark' },
-        { country: 'France' },
-        { country: 'Spain' },
-      ],
+    (useProxyHistory as jest.Mock).mockReturnValueOnce({
+      mostUsed: {
+        value: [
+          { country: 'Sweden' },
+          { country: 'Norway' },
+          { country: 'Iceland' },
+          { country: 'Denmark' },
+          { country: 'France' },
+          { country: 'Spain' },
+        ],
+      },
+      mostRecent: {
+        value: [
+          { country: 'Sweden' },
+          { country: 'Norway' },
+          { country: 'Iceland' },
+          { country: 'Denmark' },
+          { country: 'France' },
+          { country: 'Spain' },
+        ],
+      },
       getLabel: ({ country }: { country: string }) => country,
     });
     const wrapper = mount(MostUsedLocationButtons, { props: { selectLocation: jest.fn() } });

diff --git a/src/components/MostUsedLocationButtons.vue b/src/components/MostUsedLocationButtons.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import Button from '@/components/Buttons/Button.vue';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
-defineProps<{ selectLocation: (connection: HistoricConnection) => void }>();
+defineProps<{ selectLocation: (connection: HistoryEntry) => void }>();
 
-const { mostUsed, getLabel } = useHistoricConnections();
+const { mostUsed, getLabel } = useProxyHistory();
 
-const buttons = mostUsed.slice(0, 3).map((connection) => {
+const buttons = mostUsed.value.slice(0, 3).map((connection: HistoryEntry) => {
   const label = getLabel(connection);
   return {
     label,
@@ -23,7 +23,8 @@ const buttons = mostUsed.slice(0, 3).map((connection) => {
       :key="label"
       class="block"
       @click="selectLocation(connection)"
-      >{{ label }}</Button
     >
+      {{ label }}
+    </Button>
   </div>
 </template>
diff --git a/src/components/RecentLocationButtons.vue b/src/components/RecentLocationButtons.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import Button from '@/components/Buttons/Button.vue';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
-defineProps<{ selectLocation: (connection: HistoricConnection) => void }>();
+defineProps<{ selectLocation: (connection: HistoryEntry) => void }>();
 
-const { mostRecent, getLabel } = useHistoricConnections();
+const { mostRecent, getLabel } = useProxyHistory();
 
-const buttons = mostRecent.slice(0, 3).map((connection) => {
+const buttons = mostRecent.value.slice(0, 3).map((connection: HistoryEntry) => {
   const label = getLabel(connection);
   return {
     label,

diff --git a/src/components/__snapshots__/Location.test.ts.snap b/src/components/__snapshots__/Location.test.ts.snap
@@ -11,7 +11,94 @@ exports[`Location should show two countries 1`] = `
      Select the location where you want to have all your browser traffic routed through. 
   </p>
   <div>
-    <!--v-if-->
+    <div
+      class="mb-8 tabs-card"
+    >
+      <div
+        class="n-tabs n-tabs--line-type n-tabs--large-size n-tabs--flex n-tabs--top"
+        style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #fff; --n-tab-font-size: 16px; --n-tab-text-color: var(--light-grey); --n-tab-text-color-active: #fff; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #fff; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 14px 0; --n-tab-padding-vertical: 10px 20px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 16px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"
+      >
+        <div
+          class="n-tabs-nav--line-type n-tabs-nav--top n-tabs-nav"
+        >
+          <!---->
+          
+          <div
+            class="n-tabs-nav-scroll-wrapper"
+          >
+            <div
+              class="v-x-scroll"
+            >
+              <div
+                class="n-tabs-nav-scroll-content"
+              >
+                <div
+                  class="n-tabs-wrapper"
+                  style="display: flex; justify-content: space-evenly;"
+                >
+                  <!---->
+                  
+                  <div
+                    class="n-tabs-tab-wrapper"
+                  >
+                    <!---->
+                    <div
+                      class="n-tabs-tab n-tabs-tab--active"
+                      data-name="mostUsed"
+                    >
+                      <span
+                        class="n-tabs-tab__label"
+                      >
+                        Frequent Locations
+                      </span>
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="n-tabs-tab-wrapper"
+                  >
+                    <!---->
+                    <div
+                      class="n-tabs-tab"
+                      data-name="recent"
+                    >
+                      <span
+                        class="n-tabs-tab__label"
+                      >
+                        Recent Locations
+                      </span>
+                      <!---->
+                    </div>
+                  </div>
+                  
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+                <div
+                  class="n-tabs-bar"
+                />
+              </div>
+            </div>
+          </div>
+          
+          <!---->
+          <!---->
+        </div>
+        
+        <div
+          class="n-tab-pane"
+        >
+          <div
+            class="space-y-2"
+          >
+            
+            
+          </div>
+        </div>
+        
+      </div>
+    </div>
     <div
       class="n-collapse"
       style="--n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-divider-color: rgb(239, 239, 245); --n-title-padding: 16px 0 0 0; --n-title-font-size: 14px; --n-title-text-color: rgb(31, 34, 37); --n-title-text-color-disabled: rgba(194, 194, 194, 1); --n-title-font-weight: 400; --n-arrow-color: rgb(51, 54, 57); --n-arrow-color-disabled: rgba(194, 194, 194, 1); --n-item-margin: 16px 0 0 0;"

diff --git a/src/composables/useHistoricConnections/HistoricConnections.types.ts b/src/composables/useHistoricConnections/HistoricConnections.types.ts
diff --git a/src/composables/useHistoricConnections/useHistoricConnections.ts b/src/composables/useHistoricConnections/useHistoricConnections.ts
diff --git a/src/composables/useProxyHistory/HistoryEntries.types.ts b/src/composables/useProxyHistory/HistoryEntries.types.ts
@@ -0,0 +1,12 @@
+export type HistoryEntryDetails = {
+  country: string;
+  city?: string;
+  hostname: string;
+  ipv4_address?: string;
+};
+
+export type HistoryEntry = { count: number; timestamp: number } & HistoryEntryDetails;
+
+export type HistoryEntriesMap = {
+  [key: string]: HistoryEntry;
+};