Skip to content

Commit 01c7208

Browse files
RohitRaj011RohitRaj011
committed
feat: StatusFilterButton - add pop-up menu for filters when valid filter count > 4
1 parent fcc0c9d commit 01c7208

File tree

1 file changed

+75
-34
lines changed

1 file changed

+75
-34
lines changed

‎src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

Lines changed: 75 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@
1616

1717
/* eslint-disable eqeqeq */
1818
import { useEffect, useState } from 'react'
19-
import { StyledRadioGroup as RadioGroup } from '../../../Common'
19+
import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
20+
import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common'
2021
import { NodeStatus, StatusFilterButtonType } from './types'
2122
import { IndexStore } from '../../Store'
2223

2324
export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => {
2425
const [selectedTab, setSelectedTab] = useState('all')
2526

27+
const maxInlineFilterCount = 4
2628
let allNodeCount: number = 0
2729
let healthyNodeCount: number = 0
2830
let progressingNodeCount: number = 0
@@ -44,7 +46,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
4446
allNodeCount += 1
4547
})
4648

47-
const filters = [
49+
const filterOptions = [
4850
{ status: 'all', count: allNodeCount, isSelected: selectedTab == 'all' },
4951
{ status: NodeStatus.Missing, count: missingNodeCount, isSelected: NodeStatus.Missing == selectedTab },
5052
{ status: NodeStatus.Degraded, count: failedNodeCount, isSelected: NodeStatus.Degraded == selectedTab },
@@ -55,6 +57,13 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
5557
},
5658
{ status: NodeStatus.Healthy, count: healthyNodeCount, isSelected: NodeStatus.Healthy == selectedTab },
5759
]
60+
const validFilterOptions = filterOptions.filter(({ count }) => count > 0)
61+
const displayedInlineFilters = validFilterOptions.slice(
62+
0,
63+
Math.min(maxInlineFilterCount, validFilterOptions.length),
64+
)
65+
const overflowFilters =
66+
validFilterOptions.length > maxInlineFilterCount ? validFilterOptions.slice(maxInlineFilterCount) : null
5867

5968
useEffect(() => {
6069
if (
@@ -75,38 +84,70 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
7584
setSelectedTab(event.target.value)
7685
}
7786

78-
return (
79-
<RadioGroup
80-
className="gui-yaml-switch status-filter-button"
81-
name="status-filter-button"
82-
initialTab={selectedTab}
83-
disabled={false}
84-
onChange={handleTabSwitch}
85-
>
86-
{filters.map(
87-
(filter, index) =>
88-
filter.count > 0 && (
89-
<RadioGroup.Radio
90-
value={filter.status}
91-
showTippy={index !== 0}
92-
tippyPlacement="top"
93-
tippyContent={filter.status}
94-
tippyClass="w-100 dc__first-letter-capitalize"
87+
const handleMenuOptionClick = (status: string) => () => setSelectedTab(status)
88+
89+
const renderOverflowFilters = () =>
90+
overflowFilters ? (
91+
<PopupMenu autoClose>
92+
<PopupMenu.Button
93+
isKebab
94+
rootClassName="flex p-4 dc__border dc__no-left-radius dc__right-radius-4 bcn-0 dc__hover-n50"
95+
>
96+
<ICCaretDown className="icon-dim-14 scn-6" />
97+
</PopupMenu.Button>
98+
<PopupMenu.Body rootClassName="w-150 py-4 mt-4" style={{ left: '136px' }}>
99+
{overflowFilters.map((filter) => (
100+
<button
101+
key={filter.status}
102+
type="button"
103+
className={`dc__transparent w-100 py-6 px-8 flex left dc__gap-8 fs-13 lh-20 fw-4 cn-9 ${filter.isSelected ? 'bcb-1' : 'bcn-0 dc__hover-n50'}`}
104+
onClick={handleMenuOptionClick(filter.status)}
95105
>
96-
{index !== 0 ? (
97-
<>
98-
<span
99-
className={`dc__app-summary__icon icon-dim-16 ${filter.status} ${filter.status}--node`}
100-
style={{ zIndex: 'unset' }}
101-
/>
102-
<span>{filter.count}</span>
103-
</>
104-
) : (
105-
<span className="dc__first-letter-capitalize">{`${filter.status} (${filter.count})`}</span>
106-
)}
107-
</RadioGroup.Radio>
108-
),
109-
)}
110-
</RadioGroup>
106+
<span
107+
className={`dc__app-summary__icon icon-dim-16 ${filter.status} ${filter.status}--node`}
108+
style={{ zIndex: 'unset' }}
109+
/>
110+
<span className="dc__first-letter-capitalize flex-grow-1 text-left">{filter.status}</span>
111+
<span>{filter.count}</span>
112+
</button>
113+
))}
114+
</PopupMenu.Body>
115+
</PopupMenu>
116+
) : null
117+
118+
return (
119+
<>
120+
<RadioGroup
121+
className={`gui-yaml-switch status-filter-button ${overflowFilters ? 'with-menu-button' : ''}`}
122+
name="status-filter-button"
123+
initialTab={selectedTab}
124+
disabled={false}
125+
onChange={handleTabSwitch}
126+
>
127+
{displayedInlineFilters.map((filter, index) => (
128+
<RadioGroup.Radio
129+
key={filter.status}
130+
value={filter.status}
131+
showTippy={index !== 0}
132+
tippyPlacement="top"
133+
tippyContent={filter.status}
134+
tippyClass="w-100 dc__first-letter-capitalize"
135+
>
136+
{index !== 0 ? (
137+
<>
138+
<span
139+
className={`dc__app-summary__icon icon-dim-16 ${filter.status} ${filter.status}--node`}
140+
style={{ zIndex: 'unset' }}
141+
/>
142+
<span>{filter.count}</span>
143+
</>
144+
) : (
145+
<span className="dc__first-letter-capitalize">{`${filter.status} (${filter.count})`}</span>
146+
)}
147+
</RadioGroup.Radio>
148+
))}
149+
</RadioGroup>
150+
{renderOverflowFilters()}
151+
</>
111152
)
112153
}

0 commit comments

Comments
 (0)