hunk.code_window:     const name = 'topic-name';
       const mockedResponse = {
         _id: 'topic-id',
         _environmentId: 'environment-id',
         _organizationId: 'organization-id',
         key,
         name,
         subscribers: [],
       };
       mockedAxios.post.mockResolvedValue(mockedResponse);
  
hunk.labels: keep keep keep replace replace replace replace replace replace keep keep keep
hunk.after_edit:       data: {
           _id: 'topic-id',
         },
  
hunk.file_path: packages/node/src/lib/topics/topics.spec.ts
hunk.type: replace
file: import { useState } from 'react';
  import { ActionIcon, Tooltip } from '@mantine/core';
  import { useClipboard } from '@mantine/hooks';
  
  import { Check, Copy } from '../../../../design-system/icons';
  import { VarItem } from './VarItem';
  
  export const VarItemTooltip = ({ pathToCopy, name, type }: { pathToCopy: string; name: string; type: string }) => {
    const [isHovered, setIsHovered] = useState(false);
    const { copy, copied } = useClipboard({ timeout: 1000 });
  
    return (
      <Tooltip data-test-id={`var-item-${name}-${type}`} label={copied ? 'Copied!' : 'Copy key'}>
        <ActionIcon
          variant="transparent"
          onMouseOver={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
          onClick={() => copy(pathToCopy)}
          sx={{ width: '100%', height: 'unset', minWidth: 'unset', minHeight: 'unset', lineHeight: '1.15' }}
        >
          <VarItem name={name} type={type}>
            <span style={{ position: 'absolute', right: '2%', bottom: copied ? '40%' : '20%' }}>
              {isHovered && !copied && <Copy />}
              {copied && <Check />}
            </span>
          </VarItem>
        </ActionIcon>
      </Tooltip>
    );
  };
  