Commit 15b26f90 authored by Dimitrios Gogos's avatar Dimitrios Gogos
Browse files

feat: remove deprecated delete confirmation dialogs and replace with a unified ConfirmActionDialog

parent 1fe2ef71

portal-gui/src/components/applications/confirm-delete-app-dialog.tsx

deleted100644 → 0
+0 −103
Changes for portal-gui/src/components/applications/confirm-delete-app-dialog.tsx: 0 added lines, 103 removed lines.
Original line number Diff line number Diff line 
import { useState } from 'react';

import { Loader2, Trash2 } from 'lucide-react';



import {

  AlertDialog,

  AlertDialogAction,

  AlertDialogCancel,

  AlertDialogContent,

  AlertDialogDescription,

  AlertDialogFooter,

  AlertDialogHeader,

  AlertDialogTitle,

} from '@/components/ui/alert-dialog';



import type { AppDeleteProps } from '@/types/application';



import { deleteApplication } from '@/services/applications/profiles';



export function ConfirmDeleteAppDialog({

  open,

  onOpenChange,

  application,

  onDeleted,

}: AppDeleteProps) {

  const [deleting, setDeleting] = useState(false);

  const [error, setError] = useState<string | null>(null);



  const handleDelete = async () => {

    setDeleting(true);

    setError(null);



    try {

      await deleteApplication(application.appId);



      await onDeleted?.();

      onOpenChange(false);

    } catch (err) {

      setError(

        err instanceof Error ? err.message : 'Failed to delete application.',

      );

    } finally {

      setDeleting(false);

    }

  };



  const handleOpenChange = (value: boolean) => {

    if (deleting) {

      return;

    }

    if (!value) {

      setError(null);

    }

    onOpenChange(value);

  };



  return (

    <AlertDialog open={open} onOpenChange={handleOpenChange}>

      <AlertDialogContent className="sm:max-w-lg">

        <AlertDialogHeader>

          <AlertDialogTitle>Delete application profile?</AlertDialogTitle>



          <AlertDialogDescription>

            Are you sure you want to delete{' '}

            <span className="font-semibold text-foreground">

              {application.name}

            </span>

            ? This action cannot be undone.

          </AlertDialogDescription>

        </AlertDialogHeader>



        {error && (

          <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">

            {error}

          </div>

        )}



        <AlertDialogFooter>

          <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>

          <AlertDialogAction

            disabled={deleting}

            onClick={(event) => {

              event.preventDefault();

              void handleDelete();

            }}

            className="text-destructive-foreground bg-destructive hover:bg-destructive/90"

          >

            {deleting ? (

              <>

                <Loader2 className="mr-2 h-4 w-4 animate-spin" />

                Deleting…

              </>

            ) : (

              <>

                <Trash2 className="mr-2 h-4 w-4" />

                Delete

              </>

            )}

          </AlertDialogAction>

        </AlertDialogFooter>

      </AlertDialogContent>

    </AlertDialog>

  );

}

portal-gui/src/components/applications/confirm-delete-deployment-dialog.tsx

deleted100644 → 0
+0 −82
Changes for portal-gui/src/components/applications/confirm-delete-deployment-dialog.tsx: 0 added lines, 82 removed lines.
Original line number Diff line number Diff line 
import { useState } from 'react';



import {

  AlertDialog,

  AlertDialogAction,

  AlertDialogCancel,

  AlertDialogContent,

  AlertDialogDescription,

  AlertDialogFooter,

  AlertDialogHeader,

  AlertDialogTitle,

} from '@/components/ui/alert-dialog';



import type { DeploymentDeleteProps } from '@/types/application';



export function ConfirmDeleteDeploymentDialog({

  open,

  onOpenChange,

  deployment,

  onDeleted,

}: DeploymentDeleteProps) {

  const [deleting, setDeleting] = useState(false);

  const [error, setError] = useState<string | null>(null);



  const handleDelete = async () => {

    setDeleting(true);

    setError(null);



    try {

      await onDeleted?.();

      onOpenChange(false);

    } catch (err) {

      setError(

        err instanceof Error ? err.message : 'Failed to remove deployment.',

      );

    } finally {

      setDeleting(false);

    }

  };



  const handleOpenChange = (value: boolean) => {

    if (deleting) {

      return;

    }

    if (!value) {

      setError(null);

    }

    onOpenChange(value);

  };



  return (

    <AlertDialog open={open} onOpenChange={handleOpenChange}>

      <AlertDialogContent>

        <AlertDialogHeader>

          <AlertDialogTitle>Remove deployment?</AlertDialogTitle>



          <AlertDialogDescription>

            Are you sure you want to remove "{deployment.appDeploymentName}

            "? This action cannot be undone.

          </AlertDialogDescription>

        </AlertDialogHeader>



        {error && <p className="text-sm text-destructive">{error}</p>}



        <AlertDialogFooter>

          <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>



          <AlertDialogAction

            onClick={(event) => {

              event.preventDefault();

              void handleDelete();

            }}

            disabled={deleting}

            className="text-destructive-foreground bg-destructive hover:bg-destructive/90"

          >

            {deleting ? 'Removing…' : 'Remove'}

          </AlertDialogAction>

        </AlertDialogFooter>

      </AlertDialogContent>

    </AlertDialog>

  );

}

portal-gui/src/components/applications/confirm-delete-instance-dialog.tsx

deleted100644 → 0
+0 −82
Changes for portal-gui/src/components/applications/confirm-delete-instance-dialog.tsx: 0 added lines, 82 removed lines.
Original line number Diff line number Diff line 
import { useState } from 'react';



import {

  AlertDialog,

  AlertDialogAction,

  AlertDialogCancel,

  AlertDialogContent,

  AlertDialogDescription,

  AlertDialogFooter,

  AlertDialogHeader,

  AlertDialogTitle,

} from '@/components/ui/alert-dialog';



import type { instancetDeleteProps } from '@/types/application';



export function ConfirmDeleteInstanceDialog({

  open,

  onOpenChange,

  instance,

  onDeleted,

}: instancetDeleteProps) {

  const [deleting, setDeleting] = useState(false);

  const [error, setError] = useState<string | null>(null);



  const handleDelete = async () => {

    setDeleting(true);

    setError(null);



    try {

      await onDeleted?.();

      onOpenChange(false);

    } catch (err) {

      setError(

        err instanceof Error ? err.message : 'Failed to remove deployment.',

      );

    } finally {

      setDeleting(false);

    }

  };



  const handleOpenChange = (value: boolean) => {

    if (deleting) {

      return;

    }

    if (!value) {

      setError(null);

    }

    onOpenChange(value);

  };



  return (

    <AlertDialog open={open} onOpenChange={handleOpenChange}>

      <AlertDialogContent>

        <AlertDialogHeader>

          <AlertDialogTitle>Remove instance?</AlertDialogTitle>



          <AlertDialogDescription>

            Are you sure you want to remove "{instance.name}

            "? This action cannot be undone.

          </AlertDialogDescription>

        </AlertDialogHeader>



        {error && <p className="text-sm text-destructive">{error}</p>}



        <AlertDialogFooter>

          <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>



          <AlertDialogAction

            onClick={(event) => {

              event.preventDefault();

              void handleDelete();

            }}

            disabled={deleting}

            className="text-destructive-foreground bg-destructive hover:bg-destructive/90"

          >

            {deleting ? 'Removing…' : 'Remove'}

          </AlertDialogAction>

        </AlertDialogFooter>

      </AlertDialogContent>

    </AlertDialog>

  );

}

portal-gui/src/components/applications/create-app-dialog.tsx

+5 −2
Changes for portal-gui/src/components/applications/create-app-dialog.tsx: 5 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -37,6 +37,7 @@ import { 
  defaultAppRequiredResources,

  defaultAppInterface,

} from '@/types/application';

import { useSingleFlight } from '@/hooks/useSingleFlight';



const initialForm = (): AppFormState => ({

  name: '',
@@ -60,6 +61,7 @@ export const CreateApplicationDialog = ({ 
  const [form, setForm] = useState<AppFormState>(initialForm);

  const [submitting, setSubmitting] = useState(false);

  const [error, setError] = useState<string | null>(null);

  const once = useSingleFlight();

  const [jsonError, setJsonError] = useState<string | null>(null);

  const [resourcesExpanded, setResourcesExpanded] = useState(true);
@@ -185,7 +187,8 @@ export const CreateApplicationDialog = ({ 
    ) &&

    !jsonError;



  const handleSubmit = async () => {

  const handleSubmit = () =>

    once(async () => {

      setError(null);



      let parsedResources: Record<string, unknown> | undefined;
@@ -246,7 +249,7 @@ export const CreateApplicationDialog = ({ 
      } finally {

        setSubmitting(false);

      }

  };

    });



  return (

    <Dialog

portal-gui/src/components/applications/deploy-app-dialog.tsx

+5 −2
Changes for portal-gui/src/components/applications/deploy-app-dialog.tsx: 5 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -17,6 +17,7 @@ import type { EdgeCloudZone, AppDeployProps } from '@/types/application'; 


import { deployApplication } from '@/services/applications/deployments';

import { getEdgeCloudZones } from '@/services/applications/profiles';

import { useSingleFlight } from '@/hooks/useSingleFlight';

export function DeployApplicationDialog({

  open,

  onOpenChange,
@@ -29,6 +30,7 @@ export function DeployApplicationDialog({ 
  const [loadingZones, setLoadingZones] = useState(false);

  const [deploying, setDeploying] = useState(false);

  const [error, setError] = useState<string | null>(null);

  const once = useSingleFlight();



  useEffect(() => {

    if (!open) {
@@ -83,7 +85,8 @@ export function DeployApplicationDialog({ 
    );

  };



  const handleDeploy = async () => {

  const handleDeploy = () =>

    once(async () => {

      if (selected.length === 0) {

        return;

      }
@@ -105,7 +108,7 @@ export function DeployApplicationDialog({ 
      } finally {

        setDeploying(false);

      }

  };

    });



  const handleOpenChange = (value: boolean) => {

    if (deploying) {