handle multiple addresses pt2

src/i18n/en/index.ts

@@ -55,6 +55,11 @@ const en = {
       deadConDropped:
         'Detected that the {con_type: string} {interface_name: string} has disconnected, trying to reconnect...',
       noCookie: 'No defguard_proxy set-cookie received',
+      insecureContext: 'Context is not secure.',
+      clipboard: {
+        error: 'Clipboard is not accessible.',
+        success: 'Content copied to clipboard.',
+      },
     },
   },
   components: {

src/i18n/i18n-types.ts

@@ -170,6 +170,20 @@ type RootTranslation = {
 			 * N​o​ ​d​e​f​g​u​a​r​d​_​p​r​o​x​y​ ​s​e​t​-​c​o​o​k​i​e​ ​r​e​c​e​i​v​e​d
 			 */
 			noCookie: string
+			/**
+			 * C​o​n​t​e​x​t​ ​i​s​ ​n​o​t​ ​s​e​c​u​r​e​.
+			 */
+			insecureContext: string
+			clipboard: {
+				/**
+				 * C​l​i​p​b​o​a​r​d​ ​i​s​ ​n​o​t​ ​a​c​c​e​s​s​i​b​l​e​.
+				 */
+				error: string
+				/**
+				 * C​o​n​t​e​n​t​ ​c​o​p​i​e​d​ ​t​o​ ​c​l​i​p​b​o​a​r​d​.
+				 */
+				success: string
+			}
 		}
 	}
 	components: {
@@ -1827,6 +1841,20 @@ export type TranslationFunctions = {
 			 * No defguard_proxy set-cookie received
 			 */
 			noCookie: () => LocalizedString
+			/**
+			 * Context is not secure.
+			 */
+			insecureContext: () => LocalizedString
+			clipboard: {
+				/**
+				 * Clipboard is not accessible.
+				 */
+				error: () => LocalizedString
+				/**
+				 * Content copied to clipboard.
+				 */
+				success: () => LocalizedString
+			}
 		}
 	}
 	components: {

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

@@ -1,8 +1,12 @@
 import './style.scss';
 
 import dayjs from 'dayjs';
+import { useMemo } from 'react';
 
 import { useI18nContext } from '../../../../../../../../i18n/i18n-react';
+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 type { CommonWireguardFields, Connection } from '../../../../../../types';
 
 type Props = {
@@ -28,8 +32,35 @@ export const LocationCardInfo = ({ location, connection }: Props) => {
       </div>
       <div className="location-card-info-ip">
         <label>{localLL.assignedIp()}:</label>
-        <p>{location?.address}</p>
+        <AssignedIp address={location?.address || ''} />
       </div>
     </>
   );
 };
+
+type AssignedIpProps = {
+  // comma-separated list of addresses
+  address: string;
+};
+
+const AssignedIp = ({ address }: AssignedIpProps) => {
+  // 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="assigned-ip-container">
+          <p className="client-addresses">{address}</p>
+        </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/LocationCardInfo/style.scss

@@ -23,4 +23,32 @@
     color: var(--text-body-primary);
     text-align: left;
   }
+
+  & > .assigned-ip-container {
+    cursor: help;
+
+    & > label {
+      text-align: right;
+    }
+
+    & > p {
+      @include typography(app-button-xl);
+
+      color: var(--text-body-primary);
+      text-align: right;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.location-card-info-ip {
+  justify-items: flex-end;
+  justify-content: flex-end;
+  align-items: flex-end;
+
+  & > label {
+    text-align: right;
+  }
 }

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

@@ -24,17 +24,17 @@ export const LocationCardTitle = ({ location }: Props) => {
       <SvgIconConnection />
       <span className="location-name">{location?.name}</span>
 
-      <AddressBadge addresses={location?.address || ''} />
+      <AddressBadge address={location?.address || ''} />
     </div>
   );
 };
 
 type AddressBadgeProps = {
   // comma-separated list of addresses
-  addresses: string;
+  address: string;
 };
 
-const AddressBadge = ({ addresses: address }: AddressBadgeProps) => {
+const AddressBadge = ({ address }: AddressBadgeProps) => {
   // split into separate addreses to show in tooltip
   const addresses = useMemo(() => address.split(','), [address]);
 

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

@@ -32,7 +32,6 @@
   }
 
   & > .addresses-badge-container {
-    position: relative;
     cursor: help;
 
     & > .client-addresses {

src/shared/hooks/useClipboard.ts

@@ -1,8 +1,11 @@
 import { useCallback } from 'react';
 
+import { useI18nContext } from '../../i18n/i18n-react';
 import { useToaster } from '../defguard-ui/hooks/toasts/useToaster';
 
 export const useClipboard = () => {
+  const { LL } = useI18nContext();
+
   const toaster = useToaster();
 
   const writeToClipboard = useCallback(
@@ -13,17 +16,17 @@ export const useClipboard = () => {
           if (customMessage) {
             toaster.success(customMessage);
           } else {
-            toaster.success('Content copied to clipboard');
+            toaster.success(LL.common.messages.clipboard.success());
           }
         } catch (e) {
-          toaster.error('Writing to clipboard failed !');
+          toaster.error(LL.common.messages.clipboard.error());
           console.error(e);
         }
       } else {
-        toaster.warning('Cannot access clipboard in insecure contexts');
+        toaster.warning(LL.common.messages.insecureContext());
       }
     },
-    [toaster],
+    [LL.common.messages, toaster],
   );
 
   return {