TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2025-03-29 04:22:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy 2023-12-04 16:03:09 -05:00 committed by Sonia Appasamy
parent 95e9d22a16
commit b144391c06
1 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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