Merge branch 'master' into schema-view-En-Hua

2 files changed, 31 insertions, 18 deletions

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 2586ef2ee..e8865b918 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -78,8 +78,10 @@
                 .searchBox-result-title {
                     display: relative;
                     float: left;
-                    width: calc(100% - 60px);
+                    width: calc(100% - 45px);
                     text-align: left;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .searchBox-result-type {
@@ -87,7 +89,7 @@
                     margin-top: 6px;
                     display: relative;
                     float: right;
-                    width: 60px;
+                    width: 45px;
                     text-align: right;
                     color: #222;
                 }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 260ddfc90..3612bd7c4 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
@@ -103,9 +104,9 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc
      * This method is called when the user clicks on a search result. The _selectedResult is
      * updated accordingly and the doc is highlighted with the selectElement method.
      */
-    onResultClick = action((doc: Doc) => {
-        this.selectElement(doc);
+    onResultClick = action(async (doc: Doc) => {
         this._selectedResult = doc;
+        this.selectElement(doc, () => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, false));
     });
 
     makeLink = action((linkTo: Doc) => {
@@ -114,7 +115,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc
             const linkFrom = this.props.linkFrom();
             if (linkFrom) {
                 console.log(linkFrom.title);
-                DocUtils.MakeLink({ doc: linkFrom }, { doc: linkTo });
+                DocUtils.MakeLink({ doc: linkFrom }, { doc: linkTo }, "Link");
             }
         }
     });
@@ -268,8 +269,8 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc
      * This method selects a doc by either jumping to it (centering/zooming in on it)
      * or opening it in a new tab.
      */
-    selectElement = async (doc: Doc) => {
-        await DocumentManager.Instance.jumpToDocument(doc, true);
+    selectElement = async (doc: Doc, finishFunc: () => void) => {
+        await DocumentManager.Instance.jumpToDocument(doc, true, undefined, undefined, undefined, undefined, undefined, finishFunc);
     }
 
     /**
@@ -299,20 +300,30 @@ 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]) :
+                            e => {
+                                this.onResultClick(result[0]);
+                                e.stopPropagation();
+                            }} 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 +338,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">