Merge pull request #3555 from metabase/nicer-alerts

User nicer modals for alerts

frontend/src/metabase/admin/people/components/GroupDetail.jsx

@@ -10,6 +10,7 @@ import Icon from "metabase/components/Icon.jsx";
 import Popover from "metabase/components/Popover.jsx";
 import UserAvatar from "metabase/components/UserAvatar.jsx";
 import AdminEmptyText from "metabase/components/AdminEmptyText.jsx";
+import Alert from "metabase/components/Alert.jsx";
 
 import AdminContentTable from "metabase/components/AdminContentTable.jsx";
 import AdminPaneLayout from "metabase/components/AdminPaneLayout.jsx";
@@ -166,9 +167,14 @@ export default class GroupDetail extends Component {
             text: "",
             selectedUsers: [],
             members: null,
+            alertMessage: null
         };
     }
 
+    alert(alertMessage) {
+        this.setState({ alertMessage });
+    }
+
     onAddUsersClicked() {
         this.setState({
             addUserVisible: true
@@ -195,10 +201,7 @@ export default class GroupDetail extends Component {
                 this.setState({ members });
             }));
         } catch (error) {
-            console.error("Error adding user:", error);
-            if (error.data && typeof error.data === "string") {
-                alert(error.data);
-            }
+            this.alert(error && typeof error.data ? error.data : error);
         }
     }
 
@@ -228,9 +231,7 @@ export default class GroupDetail extends Component {
             this.setState({ members: newMembers });
         } catch (error) {
             console.error("Error deleting PermissionsMembership:", error);
-            if (error.data && typeof error.data === "string") {
-                alert(error.data);
-            }
+            this.alert(error && typeof error.data ? error.data : error);
         }
     }
 
@@ -244,7 +245,7 @@ export default class GroupDetail extends Component {
         // users = array of all users for purposes of adding new users to group
         // [group.]members = array of users currently in the group
         let { group, users } = this.props;
-        const { text, selectedUsers, addUserVisible } = this.state;
+        const { text, selectedUsers, addUserVisible, alertMessage } = this.state;
         const members = this.getMembers();
 
         group = group || {};
@@ -277,6 +278,7 @@ export default class GroupDetail extends Component {
                     onRemoveUserFromSelection={this.onRemoveUserFromSelection.bind(this)}
                     onRemoveUserClicked={this.onRemoveUserClicked.bind(this)}
                 />
+                <Alert message={alertMessage} onClose={() => this.setState({ alertMessage: null })} />
             </AdminPaneLayout>
         );
     }

frontend/src/metabase/admin/people/components/GroupsListing.jsx

@@ -11,6 +11,7 @@ import { isDefaultGroup, isAdminGroup } from "metabase/lib/groups";
 import Icon from "metabase/components/Icon.jsx";
 import Input from "metabase/components/Input.jsx";
 import ModalContent from "metabase/components/ModalContent.jsx";
+import Alert from "metabase/components/Alert.jsx";
 import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
 import UserAvatar from "metabase/components/UserAvatar.jsx";
@@ -51,7 +52,7 @@ function AddGroupRow({ text, onCancelClicked, onCreateClicked, onTextChange }) {
 
 // ------------------------------------------------------------ Groups Table: editing ------------------------------------------------------------
 
-function DeleteGroupModal({ group, onConfirm, onClose }) {
+function DeleteGroupModal({ group, onConfirm = () => {} , onClose = () => {} }) {
     return (
         <ModalContent title="Remove this group?" closeFn={onClose}>
             <p className="px4 pb4">
@@ -59,10 +60,10 @@ function DeleteGroupModal({ group, onConfirm, onClose }) {
                 This can't be undone.
             </p>
             <div className="Form-actions">
-                <button className="Button Button--danger" onClick={onConfirm.bind(null, group)}>
+                <button className="Button Button--danger" onClick={() => { onClose(); onConfirm(group); }}>
                     Yes
                 </button>
-                <button className="Button Button--primary ml1" onClick={onClose}>
+                <button className="Button ml1" onClick={onClose}>
                     No
                 </button>
             </div>
@@ -183,10 +184,15 @@ export default class GroupsListing extends Component {
             text: "",
             showAddGroupRow: false,
             groups: null,
-            groupBeingEdited: null
+            groupBeingEdited: null,
+            alertMessage: null,
         };
     }
 
+    alert(alertMessage) {
+        this.setState({ alertMessage });
+    }
+
     onAddGroupCanceled() {
         this.setState({
             showAddGroupRow: false
@@ -196,7 +202,7 @@ export default class GroupsListing extends Component {
     // TODO: move this to Redux
     onAddGroupCreateButtonClicked() {
         MetabaseAnalytics.trackEvent("People Groups", "Group Added");
-        PermissionsAPI.createGroup({name: this.state.text}).then((function(newGroup) {
+        PermissionsAPI.createGroup({name: this.state.text}).then((newGroup) => {
             const groups = this.state.groups || this.props.groups || [];
             const newGroups = sortGroups(_.union(groups, [newGroup]));
 
@@ -205,9 +211,9 @@ export default class GroupsListing extends Component {
                 showAddGroupRow: false,
                 text: ""
             });
-        }).bind(this), function(error) {
+        }, (error) => {
             console.error('Error creating group:', error);
-            if (error.data && typeof error.data === "string") alert(error.data);
+            if (error.data && typeof error.data === "string") this.alert(error.data);
         });
     }
 
@@ -264,7 +270,7 @@ export default class GroupsListing extends Component {
 
         // ok, fire off API call to change the group
         MetabaseAnalytics.trackEvent("People Groups", "Group Updated");
-        PermissionsAPI.updateGroup({id: group.id, name: group.name}).then((function (newGroup) {
+        PermissionsAPI.updateGroup({id: group.id, name: group.name}).then((newGroup) => {
             // now replace the original group with the new group and update state
             let newGroups = _.reject(groups, (g) => g.id === group.id);
             newGroups = sortGroups(_.union(newGroups, [newGroup]));
@@ -274,28 +280,29 @@ export default class GroupsListing extends Component {
                 groupBeingEdited: null
             });
 
-        }).bind(this), function(error) {
+        }, (error) => {
             console.error("Error updating group name:", error);
-            if (error.data && typeof error.data === "string") alert(error.data);
+            if (error.data && typeof error.data === "string") this.alert(error.data);
         });
     }
 
     // TODO: move this to Redux
-    onDeleteGroupClicked(group) {
+    async onDeleteGroupClicked(group) {
         const groups = this.state.groups || this.props.groups || [];
         MetabaseAnalytics.trackEvent("People Groups", "Group Deleted");
-        PermissionsAPI.deleteGroup({id: group.id}).then((function () {
+        PermissionsAPI.deleteGroup({id: group.id}).then(() => {
             const newGroups = sortGroups(_.reject(groups, (g) => g.id === group.id));
             this.setState({
                 groups: newGroups
             });
-        }).bind(this), function(error) {
+        }, (error) => {
             console.error("Error deleting group: ", error);
-            if (error.data && typeof error.data === "string") alert(error.data);
+            if (error.data && typeof error.data === "string") this.alert(error.data);
         });
     }
 
     render() {
+        const { alertMessage } = this.state;
         let { groups } = this.props;
         groups = this.state.groups || groups || [];
 
@@ -320,6 +327,7 @@ export default class GroupsListing extends Component {
                     onEditGroupDoneClicked={this.onEditGroupDoneClicked.bind(this)}
                     onDeleteGroupClicked={this.onDeleteGroupClicked.bind(this)}
                 />
+                <Alert message={alertMessage} onClose={() => this.setState({ alertMessage: null })} />
             </AdminPaneLayout>
         );
     }

frontend/src/metabase/components/Alert.jsx

+import React, { Component, PropTypes } from "react";
+
+import Modal from "metabase/components/Modal.jsx";
+
+const Alert = ({ message, onClose }) =>
+    <Modal className="Modal Modal--small" isOpen={!!message}>
+        <div className="flex flex-column layout-centered p4">
+            <h3 className="mb4">{message}</h3>
+            <button className="Button Button--primary" onClick={onClose}>Ok</button>
+        </div>
+    </Modal>
+
+export default Alert;