handle multiple addresses

src-tauri/src/database/models/instance.rs

@@ -74,7 +74,7 @@ impl Instance<Id> {
         let instances = query_as!(
             Self,
             "SELECT id \"id: _\", name, uuid, url, proxy_url, username, token \"token?\", \
-            disable_all_traffic, enterprise_enabled, openid_display_name FROM instance;"
+            disable_all_traffic, enterprise_enabled, openid_display_name FROM instance ORDER BY name ASC;"
         )
         .fetch_all(executor)
         .await?;
@@ -123,7 +123,7 @@ impl Instance<Id> {
             Self,
             "SELECT id \"id: _\", name, uuid, url, proxy_url, username, token, \
             disable_all_traffic, enterprise_enabled, openid_display_name FROM instance
-            WHERE token IS NOT NULL;"
+            WHERE token IS NOT NULL ORDER BY name ASC;"
         )
         .fetch_all(executor)
         .await?;

src-tauri/src/database/models/location.rs

@@ -66,7 +66,7 @@ impl Location<Id> {
           Self,
           "SELECT id, instance_id, name, address, pubkey, endpoint, allowed_ips, dns, network_id,\
           route_all_traffic, keepalive_interval, location_mfa_mode \"location_mfa_mode: LocationMfaMode\" \
-          FROM location;"
+          FROM location ORDER BY name ASC;"
       )
         .fetch_all(executor)
         .await
@@ -129,7 +129,7 @@ impl Location<Id> {
             Self,
             "SELECT id \"id: _\", instance_id, name, address, pubkey, endpoint, allowed_ips, dns, \
             network_id, route_all_traffic, keepalive_interval, location_mfa_mode \"location_mfa_mode: LocationMfaMode\" \
-            FROM location WHERE instance_id = $1",
+            FROM location WHERE instance_id = $1 ORDER BY name ASC",
             instance_id
         )
         .fetch_all(executor)

src-tauri/src/database/models/tunnel.rs

@@ -120,7 +120,7 @@ impl Tunnel<Id> {
             "SELECT id \"id: _\", name, pubkey, prvkey, address, server_pubkey, preshared_key, \
             allowed_ips, endpoint, dns, persistent_keep_alive, route_all_traffic, pre_up, \
             post_up, pre_down, post_down \
-            FROM tunnel;"
+            FROM tunnel ORDER BY name ASC;"
         )
         .fetch_all(executor)
         .await?;

src/pages/client/pages/ClientInstancePage/components/LocationsList/components/LocationCardTitle/LocationCardTitle.tsx

@@ -1,9 +1,13 @@
 import './style.scss';
 
 import classNames from 'classnames';
+import { useMemo } from 'react';
 
 import { Badge } from '../../../../../../../../shared/defguard-ui/components/Layout/Badge/Badge';
 import { BadgeStyleVariant } from '../../../../../../../../shared/defguard-ui/components/Layout/Badge/types';
+import { FloatingMenu } from '../../../../../../../../shared/defguard-ui/components/Layout/FloatingMenu/FloatingMenu';
+import { FloatingMenuProvider } from '../../../../../../../../shared/defguard-ui/components/Layout/FloatingMenu/FloatingMenuProvider';
+import { FloatingMenuTrigger } from '../../../../../../../../shared/defguard-ui/components/Layout/FloatingMenu/FloatingMenuTrigger';
 import SvgIconConnection from '../../../../../../../../shared/defguard-ui/components/svg/IconConnection';
 import { CommonWireguardFields } from '../../../../../../types';
 
@@ -19,7 +23,40 @@ export const LocationCardTitle = ({ location }: Props) => {
     <div className={cn}>
       <SvgIconConnection />
       <span className="location-name">{location?.name}</span>
-      <Badge text={location?.address || ''} styleVariant={BadgeStyleVariant.STANDARD} />
+
+      <AddressBadge addresses={location?.address || ''} />
     </div>
   );
 };
+
+type AddressBadgeProps = {
+  // comma-separated list of addresses
+  addresses: string;
+};
+
+const AddressBadge = ({ addresses: address }: AddressBadgeProps) => {
+  // split into separate addreses to show in tooltip
+  const addresses = useMemo(() => address.split(','), [address]);
+
+  return (
+    <FloatingMenuProvider placement="right" disabled={addresses.length === 0}>
+      <FloatingMenuTrigger asChild>
+        <div className="addresses-badge-container">
+          <Badge
+            className="client-addresses"
+            text={address}
+            styleVariant={BadgeStyleVariant.STANDARD}
+            // ref={containerRef}
+          />
+        </div>
+      </FloatingMenuTrigger>
+      <FloatingMenu>
+        <ul className="list-addresses-floating">
+          {addresses.map((d) => (
+            <li key={d}>{d}</li>
+          ))}
+        </ul>
+      </FloatingMenu>
+    </FloatingMenuProvider>
+  );
+};

src/pages/client/pages/ClientInstancePage/components/LocationsList/components/LocationCardTitle/style.scss

@@ -30,4 +30,35 @@
       }
     }
   }
+
+  & > .addresses-badge-container {
+    position: relative;
+    cursor: help;
+
+    & > .client-addresses {
+      max-width: 90px;
+
+      & > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.list-addresses-floating {
+  list-style: none;
+  display: flex;
+  flex-flow: column;
+  row-gap: var(--spacing-xs);
+  max-height: 250px;
+  max-width: 100dvh;
+  overflow: auto;
+  padding: var(--spacing-xs);
+  margin: 0;
+
+  li {
+    @include typography(app-modal-1);
+    color: var(--text-body-secondary);
+  }
 }