studiokit-scaffolding-js 4.3.20 → 4.3.21

package/lib/components/UserRoles/index.js

@@ -1,361 +1,361 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapStateToProps = exports.UserRoles = void 0;
-var lodash_1 = require("lodash");
-var react_1 = __importStar(require("react"));
-var react_bootstrap_1 = require("react-bootstrap");
-var react_redux_1 = require("react-redux");
-var studiokit_net_js_1 = require("studiokit-net-js");
-var uuid_1 = require("uuid");
-var AlertDialog_1 = __importDefault(require("../../components/AlertDialog"));
-var Loading_1 = __importDefault(require("../../components/Loading"));
-var Add_1 = __importDefault(require("../../components/UserRoles/Add"));
-var Table_1 = require("../../components/UserRoles/Table");
-var baseRole_1 = __importDefault(require("../../constants/baseRole"));
-var modelStatus_1 = __importDefault(require("../../constants/modelStatus"));
-var actionCreator_1 = require("../../redux/actionCreator");
-var baseActivity_1 = require("../../utils/baseActivity");
-var baseRole_2 = require("../../utils/baseRole");
-var domainIdentifier_1 = require("../../utils/domainIdentifier");
-var entityUserRole_1 = require("../../utils/entityUserRole");
-var sort_1 = require("../../utils/sort");
-var user_1 = require("../../utils/user");
-var AlertWithIcon_1 = __importDefault(require("../AlertWithIcon"));
-/**
- * Component used to manage either UserRoles (global roles) or EntityUserRoles.
- */
-var UserRoles = /** @class */ (function (_super) {
-    __extends(UserRoles, _super);
-    function UserRoles() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            sortedUsers: [],
-            // add
-            addUsersHookId: uuid_1.v4(),
-            isAddingUsers: false,
-            identifiersToAdd: undefined,
-            roleForAdd: undefined,
-            shouldResetAddForm: false,
-            // remove
-            shouldShowRemoveDialog: false,
-            userToRemove: undefined,
-            roleForRemove: undefined,
-            // messages
-            successMessage: undefined,
-            existingUsersMessage: undefined,
-            failMessage: undefined
-        };
-        _this.setStateFromProps = function (props) {
-            var userRoles = props.modelArray, filterUsers = props.filterUsers;
-            _this.setState({
-                sortedUsers: filterUsers(userRoles).sort(sort_1.sortByNames)
-            });
-        };
-        _this.textForRole = function (role) {
-            return _this.props.textForRole ? _this.props.textForRole(role) : baseRole_2.textForBaseRole(role);
-        };
-        _this.singularArticleForRole = function (role) {
-            return _this.props.singularArticleForRole
-                ? _this.props.singularArticleForRole(role)
-                : baseRole_2.singularArticleForBaseRole(role);
-        };
-        //#region Add Users
-        _this.addUsers = function (ids, role) {
-            var entity = _this.props.entity;
-            _this.setState({
-                identifiersToAdd: ids,
-                roleForAdd: role,
-                successMessage: undefined,
-                failMessage: undefined,
-                shouldResetAddForm: false,
-                isAddingUsers: true
-            });
-            var addUsersHookId = _this.state.addUsersHookId;
-            studiokit_net_js_1.hooks.registerNoStoreActionHook(addUsersHookId, function (data) {
-                studiokit_net_js_1.hooks.unregisterNoStoreActionHook(addUsersHookId);
-                _this.didAdd(data);
-            });
-            var rootModelName = entityUserRole_1.getRootModelName(_this.props);
-            actionCreator_1.dispatchAction(studiokit_net_js_1.NET_ACTION.DATA_REQUESTED, {
-                modelName: (rootModelName ? rootModelName + "." : '') + "addUserRoles",
-                pathParams: entity ? [entity.id] : undefined,
-                body: {
-                    entityId: entity ? entity.id : undefined,
-                    identifiers: ids,
-                    roleName: role
-                },
-                noStore: true,
-                guid: addUsersHookId
-            });
-        };
-        _this.didAdd = function (data) {
-            var _a = _this.props, entityName = _a.entityName, load = _a.load, onChange = _a.onChange;
-            var _b = _this.state, roleForAdd = _b.roleForAdd, identifiersToAdd = _b.identifiersToAdd;
-            if (!roleForAdd || !identifiersToAdd || identifiersToAdd.length === 0) {
-                throw new Error('didAdd was called in the incorrect state');
-            }
-            if (!data || data.errorData) {
-                // tslint:disable-next-line: no-shadowed-variable
-                var failMessage_1 = "The following identifiers were not added" + (entityName ? " to your " + entityName : '') + ":\r\n" + identifiersToAdd.join('\r\n');
-                _this.setState({
-                    shouldResetAddForm: true,
-                    isAddingUsers: false,
-                    identifiersToAdd: undefined,
-                    roleForAdd: undefined,
-                    failMessage: failMessage_1
-                });
-                return;
-            }
-            var _c = data, addedUsers = _c.addedUsers, existingUsers = _c.existingUsers, invalidIdentifiers = _c.invalidIdentifiers, allowedDomains = _c.allowedDomains, invalidDomainIdentifiers = _c.invalidDomainIdentifiers;
-            var roleString = _this.textForRole(roleForAdd).toLowerCase();
-            var singularArticleString = _this.singularArticleForRole(roleForAdd);
-            var addedNames = !!addedUsers && addedUsers.length > 0
-                ? addedUsers
-                    .map(function (au) {
-                    return "" + user_1.displayName(au) + (au.uid ? " (" + au.uid + ")" : '');
-                })
-                    .join('\r\n')
-                : undefined;
-            var successMessage = addedNames
-                ? "The following " + roleString + (addedUsers.length > 1 ? 's were' : ' was') + " successfully added" + (entityName ? " to your " + entityName : '') + ":\r\n" + addedNames
-                : undefined;
-            var unchangedNames = !!existingUsers && existingUsers.length > 0
-                ? existingUsers.map(function (eu) { return "" + user_1.displayName(eu) + (eu.uid ? " (" + eu.uid + ")" : ''); }).join('\r\n')
-                : undefined;
-            var hasMultipleExistingUsers = existingUsers.length > 1;
-            var existingUsersMessage = unchangedNames
-                ? "The following " + (hasMultipleExistingUsers ? 'people were' : 'person was') + " already " + (entityName
-                    ? "in your " + entityName + " as " + (hasMultipleExistingUsers ? '' : singularArticleString + " ")
-                    : hasMultipleExistingUsers
-                        ? ''
-                        : singularArticleString + " ") + roleString + (hasMultipleExistingUsers ? 's' : '') + ":\r\n" + unchangedNames
-                : undefined;
-            var failMessage = !!invalidIdentifiers && invalidIdentifiers.length > 0
-                ? "The following " + domainIdentifier_1.getDomainIdentifierTypePluralString() + " are invalid:\r\n" + invalidIdentifiers.join('\r\n')
-                : undefined;
-            if (!!invalidDomainIdentifiers && invalidDomainIdentifiers.length > 0) {
-                failMessage = (failMessage ? failMessage + "\r\n" : '') + "The following " + domainIdentifier_1.getDomainIdentifierTypePluralString() + " do not match the allowed domains of " + allowedDomains.replace(',', ', ') + ":\r\n" + invalidDomainIdentifiers.join('\r\n');
-            }
-            _this.setState({
-                shouldResetAddForm: true,
-                isAddingUsers: false,
-                identifiersToAdd: undefined,
-                roleForAdd: undefined,
-                successMessage: successMessage,
-                existingUsersMessage: existingUsersMessage,
-                failMessage: failMessage
-            });
-            // only reload if we had some successful adds
-            if (addedNames) {
-                load();
-                if (onChange) {
-                    onChange();
-                }
-            }
-        };
-        //#endregion Add Users
-        //#region Remove User
-        _this.alertRemoveUser = function (userToRemove, roleForRemove) {
-            _this.setState({
-                userToRemove: userToRemove,
-                shouldShowRemoveDialog: true,
-                roleForRemove: roleForRemove
-            });
-        };
-        _this.removeUserTitle = function (roleForRemove) {
-            return "Remove " + _this.textForRole(roleForRemove);
-        };
-        _this.renderRemoveUserDescription = function (userToRemove, role, warning) {
-            var _a = _this.props, entity = _a.entity, externalProviders = _a.externalProviders;
-            var group = entity && entity.externalGroups ? entity : undefined;
-            var roleString = _this.textForRole(role).toLowerCase();
-            var singularArticleString = _this.singularArticleForRole(role);
-            var defaultWarning = warning !== null && warning !== void 0 ? warning : (react_1.default.createElement("p", { className: "ma0" },
-                "Are you sure you want to ",
-                react_1.default.createElement("strong", null,
-                    "remove ",
-                    user_1.displayName(userToRemove)),
-                " as ",
-                singularArticleString,
-                ' ',
-                roleString,
-                "?"));
-            var externalGroupsToRemove = group === null || group === void 0 ? void 0 : group.externalGroups.filter(function (eg) { return eg.userId === userToRemove.id; });
-            if (!externalGroupsToRemove || externalGroupsToRemove.length === 0 || role !== baseRole_1.default.GROUP_OWNER) {
-                return defaultWarning;
-            }
-            var externalGroupsToRemoveWithRosterSync = externalGroupsToRemove.filter(function (eg) { var _a; return (_a = externalProviders === null || externalProviders === void 0 ? void 0 : externalProviders[eg.externalProviderId]) === null || _a === void 0 ? void 0 : _a.rosterSyncEnabled; });
-            return (react_1.default.createElement("div", null,
-                react_1.default.createElement("p", null,
-                    "The following course sections will be ",
-                    react_1.default.createElement("strong", null, "disconnected"),
-                    ".",
-                    ' ',
-                    externalGroupsToRemoveWithRosterSync.length > 0 && (react_1.default.createElement("span", null,
-                        "Any automatically added students will be ",
-                        react_1.default.createElement("strong", null, "removed"),
-                        "."))),
-                react_1.default.createElement("ul", null, externalGroupsToRemove.map(function (eg) { return (react_1.default.createElement("li", { key: eg.id }, eg.description)); })),
-                defaultWarning));
-        };
-        _this.removeUser = function (shouldRemove) {
-            var entity = _this.props.entity;
-            var _a = _this.state, userToRemove = _a.userToRemove, roleForRemove = _a.roleForRemove;
-            if (userToRemove === undefined) {
-                throw new Error('removeUser was called without setting userToRemove in state');
-            }
-            if (roleForRemove === undefined) {
-                throw new Error('removeUser was called without setting rollForRemove in state');
-            }
-            _this.setState({
-                shouldShowRemoveDialog: false,
-                successMessage: undefined,
-                failMessage: undefined,
-                // clear if cancelled
-                userToRemove: shouldRemove ? userToRemove : undefined
-            });
-            if (!shouldRemove) {
-                return;
-            }
-            _this.props.delete({
-                id: userToRemove.id,
-                body: entity ? { roleName: roleForRemove, entityId: entity.id } : undefined
-            });
-        };
-        _this.didRemove = function (isSuccess) {
-            var _a = _this.props, entityName = _a.entityName, load = _a.load, onChange = _a.onChange;
-            var userToRemove = _this.state.userToRemove;
-            if (userToRemove === undefined) {
-                throw new Error('didRemove was called without setting state correctly');
-            }
-            var name = user_1.displayName(userToRemove);
-            if (!isSuccess) {
-                var failMessage = "Oops! There was an error removing " + name + (entityName ? " from your " + entityName : '') + ". Please try again.";
-                _this.setState({
-                    userToRemove: undefined,
-                    failMessage: failMessage
-                });
-                return;
-            }
-            var successMessage = name + " was successfully removed" + (entityName ? " from your " + entityName : '') + ".";
-            _this.setState({
-                userToRemove: undefined,
-                successMessage: successMessage
-            });
-            load();
-            if (onChange) {
-                onChange();
-            }
-        };
-        return _this;
-    }
-    UserRoles.prototype.componentDidMount = function () {
-        this.setStateFromProps(this.props);
-        var addUsersHookId = this.state.addUsersHookId;
-        studiokit_net_js_1.hooks.unregisterNoStoreActionHook(addUsersHookId);
-    };
-    UserRoles.prototype.componentDidUpdate = function (prevProps) {
-        var prevModelArray = prevProps.modelArray, prevModelStatus = prevProps.modelStatus;
-        var _a = this.props, modelArray = _a.modelArray, modelStatus = _a.modelStatus, entityName = _a.entityName;
-        if (!lodash_1.isEqual(prevModelArray, modelArray)) {
-            this.setStateFromProps(this.props);
-        }
-        // loading error
-        if ((prevModelStatus === modelStatus_1.default.UNINITIALIZED || prevModelStatus === modelStatus_1.default.LOADING) &&
-            modelStatus === modelStatus_1.default.ERROR) {
-            this.setState({
-                failMessage: "Oops! There was an error loading" + (entityName ? " the people for your " + entityName : '') + ".\r\nPlease try again."
-            });
-        }
-        // removing
-        if (prevModelStatus === modelStatus_1.default.DELETING && modelStatus !== modelStatus_1.default.DELETING) {
-            this.didRemove(modelStatus === modelStatus_1.default.READY);
-        }
-    };
-    //#endregion Remove User
-    UserRoles.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, modelStatus = _a.modelStatus, canModify = _a.canModify, canModifySelf = _a.canModifySelf, entityName = _a.entityName, renderTableDescription = _a.renderTableDescription, defaultRole = _a.defaultRole, roleDescriptions = _a.roleDescriptions, renderAddDescription = _a.renderAddDescription, disabled = _a.disabled, isDeleteDisabled = _a.isDeleteDisabled, addRoleBlacklist = _a.addRoleBlacklist;
-        var _b = this.state, isAddingUsers = _b.isAddingUsers, sortedUsers = _b.sortedUsers, shouldResetAddForm = _b.shouldResetAddForm, shouldShowRemoveDialog = _b.shouldShowRemoveDialog, userToRemove = _b.userToRemove, roleForRemove = _b.roleForRemove, successMessage = _b.successMessage, existingUsersMessage = _b.existingUsersMessage, failMessage = _b.failMessage;
-        var addableRoleDescriptions = addRoleBlacklist
-            ? lodash_1.pickBy(roleDescriptions, function (_, key) { return !addRoleBlacklist.includes(key); })
-            : roleDescriptions;
-        var roles = Object.keys(roleDescriptions);
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            !!successMessage && (react_1.default.createElement(AlertWithIcon_1.default, { id: "successMessageAlert", variant: "success", dismissible: true, onClose: function () {
-                    return _this.setState({
-                        successMessage: undefined
-                    });
-                } },
-                react_1.default.createElement("p", { className: "pre-wrap" }, successMessage))),
-            !!existingUsersMessage && (react_1.default.createElement(AlertWithIcon_1.default, { id: "existingUsersMessageAlert", variant: "info", dismissible: true, onClose: function () {
-                    return _this.setState({
-                        existingUsersMessage: undefined
-                    });
-                } },
-                react_1.default.createElement("p", { className: "pre-wrap" }, existingUsersMessage))),
-            !!failMessage && (react_1.default.createElement(AlertWithIcon_1.default, { id: "failMessageAlert", variant: "warning", dismissible: true, onClose: function () {
-                    return _this.setState({
-                        failMessage: undefined
-                    });
-                } },
-                react_1.default.createElement("p", { className: "pre-wrap" }, failMessage))),
-            canModify && (react_1.default.createElement(Add_1.default, { id: "entityUserRolesAdd", entityName: entityName, addUsersToRole: this.addUsers, shouldReset: shouldResetAddForm, isAddingUsersToRole: isAddingUsers, defaultRole: defaultRole, roleDescriptions: addableRoleDescriptions, renderAddDescription: renderAddDescription, disabled: disabled, textForRole: this.textForRole })),
-            !!renderTableDescription && renderTableDescription(canModify),
-            react_1.default.createElement(react_bootstrap_1.Row, { className: "mt3" },
-                react_1.default.createElement(react_bootstrap_1.Col, { xs: 12 }, modelStatus === modelStatus_1.default.LOADING ? (react_1.default.createElement(Loading_1.default, null)) : sortedUsers.length > 0 ? (react_1.default.createElement(Table_1.UserRolesTable, { id: "entityUserRolesTable", users: sortedUsers, readOnly: !canModify || isDeleteDisabled, roles: roles, 
-                    // Assumes the default is the groupOwner, assignment/assessmentOwner, rubricOwner, problemOwner etc.
-                    entityOwnerRole: defaultRole, canModifySelf: canModifySelf, removeUserFromRole: this.alertRemoveUser, textForRole: this.textForRole })) : null)),
-            !!userToRemove && !!roleForRemove && (react_1.default.createElement(AlertDialog_1.default, { id: "removeUserAlert", isOpen: shouldShowRemoveDialog, title: this.removeUserTitle(roleForRemove), description: this.renderRemoveUserDescription(userToRemove, roleForRemove), onDestroy: function () { return _this.removeUser(true); }, destroyText: "Yes, remove the user", onCancel: function () { return _this.removeUser(false); }, cancelText: "No, I changed my mind" }))));
-    };
-    return UserRoles;
-}(react_1.Component));
-exports.UserRoles = UserRoles;
-var mapStateToProps = function (state, ownProps) {
-    var canModifyGlobally = baseActivity_1.canPerformActivityGlobally(ownProps.modifyUserRoleActivityName, baseActivity_1.defaultOptions(state));
-    return {
-        canModifySelf: Object.prototype.hasOwnProperty.call(ownProps, 'canModifySelf')
-            ? ownProps.canModifySelf
-            : canModifyGlobally,
-        canModify: ownProps.entity
-            ? baseActivity_1.canPerformActivityGloballyOrOnEntity(ownProps.modifyUserRoleActivityName, baseActivity_1.defaultOptions(state, ownProps, 'entity'))
-            : canModifyGlobally
-    };
-};
-exports.mapStateToProps = mapStateToProps;
-exports.default = react_redux_1.connect(exports.mapStateToProps)(UserRoles);
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapStateToProps = exports.UserRoles = void 0;
+var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var react_redux_1 = require("react-redux");
+var studiokit_net_js_1 = require("studiokit-net-js");
+var uuid_1 = require("uuid");
+var AlertDialog_1 = __importDefault(require("../../components/AlertDialog"));
+var Loading_1 = __importDefault(require("../../components/Loading"));
+var Add_1 = __importDefault(require("../../components/UserRoles/Add"));
+var Table_1 = require("../../components/UserRoles/Table");
+var baseRole_1 = __importDefault(require("../../constants/baseRole"));
+var modelStatus_1 = __importDefault(require("../../constants/modelStatus"));
+var actionCreator_1 = require("../../redux/actionCreator");
+var baseActivity_1 = require("../../utils/baseActivity");
+var baseRole_2 = require("../../utils/baseRole");
+var domainIdentifier_1 = require("../../utils/domainIdentifier");
+var entityUserRole_1 = require("../../utils/entityUserRole");
+var sort_1 = require("../../utils/sort");
+var user_1 = require("../../utils/user");
+var AlertWithIcon_1 = __importDefault(require("../AlertWithIcon"));
+/**
+ * Component used to manage either UserRoles (global roles) or EntityUserRoles.
+ */
+var UserRoles = /** @class */ (function (_super) {
+    __extends(UserRoles, _super);
+    function UserRoles() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            sortedUsers: [],
+            // add
+            addUsersHookId: uuid_1.v4(),
+            isAddingUsers: false,
+            identifiersToAdd: undefined,
+            roleForAdd: undefined,
+            shouldResetAddForm: false,
+            // remove
+            shouldShowRemoveDialog: false,
+            userToRemove: undefined,
+            roleForRemove: undefined,
+            // messages
+            successMessage: undefined,
+            existingUsersMessage: undefined,
+            failMessage: undefined
+        };
+        _this.setStateFromProps = function (props) {
+            var userRoles = props.modelArray, filterUsers = props.filterUsers;
+            _this.setState({
+                sortedUsers: filterUsers(userRoles).sort(sort_1.sortByNames)
+            });
+        };
+        _this.textForRole = function (role) {
+            return _this.props.textForRole ? _this.props.textForRole(role) : baseRole_2.textForBaseRole(role);
+        };
+        _this.singularArticleForRole = function (role) {
+            return _this.props.singularArticleForRole
+                ? _this.props.singularArticleForRole(role)
+                : baseRole_2.singularArticleForBaseRole(role);
+        };
+        //#region Add Users
+        _this.addUsers = function (ids, role) {
+            var entity = _this.props.entity;
+            _this.setState({
+                identifiersToAdd: ids,
+                roleForAdd: role,
+                successMessage: undefined,
+                failMessage: undefined,
+                shouldResetAddForm: false,
+                isAddingUsers: true
+            });
+            var addUsersHookId = _this.state.addUsersHookId;
+            studiokit_net_js_1.hooks.registerNoStoreActionHook(addUsersHookId, function (data) {
+                studiokit_net_js_1.hooks.unregisterNoStoreActionHook(addUsersHookId);
+                _this.didAdd(data);
+            });
+            var rootModelName = entityUserRole_1.getRootModelName(_this.props);
+            actionCreator_1.dispatchAction(studiokit_net_js_1.NET_ACTION.DATA_REQUESTED, {
+                modelName: (rootModelName ? rootModelName + "." : '') + "addUserRoles",
+                pathParams: entity ? [entity.id] : undefined,
+                body: {
+                    entityId: entity ? entity.id : undefined,
+                    identifiers: ids,
+                    roleName: role
+                },
+                noStore: true,
+                guid: addUsersHookId
+            });
+        };
+        _this.didAdd = function (data) {
+            var _a = _this.props, entityName = _a.entityName, load = _a.load, onChange = _a.onChange;
+            var _b = _this.state, roleForAdd = _b.roleForAdd, identifiersToAdd = _b.identifiersToAdd;
+            if (!roleForAdd || !identifiersToAdd || identifiersToAdd.length === 0) {
+                throw new Error('didAdd was called in the incorrect state');
+            }
+            if (!data || data.errorData) {
+                // tslint:disable-next-line: no-shadowed-variable
+                var failMessage_1 = "The following identifiers were not added" + (entityName ? " to your " + entityName : '') + ":\r\n" + identifiersToAdd.join('\r\n');
+                _this.setState({
+                    shouldResetAddForm: true,
+                    isAddingUsers: false,
+                    identifiersToAdd: undefined,
+                    roleForAdd: undefined,
+                    failMessage: failMessage_1
+                });
+                return;
+            }
+            var _c = data, addedUsers = _c.addedUsers, existingUsers = _c.existingUsers, invalidIdentifiers = _c.invalidIdentifiers, allowedDomains = _c.allowedDomains, invalidDomainIdentifiers = _c.invalidDomainIdentifiers;
+            var roleString = _this.textForRole(roleForAdd).toLowerCase();
+            var singularArticleString = _this.singularArticleForRole(roleForAdd);
+            var addedNames = !!addedUsers && addedUsers.length > 0
+                ? addedUsers
+                    .map(function (au) {
+                    return "" + user_1.displayName(au) + (au.uid ? " (" + au.uid + ")" : '');
+                })
+                    .join('\r\n')
+                : undefined;
+            var successMessage = addedNames
+                ? "The following " + roleString + (addedUsers.length > 1 ? 's were' : ' was') + " successfully added" + (entityName ? " to your " + entityName : '') + ":\r\n" + addedNames
+                : undefined;
+            var unchangedNames = !!existingUsers && existingUsers.length > 0
+                ? existingUsers.map(function (eu) { return "" + user_1.displayName(eu) + (eu.uid ? " (" + eu.uid + ")" : ''); }).join('\r\n')
+                : undefined;
+            var hasMultipleExistingUsers = existingUsers.length > 1;
+            var existingUsersMessage = unchangedNames
+                ? "The following " + (hasMultipleExistingUsers ? 'people were' : 'person was') + " already " + (entityName
+                    ? "in your " + entityName + " as " + (hasMultipleExistingUsers ? '' : singularArticleString + " ")
+                    : hasMultipleExistingUsers
+                        ? ''
+                        : singularArticleString + " ") + roleString + (hasMultipleExistingUsers ? 's' : '') + ":\r\n" + unchangedNames
+                : undefined;
+            var failMessage = !!invalidIdentifiers && invalidIdentifiers.length > 0
+                ? "The following " + domainIdentifier_1.getDomainIdentifierTypePluralString() + " are invalid:\r\n" + invalidIdentifiers.join('\r\n')
+                : undefined;
+            if (!!invalidDomainIdentifiers && invalidDomainIdentifiers.length > 0) {
+                failMessage = (failMessage ? failMessage + "\r\n" : '') + "The following " + domainIdentifier_1.getDomainIdentifierTypePluralString() + " do not match the allowed domains of " + allowedDomains.replace(',', ', ') + ":\r\n" + invalidDomainIdentifiers.join('\r\n');
+            }
+            _this.setState({
+                shouldResetAddForm: true,
+                isAddingUsers: false,
+                identifiersToAdd: undefined,
+                roleForAdd: undefined,
+                successMessage: successMessage,
+                existingUsersMessage: existingUsersMessage,
+                failMessage: failMessage
+            });
+            // only reload if we had some successful adds
+            if (addedNames) {
+                load();
+                if (onChange) {
+                    onChange();
+                }
+            }
+        };
+        //#endregion Add Users
+        //#region Remove User
+        _this.alertRemoveUser = function (userToRemove, roleForRemove) {
+            _this.setState({
+                userToRemove: userToRemove,
+                shouldShowRemoveDialog: true,
+                roleForRemove: roleForRemove
+            });
+        };
+        _this.removeUserTitle = function (roleForRemove) {
+            return "Remove " + _this.textForRole(roleForRemove);
+        };
+        _this.renderRemoveUserDescription = function (userToRemove, role, warning) {
+            var _a = _this.props, entity = _a.entity, externalProviders = _a.externalProviders;
+            var group = entity && entity.externalGroups ? entity : undefined;
+            var roleString = _this.textForRole(role).toLowerCase();
+            var singularArticleString = _this.singularArticleForRole(role);
+            var defaultWarning = warning !== null && warning !== void 0 ? warning : (react_1.default.createElement("p", { className: "ma0" },
+                "Are you sure you want to ",
+                react_1.default.createElement("strong", null,
+                    "remove ",
+                    user_1.displayName(userToRemove)),
+                " as ",
+                singularArticleString,
+                ' ',
+                roleString,
+                "?"));
+            var externalGroupsToRemove = group === null || group === void 0 ? void 0 : group.externalGroups.filter(function (eg) { return eg.userId === userToRemove.id; });
+            if (!externalGroupsToRemove || externalGroupsToRemove.length === 0 || role !== baseRole_1.default.GROUP_OWNER) {
+                return defaultWarning;
+            }
+            var externalGroupsToRemoveWithRosterSync = externalGroupsToRemove.filter(function (eg) { var _a; return (_a = externalProviders === null || externalProviders === void 0 ? void 0 : externalProviders[eg.externalProviderId]) === null || _a === void 0 ? void 0 : _a.rosterSyncEnabled; });
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("p", null,
+                    "The following course sections will be ",
+                    react_1.default.createElement("strong", null, "disconnected"),
+                    ".",
+                    ' ',
+                    externalGroupsToRemoveWithRosterSync.length > 0 && (react_1.default.createElement("span", null,
+                        "Any automatically added students will be ",
+                        react_1.default.createElement("strong", null, "removed"),
+                        "."))),
+                react_1.default.createElement("ul", null, externalGroupsToRemove.map(function (eg) { return (react_1.default.createElement("li", { key: eg.id }, eg.description)); })),
+                defaultWarning));
+        };
+        _this.removeUser = function (shouldRemove) {
+            var entity = _this.props.entity;
+            var _a = _this.state, userToRemove = _a.userToRemove, roleForRemove = _a.roleForRemove;
+            if (userToRemove === undefined) {
+                throw new Error('removeUser was called without setting userToRemove in state');
+            }
+            if (roleForRemove === undefined) {
+                throw new Error('removeUser was called without setting rollForRemove in state');
+            }
+            _this.setState({
+                shouldShowRemoveDialog: false,
+                successMessage: undefined,
+                failMessage: undefined,
+                // clear if cancelled
+                userToRemove: shouldRemove ? userToRemove : undefined
+            });
+            if (!shouldRemove) {
+                return;
+            }
+            _this.props.delete({
+                id: userToRemove.id,
+                body: entity ? { roleName: roleForRemove, entityId: entity.id } : undefined
+            });
+        };
+        _this.didRemove = function (isSuccess) {
+            var _a = _this.props, entityName = _a.entityName, load = _a.load, onChange = _a.onChange;
+            var userToRemove = _this.state.userToRemove;
+            if (userToRemove === undefined) {
+                throw new Error('didRemove was called without setting state correctly');
+            }
+            var name = user_1.displayName(userToRemove);
+            if (!isSuccess) {
+                var failMessage = "Oops! There was an error removing " + name + (entityName ? " from your " + entityName : '') + ". Please try again.";
+                _this.setState({
+                    userToRemove: undefined,
+                    failMessage: failMessage
+                });
+                return;
+            }
+            var successMessage = name + " was successfully removed" + (entityName ? " from your " + entityName : '') + ".";
+            _this.setState({
+                userToRemove: undefined,
+                successMessage: successMessage
+            });
+            load();
+            if (onChange) {
+                onChange();
+            }
+        };
+        return _this;
+    }
+    UserRoles.prototype.componentDidMount = function () {
+        this.setStateFromProps(this.props);
+        var addUsersHookId = this.state.addUsersHookId;
+        studiokit_net_js_1.hooks.unregisterNoStoreActionHook(addUsersHookId);
+    };
+    UserRoles.prototype.componentDidUpdate = function (prevProps) {
+        var prevModelArray = prevProps.modelArray, prevModelStatus = prevProps.modelStatus;
+        var _a = this.props, modelArray = _a.modelArray, modelStatus = _a.modelStatus, entityName = _a.entityName;
+        if (!lodash_1.isEqual(prevModelArray, modelArray)) {
+            this.setStateFromProps(this.props);
+        }
+        // loading error
+        if ((prevModelStatus === modelStatus_1.default.UNINITIALIZED || prevModelStatus === modelStatus_1.default.LOADING) &&
+            modelStatus === modelStatus_1.default.ERROR) {
+            this.setState({
+                failMessage: "Oops! There was an error loading" + (entityName ? " the people for your " + entityName : '') + ".\r\nPlease try again."
+            });
+        }
+        // removing
+        if (prevModelStatus === modelStatus_1.default.DELETING && modelStatus !== modelStatus_1.default.DELETING) {
+            this.didRemove(modelStatus === modelStatus_1.default.READY);
+        }
+    };
+    //#endregion Remove User
+    UserRoles.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, modelStatus = _a.modelStatus, canModify = _a.canModify, canModifySelf = _a.canModifySelf, entityName = _a.entityName, renderTableDescription = _a.renderTableDescription, defaultRole = _a.defaultRole, roleDescriptions = _a.roleDescriptions, renderAddDescription = _a.renderAddDescription, disabled = _a.disabled, isDeleteDisabled = _a.isDeleteDisabled, addRoleBlacklist = _a.addRoleBlacklist;
+        var _b = this.state, isAddingUsers = _b.isAddingUsers, sortedUsers = _b.sortedUsers, shouldResetAddForm = _b.shouldResetAddForm, shouldShowRemoveDialog = _b.shouldShowRemoveDialog, userToRemove = _b.userToRemove, roleForRemove = _b.roleForRemove, successMessage = _b.successMessage, existingUsersMessage = _b.existingUsersMessage, failMessage = _b.failMessage;
+        var addableRoleDescriptions = addRoleBlacklist
+            ? lodash_1.pickBy(roleDescriptions, function (_, key) { return !addRoleBlacklist.includes(key); })
+            : roleDescriptions;
+        var roles = Object.keys(roleDescriptions);
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            !!successMessage && (react_1.default.createElement(AlertWithIcon_1.default, { id: "successMessageAlert", variant: "success", dismissible: true, onClose: function () {
+                    return _this.setState({
+                        successMessage: undefined
+                    });
+                } },
+                react_1.default.createElement("p", { className: "pre-wrap" }, successMessage))),
+            !!existingUsersMessage && (react_1.default.createElement(AlertWithIcon_1.default, { id: "existingUsersMessageAlert", variant: "info", dismissible: true, onClose: function () {
+                    return _this.setState({
+                        existingUsersMessage: undefined
+                    });
+                } },
+                react_1.default.createElement("p", { className: "pre-wrap" }, existingUsersMessage))),
+            !!failMessage && (react_1.default.createElement(AlertWithIcon_1.default, { id: "failMessageAlert", variant: "warning", dismissible: true, onClose: function () {
+                    return _this.setState({
+                        failMessage: undefined
+                    });
+                } },
+                react_1.default.createElement("p", { className: "pre-wrap" }, failMessage))),
+            canModify && (react_1.default.createElement(Add_1.default, { id: "entityUserRolesAdd", entityName: entityName, addUsersToRole: this.addUsers, shouldReset: shouldResetAddForm, isAddingUsersToRole: isAddingUsers, defaultRole: defaultRole, roleDescriptions: addableRoleDescriptions, renderAddDescription: renderAddDescription, disabled: disabled, textForRole: this.textForRole })),
+            !!renderTableDescription && renderTableDescription(canModify),
+            react_1.default.createElement(react_bootstrap_1.Row, { className: "mt3" },
+                react_1.default.createElement(react_bootstrap_1.Col, { xs: 12 }, modelStatus === modelStatus_1.default.LOADING ? (react_1.default.createElement(Loading_1.default, null)) : sortedUsers.length > 0 ? (react_1.default.createElement(Table_1.UserRolesTable, { id: "entityUserRolesTable", users: sortedUsers, readOnly: !canModify || isDeleteDisabled, roles: roles, 
+                    // Assumes the default is the groupOwner, assignment/assessmentOwner, rubricOwner, problemOwner etc.
+                    entityOwnerRole: defaultRole, canModifySelf: canModifySelf, removeUserFromRole: this.alertRemoveUser, textForRole: this.textForRole })) : null)),
+            !!userToRemove && !!roleForRemove && (react_1.default.createElement(AlertDialog_1.default, { id: "removeUserAlert", isOpen: shouldShowRemoveDialog, title: this.removeUserTitle(roleForRemove), description: this.renderRemoveUserDescription(userToRemove, roleForRemove), onDestroy: function () { return _this.removeUser(true); }, destroyText: "Yes, remove the user", onCancel: function () { return _this.removeUser(false); }, cancelText: "No, I changed my mind" }))));
+    };
+    return UserRoles;
+}(react_1.Component));
+exports.UserRoles = UserRoles;
+var mapStateToProps = function (state, ownProps) {
+    var canModifyGlobally = baseActivity_1.canPerformActivityGlobally(ownProps.modifyUserRoleActivityName, baseActivity_1.defaultOptions(state));
+    return {
+        canModifySelf: Object.prototype.hasOwnProperty.call(ownProps, 'canModifySelf')
+            ? ownProps.canModifySelf
+            : canModifyGlobally,
+        canModify: ownProps.entity
+            ? baseActivity_1.canPerformActivityGloballyOrOnEntity(ownProps.modifyUserRoleActivityName, baseActivity_1.defaultOptions(state, ownProps, 'entity'))
+            : canModifyGlobally
+    };
+};
+exports.mapStateToProps = mapStateToProps;
+exports.default = react_redux_1.connect(exports.mapStateToProps)(UserRoles);