Cleanup and invalidation

linode · Jan 26, 2024 · bc6604c · bc6604c
1 parent 3d61628
commit bc6604c
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 32 deletions.
diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupDrawerContent.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupDrawerContent.tsx
@@ -30,6 +30,7 @@ interface Props {
   regions: Region[];
   selectedPlacementGroup?: PlacementGroup;
   selectedRegionId?: string;
+  setIsFormDirty: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const PlacementGroupsDrawerContent = (props: Props) => {
@@ -43,6 +44,7 @@ export const PlacementGroupsDrawerContent = (props: Props) => {
     regions,
     selectedPlacementGroup,
     selectedRegionId,
+    setIsFormDirty,
   } = props;
   const {
     errors,
@@ -59,11 +61,15 @@ export const PlacementGroupsDrawerContent = (props: Props) => {
   React.useEffect(() => {
     if (open) {
       resetForm();
-      // setGeneralSubnetErrorsFromAPI([]);
-      // setGeneralAPIError(undefined);
     }
   }, [open, resetForm]);
 
+  React.useEffect(() => {
+    if (isSubmitting) {
+      setIsFormDirty(true);
+    }
+  }, [isSubmitting]);
+
   const generalError = status?.generalError;
   const isRenameDrawer = mode === 'rename';
 

diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx
@@ -34,6 +34,7 @@ export const PlacementGroupsCreateDrawer = (
   const { data: regions } = useRegionsQuery();
   const { mutateAsync } = useCreatePlacementGroup();
   const { enqueueSnackbar } = useSnackbar();
+  const [isFormDirty, setIsFormDirty] = React.useState<boolean>(false);
 
   const {
     errors,
@@ -57,17 +58,16 @@ export const PlacementGroupsCreateDrawer = (
       values: CreatePlacementGroupPayload,
       { setErrors, setStatus, setSubmitting }
     ) {
+      setIsFormDirty(false);
       setStatus(undefined);
       setErrors({});
       const payload = { ...values };
 
       mutateAsync(payload)
         .then((response) => {
           setSubmitting(false);
-          // Invalidate Placement Groups Queries
           queryClient.invalidateQueries([placementGroupQueryKey]);
 
-          // Show snackbar notification
           enqueueSnackbar(
             `Placement Group ${payload.label} successfully created`,
             {
@@ -94,18 +94,10 @@ export const PlacementGroupsCreateDrawer = (
         });
     },
     validateOnBlur: false,
-    validateOnChange: false,
+    validateOnChange: isFormDirty,
     validationSchema: createPlacementGroupSchema,
   });
 
-  React.useEffect(() => {
-    if (open) {
-      resetForm();
-      // setGeneralSubnetErrorsFromAPI([]);
-      // setGeneralAPIError(undefined);
-    }
-  }, [open, resetForm]);
-
   return (
     <Drawer onClose={onClose} open={open} title="Create Placement Group">
       <PlacementGroupsDrawerContent
@@ -128,6 +120,7 @@ export const PlacementGroupsCreateDrawer = (
         open={open}
         regions={regions ?? []}
         selectedRegionId={selectedRegionId}
+        setIsFormDirty={setIsFormDirty}
       />
     </Drawer>
   );

diff --git a/...ages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/...ages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
@@ -37,6 +37,10 @@ export const PlacementGroupsDetail = () => {
   } = useMutatePlacementGroup(placementGroupId);
   const errorText = getErrorStringOrDefault(updatePlacementGroupError ?? '');
 
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
   if (!placementGroup) {
     return <NotFound />;
   }
@@ -47,10 +51,6 @@ export const PlacementGroupsDetail = () => {
     );
   }
 
-  if (isLoading) {
-    return <CircleProgress />;
-  }
-
   const linodeCount = getPlacementGroupLinodeCount(placementGroup);
   const tabs = [
     {

diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.tsx
@@ -40,6 +40,7 @@ export const PlacementGroupsRenameDrawer = (
     selectedPlacementGroup?.id ?? -1
   );
   const { enqueueSnackbar } = useSnackbar();
+  const [isFormDirty, setIsFormDirty] = React.useState<boolean>(false);
 
   const {
     errors,
@@ -60,11 +61,13 @@ export const PlacementGroupsRenameDrawer = (
       region: selectedPlacementGroup?.region ?? '',
     },
     onSubmit(values, { setErrors, setStatus, setSubmitting }) {
+      setIsFormDirty(false);
       setStatus(undefined);
       setErrors({});
       const payload = { ...values };
+      const { label } = payload;
 
-      mutateAsync(payload)
+      mutateAsync({ label })
         .then((response) => {
           setSubmitting(false);
           // Invalidate Placement Groups Queries
@@ -97,18 +100,10 @@ export const PlacementGroupsRenameDrawer = (
         });
     },
     validateOnBlur: false,
-    validateOnChange: false,
+    validateOnChange: isFormDirty,
     validationSchema: renamePlacementGroupSchema,
   });
 
-  React.useEffect(() => {
-    if (open) {
-      resetForm();
-      // setGeneralSubnetErrorsFromAPI([]);
-      // setGeneralAPIError(undefined);
-    }
-  }, [open, resetForm]);
-
   return (
     <Drawer
       onClose={onClose}
@@ -132,6 +127,7 @@ export const PlacementGroupsRenameDrawer = (
         onClose={onClose}
         open={open}
         regions={regions ?? []}
+        setIsFormDirty={setIsFormDirty}
       />
     </Drawer>
   );

diff --git a/packages/validation/src/placement-groups.schema.ts b/packages/validation/src/placement-groups.schema.ts
@@ -1,16 +1,18 @@
 import { array, number, object, string } from 'yup';
 
+const labelValidation = string()
+  .required('Label is required.')
+  .min(3, 'Label must be between 3 and 32 characters.')
+  .max(32, 'Label must be between 3 and 32 characters.');
+
 export const createPlacementGroupSchema = object({
-  label: string()
-    .required('Label is required.')
-    .min(3, 'Label must be between 3 and 32 characters.')
-    .max(32, 'Label must be between 3 and 32 characters.'),
+  label: labelValidation,
   affinity_type: string().required('Affinity type is required.'),
   region: string().required('Region is required.'),
 });
 
 export const renamePlacementGroupSchema = object({
-  label: string().required('Label is required.'),
+  label: labelValidation,
 });
 
 /**