Merge pull request #2319 from redpanda-data/UX-962-fixes-copy-password-tooltip

Hotfixes copy button tooltip

Author: jvorcak

frontend/src/components/pages/acls/user-create.tsx

@@ -292,7 +292,10 @@ const CreateUserModal = ({ state, onCreateUser, onCancel }: CreateUserModalProps
                 />
               </Tooltip>
               <Tooltip hasArrow label={'Copy password'} placement="top">
-                <CopyButton content={state.password} variant="ghost" />
+                {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
+                <Box as="span" display="inline-flex">
+                  <CopyButton content={state.password} variant="ghost" />
+                </Box>
               </Tooltip>
             </Flex>
             <Checkbox
@@ -395,7 +398,10 @@ const CreateUserConfirmationModal = ({
           <PasswordInput isDisabled={true} isReadOnly={true} name="test" value={password} />
 
           <Tooltip hasArrow label={'Copy password'} placement="top">
-            <CopyButton content={password} variant="ghost" />
+            {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
+            <Box as="span" display="inline-flex">
+              <CopyButton content={password} variant="ghost" />
+            </Box>
           </Tooltip>
         </Flex>
       </Box>

frontend/src/components/pages/acls/user-edit-modals.tsx

@@ -3,6 +3,7 @@
 import { create } from '@bufbuild/protobuf';
 import { ConnectError } from '@connectrpc/connect';
 import {
+  Box,
   Button,
   Checkbox,
   CopyButton,
@@ -115,7 +116,10 @@ export const ChangePasswordModal = ({ userName, isOpen, setIsOpen }: ChangePassw
                     />
                   </Tooltip>
                   <Tooltip hasArrow label={'Copy password'} placement="top">
-                    <CopyButton content={password} variant="ghost" />
+                    {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
+                    <Box as="span" display="inline-flex">
+                      <CopyButton content={password} variant="ghost" />
+                    </Box>
                   </Tooltip>
                 </Flex>
                 <Checkbox

frontend/src/components/pages/users/create-user-confirmation-modal.tsx

@@ -58,7 +58,10 @@ export const CreateUserConfirmationModal = ({
                 </Text>
 
                 <Tooltip hasArrow label={'Copy username'} placement="top">
-                  <CopyButton content={username} variant="ghost" />
+                  {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
+                  <Box as="span" display="inline-flex">
+                    <CopyButton content={username} variant="ghost" />
+                  </Box>
                 </Tooltip>
               </Flex>
             </Box>
@@ -71,7 +74,10 @@ export const CreateUserConfirmationModal = ({
                 <PasswordInput isDisabled={true} isReadOnly={true} name="test" value={password} />
 
                 <Tooltip hasArrow label={'Copy password'} placement="top">
-                  <CopyButton content={password} variant="ghost" />
+                  {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
+                  <Box as="span" display="inline-flex">
+                    <CopyButton content={password} variant="ghost" />
+                  </Box>
                 </Tooltip>
               </Flex>
             </Box>