ADM-997 [frontend]: fix dc issues

frontend/__tests__/containers/ReportStep/DoraMetrics.test.tsx

@@ -14,10 +14,6 @@ jest.mock('@src/utils/util', () => ({
   getDeviceSize: jest.fn().mockReturnValue('lg'),
 }));
 
-jest.mock('semver', () => ({
-  gt: jest.fn((version, initVersion) => version > initVersion),
-}));
-
 describe('Report Card', () => {
   afterEach(() => {
     clearAllMocks();
@@ -105,21 +101,4 @@ describe('Report Card', () => {
 
     expect(screen.queryByLabelText('dora metrics dialog')).not.toBeInTheDocument();
   });
-
-  it('should show four new labels in the dora metrics when version is less than 1.3.0', () => {
-    setup();
-
-    const newLabels = screen.queryAllByLabelText('new label');
-
-    expect(newLabels.length).toEqual(4);
-    newLabels.forEach((it) => expect(it).toBeInTheDocument());
-  });
-
-  it('should not show any new label in the dora metrics when version is more than 1.3.0', () => {
-    setup('1.3.0.1');
-
-    const newLabels = screen.queryAllByLabelText('new label');
-
-    expect(newLabels.length).toEqual(0);
-  });
 });

frontend/e2e/pages/metrics/config-step.ts

@@ -76,7 +76,6 @@ export class ConfigStep {
   readonly boardVerifiedButton: Locator;
   readonly boardResetButton: Locator;
   readonly resetConfirmDialog: Locator;
-  readonly resetConfirmDialogTitle: Locator;
   readonly resetConfirmDialogClose: Locator;
   readonly resetConfirmDialogContent: Locator;
   readonly resetConfirmDialogCancelButton: Locator;
@@ -136,8 +135,8 @@ export class ConfigStep {
     this.previousButton = page.getByRole('button', { name: 'Previous' });
     this.nextButton = page.getByRole('button', { name: 'Next' });
     this.previousModal = page.getByText('All the filled data will be cleared. Continue to Home page?');
-    this.previousModalYesButton = page.getByRole('button', { name: 'Yes' });
-    this.previousModalCancelButton = page.getByRole('button', { name: 'Cancel' });
+    this.previousModalYesButton = page.getByLabel('return to home page confirm dialog confirm button');
+    this.previousModalCancelButton = page.getByLabel('return to home page confirm dialog cancel button');
 
     this.requiredMetricsLabel = page.getByLabel('Required metrics *');
     this.requiredMetricsAllOption = page.getByRole('option', { name: 'All' });
@@ -161,7 +160,6 @@ export class ConfigStep {
     this.boardVerifiedButton = this.boardContainer.getByRole('button', { name: 'Verified' });
     this.boardResetButton = this.boardContainer.getByRole('button', { name: 'Reset' });
     this.resetConfirmDialog = this.page.getByLabel('reset confirm dialog').first();
-    this.resetConfirmDialogTitle = this.page.getByLabel('reset confirm dialog title');
     this.resetConfirmDialogClose = this.page.getByLabel('reset confirm dialog close');
     this.resetConfirmDialogContent = this.page.getByLabel('reset confirm dialog content');
     this.resetConfirmDialogCancelButton = this.page.getByLabel('reset confirm dialog cancel button');
@@ -261,22 +259,6 @@ export class ConfigStep {
     expect(this.page.getByText(covertToDateString(toDay))).toBeTruthy();
   }
 
-  async selectVelocityAndClassificationInRequireData() {
-    await this.requireDataButton.click();
-    await this.velocityCheckbox.check();
-    await this.classificationCheckbox.check();
-    await this.page.keyboard.press('Escape');
-
-    await expect(this.requireDataButton).toHaveText('Velocity, Classification');
-
-    await this.requireDataButton.click();
-    await this.velocityCheckbox.uncheck();
-    await this.classificationCheckbox.uncheck();
-    await this.page.keyboard.press('Escape');
-
-    expect(this.requiredDataErrorMessage).toBeTruthy();
-  }
-
   async typeInDateRange({ startDate, endDate, number = 0 }: { startDate: string; endDate: string; number?: number }) {
     await this.fromDateInput.nth(number).fill(startDate);
     await this.toDateInput.nth(number).fill(endDate);
@@ -494,7 +476,6 @@ export class ConfigStep {
 
   async resetDialogShow() {
     await expect(this.resetConfirmDialog).toBeVisible();
-    await expect(this.resetConfirmDialogTitle).toBeVisible();
     await expect(this.resetConfirmDialogClose).toBeVisible();
     await expect(this.resetConfirmDialogContent).toBeVisible();
     await expect(this.resetConfirmDialogCancelButton).toBeVisible();
@@ -547,13 +528,11 @@ export class ConfigStep {
   }
 
   async cancelGoToPreviousStep() {
-    const cancelButton = this.page.getByRole('button', { name: 'Cancel' });
-    await cancelButton.click();
+    await this.previousModalCancelButton.click();
   }
 
   async confirmGoToPreviousStep() {
-    const confirmButton = this.page.getByRole('button', { name: 'Yes' });
-    await confirmButton.click();
+    await this.previousModalYesButton.click();
   }
 
   async addNewTimeRange() {

frontend/src/components/Common/NewFunctionsLabel/style.tsx

@@ -4,22 +4,21 @@ import { theme } from '@src/theme';
 export const NewFunctionsContent = styled('div')({
   display: 'flex',
   gap: '1rem',
+  alignItems: 'center',
   [theme.breakpoints.down('md')]: {
     gap: '0.2rem',
   },
 });
 
 export const NewLabel = styled('div')({
   padding: '0 0.3rem',
-  fontSize: '1rem',
-  height: '1.5rem',
-  lineHeight: '1.5rem',
+  fontSize: '0.8rem',
+  height: '1rem',
+  lineHeight: '1rem',
   color: theme.components?.newFunctionsLabel.color,
   backgroundColor: theme.components?.newFunctionsLabel.backgroundColor,
 });
 
 export const NewLabelWithCustomizeMarginAndHeight = styled(NewLabel)({
-  margin: '1rem 0 0',
-  height: '2rem',
-  lineHeight: '2rem',
+  margin: '1.25rem 0 0',
 });

frontend/src/components/Common/ReportGrid/ReportCard/index.tsx

@@ -6,7 +6,6 @@ import {
 import { ReportCardItem, ReportCardItemProps } from '@src/components/Common/ReportGrid/ReportCardItem';
 import { DoraMetricsDialog } from '@src/components/Common/ReportGrid/ReportCard/DoraMetricsDialog';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
-import NewFunctionsLabel from '@src/components/Common/NewFunctionsLabel';
 import { ErrorMessagePrompt } from '@src/components/ErrorMessagePrompt';
 import { StyledLink } from '@src/containers/MetricsStep/style';
 import { DORA_METRICS } from '@src/constants/resources';
@@ -95,11 +94,9 @@ export const ReportCard = ({ title, items, xs, errorMessage }: ReportCardProps)
       <StyledReportCardTitle>
         {title}
         {DORA_METRICS.some((it) => it.toLowerCase() === title.toLowerCase()) && (
-          <NewFunctionsLabel initVersion={'1.3.0'}>
-            <StyledLink onClick={handleOpenDialog} aria-label={`${title.toLowerCase()} explanation`}>
-              <HelpOutlineOutlinedIcon fontSize='small' />
-            </StyledLink>
-          </NewFunctionsLabel>
+          <StyledLink onClick={handleOpenDialog} aria-label={`${title.toLowerCase()} explanation`}>
+            <HelpOutlineOutlinedIcon fontSize='small' />
+          </StyledLink>
         )}
       </StyledReportCardTitle>
       {errorMessage && <ErrorMessagePrompt errorMessage={errorMessage} />}

frontend/src/containers/ConfigStep/ResetConfirmDialog/index.tsx

@@ -1,11 +1,12 @@
 import {
   ResetConfirmDialogButtonGroup,
+  ResetConfirmDialogContent,
   ResetConfirmDialogTitle,
 } from '@src/containers/ConfigStep/ResetConfirmDialog/style';
 import { StyledDialogContainer } from '@src/containers/MetricsStep/ReworkSettings/ReworkDialog/style';
 import { CancelButton, YesButton } from '@src/containers/MetricsStepper/ConfirmDialog/style';
-import { Dialog, DialogContent } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import { Dialog } from '@mui/material';
 import React from 'react';
 
 export const ResetConfirmDialog = (props: { onConfirm: () => void; onClose: () => void; isShowDialog: boolean }) => {
@@ -14,7 +15,6 @@ export const ResetConfirmDialog = (props: { onConfirm: () => void; onClose: () =
     <Dialog open={isShowDialog} maxWidth={'md'} onClose={onClose} aria-label={'reset confirm dialog'}>
       <StyledDialogContainer>
         <ResetConfirmDialogTitle aria-label={'reset confirm dialog title'}>
-          <p>Confirm reset</p>
           <CloseIcon
             onClick={onClose}
             aria-label='reset confirm dialog close'
@@ -28,9 +28,9 @@ export const ResetConfirmDialog = (props: { onConfirm: () => void; onClose: () =
             }}
           />
         </ResetConfirmDialogTitle>
-        <DialogContent aria-label={'reset confirm dialog content'}>
+        <ResetConfirmDialogContent aria-label={'reset confirm dialog content'}>
           Are you sure you want to reset the configurations?
-        </DialogContent>
+        </ResetConfirmDialogContent>
         <ResetConfirmDialogButtonGroup>
           <CancelButton variant='outlined' onClick={onClose} aria-label={'reset confirm dialog cancel button'}>
             Cancel

frontend/src/containers/ConfigStep/ResetConfirmDialog/style.tsx

@@ -1,14 +1,21 @@
 import { styled } from '@mui/material/styles';
+import { DialogContent } from '@mui/material';
 
 export const ResetConfirmDialogButtonGroup = styled('div')({
   display: 'flex',
-  justifyContent: 'center',
-  margin: '1rem auto',
+  width: '100%',
+  justifyContent: 'end',
+  margin: '3rem 0 0',
+});
+
+export const ResetConfirmDialogContent = styled(DialogContent)({
+  fontSize: '1.2rem',
 });
 
 export const ResetConfirmDialogTitle = styled('div')({
   width: '100%',
   position: 'relative',
   fontSize: '1.125rem',
   textAlign: 'center',
+  marginBottom: '3rem',
 });

frontend/src/containers/MetricsStepper/ConfirmDialog/index.tsx

@@ -1,23 +1,49 @@
 import {
-  CancelButton,
-  ConformationDialog,
-  DialogButtonGroup,
-  YesButton,
-} from '@src/containers/MetricsStepper/ConfirmDialog/style';
+  ResetConfirmDialogButtonGroup,
+  ResetConfirmDialogContent,
+  ResetConfirmDialogTitle,
+} from '@src/containers/ConfigStep/ResetConfirmDialog/style';
+import { StyledDialogContainer } from '@src/containers/MetricsStep/ReworkSettings/ReworkDialog/style';
+import { CancelButton, YesButton } from '@src/containers/MetricsStepper/ConfirmDialog/style';
+import CloseIcon from '@mui/icons-material/Close';
 import { Dialog } from '@mui/material';
 import React from 'react';
 
 export const ConfirmDialog = (props: { onConfirm: () => void; onClose: () => void; isDialogShowing: boolean }) => {
   const { onConfirm, onClose, isDialogShowing } = props;
   return (
-    <Dialog open={isDialogShowing}>
-      <ConformationDialog>All the filled data will be cleared. Continue to Home page?</ConformationDialog>
-      <DialogButtonGroup>
-        <YesButton onClick={onConfirm}>Yes</YesButton>
-        <CancelButton variant='outlined' onClick={onClose}>
-          Cancel
-        </CancelButton>
-      </DialogButtonGroup>
+    <Dialog open={isDialogShowing} maxWidth={'md'} onClose={onClose} aria-label={'return to home page confirm dialog'}>
+      <StyledDialogContainer>
+        <ResetConfirmDialogTitle aria-label={'return to home page confirm dialog title'}>
+          <CloseIcon
+            onClick={onClose}
+            aria-label='return to home page close'
+            sx={{
+              position: 'absolute',
+              right: 0,
+              top: 0,
+              '&:hover': {
+                cursor: 'pointer',
+              },
+            }}
+          />
+        </ResetConfirmDialogTitle>
+        <ResetConfirmDialogContent aria-label={'return to home page confirm dialog content'}>
+          All the filled data will be cleared. Continue to Home page?
+        </ResetConfirmDialogContent>
+        <ResetConfirmDialogButtonGroup>
+          <YesButton onClick={onConfirm} aria-label={'return to home page confirm dialog confirm button'}>
+            Yes
+          </YesButton>
+          <CancelButton
+            variant='outlined'
+            onClick={onClose}
+            aria-label={'return to home page confirm dialog cancel button'}
+          >
+            Cancel
+          </CancelButton>
+        </ResetConfirmDialogButtonGroup>
+      </StyledDialogContainer>
     </Dialog>
   );
 };

frontend/src/containers/MetricsStepper/ConfirmDialog/style.tsx

@@ -1,18 +1,7 @@
 import { styled } from '@mui/material/styles';
-import { DialogContent } from '@mui/material';
 import Button from '@mui/material/Button';
 import { theme } from '@src/theme';
 
-export const ConformationDialog = styled(DialogContent)({
-  margin: '1rem 0 0 0',
-});
-
-export const DialogButtonGroup = styled('div')({
-  display: 'flex',
-  justifyContent: 'center',
-  margin: '1rem 0',
-});
-
 export const YesButton = styled(Button)({
   boxShadow: theme.main.boxShadow,
   padding: '0 1rem',

frontend/src/containers/ReportStep/ChartAndTitleWrapper/index.tsx

@@ -1,4 +1,5 @@
 import {
+  ChartName,
   ChartTitle,
   StyledChartAndTitleWrapper,
   StyledTooltipContent,
@@ -91,6 +92,23 @@ const ChartAndTitleWrapper = forwardRef(
       </StyledTooltipContent>
     );
 
+    const chartName = (
+      <ChartName>
+        {trendInfo.type} {subTitle && `: ${subTitle}`}
+        {trendInfo.trendNumber !== undefined && !isLoading && (
+          <Tooltip title={tipContent} arrow>
+            <TrendContainer
+              color={TREND_COLOR_MAP[trendInfo.trendType!]}
+              aria-label={trendInfo.type + ' trend container'}
+            >
+              <TrendIconSpan>{TREND_ICON_MAPPING[trendInfo.icon!]}</TrendIconSpan>
+              <span aria-label='trend number'>{convertNumberToPercent(trendInfo.trendNumber)}</span>
+            </TrendContainer>
+          </Tooltip>
+        )}
+      </ChartName>
+    );
+
     const clickStoryPointsButton = () => {
       clickSwitchClassificationModel && clickSwitchClassificationModel(ClassificationChartModelType.StoryPoints);
     };
@@ -107,24 +125,7 @@ const ChartAndTitleWrapper = forwardRef(
       >
         {isLoading && <Loading size='1.5rem' aria-label={trendInfo.type.toLowerCase() + ' loading'} />}
         <ChartTitle>
-          {subTitle === undefined ? (
-            trendInfo.type
-          ) : (
-            <NewFunctionsLabel initVersion={'1.3.0'}>
-              {trendInfo.type} {`: ${subTitle}`}
-            </NewFunctionsLabel>
-          )}
-          {trendInfo.trendNumber !== undefined && !isLoading && (
-            <Tooltip title={tipContent} arrow>
-              <TrendContainer
-                color={TREND_COLOR_MAP[trendInfo.trendType!]}
-                aria-label={trendInfo.type + ' trend container'}
-              >
-                <TrendIconSpan>{TREND_ICON_MAPPING[trendInfo.icon!]}</TrendIconSpan>
-                <span aria-label='trend number'>{convertNumberToPercent(trendInfo.trendNumber)}</span>
-              </TrendContainer>
-            </Tooltip>
-          )}
+          {subTitle ? <NewFunctionsLabel initVersion={'1.3.0'}>{chartName}</NewFunctionsLabel> : chartName}
           {isShowSwitch && (
             <Tooltip title='Switch this chart' placement='right' followCursor>
               <SwitchIconWrapper

frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx

@@ -25,10 +25,15 @@ export const StyledChartAndTitleWrapper = styled('div')({
   },
 });
 
+export const ChartName = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
 export const ChartTitle = styled('div')({
   display: 'flex',
-  justifyContent: 'space-between',
   alignItems: 'center',
+  justifyContent: 'space-between',
   position: 'absolute',
   top: '1.75rem',
   left: '1.75rem',