feat(react19): Remove findDomNode in textCopyInput

part of getsentry/frontend-tsc#68

static/app/components/textCopyInput.spec.tsx

@@ -1,10 +1,43 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import TextCopyInput from 'sentry/components/textCopyInput';
 
 describe('TextCopyInput', function () {
-  it('renders', function () {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn().mockResolvedValue(''),
+      },
+    });
+  });
+
+  it('copies text to clipboard on click', async function () {
+    render(<TextCopyInput>Text to Copy</TextCopyInput>);
+    const button = screen.getByRole('button', {name: 'Copy'});
+    expect(button).toBeInTheDocument();
+
+    await userEvent.click(button);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('Text to Copy');
+  });
+
+  it('selects text in input on click', async function () {
     render(<TextCopyInput>Text to Copy</TextCopyInput>);
-    expect(screen.getByDisplayValue('Text to Copy')).toBeInTheDocument();
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    expect(input).toHaveValue('Text to Copy');
+    const selectSpy = jest.spyOn(input, 'select');
+
+    await userEvent.click(input);
+
+    expect(selectSpy).toHaveBeenCalled();
+  });
+
+  it('handles RTL text selection', async function () {
+    render(<TextCopyInput rtl>Text to Copy</TextCopyInput>);
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    const setSelectionRangeSpy = jest.spyOn(input, 'setSelectionRange');
+
+    await userEvent.click(input);
+    expect(setSelectionRangeSpy).toHaveBeenCalledWith(1, input.value.length - 1);
   });
 });

static/app/components/textCopyInput.tsx

@@ -1,5 +1,4 @@
-import {useCallback, useRef} from 'react';
-import {findDOMNode} from 'react-dom';
+import {useCallback, useId} from 'react';
 import styled from '@emotion/styled';
 
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
@@ -33,17 +32,11 @@ function TextCopyInput({
   children,
   ...inputProps
 }: Props) {
-  const textRef = useRef<HTMLInputElement>(null);
+  const textNodeId = useId();
 
   const handleSelectText = useCallback(() => {
-    if (!textRef.current) {
-      return;
-    }
-
-    // We use findDOMNode here because `this.textRef` is not a dom node,
-    // it's a ref to AutoSelectText
-    const node = findDOMNode(textRef.current); // eslint-disable-line react/no-find-dom-node
-    if (!node || !(node instanceof HTMLElement)) {
+    const node = document.getElementById(textNodeId);
+    if (!node) {
       return;
     }
 
@@ -53,7 +46,7 @@ function TextCopyInput({
     } else {
       selectText(node);
     }
-  }, [rtl]);
+  }, [rtl, textNodeId]);
 
   /**
    * We are using direction: rtl; to always show the ending of a long overflowing text in input.
@@ -67,10 +60,11 @@ function TextCopyInput({
 
   return (
     <InputGroup className={className}>
+      hello
       <StyledInput
+        id={textNodeId}
         readOnly
         disabled={disabled}
-        ref={textRef}
         style={style}
         value={inputValue}
         onClick={handleSelectText}