Skip to content

Commit e9f97f5

Browse files
e-for-eshaane-for-eshaan
committed
prevent propagation of event, disables clicks when clicking link
1 parent f1170ec commit e9f97f5

File tree

4 files changed

+137
-113
lines changed

4 files changed

+137
-113
lines changed

‎web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,10 +125,16 @@ export const ChangeFailureRateCard = () => {
125125
<Line white huge bold py={1}>
126126
Change Failure Rate
127127
</Line>
128-
<MetricExternalRead
129-
link={`https://www.middlewarehq.com/blog/how-to-reduce-change-failure-rate-build-bulletproof-software-delivery-process`}
130-
label="Change Failure Rate"
131-
/>
128+
<FlexBox
129+
onClick={(e) => {
130+
e.stopPropagation();
131+
}}
132+
>
133+
<MetricExternalRead
134+
link={`https://www.middlewarehq.com/blog/how-to-reduce-change-failure-rate-build-bulletproof-software-delivery-process`}
135+
label="Change Failure Rate"
136+
/>
137+
</FlexBox>
132138
</FlexBox>
133139
<FlexBox
134140
title={

‎web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx‎

Lines changed: 107 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -125,109 +125,115 @@ export const ChangeTimeCard = () => {
125125
<Line white huge bold py={1}>
126126
Lead Time for Changes
127127
</Line>
128-
<MetricExternalRead
129-
link={`https://www.middlewarehq.com/blog/lead-time-optimization-101-unlock-software-engineering-efficiency`}
130-
label={'Lead Time for Changes'}
128+
<FlexBox
129+
onClick={(e) => {
130+
e.stopPropagation();
131+
}}
131132
>
132-
{isSufficientDataAvailable &&
133-
!isAllAssignedReposHaveDeploymentsConfigured && (
134-
<FlexBox
135-
color="white"
136-
title={
137-
<FlexBox col gap={1}>
138-
<Line medium bold white>
139-
Insight based on data from{' '}
140-
{reposCountWithWorkflowConfigured} out of{' '}
141-
{allAssignedRepos.length}{' '}
142-
{pluralize('repo', allAssignedRepos.length)} which
143-
have workflow configured.
144-
</Line>
145-
<Line medium>
146-
Following{' '}
147-
{pluralize(
148-
'repo',
149-
reposWithNoDeploymentsConfigured.length
150-
)}{' '}
151-
{reposWithNoDeploymentsConfigured.length > 1
152-
? "don't"
153-
: "doesn't"}{' '}
154-
have any workflow assigned :
155-
<List sx={{ listStyleType: 'disc' }}>
156-
{reposWithNoDeploymentsConfigured.map((r) => (
157-
<ListItem
158-
key={r.id}
159-
sx={{
160-
color: darken('#FFF', 0.25),
161-
display: 'list-item',
162-
padding: '0px',
163-
marginLeft: '6px'
164-
}}
133+
<MetricExternalRead
134+
link={`https://www.middlewarehq.com/blog/lead-time-optimization-101-unlock-software-engineering-efficiency`}
135+
label={'Lead Time for Changes'}
136+
>
137+
{isSufficientDataAvailable &&
138+
!isAllAssignedReposHaveDeploymentsConfigured && (
139+
<FlexBox
140+
color="white"
141+
title={
142+
<FlexBox col gap={1}>
143+
<Line medium bold white>
144+
Insight based on data from{' '}
145+
{reposCountWithWorkflowConfigured} out of{' '}
146+
{allAssignedRepos.length}{' '}
147+
{pluralize('repo', allAssignedRepos.length)} which
148+
have workflow configured.
149+
</Line>
150+
<Line medium>
151+
Following{' '}
152+
{pluralize(
153+
'repo',
154+
reposWithNoDeploymentsConfigured.length
155+
)}{' '}
156+
{reposWithNoDeploymentsConfigured.length > 1
157+
? "don't"
158+
: "doesn't"}{' '}
159+
have any workflow assigned :
160+
<List sx={{ listStyleType: 'disc' }}>
161+
{reposWithNoDeploymentsConfigured.map((r) => (
162+
<ListItem
163+
key={r.id}
164+
sx={{
165+
color: darken('#FFF', 0.25),
166+
display: 'list-item',
167+
padding: '0px',
168+
marginLeft: '6px'
169+
}}
170+
>
171+
{r.name}
172+
</ListItem>
173+
))}
174+
</List>
175+
</Line>
176+
{!isEng && (
177+
<Link passHref href={ROUTES.INTEGRATIONS.PATH}>
178+
<Button
179+
size="small"
180+
endIcon={
181+
<ArrowForwardRounded fontSize="inherit" />
182+
}
183+
variant="outlined"
184+
sx={{ width: 'fit-content' }}
165185
>
166-
{r.name}
167-
</ListItem>
168-
))}
169-
</List>
170-
</Line>
171-
{!isEng && (
172-
<Link passHref href={ROUTES.INTEGRATIONS.PATH}>
173-
<Button
174-
size="small"
175-
endIcon={
176-
<ArrowForwardRounded fontSize="inherit" />
177-
}
178-
variant="outlined"
179-
sx={{ width: 'fit-content' }}
180-
>
181-
Configure deployment workflows here
182-
</Button>
183-
</Link>
184-
)}
185-
</FlexBox>
186-
}
187-
darkTip
188-
>
189-
<WarningAmberRounded
190-
sx={{ fontSize: '1.4em' }}
191-
color="warning"
192-
/>
193-
</FlexBox>
194-
)}
195-
{isSufficientDataAvailable &&
196-
isAllAssignedReposHaveDeploymentsConfigured && (
197-
<FlexBox
198-
color="white"
199-
title={
200-
<FlexBox col gap={1}>
201-
<Line small bold white>
202-
All assigned{' '}
203-
{pluralize('repo', allAssignedRepos.length)} have
204-
deployment configured.
205-
</Line>
206-
{!isEng && (
207-
<Link passHref href={ROUTES.INTEGRATIONS.PATH}>
208-
<Button
209-
size="small"
210-
endIcon={
211-
<ArrowForwardRounded fontSize="inherit" />
212-
}
213-
variant="outlined"
214-
sx={{ width: 'fit-content' }}
215-
>
216-
Modify deployment workflows here
217-
</Button>
218-
</Link>
219-
)}
220-
</FlexBox>
221-
}
222-
darkTip
223-
>
224-
<CheckCircleOutlineRoundedIcon
225-
sx={{ fontSize: '1.4em' }}
226-
color="success"
227-
/>
228-
</FlexBox>
229-
)}
230-
</MetricExternalRead>
186+
Configure deployment workflows here
187+
</Button>
188+
</Link>
189+
)}
190+
</FlexBox>
191+
}
192+
darkTip
193+
>
194+
<WarningAmberRounded
195+
sx={{ fontSize: '1.4em' }}
196+
color="warning"
197+
/>
198+
</FlexBox>
199+
)}
200+
{isSufficientDataAvailable &&
201+
isAllAssignedReposHaveDeploymentsConfigured && (
202+
<FlexBox
203+
color="white"
204+
title={
205+
<FlexBox col gap={1}>
206+
<Line small bold white>
207+
All assigned{' '}
208+
{pluralize('repo', allAssignedRepos.length)} have
209+
deployment configured.
210+
</Line>
211+
{!isEng && (
212+
<Link passHref href={ROUTES.INTEGRATIONS.PATH}>
213+
<Button
214+
size="small"
215+
endIcon={
216+
<ArrowForwardRounded fontSize="inherit" />
217+
}
218+
variant="outlined"
219+
sx={{ width: 'fit-content' }}
220+
>
221+
Modify deployment workflows here
222+
</Button>
223+
</Link>
224+
)}
225+
</FlexBox>
226+
}
227+
darkTip
228+
>
229+
<CheckCircleOutlineRoundedIcon
230+
sx={{ fontSize: '1.4em' }}
231+
color="success"
232+
/>
233+
</FlexBox>
234+
)}
235+
</MetricExternalRead>
236+
</FlexBox>
231237
</FlexBox>
232238
</FlexBox>
233239

‎web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,16 @@ export const MeanTimeToRestoreCard = () => {
9898
<Line white huge bold py={1}>
9999
Mean Time to Recovery
100100
</Line>
101-
<MetricExternalRead
102-
link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#time-to-restore-service`}
103-
label="Mean Time to Recovery"
104-
/>
101+
<FlexBox
102+
onClick={(e) => {
103+
e.stopPropagation();
104+
}}
105+
>
106+
<MetricExternalRead
107+
link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#time-to-restore-service`}
108+
label="Mean Time to Recovery"
109+
/>
110+
</FlexBox>
105111
</FlexBox>
106112
<FlexBox
107113
title={

‎web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,16 @@ export const WeeklyDeliveryVolumeCard = () => {
115115
<Line white huge bold py={1}>
116116
Deployment Frequency
117117
</Line>
118-
<MetricExternalRead
119-
link={`https://www.middlewarehq.com/blog/is-deployment-frequency-the-goldilocks-zone-for-software-delivery`}
120-
label="Delivery Volume"
121-
/>
118+
<FlexBox
119+
onClick={(e) => {
120+
e.stopPropagation();
121+
}}
122+
>
123+
<MetricExternalRead
124+
link={`https://www.middlewarehq.com/blog/is-deployment-frequency-the-goldilocks-zone-for-software-delivery`}
125+
label="Delivery Volume"
126+
/>
127+
</FlexBox>
122128
</FlexBox>
123129
{isCodeProviderIntegrationEnabled && (
124130
<FlexBox

0 commit comments

Comments
 (0)