Better variable naming and code readability

Author: Kamlesh72

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

@@ -1,13 +1,12 @@
 import * as yup from 'yup';
 
 import { handleRequest } from '@/api-helpers/axios';
-import { Endpoint } from '@/api-helpers/global';
+import { Endpoint, nullSchema } from '@/api-helpers/global';
 import {
   TeamIncidentPRsSettingApiResponse,
   TeamIncidentPRsSettingsResponse
 } from '@/types/resources';
 
-const getSchema = yup.object();
 const pathSchema = yup.object().shape({
   team_id: yup.string().uuid().required()
 });
@@ -26,7 +25,7 @@ const putSchema = yup.object().shape({
 
 const endpoint = new Endpoint(pathSchema);
 
-endpoint.handle.GET(getSchema, async (req, res) => {
+endpoint.handle.GET(nullSchema, async (req, res) => {
   const { team_id } = req.payload;
   const { setting } = await handleRequest<TeamIncidentPRsSettingApiResponse>(
     `/teams/${team_id}/settings`,

web-server/src/components/TeamIncidentPRsFilter.tsx

@@ -34,34 +34,31 @@ import { FlexBox } from './FlexBox';
 import { LightTooltip, IOSSwitch } from './Shared';
 import { Line } from './Text';
 
-const incidentPRFilterFormSchema = yup
-  .object({
-    setting: yup
-      .object({
-        include_revert_prs: yup.boolean(),
-        filters: yup.array(
-          yup.object({
-            field: yup.string().required(),
-            value: yup
-              .string()
-              .required()
-              .test(
-                'regex-group',
-                'Regex must contain exactly one (\\d+) match group',
-                (val) => {
-                  if (!val) return false;
-                  const match = val.match(/\(\\d\+\)/g);
-                  return match && match.length === 1;
-                }
-              )
-          })
-        )
-      })
-      .required()
-  })
-  .required();
+const individualFilterSchema = yup.object({
+  field: yup.string().required(),
+  value: yup
+    .string()
+    .test(
+      'regex-group',
+      'Regex must contain exactly one (\\d+) match group',
+      (val) => {
+        if (!val) return false;
+        const match = val.match(/\(\\d\+\)/g);
+        return match && match.length === 1;
+      }
+    )
+});
+
+const settingsSchema = yup.object({
+  include_revert_prs: yup.boolean().required(),
+  filters: yup.array(individualFilterSchema).required()
+});
+
+const incidentPRFilterFormSchema = yup.object({
+  setting: settingsSchema.required()
+});
 
-type incidentPRFilterFormSchema = yup.InferType<
+type IncidentPRFilterFormSchema = yup.InferType<
   typeof incidentPRFilterFormSchema
 >;
 
@@ -103,7 +100,7 @@ export const TeamIncidentPRsFilter: FC<{
     (s) => s.team.teamIncidentPRsFilters
   )?.setting;
 
-  const addUserMethods = useForm<incidentPRFilterFormSchema>({
+  const formMethods = useForm<IncidentPRFilterFormSchema>({
     resolver: yupResolver(incidentPRFilterFormSchema),
     mode: 'onChange',
     defaultValues: {
@@ -115,7 +112,7 @@ export const TeamIncidentPRsFilter: FC<{
     watch,
     formState: { isDirty, isValid, errors },
     setValue
-  } = addUserMethods;
+  } = formMethods;
 
   const settings = watch('setting');
 
@@ -173,6 +170,13 @@ export const TeamIncidentPRsFilter: FC<{
     }
   }, [settings.filters, setValue]);
 
+  const isSingleEmptyFilter =
+    settings.filters.length === 1 &&
+    !settings.filters[0].field &&
+    !settings.filters[0].value;
+
+  const isSaveEnabled = isDirty && (isValid || isSingleEmptyFilter);
+
   return (
     <FlexBox gap={2} col maxWidth={'560px'}>
       <Line white small mt={-1} textAlign={'start'}>
@@ -182,7 +186,7 @@ export const TeamIncidentPRsFilter: FC<{
 
       <Divider />
 
-      <FormProvider {...addUserMethods}>
+      <FormProvider {...formMethods}>
         <FlexBox col gap2>
           <FlexBox>
             <Line big flexGrow={1}>
@@ -364,15 +368,7 @@ export const TeamIncidentPRsFilter: FC<{
             type="submit"
             variant="outlined"
             color="primary"
-            disabled={
-              !isDirty ||
-              !(
-                isValid ||
-                (settings.filters.length === 1 &&
-                  !settings.filters[0].field &&
-                  !settings.filters[0].value)
-              )
-            }
+            disabled={!isSaveEnabled}
             loading={isSaving.value}
             sx={{
               '&.Mui-disabled': {