addition of tooltips and minor formatting improvements in search panel

1 files changed, 17 insertions, 11 deletions

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index e70b2bc19..dbd641550 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -13,6 +13,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./SearchBox.scss";
 import { DocumentManager } from '../../util/DocumentManager';
 import { DocUtils } from '../../documents/Documents';
+import { Tooltip } from "@material-ui/core";
 
 export const searchSchema = createSchema({
     Document: Doc
@@ -299,20 +300,25 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc
                 className += " searchBox-results-scroll-view-result-selected";
             }
 
+            const formattedType = SearchBox.formatType(StrCast(result[0].type));
+            const title = result[0].title
+
             if (this._docTypeString === "all" || this._docTypeString === result[0].type) {
                 validResults++;
                 return (
-                    <div key={result[0][Id]} onClick={isLinkSearch ? () => this.makeLink(result[0]) : () => this.onResultClick(result[0])} className={className}>
-                        <div className="searchBox-result-title">
-                            {result[0].title}
-                        </div>
-                        <div className="searchBox-result-type">
-                            {SearchBox.formatType(StrCast(result[0].type))}
+                    <Tooltip key={result[0][Id]} placement={"right"} title={<><div className="dash-tooltip">{title}</div></>}>
+                        <div onClick={isLinkSearch ? () => this.makeLink(result[0]) : () => this.onResultClick(result[0])} className={className}>
+                            <div className="searchBox-result-title">
+                                {title}
+                            </div>
+                            <div className="searchBox-result-type">
+                                {formattedType}
+                            </div>
+                            <div className="searchBox-result-keys">
+                                {result[1].join(", ")}
+                            </div>
                         </div>
-                        <div className="searchBox-result-keys">
-                            {result[1].join(", ")}
-                        </div>
-                    </div>
+                    </Tooltip>
                 );
             }
 
@@ -327,7 +333,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc
                     {isLinkSearch ? (null) : <select name="type" id="searchBox-type" className="searchBox-type" onChange={this.onSelectChange}>
                         {this.selectOptions}
                     </select>}
-                    <input defaultValue={""} autoComplete="off" onChange={this.onInputChange} type="text" placeholder="Search..." id="search-input" className="searchBox-input" style={{ width: isLinkSearch ? "100%" : undefined, borderRadius: isLinkSearch ? "5px" : undefined }} ref={this._inputRef} />
+                    <input defaultValue={""} autoComplete="off" onChange={this.onInputChange} onKeyPress={e => e.key === "Enter" ? this.submitSearch() : null} type="text" placeholder="Search..." id="search-input" className="searchBox-input" style={{ width: isLinkSearch ? "100%" : undefined, borderRadius: isLinkSearch ? "5px" : undefined }} ref={this._inputRef} />
                 </div >
                 <div className="searchBox-results-container">
                     <div className="searchBox-results-count">