#87 Add hint about Official buckets only filter (#90)

src/components/SearchProcessor.tsx

@@ -268,15 +268,16 @@ const SearchProcessor = (props: SearchProcessorProps): JSX.Element => {
   return (
     <Form>
       <Row>
-        <Col xs={6} className="my-auto">
+        <Col xs={8} className="my-auto">
           <SearchStatus
             query={query}
             resultsCount={resultsCount}
             searching={searching}
             type={SearchStatusType.Applications}
+            officialOnly={officialOnly}
           />
         </Col>
-        <Col xs={6} className="text-end">
+        <Col xs={4} className="text-end">
           <Dropdown autoClose="outside" align="end" drop="end" className="sorting-filtering-button">
             <Dropdown.Toggle size="sm" variant="secondary">
               <GoSettings className="me-2" />

src/components/SearchStatus.tsx

@@ -17,10 +17,11 @@ type SearchStatusProps = {
   resultsCount: number;
   searching: boolean;
   type: SearchStatusType;
+  officialOnly?: boolean;
 };
 
 const SearchStatus = (props: SearchStatusProps): JSX.Element => {
-  const { searching, resultsCount, query, type } = props;
+  const { searching, resultsCount, query, type, officialOnly } = props;
   const typeDescription = SearchStatusTypeMap[type];
 
   if (searching) {
@@ -50,7 +51,16 @@ const SearchStatus = (props: SearchStatusProps): JSX.Element => {
     );
   }
 
-  return <span>No result found{formattedQuery}.</span>;
+  if (officialOnly) {
+    return (
+      <span>
+        No result found{formattedQuery} from <strong>Official buckets</strong>. Try modifying the filters for possible
+        manifests.
+      </span>
+    );
+  } else {
+    return <span>No result found{formattedQuery}.</span>;
+  }
 };
 
 export default React.memo(SearchStatus);