Merge pull request #8290 from weseek/feat/134549-three-types-of-search-execution-buttons

feat: Three types of search execution buttons

apps/app/public/static/locales/en_US/commons.json

@@ -42,6 +42,12 @@
     }
   },
 
+  "search_method_menu_item": {
+    "search_in_all": "Search in all",
+    "only_children_of_this_tree": "Only children of this tree",
+    "exact_mutch": "Exact match"
+  },
+
   "share_links": {
     "Share Link": "Share Link",
     "Page Path": "Page Path",

apps/app/public/static/locales/ja_JP/commons.json

@@ -44,6 +44,12 @@
     }
   },
 
+  "search_method_menu_item": {
+    "search_in_all": "全てのページ",
+    "only_children_of_this_tree": "この階層下の子ページのみ",
+    "exact_mutch": "キーワードに完全一致した文字を含むページのみ"
+  },
+
   "share_links": {
     "Share Link": "共有用リンク",
     "Page Path": "ページパス",

apps/app/public/static/locales/zh_CN/commons.json

@@ -45,6 +45,12 @@
 		}
   },
 
+  "search_method_menu_item": {
+    "search_in_all": "所有页面",
+    "only_children_of_this_tree": "当前分支以下内容",
+    "exact_mutch": "完全匹配"
+  },
+
   "share_links": {
     "Share Link": "Share Link",
     "Page Path": "Page Path",

apps/app/src/features/search/client/components/SearchHelp.tsx

@@ -10,7 +10,7 @@ export const SearchHelp = (): JSX.Element => {
 
   return (
     <>
-      <button type="button" className="btn border-0 text-muted d-flex justify-content-center align-items-center mb-2 ps-1" onClick={() => setIsOpen(!isOpen)}>
+      <button type="button" className="btn border-0 text-muted d-flex justify-content-center align-items-center  ps-1" onClick={() => setIsOpen(!isOpen)}>
         <span className="material-symbols-outlined me-2">help</span>
         { t('search_help.title') }
         <span className="material-symbols-outlined ms-2">{isOpen ? 'expand_less' : 'expand_more'}</span>

apps/app/src/features/search/client/components/SearchMethodMenuItem.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { useCurrentPagePath } from '~/stores/page';
+
+type MenuItemProps = {
+  children: React.ReactNode
+  onClick: () => void
+}
+const MenuItem = (props: MenuItemProps): JSX.Element => {
+  const { children, onClick } = props;
+
+  return (
+    <tr>
+      <div className="text-muted ps-1 d-flex">
+        <span className="material-symbols-outlined fs-4 me-3">search</span>
+        { children }
+      </div>
+    </tr>
+  );
+};
+
+
+type SearchMethodMenuItemProps = {
+  searchKeyword: string
+}
+export const SearchMethodMenuItem = (props: SearchMethodMenuItemProps): JSX.Element => {
+  const { t } = useTranslation('commons');
+
+  const { data: currentPagePath } = useCurrentPagePath();
+
+  const { searchKeyword } = props;
+
+  const shouldShowButton = searchKeyword.length > 0;
+
+  return (
+    <table className="table">
+      <tbody>
+        { shouldShowButton && (
+          <MenuItem onClick={() => {}}>
+            <span>{searchKeyword}</span>
+            <div className="ms-auto">
+              <span>{t('search_method_menu_item.search_in_all')}</span>
+            </div>
+          </MenuItem>
+        )}
+
+        <MenuItem onClick={() => {}}>
+          <code>prefix: {currentPagePath}</code>
+          <span className="ms-2">{searchKeyword}</span>
+          <div className="ms-auto">
+            <span>{t('search_method_menu_item.only_children_of_this_tree')}</span>
+          </div>
+        </MenuItem>
+
+        { shouldShowButton && (
+          <MenuItem onClick={() => {}}>
+            <span>{`"${searchKeyword}"`}</span>
+            <div className="ms-auto">
+              <span>{t('search_method_menu_item.exact_mutch')}</span>
+            </div>
+          </MenuItem>
+        ) }
+      </tbody>
+    </table>
+  );
+};

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -8,6 +8,7 @@ import { useSearchModal } from '../stores/search';
 
 import { SearchForm } from './SearchForm';
 import { SearchHelp } from './SearchHelp';
+import { SearchMethodMenuItem } from './SearchMethodMenuItem';
 
 const SearchModal = (): JSX.Element => {
   const { data: searchModalData, close: closeSearchModal } = useSearchModal();
@@ -36,7 +37,9 @@ const SearchModal = (): JSX.Element => {
           onChangeSearchText={changeSearchTextHandler}
           onClickClearButton={clickClearButtonHandler}
         />
-        <div className="border-top mt-4 mb-3" />
+        <div className="border-top mt-3 mb-3" />
+        <SearchMethodMenuItem searchKeyword={searchKeyword} />
+        <div className="border-top mt-2 mb-2" />
         <SearchHelp />
       </ModalBody>
     </Modal>