Add MainPane

3 files changed, 22 insertions, 26 deletions

diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js
index 5e2beba..e0e942a 100644
--- a/frontend/src/components/objects/Connection.js
+++ b/frontend/src/components/objects/Connection.js
@@ -17,11 +17,12 @@
 
 import React, {Component} from 'react';
 import './Connection.scss';
-import {Form, OverlayTrigger, Popover} from "react-bootstrap";
+import {Form} from "react-bootstrap";
 import backend from "../../backend";
 import {dateTimeToTime, durationBetween, formatSize} from "../../utils";
 import ButtonField from "../fields/ButtonField";
 import LinkPopover from "./LinkPopover";
+import TextField from "../fields/TextField";
 
 const classNames = require('classnames');
 
@@ -81,14 +82,6 @@ class Connection extends Component {
             <span>Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()}</span>
         </div>;
 
-        const popoverFor = function (name, content) {
-            return <Popover id={`popover-${name}-${conn.id}`} className="connection-popover">
-                <Popover.Content>
-                    {content}
-                </Popover.Content>
-            </Popover>;
-        };
-
         const commentPopoverContent = <div>
             <span>Click to <strong>{conn.comment.length > 0 ? "edit" : "add"}</strong> comment</span>
             {conn.comment && <Form.Control as="textarea" readOnly={true} rows={2} defaultValue={conn.comment}/>}
@@ -97,7 +90,7 @@ class Connection extends Component {
         const copyPopoverContent = <div>
             {this.state.copiedMessage ? <span><strong>Copied!</strong></span> :
                 <span>Click to <strong>copy</strong> the connection id</span>}
-            <Form.Control as="textarea" readOnly={true} rows={1} defaultValue={conn.id} ref={this.copyTextarea}/>
+            <TextField readonly rows={1} value={conn.id} textRef={this.copyTextarea}/>
         </div>;
 
         return (
@@ -119,22 +112,16 @@ class Connection extends Component {
                 <td className="clickable" onClick={this.props.onSelected}>{durationBetween(startedAt, closedAt)}</td>
                 <td className="clickable" onClick={this.props.onSelected}>{formatSize(conn["client_bytes"])}</td>
                 <td className="clickable" onClick={this.props.onSelected}>{formatSize(conn["server_bytes"])}</td>
-                <td>
-                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
-                                    overlay={popoverFor("hide", <span>Mark this connection</span>)}>
-                        <span className={"connection-icon" + (conn.marked ? " icon-enabled" : "")}
-                              onClick={() => this.handleAction("mark")}>!!</span>
-                    </OverlayTrigger>
-                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
-                                    overlay={popoverFor("comment", commentPopoverContent)}>
-                        <span className={"connection-icon" + (conn.comment ? " icon-enabled" : "")}
-                              onClick={() => this.handleAction("comment")}>@</span>
-                    </OverlayTrigger>
-                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
-                                    overlay={popoverFor("copy", copyPopoverContent)}>
-                        <span className="connection-icon"
-                              onClick={() => this.handleAction("copy")}>#</span>
-                    </OverlayTrigger>
+                <td className="connection-actions">
+                    <LinkPopover text={<span className={classNames("connection-icon", {"icon-enabled": conn.marked})}
+                                             onClick={() => this.handleAction("mark")}>!!</span>}
+                                 content={<span>Mark this connection</span>} placement="right"/>
+                    <LinkPopover text={<span className={classNames("connection-icon", {"icon-enabled": conn.comment})}
+                                             onClick={() => this.handleAction("comment")}>@</span>}
+                                 content={commentPopoverContent} placement="right"/>
+                    <LinkPopover text={<span className={classNames("connection-icon", {"icon-enabled": conn.hidden})}
+                                             onClick={() => this.handleAction("copy")}>#</span>}
+                                 content={copyPopoverContent} placement="right"/>
                 </td>
             </tr>
         );
diff --git a/frontend/src/components/objects/Connection.scss b/frontend/src/components/objects/Connection.scss
index 3b9f479..bf66272 100644
--- a/frontend/src/components/objects/Connection.scss
+++ b/frontend/src/components/objects/Connection.scss
@@ -46,6 +46,10 @@
   .link-popover {
     font-weight: 400;
   }
+
+  .connection-actions .link-popover {
+    text-decoration: none;
+  }
 }
 
 .connection-popover {
diff --git a/frontend/src/components/objects/LinkPopover.scss b/frontend/src/components/objects/LinkPopover.scss
index 725224c..c81f8bb 100644
--- a/frontend/src/components/objects/LinkPopover.scss
+++ b/frontend/src/components/objects/LinkPopover.scss
@@ -5,3 +5,8 @@
   cursor: pointer;
   text-decoration: underline;
 }
+
+.popover {
+  font-family: "Fira Code", monospace;
+  font-size: 0.75em;
+}