studiokit-scaffolding-js 4.3.20 → 4.5.0-next.1.2

package/lib/components/HOC/SearchPersistorComponent.d.ts

@@ -1,17 +1,13 @@
-import React, { ComponentClass, ComponentType } from 'react';
+import { ComponentClass, ComponentType } from 'react';
 import { Dispatch } from 'redux';
 import { BaseReduxState, Search } from '../../types';
-export interface SearchPersistorProps {
-    persistSearch: (search?: Search) => void;
-    persistedSearch: Search;
+export interface SearchPersistorProps<T extends Search = Search> {
+    persistSearch: (search?: T) => void;
+    persistedSearch: T;
 }
-interface SearchPersistorState {
-    search: Search | undefined;
-    defaultSearch: Search | undefined;
-}
-export interface SearchPersistorMethods {
-    setSearchDefaults: (doSearch: () => void, search: Search) => void;
-    updateAndPersistSearch: (search?: Search, callback?: () => void) => void;
+export interface SearchPersistorMethods<T extends Search = Search> {
+    setSearchDefaults: (doSearch: () => void, search: T) => void;
+    updateAndPersistSearch: (search?: Search | T, callback?: () => void) => void;
     handleSearchClick: () => void;
     handleChangeTab: (selectedTab: number) => void;
     handleKeywordsChange: (event: any) => void;
@@ -19,48 +15,13 @@ export interface SearchPersistorMethods {
     handleQueryAllChange: (event: any) => void;
     resetSearch: () => void;
 }
-export interface SearchPersistorWrappedProps extends SearchPersistorProps, SearchPersistorMethods {
-    search?: Search;
+export interface SearchPersistorWrappedProps<T extends Search = Search> extends SearchPersistorProps<T>, SearchPersistorMethods<T> {
+    search?: T;
 }
-export declare function configureSearchPersistorComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & SearchPersistorWrappedProps>): {
-    new (props: TOwnProps & SearchPersistorProps): {
-        doSearch: () => void;
-        componentDidMount(): void;
-        setSearchDefaults: (doSearch: () => void, search: Search) => void;
-        updateAndPersistSearch: (search?: Search | undefined, callback?: (() => void) | undefined) => void;
-        handleSearchClick: () => void;
-        handleChangeTab: (selectedTab: number) => void;
-        handleKeywordsChange: (event: any) => void;
-        handleKeywordsKeyDown: (event: any) => void;
-        handleQueryAllChange: (event: any) => void;
-        resetSearch: () => void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends "search" | "defaultSearch">(state: SearchPersistorState | ((prevState: Readonly<SearchPersistorState>, props: Readonly<TOwnProps & SearchPersistorProps>) => SearchPersistorState | Pick<SearchPersistorState, K> | null) | Pick<SearchPersistorState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<TOwnProps & SearchPersistorProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<SearchPersistorState>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<TOwnProps & SearchPersistorProps>, nextState: Readonly<SearchPersistorState>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<TOwnProps & SearchPersistorProps>, prevState: Readonly<SearchPersistorState>): any;
-        componentDidUpdate?(prevProps: Readonly<TOwnProps & SearchPersistorProps>, prevState: Readonly<SearchPersistorState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<TOwnProps & SearchPersistorProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TOwnProps & SearchPersistorProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<TOwnProps & SearchPersistorProps>, nextState: Readonly<SearchPersistorState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<TOwnProps & SearchPersistorProps>, nextState: Readonly<SearchPersistorState>, nextContext: any): void;
-    };
-    contextType?: React.Context<any> | undefined;
-};
-export declare const configureMapStateToProps: (key: string) => (state: BaseReduxState) => SearchPersistorProps;
-export declare const configureMapDispatchToProps: (key: string) => (dispatch: Dispatch) => SearchPersistorProps;
+export declare function configureSearchPersistorComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & SearchPersistorWrappedProps>): ComponentType<TOwnProps & SearchPersistorProps>;
+export declare function configureSearchPersistorComponent<TOwnProps extends {}, TSearchType extends Search>(WrappedComponent: ComponentType<TOwnProps & SearchPersistorWrappedProps<TSearchType>>): ComponentType<TOwnProps & SearchPersistorProps<TSearchType>>;
+export declare const configureMapStateToProps: <TSearchType extends Search>(key: string) => (state: BaseReduxState) => SearchPersistorProps<TSearchType>;
+export declare const configureMapDispatchToProps: <TSearchType extends Search>(key: string) => (dispatch: Dispatch) => SearchPersistorProps<TSearchType>;
 /**
  * HOC to handle persistence and restoration of "Manage" components search parameters.
  * Note: if you store a search date in a child component, make sure it’s called `date`.
@@ -82,4 +43,24 @@ export declare const configureMapDispatchToProps: (key: string) => (dispatch: Di
  * @returns The wrapped component, passing down `search` and `persistSearch` as props
  */
 export default function searchPersistorComponent<TOwnProps extends SearchPersistorWrappedProps>(WrappedComponent: ComponentType<TOwnProps>, key: string): ComponentClass<Omit<TOwnProps, keyof SearchPersistorWrappedProps>>;
-export {};
+/**
+ * HOC to handle persistence and restoration of "Manage" components search parameters.
+ * Note: if you store a search date in a child component, make sure it’s called `date`.
+ * Rehydration of dates doesn’t work as expected out of the box with redux-persist.
+ * Something more generic might be in order in the future.
+ *
+ * Note: this also uses the `configureX` pattern of declaration for testability.
+ *
+ * API for child components:
+ *  - Call `setSearchDefaults(this.doSearch, this.getDefaultSearch())` in child’s `componentDidMount`
+ *  - Implement `getDefaultSearch`
+ *  - Call this HOC’s handlers as needed
+ *  - Implement any additional child-specific handlers and call this HOC’s `updateAndPersistSearch` in them
+ *  - Make sure your `doSearch` and `render` handle undefined search props
+ *  - Avoid intoxicating substances and wash your hands regularly
+ *
+ * @param WrappedComponent The component to wrap
+ * @param key The key under "search" in redux where the component’s search params will be stored
+ * @returns The wrapped component, passing down `search` and `persistSearch` as props
+ */
+export default function searchPersistorComponent<TOwnProps extends SearchPersistorWrappedProps<TSearchType>, TSearchType extends Search>(WrappedComponent: ComponentType<TOwnProps>, key: string): ComponentClass<Omit<TOwnProps, keyof SearchPersistorWrappedProps<TSearchType>>>;

package/lib/components/HOC/SearchPersistorComponent.js

@@ -168,26 +168,6 @@ var configureMapDispatchToProps = function (key) { return function (dispatch) {
     };
 }; };
 exports.configureMapDispatchToProps = configureMapDispatchToProps;
-/**
- * HOC to handle persistence and restoration of "Manage" components search parameters.
- * Note: if you store a search date in a child component, make sure it’s called `date`.
- * Rehydration of dates doesn’t work as expected out of the box with redux-persist.
- * Something more generic might be in order in the future.
- *
- * Note: this also uses the `configureX` pattern of declaration for testability.
- *
- * API for child components:
- *  - Call `setSearchDefaults(this.doSearch, this.getDefaultSearch())` in child’s `componentDidMount`
- *  - Implement `getDefaultSearch`
- *  - Call this HOC’s handlers as needed
- *  - Implement any additional child-specific handlers and call this HOC’s `updateAndPersistSearch` in them
- *  - Make sure your `doSearch` and `render` handle undefined search props
- *  - Avoid intoxicating substances and wash your hands regularly
- *
- * @param WrappedComponent The component to wrap
- * @param key The key under "search" in redux where the component’s search params will be stored
- * @returns The wrapped component, passing down `search` and `persistSearch` as props
- */
 function searchPersistorComponent(WrappedComponent, key) {
     var SearchPersistorComponent = configureSearchPersistorComponent(WrappedComponent);
     var mapStateToProps = exports.configureMapStateToProps(key);

package/lib/components/UserRoles/Add.d.ts

@@ -1,16 +1,16 @@
 import { Component } from 'react';
-import { RoleDescription } from '../../types';
+import { RoleDescriptions } from '../../types';
 export interface UserRolesAddProps {
     id: string;
+    disabled?: boolean;
     entityName?: string;
-    addUsersToRole: any;
-    shouldReset: boolean;
-    isAddingUsersToRole: boolean;
     defaultRole: string;
-    roleDescriptions: RoleDescription;
+    roleDescriptions: RoleDescriptions;
     renderAddDescription?: (entityName?: string) => JSX.Element;
-    disabled?: boolean;
     textForRole?: (role: string) => string;
+    isAddingUsersToRole: boolean;
+    shouldReset: boolean;
+    addUserRoles: (identifiers: string[], role: string) => void;
 }
 interface UserRolesAddState {
     identifiers: string;
@@ -20,7 +20,7 @@ interface UserRolesAddState {
 }
 export default class UserRolesAdd extends Component<UserRolesAddProps, UserRolesAddState> {
     constructor(props: UserRolesAddProps);
-    updateRole: (e: any) => void;
+    updateRole: (role: string) => void;
     componentDidUpdate(prevProps: UserRolesAddProps): void;
     handleSubmit: () => void;
     closeErrorAlert: () => void;

package/lib/components/UserRoles/Add.js

@@ -42,7 +42,7 @@ var react_1 = __importStar(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var AlertDialog_1 = __importDefault(require("../../components/AlertDialog"));
 var Inline_1 = __importDefault(require("../../components/RefreshIndicator/Inline"));
-var Select_1 = __importDefault(require("../../components/UserRoles/Select"));
+var Select_1 = require("../../components/UserRoles/Select");
 var baseRole_1 = __importDefault(require("../../constants/baseRole"));
 var configuration_1 = require("../../constants/configuration");
 var domainIdentifier_1 = require("../../utils/domainIdentifier");
@@ -54,9 +54,9 @@ var UserRolesAdd = /** @class */ (function (_super) {
     __extends(UserRolesAdd, _super);
     function UserRolesAdd(props) {
         var _this = _super.call(this, props) || this;
-        _this.updateRole = function (e) {
+        _this.updateRole = function (role) {
             _this.setState({
-                role: e.target.value
+                role: role
             });
         };
         _this.handleSubmit = function () {
@@ -73,7 +73,7 @@ var UserRolesAdd = /** @class */ (function (_super) {
                 });
             }
             else {
-                _this.props.addUsersToRole(identifiersArray, role);
+                _this.props.addUserRoles(identifiersArray, role);
             }
         };
         _this.closeErrorAlert = function () {
@@ -140,7 +140,7 @@ var UserRolesAdd = /** @class */ (function (_super) {
                         " (separated by a new line)"),
                     react_1.default.createElement(react_bootstrap_1.FormControl, { type: "text", as: "textarea", name: "account", "aria-label": "The account names to add", onChange: this.updateIdentifiers, value: identifiers, placeholder: domainIdentifier_1.getDomainIdentifierTypeString(), disabled: disabled }))),
             react_1.default.createElement(react_bootstrap_1.Col, { xs: 12, sm: 4 },
-                react_1.default.createElement(Select_1.default, { options: roles, value: role, onChange: this.updateRole, labelVisible: true, popoverContentComponent: rolePopover, textForRole: textForRole })),
+                react_1.default.createElement(Select_1.RoleSelect, { options: roles, value: role, onChange: this.updateRole, labelVisible: true, popoverContentComponent: rolePopover, textForRole: textForRole })),
             react_1.default.createElement(react_bootstrap_1.Col, { xs: 12, sm: 2, className: "mt3-ns pt2-ns" },
                 isAddingUsersToRole && react_1.default.createElement(Inline_1.default, { className: "mr3" }),
                 !isAddingUsersToRole && (react_1.default.createElement(Button_1.default, { id: "userRolesAddButton", className: "btn btn-primary w-100-lt-xs", disabled: !identifiers || disabled, color: "primary", onClick: this.handleSubmit },

package/lib/components/UserRoles/Context.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { UserRole } from '../../types';
+export interface UserRolesContextType {
+    /** disable all user role select dropdowns, if any */
+    isUpdateDisabled?: boolean;
+    /** disable all user role delete buttons */
+    isDeleteDisabled?: boolean;
+    /** Is the current user allowed to add, update, and delete user roles? */
+    canModify?: boolean;
+    /** Is the current user allowed to delete their own user role? */
+    canDeleteSelf?: boolean;
+    /** If multiple roles allowed, each role is displayed per user, otherwise a select dropdown is displayed. */
+    allowMultipleRoles?: boolean;
+    roles: string[];
+    /** (Optional) If provided, the last user role with the required role will be prevented from being removed. */
+    requiredRole?: string;
+    /** (Optional) Provide custom user-friendly names for displayed roles */
+    textForRole?: (role: string) => string;
+    /** The user role being updated */
+    userRoleToUpdate?: UserRole;
+    /** If a user role is being updated */
+    isUpdating: boolean;
+    /** Method to update a user role */
+    updateUserRole: (userRoleToUpdate: UserRole, newRole: string) => void;
+    /** The user role being removed */
+    userRoleToRemove?: UserRole;
+    /** If a user role is being removed */
+    isRemoving: boolean;
+    /** Method to remove a user role */
+    removeUserRole: (userRoleToRemove: UserRole) => void;
+}
+export declare const UserRolesContext: React.Context<UserRolesContextType>;

package/lib/components/UserRoles/Context.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserRolesContext = void 0;
+var react_1 = __importDefault(require("react"));
+/*
+ * Context provided to the children of UserRoles.  Default values should be initialized
+ * by the context provider.
+ */
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+exports.UserRolesContext = react_1.default.createContext(undefined);

package/lib/components/UserRoles/RoleCell.d.ts

@@ -1,21 +1,7 @@
-import React, { FunctionComponent } from 'react';
-import { BaseReduxState } from '../../types/BaseReduxState';
+import { FunctionComponent } from 'react';
 import { UserWithRoles } from '../../types/UserRole';
-export interface RoleCellOwnProps {
+export interface RoleCellProps {
     user: UserWithRoles;
-    readOnly?: boolean;
-    canModifySelf?: boolean;
-    textForRole?: (role: string) => string;
-    removeUserFromRole?: (user: UserWithRoles, role: string) => void;
-    roles: string[];
-    entityOwnerRole: string;
-}
-export interface RoleCellReduxProps {
-    currentUserId: string;
-}
-export interface RoleCellProps extends RoleCellOwnProps, RoleCellReduxProps {
+    requiredRoleCount?: number;
 }
 export declare const RoleCell: FunctionComponent<RoleCellProps>;
-export declare const mapStateToProps: (state: BaseReduxState) => RoleCellReduxProps;
-declare const _default: import("react-redux").ConnectedComponent<React.FunctionComponent<RoleCellProps>, Pick<RoleCellProps, "user" | "readOnly" | "textForRole" | "canModifySelf" | "removeUserFromRole" | "roles" | "entityOwnerRole">>;
-export default _default;

package/lib/components/UserRoles/RoleCell.js

@@ -1,34 +1,97 @@
 "use strict";
+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.RoleCell = void 0;
+exports.RoleCell = void 0;
 var core_1 = require("@material-ui/core");
 var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var react_redux_1 = require("react-redux");
 var userRole_1 = require("../../utils/userRole");
 var IconExternalUser_1 = require("../Icons/IconExternalUser");
+var Inline_1 = __importDefault(require("../RefreshIndicator/Inline"));
+var Context_1 = require("./Context");
+var Select_1 = require("./Select");
 var RoleCell = function (_a) {
-    var user = _a.user, currentUserId = _a.currentUserId, readOnly = _a.readOnly, canModifySelf = _a.canModifySelf, textForRole = _a.textForRole, removeUserFromRole = _a.removeUserFromRole, roles = _a.roles, entityOwnerRole = _a.entityOwnerRole;
+    var user = _a.user, requiredRoleCount = _a.requiredRoleCount;
+    var _b = react_1.useContext(Context_1.UserRolesContext), isUpdateDisabled = _b.isUpdateDisabled, isDeleteDisabled = _b.isDeleteDisabled, canModify = _b.canModify, canDeleteSelf = _b.canDeleteSelf, allowMultipleRoles = _b.allowMultipleRoles, roles = _b.roles, requiredRole = _b.requiredRole, textForRole = _b.textForRole, userRoleToUpdate = _b.userRoleToUpdate, isUpdating = _b.isUpdating, updateUserRole = _b.updateUserRole, userRoleToRemove = _b.userRoleToRemove, isRemoving = _b.isRemoving, removeUserRole = _b.removeUserRole;
+    var currentUserId = react_redux_1.useSelector(function (state) {
+        if (!state.models.user || !state.models.user.userInfo) {
+            throw new Error('Current user id is not stored in redux');
+        }
+        return state.models.user.userInfo.id;
+    });
     return (react_1.default.createElement("ul", { className: "mb0 list pa0 tr" }, user.roles.sort(userRole_1.sortByRole(roles)).map(function (userRole) {
         var roleText = userRole_1.getRoleText(textForRole)(userRole);
         var isUserRoleExternal = userRole_1.isExternal(userRole);
-        var popover = (react_1.default.createElement(react_bootstrap_1.Popover, { id: "is-external-popover-" + userRole.userId + "-" + userRole.role },
+        var userId = userRole_1.getUserId(userRole);
+        var canUpdate = 
+        // current user has modify access
+        canModify &&
+            // in single role mode (multiple roles are not allowed)
+            !allowMultipleRoles &&
+            // the userRole is not external (roster synced)
+            !isUserRoleExternal &&
+            // update is not disabled
+            !isUpdateDisabled &&
+            // there is more than one possible role
+            roles.length > 1 &&
+            // the user role is not the last remaining required role user
+            (!requiredRole || userRole.role !== requiredRole || !requiredRoleCount || requiredRoleCount > 1);
+        var canDelete = 
+        // the userRole is not external (roster synced)
+        !isUserRoleExternal &&
+            // delete is not disabled, e.g. course is ended
+            !isDeleteDisabled &&
+            // the role is not the last required role
+            (!requiredRole || userRole.role !== requiredRole || !requiredRoleCount || requiredRoleCount > 1) &&
+            // the current user can delete the role for another user, or the current user can delete themselves
+            ((canModify && user.id !== currentUserId) || (canDeleteSelf && user.id === currentUserId));
+        var shouldDisplayRightAligned = 
+        // in multiple role mode
+        allowMultipleRoles ||
+            // only one role option
+            roles.length === 1 ||
+            // no access to update
+            !canModify ||
+            // update is disabled
+            isUpdateDisabled;
+        var isExternalPopover = (react_1.default.createElement(react_bootstrap_1.Popover, { id: "is-external-popover-" + userId + "-" + userRole.role },
             react_1.default.createElement("h3", null, "Added via Roster Sync"),
             react_1.default.createElement("p", { className: "mb2" }, "This person was added automatically via roster sync and cannot be manually removed.")));
-        return (react_1.default.createElement("li", { key: user.id + "-" + roleText, className: "nowrap" },
-            react_1.default.createElement("span", null, roleText),
-            !isUserRoleExternal &&
-                !readOnly &&
-                (user.id !== currentUserId || canModifySelf || userRole.role !== entityOwnerRole) ? (react_1.default.createElement(core_1.IconButton, { className: "remove-user-button", "aria-label": "Remove " + roleText, onClick: function () {
-                    if (removeUserFromRole) {
-                        removeUserFromRole(user, userRole.role);
-                    }
-                } },
-                react_1.default.createElement(Delete_1.default, { color: "error" }))) : isUserRoleExternal ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "auto", trigger: ['click', 'hover', 'focus'], overlay: popover },
+        var isUserRoleUpdating = isUpdating && (userRoleToUpdate === null || userRoleToUpdate === void 0 ? void 0 : userRoleToUpdate.id) === userRole.id;
+        var isUserRoleRemoving = isRemoving && (userRoleToRemove === null || userRoleToRemove === void 0 ? void 0 : userRoleToRemove.id) === userRole.id;
+        return (react_1.default.createElement("li", { key: user.id + "-" + roleText, className: "nowrap flex items-center" + (shouldDisplayRightAligned ? ' justify-end' : '') },
+            isUserRoleUpdating ? (react_1.default.createElement("div", { className: "flex justify-start flex-grow-1 pl3" },
+                react_1.default.createElement(Inline_1.default, { size: 20 }))) : canUpdate ? (react_1.default.createElement(Select_1.RoleSelectControl, { options: roles, value: userRole.role, onChange: function (role) {
+                    updateUserRole(userRole, role);
+                }, textForRole: textForRole, disabled: isUpdating || isRemoving })) : (react_1.default.createElement("span", { className: shouldDisplayRightAligned ? '' : 'pl3' }, roleText)),
+            isUserRoleRemoving ? (react_1.default.createElement("div", { className: "flex items-center" },
+                react_1.default.createElement(Inline_1.default, { size: 20, className: "ma3" }))) : canDelete ? (react_1.default.createElement(core_1.IconButton, { className: "remove-user-button", "aria-label": "Remove " + roleText, onClick: function () {
+                    removeUserRole(userRole);
+                }, disabled: isUpdating || isRemoving },
+                react_1.default.createElement(Delete_1.default, { color: "error" }))) : isUserRoleExternal ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "auto", trigger: ['click', 'hover', 'focus'], overlay: isExternalPopover },
                 react_1.default.createElement(IconExternalUser_1.IconExternalUser, { tabIndex: 0, style: { margin: '12px', opacity: 0.5 }, className: "external-icon" }))) : (
             // dummy spacer to keep items aligned
             react_1.default.createElement("span", { style: {
@@ -41,13 +104,3 @@ var RoleCell = function (_a) {
     })));
 };
 exports.RoleCell = RoleCell;
-var mapStateToProps = function (state) {
-    if (!state.models.user || !state.models.user.userInfo) {
-        throw new Error('Current user id is not stored in redux');
-    }
-    return {
-        currentUserId: state.models.user.userInfo.id
-    };
-};
-exports.mapStateToProps = mapStateToProps;
-exports.default = react_redux_1.connect(exports.mapStateToProps)(exports.RoleCell);

package/lib/components/UserRoles/Select.d.ts

@@ -1,27 +1,26 @@
-import { ReactElement } from 'react';
+import { FunctionComponent, ReactElement } from 'react';
 import { OverlayInjectedProps } from 'react-bootstrap/Overlay';
-export interface RoleSelectProps {
+export interface RoleSelectControlProps {
+    /** CSS class passed to the selector FormControl component */
     className?: string;
+    /** Array of options the user can choose from */
     options: string[];
+    /** Currently selected value */
     value: string;
-    onChange: any;
+    /** Function that is called when the value changes */
+    onChange: (option: string) => void;
+    /** (Optional) Provide custom user-friendly names for displayed roles */
+    textForRole?: (role: string) => string;
+    /** (Optional) Is the control disabled? */
+    disabled?: boolean;
+}
+export declare const RoleSelectControl: FunctionComponent<RoleSelectControlProps>;
+export interface RoleSelectProps extends RoleSelectControlProps {
+    /** Id for the 'select' form control, defaults to 'RoleSelect' */
     controlId?: string;
+    /** Whether the label text should be visible */
     labelVisible?: boolean;
+    /** (Optional) Content of the popover tooltip */
     popoverContentComponent?: ReactElement<OverlayInjectedProps>;
-    textForRole?: (role: string) => string;
 }
-/**
- * Create a selector which will be properly labeled based on the number of options and provided content.
- *
- * @param {string} props.className - CSS class passed to the selector FormControl component
- * @param {string[]} props.options - Array of options the user can choose from
- * @param {string} props.value - Currently selected value
- * @param {function} props.onChange - Function that is called when the value changes
- * @param {string} props.controlId - Id for the selector
- * @param {boolean} props.labelVisible - Whether the label text should be visible
- * @param {ReactNode} props.popoverContentComponent - Content of the popover tooltip
- *
- * @returns {ReactElement} Selector and label component
- */
-declare const RoleSelect: (props: RoleSelectProps) => JSX.Element;
-export default RoleSelect;
+export declare const RoleSelect: FunctionComponent<RoleSelectProps>;

package/lib/components/UserRoles/Select.js

@@ -1,8 +1,31 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoleSelect = exports.RoleSelectControl = void 0;
 var Help_1 = __importDefault(require("@material-ui/icons/Help"));
 var react_1 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
@@ -18,27 +41,18 @@ var overlay = function (hasMultipleOptions, labelVisible, rolePopover) {
     if (labelVisible === void 0) { labelVisible = false; }
     return rolePopover ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", trigger: ['click', 'hover', 'focus'], overlay: rolePopover }, label(hasMultipleOptions, labelVisible, true))) : (label(hasMultipleOptions, labelVisible, false));
 };
-var selector = function (options, value, onChange, textForRole, className) {
-    return options.length > 1 ? (react_1.default.createElement(react_bootstrap_1.FormControl, { className: className ? className : '', "aria-label": "Role", as: "select", placeholder: "select", onChange: onChange, value: value }, options.map(function (role, i) { return (react_1.default.createElement("option", { value: role, key: role }, textForRole ? textForRole(role) : baseRole_1.textForBaseRole(role))); }))) : (react_1.default.createElement("div", null, textForRole ? textForRole(options[0]) : baseRole_1.textForBaseRole(options[0])));
+var RoleSelectControl = function (_a) {
+    var className = _a.className, options = _a.options, value = _a.value, onChange = _a.onChange, textForRole = _a.textForRole, disabled = _a.disabled;
+    return options.length > 1 ? (react_1.default.createElement(react_bootstrap_1.FormControl, { className: className ? className : '', "aria-label": "Role", as: "select", placeholder: "select", onChange: function (e) {
+            onChange(e.target.value);
+        }, value: value, disabled: disabled }, options.map(function (role, i) { return (react_1.default.createElement("option", { value: role, key: role }, textForRole ? textForRole(role) : baseRole_1.textForBaseRole(role))); }))) : (react_1.default.createElement("div", null, textForRole ? textForRole(options[0]) : baseRole_1.textForBaseRole(options[0])));
 };
-/**
- * Create a selector which will be properly labeled based on the number of options and provided content.
- *
- * @param {string} props.className - CSS class passed to the selector FormControl component
- * @param {string[]} props.options - Array of options the user can choose from
- * @param {string} props.value - Currently selected value
- * @param {function} props.onChange - Function that is called when the value changes
- * @param {string} props.controlId - Id for the selector
- * @param {boolean} props.labelVisible - Whether the label text should be visible
- * @param {ReactNode} props.popoverContentComponent - Content of the popover tooltip
- *
- * @returns {ReactElement} Selector and label component
- */
-var RoleSelect = function (props) {
-    var className = props.className, options = props.options, value = props.value, onChange = props.onChange, controlId = props.controlId, labelVisible = props.labelVisible, popoverContentComponent = props.popoverContentComponent, textForRole = props.textForRole;
+exports.RoleSelectControl = RoleSelectControl;
+var RoleSelect = function (_a) {
+    var controlId = _a.controlId, labelVisible = _a.labelVisible, popoverContentComponent = _a.popoverContentComponent, options = _a.options, controlProps = __rest(_a, ["controlId", "labelVisible", "popoverContentComponent", "options"]);
     var content = (react_1.default.createElement(react_1.default.Fragment, null,
         overlay(options.length > 1, !!labelVisible, popoverContentComponent),
-        selector(options, value, onChange, textForRole, className)));
+        react_1.default.createElement(exports.RoleSelectControl, __assign({ options: options }, controlProps))));
     return options.length > 1 ? (react_1.default.createElement(react_bootstrap_1.FormGroup, { controlId: controlId ? controlId : 'RoleSelect' }, content)) : (react_1.default.createElement("span", null, content));
 };
-exports.default = RoleSelect;
+exports.RoleSelect = RoleSelect;

package/lib/components/UserRoles/Table.d.ts

@@ -3,14 +3,5 @@ import { UserWithRoles } from '../../types';
 export interface UserRolesTableProps {
     id?: string;
     users: UserWithRoles[];
-    readOnly?: boolean;
-    canModifySelf?: boolean;
-    removeUserFromRole?: (user: UserWithRoles, role: string) => void;
-    textForRole?: (role: string) => string;
-    roles: string[];
-    /** The role for the owner of the entity, i.e. GroupOwner, RubricOwner, ProblemOwner etc.
-     ** The current user cannot be removed from an ownership role unless they are an admin.
-     **/
-    entityOwnerRole: string;
 }
 export declare const UserRolesTable: React.NamedExoticComponent<UserRolesTableProps>;

package/lib/components/UserRoles/Table.js

@@ -29,9 +29,11 @@ var react_table_1 = __importDefault(require("react-table"));
 var userRole_1 = require("../../utils/userRole");
 var RoleFilter_1 = require("../Tables/RoleFilter");
 var TextFilter_1 = require("../Tables/TextFilter");
-var RoleCell_1 = __importDefault(require("./RoleCell"));
+var Context_1 = require("./Context");
+var RoleCell_1 = require("./RoleCell");
 var UserRolesTableComponent = function (_a) {
-    var id = _a.id, users = _a.users, roles = _a.roles, readOnly = _a.readOnly, canModifySelf = _a.canModifySelf, textForRole = _a.textForRole, removeUserFromRole = _a.removeUserFromRole, entityOwnerRole = _a.entityOwnerRole;
+    var id = _a.id, users = _a.users;
+    var _b = react_1.useContext(Context_1.UserRolesContext), roles = _b.roles, requiredRole = _b.requiredRole, textForRole = _b.textForRole;
     var hasExternal = users.some(function (r) { return r.roles.some(function (r) { return userRole_1.isExternal(r); }); });
     var columns = [
         {
@@ -60,7 +62,9 @@ var UserRolesTableComponent = function (_a) {
             accessor: function (u) { return u; },
             Cell: function (cell) {
                 var user = cell.value;
-                return (react_1.default.createElement(RoleCell_1.default, { user: user, readOnly: readOnly, canModifySelf: canModifySelf, textForRole: textForRole, removeUserFromRole: removeUserFromRole, roles: roles, entityOwnerRole: entityOwnerRole }));
+                return (react_1.default.createElement(RoleCell_1.RoleCell, { user: user, requiredRoleCount: requiredRole
+                        ? users.filter(function (u) { return u.roles.some(function (r) { return r.role === requiredRole; }); }).length
+                        : undefined }));
             },
             filterMethod: RoleFilter_1.roleFilterMethod,
             Filter: RoleFilter_1.RoleFilter(roles, textForRole, hasExternal),
@@ -68,21 +72,27 @@ var UserRolesTableComponent = function (_a) {
             style: { padding: '4px' }
         });
     }
-    var _b = react_1.useState(users), usersState = _b[0], setUsersState = _b[1];
+    var _c = react_1.useState(users), usersState = _c[0], setUsersState = _c[1];
+    var _d = react_1.useState(), roleFilter = _d[0], setRoleFilter = _d[1];
     var onFilteredChange = function (newFiltering, column, value) {
+        var newRoleFilter = newFiltering.find(function (f) { return f.id === 'role'; });
+        setRoleFilter(newRoleFilter);
+    };
+    // update `usersState` when `users` or `roleFilter` changes
+    react_1.useEffect(function () {
+        var usersToDisplay = users;
         // when the role filter is set, only show the matching userRoles in the table
-        var roleFilter = newFiltering.find(function (f) { return f.id === 'role'; });
         if (roleFilter) {
-            setUsersState(users.map(function (u) {
+            usersToDisplay = users.map(function (u) {
                 var newUser = lodash_1.merge({}, u);
                 newUser.roles = u.roles.filter(function (r) { return RoleFilter_1.roleUserRoleFilterMethod(roleFilter, r); });
                 return newUser;
-            }));
+            });
         }
-        else if (!lodash_1.isEqual(users, usersState)) {
-            setUsersState(users);
+        if (!lodash_1.isEqual(usersToDisplay, usersState)) {
+            setUsersState(usersToDisplay);
         }
-    };
+    }, [users, roleFilter, usersState]);
     return (react_1.default.createElement("div", { id: id, className: "table-container" },
         react_1.default.createElement(react_table_1.default, { className: "-striped", columns: columns, data: usersState, resizable: false, filterable: true, onFilteredChange: onFilteredChange, defaultSorted: [
                 {
@@ -93,7 +103,7 @@ var UserRolesTableComponent = function (_a) {
                     id: 'firstName',
                     desc: false
                 }
-            ], defaultPageSize: Object.keys(usersState).length, showPagination: false })));
+            ], pageSize: Object.keys(usersState).length, showPagination: false })));
 };
 // similar to "shouldComponentUpdate", prevent unnecessary renders
-exports.UserRolesTable = react_1.default.memo(UserRolesTableComponent, function (prevProps, nextProps) { return !lodash_1.isEqual(prevProps, nextProps); });
+exports.UserRolesTable = react_1.default.memo(UserRolesTableComponent, function (prevProps, nextProps) { return lodash_1.isEqual(prevProps, nextProps); });