ADM-879 [frontend] Generate data reports for multiple time ranges (#1425

)

* ADM-879: [frontend] feat: set date range when select related date range

* ADM-924:[frontend]feat: add disabled logic for DateRangeViewer

* ADM-879-new feat: send multi fetch in report page

* ADM-879-new refactor: rename

* ADM-879-new refactor: rename and move function

* ADM-879-new refactor: extract function

* ADM-879-new feat: should change data when select other date range

* ADM-879-new fix: fix update logic

* ADM-879-new refactor: rename

* ADM-879-new refactor: rename

* ADM-924:[frontend]fix: pass disabled prop to SingleDateRange and DateRangeContainer

* ADM-879-new feat: add status for alert

* ADM-879: [frontend] feat: modify style

* ADM-879-new feat: modify the notification opportunity

* ADM-879-new feat: remove the notifications when change dateRange in report page

* ADM-879-new fix: fix notification

* ADM-879-new fix: fix test

* ADM-879-new test: fix test

* ADM-879-new test: add unit tests

* ADM-879-new refactor: extract method

* ADM-879-new refactor: remove useless code

* ADM-879-new test: add unit test

* ADM-879-new fix: fix sonarcloud

* ADM-879-new refactor: fix rename

* ADM-879-new refactor: rename

* ADM-879-new fix: fix sonarcloud

* ADM-879-new fix: fix sonarcloud

* ADM-879-new fix: fix pr issues

* ADM-879-new fix: fix sonarcloud

* ADM-879-new fix: rename

* ADM-879-new fix: fix test field name

---------

Co-authored-by: GuangbinMa <[email protected]>
Co-authored-by: Tingyu Dong <[email protected]>

frontend/__tests__/client/ReportClient.test.ts

@@ -21,9 +21,8 @@ describe('report client', () => {
   afterAll(() => server.close());
 
   it('should get response when generate report request status 202', async () => {
-    const excepted = {
-      response: MOCK_RETRIEVE_REPORT_RESPONSE,
-    };
+    const excepted = MOCK_RETRIEVE_REPORT_RESPONSE;
+
     server.use(
       rest.post(MOCK_REPORT_URL, (req, res, ctx) =>
         res(ctx.status(HttpStatusCode.Accepted), ctx.json(MOCK_RETRIEVE_REPORT_RESPONSE)),

frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx

@@ -5,7 +5,7 @@ import { render } from '@testing-library/react';
 
 describe('DateRangeViewer', () => {
   const setup = (dateRanges: DateRange) => {
-    return render(<DateRangeViewer dateRanges={dateRanges} />);
+    return render(<DateRangeViewer dateRangeList={dateRanges} />);
   };
   const mockDateRanges = [
     {

frontend/__tests__/containers/MetricsStepper/MetricsStepper.test.tsx

@@ -15,6 +15,7 @@ import {
   REQUIRED_DATA,
   MOCK_PIPELINE_VERIFY_URL,
   MOCK_BOARD_URL_FOR_JIRA,
+  MOCK_REPORT_RESPONSE,
 } from '../../fixtures';
 import {
   updateCycleTimeSettings,
@@ -24,9 +25,9 @@ import {
   updateDeploymentFrequencySettings,
   updateTreatFlagCardAsBlock,
 } from '@src/context/Metrics/metricsSlice';
+import { ASSIGNEE_FILTER_TYPES, DEFAULT_MESSAGE } from '@src/constants/resources';
+import { updateDateRange, updateMetrics } from '@src/context/config/configSlice';
 import { act, render, screen, waitFor, within } from '@testing-library/react';
-import { ASSIGNEE_FILTER_TYPES } from '@src/constants/resources';
-import { updateMetrics } from '@src/context/config/configSlice';
 import MetricsStepper from '@src/containers/MetricsStepper';
 import { setupStore } from '../../utils/setupStoreUtil';
 import userEvent from '@testing-library/user-event';
@@ -56,6 +57,11 @@ const mockValidationCheckContext = {
   getDuplicatedPipeLineIds: jest.fn().mockReturnValue([]),
 };
 
+const mockDateRange = {
+  startDate: '2024-02-18T00:00:00.000+08:00',
+  endDate: '2024-02-28T23:59:59.999+08:00',
+};
+
 jest.mock('@src/hooks/useMetricsStepValidationCheckContext', () => ({
   useMetricsStepValidationCheckContext: () => mockValidationCheckContext,
 }));
@@ -88,12 +94,29 @@ jest.mock('@src/utils/util', () => ({
 }));
 
 jest.mock('@src/hooks/useGenerateReportEffect', () => ({
+  ...jest.requireActual('@src/hooks/useGenerateReportEffect'),
   useGenerateReportEffect: jest.fn().mockReturnValue({
     startToRequestData: jest.fn(),
-    startToRequestDoraData: jest.fn(),
     stopPollingReports: jest.fn(),
-    isServerError: false,
-    errorMessage: '',
+    closeReportInfosErrorStatus: jest.fn(),
+    closeBoardMetricsError: jest.fn(),
+    closePipelineMetricsError: jest.fn(),
+    closeSourceControlMetricsError: jest.fn(),
+    reportInfos: [
+      {
+        id: mockDateRange.startDate,
+        timeout4Board: { message: DEFAULT_MESSAGE, shouldShow: true },
+        timeout4Dora: { message: DEFAULT_MESSAGE, shouldShow: true },
+        timeout4Report: { message: DEFAULT_MESSAGE, shouldShow: true },
+        generalError4Board: { message: DEFAULT_MESSAGE, shouldShow: true },
+        generalError4Dora: { message: DEFAULT_MESSAGE, shouldShow: true },
+        generalError4Report: { message: DEFAULT_MESSAGE, shouldShow: true },
+        shouldShowBoardMetricsError: true,
+        shouldShowPipelineMetricsError: true,
+        shouldShowSourceControlMetricsError: true,
+        reportData: { ...MOCK_REPORT_RESPONSE, exportValidityTime: 30 },
+      },
+    ],
   }),
 }));
 
@@ -160,6 +183,7 @@ const fillMetricsPageDate = async () => {
       updateDeploymentFrequencySettings({ updateId: 0, label: 'pipelineName', value: 'mock new pipelineName' }),
     );
     store.dispatch(updateDeploymentFrequencySettings({ updateId: 0, label: 'step', value: 'mock new step' }));
+    store.dispatch(updateDateRange([mockDateRange]));
   });
 };
 
@@ -396,8 +420,8 @@ describe('MetricsStepper', () => {
       calendarType: 'Regular Calendar(Weekend Considered)',
       dateRange: [
         {
-          endDate: dayjs().endOf('date').add(0, 'day').format(COMMON_TIME_FORMAT),
-          startDate: dayjs().startOf('date').format(COMMON_TIME_FORMAT),
+          endDate: mockDateRange.endDate,
+          startDate: mockDateRange.startDate,
         },
       ],
       metrics: ['Velocity'],