applications/drive/src/app/components/sections/Search/NoSearchResultsView.tsx

   1 import type { FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { PrimaryButton } from '@proton/components';
   6 import { DRIVE_APP_NAME } from '@proton/shared/lib/constants';
   7 import noResultSearchSvg from '@proton/styles/assets/img/illustrations/empty-search.svg';
   8
   9 import { useSearchControl } from '../../../store';
  10 import { DriveEmptyView } from '../../layout/DriveEmptyView';
  11
  12 const getTitle = (isReady: boolean) => {
  13     if (isReady) {
  14         // translator: Shown when searching and no results are found
  15         return c('Title').t`No results found`;
  16     }
  17
  18     // translator: Shown when searching and search is not enabled yet
  19     return c('Title').t`Enable drive search`;
  20 };
  21
  22 const getSubtitles = (isReady: boolean) => {
  23     if (isReady) {
  24         return [
  25             // translator: Shown when searching and no results are found
  26             c('Info').t`Try searching by file name, date, or type.`,
  27             // translator: Shown when searching and no results are found
  28             c('Info').t`Also try looking in Trash.`,
  29         ];
  30     }
  31
  32     // translator: Shown when searching and search is not enabled yet
  33     return c('Info').t`To enable truly private search ${DRIVE_APP_NAME} needs to index your files locally.`;
  34 };
  35
  36 type Props = {};
  37
  38 export const NoSearchResultsView: FC<Props> = () => {
  39     const { prepareSearchData, hasData, isEnablingEncryptedSearch } = useSearchControl();
  40
  41     const isReady = hasData && !isEnablingEncryptedSearch;
  42
  43     return (
  44         <DriveEmptyView image={noResultSearchSvg} title={getTitle(isReady)} subtitle={getSubtitles(isReady)}>
  45             {!isReady && (
  46                 <div className="flex justify-center">
  47                     <PrimaryButton
  48                         size="large"
  49                         className="text-bold"
  50                         onClick={() => prepareSearchData()}
  51                         loading={isEnablingEncryptedSearch}
  52                         disabled={isEnablingEncryptedSearch || hasData}
  53                     >
  54                         {c('Action').t`Enable drive search`}
  55                     </PrimaryButton>
  56                 </div>
  57             )}
  58         </DriveEmptyView>
  59     );
  60 };