80814 devide comopnent into two and tentatively implement its behavior

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

@@ -3,37 +3,30 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
 const DeleteAllButton = (props) => {
-  const { selectedPage, checked } = props;
   const { t } = useTranslation();
-  function deleteAllSelectedPage(pagesToDelete) {
+  const { selectedPages } = props;
+
+  function deleteAllSelectedPage() {
+    console.log(selectedPages);
     // 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="text-danger font-weight-light">
-          <i className="icon-trash ml-3"></i>
-          {t('search_result.delete_all_selected_page')}
-        </span>
-      </label>
-    </div>
+    <button
+      type="button"
+      className="text-danger font-weight-light"
+      onClick={deleteAllSelectedPage}
+    >
+      <i className="icon-trash ml-3"></i>
+      {t('search_result.delete_all_selected_page')}
+    </button>
   );
 
 };
 
 DeleteAllButton.propTypes = {
-  selectedPage: PropTypes.array.isRequired,
-  checked: PropTypes.bool.isRequired,
+  selectedPages: PropTypes.array.isRequired,
 };
 export default DeleteAllButton;

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

@@ -2,6 +2,8 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
+import SelectAllPages from './SelectAllPages';
+import DeleteAllButton from './DeleteAllButton';
 
 type Props = {
   searchingKeyword: string,
@@ -40,6 +42,10 @@ const SearchControl: FC <Props> = (props: Props) => {
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
       <div className="d-flex my-4">
+        {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
+        <SelectAllPages checked={false} onClickInvoked={() => {}} />
+        {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
+        <DeleteAllButton selectedPages={[]} />
         <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">
           <label className="my-0 mr-2" htmlFor="flexCheckDefault">
             {t('Include Subordinated Target Page', { target: '/user' })}

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

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+
+type Props = {
+  checked: boolean,
+  onClickInvoked: () => void,
+}
+
+const SelectAllPages: FC<Props> = (props:Props) => {
+  const { onClickInvoked, checked } = props;
+
+  // Tood: show checkbox as indeterminate when some pages are checked but not all
+  // https://getbootstrap.com/docs/4.5/components/forms/#checkboxes
+  return (
+    <input
+      type="checkbox"
+      name="check-delete-all"
+      onClick={onClickInvoked}
+      checked={checked}
+    />
+  );
+};
+
+export default SelectAllPages;