client/web: add confirmation dialogs

Add confirmation dialogs for disconnecting and stopping advertisement
of a subnet route.

Updates #10261

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

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

@@ -11,6 +11,7 @@ import * as Control from "src/components/control-components"
 import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Card from "src/ui/card"
+import Dialog from "src/ui/dialog"
 import EmptyState from "src/ui/empty-state"
 import Input from "src/ui/input"
 
@@ -139,9 +140,8 @@ export default function SubnetRouterView({
                       )}
                     </div>
                     {!readonly && (
-                      <Button
-                        sizeVariant="small"
-                        onClick={() =>
+                      <StopAdvertisingDialog
+                        onSubmit={() =>
                           api({
                             action: "update-routes",
                             data: advertisedRoutes.filter(
@@ -149,9 +149,7 @@ export default function SubnetRouterView({
                             ),
                           })
                         }
-                      >
-                        Stop advertising…
-                      </Button>
+                      />
                     )}
                   </div>
                 </div>
@@ -179,3 +177,22 @@ export default function SubnetRouterView({
     </>
   )
 }
+
+function StopAdvertisingDialog({ onSubmit }: { onSubmit: () => void }) {
+  return (
+    <Dialog
+      className="max-w-md"
+      title="Stop advertising route"
+      trigger={<Button sizeVariant="small">Stop advertising…</Button>}
+    >
+      <Dialog.Form
+        cancelButton
+        submitButton="Stop advertising"
+        destructive
+        onSubmit={onSubmit}
+      >
+        Any active connections between devices over this route will be broken.
+      </Dialog.Form>
+    </Dialog>
+  )
+}