Add recusrive delete warning

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())

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>