81006 disable checkbox and button

packages/app/src/components/SearchPage.jsx

@@ -223,6 +223,7 @@ class SearchPage extends React.Component {
     return (
       <SearchControl
         searchingKeyword={this.state.searchingKeyword}
+        searchResultCount={this.state.searchResultCount}
         appContainer={this.props.appContainer}
         onSearchInvoked={this.searchHandler}
         onExcludeUsersHome={this.onExcludeUsersHome}

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

@@ -7,6 +7,7 @@ const logger = loggerFactory('growi:searchResultList');
 
 type Props = {
   checkboxState: CheckboxType,
+  isCheckboxDisabled: boolean,
   onClickInvoked?: () => void,
   onCheckInvoked?: (string:CheckboxType) => void,
 }
@@ -38,12 +39,14 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         type="checkbox"
         name="check-all-pages"
         className="custom-control custom-checkbox ml-1 align-self-center"
+        disabled={props.isCheckboxDisabled}
         onChange={changeCheckboxStateHandler}
         checked={checkboxState === CheckboxType.INDETERMINATE || checkboxState === CheckboxType.ALL_CHECKED}
       />
       <button
         type="button"
         className="btn text-danger font-weight-light p-0 ml-3"
+        disabled={checkboxState === CheckboxType.NONE_CHECKED}
         onClick={() => {
           if (onClickInvoked == null) { logger.error('onClickInvoked is null') }
           else { onClickInvoked() }
@@ -57,6 +60,4 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
 
 };
 
-DeleteSelectedPageGroup.propTypes = {
-};
 export default DeleteSelectedPageGroup;

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

@@ -8,6 +8,7 @@ import { CheckboxType } from '../../interfaces/search';
 type Props = {
   searchingKeyword: string,
   appContainer: AppContainer,
+  searchResultCount: number,
   onSearchInvoked: (data : any[]) => boolean,
   onExcludeUsersHome?: () => void,
   onExcludeTrash?: () => void,
@@ -18,6 +19,7 @@ const SearchControl: FC <Props> = (props: Props) => {
   // later needs to be fixed: SearchControl to typescript componet
   const SearchPageFormTypeAny : any = SearchPageForm;
   const { t } = useTranslation('');
+  const { searchResultCount } = props;
 
   const onExcludeUsersHome = () => {
     if (props.onExcludeUsersHome != null) {
@@ -60,6 +62,7 @@ const SearchControl: FC <Props> = (props: Props) => {
         {/* 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
+          isCheckboxDisabled={(searchResultCount == null || searchResultCount === 0) || false}
           onClickInvoked={onDeleteSelectedPageHandler}
           onCheckInvoked={onCheckAllPagesInvoked}
         />