Skip to content

Commit 3cc6c41

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #13456 from rhamilto/OCPBUGS-25530
OCPBUGS-25530: fix bug where filter at mobile could be empty on Searc…
2 parents cc02829 + ef5a121 commit 3cc6c41

1 file changed

Lines changed: 109 additions & 105 deletions

File tree

‎frontend/public/components/filter-toolbar.tsx‎

Lines changed: 109 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -296,115 +296,119 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
296296
clearFiltersButtonText={t('public~Clear all filters')}
297297
>
298298
<ToolbarContent>
299-
<ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="md">
300-
{rowFilters?.length > 0 && (
301-
<ToolbarItem>
302-
{_.reduce(
303-
Object.keys(filters),
304-
(acc, key) => (
305-
<ToolbarFilter
306-
key={key}
307-
chips={_.intersection(selectedRowFilters, filters[key]).map((item) => {
308-
return {
309-
key: item,
310-
node: filtersNameMap[item],
311-
};
312-
})}
313-
deleteChip={(_filter, chip: ToolbarChip) => updateRowFilterSelected([chip.key])}
314-
categoryName={key}
315-
deleteChipGroup={() => clearAllRowFilter(key)}
316-
chipGroupCollapsedText={t('public~{{numRemaining}} more', {
317-
numRemaining: '${remaining}',
318-
})}
319-
chipGroupExpandedText={t('public~Show less')}
320-
>
321-
{acc}
322-
</ToolbarFilter>
323-
),
324-
<div data-test-id="filter-dropdown-toggle">
325-
<SelectDeprecated
326-
placeholderText={
327-
<span>
328-
<FilterIcon className="span--icon__right-margin" />
329-
{t('public~Filter')}
330-
</span>
331-
}
332-
isOpen={isOpen}
333-
onToggle={(_toggleEvent, isExpanded) => setOpen(isExpanded)}
334-
onSelect={onRowFilterSelect}
335-
variant={SelectVariantDeprecated.checkbox}
336-
selections={selectedRowFilters}
337-
isCheckboxSelectionBadgeHidden
338-
isGrouped
339-
maxHeight="60vh"
340-
>
341-
{dropdownItems}
342-
</SelectDeprecated>
343-
</div>,
344-
)}
345-
</ToolbarItem>
346-
)}
347-
{!hideNameLabelFilters && (
348-
<ToolbarItem className="co-filter-search--full-width">
349-
<ToolbarFilter
350-
deleteChipGroup={() => {
351-
setLabelInputText('');
352-
applyLabelFilters([]);
353-
}}
354-
chips={labelSelection}
355-
deleteChip={(f, chip: string) => {
356-
setLabelInputText('');
357-
applyLabelFilters(_.difference(labelSelection, [chip]));
358-
}}
359-
categoryName={t('public~Label')}
360-
>
299+
{(rowFilters?.length > 0 || !hideNameLabelFilters) && (
300+
<ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="md">
301+
{rowFilters?.length > 0 && (
302+
<ToolbarItem>
303+
{_.reduce(
304+
Object.keys(filters),
305+
(acc, key) => (
306+
<ToolbarFilter
307+
key={key}
308+
chips={_.intersection(selectedRowFilters, filters[key]).map((item) => {
309+
return {
310+
key: item,
311+
node: filtersNameMap[item],
312+
};
313+
})}
314+
deleteChip={(_filter, chip: ToolbarChip) =>
315+
updateRowFilterSelected([chip.key])
316+
}
317+
categoryName={key}
318+
deleteChipGroup={() => clearAllRowFilter(key)}
319+
chipGroupCollapsedText={t('public~{{numRemaining}} more', {
320+
numRemaining: '${remaining}',
321+
})}
322+
chipGroupExpandedText={t('public~Show less')}
323+
>
324+
{acc}
325+
</ToolbarFilter>
326+
),
327+
<div data-test-id="filter-dropdown-toggle">
328+
<SelectDeprecated
329+
placeholderText={
330+
<span>
331+
<FilterIcon className="span--icon__right-margin" />
332+
{t('public~Filter')}
333+
</span>
334+
}
335+
isOpen={isOpen}
336+
onToggle={(_toggleEvent, isExpanded) => setOpen(isExpanded)}
337+
onSelect={onRowFilterSelect}
338+
variant={SelectVariantDeprecated.checkbox}
339+
selections={selectedRowFilters}
340+
isCheckboxSelectionBadgeHidden
341+
isGrouped
342+
maxHeight="60vh"
343+
>
344+
{dropdownItems}
345+
</SelectDeprecated>
346+
</div>,
347+
)}
348+
</ToolbarItem>
349+
)}
350+
{!hideNameLabelFilters && (
351+
<ToolbarItem className="co-filter-search--full-width">
361352
<ToolbarFilter
362-
chips={nameInputText ? [nameInputText] : []}
363-
deleteChip={() => {
364-
setNameInputText('');
365-
applyNameFilter('');
353+
deleteChipGroup={() => {
354+
setLabelInputText('');
355+
applyLabelFilters([]);
366356
}}
367-
categoryName={translatedNameFilterTitle}
357+
chips={labelSelection}
358+
deleteChip={(f, chip: string) => {
359+
setLabelInputText('');
360+
applyLabelFilters(_.difference(labelSelection, [chip]));
361+
}}
362+
categoryName={t('public~Label')}
368363
>
369-
<div className="pf-v5-c-input-group co-filter-group">
370-
{!hideLabelFilter && (
371-
<DropdownInternal
372-
items={filterDropdownItems}
373-
onChange={(type) => setFilterType(FilterType[type])}
374-
selectedKey={filterType}
375-
title={translateFilterType(filterType)}
376-
/>
377-
)}
378-
{filterType === FilterType.LABEL ? (
379-
<AutocompleteInput
380-
className="co-text-node"
381-
onSuggestionSelect={(selected) => {
382-
applyLabelFilters(_.uniq([...labelSelection, selected]));
383-
}}
384-
showSuggestions
385-
textValue={labelInputText}
386-
setTextValue={setLabelInputText}
387-
placeholder={labelFilterPlaceholder ?? t('public~Search by label...')}
388-
data={data}
389-
labelPath={labelPath}
390-
/>
391-
) : (
392-
<TextFilter
393-
data-test="name-filter-input"
394-
value={nameInputText}
395-
onChange={(_event, value: string) => {
396-
setNameInputText(value);
397-
debounceApplyNameFilter(value);
398-
}}
399-
placeholder={nameFilterPlaceholder ?? t('public~Search by name...')}
400-
/>
401-
)}
402-
</div>
364+
<ToolbarFilter
365+
chips={nameInputText ? [nameInputText] : []}
366+
deleteChip={() => {
367+
setNameInputText('');
368+
applyNameFilter('');
369+
}}
370+
categoryName={translatedNameFilterTitle}
371+
>
372+
<div className="pf-v5-c-input-group co-filter-group">
373+
{!hideLabelFilter && (
374+
<DropdownInternal
375+
items={filterDropdownItems}
376+
onChange={(type) => setFilterType(FilterType[type])}
377+
selectedKey={filterType}
378+
title={translateFilterType(filterType)}
379+
/>
380+
)}
381+
{filterType === FilterType.LABEL ? (
382+
<AutocompleteInput
383+
className="co-text-node"
384+
onSuggestionSelect={(selected) => {
385+
applyLabelFilters(_.uniq([...labelSelection, selected]));
386+
}}
387+
showSuggestions
388+
textValue={labelInputText}
389+
setTextValue={setLabelInputText}
390+
placeholder={labelFilterPlaceholder ?? t('public~Search by label...')}
391+
data={data}
392+
labelPath={labelPath}
393+
/>
394+
) : (
395+
<TextFilter
396+
data-test="name-filter-input"
397+
value={nameInputText}
398+
onChange={(_event, value: string) => {
399+
setNameInputText(value);
400+
debounceApplyNameFilter(value);
401+
}}
402+
placeholder={nameFilterPlaceholder ?? t('public~Search by name...')}
403+
/>
404+
)}
405+
</div>
406+
</ToolbarFilter>
403407
</ToolbarFilter>
404-
</ToolbarFilter>
405-
</ToolbarItem>
406-
)}
407-
</ToolbarToggleGroup>
408+
</ToolbarItem>
409+
)}
410+
</ToolbarToggleGroup>
411+
)}
408412
{columnLayout?.id && !hideColumnManagement && (
409413
<ToolbarGroup>
410414
<ToolbarItem>

0 commit comments

Comments
 (0)