Skip to content

Commit 224a1ac

Browse files
eshankvaisheshankvaish
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into chore/main-to-dev-sync-rc-31
2 parents 56bcc58 + c23c225 commit 224a1ac

29 files changed

+278
-64
lines changed

‎package-lock.json

Lines changed: 4 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": "1.9.0",
3+
"version": "1.9.1",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/EmptyState/GenericEmptyState.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ const GenericEmptyState = ({
2626
isButtonAvailable,
2727
classname,
2828
styles,
29-
heightToDeduct,
3029
imageType,
3130
renderButton,
3231
imageClassName,
@@ -53,7 +52,6 @@ const GenericEmptyState = ({
5352
className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname || ''}`}
5453
style={styles}
5554
data-testid="generic-empty-state"
56-
{...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
5755
>
5856
{!SvgImage ? (
5957
!noImage && (

‎src/Common/ErrorPage.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import GenericEmptyState from './EmptyState/GenericEmptyState'
2020
import { ErrorPageType } from './Types'
2121
import { noop, refresh, reportIssue } from './Helper'
2222

23-
const ErrorPage = ({ code, image, title, subTitle, imageType, heightToDeduct, redirectURL, reload }: ErrorPageType) => {
23+
const ErrorPage = ({ code, image, title, subTitle, imageType, redirectURL, reload }: ErrorPageType) => {
2424
const { push } = useHistory()
2525
const redirectToHome = () => {
2626
push(redirectURL || `/${ROUTES.APP_LIST}`)
@@ -75,7 +75,6 @@ const ErrorPage = ({ code, image, title, subTitle, imageType, heightToDeduct, re
7575
isButtonAvailable={isButtonAvailable}
7676
renderButton={renderGenerateButton}
7777
imageType={imageType}
78-
heightToDeduct={heightToDeduct}
7978
/>
8079
)
8180
}

‎src/Common/ErrorScreenManager.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ const ErrorScreenManager = ({
2727
reload,
2828
subtitle,
2929
reloadClass,
30-
heightToDeduct,
3130
redirectURL,
3231
imageType = ImageType.Large,
3332
}: ErrorScreenManagerProps) => {
@@ -41,7 +40,6 @@ const ErrorScreenManager = ({
4140
subTitle={subtitle || ERROR_EMPTY_SCREEN.BAD_REQUEST_MESSAGE}
4241
image={badRequest}
4342
imageType={imageType}
44-
heightToDeduct={heightToDeduct}
4543
reload={reload}
4644
/>
4745
)
@@ -53,7 +51,6 @@ const ErrorScreenManager = ({
5351
subTitle={subtitle || ERROR_EMPTY_SCREEN.UNAUTHORIZED_MESSAGE}
5452
image={unauthorized}
5553
imageType={imageType}
56-
heightToDeduct={heightToDeduct}
5754
/>
5855
)
5956
case ERROR_STATUS_CODE.PERMISSION_DENIED:
@@ -64,7 +61,6 @@ const ErrorScreenManager = ({
6461
subTitle={subtitle || ERROR_EMPTY_SCREEN.FORBIDDEN_MESSAGE}
6562
image={unauthorized}
6663
imageType={imageType}
67-
heightToDeduct={heightToDeduct}
6864
/>
6965
)
7066
case ERROR_STATUS_CODE.NOT_FOUND:
@@ -75,7 +71,6 @@ const ErrorScreenManager = ({
7571
subTitle={subtitle || ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST}
7672
image={notFound}
7773
imageType={imageType}
78-
heightToDeduct={heightToDeduct}
7974
redirectURL={redirectURL}
8075
/>
8176
)
@@ -87,7 +82,6 @@ const ErrorScreenManager = ({
8782
subTitle={subtitle || ERROR_EMPTY_SCREEN.INTERNAL_SERVER_ERROR_MESSAGE}
8883
image={badRequest}
8984
imageType={imageType}
90-
heightToDeduct={heightToDeduct}
9185
reload={reload}
9286
/>
9387
)
@@ -99,7 +93,6 @@ const ErrorScreenManager = ({
9993
subTitle={subtitle || ERROR_EMPTY_SCREEN.BAD_GATEWAY_MESSAGE}
10094
image={badRequest}
10195
imageType={imageType}
102-
heightToDeduct={heightToDeduct}
10396
reload={reload}
10497
/>
10598
)
@@ -111,12 +104,11 @@ const ErrorScreenManager = ({
111104
subTitle={subtitle || ERROR_EMPTY_SCREEN.SERVICE_TEMPORARY_UNAVAILABLE_MESSAGE}
112105
image={badRequest}
113106
imageType={imageType}
114-
heightToDeduct={heightToDeduct}
115107
reload={reload}
116108
/>
117109
)
118110
default:
119-
return <Reload heightToDeduct={heightToDeduct} reload={reload} className={reloadClass} />
111+
return <Reload reload={reload} className={reloadClass} />
120112
}
121113
}
122114
return getMessage()

‎src/Common/Markdown/markdown.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
line-height: 1.45;
6262
background-color: var(--bg-secondary);
6363
border-radius: 3px;
64+
flex-shrink: 0;
6465

6566
code {
6667
display: inline;

‎src/Common/Progressing.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const DetailsProgressing = ({
5353
children,
5454
}: ProgressingProps): JSX.Element => (
5555
<div
56-
className={`details-loader bg__primary flex column fs-14 fw-6 ${fullHeight ? 'h-100' : 'details-loader-height'}`}
56+
className={`bg__primary flex column fs-14 fw-6 ${fullHeight ? 'h-100' : ''}`}
5757
style={styles}
5858
data-testid="details-progressing"
5959
>

‎src/Common/Reload.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,10 @@ import { refresh } from './Helper'
2121
/**
2222
* @deprecated Use APIResponseHandler (Preferred) or error screen manager instead
2323
*/
24-
export default function Reload({ reload, className = '', heightToDeduct = 0 }: ReloadType) {
24+
export default function Reload({ reload, className = '' }: ReloadType) {
2525
return (
2626
<article
2727
className={`flex w-100 h-100 ${className}`}
28-
{...(heightToDeduct > 0 && { style: { height: `calc(100vh - ${heightToDeduct}px)` } })}
2928
>
3029
<div className="flex column w-250 dc__align-center" data-testid="reload">
3130
<img src={loadingFailure} style={{ height: 'auto' }} className="w-100 mb-12" alt="load-error" />

‎src/Common/SegmentedBarChart/SegmentedBarChart.tsx

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,58 +21,71 @@ import { FALLBACK_ENTITY } from './constants'
2121
import './styles.scss'
2222

2323
const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
24-
entities = [FALLBACK_ENTITY],
24+
entities: userEntities = [FALLBACK_ENTITY],
2525
rootClassName,
2626
countClassName,
2727
labelClassName,
2828
isProportional,
2929
swapLegendAndBar = false,
3030
showAnimationOnBar = false,
31+
isLoading,
3132
}) => {
33+
const entities = isLoading ? [FALLBACK_ENTITY] : userEntities
3234
const total = entities.reduce((sum, entity) => entity.value + sum, 0)
3335
const filteredEntities = entities.filter((entity) => !!entity.value)
3436

3537
const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
3638

37-
const renderLabel = (label: string) => (
38-
<span className={labelClassName} data-testid={`segmented-bar-chart-${label}-label`}>
39-
{label}
40-
</span>
41-
)
39+
const renderLabel = (label: Entity['label']) =>
40+
isLoading ? (
41+
<div className="shimmer w-120" />
42+
) : (
43+
<span className={labelClassName} data-testid={`segmented-bar-chart-${label}-label`}>
44+
{label}
45+
</span>
46+
)
4247

43-
const renderValue = (value: string | number, label: string) => (
44-
<span className={countClassName} data-testid={`segmented-bar-chart-${label}-value`}>
45-
{isProportional ? `${value}/${total}` : value}
46-
</span>
47-
)
48+
const renderValue = (value: Entity['value'], label: Entity['label']) =>
49+
isLoading ? (
50+
<div className="shimmer w-64 lh-1-5 h-24" />
51+
) : (
52+
<span className={countClassName} data-testid={`segmented-bar-chart-${label}-value`}>
53+
{isProportional ? `${value}/${total}` : value}
54+
</span>
55+
)
4856

4957
const renderContent = () => {
5058
if (isProportional) {
5159
return filteredEntities.map((entity, idx) => (
5260
// eslint-disable-next-line react/no-array-index-key
53-
<div key={idx} className="flexbox-col">
61+
<div key={idx} className={`flexbox-col ${isLoading ? 'dc__gap-10' : ''}`}>
5462
{renderValue(entity.value, entity.label)}
63+
5564
<div className="flex left dc__gap-6">
56-
<span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
65+
{!isLoading && (
66+
<span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
67+
)}
68+
5769
{renderLabel(entity.label)}
5870
</div>
5971
</div>
6072
))
6173
}
74+
6275
return entities.map((entity, idx) => (
6376
// eslint-disable-next-line react/no-array-index-key
6477
<div key={idx} className="flexbox dc__gap-4 dc__align-items-center">
65-
<div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
78+
{!isLoading && (
79+
<div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
80+
)}
81+
6682
{renderValue(entity.value, entity.label)}
83+
6784
{renderLabel(entity.label)}
6885
</div>
6986
))
7087
}
7188

72-
if (!entities.length) {
73-
return null
74-
}
75-
7689
const renderLegend = () => (
7790
<div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
7891
{renderContent()}
@@ -92,16 +105,21 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
92105
>
93106
{filteredEntities.map((entity, index, map) => (
94107
<div
95-
key={entity.label}
108+
// eslint-disable-next-line react/no-array-index-key
109+
key={index}
96110
className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
97111
index === map.length - 1 ? 'dc__right-radius-4' : ''
98-
}`}
112+
} ${isLoading ? 'shimmer' : ''}`}
99113
style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
100114
/>
101115
))}
102116
</motion.div>
103117
)
104118

119+
if (!entities.length) {
120+
return null
121+
}
122+
105123
return (
106124
<div className={`flexbox-col w-100 dc__gap-12 ${rootClassName}`}>
107125
{swapLegendAndBar ? (

‎src/Common/SegmentedBarChart/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@
1717
export const FALLBACK_ENTITY = {
1818
color: 'var(--N300)',
1919
label: '-',
20-
value: 0,
20+
value: 1,
2121
}

0 commit comments

Comments
 (0)