Skip to content

Commit f7a3a8e

Browse files
wasagawasaga
authored
show confirmation dialog before deleting all connections by tag (#74)
1 parent 627beef commit f7a3a8e

File tree

2 files changed

+127
-62
lines changed

2 files changed

+127
-62
lines changed

‎src/renderer/components/ConfirmationDialog.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { FC } from 'react';
2+
import {
3+
Dialog,
4+
DialogTitle,
5+
DialogContent,
6+
DialogContentText,
7+
DialogActions,
8+
Button,
9+
} from '@material-ui/core';
10+
11+
export interface ConfirmationDialogProps {
12+
title: string;
13+
text: string;
14+
onConfirm: () => void;
15+
onClose: () => void;
16+
}
17+
18+
const ConfirmationDialog: FC<ConfirmationDialogProps> = ({
19+
title,
20+
text,
21+
onConfirm,
22+
onClose,
23+
}: ConfirmationDialogProps): JSX.Element => (
24+
<Dialog open onClose={onClose}>
25+
<DialogTitle id="alert-dialog-title">{title}</DialogTitle>
26+
<DialogContent>
27+
<DialogContentText id="alert-dialog-description">
28+
{text}
29+
</DialogContentText>
30+
</DialogContent>
31+
<DialogActions>
32+
<Button onClick={onClose}>Cancel</Button>
33+
<Button onClick={onConfirm} autoFocus>
34+
OK
35+
</Button>
36+
</DialogActions>
37+
</Dialog>
38+
);
39+
40+
export default ConfirmationDialog;

‎src/renderer/components/TagFolderRow.tsx

+87-62
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import {
2121
import ClosedFolder from '../icons/ClosedFolder';
2222
import OpenFolder from '../icons/OpenFolder';
2323
import { ListenerUpdateRequest, Selector } from '../../shared/pb/api';
24+
import ConfirmationDialog, {
25+
ConfirmationDialogProps,
26+
} from './ConfirmationDialog';
2427

2528
type FolderProps = {
2629
folderName: string;
@@ -37,6 +40,8 @@ const TagFolderRow: React.FC<FolderProps> = ({
3740
children,
3841
}: PropsWithChildren<FolderProps>): JSX.Element => {
3942
const [open, setOpen] = React.useState<boolean>(false);
43+
const [confirmation, setConfirmation] =
44+
React.useState<ConfirmationDialogProps | null>(null);
4045

4146
const toggleOpen = () => {
4247
setOpen(!open);
@@ -76,74 +81,94 @@ const TagFolderRow: React.FC<FolderProps> = ({
7681
};
7782

7883
return (
79-
<Grid container>
80-
<Grid container item xs={12} alignItems="center">
81-
<Grid item xs={1}>
82-
<IconButton
83-
key={'menuButton' + folderName}
84-
aria-label={'toggle listeners for ' + folderName}
85-
component="span"
86-
onClick={toggleOpen}
87-
>
88-
{open ? <OpenFolder /> : <ClosedFolder />}
89-
</IconButton>
90-
</Grid>
91-
<Grid item xs={3}>
92-
<Typography variant="h6">{folderName}</Typography>
93-
</Grid>
94-
<Grid item xs={5} />
95-
<Grid container item xs={2} justifyContent="flex-end">
96-
<Typography variant="subtitle2">
97-
{connectedListeners} of {totalListeners} listening
98-
</Typography>
99-
</Grid>
100-
<Grid container item xs={1} justifyContent="center">
101-
<IconButton
102-
aria-controls="folder-menu"
103-
aria-haspopup="true"
104-
onClick={toggleMenu}
105-
aria-label={'Menu for folder: ' + folderName}
106-
>
107-
<MoreVertical />
108-
</IconButton>
109-
<Menu
110-
id={'folder-menu' + folderName}
111-
anchorEl={menuAnchor}
112-
keepMounted
113-
open={Boolean(menuAnchor)}
114-
onClose={handleMenuClose}
115-
>
116-
<MenuItem
117-
key={CONNECT_ALL}
118-
onClick={() => handleMenuClick(CONNECT_ALL)}
84+
<>
85+
{confirmation && (
86+
<ConfirmationDialog
87+
title={confirmation.title}
88+
text={confirmation.text}
89+
onConfirm={confirmation.onConfirm}
90+
onClose={confirmation.onClose}
91+
/>
92+
)}
93+
<Grid container>
94+
<Grid container item xs={12} alignItems="center">
95+
<Grid item xs={1}>
96+
<IconButton
97+
key={'menuButton' + folderName}
98+
aria-label={'toggle listeners for ' + folderName}
99+
component="span"
100+
onClick={toggleOpen}
119101
>
120-
Connect All
121-
</MenuItem>
122-
<MenuItem
123-
key={DISCONNECT_ALL}
124-
onClick={() => handleMenuClick(DISCONNECT_ALL)}
102+
{open ? <OpenFolder /> : <ClosedFolder />}
103+
</IconButton>
104+
</Grid>
105+
<Grid item xs={3}>
106+
<Typography variant="h6">{folderName}</Typography>
107+
</Grid>
108+
<Grid item xs={5} />
109+
<Grid container item xs={2} justifyContent="flex-end">
110+
<Typography variant="subtitle2">
111+
{connectedListeners} of {totalListeners} listening
112+
</Typography>
113+
</Grid>
114+
<Grid container item xs={1} justifyContent="center">
115+
<IconButton
116+
aria-controls="folder-menu"
117+
aria-haspopup="true"
118+
onClick={toggleMenu}
119+
aria-label={'Menu for folder: ' + folderName}
125120
>
126-
Disconnect All
127-
</MenuItem>
128-
<MenuItem key={EXPORT} onClick={() => handleMenuClick(EXPORT)}>
129-
Export
130-
</MenuItem>
131-
<MenuItem
132-
key={DELETE_ALL}
133-
onClick={() => handleMenuClick(DELETE_ALL)}
121+
<MoreVertical />
122+
</IconButton>
123+
<Menu
124+
id={'folder-menu' + folderName}
125+
anchorEl={menuAnchor}
126+
keepMounted
127+
open={Boolean(menuAnchor)}
128+
onClose={handleMenuClose}
134129
>
135-
Delete
136-
</MenuItem>
137-
</Menu>
130+
<MenuItem
131+
key={CONNECT_ALL}
132+
onClick={() => handleMenuClick(CONNECT_ALL)}
133+
>
134+
Connect All
135+
</MenuItem>
136+
<MenuItem
137+
key={DISCONNECT_ALL}
138+
onClick={() => handleMenuClick(DISCONNECT_ALL)}
139+
>
140+
Disconnect All
141+
</MenuItem>
142+
<MenuItem key={EXPORT} onClick={() => handleMenuClick(EXPORT)}>
143+
Export
144+
</MenuItem>
145+
<MenuItem
146+
key={DELETE_ALL}
147+
onClick={() => {
148+
setConfirmation({
149+
title: 'Delete connections?',
150+
text: `All connections with tag ${folderName} will be deleted:`,
151+
onClose: () => setConfirmation(null),
152+
onConfirm: () => {
153+
setConfirmation(null);
154+
handleMenuClick(DELETE_ALL);
155+
},
156+
});
157+
}}
158+
>
159+
Delete
160+
</MenuItem>
161+
</Menu>
162+
</Grid>
138163
</Grid>
139-
</Grid>
140-
<Grid container item xs={12}>
141-
<Grid item xs={12}>
142-
<Divider />
164+
<Grid container item xs={12}>
165+
<Grid item xs={12}>
166+
<Divider />
167+
</Grid>
143168
</Grid>
169+
{open && children}
144170
</Grid>
145-
{open && children}
146-
</Grid>
171+
</>
147172
);
148173
};
149174

0 commit comments

Comments
 (0)