add popover to reverse mode (#7161)

This commit is contained in:
Matteo Luppi 2024-09-04 15:23:37 +02:00 committed by GitHub
parent d18e21fb76
commit 401b5c0198
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 30 deletions

View File

@ -16,6 +16,7 @@ import Dropdown, { MenuItem } from "../common/Dropdown";
import ValueEditor from "../editors/ValueEditor"; import ValueEditor from "../editors/ValueEditor";
import { ServerStatus } from "./CaptureSetup"; import { ServerStatus } from "./CaptureSetup";
import { ModeToggle } from "./ModeToggle"; import { ModeToggle } from "./ModeToggle";
import { Popover } from "./Popover";
interface ReverseToggleRowProps { interface ReverseToggleRowProps {
removable: boolean; removable: boolean;
@ -105,14 +106,18 @@ function ReverseToggleRow({
{prot} {prot}
</MenuItem> </MenuItem>
))} ))}
</Dropdown>{" "} </Dropdown>
<span traffic to
onClick={() => { <ValueEditor
dispatch(setActive({ server, value: !server.active })); className="mode-reverse-input"
}} content={server.destination?.toString() || ""}
> onEditDone={(value) =>
traffic from dispatch(setDestination({ server, value }))
</span> }
placeholder="example.com"
/>
<Popover>
<p>Listen Host</p>
<ValueEditor <ValueEditor
className="mode-reverse-input" className="mode-reverse-input"
content={server.listen_host || ""} content={server.listen_host || ""}
@ -121,6 +126,7 @@ function ReverseToggleRow({
} }
placeholder="*" placeholder="*"
/> />
<p>Listen Port</p>
<ValueEditor <ValueEditor
className="mode-reverse-input" className="mode-reverse-input"
content={String(server.listen_port || "")} content={String(server.listen_port || "")}
@ -133,16 +139,8 @@ function ReverseToggleRow({
) )
} }
placeholder="8080" placeholder="8080"
/>{" "}
to{" "}
<ValueEditor
className="mode-reverse-input"
content={server.destination?.toString() || ""}
onEditDone={(value) =>
dispatch(setDestination({ server, value }))
}
placeholder="example.com"
/> />
</Popover>
{removable && ( {removable && (
<i <i
className="fa fa-fw fa-trash fa-lg" className="fa fa-fw fa-trash fa-lg"