feat: disabled buttons on redeploy, fixed file path import

Author: BboyAkers

src/features/instance/applications/components/ApplicationsSidebar/FileTreeExplorer/FileMenuActionButtons.tsx

@@ -11,7 +11,7 @@ import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { Minus, Plus, RefreshCwIcon } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { RedeployApplicationModal } from '../../../modals/RedeployApplication';
+import { RedeployApplicationModal } from '@/features/instance/applications/modals/RedeployApplicationModal';
 
 export function FileMenuActionButtons() {
 	const queryClient = useQueryClient();
@@ -187,6 +187,7 @@ export function FileMenuActionButtons() {
 				isModalOpen={isRedeployApplicationClicked}
 				setIsModalOpen={setIsRedeployApplicationClicked}
 				redeployPackage={redeployPackage}
+				isRedeployPackagePending={isDeployComponentPending}
 				packageUrl={selectedFolderFile.pkg}
 			/>
 		</div>

…lications/modals/RedeployApplication.tsx …ions/modals/RedeployApplicationModal.tsxsrc/features/instance/applications/modals/RedeployApplication.tsx renamed to src/features/instance/applications/modals/RedeployApplicationModal.tsx src/features/instance/applications/modals/RedeployApplication.tsx renamed to src/features/instance/applications/modals/RedeployApplicationModal.tsx

@@ -15,36 +15,41 @@ export function RedeployApplicationModal({
 	isModalOpen = false,
 	setIsModalOpen,
 	redeployPackage,
-  packageUrl,
+	isRedeployPackagePending,
+	packageUrl,
 }: {
 	readonly isModalOpen: boolean;
 	readonly setIsModalOpen: (value: boolean) => void;
 	readonly redeployPackage: (applicationUrl: string) => void;
-  readonly packageUrl?: string;
+	readonly isRedeployPackagePending?: boolean;
+	readonly packageUrl?: string;
 }) {
 	const methods = useForm({
-    defaultValues: { 
-      applicationUrl: packageUrl
-    },
-  });
+		defaultValues: {
+			applicationUrl: packageUrl,
+		},
+	});
 
-  const { setFocus, control, handleSubmit } = methods;
+	const { setFocus, control, handleSubmit } = methods;
 
-  const submitForm = ({ applicationUrl }: { applicationUrl: string | undefined }) => {
-	if (applicationUrl) {
-	  redeployPackage(applicationUrl);
-	}
-  }
+	const submitForm = ({ applicationUrl }: { applicationUrl: string | undefined }) => {
+		if (applicationUrl) {
+			redeployPackage(applicationUrl);
+		}
+	};
 
-  useEffect(() => {
-      setFocus('applicationUrl');
-    }, [setFocus]);
+	useEffect(() => {
+		setFocus('applicationUrl');
+	}, [setFocus]);
 
 	return (
-		<Dialog onOpenChange={() => {
-      setIsModalOpen(!isModalOpen);
-      methods.reset({ applicationUrl: packageUrl });
-      }} open={isModalOpen}>
+		<Dialog
+			onOpenChange={() => {
+				setIsModalOpen(!isModalOpen);
+				methods.reset({ applicationUrl: packageUrl });
+			}}
+			open={isModalOpen}
+		>
 			<DialogContent aria-describedby={undefined} className="text-white">
 				<DialogHeader>
 					<DialogTitle>Redeploy Package</DialogTitle>
@@ -75,13 +80,24 @@ export function RedeployApplicationModal({
 									</FormItem>
 								)}
 							/>
-							<Button variant="positiveOutline" type="submit" className="w-full rounded-full">
+							<Button
+								variant="positiveOutline"
+								type="submit"
+								className="w-full rounded-full"
+								disabled={isRedeployPackagePending}
+							>
 								<RefreshCwIcon /> Redeploy Application
 							</Button>
-							<Button type="button" variant="default" className="w-full rounded-full" onClick={() => {
-                setIsModalOpen(false)
-                methods.reset({ applicationUrl: packageUrl });
-              }}>
+							<Button
+								type="button"
+								variant="default"
+								className="w-full rounded-full"
+								onClick={() => {
+									setIsModalOpen(false);
+									methods.reset({ applicationUrl: packageUrl });
+								}}
+								disabled={isRedeployPackagePending}
+							>
 								<Ban /> Cancel
 							</Button>
 						</form>