NEW Add search/filter to campaign admin (silverstripe#380)

Author: GuySartorelli

client/dist/js/bundle.js

@@ -10,6 +10,8 @@ import * as breadcrumbsActions from 'state/breadcrumbs/BreadcrumbsActions';
 import * as recordActions from 'state/records/RecordsActions';
 import Breadcrumb from 'components/Breadcrumb/Breadcrumb';
 import FormAction from 'components/FormAction/FormAction';
+import Search, { hasFilters } from 'components/Search/Search';
+import SearchToggle from 'components/Search/SearchToggle';
 import i18n from 'i18n';
 import Toolbar from 'components/Toolbar/Toolbar';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
@@ -29,6 +31,8 @@ class CampaignAdmin extends Component {
     this.state = {
       loading: false,
       focusIntroCloseButton: false,
+      showSearch: false,
+      filters: {},
     };
 
     this.helpButtonRef = React.createRef();
@@ -51,6 +55,11 @@ class CampaignAdmin extends Component {
       },
     });
 
+    this.searchCampaignsApi = backend.createEndpointFetcher({
+      ...props.sectionConfig.searchCampaignsEndpoint,
+      payloadSchema: {},
+    });
+
     // Bind
     this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
     this.handleCreateCampaignSubmit = this.handleCreateCampaignSubmit.bind(this);
@@ -60,6 +69,9 @@ class CampaignAdmin extends Component {
     this.addCampaign = this.addCampaign.bind(this);
     this.handleHideMessage = this.handleHideMessage.bind(this);
     this.handleToggleMessage = this.handleToggleMessage.bind(this);
+    this.toggleSearch = this.toggleSearch.bind(this);
+    this.handleDoSearch = this.handleDoSearch.bind(this);
+    this.handleClearSearch = this.handleClearSearch.bind(this);
   }
 
   componentDidMount() {
@@ -87,6 +99,30 @@ class CampaignAdmin extends Component {
     }
   }
 
+  toggleSearch() {
+    this.setState(
+      prevState => ({ showSearch: !prevState.showSearch })
+    );
+  }
+
+  handleClearSearch() {
+    this.setState({ showSearch: false });
+    this.handleDoSearch({});
+  }
+
+  handleDoSearch(filters) {
+    this.setState({ filters });
+    // If there are no filters, or the filter values are empty, just fetch everything
+    if (!hasFilters(filters) || Object.values(filters).filter((val) => val || val === 0).length === 0) {
+      return this.fetchCampaignsList();
+    }
+    return this.props.campaignActions.searchCampaigns(
+      this.props.sectionConfig.treeClass,
+      this.searchCampaignsApi,
+      filters
+    );
+  }
+
   setBreadcrumbs(view, id, title) {
     const { sectionConfig: { reactRoutePath } } = this.props;
 
@@ -364,11 +400,11 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @returns {object}
    */
   renderDetailEditView() {
-    const { FormBuilderLoaderComponent, BreadcrumbComponent } = this.props;
+    const { FormBuilderLoaderComponent, BreadcrumbComponent, sectionConfig } = this.props;
     if (this.props.router.params.id <= 0) {
       return this.renderCreateView();
     }
-    const baseSchemaUrl = this.props.sectionConfig.form.campaignEditForm.schemaUrl;
+    const baseSchemaUrl = sectionConfig.form.campaignEditForm.schemaUrl;
     const schemaUrl = joinUrlPaths(baseSchemaUrl, '/', this.props.router.params.id);
 
     return (
@@ -419,8 +455,8 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @returns {object}
    */
   renderIndexView() {
-    const { showMessage, BreadcrumbComponent, FormBuilderLoaderComponent } = this.props;
-    const { schemaUrl } = this.props.sectionConfig.form.EditForm;
+    const { showMessage, BreadcrumbComponent, FormBuilderLoaderComponent, sectionConfig } = this.props;
+    const { schemaUrl } = sectionConfig.form.EditForm;
     const formActionProps = {
       title: i18n._t('CampaignAdmin.ADDNEWCAMPAIGN', 'Add new campaign'),
       icon: 'plus',
@@ -433,11 +469,27 @@ By removing this item all linked items will be removed unless used elsewhere.`;
       identifier: 'Campaign.IndexView',
     };
 
+    const showSearch = hasFilters(this.state.filters) || this.state.showSearch;
+
     return (
       <div className="fill-height" aria-expanded="true">
         <Toolbar>
           <BreadcrumbComponent multiline />
+          <div className="campaign--toolbar__extra pull-xs-right fill-width vertical-align-items">
+            <SearchToggle toggled={showSearch} onToggle={this.toggleSearch} />
+          </div>
         </Toolbar>
+        {showSearch && <Search
+          onSearch={this.handleDoSearch}
+          id="CampaignSearchForm"
+          formSchemaUrl={sectionConfig.form.campaignSearchForm.schemaUrl}
+          onHide={this.handleClearSearch}
+          displayBehavior="HIDEABLE"
+          filters={this.state.filters}
+          filterPrefix="Search__"
+          addFilterPrefix
+          name={sectionConfig.searchCampaignsGeneralField}
+        />}
         <div className="panel panel--scrollable flexbox-area-grow">
           <IntroScreen
             show={showMessage}

client/dist/styles/bundle.css

@@ -173,3 +173,11 @@
 .campaign-toolbar {
   flex-direction: row-reverse;
 }
+
+.campaign--toolbar__extra {
+  width: auto;
+
+  button:last-of-type {
+    margin-right: -10px;
+  }
+}

client/src/containers/CampaignAdmin/CampaignAdmin.js

@@ -129,3 +129,27 @@ export function removeCampaignItem(removeItemApi, campaignId, itemId) {
       });
   };
 }
+
+export function searchCampaigns(recordType, searchCampaignsApi, filters) {
+  return (dispatch) => {
+    dispatch({
+      type: RECORD_ACTION_TYPES.FETCH_RECORDS_REQUEST,
+      payload: { recordType },
+    });
+
+    return searchCampaignsApi({ filters })
+      .then((response) => {
+        dispatch({
+          type: RECORD_ACTION_TYPES.FETCH_RECORDS_SUCCESS,
+          payload: { recordType, data: response },
+        });
+      })
+      .catch((error) => {
+        dispatch({
+          type: RECORD_ACTION_TYPES.FETCH_RECORDS_FAILURE,
+          payload: { error, recordType },
+        });
+        throw error;
+      });
+  };
+}

client/src/containers/CampaignAdmin/CampaignAdmin.scss

@@ -22,9 +22,9 @@
     ],
     "require": {
         "php": "^8.3",
-        "silverstripe/admin": "^3",
+        "silverstripe/admin": "^3.2",
         "silverstripe/framework": "^6.1",
-        "silverstripe/versioned": "^3"
+        "silverstripe/versioned": "^3.2"
     },
     "require-dev": {
         "phpunit/phpunit": "^11.3",

client/src/state/campaign/CampaignActions.js

@@ -20,6 +20,9 @@
 use SilverStripe\Model\List\SS_List;
 use SilverStripe\ORM\UnexpectedDataException;
 use SilverStripe\Core\Validation\ValidationResult;
+use SilverStripe\ORM\DataList;
+use SilverStripe\ORM\Search\SearchContext;
+use SilverStripe\ORM\Search\SearchContextForm;
 use SilverStripe\Security\PermissionProvider;
 use SilverStripe\Security\Security;
 use SilverStripe\Security\SecurityToken;
@@ -38,6 +41,8 @@ class CampaignAdmin extends LeftAndMain implements PermissionProvider
         'EditForm',
         'campaignEditForm',
         'campaignCreateForm',
+        'campaignSearchForm',
+        'searchCampaigns',
         'readCampaigns',
         'readCampaign',
         'deleteCampaign',
@@ -126,6 +131,9 @@ public function getClientConfig(): array
                 'campaignCreateForm' => [
                     'schemaUrl' => $this->Link('schema/campaignCreateForm')
                 ],
+                'campaignSearchForm' => [
+                    'schemaUrl' => $this->Link('schema/campaignSearchForm')
+                ],
             ],
             'readCampaignsEndpoint' => [
                 'url' => $this->Link('sets'),
@@ -143,6 +151,11 @@ public function getClientConfig(): array
                 'url' => $this->Link('removeCampaignItem/:id/:itemId'),
                 'method' => 'post'
             ],
+            'searchCampaignsEndpoint' => [
+                'url' => $this->Link('searchCampaigns'),
+                'method' => 'post'
+            ],
+            'searchCampaignsGeneralField' => $this->getCampaignSearchForm()->getSearchField(),
             'treeClass' => $this->config()->get('model_class')
         ]);
     }
@@ -231,7 +244,11 @@ protected function getPlaceholderGroups()
      */
     protected function getListResource()
     {
-        $items = $this->getListItems();
+        return $this->getResourceForList($this->getListItems());
+    }
+
+    private function getResourceForList(SS_List $items): array
+    {
         $count = $items->count();
         /** @var string $treeClass */
         $treeClass = $this->config()->get('model_class');
@@ -406,6 +423,18 @@ protected function getChangeSetItemResource(ChangeSetItem $changeSetItem)
      * @return SS_List<ChangeSet>
      */
     protected function getListItems()
+    {
+        return $this->getRawListItems()
+            ->filterByCallback(function ($item) {
+                /** @var ChangeSet $item */
+                return ($item->canView());
+            });
+    }
+
+    /**
+     * Gets list of campaigns whether they can be viewed or not
+     */
+    private function getRawListItems(): DataList
     {
         $changesets = ChangeSet::get();
         // Filter out published items if disabled
@@ -416,14 +445,9 @@ protected function getListItems()
         if (!$this->config()->get('show_inferred')) {
             $changesets = $changesets->filter('IsInferred', 0);
         }
-        return $changesets
-            ->filterByCallback(function ($item) {
-                /** @var ChangeSet $item */
-                return ($item->canView());
-            });
+        return $changesets;
     }
 
-
     /**
      * REST endpoint to get a campaign.
      *
@@ -720,6 +744,40 @@ public function getCampaignCreateForm()
         return $form;
     }
 
+    /**
+     * Get a SearchContextForm for searching campaigns, based on searchable fields config in ChangeSet
+     */
+    public function getCampaignSearchForm(?SearchContext $searchContext = null): SearchContextForm
+    {
+        if (!$searchContext) {
+            $searchContext = ChangeSet::singleton()->getDefaultSearchContext();
+        }
+        $form = SearchContextForm::create($this, $searchContext, 'campaignSearchForm');
+        return $form;
+    }
+
+    /**
+     * Search for campaigns using ChangeSet's SearchContext
+     */
+    public function searchCampaigns(HTTPRequest $request): HTTPResponse
+    {
+        $searchContext = ChangeSet::singleton()->getDefaultSearchContext();
+        $filters = $request->requestVar('filters');
+        $form = $this->getCampaignSearchForm($searchContext);
+        $filterArguments = $form->prepareValuesForSearchContext($filters);
+        $results = $searchContext->getQuery($filterArguments, existingQuery: $this->getRawListItems());
+        $results = $results->filterByCallback(function ($item) {
+            /** @var ChangeSet $item */
+            return $item->canView();
+        });
+
+        $response = $this->getResponse();
+        $resourceArray = $this->getResourceForList($results);
+        $response->setBody(json_encode($resourceArray));
+        $response->addHeader('Content-Type', 'application/json');
+        return $response;
+    }
+
     /**
      * Save handler
      */

composer.json

@@ -0,0 +1,69 @@
+@javascript @retry
+Feature: Manage campaigns
+  As a cms author
+  I want to search/filter campaigns within the CMS
+  So that I can find specific campaigns quickly
+
+  Background:
+    Given a "ChangeSet" "First Campaign" with "Description"="this is a campaign"
+      And a "ChangeSet" "Second Campaign" with "Description"="lorem ipsum" and "State"="published" and "PublishDate"="2025-01-01 12:00:00"
+      And a "ChangeSet" "Third Campaign" with "Description"="lorem ipsum" and "State"="published" and "PublishDate"="2025-05-06 12:00:00"
+      And the "group" "CAMPAIGNS_EDITOR" has permissions "Access to 'Campaigns' section"
+      And I am logged in as a member of "CAMPAIGNS_EDITOR" group
+      And I go to "/admin/campaigns"
+
+  Scenario: I can search for campaigns using the general search
+    Given I should not see a "#CampaignSearchForm_searchbox" element
+    When I press the "Show search" button
+    # Validate we see the expected campaigns before searching
+    Then I should see a "#CampaignSearchForm_searchbox" element
+      And I should see the campaign "First Campaign"
+      And I should see the campaign "Second Campaign"
+      And I should see the campaign "Third Campaign"
+    # Search for something in the description
+    When I fill in "SearchBox__q" with "ipsum"
+      And I press the "Enter" key in the "SearchBox__q" field
+    Then I should not see the campaign "First Campaign"
+      And I should see the campaign "Second Campaign"
+      And I should see the campaign "Third Campaign"
+    # Clear search
+    When I press the "Close search" button
+    Then I should see the campaign "First Campaign"
+      And I should see the campaign "Second Campaign"
+      And I should see the campaign "Third Campaign"
+      And I should not see a "#CampaignSearchForm_searchbox" element
+    # Search for something in the title
+    When I press the "Show search" button
+      And I fill in "SearchBox__q" with "first"
+      And I press the "Enter" key in the "SearchBox__q" field
+    Then I should see the campaign "First Campaign"
+      And I should not see the campaign "Second Campaign"
+      And I should not see the campaign "Third Campaign"
+
+  Scenario: I can filter for campaigns using the search options
+    # Filter by unpublished campaigns
+    When I press the "Show search" button
+      And I press the "Search options" button
+      And I select "Active" from "Status"
+      And I press the "Search" button
+    Then I should see the campaign "First Campaign"
+      And I should not see the campaign "Second Campaign"
+      And I should not see the campaign "Third Campaign"
+    # Filter by published campaigns from a certain date
+    When I press the "Search options" button
+      And I select "Published" from "Status"
+      # We can't use `And I fill in "Search__PublishDate_SearchFrom" with "some date"` because
+      # the HTML5 datetime widget does weird things. This manual way works though.
+      And I focus on the "input[name='Search__PublishDate_SearchFrom']" element
+      And I type "01-05-2025" in the field
+      And I press the "Tab" key globally
+      And I type "12:00pm" in the field
+      And I press the "Search" button
+    Then I should not see the campaign "First Campaign"
+      And I should not see the campaign "Second Campaign"
+      And I should see the campaign "Third Campaign"
+    # Clear the publish date filter
+    When I click on the ".compact-tag-list__visible li.tag-component:nth-child(2) button.tag-component__delete" element
+    Then I should not see the campaign "First Campaign"
+      And I should see the campaign "Second Campaign"
+      And I should see the campaign "Third Campaign"