Add search to ssh player in session recordings (#49506)

This adds our new TerminalSearch element to the SSH recordings player.

web/packages/teleport/src/Player/Xterm/Xterm.tsx

@@ -16,10 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-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<HTMLDivElement>();
   const theme = useTheme();
   const terminalPlayer = useRef<TerminalPlayer>();
+  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 <StyledXterm ref={refContainer} />;
+  return (
+    <>
+      <StyledXterm ref={refContainer} />
+      {terminalPlayer.current && (
+        <TerminalAddonsContainer>
+          <TerminalSearch
+            show={showSearch}
+            isSearchKeyboardEvent={isSearchKeyboardEvent}
+            onClose={onSearchClose}
+            onOpen={onSearchOpen}
+            terminalSearcher={terminalPlayer.current}
+          />
+        </TerminalAddonsContainer>
+      )}
+    </>
+  );
 }
 
 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;
+`;