Repository: provectus/kafka-ui
Issue: Expand message view on row click
Labels: type/enhancement
scope/frontend
status/accepted

Hi,

At first I would like to admit your app is so far the best Kafka's UI I've tried!
 
I'd like to kindly ask you to improve message view, where click on any place on a message's row would open extended view of that message. Currently, only left plus button could expand message's details.

Please consider and let me know what you're thinking about such improvement.

Best regards!

Issue comments:
Hey, thanks for the kind words. Glad you like it :)

As for the tables, we've considered that (#1414), but there are some possible issues with that (like behaviour for sandwich buttons). I agree that it would be more convenient, but it's not a priority for now. But we'll consider it, thanks.

Pull request review comments:
cursor: pointer ?
fixed

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx
index 265b1f4a729..a111ed14524 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx
+++ b/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}
diff --git a/kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx b/kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx
index e9523b5acfc..e8a51499b4d 100644
--- a/kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx
+++ b/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(
     () =>
diff --git a/kafka-ui-react-app/src/components/common/Dropdown/DropdownItem.tsx b/kafka-ui-react-app/src/components/common/Dropdown/DropdownItem.tsx
index 04a5fe2cc6d..ccfa5222668 100644
--- a/kafka-ui-react-app/src/components/common/Dropdown/DropdownItem.tsx
+++ b/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();
   };
 


Test patch: