Merge pull request #4611 from weseek/feat/80324-80532-show-search-result-text

Feat/80324 80532 show search result text

packages/app/resource/locales/en_US/translation.json

@@ -568,7 +568,7 @@
     "popover_desc": "Input channel name. You can notify multiple channels by entering a comma-separated list."
   },
   "search_result": {
-    "result_meta": "Found \"{{keyword}}\" in {{total}}.",
+    "result_meta": "Search results for:",
     "deletion_mode_btn_lavel": "Select and delete page",
     "cancel": "Cancel",
     "delete": "Delete",

packages/app/resource/locales/ja_JP/translation.json

@@ -568,7 +568,7 @@
     "popover_desc": "チャンネル名を入れてください。カンマ区切りのリストを入力することで複数のチャンネルに通知することができます。"
   },
   "search_result": {
-    "result_meta": "{{total}}件のページが見つかりました。検索ワード: \"{{keyword}}\"",
+    "result_meta": "検索結果:",
     "deletion_mode_btn_lavel": "ページを指定して削除",
     "cancel": "キャンセル",
     "delete": "削除",

packages/app/resource/locales/zh_CN/translation.json

@@ -841,7 +841,7 @@
 		"use_os_settings": "使用操作系统设置"
 	},
 	"search_result": {
-		"result_meta": "在{{total}中找到了{{keyword}。",
+		"result_meta": "搜索结果:",
 		"deletion_mode_btn_lavel": "选择并删除页面",
 		"cancel": "取消",
 		"delete": "删除",

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

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type SearchResultMeta = {
   took : number,
@@ -15,7 +16,11 @@ type Props = {
 }
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
-  const { SearchResultList, SearchControl, SearchResultContent } = props;
+  const { t } = useTranslation('');
+  const {
+    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword,
+  } = props;
+
   return (
     <div className="content-main">
       <div className="search-result row" id="search-result">
@@ -24,7 +29,10 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
           <nav><SearchControl></SearchControl></nav>
           <div className="d-flex align-items-start justify-content-between mt-1">
             <div className="search-result-meta">
-              <i className="icon-magnifier" /> Found {props.searchResultMeta.total} pages with &quot;{props.searchingKeyword}&quot;
+              <span className="font-weight-light">{t('search_result.result_meta')} </span>
+              <span className="h5">{`"${searchingKeyword}"`}</span>
+              {/* Todo: replace "1-10" to the appropriate value */}
+              <span className="ml-3">1-10 / {searchResultMeta.total || 0}</span>
             </div>
           </div>