ADM-864: [frontend] feat: link mapping status to rework setting (#1252)

* ADM-864: [frontend] feat: link mapping status to rework setting * ADM-864: [frontend] fix: fix null point * ADM-864: [frontend] feat: add rework board and table in report page * Revert "ADM-864: [frontend] feat: add rework board and table in report page" This reverts commit 59c411c. * [frontend]ADM-793: add test and change word for alter (#1182) * [ADM-793] test: add test for hidden alert when reset * [ADM-793] feat: change word for alert * [ADM-793] test: reset mock for timeout * ADM-857:[backend]feat: add check buildkite status (#1179) * ADM-857:[backend]feat: new Github action to see if it can check committer name * ADM-857:[backend]feat: test getting pr username and compare * ADM-857:[backend]feat: fix name comparison * ADM-857:[backend]feat: completed name comparison * ADM-857:[backend]feat: integrated name comparison into build pipeline fail check * ADM-857:[backend]feat: add message when build pipeline was successful * ADM-857:[backend]feat: make check build status needed by deploy infra * ADM-857:[backend]refactor: move buildkite check logic for check.sh * ADM-857:[backend]refactor: transfer param for check shell script * ADM-857:[backend]refactor: update check buildkite status event name * ADM-857:[backend]feat: add check buildkite status not contains revert --------- Co-authored-by: PengxiWPix <pengxi.wang@thoughtworks.com> * ADM-691:[frontend][backend] feat: calculate all card rework metrics (#1172) * ADM-691: [frontend] fix: add request fields (#1143) * ADM-691: [frontend] fix: add request fields * ADM-691: [frontend] fix: fix sonar cloud * ADM-691: [frontend] fix: fix unit test * ADM-691: [frontend] chore: modify sytle, rename field * ADM-691: [frontend] fix: fix sonar issue * ADM-691: [frontend] fix: remove unused code --------- Co-authored-by: Leiqiuhong <qiuhong.lei@thoughtworks.com> (cherry picked from commit f775626) * ADM-691: [frontend] fix: fix sonar issue (#1145) (cherry picked from commit 2bb3cdb) * ADM-691: [frontend] fix: fix show more logic * ADM-691: [frontend] fix: fix selecting all logic * ADM-692:[backend] feat: init dto * ADM-692:[backend] feat: calculate reworkTimesInfos * ADM-692:[backend] feat: calculate rework card number and rework ratio * ADM-692:[backend] feat: repair mock data * ADM-692:[backend] feat: add test for get real done card rework given not consider flag as block * ADM-692:[backend] feat: add calculate total rework time for every done card * ADM-692:[backend] test: get real done card rework given consider flag as block * ADM-692:[backend] fix: set treat flag card as block * ADM-692:[backend] feat: refactor code and design request state * ADM-692: [backend] test: modify test mock data to cover some missed code branch * ADM-692:[backend] feat: calculate all card rework metrics * ADM-692:[backend] test: calculate all card rework metrics * ADM-692:[backend] fix: use get enum rework state * ADM-692:[backend] test: throw exception when calculate rework given analyse state in rework times info list * ADM-692:[backend] fix: lake the case of Testing in test * ADM-692:[backend] feat: add rework metric * ADM-692:[backend] test: add rework metric * ADM-692:[backend] test: save report of rework info * ADM-692:[backend] fix: use rework times * ADM-692:[backend] fix: use word 'excluded' * ADM-692:[backend] fix: use String to check * ADM-692:[backend] fix: rebuild state map * ADM-692:[backend] refactor: format code * ADM-692:[backend] feat: set rework in response * ADM-691: [frontend] fix: fix next button display logic * ADM-692:[backend] feat: valid rework state not blank * Revert "ADM-692:[backend] feat: valid rework state not blank" This reverts commit 7a4792f. * ADM-692:[backend] feat: refactor code for calculate cycle and rework branch * ADM-692:[backend] refactor: format code * ADM-692:[backend] fix: sonar issues * ADM-692:[backend] refactor: format code * ADM-692:[backend] feat: add test to coverage code * ADM-691: [frontend] test: fix e2e test * ADM-692:[backend] refactor: format code * ADM-692:[backend] feat:fix sonar test coverage --------- Co-authored-by: neomgb <123063936+neomgb@users.noreply.github.com> Co-authored-by: GuangbinMa <guangbin.ma@thoughtworks.com> Co-authored-by: yulongcai <yulong.cai@thoughtworks.com> Co-authored-by: Shiqi Yuan <shiqi.yuan@thoughtworks.com> Co-authored-by: Leiqiuhong <qiuhong.lei@thoughtworks.com> Co-authored-by: yulongcai <141199398+yulongcai@users.noreply.github.com> Co-authored-by: guzhongren <guzhongren@live.cn> --------- Co-authored-by: Steveay <907221539@qq.com> Co-authored-by: PengxiWPix <pengxi.wang@thoughtworks.com> Co-authored-by: Genhao Liu <103744663+Liughgood@users.noreply.github.com> Co-authored-by: neomgb <123063936+neomgb@users.noreply.github.com> Co-authored-by: GuangbinMa <guangbin.ma@thoughtworks.com> Co-authored-by: yulongcai <yulong.cai@thoughtworks.com> Co-authored-by: Shiqi Yuan <shiqi.yuan@thoughtworks.com> Co-authored-by: Leiqiuhong <qiuhong.lei@thoughtworks.com> Co-authored-by: yulongcai <141199398+yulongcai@users.noreply.github.com> Co-authored-by: guzhongren <guzhongren@live.cn> * ADM-857:[backend]fix: update check buildkite status entrance command * ADM-857:[backend]docs: add a space (#1185) * Adm 851[Backend] fix Snoar refactor issues (#1181) * ADM-851:[backend] fix: fix sonar by extra sort function * ADM-851:[backend] fix: fix sonar by extra write row function * ADM-851:[backend] fix: fix sonar by extra fixDataWithFields * ADM-851:[backend] fix: fix sonar by extra formatAllCards * ADM-851:[backend] fix: fix sonar by extra mapFields * ADM-851:[backend] fix: fix Codacy * ADM-851:[backend] fix: fix parseTotalPage enum * ADM-851:[backend] refactor: use other way to get page number * ADM-861: [frontend] feat: add 'Dev' to Change Failure Rate & Mean time to recovery (#1152) * ADM-861:[frontend]feat: add 'Dev' to the front of Change Failure Rate & Mean time to recovery * ADM-861:[backend]feat: add 'Dev' to csv file * ADM-861:[frontend]feat: add dev to config file * ADM-861:[backend]refactor: rename ChangeFailureRate to DevChangeFailureRate & MeanTimeToRecovery to DevMeanTimeToRecovery * ADM-861:[frontend]refactor: rename ChangeFailureRate to DevChangeFailureRate & MeanTimeToRecovery to DevMeanTimeToRecovery * ADM-861:[frontend]refactor: rename ChangeFailureRate filename to DevChangeFailureRate & MeanTimeToRecovery filename to DevMeanTimeToRecovery * ADM-861:[frontend]refactor: rename devMeanTimeRecoveryPipelines to devMeanTimeToRecoveryOfPipelines * ADM-861:[frontend]fix: fix test * ADM-861:[backend]fix: fix test * ADM-861:[backend]fix: format code * ADM-861:[backend]fix: fix code issue * ADM-861:[backend]fix: fix code issues about Conditions to Cover * ADM-861:[frontend]fix: fix e2e test * ADM-861:[backend]fix: make avgDevMeanTimeToRecovery name available * ADM-861:[backend]fix: fix code issue of AvgDevChangeFailureRate name * fix buildkite check before merging PR (#1187) * fix buildkite check before merging PR * typo * append branch prefix * Buildkite e2e deployment check (#1188) * add buildkite e2e deployment check * enable main branch to deploy e2e every time * enable main branch to deploy e2e every time (#1189) * enable main branch to deploy e2e every time * enable main branch to deploy e2e every time * install jq in playwright image * check empty response from buildkite * change ++ to +1 * check with null for jq * check empty([]) for the checking * update filter for [] when checking * update readme * fix badge of coverage and gate * pref(deps): upgrade[frontend] deps (#1191) * update max_attampt from 20 to 40 * chore(deps): update dependency prettier to v3.2.5 (#1192) * chore(deps): update dependency prettier to v3.2.5 * format --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: guzhongren <guzhongren@live.cn> * chore(deps): update plugin io.spring.dependency-management to v1.1.4 (#1197)[backend] Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update plugin io.spring.javaformat to v0.0.41 (#1199)[backend] Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Upgrade deps[frontend] (#1210) * chore(deps): upgrade some deps * chore(deps): upgrade husky lint-staged and node-fetch * fix(deps): update dependency org.projectlombok:lombok to v1.18.30 (#1201)[backend] Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(secuity): fix wiz security issues * fix(deps): update dependency org.springframework:spring-core to v6.1.5 (#1202)[backend] Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: guzhongren <guzhongren@live.cn> * ADM-864: [frontend] feat: add rework board and table in report page * Revert "ADM-864: [frontend] feat: add rework board and table in report page" This reverts commit 59c411c. * ADM-864: [frontend] feat: add mapping select logic * ADM-864: [frontend] feat: modify advance form group style * ADM-864: [frontend] test: fix test * ADM-864: [frontend] feat: add rework fields check when import * [frontend] ADM-793: reset alter status (#1186) * [ADM-793] feat: reset alter status * [ADM-793] test: add test for reset timeout alert status * [ADM-793] feat: remove set state logic from client * fix(secuity): fix wiz security issues * fix(pipeline): disable trufflehog scan * fix(shell): comments * chore(deps): update dependency @dotenvx/dotenvx to ^0.26.0 (#1214) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * ADM-882 user can't select future time in calendar (#1224) * ADM-882:[frontend]feat: disable future dates in DatePicker * ADM-882:[frontend]feat: validate start date add interval to end date * ADM-882:[frontend]feat: add max date interval 30 days * ADM-882:[frontend]fix: fix prettier * ADM-882:[frontend]fix: fix prettier again * ADM-882:[frontend]fix: fix tests * ADM-882:[frontend]fix: fix prettier * ADM-882:[backend]fix: add trivy ignore * ADM-882:[frontend]fix: remove moment and extract constant * ADM-882:[frontend]fix: fix lint * how to contribute (#1190) * how to contribute * docs(readme): add setup for contribution * docs(readme): how to contribute * Update the contribution readme * docs(contribution): docs for contribution --------- Co-authored-by: yichen.wang <yichen.wang@thoughtworks.com> * docs(docs): upgrade deps * docs([docs]): upgrade deps * docs([docs]): upgrade deps * docs([docs]): upgrade deps * docs([docs]): ignore securty issue * ADM-692:[backend] feat: add from analyse to rework (#1236) * ADM-693:[backend] fix:revert to original logic in fetch done card data * ADM-693:[backend] fix: update rework time is null to zero * ADM-692:[backend] fix: update to do before analysis for rework * ADM-692:[backend] fix: update if condition * ADM-692:[backend] feat: add from analyse to rework * ADM-692:[backend] fix: update method name * ADM-864: [frontend] fix: fix test * ADM-864: [frontend] test: improve test coverate * ADM-692: [frontend] fix: fix e2e (#1240) * ADM-693: [frontend] fix: fix request param issue * ADM-692: [frontend] fix: fix e2e * ADM-692:[docs] fix: fix docs --------- Co-authored-by: yulongcai <yulong.cai@thoughtworks.com> * ADM-864: [frontend] fix: fix merge issue * [ADM-774] style: enhance style for img and note text (#1251) --------- Co-authored-by: Leiqiuhong <qiuhong.lei@thoughtworks.com> Co-authored-by: 李雪冰 <33832990+lxuebing@users.noreply.github.com> Co-authored-by: Steveay <907221539@qq.com> Co-authored-by: PengxiWPix <pengxi.wang@thoughtworks.com> Co-authored-by: Genhao Liu <103744663+Liughgood@users.noreply.github.com> Co-authored-by: yulongcai <yulong.cai@thoughtworks.com> Co-authored-by: Shiqi Yuan <shiqi.yuan@thoughtworks.com> Co-authored-by: yulongcai <141199398+yulongcai@users.noreply.github.com> Co-authored-by: guzhongren <guzhongren@live.cn> Co-authored-by: junbo dai <junbo.dai@thoughtworks.com> Co-authored-by: TingyuDong <113588395+TingyuDong@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: PengxiWPix <113176309+PengxiWPix@users.noreply.github.com> Co-authored-by: yichen.wang <yichen.wang@thoughtworks.com>
au-heartbeat · Mar 21, 2024 · c820a3e · c820a3e
1 parent 5d6d175
commit c820a3e
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 60 deletions.
diff --git a/frontend/__tests__/constants/fileConfig/fileConfig.test.ts b/frontend/__tests__/constants/fileConfig/fileConfig.test.ts
@@ -76,4 +76,34 @@ describe('#fileConfig', () => {
       }),
     ).toEqual(expected);
   });
+
+  it('should get default rework value when rework2State and excludeStates are all invalid', () => {
+    const expected = {
+      ...BASIC_NEW_CONFIG,
+      calendarType: CHINA_CALENDAR,
+      reworkTimesSettings: { rework2State: null, excludeStates: [] },
+    };
+    expect(
+      convertToNewFileConfig({
+        ...BASIC_IMPORTED_OLD_CONFIG_FIXTURE,
+        considerHoliday: true,
+        reworkTimesSettings: { rework2State: 'test', excludeStates: ['In Dev'] },
+      }),
+    ).toEqual(expected);
+  });
+
+  it('should filter invalid rework value when excludeStates field is invalid', () => {
+    const expected = {
+      ...BASIC_NEW_CONFIG,
+      calendarType: CHINA_CALENDAR,
+      reworkTimesSettings: { rework2State: 'In Dev', excludeStates: ['Review'] },
+    };
+    expect(
+      convertToNewFileConfig({
+        ...BASIC_IMPORTED_OLD_CONFIG_FIXTURE,
+        considerHoliday: true,
+        reworkTimesSettings: { rework2State: 'In Dev', excludeStates: ['Review', 'test'] },
+      }),
+    ).toEqual(expected);
+  });
 });
diff --git a/frontend/__tests__/containers/MetricsStep/CycleTime.test.tsx b/frontend/__tests__/containers/MetricsStep/CycleTime.test.tsx
@@ -269,7 +269,7 @@ describe('CycleTime', () => {
       const inputElements = screen.getAllByRole('combobox');
       const selectedInputValue = inputElements.map((option) => option.getAttribute('value'))[0];
 
-      expect(selectedInputValue).toBe('Review');
+      expect(selectedInputValue).toBe('Testing');
       await waitFor(() => expect(mockedUseAppDispatch).toHaveBeenCalledWith(saveDoneColumn([])));
     });
   });
@@ -402,7 +402,7 @@ describe('CycleTime', () => {
 
       const inputElements = screen.getAllByRole('combobox');
       const selectedInputValue = inputElements.map((option) => option.getAttribute('value'))[0];
-      expect(selectedInputValue).toBe('Review');
+      expect(selectedInputValue).toBe('Testing');
       expect(mockedUseAppDispatch).not.toHaveBeenCalledWith(saveDoneColumn([]));
     });
   });

diff --git a/frontend/__tests__/containers/MetricsStep/reworkSettings.test.tsx b/frontend/__tests__/containers/MetricsStep/reworkSettings.test.tsx
@@ -7,6 +7,7 @@ import {
 } from '../../fixtures';
 import { METRICS_CONSTANTS, REWORK_TIME_LIST } from '@src/constants/resources';
 import { act, render, screen, waitFor, within } from '@testing-library/react';
+import { updateCycleTimeSettings } from '@src/context/Metrics/metricsSlice';
 import ReworkSettings from '@src/containers/MetricsStep/ReworkSettings';
 import { setupStore } from '../../utils/setupStoreUtil';
 import userEvent from '@testing-library/user-event';
@@ -19,6 +20,29 @@ jest.mock('@src/hooks/useAppDispatch', () => ({
 }));
 
 const store = setupStore();
+const mockCycleTimeSettings1 = [
+  {
+    column: 'TODO',
+    status: 'TODO',
+    value: 'To do',
+  },
+  {
+    column: 'Doing',
+    status: 'DOING',
+    value: 'In Dev',
+  },
+  {
+    column: 'Blocked',
+    status: 'BLOCKED',
+    value: 'Block',
+  },
+  {
+    column: 'Done',
+    status: 'DONE',
+    value: 'Done',
+  },
+];
+const mockCycleTimeSettings2 = mockCycleTimeSettings1.filter((item) => item.value !== 'Done');
 
 describe('reworkSetting', () => {
   const setup = () =>
@@ -27,6 +51,11 @@ describe('reworkSetting', () => {
         <ReworkSettings />
       </Provider>,
     );
+
+  beforeEach(() => {
+    store.dispatch(updateCycleTimeSettings(mockCycleTimeSettings1));
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -100,7 +129,7 @@ describe('reworkSetting', () => {
       await userEvent.click(stepsListBox2.getByText(ALL));
     });
     await waitFor(async () => {
-      REWORK_TIME_LIST.slice(1).forEach((value) => {
+      [...new Set(mockCycleTimeSettings1.map((item) => item.value))].slice(1).forEach((value) => {
         expect(getByRole('button', { name: value })).toBeInTheDocument();
       });
     });
@@ -109,16 +138,41 @@ describe('reworkSetting', () => {
       await userEvent.click(stepsListBox2.getByText(ALL));
     });
     await waitFor(() => {
-      REWORK_TIME_LIST.forEach((value) => {
+      [...new Set(mockCycleTimeSettings1.map((item) => item.value))].slice(1).forEach((value) => {
         expect(queryByRole('button', { name: value })).not.toBeInTheDocument();
       });
     });
 
     await act(async () => {
-      await userEvent.click(stepsListBox2.getByText(REWORK_TIME_LIST[1]));
+      await userEvent.click(stepsListBox2.getByText(REWORK_TIME_LIST[3]));
     });
     await waitFor(async () => {
-      expect(getByRole('button', { name: REWORK_TIME_LIST[1] })).toBeInTheDocument();
+      expect(getByRole('button', { name: REWORK_TIME_LIST[3] })).toBeInTheDocument();
+    });
+  });
+
+  it('should get correct value when board mappings have not done value', async () => {
+    store.dispatch(updateCycleTimeSettings(mockCycleTimeSettings2));
+    const { getByRole, getAllByRole } = setup();
+    await act(async () => {
+      await userEvent.click(getAllByRole('button', { name: LIST_OPEN })[0]);
+    });
+    const stepsListBox1 = within(getByRole('listbox'));
+    await act(async () => {
+      await userEvent.click(stepsListBox1.getByText(METRICS_CONSTANTS.todoValue));
+    });
+    await act(async () => {
+      await userEvent.click(getAllByRole('button', { name: LIST_OPEN })[1]);
+    });
+    const stepsListBox2 = within(getByRole('listbox'));
+
+    await act(async () => {
+      await userEvent.click(stepsListBox2.getByText(ALL));
+    });
+    await waitFor(async () => {
+      [...new Set(mockCycleTimeSettings2.map((item) => item.value))].slice(1).forEach((value) => {
+        expect(getByRole('button', { name: value })).toBeInTheDocument();
+      });
     });
   });
 });
diff --git a/frontend/__tests__/hooks/useVerifyPipelineToolEffect.test.tsx b/frontend/__tests__/hooks/useVerifyPipelineToolEffect.test.tsx
@@ -17,6 +17,10 @@ jest.mock('react-redux', () => ({
 
 describe('use verify pipelineTool state', () => {
   it('should return empty error message when call verify feature given client returns 204', async () => {
+    pipelineToolClient.verify = jest.fn().mockResolvedValue({
+      code: HttpStatusCode.NoContent,
+    });
+
     const { result } = renderHook(() => useVerifyPipelineToolEffect());
 
     act(() => {

diff --git a/frontend/src/constants/fileConfig.ts b/frontend/src/constants/fileConfig.ts
@@ -1,5 +1,5 @@
+import { CALENDAR, REWORK_TIME_LIST } from '@src/constants/resources';
 import { IReworkConfig } from '@src/context/Metrics/metricsSlice';
-import { CALENDAR } from '@src/constants/resources';
 
 export interface OldFileConfig {
   projectName: string;
@@ -36,7 +36,7 @@ export interface OldFileConfig {
   deployment?: OldConfigSetting[];
   leadTime?: OldConfigSetting[];
   pipelineCrews?: string[];
-  reworkTimesSettings: IReworkConfig;
+  reworkTimesSettings?: IReworkConfig;
 }
 
 interface OldConfigSetting {
@@ -89,9 +89,23 @@ export interface NewFileConfig {
   deployment?: NewConfigSetting[];
   leadTime?: NewConfigSetting[];
   pipelineCrews?: string[];
-  reworkTimesSettings: IReworkConfig;
+  reworkTimesSettings?: IReworkConfig;
 }
 
+const filterExcludeReworkStatus = (reworkTimesSettings: IReworkConfig | undefined) => {
+  if (!reworkTimesSettings) return;
+  const rework2State = REWORK_TIME_LIST.includes(reworkTimesSettings?.rework2State as string)
+    ? reworkTimesSettings.rework2State
+    : null;
+  const excludeStates = reworkTimesSettings?.excludeStates.filter((value) => {
+    return REWORK_TIME_LIST.includes(value);
+  });
+  return {
+    rework2State,
+    excludeStates: rework2State ? excludeStates : [],
+  };
+};
+
 export const convertToNewFileConfig = (fileConfig: OldFileConfig | NewFileConfig): NewFileConfig => {
   if ('considerHoliday' in fileConfig) {
     const {
@@ -138,7 +152,7 @@ export const convertToNewFileConfig = (fileConfig: OldFileConfig | NewFileConfig
       pipelineCrews,
       cycleTime,
       doneStatus,
-      reworkTimesSettings,
+      reworkTimesSettings: filterExcludeReworkStatus(reworkTimesSettings),
       classification: classifications,
       deployment: deployment?.map((item, index) => ({
         id: index,
@@ -149,5 +163,5 @@ export const convertToNewFileConfig = (fileConfig: OldFileConfig | NewFileConfig
       })),
     };
   }
-  return fileConfig;
+  return { ...fileConfig, reworkTimesSettings: filterExcludeReworkStatus(fileConfig.reworkTimesSettings) };
 };
diff --git a/frontend/src/constants/resources.ts b/frontend/src/constants/resources.ts
@@ -161,9 +161,9 @@ export const CYCLE_TIME_LIST = [
   METRICS_CONSTANTS.analysisValue,
   METRICS_CONSTANTS.inDevValue,
   METRICS_CONSTANTS.blockValue,
+  METRICS_CONSTANTS.reviewValue,
   METRICS_CONSTANTS.waitingValue,
   METRICS_CONSTANTS.testingValue,
-  METRICS_CONSTANTS.reviewValue,
   METRICS_CONSTANTS.doneValue,
 ];
 

diff --git a/frontend/src/containers/MetricsStep/Advance/Advance.tsx b/frontend/src/containers/MetricsStep/Advance/Advance.tsx
@@ -1,6 +1,6 @@
 import { selectAdvancedSettings, updateAdvancedSettings } from '@src/context/Metrics/metricsSlice';
+import { AdvancedContainer, AdvancedForm, AdvancedTitleContainer, AdvancedWrapper } from './style';
 import { ItemCheckbox, TitleAndTooltipContainer, TooltipContainer } from '../CycleTime/style';
-import { AdvancedContainer, AdvancedForm, AdvancedTitleContainer } from './style';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
 import { StyledLink } from '@src/containers/MetricsStep/style';
 import { useAppDispatch } from '@src/hooks/useAppDispatch';
@@ -82,21 +82,23 @@ export const Advance = () => {
 
       {open && (
         <>
-          <AdvancedForm>
-            {fields.map(({ key, col, value }, index) => (
-              <TextField
-                variant='standard'
-                sx={{ gridColumn: `span ${col}` }}
-                key={index}
-                label={key}
-                value={value}
-                data-testid={key}
-                inputProps={{ 'aria-label': `input ${key}` }}
-                onChange={(e) => updateField(key, e.target.value)}
-                placeholder={'Customized filed key'}
-              />
-            ))}
-          </AdvancedForm>
+          <AdvancedWrapper>
+            <AdvancedForm>
+              {fields.map(({ key, col, value }, index) => (
+                <TextField
+                  variant='standard'
+                  sx={{ gridColumn: `span ${col}` }}
+                  key={index}
+                  label={key}
+                  value={value}
+                  data-testid={key}
+                  inputProps={{ 'aria-label': `input ${key}` }}
+                  onChange={(e) => updateField(key, e.target.value)}
+                  placeholder={'Customized filed key'}
+                />
+              ))}
+            </AdvancedForm>
+          </AdvancedWrapper>
         </>
       )}
     </>

diff --git a/frontend/src/containers/MetricsStep/Advance/style.tsx b/frontend/src/containers/MetricsStep/Advance/style.tsx
@@ -10,17 +10,31 @@ export const AdvancedTitleContainer = styled.div({
 
 export const AdvancedContainer = styled('div')({
   display: 'flex',
-  margin: '1rem 0 0.375rem',
+  margin: '1rem 0 1.25rem',
 });
 
 export const AdvancedForm = styled('form')({
   display: 'grid',
   gridTemplateColumns: 'repeat(2, 1fr)',
   gap: '1rem',
-  marginTop: '1rem',
   marginBottom: '1rem',
   width: '100%',
   [theme.breakpoints.down('md')]: {
     gridTemplateColumns: '1fr',
   },
 });
+
+export const AdvancedWrapper = styled('div')`
+  position: relative;
+  width: 100%;
+  border: ${theme.main.cardBorder};
+  box-shadow: none;
+  margin-bottom: 1rem;
+  line-height: 2rem;
+  boarder-radius: 0.25rem;
+  padding: 2.5%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
diff --git a/frontend/src/containers/MetricsStep/CycleTime/Table/index.tsx b/frontend/src/containers/MetricsStep/CycleTime/Table/index.tsx
@@ -10,6 +10,7 @@ import {
   saveDoneColumn,
   selectMetricsContent,
   setCycleTimeSettingsType,
+  updateReworkTimesSettings,
 } from '@src/context/Metrics/metricsSlice';
 import {
   StyledRadioGroup,
@@ -56,6 +57,7 @@ const CycleTimeTable = () => {
       );
       isColumnAsKey && resetRealDoneColumn(name, value);
       dispatch(updateCycleTimeSettings(newCycleTimeSettings));
+      dispatch(updateReworkTimesSettings({ excludeStates: [], rework2State: null }));
     },
     [cycleTimeSettings, dispatch, isColumnAsKey, resetRealDoneColumn],
   );