Add Search to CM

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

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

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