diff --git a/web/packages/teleport/src/Player/Xterm/Xterm.tsx b/web/packages/teleport/src/Player/Xterm/Xterm.tsx index 666fd386393fe..a5e8ad37dbeac 100644 --- a/web/packages/teleport/src/Player/Xterm/Xterm.tsx +++ b/web/packages/teleport/src/Player/Xterm/Xterm.tsx @@ -16,10 +16,11 @@ * along with this program. If not, see . */ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useCallback, useRef, useState } from 'react'; import { getPlatformType } from 'design/platform'; -import { useTheme } from 'styled-components'; +import styled, { useTheme } from 'styled-components'; +import { TerminalSearch } from 'shared/components/TerminalSearch'; import Terminal from 'teleport/lib/term/terminal'; import Tty from 'teleport/lib/term/tty'; @@ -30,6 +31,19 @@ export default function Xterm({ tty }: { tty: Tty }) { const refContainer = useRef(); const theme = useTheme(); const terminalPlayer = useRef(); + const [showSearch, setShowSearch] = useState(false); + + const onSearchClose = useCallback(() => { + setShowSearch(false); + }, []); + + const onSearchOpen = useCallback(() => { + setShowSearch(true); + }, []); + + const isSearchKeyboardEvent = useCallback((e: KeyboardEvent) => { + return (e.metaKey || e.ctrlKey) && e.key === 'f'; + }, []); useEffect(() => { const term = new TerminalPlayer(tty, { @@ -70,7 +84,22 @@ export default function Xterm({ tty }: { tty: Tty }) { terminalPlayer.current?.updateTheme(theme.colors.terminal); }, [theme]); - return ; + return ( + <> + + {terminalPlayer.current && ( + + + + )} + + ); } class TerminalPlayer extends Terminal { @@ -90,3 +119,15 @@ class TerminalPlayer extends Terminal { // prevent user resize requests _requestResize() {} } + +const TerminalAddonsContainer = styled.div` + position: absolute; + right: ${p => p.theme.space[2]}px; + top: ${p => p.theme.space[2]}px; + z-index: 10; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: ${p => p.theme.space[2]}px; + min-width: 500px; +`;