PR Incident Filters UI Component (#658)

* Added Incident PRs Setting

* Exclude Revert PR from Incident types based on IncidentPRsSetting and added tests

* Core logic for Incident PR filtering

* Updated Incident types setting tests

* modify core logic for efficiency and add tests for incident prs

* Added Incident PR settings slices, types and api

* filters component for team incident PRs

* Set Include revert PRs default to True

* Improved type safety and better variable naming

* Improved UI and User experience

* Better variable naming and code readability

Author: Kamlesh72

web-server/pages/api/internal/team/[team_id]/incident_prs_filter.ts

@@ -0,0 +1,59 @@
+import * as yup from 'yup';
+
+import { handleRequest } from '@/api-helpers/axios';
+import { Endpoint, nullSchema } from '@/api-helpers/global';
+import {
+  TeamIncidentPRsSettingApiResponse,
+  TeamIncidentPRsSettingsResponse
+} from '@/types/resources';
+
+const pathSchema = yup.object().shape({
+  team_id: yup.string().uuid().required()
+});
+
+const putSchema = yup.object().shape({
+  setting: yup.object().shape({
+    include_revert_prs: yup.boolean(),
+    filters: yup.array(
+      yup.object({
+        field: yup.string().required(),
+        value: yup.string().required()
+      })
+    )
+  })
+});
+
+const endpoint = new Endpoint(pathSchema);
+
+endpoint.handle.GET(nullSchema, async (req, res) => {
+  const { team_id } = req.payload;
+  const { setting } = await handleRequest<TeamIncidentPRsSettingApiResponse>(
+    `/teams/${team_id}/settings`,
+    {
+      method: 'GET',
+      params: {
+        setting_type: 'INCIDENT_PRS_SETTING'
+      }
+    }
+  );
+  return res.send({ setting } as TeamIncidentPRsSettingsResponse);
+});
+
+endpoint.handle.PUT(putSchema, async (req, res) => {
+  const { team_id, setting } = req.payload;
+  const response = await handleRequest<TeamIncidentPRsSettingApiResponse>(
+    `/teams/${team_id}/settings`,
+    {
+      method: 'PUT',
+      data: {
+        setting_type: 'INCIDENT_PRS_SETTING',
+        setting_data: setting
+      }
+    }
+  );
+  return res.send({
+    setting: response.setting
+  } as TeamIncidentPRsSettingsResponse);
+});
+
+export default endpoint.serve();

web-server/src/components/DoraMetricsConfigurationSettings.tsx

@@ -3,13 +3,17 @@ import { Button, Menu, MenuItem } from '@mui/material';
 import { useCallback, useRef, useEffect } from 'react';
 
 import { FlexBox } from '@/components/FlexBox';
+import { TeamIncidentPRsFilter } from '@/components/TeamIncidentPRsFilter';
 import { TeamProductionBranchSelector } from '@/components/TeamProductionBranchSelector';
 import { isRoleLessThanEM } from '@/constants/useRoute';
 import { useModal } from '@/contexts/ModalContext';
 import { useAuth } from '@/hooks/useAuth';
 import { useBoolState } from '@/hooks/useEasyState';
 import { useSingleTeamConfig } from '@/hooks/useStateTeamConfig';
-import { fetchTeamReposProductionBranches } from '@/slices/team';
+import {
+  fetchTeamIncidentPRsFilter,
+  fetchTeamReposProductionBranches
+} from '@/slices/team';
 import { useDispatch } from '@/store';
 
 export const DoraMetricsConfigurationSettings = () => {
@@ -20,6 +24,7 @@ export const DoraMetricsConfigurationSettings = () => {
   const isEng = isRoleLessThanEM(role);
   useEffect(() => {
     dispatch(fetchTeamReposProductionBranches({ team_id: singleTeamId }));
+    dispatch(fetchTeamIncidentPRsFilter({ team_id: singleTeamId }));
   }, [dispatch, singleTeamId]);
 
   const openProductionBranchSelectorModal = useCallback(async () => {
@@ -32,6 +37,14 @@ export const DoraMetricsConfigurationSettings = () => {
     });
   }, [addModal, closeModal]);
 
+  const openIncidentPRFilterModal = useCallback(async () => {
+    const modal = addModal({
+      title: `Configure Filters for Incident PRs`,
+      body: <TeamIncidentPRsFilter onClose={() => closeModal(modal.key)} />,
+      showCloseIcon: true
+    });
+  }, [addModal, closeModal]);
+
   const anchorEl = useRef(null);
   const open = useBoolState(false);
 
@@ -74,6 +87,14 @@ export const DoraMetricsConfigurationSettings = () => {
         >
           Configure Production Branches
         </MenuItem>
+        <MenuItem
+          onClick={() => {
+            open.false();
+            openIncidentPRFilterModal();
+          }}
+        >
+          Configure Filters for Incident PRs
+        </MenuItem>
       </Menu>
     </>
   );