Add search

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/content-manager/pages/ListView/index.js

@@ -13,6 +13,7 @@ import {
   NoPermissions,
   // CheckPermissions,
   // PopUpWarning,
+  Search,
   useFocusWhenNavigate,
   useQueryParams,
   useNotification,
@@ -20,7 +21,7 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/parts/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
+import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
 import { useNotifyAT } from '@strapi/parts/LiveRegions';
 import { Button } from '@strapi/parts/Button';
 import Add from '@strapi/icons/Add';
@@ -375,6 +376,21 @@ function ListView({
   return (
     <Main aria-busy={isLoading}>
       <HeaderLayout primaryAction={createAction} subtitle={subtitle} title={headerLayoutTitle} />
+      {canRead && (
+        <ActionLayout
+          startActions={
+            <>
+              <Search
+                label={formatMessage(
+                  { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
+                  { target: headerLayoutTitle }
+                )}
+                trackedEvent="didSearch"
+              />
+            </>
+          }
+        />
+      )}
       <ContentLayout>
         {canRead ? (
           <>

packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js

@@ -20,6 +20,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
     if (trackedEvent) {
       trackUsage(trackedEvent);
     }
+
     setQuery({
       pageSize: e,
       page: 1,

packages/core/helper-plugin/lib/src/components/Search/Search.stories.mdx

@@ -9,6 +9,13 @@ import Search from './index';
 
 This component provides and input to search an array
 
+## Imports
+
+```js
+import { Search } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+```
+
 ## Usage
 
 ```jsx
@@ -17,6 +24,7 @@ import matchSorter from 'match-sorter';
 
 const HomePage = () => {
   const [{ query }] = useQueryParams()
+  const { formatMessage } = useIntl();
   const _q = query?._q || ''
   const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}]
 
@@ -24,7 +32,15 @@ const HomePage = () => {
   const itemsList = sortedList?.length ? sortedList : items
 
   return (
-    <Search />
+    <Search
+      label={formatMessage({
+        id: 'app.component.search.label',
+        defaultMessage: 'Search for {target}' },
+        { target: 'users' }
+      )}
+      // Use this props to send an event
+      trackedEvent="didSearch"
+    />
     {itemsList.map(item => (
       <div>
         <h1>{item.name}</h1>

packages/core/helper-plugin/lib/src/components/Search/index.js

@@ -5,16 +5,19 @@ import { SearchIcon } from '@strapi/icons';
 import { Searchbar } from '@strapi/parts/Searchbar';
 import { IconButton } from '@strapi/parts/IconButton';
 import useQueryParams from '../../hooks/useQueryParams';
+import useTracking from '../../hooks/useTracking';
 
-const Search = ({ label }) => {
+const Search = ({ label, trackedEvent }) => {
   const wrapperRef = useRef(null);
   const iconButtonRef = useRef(null);
   const isMountedRef = useRef(false);
+  const [didSearch, setDidSearch] = useState(false);
 
   const [isOpen, setIsOpen] = useState(false);
   const [{ query }, setQuery] = useQueryParams();
   const [value, setValue] = useState(query?._q || '');
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
 
   const handleToggle = () => setIsOpen(prev => !prev);
 
@@ -30,11 +33,19 @@ const Search = ({ label }) => {
     isMountedRef.current = true;
   }, [isOpen]);
 
+  useEffect(() => {
+    if (didSearch && trackedEvent) {
+      trackUsage(trackedEvent);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [didSearch, trackedEvent]);
+
   useEffect(() => {
     const handler = setTimeout(() => {
       if (value) {
         setQuery({ _q: value, page: 1 });
       } else {
+        setDidSearch(false);
         setQuery({ _q: '' }, 'remove');
       }
     }, 300);
@@ -48,11 +59,17 @@ const Search = ({ label }) => {
       <div ref={wrapperRef}>
         <Searchbar
           name="search"
-          onChange={({ target: { value } }) => setValue(value)}
+          onChange={({ target: { value } }) => {
+            setDidSearch(true);
+            setValue(value);
+          }}
           onBlur={() => setIsOpen(false)}
           value={value}
           clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
-          onClear={() => setValue('')}
+          onClear={() => {
+            setValue('');
+            setDidSearch(false);
+          }}
         >
           {label}
         </Searchbar>
@@ -65,8 +82,13 @@ const Search = ({ label }) => {
   );
 };
 
+Search.defaultProps = {
+  trackedEvent: null,
+};
+
 Search.propTypes = {
   label: PropTypes.string.isRequired,
+  trackedEvent: PropTypes.string,
 };
 
 export default Search;