Click function moved from icon to row (#2017)

* Click function moved from icon to row

* Added cursor: pointer style

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx

@@ -20,6 +20,10 @@ const StyledDataCell = styled.td`
   min-width: 350px;
 `;
 
+const ClickableRow = styled.tr`
+  cursor: pointer;
+`;
+
 export interface Props {
   message: TopicMessage;
 }
@@ -49,12 +53,13 @@ const Message: React.FC<Props> = ({
 
   return (
     <>
-      <tr
+      <ClickableRow
         onMouseEnter={() => setVEllipsisOpen(true)}
         onMouseLeave={() => setVEllipsisOpen(false)}
+        onClick={toggleIsOpen}
       >
         <td>
-          <IconButtonWrapper onClick={toggleIsOpen} aria-hidden>
+          <IconButtonWrapper aria-hidden>
             <MessageToggleIcon isOpen={isOpen} />
           </IconButtonWrapper>
         </td>
@@ -79,7 +84,7 @@ const Message: React.FC<Props> = ({
             </Dropdown>
           )}
         </td>
-      </tr>
+      </ClickableRow>
       {isOpen && (
         <MessageContent
           messageKey={key}

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx

@@ -23,7 +23,13 @@ const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({
 }) => {
   const [active, setActive] = useState<boolean>(false);
   const [wrapperRef] = useOutsideClickRef(() => setActive(false));
-  const onClick = useCallback(() => setActive(!active), [active]);
+  const onClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setActive(!active);
+    },
+    [active]
+  );
 
   const classNames = useMemo(
     () =>

kafka-ui-react-app/src/components/common/Dropdown/DropdownItem.tsx

@@ -14,6 +14,7 @@ const DropdownItem: React.FC<PropsWithChildren<DropdownItemProps>> = ({
 }) => {
   const onClickHandler = (e: React.MouseEvent) => {
     e.preventDefault();
+    e.stopPropagation();
     onClick();
   };