fix delete searched item (#8054)

frontend/src/components/search/search-result-item.js

@@ -41,13 +41,11 @@ class SearchResultItem extends React.Component {
 
   deleteItem = (e) => {
     e.stopPropagation();
-    if (this.props.onDeleteItem) {
-      this.props.onDeleteItem(this.props.item);
-    }
+    this.props.onDeleteItem(this.props.item);
   };
 
   render() {
-    const { item, setRef = (() => {}) } = this.props;
+    const { item, onDeleteItem, isHighlight, setRef = (() => {}) } = this.props;
     let folderIconUrl = item.link_content ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl();
     let fileIconUrl = item.is_dir ? folderIconUrl : Utils.getFileIconUrl(item.name);
     let showName = item.repo_name + '/' + item.link_content;
@@ -59,7 +57,7 @@ class SearchResultItem extends React.Component {
 
     return (
       <li
-        className={classnames('search-result-item', { 'search-result-item-highlight': this.props.isHighlight })}
+        className={classnames('search-result-item', { 'search-result-item-highlight': isHighlight })}
         onClick={this.onClickHandler}
         ref={ref => setRef(ref)}
         onMouseEnter={this.onMouseEnter}
@@ -70,7 +68,7 @@ class SearchResultItem extends React.Component {
           <div className="item-link ellipsis">{showName}</div>
           <div className="item-text ellipsis" dangerouslySetInnerHTML={{ __html: item.content }}></div>
         </div>
-        {this.props.isHighlight && (
+        {isHighlight && onDeleteItem && (
           <button
             type="button"
             className="search-icon-right sf3-font sf3-font-x-01"

frontend/src/components/search/search.js

@@ -745,11 +745,11 @@ class Search extends Component {
     this.setState({ highlightIndex: index });
   }, 200);
 
-  deleteItem = (item) => {
+  deleteVisitedResult = (item) => {
     const { visitedItems } = this.state;
-    const update = visitedItems.filter(i => i.path !== item.path || i.repo_id !== item.repo_id);
-    this.setState({ visitedItems: update });
-    localStorage.setItem(this.storeKey, JSON.stringify(update));
+    const newVisitedItems = visitedItems.filter(i => i.path !== item.path || i.repo_id !== item.repo_id);
+    this.setState({ visitedItems: newVisitedItems });
+    localStorage.setItem(this.storeKey, JSON.stringify(newVisitedItems));
   };
 
   renderResults = (resultItems, isVisited) => {
@@ -757,11 +757,11 @@ class Search extends Component {
 
     const results = (
       <>
-        {isVisited ? (
+        {isVisited ?
           <h4 className="visited-search-results-title">{gettext('Search results visited recently')}</h4>
-        ) : (
+          :
           <h4 className="search-results-title">{gettext('Files')}</h4>
-        )}
+        }
         <ul className="search-result-list" ref={this.searchResultListRef}>
           {resultItems.map((item, index) => {
             const isHighlight = index === highlightIndex;
@@ -776,7 +776,7 @@ class Search extends Component {
                 onHighlightIndex={this.debounceHighlight}
                 timer={this.timer}
                 onSetTimer={(timer) => {this.timer = timer;}}
-                onDeleteItem={this.deleteItem}
+                onDeleteItem={isVisited ? this.deleteVisitedResult : null}
               />
             );
           })}
@@ -787,9 +787,9 @@ class Search extends Component {
     return (
       <>
         <MediaQuery query="(min-width: 768px)">
-          <div className="search-result-sidepanel-wrapper d-flex">
+          <div className="search-result-side-panel-wrapper d-flex">
             <div className="search-result-list-container" ref={this.searchResultListContainerRef}>{results}</div>
-            <div className="search-result-container-sidepanel d-flex flex-column flex-grow-1">
+            <div className="search-result-container-side-panel d-flex flex-column flex-grow-1">
               {this.renderDetails(resultItems)}
             </div>
           </div>

frontend/src/css/search.css

@@ -156,12 +156,12 @@
   background-color: var(--bs-bg-secondary-color);
 }
 
-.search-result-container .search-result-container-sidepanel {
+.search-result-container .search-result-container-side-panel {
   max-width: 300px;
   max-height: 400px;
 }
 
-.search-result-container .search-result-container-sidepanel .searched-item-details {
+.search-result-container .search-result-container-side-panel .searched-item-details {
   height: 100%;
   overflow: auto;
 }