From db122d527a9ececef4545f7987ebddec87b4fc9d Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Wed, 15 May 2024 19:05:03 +0530
Subject: [PATCH 1/2] update links for dora-metrics

---
 .../DoraMetrics/DoraCards/ChangeFailureRateCard.tsx |  2 +-
 .../DoraMetrics/DoraCards/ChangeTimeCard.tsx        | 13 ++-----------
 .../DoraCards/WeeklyDeliveryVolumeCard.tsx          |  2 +-
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
index c32704d0a..e06f3d267 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
@@ -126,7 +126,7 @@ export const ChangeFailureRateCard = () => {
               Change Failure Rate
             </Line>
             <MetricExternalRead
-              link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#change-failure-rate`}
+              link={`https://www.middlewarehq.com/blog/how-to-reduce-change-failure-rate-build-bulletproof-software-delivery-process`}
               label="Change Failure Rate"
             />
           </FlexBox>
diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
index dc214f076..127e7e0cb 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
@@ -1,15 +1,7 @@
 import { ArrowForwardRounded, WarningAmberRounded } from '@mui/icons-material';
 import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
 import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
-import {
-  alpha,
-  Button,
-  Chip,
-  darken,
-  List,
-  ListItem,
-  useTheme
-} from '@mui/material';
+import { alpha, Button, Chip, darken, List, ListItem } from '@mui/material';
 import Link from 'next/link';
 import pluralize from 'pluralize';
 import { useMemo } from 'react';
@@ -62,7 +54,6 @@ const chartOptions = {
 
 export const ChangeTimeCard = () => {
   const { addPage } = useOverlayPage();
-  const theme = useTheme();
   const { role } = useAuth();
   const isEng = isRoleLessThanEM(role);
 
@@ -135,7 +126,7 @@ export const ChangeTimeCard = () => {
                 Lead Time for Changes
               </Line>
               <MetricExternalRead
-                link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#lead-time-for-changes`}
+                link={`https://www.middlewarehq.com/blog/lead-time-optimization-101-unlock-software-engineering-efficiency`}
                 label={'Lead Time for Changes'}
               >
                 {isSufficientDataAvailable &&
diff --git a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
index 099bf2c57..8b0261776 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
@@ -116,7 +116,7 @@ export const WeeklyDeliveryVolumeCard = () => {
               Deployment Frequency
             </Line>
             <MetricExternalRead
-              link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#deployment-frequency`}
+              link={`https://www.middlewarehq.com/blog/is-deployment-frequency-the-goldilocks-zone-for-software-delivery`}
               label="Delivery Volume"
             />
           </FlexBox>

From 8ac1cebf4099582b6bdc2eb217b99b97ce695484 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Wed, 15 May 2024 19:18:26 +0530
Subject: [PATCH 2/2] prevent propagation of event, disables clicks when
 clicking link

---
 .../DoraCards/ChangeFailureRateCard.tsx       |  14 +-
 .../DoraMetrics/DoraCards/ChangeTimeCard.tsx  | 208 +++++++++---------
 .../DoraCards/MeanTimeToRestoreCard.tsx       |  14 +-
 .../DoraCards/WeeklyDeliveryVolumeCard.tsx    |  14 +-
 4 files changed, 137 insertions(+), 113 deletions(-)

diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
index e06f3d267..928d7287f 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
@@ -125,10 +125,16 @@ export const ChangeFailureRateCard = () => {
             <Line white huge bold py={1}>
               Change Failure Rate
             </Line>
-            <MetricExternalRead
-              link={`https://www.middlewarehq.com/blog/how-to-reduce-change-failure-rate-build-bulletproof-software-delivery-process`}
-              label="Change Failure Rate"
-            />
+            <FlexBox
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <MetricExternalRead
+                link={`https://www.middlewarehq.com/blog/how-to-reduce-change-failure-rate-build-bulletproof-software-delivery-process`}
+                label="Change Failure Rate"
+              />
+            </FlexBox>
           </FlexBox>
           <FlexBox
             title={
diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
index 127e7e0cb..edf27dcba 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
@@ -125,109 +125,115 @@ export const ChangeTimeCard = () => {
               <Line white huge bold py={1}>
                 Lead Time for Changes
               </Line>
-              <MetricExternalRead
-                link={`https://www.middlewarehq.com/blog/lead-time-optimization-101-unlock-software-engineering-efficiency`}
-                label={'Lead Time for Changes'}
+              <FlexBox
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
               >
-                {isSufficientDataAvailable &&
-                  !isAllAssignedReposHaveDeploymentsConfigured && (
-                    <FlexBox
-                      color="white"
-                      title={
-                        <FlexBox col gap={1}>
-                          <Line medium bold white>
-                            Insight based on data from{' '}
-                            {reposCountWithWorkflowConfigured} out of{' '}
-                            {allAssignedRepos.length}{' '}
-                            {pluralize('repo', allAssignedRepos.length)} which
-                            have workflow configured.
-                          </Line>
-                          <Line medium>
-                            Following{' '}
-                            {pluralize(
-                              'repo',
-                              reposWithNoDeploymentsConfigured.length
-                            )}{' '}
-                            {reposWithNoDeploymentsConfigured.length > 1
-                              ? "don't"
-                              : "doesn't"}{' '}
-                            have any workflow assigned :
-                            <List sx={{ listStyleType: 'disc' }}>
-                              {reposWithNoDeploymentsConfigured.map((r) => (
-                                <ListItem
-                                  key={r.id}
-                                  sx={{
-                                    color: darken('#FFF', 0.25),
-                                    display: 'list-item',
-                                    padding: '0px',
-                                    marginLeft: '6px'
-                                  }}
+                <MetricExternalRead
+                  link={`https://www.middlewarehq.com/blog/lead-time-optimization-101-unlock-software-engineering-efficiency`}
+                  label={'Lead Time for Changes'}
+                >
+                  {isSufficientDataAvailable &&
+                    !isAllAssignedReposHaveDeploymentsConfigured && (
+                      <FlexBox
+                        color="white"
+                        title={
+                          <FlexBox col gap={1}>
+                            <Line medium bold white>
+                              Insight based on data from{' '}
+                              {reposCountWithWorkflowConfigured} out of{' '}
+                              {allAssignedRepos.length}{' '}
+                              {pluralize('repo', allAssignedRepos.length)} which
+                              have workflow configured.
+                            </Line>
+                            <Line medium>
+                              Following{' '}
+                              {pluralize(
+                                'repo',
+                                reposWithNoDeploymentsConfigured.length
+                              )}{' '}
+                              {reposWithNoDeploymentsConfigured.length > 1
+                                ? "don't"
+                                : "doesn't"}{' '}
+                              have any workflow assigned :
+                              <List sx={{ listStyleType: 'disc' }}>
+                                {reposWithNoDeploymentsConfigured.map((r) => (
+                                  <ListItem
+                                    key={r.id}
+                                    sx={{
+                                      color: darken('#FFF', 0.25),
+                                      display: 'list-item',
+                                      padding: '0px',
+                                      marginLeft: '6px'
+                                    }}
+                                  >
+                                    {r.name}
+                                  </ListItem>
+                                ))}
+                              </List>
+                            </Line>
+                            {!isEng && (
+                              <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
+                                <Button
+                                  size="small"
+                                  endIcon={
+                                    <ArrowForwardRounded fontSize="inherit" />
+                                  }
+                                  variant="outlined"
+                                  sx={{ width: 'fit-content' }}
                                 >
-                                  {r.name}
-                                </ListItem>
-                              ))}
-                            </List>
-                          </Line>
-                          {!isEng && (
-                            <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
-                              <Button
-                                size="small"
-                                endIcon={
-                                  <ArrowForwardRounded fontSize="inherit" />
-                                }
-                                variant="outlined"
-                                sx={{ width: 'fit-content' }}
-                              >
-                                Configure deployment workflows here
-                              </Button>
-                            </Link>
-                          )}
-                        </FlexBox>
-                      }
-                      darkTip
-                    >
-                      <WarningAmberRounded
-                        sx={{ fontSize: '1.4em' }}
-                        color="warning"
-                      />
-                    </FlexBox>
-                  )}
-                {isSufficientDataAvailable &&
-                  isAllAssignedReposHaveDeploymentsConfigured && (
-                    <FlexBox
-                      color="white"
-                      title={
-                        <FlexBox col gap={1}>
-                          <Line small bold white>
-                            All assigned{' '}
-                            {pluralize('repo', allAssignedRepos.length)} have
-                            deployment configured.
-                          </Line>
-                          {!isEng && (
-                            <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
-                              <Button
-                                size="small"
-                                endIcon={
-                                  <ArrowForwardRounded fontSize="inherit" />
-                                }
-                                variant="outlined"
-                                sx={{ width: 'fit-content' }}
-                              >
-                                Modify deployment workflows here
-                              </Button>
-                            </Link>
-                          )}
-                        </FlexBox>
-                      }
-                      darkTip
-                    >
-                      <CheckCircleOutlineRoundedIcon
-                        sx={{ fontSize: '1.4em' }}
-                        color="success"
-                      />
-                    </FlexBox>
-                  )}
-              </MetricExternalRead>
+                                  Configure deployment workflows here
+                                </Button>
+                              </Link>
+                            )}
+                          </FlexBox>
+                        }
+                        darkTip
+                      >
+                        <WarningAmberRounded
+                          sx={{ fontSize: '1.4em' }}
+                          color="warning"
+                        />
+                      </FlexBox>
+                    )}
+                  {isSufficientDataAvailable &&
+                    isAllAssignedReposHaveDeploymentsConfigured && (
+                      <FlexBox
+                        color="white"
+                        title={
+                          <FlexBox col gap={1}>
+                            <Line small bold white>
+                              All assigned{' '}
+                              {pluralize('repo', allAssignedRepos.length)} have
+                              deployment configured.
+                            </Line>
+                            {!isEng && (
+                              <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
+                                <Button
+                                  size="small"
+                                  endIcon={
+                                    <ArrowForwardRounded fontSize="inherit" />
+                                  }
+                                  variant="outlined"
+                                  sx={{ width: 'fit-content' }}
+                                >
+                                  Modify deployment workflows here
+                                </Button>
+                              </Link>
+                            )}
+                          </FlexBox>
+                        }
+                        darkTip
+                      >
+                        <CheckCircleOutlineRoundedIcon
+                          sx={{ fontSize: '1.4em' }}
+                          color="success"
+                        />
+                      </FlexBox>
+                    )}
+                </MetricExternalRead>
+              </FlexBox>
             </FlexBox>
           </FlexBox>
 
diff --git a/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx
index fecbb1b9b..1814cf1c4 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx
@@ -98,10 +98,16 @@ export const MeanTimeToRestoreCard = () => {
             <Line white huge bold py={1}>
               Mean Time to Recovery
             </Line>
-            <MetricExternalRead
-              link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#time-to-restore-service`}
-              label="Mean Time to Recovery"
-            />
+            <FlexBox
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <MetricExternalRead
+                link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#time-to-restore-service`}
+                label="Mean Time to Recovery"
+              />
+            </FlexBox>
           </FlexBox>
           <FlexBox
             title={
diff --git a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
index 8b0261776..82d6793d0 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
@@ -115,10 +115,16 @@ export const WeeklyDeliveryVolumeCard = () => {
             <Line white huge bold py={1}>
               Deployment Frequency
             </Line>
-            <MetricExternalRead
-              link={`https://www.middlewarehq.com/blog/is-deployment-frequency-the-goldilocks-zone-for-software-delivery`}
-              label="Delivery Volume"
-            />
+            <FlexBox
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <MetricExternalRead
+                link={`https://www.middlewarehq.com/blog/is-deployment-frequency-the-goldilocks-zone-for-software-delivery`}
+                label="Delivery Volume"
+              />
+            </FlexBox>
           </FlexBox>
           {isCodeProviderIntegrationEnabled && (
             <FlexBox