Skip to content

Commit 72bf368

Browse files
RohitRaj011RohitRaj011
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/useForm-hook
2 parents 88a45ec + 1b8b56c commit 72bf368

20 files changed

+496
-201
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 1 addition & 1 deletion
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.5-beta-2",
3+
"version": "0.3.7",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/AppStatus/AppStatus.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
*/
1616

1717
import Tippy from '@tippyjs/react'
18+
import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
1819
import { ReactComponent as InfoIcon } from '../../Assets/Icon/ic-info-outlined.svg'
1920
import { StatusConstants, YET_TO_RUN } from './constants'
2021
import { AppStatusType } from './types'
@@ -52,7 +53,11 @@ export default function AppStatus({
5253

5354
const renderIcon = () => {
5455
if (iconClass) {
55-
return <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />
56+
return iconClass === 'failed' || iconClass === 'error' ? (
57+
<ICErrorCross className="icon-dim-16 dc__no-shrink ic-error-cross-red" />
58+
) : (
59+
<span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />
60+
)
5661
}
5762
if (isVirtualEnv) {
5863
return (

‎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
}

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { DeploymentConfigDiffNavigation } from './DeploymentConfigDiffNavigation'
22
import { DeploymentConfigDiffMain } from './DeploymentConfigDiffMain'
3-
import { DeploymentConfigDiffProps } from './types'
3+
import { DeploymentConfigDiffProps } from './DeploymentConfigDiff.types'
44
import './DeploymentConfigDiff.scss'
55

66
export const DeploymentConfigDiff = ({
@@ -11,6 +11,7 @@ export const DeploymentConfigDiff = ({
1111
goBackURL,
1212
navHeading,
1313
navHelpText,
14+
tabConfig,
1415
...resProps
1516
}: DeploymentConfigDiffProps) => (
1617
<div className="deployment-config-diff">
@@ -21,6 +22,7 @@ export const DeploymentConfigDiff = ({
2122
goBackURL={goBackURL}
2223
navHeading={navHeading}
2324
navHelpText={navHelpText}
25+
tabConfig={tabConfig}
2426
/>
2527
<DeploymentConfigDiffMain isLoading={isLoading} configList={configList} {...resProps} />
2628
</div>

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
height: calc(100vh - 122px);
2222
overflow: auto;
2323

24+
&__heading {
25+
display: grid;
26+
// -15px to accommodate the right side bar of the code-editor
27+
grid-template-columns: calc(50% - 15px) calc(50% - 15px);
28+
grid-template-rows: auto;
29+
}
30+
2431
&__comparison {
2532
margin: 16px 0 0;
2633
}
@@ -29,4 +36,14 @@
2936
& .react-monaco-editor-container {
3037
min-height: 100px;
3138
}
39+
40+
&__tab-list {
41+
label {
42+
flex-grow: 1
43+
}
44+
45+
.radio__item-label {
46+
justify-content: center;
47+
}
48+
}
3249
}

‎src/Shared/Components/DeploymentConfigDiff/types.ts renamed to ‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { SortingOrder } from '@Common/Constants'
22

3-
import { ConfigMapSecretDataConfigDatumDTO, DeploymentTemplateDTO } from '@Shared/Services'
3+
import {
4+
AppEnvDeploymentConfigDTO,
5+
ConfigMapSecretDataConfigDatumDTO,
6+
DeploymentTemplateDTO,
7+
EnvResourceType,
8+
ManifestTemplateDTO,
9+
} from '@Shared/Services'
10+
411
import { DeploymentHistoryDetail } from '../CICDHistory'
512
import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
613
import { SelectPickerProps } from '../SelectPicker'
@@ -45,6 +52,11 @@ export interface DeploymentConfigDiffNavigationCollapsibleItem
4552

4653
export interface DeploymentConfigDiffProps {
4754
isLoading?: boolean
55+
errorConfig?: {
56+
error: boolean
57+
code: number
58+
reload: () => void
59+
}
4860
configList: DeploymentConfigListItem[]
4961
headerText?: string
5062
scrollIntoViewId?: string
@@ -62,18 +74,29 @@ export interface DeploymentConfigDiffProps {
6274
goBackURL?: string
6375
navHeading: string
6476
navHelpText?: string
77+
tabConfig?: {
78+
tabs: string[]
79+
activeTab: string
80+
onClick: (tab: string) => void
81+
}
6582
}
6683

6784
export interface DeploymentConfigDiffNavigationProps
6885
extends Pick<
6986
DeploymentConfigDiffProps,
70-
'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText'
87+
'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText' | 'tabConfig'
7188
> {}
7289

7390
export interface DeploymentConfigDiffMainProps
7491
extends Pick<
7592
DeploymentConfigDiffProps,
76-
'isLoading' | 'headerText' | 'configList' | 'scrollIntoViewId' | 'selectorsConfig' | 'sortingConfig'
93+
| 'isLoading'
94+
| 'errorConfig'
95+
| 'headerText'
96+
| 'configList'
97+
| 'scrollIntoViewId'
98+
| 'selectorsConfig'
99+
| 'sortingConfig'
77100
> {}
78101

79102
export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps, 'onTransitionEnd'> {
@@ -88,3 +111,18 @@ export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps,
88111
export type DiffHeadingDataType<DeploymentTemplate> = DeploymentTemplate extends true
89112
? DeploymentTemplateDTO
90113
: ConfigMapSecretDataConfigDatumDTO
114+
115+
export type AppEnvDeploymentConfigListParams<IsManifestView> = (IsManifestView extends true
116+
? {
117+
currentList: ManifestTemplateDTO
118+
compareList: ManifestTemplateDTO
119+
sortOrder?: never
120+
}
121+
: {
122+
currentList: AppEnvDeploymentConfigDTO
123+
compareList: AppEnvDeploymentConfigDTO
124+
sortOrder?: SortingOrder
125+
}) & {
126+
getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
127+
isManifestView?: IsManifestView
128+
}

0 commit comments

Comments
 (0)