From ac937f90141cfb62e496db2d0487470c99b8f6fa Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Thu, 23 Jan 2025 11:16:56 -0500
Subject: [PATCH] fix: dedupe machine tags

---
 app/routes/machines/components/machine.tsx | 19 +++++++++++--------
 app/routes/machines/machine.tsx            | 20 +++++++++-----------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/app/routes/machines/components/machine.tsx b/app/routes/machines/components/machine.tsx
index de12084..9cea72a 100644
--- a/app/routes/machines/components/machine.tsx
+++ b/app/routes/machines/components/machine.tsx
@@ -1,10 +1,10 @@
 import { ChevronDownIcon, CopyIcon } from '@primer/octicons-react';
-import { Link } from 'react-router';
 import { useMemo } from 'react';
+import { Link } from 'react-router';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import { toast } from '~/components/Toaster';
-import type { Machine, Route, User, HostInfo } from '~/types';
+import type { HostInfo, Machine, Route, User } from '~/types';
 import { cn } from '~/utils/cn';
 import * as hinfo from '~/utils/host-info';
 
@@ -18,7 +18,13 @@ interface Props {
 	stats?: HostInfo;
 }
 
-export default function MachineRow({ machine, routes, magic, users, stats }: Props) {
+export default function MachineRow({
+	machine,
+	routes,
+	magic,
+	users,
+	stats,
+}: Props) {
 	const expired =
 		machine.expiry === '0001-01-01 00:00:00' ||
 		machine.expiry === '0001-01-01T00:00:00Z' ||
@@ -26,7 +32,7 @@ export default function MachineRow({ machine, routes, magic, users, stats }: Pro
 			? false
 			: new Date(machine.expiry).getTime() < Date.now();
 
-	const tags = [...machine.forcedTags, ...machine.validTags];
+	const tags = [...new Set([...machine.forcedTags, ...machine.validTags])];
 
 	if (expired) {
 		tags.unshift('Expired');
@@ -111,10 +117,7 @@ export default function MachineRow({ machine, routes, magic, users, stats }: Pro
 				<div className="flex items-center gap-x-1">
 					{machine.ipAddresses[0]}
 					<Menu>
-						<Menu.IconButton
-							className="bg-transparent"
-							label="IP Addresses"
-						>
+						<Menu.IconButton className="bg-transparent" label="IP Addresses">
 							<ChevronDownIcon className="w-4 h-4" />
 						</Menu.IconButton>
 						<Menu.Items>
diff --git a/app/routes/machines/machine.tsx b/app/routes/machines/machine.tsx
index 6c586a9..6f52186 100644
--- a/app/routes/machines/machine.tsx
+++ b/app/routes/machines/machine.tsx
@@ -1,20 +1,21 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
-import { Link as RemixLink, useLoaderData } from 'react-router';
 import {
-	InfoIcon,
-	GearIcon,
 	CheckCircleIcon,
-	SkipIcon,
+	GearIcon,
+	InfoIcon,
 	PersonIcon,
+	SkipIcon,
 } from '@primer/octicons-react';
 import { useMemo, useState } from 'react';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
+import { Link as RemixLink, useLoaderData } from 'react-router';
 
 import Attribute from '~/components/Attribute';
 import Button from '~/components/Button';
 import Card from '~/components/Card';
+import Link from '~/components/Link';
 import Menu from '~/components/Menu';
-import Tooltip from '~/components/Tooltip';
 import StatusCircle from '~/components/StatusCircle';
+import Tooltip from '~/components/Tooltip';
 import type { Machine, Route, User } from '~/types';
 import { cn } from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
@@ -22,7 +23,6 @@ import { loadConfig } from '~/utils/config/headscale';
 import { pull } from '~/utils/headscale';
 import { getSession } from '~/utils/sessions.server';
 import { useLiveData } from '~/utils/useLiveData';
-import Link from '~/components/Link';
 
 import { menuAction } from './action';
 import MenuOptions from './components/menu';
@@ -74,7 +74,7 @@ export default function Page() {
 			? false
 			: new Date(machine.expiry).getTime() < Date.now();
 
-	const tags = [...machine.forcedTags, ...machine.validTags];
+	const tags = [...new Set([...machine.forcedTags, ...machine.validTags])];
 
 	if (expired) {
 		tags.unshift('Expired');
@@ -216,9 +216,7 @@ export default function Page() {
 						Learn More
 					</Link>
 				</p>
-				<Button onPress={() => setShowRouting(true)}>
-					Review
-				</Button>
+				<Button onPress={() => setShowRouting(true)}>Review</Button>
 			</div>
 			<Card
 				variant="flat"