Merge pull request #10959 from strapi/cm/search

Add search to CM Listview

packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js

@@ -8,7 +8,15 @@ import { getTrad } from '../../utils';
 import State from '../State';
 import TableRows from './TableRows';
 
-const DynamicTable = ({ canCreate, canDelete, contentTypeName, isLoading, layout, rows }) => {
+const DynamicTable = ({
+  canCreate,
+  canDelete,
+  contentTypeName,
+  isBulkable,
+  isLoading,
+  layout,
+  rows,
+}) => {
   const { runHookWaterfall } = useStrapiApp();
   const hasDraftAndPublish = layout.contentType.options.draftAndPublish || false;
   const { formatMessage } = useIntl();
@@ -52,7 +60,7 @@ const DynamicTable = ({ canCreate, canDelete, contentTypeName, isLoading, layout
       headers={tableHeaders}
       rows={rows}
       withBulkActions
-      withMainAction={canDelete}
+      withMainAction={canDelete && isBulkable}
     >
       <TableRows
         canCreate={canCreate}
@@ -60,7 +68,7 @@ const DynamicTable = ({ canCreate, canDelete, contentTypeName, isLoading, layout
         headers={tableHeaders}
         rows={rows}
         withBulkActions
-        withMainAction={canDelete}
+        withMainAction={canDelete && isBulkable}
       />
     </Table>
   );
@@ -70,6 +78,7 @@ DynamicTable.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
   contentTypeName: PropTypes.string.isRequired,
+  isBulkable: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   layout: PropTypes.exact({
     components: PropTypes.object.isRequired,

packages/core/admin/admin/src/content-manager/components/Search/index.js

@@ -1,87 +0,0 @@
-/*
- *
- * Search
- *
- */
-
-import React from 'react';
-import { isEmpty, upperFirst } from 'lodash';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { HeaderSearch } from '@strapi/helper-plugin';
-import getTrad from '../../utils/getTrad';
-
-const WAIT = 400;
-
-class Search extends React.Component {
-  state = { didType: false, value: this.props.initValue };
-
-  timer = null;
-
-  componentDidUpdate(prevProps) {
-    const { model, value } = this.props;
-
-    if (prevProps.model !== model || (!isEmpty(prevProps.value) && isEmpty(value))) {
-      this.resetState();
-    }
-  }
-
-  resetState = () => this.setState({ value: '' });
-
-  handleChange = ({ target }) => {
-    if (!this.state.didType) {
-      this.props.trackUsage('didSearch');
-    }
-
-    clearTimeout(this.timer);
-    this.setState({ value: target.value, didType: !!target.value });
-    this.timer = setTimeout(() => this.triggerChange(target.value), WAIT);
-  };
-
-  handleClick = () => {
-    this.setState({ value: '', didType: false });
-    this.triggerChange('');
-  };
-
-  triggerChange = value => {
-    const method = value ? 'push' : 'remove';
-    const params = method === 'push' ? { _q: value, page: 1 } : { _q: '' };
-
-    this.props.changeParams(params, method);
-  };
-
-  render() {
-    const { model } = this.props;
-    const { value } = this.state;
-
-    return (
-      <FormattedMessage id={getTrad('components.Search.placeholder')}>
-        {placeholder => (
-          <HeaderSearch
-            label={upperFirst(model)}
-            onChange={this.handleChange}
-            onClear={this.handleClick}
-            placeholder={placeholder}
-            value={value}
-          />
-        )}
-      </FormattedMessage>
-    );
-  }
-}
-
-Search.defaultProps = {
-  changeParams: () => {},
-  model: '',
-  value: '',
-};
-
-Search.propTypes = {
-  changeParams: PropTypes.func,
-  initValue: PropTypes.string.isRequired,
-  model: PropTypes.string,
-  trackUsage: PropTypes.func.isRequired,
-  value: PropTypes.string,
-};
-
-export default Search;

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';
@@ -35,7 +36,6 @@ import {
   getTrad,
 } from '../../utils';
 // import Container from '../../components/Container';
-// import Search from '../../components/Search';
 // import ListViewProvider from '../../components/ListViewProvider';
 // import InjectionZoneList from '../../components/InjectionZoneList';
 // import { Wrapper } from './components';
@@ -97,13 +97,13 @@ function ListView({
   slug,
 }) {
   const { total } = pagination;
-  // const {
-  //   contentType: {
-  //     // attributes,
-  //     // metadatas,
-  //     // settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
-  //   },
-  // } = layout;
+  const {
+    contentType: {
+      // attributes,
+      // metadatas,
+      settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
+    },
+  } = layout;
 
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
@@ -375,6 +375,23 @@ function ListView({
   return (
     <Main aria-busy={isLoading}>
       <HeaderLayout primaryAction={createAction} subtitle={subtitle} title={headerLayoutTitle} />
+      {canRead && (isSearchable || isFilterable) && (
+        <ActionLayout
+          startActions={
+            <>
+              {isSearchable && (
+                <Search
+                  label={formatMessage(
+                    { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
+                    { target: headerLayoutTitle }
+                  )}
+                  trackedEvent="didSearch"
+                />
+              )}
+            </>
+          }
+        />
+      )}
       <ContentLayout>
         {canRead ? (
           <>
@@ -382,6 +399,7 @@ function ListView({
               canCreate={canCreate}
               canDelete={canDelete}
               contentTypeName={headerLayoutTitle}
+              isBulkable={isBulkable}
               isLoading={isLoading}
               // FIXME: remove the layout props drilling
               layout={layout}

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;