client/web: add cancel button to subnet router input section

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/components/views/subnet-router-view.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Tailscale Inc & AUTHORS
 // SPDX-License-Identifier: BSD-3-Clause
 
-import React, { useMemo, useState } from "react"
+import React, { useCallback, useMemo, useState } from "react"
 import { ReactComponent as CheckCircle } from "src/assets/icons/check-circle.svg"
 import { ReactComponent as Clock } from "src/assets/icons/clock.svg"
 import { ReactComponent as Plus } from "src/assets/icons/plus.svg"
@@ -19,9 +19,9 @@ export default function SubnetRouterView({
   node: NodeData
   nodeUpdaters: NodeUpdaters
 }) {
-  const [advertisedRoutes, hasUnapprovedRoutes] = useMemo(() => {
+  const [advertisedRoutes, hasRoutes, hasUnapprovedRoutes] = useMemo(() => {
     const routes = node.AdvertisedRoutes || []
-    return [routes, routes.find((r) => !r.Approved)]
+    return [routes, routes.length > 0, routes.find((r) => !r.Approved)]
   }, [node.AdvertisedRoutes])
 
   const [inputOpen, setInputOpen] = useState<boolean>(
@@ -29,6 +29,11 @@ export default function SubnetRouterView({
   )
   const [inputText, setInputText] = useState<string>("")
 
+  const resetInput = useCallback(() => {
+    setInputText("")
+    setInputOpen(false)
+  }, [])
+
   return (
     <>
       <h1 className="mb-1">Subnet router</h1>
@@ -59,23 +64,23 @@ export default function SubnetRouterView({
             <p className="my-2 h-6 text-gray-500 text-sm leading-tight">
               Add multiple routes by providing a comma-separated list.
             </p>
-            <Button
+            <div className="flex gap-3">
-              intent="primary"
+              <Button
-              onClick={() =>
+                intent="primary"
-                nodeUpdaters
+                onClick={() =>
-                  .postSubnetRoutes([
+                  nodeUpdaters
-                    ...advertisedRoutes.map((r) => r.Route),
+                    .postSubnetRoutes([
-                    ...inputText.split(","),
+                      ...advertisedRoutes.map((r) => r.Route),
-                  ])
+                      ...inputText.split(","),
-                  .then(() => {
+                    ])
-                    setInputText("")
+                    .then(resetInput)
-                    setInputOpen(false)
+                }
-                  })
+                disabled={!inputText}
-              }
+              >
-              disabled={!inputText}
+                Advertise {hasRoutes && "new "}routes
-            >
+              </Button>
-              Advertise routes
+              {hasRoutes && <Button onClick={resetInput}>Cancel</Button>}
-            </Button>
+            </div>
           </div>
         ) : (
           <Button
@@ -83,11 +88,11 @@ export default function SubnetRouterView({
             prefixIcon={<Plus />}
             onClick={() => setInputOpen(true)}
           >
-            Advertise new route
+            Advertise new routes
           </Button>
         ))}
       <div className="-mx-5 mt-10">
-        {advertisedRoutes.length > 0 ? (
+        {hasRoutes ? (
           <>
             <div className="px-5 py-3 bg-white rounded-lg border border-gray-200">
               {advertisedRoutes.map((r) => (