fix(vcd): disable confirm button on update requests

ref: MANAGER-16472 desc: prevent multiple requests on update name or description Signed-off-by: Paul Dickerson <[email protected]>
ovh · Dec 17, 2024 · 4e79080 · 4e79080
1 parent f31fcf4
commit 4e79080
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/components/modal/EditDetailModal.tsx b/packages/manager/apps/hpc-vmware-managed-vcd/src/components/modal/EditDetailModal.tsx
@@ -30,6 +30,7 @@ interface EditModalProps {
   onCloseModal: () => void;
   onEdit: (detail: string) => Promise<AxiosResponse<unknown>>;
   error: ApiError | null;
+  isLoading: boolean;
 }
 
 export const EditDetailModal = ({
@@ -41,12 +42,14 @@ export const EditDetailModal = ({
   onCloseModal,
   onEdit,
   error,
+  isLoading,
 }: EditModalProps) => {
   const { t } = useTranslation('dashboard');
   const [newDetail, setNewDetail] = useState<string>(detailValue || '');
   const [isErrorVisible, setIsErrorVisible] = useState(false);
   const isValidDetail = validateDetail(newDetail);
-  const isButtonEnabled = isValidDetail && newDetail !== detailValue;
+  const isButtonEnabled =
+    isValidDetail && newDetail !== detailValue && !isLoading;
 
   const handleSubmit = async () => {
     if (isValidDetail) {

diff --git a/...ges/manager/apps/hpc-vmware-managed-vcd/src/components/modal/UpdateDetailModalHandler.tsx b/...ges/manager/apps/hpc-vmware-managed-vcd/src/components/modal/UpdateDetailModalHandler.tsx
@@ -33,7 +33,12 @@ export const UpdateDetailModalHandler = ({
   const { addSuccess } = useMessageContext();
   const { id } = useParams();
   const { data: vcdOrganization } = useVcdOrganization({ id });
-  const { updateDetails, error, isError } = useUpdateVcdOrganizationDetails({
+  const {
+    updateDetails,
+    error,
+    isError,
+    isPending,
+  } = useUpdateVcdOrganizationDetails({
     id,
     onSuccess: () => {
       addSuccess({
@@ -89,6 +94,7 @@ export const UpdateDetailModalHandler = ({
       }
       onCloseModal={closeModal}
       error={isError ? error : null}
+      isLoading={isPending}
     />
   );
 };
diff --git a/...-vcd/src/pages/dashboard/datacentre/general-informations/edit/EditVdcDescription.page.tsx b/...-vcd/src/pages/dashboard/datacentre/general-informations/edit/EditVdcDescription.page.tsx
@@ -18,7 +18,7 @@ export default function EditVdcDescription() {
   const { addSuccess } = useMessageContext();
   const { id, vdcId } = useParams();
   const { data: vcdDatacentre } = useVcdDatacentre(id, vdcId);
-  const { updateDetails, error, isError } = useUpdateVdcDetails({
+  const { updateDetails, error, isError, isPending } = useUpdateVdcDetails({
     id,
     vdcId,
     onSuccess: () => {
@@ -52,6 +52,7 @@ export default function EditVdcDescription() {
         })
       }
       error={isError ? error : null}
+      isLoading={isPending}
     />
   );
 }
diff --git a/packages/manager/modules/vcd-api/src/hook/useUpdateVcdDatacentre.ts b/packages/manager/modules/vcd-api/src/hook/useUpdateVcdDatacentre.ts
@@ -19,7 +19,7 @@ export const useUpdateVdcDetails = ({
 }) => {
   const queryClient = useQueryClient();
 
-  const { mutateAsync: updateDetails, error, isError } = useMutation({
+  const { mutateAsync: updateDetails, ...mutation } = useMutation({
     mutationKey: updateVdcDetailsMutationKey(vdcId),
     mutationFn: ({ details }: UpdateVdcDetailsParams) =>
       updateVdcDetails({ id, vdcId, details }),
@@ -32,5 +32,5 @@ export const useUpdateVdcDetails = ({
     onError: (result: ApiError) => onError?.(result),
   });
 
-  return { updateDetails, error, isError };
+  return { updateDetails, ...mutation };
 };
diff --git a/packages/manager/modules/vcd-api/src/hook/useUpdateVcdOrganization.ts b/packages/manager/modules/vcd-api/src/hook/useUpdateVcdOrganization.ts
@@ -22,7 +22,7 @@ export const useUpdateVcdOrganizationDetails = ({
 }) => {
   const queryClient = useQueryClient();
 
-  const { mutateAsync: updateDetails, error, isError } = useMutation({
+  const { mutateAsync: updateDetails, ...mutation } = useMutation({
     mutationKey: updateVcdOrganizationDetailsMutationKey(id),
     mutationFn: ({ details }: UpdateVcdOrganizationDetailsParams) =>
       updateVcdOrganizationDetails({ id, details }),
@@ -40,5 +40,5 @@ export const useUpdateVcdOrganizationDetails = ({
     onError: (result: ApiError) => onError?.(result),
   });
 
-  return { updateDetails, error, isError };
+  return { updateDetails, ...mutation };
 };