HMS-11117: delete whole filter type with multiple selected values

src/PresentationalComponents/AdvisoryHeader/AdvisoryHeader.js

@@ -1,3 +1,4 @@
+import React, { Fragment, lazy, Suspense, useState } from 'react';
 import {
   Button,
   Content,
@@ -12,7 +13,6 @@ import {
 } from '@patternfly/react-core';
 import { processDate } from '@redhat-cloud-services/frontend-components-utilities/helpers';
 import propTypes from 'prop-types';
-import React, { Fragment, lazy, Suspense, useState } from 'react';
 import messages from '../../Messages';
 import WithLoader, {
   WithLoaderVariants,
@@ -51,19 +51,19 @@ const AdvisoryHeader = ({ attributes, isLoading }) => {
             </StackItem>
             <StackItem>
               {attributes.public_date && (
-                <React.Fragment>
+                <>
                   {intl.formatMessage(messages.labelsPublicDate, {
                     date: processDate(attributes.public_date),
                   })}
                   <br />
-                </React.Fragment>
+                </>
               )}
               {attributes.modified_date && (
-                <React.Fragment>
+                <>
                   {intl.formatMessage(messages.labelsModifiedDate, {
                     date: processDate(attributes.modified_date),
                   })}
-                </React.Fragment>
+                </>
               )}
             </StackItem>
             {isRHAdvisory(attributes.id) && (

src/PresentationalComponents/Filters/RebootFilter.js

@@ -1,13 +1,13 @@
+import { useMemo } from 'react';
 import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter';
-import React from 'react';
 import { rebootRequired } from '../../Utilities/constants';
 import { intl } from '../../Utilities/IntlProvider';
 import messages from '../../Messages';
 
 const rebootFilter = (apply, currentFilter = {}) => {
   let { reboot_required: currentValue } = currentFilter;
 
-  const rebootMap = React.useMemo(
+  const rebootMap = useMemo(
     () =>
       rebootRequired.map(({ value, label }) => ({
         label,

src/PresentationalComponents/Filters/SeverityFilter.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import { advisorySeverities } from '../../Utilities/constants';
 import { intl } from '../../Utilities/IntlProvider';
 import messages from '../../Messages';
@@ -8,7 +8,7 @@ import { conditionalFilterType } from '@redhat-cloud-services/frontend-component
 // Keep UI state as string arrays for PatternFly checkboxes, but collapse `[null]` to bare `null`.
 
 const severityFilter = (apply, currentFilter = {}) => {
-  const advisorySeverityMap = React.useMemo(
+  const advisorySeverityMap = useMemo(
     () =>
       advisorySeverities.map(({ value, label }) => ({
         label,

src/PresentationalComponents/Filters/StatusFilter.js

@@ -1,13 +1,13 @@
+import { useMemo } from 'react';
 import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter';
-import React from 'react';
 import { updatableTypes } from '../../Utilities/constants';
 import { intl } from '../../Utilities/IntlProvider';
 import messages from '../../Messages';
 
 const statusFilter = (apply, currentFilter = {}) => {
   let { update_status: currentValue } = currentFilter;
 
-  const updatableTypesMap = React.useMemo(
+  const updatableTypesMap = useMemo(
     () =>
       updatableTypes.map(({ value, label }) => ({
         label,

src/PresentationalComponents/Filters/SystemStaleFilter.js

@@ -1,13 +1,13 @@
+import { useMemo } from 'react';
 import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter';
-import React from 'react';
 import { staleSystems } from '../../Utilities/constants';
 import { intl } from '../../Utilities/IntlProvider';
 import messages from '../../Messages';
 
 const systemsStaleFilter = (apply, currentFilter = {}) => {
   let { stale: currentValue } = currentFilter;
 
-  const staleMap = React.useMemo(
+  const staleMap = useMemo(
     () =>
       staleSystems.map(({ value, label }) => ({
         label,

src/PresentationalComponents/Filters/TypeFilter.js

@@ -1,11 +1,11 @@
+import { useMemo } from 'react';
 import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter';
-import React from 'react';
 import { advisoryTypes } from '../../Utilities/constants';
 import { intl } from '../../Utilities/IntlProvider';
 import messages from '../../Messages';
 
 const typeFilter = (apply, currentFilter = {}) => {
-  const advisoryTypesMap = React.useMemo(
+  const advisoryTypesMap = useMemo(
     () =>
       advisoryTypes.map(({ value, label }) => ({
         label,

src/PresentationalComponents/Header/Header.js

@@ -1,11 +1,11 @@
+import React from 'react';
 import { Split, SplitItem } from '@patternfly/react-core';
 import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
 import PropTypes from 'prop-types';
-import React from 'react';
 import HeaderBreadcrumbs from './HeaderBreadcrumbs';
 
 const Header = ({ title, breadcrumbs, children, headerOUIA, actions }) => (
-  <React.Fragment>
+  <>
     <PageHeader data-ouia-component-type={`${headerOUIA}-page-header`}>
       {breadcrumbs && <HeaderBreadcrumbs items={breadcrumbs} headerOUIA={headerOUIA} />}
       <Split hasGutter>
@@ -17,7 +17,7 @@ const Header = ({ title, breadcrumbs, children, headerOUIA, actions }) => (
       </Split>
       {children}
     </PageHeader>
-  </React.Fragment>
+  </>
 );
 
 Header.propTypes = {

src/PresentationalComponents/PackageHeader/PackageHeader.js

@@ -1,11 +1,11 @@
+import React, { useState } from 'react';
 import { Grid, GridItem, Stack, StackItem } from '@patternfly/react-core';
 import propTypes from 'prop-types';
-import React, { Fragment } from 'react';
 import { truncateDescription } from '../../Utilities/Helpers';
 import WithLoader, { WithLoaderVariants } from '../WithLoader/WithLoader';
 
 const PackageHeader = ({ attributes: { description }, isLoading }) => {
-  const [wordLength, setWordLength] = React.useState(1000);
+  const [wordLength, setWordLength] = useState(1000);
 
   return (
     (description && (
@@ -21,7 +21,7 @@ const PackageHeader = ({ attributes: { description }, isLoading }) => {
           </WithLoader>
         </GridItem>
       </Grid>
-    )) || <Fragment />
+    )) || <></>
   );
 };
 

src/PresentationalComponents/StatusReports/AdvisoriesStatusReport.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import propTypes from 'prop-types';
 import { intl } from '../../Utilities/IntlProvider';
 import { fetchApplicableAdvisoriesApi } from '../../Utilities/api/api';
@@ -46,8 +46,8 @@ const StatusCard = ({ advisory: { attributes, id } }) => (
 );
 
 const AdvisoriesStatusBar = () => {
-  const [advisories, setAdvisories] = React.useState({});
-  React.useEffect(() => {
+  const [advisories, setAdvisories] = useState({});
+  useEffect(() => {
     fetchApplicableAdvisoriesApi({
       limit: 4,
       sort: '-advisory_type_name,-applicable_systems',

src/PresentationalComponents/StatusReports/SystemsStatusReport.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { CheckCircleIcon, BundleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
 import propTypes from 'prop-types';
@@ -25,7 +25,7 @@ const StatusCard = ({ title, color, Icon, value, filter, apply }) => (
 );
 
 const SystemsStatusReport = ({ apply, queryParams }) => {
-  const [subtotals, setSubtotals] = React.useState({});
+  const [subtotals, setSubtotals] = useState({});
 
   const { selectedTags, selectedGlobalTags, systemProfile } = useSelector(
     ({ GlobalFilterStore }) => GlobalFilterStore,
@@ -55,7 +55,7 @@ const SystemsStatusReport = ({ apply, queryParams }) => {
     return result;
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     fetchResource();
   }, [
     queryParams?.filter?.os?.length,

src/PresentationalComponents/TableView/TableView.js

@@ -42,13 +42,21 @@ const TableView = ({
     [metadata.limit, metadata.offset],
   );
 
-  const [deleteFilters] = useRemoveFilter(filter, apply, defaultFilters);
+  const [deleteFilters, deleteFilterGroup] = useRemoveFilter(filter, apply, defaultFilters);
   const selectedCount = selectedRows && arrayFromObj(selectedRows).length;
   const { code, hasError, isLoading } = status;
   const bulkSelectConfig = useBulkSelectConfig(selectedCount, onSelect, metadata, rows, onCollapse);
   const activeFiltersConfig = useMemo(
-    () => buildActiveFilterConfig(filter, search, deleteFilters, searchChipLabel, defaultFilters),
-    [defaultFilters, deleteFilters, filter, search, searchChipLabel],
+    () =>
+      buildActiveFilterConfig(
+        filter,
+        search,
+        deleteFilters,
+        deleteFilterGroup,
+        searchChipLabel,
+        defaultFilters,
+      ),
+    [defaultFilters, deleteFilters, deleteFilterGroup, filter, search, searchChipLabel],
   );
 
   return (

src/SmartComponents/AdvisoryDetail/AdvisoryDetail.js

@@ -1,6 +1,6 @@
+import React, { useEffect } from 'react';
 import { Stack, StackItem, Content, ContentVariants } from '@patternfly/react-core';
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
-import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import messages from '../../Messages';
@@ -29,11 +29,11 @@ const AdvisoryDetail = () => {
   const advisoryDetails = useSelector(({ AdvisoryDetailStore }) => AdvisoryDetailStore);
   const status = useSelector(({ AdvisoryDetailStore }) => AdvisoryDetailStore.status);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchAvisoryDetails({ advisoryName }));
   }, []);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       dispatch(clearEntitiesStore());
       dispatch(clearAdvisoryDetailStore());
@@ -43,7 +43,7 @@ const AdvisoryDetail = () => {
 
   const { attributes } = advisoryDetails.data;
   return (
-    <React.Fragment>
+    <>
       <Header
         title={advisoryName}
         headerOUIA='advisory-details'
@@ -82,7 +82,7 @@ const AdvisoryDetail = () => {
           </StackItem>
         </Stack>
       </Main>
-    </React.Fragment>
+    </>
   );
 };
 

src/SmartComponents/AdvisorySystems/AdvisorySystems.js

@@ -1,5 +1,5 @@
-import propTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
+import propTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import ErrorHandler from '../../PresentationalComponents/Snippets/ErrorHandler';
 import {
@@ -47,7 +47,7 @@ const AdvisorySystems = ({ advisoryName }) => {
   }
 
   return (
-    <React.Fragment>
+    <>
       {(isRemediationOpen && (
         <RemediationWizard
           data={remediationIssues}
@@ -63,7 +63,7 @@ const AdvisorySystems = ({ advisoryName }) => {
         decodedParams={decodedParams}
         apply={apply}
       />
-    </React.Fragment>
+    </>
   );
 };
 

src/SmartComponents/AdvisorySystems/AdvisorySystemsTable.js

@@ -20,6 +20,7 @@ import {
 import { pageDefaultFilters, remediationIdentifiers } from '../../Utilities/constants';
 import {
   arrayFromObj,
+  buildActiveFilterConfig,
   persistantParams,
   remediationProvider,
   removeUndefinedObjectKeys,
@@ -35,7 +36,7 @@ import {
 import { intl } from '../../Utilities/IntlProvider';
 import { ADVISORY_SYSTEMS_COLUMNS, systemsRowActions } from '../Systems/SystemsListAssets';
 import AsyncRemediationButton from '../Remediation/AsyncRemediationButton';
-import { buildActiveFiltersConfig, mergeInventoryColumns } from '../../Utilities/SystemsHelpers';
+import { mergeInventoryColumns } from '../../Utilities/SystemsHelpers';
 import advisoryStatusFilter from '../../PresentationalComponents/Filters/AdvisoryStatusFilter';
 
 const AdvisorySystemsTable = ({
@@ -57,7 +58,7 @@ const AdvisorySystemsTable = ({
 
   const { systemProfile, selectedTags, filter, search, page, perPage, sort } = queryParams;
 
-  const [deleteFilters] = useRemoveFilter(
+  const [deleteFilters, deleteFilterGroup] = useRemoveFilter(
     { search, ...filter },
     apply,
     pageDefaultFilters.advisorySystems,
@@ -75,10 +76,13 @@ const AdvisorySystemsTable = ({
     ],
   };
 
-  const activeFiltersConfig = buildActiveFiltersConfig(
+  const activeFiltersConfig = buildActiveFilterConfig(
     filter,
     search,
     deleteFilters,
+    deleteFilterGroup,
+    intl.formatMessage(messages.labelsFiltersSystemsSearchTitle),
+    deleteFilterGroup,
     pageDefaultFilters.advisorySystems,
   );
 

src/SmartComponents/AdvisorySystems/AdvisorySystemsTable.test.js

@@ -192,6 +192,7 @@ describe('AdvisorySystemsTable.js', () => {
           deleteTitle: 'Clear filters',
           filters: [],
           onDelete: expect.any(Function),
+          onDeleteGroup: expect.any(Function),
         },
       }),
       {},
@@ -228,6 +229,7 @@ describe('AdvisorySystemsTable.js', () => {
             },
           ],
           onDelete: expect.any(Function),
+          onDeleteGroup: expect.any(Function),
         },
       }),
       {},

src/SmartComponents/PackageDetail/PackageDetail.js

@@ -1,6 +1,6 @@
+import React, { useEffect } from 'react';
 import { Stack, StackItem, Content, ContentVariants } from '@patternfly/react-core';
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
-import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import messages from '../../Messages';
@@ -25,11 +25,11 @@ const PackageDetail = () => {
   const packageDetails = useSelector(({ PackageDetailStore }) => PackageDetailStore);
   const status = useSelector(({ PackageDetailStore }) => PackageDetailStore.status);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchPackageDetails({ packageName }));
   }, []);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       dispatch(clearPackageDetailStore());
     },
@@ -39,7 +39,7 @@ const PackageDetail = () => {
   const { attributes } = packageDetails.data;
 
   return (
-    <React.Fragment>
+    <>
       <Header
         title={packageName}
         headerOUIA='package-details'
@@ -79,7 +79,7 @@ const PackageDetail = () => {
           </StackItem>
         </Stack>
       </Main>
-    </React.Fragment>
+    </>
   );
 };