Add delete confirmation for custom lists

2 files changed, 56 insertions, 4 deletions

diff --git a/gui/src/renderer/components/select-location/CustomListDialogs.tsx b/gui/src/renderer/components/select-location/CustomListDialogs.tsx
index 7af8c1b622..56244e73eb 100644
--- a/gui/src/renderer/components/select-location/CustomListDialogs.tsx
+++ b/gui/src/renderer/components/select-location/CustomListDialogs.tsx
@@ -18,7 +18,7 @@ import { useSelector } from '../../redux/store';
 import * as AppButton from '../AppButton';
 import * as Cell from '../cell';
 import { normalText, tinyText } from '../common-styles';
-import { ModalAlert, ModalMessage } from '../Modal';
+import { ModalAlert, ModalAlertType, ModalMessage } from '../Modal';
 import SimpleInput from '../SimpleInput';
 
 const StyledModalMessage = styled(ModalMessage)({
@@ -201,3 +201,45 @@ export function EditListDialog(props: EditListProps) {
     </ModalAlert>
   );
 }
+
+interface DeleteConfirmDialogProps {
+  list: ICustomList;
+  isOpen: boolean;
+  hide: () => void;
+  confirm: () => void;
+}
+
+// Dialog for changing the name of a custom list.
+export function DeleteConfirmDialog(props: DeleteConfirmDialogProps) {
+  const confirm = useCallback(() => {
+    props.confirm();
+    props.hide();
+  }, []);
+
+  return (
+    <ModalAlert
+      type={ModalAlertType.warning}
+      isOpen={props.isOpen}
+      buttons={[
+        <AppButton.RedButton key="save" onClick={confirm}>
+          {messages.gettext('Delete list')}
+        </AppButton.RedButton>,
+        <AppButton.BlueButton key="cancel" onClick={props.hide}>
+          {messages.gettext('Cancel')}
+        </AppButton.BlueButton>,
+      ]}
+      close={props.hide}>
+      <ModalMessage>
+        {formatHtml(
+          sprintf(
+            messages.pgettext(
+              'select-location-view',
+              'Do you want to delete the list <b>%(list)s</b>?',
+            ),
+            { list: props.list.name },
+          ),
+        )}
+      </ModalMessage>
+    </ModalAlert>
+  );
+}
diff --git a/gui/src/renderer/components/select-location/LocationRow.tsx b/gui/src/renderer/components/select-location/LocationRow.tsx
index e958bd0c98..79b44d372a 100644
--- a/gui/src/renderer/components/select-location/LocationRow.tsx
+++ b/gui/src/renderer/components/select-location/LocationRow.tsx
@@ -19,7 +19,7 @@ import ChevronButton from '../ChevronButton';
 import { measurements, normalText } from '../common-styles';
 import ImageView from '../ImageView';
 import RelayStatusIndicator from '../RelayStatusIndicator';
-import { AddToListDialog, EditListDialog } from './CustomListDialogs';
+import { AddToListDialog, DeleteConfirmDialog, EditListDialog } from './CustomListDialogs';
 import {
   CitySpecification,
   CountrySpecification,
@@ -162,6 +162,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
   const { updateCustomList, deleteCustomList } = useAppContext();
   const [addToListDialogVisible, showAddToListDialog, hideAddToListDialog] = useBoolean();
   const [editDialogVisible, showEditDialog, hideEditDialog] = useBoolean();
+  const [deleteDialogVisible, showDeleteDialog, hideDeleteDialog] = useBoolean();
   const background = getButtonColor(props.source.selected, props.level, props.source.disabled);
 
   const customLists = useSelector((state) => state.settings.customLists);
@@ -218,7 +219,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
   }, [customLists, props.source.location]);
 
   // Remove an entire custom list.
-  const onRemoveCustomList = useCallback(async () => {
+  const confirmRemoveCustomList = useCallback(async () => {
     if (props.source.location.customList) {
       try {
         await deleteCustomList(props.source.location.customList);
@@ -273,7 +274,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
             <StyledHoverIconButton onClick={showEditDialog} {...background}>
               <StyledHoverIcon source="icon-edit" />
             </StyledHoverIconButton>
-            <StyledHoverIconButton onClick={onRemoveCustomList} $isLast {...background}>
+            <StyledHoverIconButton onClick={showDeleteDialog} $isLast {...background}>
               <StyledHoverIcon source="icon-close" />
             </StyledHoverIconButton>
           </>
@@ -318,6 +319,15 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
       {'list' in props.source && (
         <EditListDialog list={props.source.list} isOpen={editDialogVisible} hide={hideEditDialog} />
       )}
+
+      {'list' in props.source && (
+        <DeleteConfirmDialog
+          list={props.source.list}
+          isOpen={deleteDialogVisible}
+          hide={hideDeleteDialog}
+          confirm={confirmRemoveCustomList}
+        />
+      )}
     </>
   );
 }