katello 4.1.4 → 4.2.0.rc1

data/webpack/scenes/ContentViews/Details/Filters/Add/CVFilterAddModal.js

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { Redirect } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { STATUS } from 'foremanReact/constants';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Modal, ModalVariant, Form, FormGroup, TextInput, ActionGroup, Button, Radio, TextArea,
+  Split, SplitItem, Select, SelectOption } from '@patternfly/react-core';
+import { createContentViewFilter } from '../../ContentViewDetailActions';
+import {
+  selectCreateContentViewFilter, selectCreateContentViewFilterStatus,
+  selectCreateContentViewFilterError,
+} from '../../../Details/ContentViewDetailSelectors';
+import { FILTER_TYPES } from '../../../ContentViewsConstants';
+import ContentType from '../ContentType';
+
+const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
+  const [inclusion, setInclusion] = useState(true);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [type, setType] = useState('rpm');
+  const [saving, setSaving] = useState(false);
+  const [typeSelectOpen, setTypeSelectOpen] = useState(false);
+  const dispatch = useDispatch();
+  const response = useSelector(state => selectCreateContentViewFilter(state));
+  const status = useSelector(state => selectCreateContentViewFilterStatus(state));
+  const error = useSelector(state => selectCreateContentViewFilterError(state));
+  const [redirect, setRedirect] = useState(false);
+
+  const onSave = () => {
+    setSaving(true);
+    dispatch(createContentViewFilter(
+      cvId,
+      {
+        name, description, inclusion, type,
+      },
+    ));
+  };
+
+  const onSelect = (event, selection) => {
+    setType(selection);
+    setTypeSelectOpen(false);
+  };
+
+  useDeepCompareEffect(() => {
+    const { id } = response || {};
+    if (id && status === STATUS.RESOLVED && saving) {
+      setSaving(false);
+      setRedirect(true);
+    } else if (status === STATUS.ERROR) {
+      setSaving(false);
+    }
+  }, [response, status, error, saving]);
+
+  if (redirect) {
+    const { id } = response;
+    return (<Redirect to={`/labs/content_views/${cvId}#filters?subContentId=${id}`} />);
+  }
+
+  return (
+    <Modal
+      title={__('Create filter')}
+      variant={ModalVariant.small}
+      isOpen={show}
+      onClose={() => {
+        setIsOpen(false);
+      }}
+      appendTo={document.body}
+    >
+      <Form>
+        <FormGroup label={__('Name')} isRequired fieldId="name">
+          <TextInput
+            isRequired
+            type="text"
+            id="name"
+            aria-label="input_name"
+            name="name"
+            value={name}
+            onChange={value => setName(value)}
+          />
+        </FormGroup>
+        <FormGroup>
+          <Split hasGutter>
+            <SplitItem>
+              <Radio
+                isChecked={inclusion}
+                name="radio-1"
+                onChange={checked => setInclusion(checked)}
+                label="Include Filter"
+                id="include_filter"
+                value="includeFilter"
+              />
+            </SplitItem>
+            <SplitItem>
+              <Radio
+                isChecked={!inclusion}
+                name="radio-1"
+                onChange={checked => setInclusion(!checked)}
+                label="Exclude Filter"
+                id="exclude_filter"
+                value="excludeFilter"
+              />
+            </SplitItem>
+          </Split>
+        </FormGroup>
+        <FormGroup label={__('Content type')} isRequired fieldId="content_type">
+          <Select
+            selections={type}
+            onSelect={onSelect}
+            isOpen={typeSelectOpen}
+            onToggle={isExpanded => setTypeSelectOpen(isExpanded)}
+            id="content_type"
+            name="content_type"
+            aria-label="ContentType"
+          >
+            {
+              FILTER_TYPES.map(item =>
+                <SelectOption key={item} value={item}><ContentType type={item} /></SelectOption>)
+            }
+          </Select>
+        </FormGroup>
+        <FormGroup label={__('Description')} fieldId="description">
+          <TextArea
+            type="text"
+            id="description"
+            name="description"
+            aria-label="input_description"
+            value={description}
+            onChange={value => setDescription(value)}
+          />
+        </FormGroup>
+        <ActionGroup>
+          <Button
+            aria-label="create_filter"
+            variant="primary"
+            isDisabled={saving}
+            onClick={() => onSave()}
+          >
+            {__('Create filter')}
+          </Button>
+          <Button variant="link" onClick={() => setIsOpen(false)}>
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+CVFilterAddModal.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  show: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func,
+};
+
+CVFilterAddModal.defaultProps = {
+  setIsOpen: null,
+};
+
+export default CVFilterAddModal;

data/webpack/scenes/ContentViews/Details/Filters/Add/__tests__/cvFilterAdd.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+
+
+import api from '../../../../../../services/api';
+import CVFilterAddModal from '../CVFilterAddModal';
+import { nockInstance, assertNockRequest } from '../../../../../../test-utils/nockWrapper';
+
+const cvCreateData = require('./cvFilterCreateResult.fixtures.json');
+
+const cvCreateFilterPath = api.getApiUrl('/content_view_filters?content_view_id=5');
+
+const setIsOpen = jest.fn();
+
+const createDetails = {
+  name: 'test',
+  description: 'Creating filter',
+  inclusion: true,
+  type: 'rpm',
+};
+
+const createdCVDetails = { ...cvCreateData };
+
+const form = <CVFilterAddModal cvId={5} show setIsOpen={setIsOpen} />;
+
+test('Can save content view filter from form', (done) => {
+  const createFilterscope = nockInstance
+    .post(cvCreateFilterPath, createDetails)
+    .reply(201, createdCVDetails);
+  const { queryByText, getByLabelText } = renderWithRedux(form);
+  expect(queryByText('Description')).toBeInTheDocument();
+
+  fireEvent.change(getByLabelText('input_name'), { target: { value: 'test' } });
+  fireEvent.change(getByLabelText('input_description'), { target: { value: 'Creating filter' } });
+
+  getByLabelText('create_filter').click();
+  assertNockRequest(createFilterscope, done);
+});
+
+test('Closes content view filter form upon save', async (done) => {
+  const createFilterscope = nockInstance
+    .post(cvCreateFilterPath, createDetails)
+    .reply(201, createdCVDetails);
+  const { queryByText, getByLabelText } = renderWithRedux(form);
+  fireEvent.change(getByLabelText('input_name'), { target: { value: 'test' } });
+  fireEvent.change(getByLabelText('input_description'), { target: { value: 'Creating filter' } });
+
+  getByLabelText('create_filter').click();
+  await patientlyWaitFor(() => {
+    expect(queryByText('Description')).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(createFilterscope, done);
+});

data/webpack/scenes/ContentViews/Details/Filters/Add/__tests__/cvFilterCreateResult.fixtures.json

@@ -0,0 +1,124 @@
+{
+  "inclusion": true,
+  "id": 9,
+  "name": "test",
+  "description": "Creating filter",
+  "created_at": "2021-07-16 12:57:17 -0400",
+  "updated_at": "2021-07-16 12:57:17 -0400",
+  "content_view": {
+    "composite": false,
+    "component_ids": [],
+    "default": false,
+    "version_count": 2,
+    "latest_version": "2.0",
+    "latest_version_id": 7,
+    "auto_publish": false,
+    "solve_dependencies": false,
+    "import_only": false,
+    "repository_ids": [
+      1
+    ],
+    "id": 5,
+    "name": "test_capsule_syncing",
+    "label": "test_capsule_syncing",
+    "description": "",
+    "organization_id": 1,
+    "organization": {
+      "name": "Default Organization",
+      "label": "Default_Organization",
+      "id": 1
+    },
+    "created_at": "2021-07-16 10:22:02 -0400",
+    "updated_at": "2021-07-16 12:36:29 -0400",
+    "last_task": {
+      "id": "8130bdae-3b9f-425a-b25e-55ee9f2fff74",
+      "result": "success",
+      "last_sync_words": "20 minutes"
+    },
+    "latest_version_environments": [
+      {
+        "id": 1,
+        "name": "Library",
+        "label": "Library"
+      },
+      {
+        "id": 2,
+        "name": "dev",
+        "label": "dev"
+      }
+    ],
+    "environments": [
+      {
+        "id": 1,
+        "name": "Library",
+        "label": "Library",
+        "permissions": {
+          "readable": true
+        }
+      },
+      {
+        "id": 2,
+        "name": "dev",
+        "label": "dev",
+        "permissions": {
+          "readable": true
+        }
+      }
+    ],
+    "repositories": [
+      {
+        "id": 1,
+        "name": "repo1",
+        "label": "repo1",
+        "content_type": "yum",
+        "product": {
+          "id": 1,
+          "name": "test1"
+        },
+        "content_counts": {
+          "ostree_branch": 0,
+          "docker_manifest": 0,
+          "docker_tag": 0,
+          "rpm": 8,
+          "package": 8,
+          "package_group": 0,
+          "erratum": 2,
+          "module_stream": 0
+        }
+      }
+    ],
+    "versions": [
+      {
+        "id": 6,
+        "version": "1.0",
+        "published": "2021-07-16 10:22:26 -0400",
+        "environment_ids": []
+      },
+      {
+        "id": 7,
+        "version": "2.0",
+        "published": "2021-07-16 12:36:29 -0400",
+        "environment_ids": [
+          1,
+          2
+        ]
+      }
+    ],
+    "components": [],
+    "content_view_components": [],
+    "activation_keys": [],
+    "hosts": [],
+    "next_version": "3.0",
+    "last_published": "2021-07-16 12:36:29 -0400",
+    "permissions": {
+      "view_content_views": true,
+      "edit_content_views": true,
+      "destroy_content_views": true,
+      "publish_content_views": true,
+      "promote_or_remove_content_views": true
+    }
+  },
+  "repositories": [],
+  "type": "package_group",
+  "rules": []
+}

data/webpack/scenes/ContentViews/Details/Filters/CVPackageGroupFilterContent.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
 import { shallowEqual, useSelector } from 'react-redux';
 import { TableVariant } from '@patternfly/react-table';
@@ -38,7 +39,7 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
     __('Status'),
   ];
 
-  const buildRows = (results) => {
+  const buildRows = useCallback((results) => {
     const newRows = [];
     results.forEach((packageGroups) => {
       const {
@@ -62,9 +63,9 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
     });
 
     return newRows;
-  };
+  }, [filterId]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const { results, ...meta } = response;
     setMetadata(meta);
 
@@ -72,7 +73,7 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)]);
+  }, [response, loading, buildRows]);
 
   const emptyContentTitle = __('No package groups have been added to this filter.');
   const emptyContentBody = __("Add to this filter using the 'Add package group' button.");
@@ -101,7 +102,8 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
             cells={columnHeaders}
             variant={TableVariant.compact}
             autocompleteEndpoint={`/package_groups/auto_complete_search?filterid=${filterId}`}
-            fetchItems={params => getCVFilterPackageGroups(cvId, filterId, params)}
+            fetchItems={useCallback(params =>
+              getCVFilterPackageGroups(cvId, filterId, params), [cvId, filterId])}
           />
         </div>
       </Tab>

data/webpack/scenes/ContentViews/Details/Filters/CVRpmFilterContent.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
 import { shallowEqual, useSelector } from 'react-redux';
 import { TableVariant } from '@patternfly/react-table';
@@ -42,7 +43,7 @@ const CVRpmFilterContent = ({ filterId, inclusion }) => {
     return 'All versions';
   };
 
-  const buildRows = (results) => {
+  const buildRows = useCallback((results) => {
     const newRows = [];
     results.forEach((rule) => {
       const { name, architecture } = rule;
@@ -56,9 +57,9 @@ const CVRpmFilterContent = ({ filterId, inclusion }) => {
     });
 
     return newRows;
-  };
+  }, []);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const { results, ...meta } = response;
     setMetadata(meta);
 
@@ -66,7 +67,7 @@ const CVRpmFilterContent = ({ filterId, inclusion }) => {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)]);
+  }, [response, loading, buildRows]);
 
   const emptyContentTitle = __('No rules have been added to this filter.');
   const emptyContentBody = __("Add to this filter using the 'Add RPM' button.");
@@ -95,7 +96,7 @@ const CVRpmFilterContent = ({ filterId, inclusion }) => {
             cells={columnHeaders}
             variant={TableVariant.compact}
             autocompleteEndpoint={`/content_view_filters/${filterId}/rules/auto_complete_search`}
-            fetchItems={params => getCVFilterRules(filterId, params)}
+            fetchItems={useCallback(params => getCVFilterRules(filterId, params), [filterId])}
           />
         </div>
       </Tab>

data/webpack/scenes/ContentViews/Details/Filters/ContentViewFilterDetails.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useParams } from 'react-router-dom';
 import { shallowEqual, useSelector, useDispatch } from 'react-redux';
 import { STATUS } from 'foremanReact/constants';
@@ -25,11 +26,11 @@ const ContentViewFilterDetails = () => {
 
   useEffect(() => {
     dispatch(getCVFilterDetails(cvId, filterId));
-  }, []);
+  }, [dispatch, cvId, filterId]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (loaded) setDetails(response);
-  }, [JSON.stringify(response), loaded]);
+  }, [response, loaded]);
 
   const { type, inclusion } = details;
 

data/webpack/scenes/ContentViews/Details/Filters/ContentViewFilters.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-import { Label } from '@patternfly/react-core';
+import React, { useState, useEffect, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
+import { Label, Split, SplitItem, Button, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
 import { TableVariant } from '@patternfly/react-table';
 import { STATUS } from 'foremanReact/constants';
 import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
@@ -10,7 +11,7 @@ import PropTypes from 'prop-types';
 
 import TableWrapper from '../../../../components/Table/TableWrapper';
 import onSelect from '../../../../components/Table/helpers';
-import { getContentViewFilters } from '../ContentViewDetailActions';
+import { deleteContentViewFilter, deleteContentViewFilters, getContentViewFilters } from '../ContentViewDetailActions';
 import {
   selectCVFilters,
   selectCVFiltersStatus,
@@ -18,10 +19,12 @@ import {
 } from '../ContentViewDetailSelectors';
 import { truncate } from '../../../../utils/helpers';
 import ContentType from './ContentType';
+import CVFilterAddModal from './Add/CVFilterAddModal';
 
 const cvFilterUrl = (cvId, filterId) => `/labs/content_views/${cvId}#filters?subContentId=${filterId}`;
 
 const ContentViewFilters = ({ cvId }) => {
+  const dispatch = useDispatch();
   const response = useSelector(state => selectCVFilters(state, cvId), shallowEqual);
   const status = useSelector(state => selectCVFiltersStatus(state, cvId), shallowEqual);
   const error = useSelector(state => selectCVFiltersError(state, cvId), shallowEqual);
@@ -29,6 +32,12 @@ const ContentViewFilters = ({ cvId }) => {
   const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
   const loading = status === STATUS.PENDING;
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const [bulkActionOpen, setBulkActionOpen] = useState(false);
+  const [bulkActionEnabled, setBulkActionEnabled] = useState(false);
+  const toggleBulkAction = () => setBulkActionOpen(prevState => !prevState);
+
+  const openAddModal = () => setAddModalOpen(true);
 
   const columnHeaders = [
     __('Name'),
@@ -38,14 +47,14 @@ const ContentViewFilters = ({ cvId }) => {
     __('Inclusion type'),
   ];
 
-  const buildRows = (results) => {
+  const buildRows = useCallback((results) => {
     const newRows = [];
     results.forEach((filter) => {
       let errataByDate = false;
       const {
-        id, name, type, description, updated_at: updatedAt, inclusion,
+        id, name, type, description, updated_at: updatedAt, inclusion, rules,
       } = filter;
-      if (filter.type === 'erratum' && filter.rules[0].types) errataByDate = true;
+      if (type === 'erratum' && rules[0]?.types) errataByDate = true;
 
       const cells = [
         { title: (type === 'package_group' || type === 'rpm') ? <Link to={cvFilterUrl(cvId, id)}>{name}</Link> : name },
@@ -60,12 +69,24 @@ const ContentViewFilters = ({ cvId }) => {
         },
       ];
 
-      newRows.push({ cells });
+      newRows.push({ cells, id });
     });
     return newRows;
+  }, [cvId]);
+
+  const bulkRemove = () => {
+    setBulkActionOpen(false);
+    const filterIds = rows.filter(({ selected }) => selected).map(({ id }) => id);
+    dispatch(deleteContentViewFilters(cvId, filterIds, () =>
+      dispatch(getContentViewFilters(cvId, {}))));
   };
 
   useEffect(() => {
+    const rowsAreSelected = rows.some(row => row.selected);
+    setBulkActionEnabled(rowsAreSelected);
+  }, [rows]);
+
+  useDeepCompareEffect(() => {
     const { results, ...meta } = response;
     setMetadata(meta);
 
@@ -73,13 +94,22 @@ const ContentViewFilters = ({ cvId }) => {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)]);
+  }, [response, loading, buildRows]);
+
+  const actionResolver = () => [
+    {
+      title: __('Remove'),
+      onClick: (_event, _rowId, { id }) => {
+        dispatch(deleteContentViewFilter(id, () =>
+          dispatch(getContentViewFilters(cvId, {}))));
+      },
+    },
+  ];
 
   const emptyContentTitle = __("You currently don't have any filters for this content view.");
   const emptyContentBody = __("Add filters using the 'Add filter' button above."); // needs link
   const emptySearchTitle = __('No matching filters found');
   const emptySearchBody = __('Try changing your search settings.');
-
   return (
     <TableWrapper
       {...{
@@ -93,13 +123,42 @@ const ContentViewFilters = ({ cvId }) => {
         updateSearchQuery,
         error,
         status,
+        actionResolver,
       }}
       onSelect={onSelect(rows, setRows)}
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint="/content_view_filters/auto_complete_search"
-      fetchItems={params => getContentViewFilters(cvId, params)}
-    />);
+      fetchItems={useCallback(params => getContentViewFilters(cvId, params), [cvId])}
+    >
+      <Split hasGutter>
+        <SplitItem>
+          <Button onClick={openAddModal} variant="secondary" aria-label="create_filter">
+            {__('Create filter')}
+          </Button>
+        </SplitItem>
+        <SplitItem>
+          <Dropdown
+            toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+            isOpen={bulkActionOpen}
+            isPlain
+            dropdownItems={[
+              <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={bulkRemove}>
+                {__('Remove')}
+              </DropdownItem>]
+            }
+          />
+        </SplitItem>
+      </Split>
+      {addModalOpen &&
+        <CVFilterAddModal
+          cvId={cvId}
+          show={addModalOpen}
+          setIsOpen={setAddModalOpen}
+          aria-label="add_filter_modal"
+        />
+      }
+    </TableWrapper>);
 };
 
 

data/webpack/scenes/ContentViews/Details/Filters/__tests__/contentViewFilters.test.js

@@ -90,3 +90,80 @@ test('Can search for filter', async (done) => {
   assertNockRequest(initialScope);
   assertNockRequest(searchResultScope, done);
 });
+
+test('Can remove a filter', async (done) => {
+  const { id } = firstFilter;
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const getContentViewScope = nockInstance
+    .get(cvFilters)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+
+  const removeFilterScope = nockInstance
+    .delete(api.getApiUrl(`/content_view_filters/${id}`))
+    .query(true)
+    .reply(200, {});
+
+  const callbackGetContentViewScope = nockInstance
+    .get(cvFilters)
+    .query(true)
+    .reply(200, {});
+
+  const { getAllByLabelText, getByText } = renderWithRedux(
+    <ContentViewFilters cvId={1} />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'false');
+  });
+  fireEvent.click(getAllByLabelText('Actions')[0]);
+  expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
+  await patientlyWaitFor(() => expect(getByText('Remove')).toBeInTheDocument());
+  fireEvent.click(getByText('Remove'));
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(getContentViewScope);
+  assertNockRequest(removeFilterScope);
+  assertNockRequest(callbackGetContentViewScope, done);
+});
+
+test('Can remove multiple filters', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const getContentViewScope = nockInstance
+    .get(cvFilters)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+
+  const removeFilterScope = nockInstance
+    .put(
+      api.getApiUrl('/content_views/1/remove_filters'),
+      { filter_ids: [4, 5, 6, 7, 8, 9] },
+    )
+    .reply(200, {});
+
+  const callbackGetContentViewScope = nockInstance
+    .get(cvFilters)
+    .query(true)
+    .reply(200, {});
+
+  const { getAllByLabelText, getByLabelText, getByText } = renderWithRedux(
+    <ContentViewFilters cvId={1} />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    fireEvent.click(getByLabelText('Select all rows'));
+    expect(getAllByLabelText('bulk_actions')[0]).toHaveAttribute('aria-expanded', 'false');
+  });
+  fireEvent.click(getAllByLabelText('bulk_actions')[0]);
+  expect(getAllByLabelText('bulk_actions')[0]).toHaveAttribute('aria-expanded', 'true');
+  await patientlyWaitFor(() => expect(getByText('Remove')).toBeInTheDocument());
+  fireEvent.click(getByText('Remove'));
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(getContentViewScope);
+  assertNockRequest(removeFilterScope);
+  assertNockRequest(callbackGetContentViewScope, done);
+});