From f690b3f5a76d593a8fbf889a50df859f016611ad Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Tue, 23 Jul 2019 00:51:26 +0200
Subject: [PATCH] Add recusrive delete warning

---
 app/src/actions/clearTopic.ts             | 5 +++--
 app/src/components/ConfirmationDialog.tsx | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/src/actions/clearTopic.ts b/app/src/actions/clearTopic.ts
index f5d4ee7d..068662bf 100644
--- a/app/src/actions/clearTopic.ts
+++ b/app/src/actions/clearTopic.ts
@@ -9,6 +9,8 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async
   dispatch: Dispatch<any>,
   getState: () => AppState
 ) => {
+  const topicsForPurging = recursive ? [topic, ...topic.childTopics()] : [topic]
+
   if (recursive) {
     const topicCount = topic.childTopicCount()
 
@@ -21,7 +23,7 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async
     const confirmed = await dispatch(
       globalActions.requestConfirmation(
         'Confirm delete',
-        `Do you want to delete "${topic.path()}"${childTopicsMessage}?`
+        `Do you want to clear "${topic.path()}"${childTopicsMessage}?\n\nThis function will send an empty payload (QoS 0, retain) to this and every subtopic, clearing retained topics in the process. Only use this function if you know what you are doing.`
       )
     )
     if (!confirmed) {
@@ -36,7 +38,6 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async
     return
   }
   const publishEvent = makePublishEvent(connectionId)
-  const topicsForPurging = recursive ? [topic, ...topic.childTopics()] : [topic]
 
   topicsForPurging
     .filter(t => t.path() !== '' && t.hasMessage())
diff --git a/app/src/components/ConfirmationDialog.tsx b/app/src/components/ConfirmationDialog.tsx
index d3a1b539..005bff69 100644
--- a/app/src/components/ConfirmationDialog.tsx
+++ b/app/src/components/ConfirmationDialog.tsx
@@ -42,7 +42,9 @@ function ConfirmationDialog(props: { confirmationRequests: Array<ConfirmationReq
     >
       <DialogTitle id="alert-dialog-title">{request.title}</DialogTitle>
       <DialogContent>
-        <DialogContentText id="alert-dialog-description">{request.inquiry}</DialogContentText>
+        <DialogContentText id="alert-dialog-description" style={{ whiteSpace: 'pre-wrap' }}>
+          {request.inquiry}
+        </DialogContentText>
       </DialogContent>
       <DialogActions>
         <Button ref={yesRef as any} variant="contained" onClick={confirm} color="primary" autoFocus>