* client: confirm before deleting

client/src/__locales/en.json

@@ -286,5 +286,6 @@
     "client_added":  "Client \"{{key}}\" successfully added",
     "client_updated":  "Client \"{{key}}\" successfully updated",
     "table_statistics": "Statistics (last 24 hours)",
-    "clients_not_found": "No clients found"
+    "clients_not_found": "No clients found",
+    "client_confirm_delete": "Are you sure you want to delete client \"{{key}}\"?"
 }

client/src/actions/clients.js

@@ -32,7 +32,6 @@ export const addClient = config => async (dispatch) => {
         dispatch(addSuccessToast(t('client_added', { key: config.name })));
         dispatch(getClients());
     } catch (error) {
-        dispatch(toggleClientModal());
         dispatch(addErrorToast({ error }));
         dispatch(addClientFailure());
     }
@@ -79,7 +78,6 @@ export const updateClient = (config, name) => async (dispatch) => {
         dispatch(addSuccessToast(t('client_updated', { key: name })));
         dispatch(getClients());
     } catch (error) {
-        dispatch(toggleClientModal());
         dispatch(addErrorToast({ error }));
         dispatch(updateClientFailure());
     }

client/src/components/Settings/Clients/index.js

@@ -59,6 +59,13 @@ class Clients extends Component {
         return '';
     };
 
+    handleDelete = (data) => {
+        // eslint-disable-next-line no-alert
+        if (window.confirm(this.props.t('client_confirm_delete', { key: data.name }))) {
+            this.props.deleteClient(data);
+        }
+    }
+
     columns = [
         {
             Header: this.props.t('table_client'),
@@ -136,7 +143,6 @@ class Clients extends Component {
                 const clientName = row.original.name;
                 const {
                     toggleClientModal,
-                    deleteClient,
                     processingDeleting,
                     processingUpdating,
                 } = this.props;
@@ -159,7 +165,7 @@ class Clients extends Component {
                         <button
                             type="button"
                             className="btn btn-outline-secondary btn-sm"
-                            onClick={() => deleteClient({ name: clientName })}
+                            onClick={() => this.handleDelete({ name: clientName })}
                             disabled={processingDeleting}
                         >
                             <Trans>delete_table_action</Trans>

client/src/components/Toasts/Toast.css

@@ -2,7 +2,7 @@
     position: fixed;
     right: 24px;
     bottom: 24px;
-    z-index: 103;
+    z-index: 105;
     width: 345px;
 }
 

client/src/components/ui/Modal.css

@@ -5,7 +5,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 105;
+    z-index: 104;
 }
 
 .ReactModal__Overlay--after-open {