Skip to content

Commit 0ce87fc

Browse files
Elessar1802Elessar1802
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/use-rjsf-chart-store
2 parents 9b2f920 + 668fd65 commit 0ce87fc

15 files changed

+251
-320
lines changed

‎package-lock.json

Lines changed: 20 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "0.3.6-beta-2",
3+
"version": "0.3.10",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
@@ -66,7 +66,7 @@
6666
"react-mde": "^11.5.0",
6767
"react-toastify": "9.1.3",
6868
"typescript": "5.5.4",
69-
"vite": "5.4.2",
69+
"vite": "5.4.6",
7070
"vite-plugin-dts": "4.0.3",
7171
"vite-plugin-lib-inject-css": "2.1.1",
7272
"vite-plugin-svgr": "^2.4.0",
@@ -109,7 +109,7 @@
109109
"monaco-editor": "0.44.0"
110110
},
111111
"vite-plugin-svgr": {
112-
"vite": "5.4.2"
112+
"vite": "5.4.6"
113113
}
114114
}
115115
}

‎src/Common/Drawer/Drawer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const Drawer = ({
4141
maxWidth,
4242
parentClassName,
4343
onEscape,
44+
onClose,
4445
}: drawerInterface) => {
4546
const drawerRef = useRef(null)
4647
useEffect(() => {
@@ -61,7 +62,7 @@ export const Drawer = ({
6162
style['--height'] = height
6263
}
6364
return (
64-
<VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape}>
65+
<VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape} close={onClose}>
6566
<aside style={style} ref={drawerRef} className={`drawer ${position}`}>
6667
{children}
6768
</aside>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.gui-yaml-switch.status-filter-button {
2+
&.radio-group {
3+
.radio__item-label {
4+
padding: 2px 8px;
5+
display: flex;
6+
align-items: center;
7+
gap: 6px;
8+
}
9+
}
10+
11+
&.with-menu-button {
12+
border-top-right-radius: 0;
13+
border-bottom-right-radius: 0;
14+
15+
.radio:last-child > .radio__item-label {
16+
border-right: none;
17+
border-top-right-radius: 0 !important;
18+
border-bottom-right-radius: 0 !important;
19+
}
20+
}
21+
}

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

Lines changed: 76 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,17 @@
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

23-
interface TabState {
24-
status: string
25-
count: number
26-
isSelected: boolean
27-
}
24+
import './StatusFilterButtonComponent.scss'
2825

2926
export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => {
3027
const [selectedTab, setSelectedTab] = useState('all')
3128

29+
const maxInlineFilterCount = 4
3230
let allNodeCount: number = 0
3331
let healthyNodeCount: number = 0
3432
let progressingNodeCount: number = 0
@@ -50,7 +48,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
5048
allNodeCount += 1
5149
})
5250

53-
const filters = [
51+
const filterOptions = [
5452
{ status: 'all', count: allNodeCount, isSelected: selectedTab == 'all' },
5553
{ status: NodeStatus.Missing, count: missingNodeCount, isSelected: NodeStatus.Missing == selectedTab },
5654
{ status: NodeStatus.Degraded, count: failedNodeCount, isSelected: NodeStatus.Degraded == selectedTab },
@@ -61,6 +59,13 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
6159
},
6260
{ status: NodeStatus.Healthy, count: healthyNodeCount, isSelected: NodeStatus.Healthy == selectedTab },
6361
]
62+
const validFilterOptions = filterOptions.filter(({ count }) => count > 0)
63+
const displayedInlineFilters = validFilterOptions.slice(
64+
0,
65+
Math.min(maxInlineFilterCount, validFilterOptions.length),
66+
)
67+
const overflowFilters =
68+
validFilterOptions.length > maxInlineFilterCount ? validFilterOptions.slice(maxInlineFilterCount) : null
6469

6570
useEffect(() => {
6671
if (
@@ -81,30 +86,70 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
8186
setSelectedTab(event.target.value)
8287
}
8388

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

0 commit comments

Comments
 (0)