warn before deleting disconnected/disabled gw

Author: t-aleksander

web/messages/en/modal.json

@@ -8,6 +8,8 @@
   "modal_selection_title": "Select items",
   "modal_delete_gateway_title": "Delete Gateway",
   "modal_delete_gateway_body": "Deleting gateway {name} may cause location {locationName} to stop working if it is the only Gateway connected to this location or if other connected Gateways are currently unavailable. This action cannot be undone.",
+  "modal_delete_gateway_disabled_body": "Gateway **{name}** is currently **disabled**. Deleting it now will make it permanently unusable. Are you sure you want to proceed?",
+  "modal_delete_gateway_disconnected_body": "Gateway **{name}** is currently **disconnected**. Deleting it now will make it permanently unusable. Are you sure you want to proceed?",
   "modal_delete_location_title": "Delete location",
   "modal_delete_location_body": "Deleting location {name} will also delete related gateways. This action cannot be undone.",
   "modal_add_location_title": "Select location type",

web/src/pages/EditGatewayPage/EditGatewayPage.tsx

@@ -52,6 +52,29 @@ const EditGatewayForm = ({ gateway }: { gateway: Gateway }) => {
     getLocationQueryOptions(gateway.location_id),
   );
 
+  const isConnected = useMemo(() => {
+    if (gateway.connected_at == null) {
+      return false;
+    }
+    if (gateway.disconnected_at == null) {
+      return true;
+    }
+    return gateway.connected_at >= gateway.disconnected_at;
+  }, [gateway.connected_at, gateway.disconnected_at]);
+
+  const getDeleteModalContent = () => {
+    if (!gateway.enabled) {
+      return m.modal_delete_gateway_disabled_body({ name: gateway.name });
+    }
+    if (!isConnected) {
+      return m.modal_delete_gateway_disconnected_body({ name: gateway.name });
+    }
+    return m.modal_delete_gateway_body({
+      name: gateway.name,
+      locationName: location.name,
+    });
+  };
+
   const { mutateAsync: editGateway } = useMutation({
     mutationFn: api.gateway.editGateway,
     meta: {
@@ -167,10 +190,7 @@ const EditGatewayForm = ({ gateway }: { gateway: Gateway }) => {
                 onClick: () => {
                   openModal(ModalName.ConfirmAction, {
                     title: m.modal_delete_gateway_title(),
-                    contentMd: m.modal_delete_gateway_body({
-                      name: gateway.name,
-                      locationName: location.name,
-                    }),
+                    contentMd: getDeleteModalContent(),
                     actionPromise: () => api.gateway.deleteGateway(gateway.id),
                     invalidateKeys: [['gateway'], ['network']],
                     submitProps: { text: m.gateway_edit_delete(), variant: 'critical' },

web/src/pages/LocationsPage/components/GatewaysTable.tsx

@@ -198,6 +198,20 @@ export const GatewaysTable = () => {
         enableResizing: false,
         cell: (info) => {
           const rowData = info.row.original;
+
+          const getDeleteModalContent = () => {
+            if (!rowData.enabled) {
+              return m.modal_delete_gateway_disabled_body({ name: rowData.name });
+            }
+            if (!rowData.connected) {
+              return m.modal_delete_gateway_disconnected_body({ name: rowData.name });
+            }
+            return m.modal_delete_gateway_body({
+              name: rowData.name,
+              locationName: rowData.location_name,
+            });
+          };
+
           const menuItems: MenuItemsGroup[] = [
             {
               items: [
@@ -235,10 +249,7 @@ export const GatewaysTable = () => {
                   onClick: () => {
                     openModal(ModalName.ConfirmAction, {
                       title: m.modal_delete_gateway_title(),
-                      contentMd: m.modal_delete_gateway_body({
-                        name: rowData.name,
-                        locationName: rowData.location_name,
-                      }),
+                      contentMd: getDeleteModalContent(),
                       actionPromise: () => api.gateway.deleteGateway(rowData.id),
                       invalidateKeys: [['gateway'], ['network']],
                       submitProps: { text: m.controls_delete(), variant: 'critical' },

web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx

@@ -10,7 +10,6 @@ import {
   useFloating,
   useInteractions,
 } from '@floating-ui/react';
-import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import clsx from 'clsx';
 import { type HTMLProps, useMemo, useState } from 'react';
@@ -26,7 +25,10 @@ import { Icon } from '../../defguard-ui/components/Icon';
 import type { IconKindValue } from '../../defguard-ui/components/Icon/icon-types';
 import { InteractionBox } from '../../defguard-ui/components/InteractionBox/InteractionBox';
 import { SizedBox } from '../../defguard-ui/components/SizedBox/SizedBox';
+import { Snackbar } from '../../defguard-ui/providers/snackbar/snackbar';
 import { ThemeSpacing } from '../../defguard-ui/types';
+import { openModal } from '../../hooks/modalControls/modalsSubjects';
+import { ModalName } from '../../hooks/modalControls/modalTypes';
 import './style.scss';
 
 type Status = 'all' | 'none' | 'some';
@@ -151,13 +153,6 @@ const FloatingMenu = ({
   const disconnected = useMemo(() => status.filter((gw) => !gw.connected), [status]);
   const navigate = useNavigate();
 
-  const { mutate: removeGw } = useMutation({
-    mutationFn: api.gateway.deleteGateway,
-    meta: {
-      invalidate: [['gateway'], ['network']],
-    },
-  });
-
   return (
     <div className={clsx('gateways-status-floating', className)} {...rest}>
       {connected.length > 0 && (
@@ -198,7 +193,29 @@ const FloatingMenu = ({
                   icon="close"
                   iconSize={20}
                   onClick={() => {
-                    removeGw(gw.id);
+                    const getDeleteModalContent = () => {
+                      if (!gw.enabled) {
+                        return m.modal_delete_gateway_disabled_body({ name: gw.name });
+                      }
+                      if (!gw.connected) {
+                        return m.modal_delete_gateway_disconnected_body({
+                          name: gw.name,
+                        });
+                      }
+                      return m.modal_delete_gateway_body({
+                        name: gw.name,
+                        locationName: gw.location_name,
+                      });
+                    };
+                    openModal(ModalName.ConfirmAction, {
+                      title: m.modal_delete_gateway_title(),
+                      contentMd: getDeleteModalContent(),
+                      actionPromise: () => api.gateway.deleteGateway(gw.id),
+                      invalidateKeys: [['gateway'], ['network']],
+                      submitProps: { text: m.controls_delete(), variant: 'critical' },
+                      onSuccess: () => Snackbar.default(m.gateway_delete_success()),
+                      onError: () => Snackbar.error(m.gateway_delete_failed()),
+                    });
                   }}
                 />
               </li>