From d55aa2f10b7774d2380532926d4cdca8a1763ab4 Mon Sep 17 00:00:00 2001
From: "M. Mert Yildiran" <mehmet@up9.com>
Date: Mon, 29 Nov 2021 09:34:18 +0300
Subject: [PATCH] Use the `Queryable` component `EntryDetailed`

---
 ui/src/components/EntryDetailed.tsx           | 37 ++++++++++---------
 .../EntryDetailed/EntrySections.tsx           |  2 +-
 ui/src/components/UI/Queryable.tsx            | 11 +++---
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/EntryDetailed.tsx b/ui/src/components/EntryDetailed.tsx
index 47dab4883..3f573a4bc 100644
--- a/ui/src/components/EntryDetailed.tsx
+++ b/ui/src/components/EntryDetailed.tsx
@@ -3,6 +3,7 @@ import EntryViewer from "./EntryDetailed/EntryViewer";
 import {EntryItem} from "./EntryListItem/EntryListItem";
 import {makeStyles} from "@material-ui/core";
 import Protocol from "./UI/Protocol"
+import Queryable from "./UI/Queryable";
 
 const useStyles = makeStyles(() => ({
     entryTitle: {
@@ -41,24 +42,24 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
     return <div className={classes.entryTitle}>
         <Protocol protocol={protocol} horizontal={true} updateQuery={null}/>
         <div style={{right: "30px", position: "absolute", display: "flex"}}>
-            {response && <div
-                className="queryable"
-                style={{margin: "0 18px", opacity: 0.5}}
-                onClick={() => {
-                    updateQuery(`response.bodySize == ${bodySize}`)
-                }}
-            >
-                {formatSize(bodySize)}
-            </div>}
-            {response && <div
-                className="queryable"
-                style={{marginRight: 18, opacity: 0.5}}
-                onClick={() => {
-                    updateQuery(`elapsedTime >= ${elapsedTime}`)
-                }}
-            >
-                {Math.round(elapsedTime)}ms
-            </div>}
+            {response && <Queryable
+                text={formatSize(bodySize)}
+                query={`response.bodySize == ${bodySize}`}
+                updateQuery={updateQuery}
+                textStyle={{opacity: 0.5}}
+                wrapperStyle={{margin: "0 18px"}}
+                applyTextEllipsis={false}
+                displayIconOnMouseOver={true}
+            />}
+            {response && <Queryable
+                text={`${Math.round(elapsedTime)}ms`}
+                query={`elapsedTime >= ${elapsedTime}`}
+                updateQuery={updateQuery}
+                textStyle={{opacity: 0.5}}
+                wrapperStyle={{marginRight: 18}}
+                applyTextEllipsis={false}
+                displayIconOnMouseOver={true}
+            />}
         </div>
     </div>;
 };
diff --git a/ui/src/components/EntryDetailed/EntrySections.tsx b/ui/src/components/EntryDetailed/EntrySections.tsx
index 5d8be67d2..db4f6360a 100644
--- a/ui/src/components/EntryDetailed/EntrySections.tsx
+++ b/ui/src/components/EntryDetailed/EntrySections.tsx
@@ -32,7 +32,7 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
                         text={label}
                         query={query}
                         updateQuery={updateQuery}
-                        style={{float: "right"}}
+                        wrapperStyle={{float: "right"}}
                         className={`${styles.dataKey}`}
                         applyTextEllipsis={false}
                         displayIconOnMouseOver={true}
diff --git a/ui/src/components/UI/Queryable.tsx b/ui/src/components/UI/Queryable.tsx
index 83b6a7153..1396e2a24 100644
--- a/ui/src/components/UI/Queryable.tsx
+++ b/ui/src/components/UI/Queryable.tsx
@@ -7,7 +7,8 @@ interface Props {
     text: string | number,
     query: string,
     updateQuery: any,
-    style?: object,
+    textStyle?: object,
+    wrapperStyle?: object,
     className?: string,
     isPossibleToCopy?: boolean,
     applyTextEllipsis?: boolean,
@@ -16,13 +17,11 @@ interface Props {
     onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
 }
 
-const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
+const Queryable: React.FC<Props> = ({text, query, updateQuery, textStyle, wrapperStyle, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
     const [showAddedNotification, setAdded] = useState(false);
     const [showTooltip, setShowTooltip] = useState(false);
     text = String(text);
 
-    console.log(style);
-
     const onCopy = () => {
         setAdded(true)
     };
@@ -39,7 +38,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
         // eslint-disable-next-line
     }, [showAddedNotification]);
 
-    const textElement = <span className={'Queryable-Text'}>{text}</span>;
+    const textElement = <span className={'Queryable-Text'} style={textStyle}>{text}</span>;
 
     const copyButton = text ? <CopyToClipboard text={text} onCopy={onCopy}>
                     <span
@@ -54,7 +53,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
     return (
         <div
             className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
-            style={style}
+            style={wrapperStyle}
             onMouseOver={ e => setShowTooltip(true)}
             onMouseLeave={ e => setShowTooltip(false)}
         >