80388 add null check & change code positions

packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -5,16 +5,17 @@ import SearchResultListItem from './SearchResultListItem';
 class SearchResultList extends React.Component {
 
   render() {
+    const { selectedPage } = this.props;
+    const selectedPageId = selectedPage != null && selectedPage.id != null ? selectedPage.id : '';
     return this.props.pages.map((page) => {
       // TODO : send cetain  length of body (revisionBody) from elastisearch by adding some settings to the query and
       //         when keyword is not in page content, display revisionBody.
       // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
-
-      const { selectedPage } = this.props;
       return (
         <SearchResultListItem
+          key={page._id}
           page={page}
-          selectedPageId={selectedPage.id != null ? selectedPage.id : ''}
+          selectedPageId={selectedPageId}
           onClickInvoked={this.props.onClickInvoked}
           noLink
         />

packages/app/src/styles/theme/_apply-colors.scss

@@ -17,6 +17,8 @@ $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcol
 $color-seen-user: #549c79 !default;
 $color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: $grw-marker-yellow !default;
+$bordercolor-search-item-left-active: $primary;
+$bgcolor-search-item-active: lighten($bordercolor-search-item-left-active, 76%);
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -29,8 +31,6 @@ $nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
 $nav-tabs-link-active-color: $color-nav-tabs-link-active;
 $nav-tabs-link-active-bg: $bgcolor-global;
 $nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
-$search-active-item-left-border-color: $primary;
-$search-active-item-bgcolor: lighten($search-active-item-left-border-color, 76%);
 
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
@@ -606,15 +606,10 @@ body.pathname-sidebar {
           }
         }
       }
-    }
-  }
-}
-
-.search-result {
-  .page-list {
-    .active {
-      background-color: $search-active-item-bgcolor;
-      border-color: $search-active-item-left-border-color;
+      .active {
+        background-color: $bgcolor-search-item-active;
+        border-color: $bordercolor-search-item-left-active;
+      }
     }
   }
 }