Add delete confirmation dialog

Author: Tert0

ui/src/message/Messages.tsx

@@ -11,6 +11,7 @@ import {inject, Stores} from '../inject';
 import {observable} from 'mobx';
 import ReactInfinite from 'react-infinite';
 import {IMessage} from '../types';
+import ConfirmDialog from "../common/ConfirmDialog";
 
 type IProps = RouteComponentProps<{id: string}>;
 
@@ -22,6 +23,8 @@ interface IState {
 class Messages extends Component<IProps & Stores<'messagesStore' | 'appStore'>, IState> {
     @observable
     private heights: Record<string, number> = {};
+    @observable
+    private deleteAll = false;
 
     private static appId(props: IProps) {
         if (props === undefined) {
@@ -79,7 +82,7 @@ class Messages extends Component<IProps & Stores<'messagesStore' | 'appStore'>,
                             variant="contained"
                             disabled={!hasMessages}
                             color="primary"
-                            onClick={() => messagesStore.removeByApp(appId)}
+                            onClick={() => {this.deleteAll = true}}
                         >
                             Delete All
                         </Button>
@@ -108,6 +111,15 @@ class Messages extends Component<IProps & Stores<'messagesStore' | 'appStore'>,
                 ) : (
                     this.label('No messages')
                 )}
+
+                {this.deleteAll && (
+                    <ConfirmDialog
+                        title="Confirm Delete"
+                        text={'Delete all messages?'}
+                        fClose={() => (this.deleteAll = false)}
+                        fOnSubmit={() => messagesStore.removeByApp(appId)}
+                    />
+                )}
             </DefaultPage>
         );
     }

ui/src/tests/message.test.ts

@@ -219,6 +219,8 @@ describe('Messages', () => {
     it('deletes all linux messages', async () => {
         await navigate('Linux');
         await page.click('#delete-all');
+        await page.waitForSelector(selector.$confirmDialog.selector());
+        await page.click(selector.$confirmDialog.button('.confirm'));
         await page.waitForSelector('#delete-all:disabled');
         await expectMessages({
             all: [windows3, backup1, windows1],
@@ -250,6 +252,9 @@ describe('Messages', () => {
     it('deletes all messages', async () => {
         await navigate('All Messages');
         await page.click('#delete-all');
+        await page.waitForSelector(selector.$confirmDialog.selector());
+        await page.click(selector.$confirmDialog.button('.confirm'));
+        await page.waitForSelector('#delete-all:disabled');
         await expectMessages({
             all: [],
             windows: [],
@@ -269,6 +274,8 @@ describe('Messages', () => {
     it('deletes all backup messages and navigates to all messages', async () => {
         await navigate('Backup');
         await page.click('#delete-all');
+        await page.waitForSelector(selector.$confirmDialog.selector());
+        await page.click(selector.$confirmDialog.button('.confirm'));
         await page.waitForSelector('#delete-all:disabled');
         await navigate('All Messages');
         await createMessage(backup3, backupServerToken);