Merge branch 'feat/search-implement' into feat/77543-79831-create-dropdown-icon

# Conflicts:
#	packages/app/src/components/SearchPage.jsx
#	packages/app/src/components/SearchPage/SearchResultList.jsx
#	packages/app/src/components/SearchPage/SearchResultListItem.tsx

packages/app/src/components/SearchPage.jsx

@@ -30,7 +30,7 @@ class SearchPage extends React.Component {
       searchedKeyword: '',
       searchedPages: [],
       searchResultMeta: {},
-      selectedPage: {},
+      focusedPage: {},
       selectedPages: new Set(),
       searchResultCount: 0,
       activePage: 1,
@@ -152,7 +152,7 @@ class SearchPage extends React.Component {
           searchedPages: res.data,
           searchResultMeta: res.meta,
           searchResultCount: res.meta.total,
-          selectedPage: res.data[0],
+          focusedPage: res.data[0],
           // reset active page if keyword changes, otherwise set the current state
           activePage: this.state.searchedKeyword === keyword ? this.state.activePage : 1,
         });
@@ -163,7 +163,7 @@ class SearchPage extends React.Component {
           searchedPages: [],
           searchResultMeta: {},
           searchResultCount: 0,
-          selectedPage: {},
+          focusedPage: {},
           activePage: 1,
         });
       }
@@ -178,7 +178,7 @@ class SearchPage extends React.Component {
       return page._id === pageId;
     });
     this.setState({
-      selectedPage: this.state.searchedPages[index],
+      focusedPage: this.state.searchedPages[index],
     });
   }
 
@@ -196,7 +196,7 @@ class SearchPage extends React.Component {
       <SearchResultContent
         appContainer={this.props.appContainer}
         searchingKeyword={this.state.searchingKeyword}
-        selectedPage={this.state.selectedPage}
+        focusedPage={this.state.focusedPage}
       >
       </SearchResultContent>
     );
@@ -206,7 +206,7 @@ class SearchPage extends React.Component {
     return (
       <SearchResultList
         pages={this.state.searchedPages || []}
-        selectedPage={this.state.selectedPage}
+        focusedPage={this.state.focusedPage}
         selectedPages={this.state.selectedPages || []}
         searchResultCount={this.state.searchResultCount}
         activePage={this.state.activePage}

packages/app/src/components/SearchPage/DeleteSelectedPageGroup.tsx

@@ -37,19 +37,19 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         id="check-all-pages"
         type="checkbox"
         name="check-all-pages"
-        className="custom-control custom-checkbox"
+        className="custom-control custom-checkbox ml-1 align-self-center"
         onChange={changeCheckboxStateHandler}
         checked={checkboxState === CheckboxType.INDETERMINATE || checkboxState === CheckboxType.ALL_CHECKED}
       />
       <button
         type="button"
-        className="text-danger font-weight-light"
+        className="btn text-danger font-weight-light p-0 ml-3"
         onClick={() => {
           if (onClickInvoked == null) { logger.error('onClickInvoked is null') }
           else { onClickInvoked() }
         }}
       >
-        <i className="icon-trash ml-3"></i>
+        <i className="icon-trash"></i>
         {t('search_result.delete_all_selected_page')}
       </button>
     </>

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -7,7 +7,7 @@ import AppContainer from '../../client/services/AppContainer';
 type Props ={
   appContainer: AppContainer,
   searchingKeyword:string,
-  selectedPage : any,
+  focusedPage : any,
 }
 const SearchResultContent: FC<Props> = (props: Props) => {
   // Temporaly workaround for lint error
@@ -39,7 +39,7 @@ const SearchResultContent: FC<Props> = (props: Props) => {
       </div>
     );
   };
-  const content = renderPage(props.selectedPage);
+  const content = renderPage(props.focusedPage);
   return (
 
     <div>{content}</div>

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

@@ -20,16 +20,21 @@ type Props = {
   activePage?: number,
   pagingLimit?: number,
   onPagingNumberChanged?: (activePage: number) => void,
+  focusedPage?: ISearchedPage,
 }
 
 const SearchResultList: FC<Props> = (props:Props) => {
+  const { focusedPage } = props;
+  const focusedPageId = focusedPage != null && focusedPage._id != null ? focusedPage._id : '';
   return (
     <>
       {props.pages.map((page) => {
         return (
           <SearchResultListItem
+            key={page._id}
             page={page}
             onClickInvoked={props.onClickInvoked}
+            isSelected={page._id === focusedPageId || false}
           />
         );
       })}

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -10,6 +10,7 @@ const logger = loggerFactory('growi:searchResultList');
 
 type Props ={
   page: ISearchedPage,
+  isSelected: boolean,
   onClickInvoked?: (pageId: string) => void,
 }
 
@@ -67,7 +68,7 @@ const PageItemControl: FC<Props> = (props: {page: ISearchedPage}) => {
 
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
-  const { page } = props;
+  const { page, isSelected } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
   const pageId = `#${page._id}`;
@@ -82,7 +83,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   };
 
   return (
-    <li key={page._id} className="page-list-li w-100 border-bottom pr-4">
+    <li key={page._id} className={`page-list-li w-100 border-bottom pr-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}
@@ -90,7 +91,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
       >
         <div className="d-flex">
           {/* checkbox */}
-          <div className="form-check my-auto mx-2">
+          <div className="form-check my-auto mr-3">
             <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
           </div>
           <div className="w-100">

packages/app/src/styles/_search.scss

@@ -163,10 +163,10 @@
     overflow-y: scroll;
 
     .nav.nav-pills {
-      > li {
+      > .page-list-li {
         > a {
           height: 123px;
-          padding: 2px 8px;
+          padding: 2px 4px;
           word-break: break-all;
           border-radius: 0;
 

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;
@@ -591,16 +593,10 @@ body.pathname-sidebar {
         background-color: $bgcolor-keyword-highlighted;
       }
       .page-list-ul {
-        > li.nav-item > a.nav-link {
-          color: inherit;
-        }
-        a {
-          &.hover {
-            background-color: darken($bgcolor-global, 4%);
-          }
+        .page-list-li {
           &.active {
-            background-color: darken($bgcolor-global, 8%);
-            border-color: theme-color('primary');
+            background-color: $bgcolor-search-item-active;
+            border-color: $bordercolor-search-item-left-active;
           }
         }
       }