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;
+`;