Merge branch 'feat/77525-80785-implement-select-all' into feat/77525-81100-check-if-selected-pages-has-page

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

packages/app/src/components/SearchPage.jsx

@@ -191,6 +191,17 @@ class SearchPage extends React.Component {
     }
   }
 
+  toggleAllCheckBox = () => {
+    console.log(this.state.selectedPages.size);
+    if (this.state.selectedPages.size === this.state.searchedPages.length) {
+      this.state.selectedPages.clear();
+      return;
+    }
+    this.state.searchedPages.forEach((page) => {
+      this.state.selectedPages.add(page);
+    });
+  };
+
   renderSearchResultContent = () => {
     return (
       <SearchResultContent
@@ -226,6 +237,7 @@ class SearchPage extends React.Component {
         onSearchInvoked={this.searchHandler}
         onExcludeUsersHome={this.onExcludeUsersHome}
         onExcludeTrash={this.onExcludeTrash}
+        onClickInvoked={this.toggleAllCheckBox}
       >
       </SearchControl>
     );

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

@@ -8,7 +8,7 @@ const logger = loggerFactory('growi:searchResultList');
 type Props = {
   checkboxState: CheckboxType,
   onClickInvoked?: () => void,
-  onCheckInvoked?: (string:CheckboxType) => void,
+  onCheckInvoked?: (nextCheckboxState:string) => void,
 }
 
 const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
@@ -18,16 +18,18 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
   } = props;
 
   const changeCheckboxStateHandler = () => {
-    console.log(`changeCheckboxStateHandler is called. current changebox state is ${checkboxState}`);
-    // Todo: determine next checkboxState from one of the following and tell the parent component
-    // to change the checkboxState by passing onCheckInvoked function the next checkboxState
-    // - NONE_CHECKED
-    // - INDETERMINATE
-    // - ALL_CHECKED
-    // https://estoc.weseek.co.jp/redmine/issues/77525
-    // use CheckboxType by importing from packages/app/src/interfaces/
+    let nextCheckboxState!: string;
+    switch (checkboxState) {
+      case CheckboxType.ALL_CHECKED:
+        nextCheckboxState = CheckboxType.NONE_CHECKED;
+        break;
+      case CheckboxType.INDETERMINATE || CheckboxType.NONE_CHECKED:
+        nextCheckboxState = CheckboxType.ALL_CHECKED;
+        break;
+    }
+
     if (onCheckInvoked == null) { logger.error('onCheckInvoked is null') }
-    else { onCheckInvoked(CheckboxType.ALL_CHECKED) } // change this to an appropriate value
+    else { onCheckInvoked(nextCheckboxState) }
   };
 
 
@@ -39,7 +41,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         name="check-all-pages"
         className="custom-control custom-checkbox ml-1 align-self-center"
         onChange={changeCheckboxStateHandler}
-        checked={checkboxState === CheckboxType.INDETERMINATE || checkboxState === CheckboxType.ALL_CHECKED}
+        checked={checkboxState !== CheckboxType.NONE_CHECKED}
       />
       <button
         type="button"

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

@@ -1,19 +1,26 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 import DeleteSelectedPageGroup from './DeleteSelectedPageGroup';
 import { CheckboxType } from '../../interfaces/search';
 
+import loggerFactory from '~/utils/logger';
+
+const logger = loggerFactory('growi:searchResultList');
+
 type Props = {
   searchingKeyword: string,
   appContainer: AppContainer,
   onSearchInvoked: (data : any[]) => boolean,
   onExcludeUsersHome?: () => void,
   onExcludeTrash?: () => void,
+  onClickInvoked?: () => void,
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
+
+  const [checkboxState, setCheckboxState] = useState(CheckboxType.NONE_CHECKED);
   // Temporaly workaround for lint error
   // later needs to be fixed: SearchControl to typescript componet
   const SearchPageFormTypeAny : any = SearchPageForm;
@@ -38,12 +45,9 @@ const SearchControl: FC <Props> = (props: Props) => {
   };
 
   const onCheckAllPagesInvoked = (nextCheckboxState:CheckboxType) => {
-    console.log(`onCheckAllPagesInvoked is called with arg ${nextCheckboxState}`);
-    // Todo: set the checkboxState, isChecked, and indeterminate value of checkbox element according to the passed argument
-    // https://estoc.weseek.co.jp/redmine/issues/77525
-
-    // setting checkbox to indeterminate is required to use of useRef to access checkbox element.
-    // ref: https://getbootstrap.com/docs/4.5/components/forms/#checkboxes
+    setCheckboxState(nextCheckboxState);
+    if (props.onClickInvoked == null) { logger.error('onClickInvoked is null') }
+    else { props.onClickInvoked() }
   };
 
   return (
@@ -59,7 +63,7 @@ const SearchControl: FC <Props> = (props: Props) => {
       <div className="d-flex my-4">
         {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
         <DeleteSelectedPageGroup
-          checkboxState={'' || CheckboxType.NONE_CHECKED} // Todo: change the left value to appropriate value
+          checkboxState={checkboxState} // Todo: change the left value to appropriate value
           onClickInvoked={onDeleteSelectedPageHandler}
           onCheckInvoked={onCheckAllPagesInvoked}
         />