GW 77739 add deleteAllButton component

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

@@ -567,7 +567,8 @@
     "check_all": "Check all",
     "deletion_modal_header": "Delete page",
     "delete_completely": "Delete completely",
-    "include_certain_path" : "Include {{pathToInclude}} path "
+    "include_certain_path" : "Include {{pathToInclude}} path ",
+    "delete_all_selected_page" : "Delete All"
   },
   "security_setting": {
     "Guest Users Access": "Guest users access",

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

@@ -568,7 +568,8 @@
     "check_all": "すべてチェック",
     "deletion_modal_header": "以下のページを削除",
     "delete_completely": "完全に削除する",
-    "include_certain_path": "{{pathToInclude}}下を含む "
+    "include_certain_path": "{{pathToInclude}}下を含む ",
+    "delete_all_selected_page" : "一括削除"
   },
   "security_setting": {
     "Guest Users Access": "ゲストユーザーのアクセス",

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

@@ -840,7 +840,8 @@
 		"check_all": "全部检查",
 		"deletion_modal_header": "删除页",
 		"delete_completely": "完全删除",
-    "include_certain_path": "包含 {{pathToInclude}} 路径 "
+    "include_certain_path": "包含 {{pathToInclude}} 路径 ",
+    "delete_all_selected_page": "删除所有"
 	},
 	"to_cloud_settings": "進入 GROWI.cloud 的管理界面",
 	"login": {

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const DeleteAllButton = (props) => {
+  const { selectedPage, checked } = props;
+  const { t } = useTranslation();
+  function deleteAllSelectedPage(pagesToDelete) {
+    // TODO: implement this function
+    // https://estoc.weseek.co.jp/redmine/issues/77543
+    // do something with pagesDelete to delete them.
+  }
+  return (
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          name="check-delte-all"
+          onChange={() => {
+            if (checked) {
+              deleteAllSelectedPage(selectedPage);
+            }
+          }}
+        />
+        <span className="search-delete-selected-button">
+          <i className="icon-trash ml-3"></i>
+          {t('search_result.delete_all_selected_page')}
+        </span>
+      </label>
+    </div>
+  );
+
+};
+
+DeleteAllButton.propTypes = {
+  selectedPage: PropTypes.array.isRequired,
+  checked: PropTypes.bool.isRequired,
+};
+export default DeleteAllButton;

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

@@ -21,7 +21,7 @@ const IncludeSpecificPathButton = (props) => {
         </span>
         <input
           type="checkbox"
-          name="check"
+          name="check-include-specific-path"
           onChange={() => {
             if (checked) {
               includeSpecificPathInSearchResult(pathToInclude);

packages/app/src/styles/_search.scss

@@ -155,6 +155,10 @@
   }
 }
 
+.search-delete-selected-button {
+  color: $danger;
+}
+
 .search-result {
   .search-result-list {
     position: sticky;