From e1f3f2abe3473324b19d66e22c182ec3ac0d408f Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao.liao@yscope.com>
Date: Mon, 19 Aug 2024 19:29:27 -0400
Subject: [PATCH] webui: Improve UI of links for viewing search results in
 context. (#515)

---
 .../SearchResultsTable.scss                   |  9 +++++
 .../SearchResultsTable/index.jsx              | 35 +++++++++----------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/SearchResultsTable.scss b/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/SearchResultsTable.scss
index db2f38117..063900dfb 100644
--- a/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/SearchResultsTable.scss
+++ b/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/SearchResultsTable.scss
@@ -50,3 +50,12 @@
   word-break: break-word;
 }
 
+.search-results-file-link {
+  margin-top: 0.25rem;
+
+  color: grey;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
diff --git a/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx b/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx
index 28a331bb8..83b251cca 100644
--- a/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx
+++ b/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx
@@ -5,10 +5,10 @@ import Table from "react-bootstrap/Table";
 import dayjs from "dayjs";
 
 import {
+    faFileLines,
     faSort,
     faSortDown,
     faSortUp,
-    faSquareUpRight,
 } from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
@@ -125,10 +125,6 @@ const SearchResultsTable = ({
                                 Log message
                             </div>
                         </th>
-                        {isExtractIrSupported &&
-                            <th className={"search-results-th"}>
-                                <div className={"search-results-table-header"}>&nbsp;</div>
-                            </th>}
                     </tr>
                 </thead>
                 <tbody>
@@ -143,20 +139,23 @@ const SearchResultsTable = ({
                                 <pre className={"search-results-content search-results-message"}>
                                     {result.message}
                                 </pre>
+                                {isExtractIrSupported &&
+                                    <div className={"search-results-file-link"}>
+                                        <FontAwesomeIcon icon={faFileLines}/>
+                                        {" "}
+                                        <a
+                                            className={"search-results-file-link"}
+                                            rel={"noopener noreferrer"}
+                                            target={"_blank"}
+                                            title={"View log event in context"}
+                                            href={`${Meteor.settings.public.LogViewerWebuiUrl
+                                            }?origFileId=${result.orig_file_id}` +
+                                            `&logEventIdx=${result.log_event_ix}`}
+                                        >
+                                            {result.orig_file_path}
+                                        </a>
+                                    </div>}
                             </td>
-                            {isExtractIrSupported &&
-                                <td>
-                                    <a
-                                        rel={"noopener noreferrer"}
-                                        target={"_blank"}
-                                        title={"View log event in context"}
-                                        href={`${Meteor.settings.public.LogViewerWebuiUrl
-                                        }?origFileId=${result.orig_file_id}` +
-                                        `&logEventIdx=${result.log_event_ix}`}
-                                    >
-                                        <FontAwesomeIcon icon={faSquareUpRight}/>
-                                    </a>
-                                </td>}
                         </tr>
                     ))}
                 </tbody>