feat(TALE-36): redesign machines page to account for exit nodes

app/routes/_data.machines._index/dialogs/routes.tsx

@@ -80,7 +80,7 @@ export default function Routes({ machine, routes, state }: RoutesProps) {
 								: undefined}
 							{subnet.map(route => (
 								<div
-									key={route.node.id}
+									key={route.id}
 									className={cn(
 										'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
 										'items-center justify-between',

app/routes/_data.machines._index/machine.tsx

@@ -36,6 +36,35 @@ export default function MachineRow({ machine, routes, magic, users }: Props) {
 		? magic.replace('[user]', machine.user.name)
 		: magic
 
+	// This is much easier with Object.groupBy but it's too new for us
+	const { exit, subnet, subnetApproved } = routes.reduce((acc, route) => {
+		if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
+			acc.exit.push(route)
+			return acc
+		}
+
+		if (route.enabled) {
+			acc.subnetApproved.push(route)
+			return acc
+		}
+
+		acc.subnet.push(route)
+		return acc
+	}, { exit: [], subnetApproved: [], subnet: [] })
+
+	const exitEnabled = useMemo(() => {
+		if (exit.length !== 2) return false
+		return exit[0].enabled && exit[1].enabled
+	}, [exit])
+
+	if (exitEnabled) {
+		tags.unshift('Exit Node')
+	}
+
+	if (subnetApproved.length > 0) {
+		tags.unshift('Subnets')
+	}
+
 	return (
 		<tr
 			key={machine.id}

app/routes/_data.machines._index/menu.tsx

@@ -1,5 +1,5 @@
 import { KebabHorizontalIcon } from '@primer/octicons-react'
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 import MenuComponent from '~/components/Menu'
 import { Machine, Route, User } from '~/types'
@@ -17,9 +17,10 @@ interface MenuProps {
 	routes: Route[]
 	users: User[]
 	magic?: string
+	buttonChild?: ReactNode
 }
 
-export default function Menu({ machine, routes, magic, users }: MenuProps) {
+export default function Menu({ machine, routes, magic, users, buttonChild }: MenuProps) {
 	const renameState = useState(false)
 	const expireState = useState(false)
 	const removeState = useState(false)
@@ -69,15 +70,17 @@ export default function Menu({ machine, routes, magic, users }: MenuProps) {
 			/>
 
 			<MenuComponent>
-				<MenuComponent.Button
-					className={cn(
-						'flex items-center justify-center',
-						'border border-transparent rounded-lg py-0.5 w-10',
-						'group-hover:border-gray-200 dark:group-hover:border-zinc-700',
-					)}
-				>
-					<KebabHorizontalIcon className="w-5" />
-				</MenuComponent.Button>
+				{buttonChild ?? (
+					<MenuComponent.Button
+						className={cn(
+							'flex items-center justify-center',
+							'border border-transparent rounded-lg py-0.5 w-10',
+							'group-hover:border-gray-200 dark:group-hover:border-zinc-700',
+						)}
+					>
+						<KebabHorizontalIcon className="w-5" />
+					</MenuComponent.Button>
+				)}
 				<MenuComponent.Items>
 					<MenuComponent.ItemButton control={renameState}>
 						Edit machine name