destructive menu action wrapped in an alert

src/i18n/en.json

@@ -24,8 +24,10 @@
   "granted_permissions": "Granted",
   "menu_item_edit_permissions": "Edit permissions",
   "label_other_user": "Other",
-  "action_delete_messages": "Delete Messages",
+  "action_clear_messages": "Clear Messages",
-  "delete_messages_warning": "Are you sure you want to delete all mesages? It cannot be undone.",
+  "clear_messages_warning": "Are you sure you want to clear all messages? It cannot be undone.",
+  "action_delete_messages": "Clear Messages for All",
+  "delete_messages_warning": "Are you sure you want to delete all messages for everyone? It cannot be undone.",
   "action_leave_chat": "Leave Conversation",
   "leave_chat_warning": "Are you sure you want to leave this conversation?",
   "action_block_contact": "Block Contact",
@@ -100,8 +102,10 @@
   "menu_item_mute": "Mute",
   "menu_item_unmute": "Unmute",
   "menu_item_delete_topic": "Delete",
+  "topic_delete_warning": "Are you sure you want to delete this conversation?",
   "menu_item_unblock": "Unblock",
   "menu_item_block": "Block",
+  "topic_block_warning": "Are you sure you want to block this conversation?",
   "menu_item_member_delete": "Remove",
   "menu_item_archive_topic": "Archive",
   "action_cancel": "cancel",

src/i18n/ru.json

@@ -144,5 +144,9 @@
   "delete_messages_warning": "Вы действительно хотите удалить все сообщения?",
   "leave_chat_warning": "Вы действительно хотите покинуть этот чат?",
   "block_contact_warning": "Вы действительно заблокировать этот контакт?",
-  "report_chat_warning": "Вы действительно хотите сообщить о нарушении и заблокировать этот чат?"
+  "report_chat_warning": "Вы действительно хотите сообщить о нарушении и заблокировать этот чат?",
+  "action_clear_messages": "Удалить сообщения",
+  "clear_messages_warning": "Вы действительно хотите удалить все сообщения в чате? Их будет невозможно восстановить.",
+  "topic_delete_warning": ":!![MISSING]!!:Are you sure you want to delete this conversation?",
+  "topic_block_warning": ":!![MISSING]!!:Are you sure you want to block this conversation?"
 }

src/i18n/zh.json

@@ -144,5 +144,9 @@
   "leave_chat_warning": ":!![MISSING]!!:Are you sure you want to leave this conversation.",
   "block_contact_warning": ":!![MISSING]!!:Are you sure you want to block this contact?",
   "action_report_chat": "检举垃圾邮件",
-  "report_chat_warning": ":!![MISSING]!!:Are you sure you want to block and report this conversation?"
+  "report_chat_warning": ":!![MISSING]!!:Are you sure you want to block and report this conversation?",
+  "action_clear_messages": ":!![MISSING]!!:Clear Messages",
+  "clear_messages_warning": ":!![MISSING]!!:Are you sure you want to clear all messages? It cannot be undone.",
+  "topic_delete_warning": ":!![MISSING]!!:Are you sure you want to delete this conversation?",
+  "topic_block_warning": ":!![MISSING]!!:Are you sure you want to block this conversation?"
 }

src/messages.json

@@ -25,8 +25,10 @@
     "granted_permissions": "Granted",
     "menu_item_edit_permissions": "Edit permissions",
     "label_other_user": "Other",
-    "action_delete_messages": "Delete Messages",
+    "action_clear_messages": "Clear Messages",
-    "delete_messages_warning": "Are you sure you want to delete all mesages? It cannot be undone.",
+    "clear_messages_warning": "Are you sure you want to clear all messages? It cannot be undone.",
+    "action_delete_messages": "Clear Messages for All",
+    "delete_messages_warning": "Are you sure you want to delete all messages for everyone? It cannot be undone.",
     "action_leave_chat": "Leave Conversation",
     "leave_chat_warning": "Are you sure you want to leave this conversation?",
     "action_block_contact": "Block Contact",
@@ -101,8 +103,10 @@
     "menu_item_mute": "Mute",
     "menu_item_unmute": "Unmute",
     "menu_item_delete_topic": "Delete",
+    "topic_delete_warning": "Are you sure you want to delete this conversation?",
     "menu_item_unblock": "Unblock",
     "menu_item_block": "Block",
+    "topic_block_warning": "Are you sure you want to block this conversation?",
     "menu_item_member_delete": "Remove",
     "menu_item_archive_topic": "Archive",
     "action_cancel": "cancel",
@@ -293,7 +297,9 @@
     "delete_messages_warning": "Вы действительно хотите удалить все сообщения?",
     "leave_chat_warning": "Вы действительно хотите покинуть этот чат?",
     "block_contact_warning": "Вы действительно заблокировать этот контакт?",
-    "report_chat_warning": "Вы действительно хотите сообщить о нарушении и заблокировать этот чат?"
+    "report_chat_warning": "Вы действительно хотите сообщить о нарушении и заблокировать этот чат?",
+    "action_clear_messages": "Удалить сообщения",
+    "clear_messages_warning": "Вы действительно хотите удалить все сообщения в чате? Их будет невозможно восстановить."
   },
   "zh": {
     "archived_contacts": "已归档联系人 ({count})",

src/views/info-view.jsx

@@ -41,45 +41,55 @@ const messages = defineMessages({
     defaultMessage: 'Other',
     description: 'Label for the other user when the user is unnamed'
   },
+  clear_messages: {
+    id: 'action_clear_messages',
+    defaultMessage: 'Clear Messages',
+    description: 'Flat button [Clear Messages] (soft-delete messages)'
+  },
+  clear_messages_warning: {
+    id: 'clear_messages_warning',
+    defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',
+    description: 'Alert dialog warning when deleting all messages.'
+  },
   delete_messages: {
-    id: "action_delete_messages",
+    id: 'action_delete_messages',
-    defaultMessage: "Delete Messages",
+    defaultMessage: 'Clear Messages for All',
-    description: "Flat button [Delete Messages]"
+    description: 'Flat button [Clear for All] (hard-delete all messages)'
   },
   delete_messages_warning: {
-    id: "delete_messages_warning",
+    id: 'delete_messages_warning',
-    defaultMessage: "Are you sure you want to delete all mesages? It cannot be undone.",
+    defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',
-    description: "Alert dialog warning when deleting all messages."
+    description: 'Alert dialog warning when hard-deleting all messages.'
   },
   leave_chat: {
-    id: "action_leave_chat",
+    id: 'action_leave_chat',
-    defaultMessage: "Leave Conversation",
+    defaultMessage: 'Leave Conversation',
-    description: "Flat button [Leave Conversation]"
+    description: 'Flat button [Leave Conversation]'
   },
   leave_chat_warning: {
-    id: "leave_chat_warning",
+    id: 'leave_chat_warning',
-    defaultMessage: "Are you sure you want to leave this conversation?",
+    defaultMessage: 'Are you sure you want to leave this conversation?',
-    description: "Alert dialog warning when unsubscribing from a chat."
+    description: 'Alert dialog warning when unsubscribing from a chat.'
   },
   block_contact: {
-    id: "action_block_contact",
+    id: 'action_block_contact',
     defaultMessage: "Block Contact",
     description: "Flat button [Block Contact]"
   },
   block_contact_warning: {
-    id: "block_contact_warning",
+    id: 'block_contact_warning',
-    defaultMessage: "Are you sure you want to block this contact?",
+    defaultMessage: 'Are you sure you want to block this contact?',
-    description: "Alert dialog warning when blocking a contact."
+    description: 'Alert dialog warning when blocking a contact.'
   },
   report_chat: {
-    id: "action_report_chat",
+    id: 'action_report_chat',
-    defaultMessage: "Report Conversation",
+    defaultMessage: 'Report Conversation',
-    description: "Flat button [Report Group]"
+    description: 'Flat button [Report Group]'
   },
   report_chat_warning: {
-    id: "report_chat_warning",
+    id: 'report_chat_warning',
-    defaultMessage: "Are you sure you want to block and report this conversation?",
+    defaultMessage: 'Are you sure you want to block and report this conversation?',
-    description: "Alert dialog warning when reporting a conversation for abuse"
+    description: 'Alert dialog warning when reporting a conversation for abuse'
   },
 });
 
@@ -92,6 +102,7 @@ class InfoView extends React.Component {
       owner: false,
       admin: false,
       sharer: false,
+      deleter: false,
       muted: false,
       address: null,
       groupTopic: undefined,
@@ -211,6 +222,7 @@ class InfoView extends React.Component {
       owner: acs && acs.isOwner(),
       admin: acs && acs.isAdmin(),
       sharer: acs && acs.isSharer(),
+      deleter: acs && acs.isDeleter(),
       muted: acs && acs.isMuted(),
 
       fullName: topic.public ? topic.public.fn : undefined,
@@ -401,8 +413,8 @@ class InfoView extends React.Component {
     e.preventDefault();
     const {formatMessage} = this.props.intl;
     this.props.onShowAlert(
-      formatMessage(messages.delete_messages), // title
+      formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages), // title
-      formatMessage(messages.delete_messages_warning), // content
+      formatMessage(this.state.deleter ? messages.delete_messages_warning : messages.clear_messages_warning), // content
       (() => { this.props.onDeleteMessages(this.props.topic); }), // onConfirm
       null, // "OK"
       true, // Show Reject button
@@ -681,7 +693,9 @@ class InfoView extends React.Component {
             }
             <div className="panel-form-column">
               <a href="#" className="flat-button" onClick={this.handleDeleteMessages}>
-                <i className="material-icons">delete_outline</i> &nbsp;{formatMessage(messages.delete_messages)}
+                <i className="material-icons">delete_outline</i> &nbsp;{
+                  formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages)
+                }
               </a>
               <a href="#" className="red flat-button" onClick={this.handleLeave}>
                 <i className="material-icons">exit_to_app</i> &nbsp;{formatMessage(messages.leave_chat)}
@@ -714,7 +728,7 @@ class InfoView extends React.Component {
                   <div className="panel-form-row">
                     {this.state.sharer ?
                       <a href="#" className="flat-button" onClick={this.handleShowAddMembers}>
-                        <i className="material-icons">person_add</i> <FormattedMessage id="button_add_members"
+                        <i className="material-icons">person_add</i> &nbsp;<FormattedMessage id="button_add_members"
                           defaultMessage="Add members" description="Flat button [Add members] (to topic)" />
                       </a>
                       : null}

src/views/tinode-web.jsx

@@ -1312,6 +1312,7 @@ class TinodeWeb extends React.Component {
             params={this.state.contextMenuParams}
             items={this.state.contextMenuItems}
             hide={this.handleHideContextMenu}
+            onShowAlert={this.handleShowAlert}
             onAction={this.handleContextMenuAction}
             onTopicRemoved={(topicName) => {
               if (topicName == this.state.topicSelected) {

src/widgets/context-menu.jsx

@@ -47,15 +47,26 @@ const messages = defineMessages({
     defaultMessage: 'Delete',
     description: 'Delete entire topic'
   },
+  topic_delete_warning: {
+    id: 'topic_delete_warning',
+    defaultMessage: 'Are you sure you want to delete this conversation?',
+    description: 'Alert warning when deleting entire topic'
+  },
   unblock: {
     id: 'menu_item_unblock',
     defaultMessage: 'Unblock',
-    description: 'Unblock user'
+    description: 'Unblock topic or user'
   },
+  // Generic string suitable for either topic or user.
   block: {
     id: 'menu_item_block',
     defaultMessage: 'Block',
-    description: 'Block user'
+    description: 'Block topic or user'
+  },
+  topic_block_warning: {
+    id: 'topic_block_warning',
+    defaultMessage: 'Are you sure you want to block this conversation?',
+    description: 'Alert warning when blocking a topic.'
   },
   member_delete: {
     id: 'menu_item_member_delete',
@@ -90,14 +101,28 @@ class ContextMenu extends React.Component {
         id: 'messages_clear',
         title: formatMessage(messages.clear_messages),
         handler: (params, errorHandler) => {
-          return this.deleteMessages(true, false, params, errorHandler);
+          return props.onShowAlert(
+            formatMessage({id: 'menu_item_clear_messages'}), // title
+            formatMessage({id: 'clear_messages_warning'}), // content
+            (() => { this.deleteMessages(true, false, params, errorHandler); }), // onConfirm
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
         }
       },
       'messages_clear_hard': {
         id: 'messages_clear_hard',
         title: formatMessage(messages.clear_for_all),
         handler: (params, errorHandler) => {
-          return this.deleteMessages(true, true, params, errorHandler);
+          return props.onShowAlert(
+            formatMessage({id: 'menu_item_clear_messages_for_all'}), // title
+            formatMessage({id: 'delete_messages_warning'}), // content
+            (() => { return this.deleteMessages(true, true, params, errorHandler); }),
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
         }
       },
       'message_delete': {
@@ -133,26 +158,44 @@ class ContextMenu extends React.Component {
         id: 'topic_block',
         title: formatMessage(messages.block),
         handler: (params, errorHandler) => {
-          return this.topicPermissionSetter('-JP', params, errorHandler).then((ctrl) => {
+          return props.onShowAlert(
-            this.props.onTopicRemoved(params.topicName);
+            formatMessage({id: 'menu_item_block'}), // title
-            return ctrl;
+            formatMessage(messages.topic_block_warning), // content
-          });
+            (() => {
+              return this.topicPermissionSetter('-JP', params, errorHandler).then((ctrl) => {
+                this.props.onTopicRemoved(params.topicName);
+                return ctrl;
+              });
+            }),
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
         }
       },
       'topic_delete': {
         id: 'topic_delete',
         title: formatMessage(messages.topic_delete),
         handler: (params, errorHandler) => {
-          const topic = this.props.tinode.getTopic(params.topicName);
+          return props.onShowAlert(
-          if (!topic) {
+            formatMessage({id: 'menu_item_delete_topic'}), // title
-            console.log("Topic not found: ", params.topicName);
+            formatMessage(messages.topic_delete_warning), // content
-            return;
+            (() => {
-          }
+              const topic = this.props.tinode.getTopic(params.topicName);
-          return topic.delTopic().catch((err) => {
+              if (!topic) {
-            if (errorHandler) {
+                console.log("Topic not found: ", params.topicName);
-              errorHandler(err.message, 'err');
+                return;
-            }
+              }
-          });
+              return topic.delTopic().catch((err) => {
+                if (errorHandler) {
+                  errorHandler(err.message, 'err');
+                }
+              });
+            }),
+            null, // "OK"
+            true, // Show Reject button
+            null  // "Cancel"
+          );
         }
       },
       'topic_archive': {