studiokit-scaffolding-js 4.8.0 → 4.9.0-alpha.2

package/lib/components/Groups/ExternalGroups/Attach.d.ts

@@ -0,0 +1,36 @@
+import { Dictionary } from 'lodash';
+import { Component } from 'react';
+import { ModelCollection } from 'studiokit-net-js';
+import { ExternalGroup, GroupUserRole, LtiLaunch, OwnerSchedule, UniTimeGroup, UserInfo } from '../../../types';
+export interface ExternalGroupsAttachProps {
+    userInfo: UserInfo;
+    canReadExternalGroups: boolean;
+    canConnectAnyExternalGroups: boolean;
+    canConnectOwnExternalGroups: boolean;
+    originalConnectedExternalGroups: Array<ExternalGroup | LtiLaunch>;
+    selectedExternalGroups: Array<ExternalGroup | LtiLaunch | UniTimeGroup>;
+    externalTermId: number;
+    handleSelectedExternalGroups: (externalGroups: Array<ExternalGroup | LtiLaunch | UniTimeGroup>) => void;
+    groupUserRoles: ModelCollection<GroupUserRole>;
+    disabled?: boolean;
+    disabledInfoMessage?: string | JSX.Element;
+}
+interface ExternalGroupsAttachState {
+    ownerSchedules?: Dictionary<OwnerSchedule>;
+    isUniTimeScheduleLoadingDone: boolean;
+    isShowingErrorAlert: boolean;
+}
+export declare class ExternalGroupsAttach extends Component<ExternalGroupsAttachProps, ExternalGroupsAttachState> {
+    constructor(props: ExternalGroupsAttachProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: Readonly<ExternalGroupsAttachProps>): void;
+    setOwnerSchedules: (groupUserRoles: GroupUserRole[], externalTermId: number, selectedExternalGroups: Array<ExternalGroup | LtiLaunch | UniTimeGroup>) => void;
+    handleSelectExternalGroups: (event: any) => void;
+    getOwnerUniTimeGroups: (ownerSchedule: OwnerSchedule, userId: string, externalTermId: number) => void;
+    setUserUniTimeGroups: (userId: string, externalGroups: UniTimeGroup[]) => void;
+    displayOwnerSchedules: (ownerSchedules: Dictionary<OwnerSchedule>) => (JSX.Element | undefined)[];
+    displayUniTimeGroups: (externalGroups: UniTimeGroup[]) => (JSX.Element | null)[];
+    render(): JSX.Element;
+}
+export {};

package/lib/components/Groups/ExternalGroups/Attach.js

@@ -0,0 +1,194 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalGroupsAttach = void 0;
+var lodash_1 = require("lodash");
+var react_1 = __importDefault(require("react"));
+var react_2 = require("react");
+var react_bootstrap_1 = require("react-bootstrap");
+var studiokit_net_js_1 = require("studiokit-net-js");
+var uuid_1 = require("uuid");
+var constants_1 = require("../../../constants");
+var actionCreator_1 = require("../../../redux/actionCreator");
+var model_1 = require("../../../utils/model");
+var shard_1 = require("../../../utils/shard");
+var user_1 = require("../../../utils/user");
+var AlertWithIcon_1 = __importDefault(require("../../AlertWithIcon"));
+var Loading_1 = __importDefault(require("../../Loading"));
+var ExternalGroupsAttach = /** @class */ (function (_super) {
+    __extends(ExternalGroupsAttach, _super);
+    function ExternalGroupsAttach(props) {
+        var _this = _super.call(this, props) || this;
+        _this.setOwnerSchedules = function (groupUserRoles, externalTermId, selectedExternalGroups) {
+            var _a = _this.props, canConnectAnyExternalGroups = _a.canConnectAnyExternalGroups, canConnectOwnExternalGroups = _a.canConnectOwnExternalGroups, userInfo = _a.userInfo;
+            var owners = groupUserRoles.filter(function (groupUserRole) {
+                return groupUserRole.role === constants_1.BASE_ROLE.GROUP_OWNER;
+            });
+            var ownersInitialScheduleData = {};
+            owners.forEach(function (owner) {
+                lodash_1.set(ownersInitialScheduleData, [owner.userId], {
+                    hookId: uuid_1.v4(),
+                    status: canConnectAnyExternalGroups || (userInfo.id === owner.id && canConnectOwnExternalGroups)
+                        ? constants_1.MODEL_STATUS.UNINITIALIZED
+                        : constants_1.MODEL_STATUS.READY,
+                    owner: owner,
+                    externalGroups: !(canConnectAnyExternalGroups ||
+                        (userInfo.id === owner.id && canConnectOwnExternalGroups))
+                        ? selectedExternalGroups.filter(function (seg) { return seg.userId === owner.id; })
+                        : undefined
+                });
+            });
+            _this.setState({
+                ownerSchedules: ownersInitialScheduleData,
+                isUniTimeScheduleLoadingDone: false
+            }, function () {
+                return lodash_1.forEach(ownersInitialScheduleData, function (ownerSchedule, userId) {
+                    return _this.getOwnerUniTimeGroups(ownerSchedule, userId, externalTermId);
+                });
+            });
+        };
+        _this.handleSelectExternalGroups = function (event) {
+            var externalId = event.target.value;
+            var checked = event.target.checked;
+            var _a = _this.props, originalConnectedExternalGroups = _a.originalConnectedExternalGroups, selectedExternalGroups = _a.selectedExternalGroups;
+            var allOwnerExternalGroups = lodash_1.map(_this.state.ownerSchedules, function (os) { return os.externalGroups; }).reduce(function (a, b) {
+                return a.concat(b);
+            });
+            var selectedExternalGroupsCopy = selectedExternalGroups.slice();
+            if (checked) {
+                var originalConnectedExternalGroup = originalConnectedExternalGroups.find(function (oeg) { return oeg.externalId === externalId; });
+                var selectedExternalGroup = originalConnectedExternalGroup
+                    ? originalConnectedExternalGroup
+                    : allOwnerExternalGroups === null || allOwnerExternalGroups === void 0 ? void 0 : allOwnerExternalGroups.find(function (ao) { return ao.externalId === externalId; });
+                if (selectedExternalGroup) {
+                    selectedExternalGroupsCopy.push(selectedExternalGroup);
+                }
+            }
+            else {
+                lodash_1.remove(selectedExternalGroupsCopy, function (seg) { return seg.externalId === externalId; });
+            }
+            _this.props.handleSelectedExternalGroups(selectedExternalGroupsCopy);
+        };
+        _this.getOwnerUniTimeGroups = function (ownerSchedule, userId, externalTermId) {
+            if (shard_1.isPurdueShard() && ownerSchedule.status === constants_1.MODEL_STATUS.UNINITIALIZED && !ownerSchedule.externalGroups) {
+                studiokit_net_js_1.hooks.registerNoStoreActionHook(ownerSchedule.hookId, function (data) {
+                    studiokit_net_js_1.hooks.unregisterNoStoreActionHook(ownerSchedule.hookId);
+                    if (data && data.errorData) {
+                        _this.setState({ isShowingErrorAlert: true, isUniTimeScheduleLoadingDone: true });
+                    }
+                    else {
+                        _this.setUserUniTimeGroups(userId, data.externalGroups);
+                    }
+                });
+                actionCreator_1.dispatchAction(studiokit_net_js_1.NET_ACTION.DATA_REQUESTED, {
+                    modelName: 'uniTimeInstructorSchedule',
+                    queryParams: {
+                        externalTermId: externalTermId,
+                        userId: userId
+                    },
+                    noStore: true,
+                    guid: ownerSchedule.hookId
+                });
+            }
+        };
+        _this.setUserUniTimeGroups = function (userId, externalGroups) {
+            // Setting the user's course sections load status to be ready
+            var ownerSchedules = _this.state.ownerSchedules || {};
+            ownerSchedules[userId].status = constants_1.MODEL_STATUS.READY;
+            ownerSchedules[userId].externalGroups = externalGroups;
+            var isUniTimeScheduleLoadingDone = lodash_1.every(ownerSchedules, function (os) { return os.status === constants_1.MODEL_STATUS.READY; });
+            _this.setState({
+                ownerSchedules: ownerSchedules,
+                isUniTimeScheduleLoadingDone: isUniTimeScheduleLoadingDone
+            });
+        };
+        _this.displayOwnerSchedules = function (ownerSchedules) {
+            return lodash_1.map(ownerSchedules, function (os) {
+                if (!!os.externalGroups && os.externalGroups.length > 0) {
+                    return (react_1.default.createElement("div", { key: os.hookId },
+                        react_1.default.createElement("h4", null, user_1.displayName(os.owner)),
+                        _this.displayUniTimeGroups(os.externalGroups)));
+                }
+            });
+        };
+        _this.displayUniTimeGroups = function (externalGroups) {
+            var _a = _this.props, selectedExternalGroups = _a.selectedExternalGroups, canConnectAnyExternalGroups = _a.canConnectAnyExternalGroups, canConnectOwnExternalGroups = _a.canConnectOwnExternalGroups, userInfo = _a.userInfo, disabled = _a.disabled;
+            return lodash_1.orderBy(externalGroups, ['description']).map(function (eg, index) {
+                var isConnected = selectedExternalGroups.some(function (seg) {
+                    return seg.externalId === eg.externalId &&
+                        seg.externalProviderId === eg.externalProviderId &&
+                        seg.userId === eg.userId;
+                });
+                if (canConnectAnyExternalGroups ||
+                    (userInfo.id === eg.userId && canConnectOwnExternalGroups) ||
+                    isConnected) {
+                    return (react_1.default.createElement(react_bootstrap_1.FormCheck, { id: "external-group-" + eg.id, type: "checkbox", key: index, onChange: _this.handleSelectExternalGroups, value: eg.externalId, checked: isConnected, disabled: (userInfo.id !== eg.userId && !canConnectAnyExternalGroups) || disabled, label: eg.name + " " + (eg.description ? "(" + eg.description + ")" : '') }));
+                }
+                return null;
+            });
+        };
+        _this.state = {
+            ownerSchedules: undefined,
+            isUniTimeScheduleLoadingDone: false,
+            isShowingErrorAlert: false
+        };
+        return _this;
+    }
+    ExternalGroupsAttach.prototype.componentDidMount = function () {
+        var _a = this.props, groupUserRoles = _a.groupUserRoles, externalTermId = _a.externalTermId, selectedExternalGroups = _a.selectedExternalGroups;
+        this.setOwnerSchedules(model_1.getModelArray(groupUserRoles), externalTermId, selectedExternalGroups);
+    };
+    ExternalGroupsAttach.prototype.componentWillUnmount = function () {
+        var ownerSchedules = this.state.ownerSchedules;
+        lodash_1.forEach(ownerSchedules, function (os) { return studiokit_net_js_1.hooks.unregisterNoStoreActionHook(os.hookId); });
+    };
+    ExternalGroupsAttach.prototype.componentDidUpdate = function (prevProps) {
+        var prevExternalTermId = prevProps.externalTermId, prevGroupUserRoles = prevProps.groupUserRoles;
+        var _a = this.props, externalTermId = _a.externalTermId, groupUserRoles = _a.groupUserRoles, selectedExternalGroups = _a.selectedExternalGroups;
+        // Assumes group user roles are changing one at a time. Can be made fancier if the need arises
+        if (!!prevGroupUserRoles &&
+            !!groupUserRoles &&
+            (prevExternalTermId !== externalTermId ||
+                Object.keys(prevGroupUserRoles).length !== Object.keys(groupUserRoles).length)) {
+            this.setOwnerSchedules(model_1.getModelArray(groupUserRoles), externalTermId, selectedExternalGroups);
+        }
+    };
+    ExternalGroupsAttach.prototype.render = function () {
+        var _this = this;
+        var disabledInfoMessage = this.props.disabledInfoMessage;
+        var _a = this.state, ownerSchedules = _a.ownerSchedules, isUniTimeScheduleLoadingDone = _a.isUniTimeScheduleLoadingDone, isShowingErrorAlert = _a.isShowingErrorAlert;
+        var hasAnyExternalGroups = lodash_1.some(ownerSchedules, function (os) { return !!os.externalGroups && os.externalGroups.length > 0; });
+        return (react_1.default.createElement("div", null,
+            !isUniTimeScheduleLoadingDone && react_1.default.createElement(Loading_1.default, null),
+            isUniTimeScheduleLoadingDone && (react_1.default.createElement("div", null,
+                !hasAnyExternalGroups && (react_1.default.createElement(AlertWithIcon_1.default, { variant: "info" },
+                    react_1.default.createElement("p", null, "No course sections eligible for roster sync."))),
+                !!disabledInfoMessage && hasAnyExternalGroups && (react_1.default.createElement(AlertWithIcon_1.default, { variant: "info" },
+                    react_1.default.createElement("p", null, disabledInfoMessage))),
+                isShowingErrorAlert && (react_1.default.createElement(AlertWithIcon_1.default, { variant: "warning", onClose: function () {
+                        return _this.setState({
+                            isShowingErrorAlert: false
+                        });
+                    } },
+                    react_1.default.createElement("p", { className: "ma0" }, "Oops! Something went wrong while loading. Please try again."))),
+                ' ',
+                hasAnyExternalGroups && !!ownerSchedules && (react_1.default.createElement(react_bootstrap_1.FormGroup, { className: "ml4 f6" }, this.displayOwnerSchedules(ownerSchedules)))))));
+    };
+    return ExternalGroupsAttach;
+}(react_2.Component));
+exports.ExternalGroupsAttach = ExternalGroupsAttach;

package/lib/components/Groups/ExternalGroups/Table.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, TableHTMLAttributes } from 'react';
+import { ModelCollection } from 'studiokit-net-js';
+import { ExternalGroup, Group, GroupUserRole, LtiLaunch, UniTimeGroup } from '../../../types';
+export interface ExternalGroupsTableProps extends TableHTMLAttributes<Element> {
+    group: Partial<Group>;
+    externalGroups: Array<ExternalGroup | LtiLaunch | UniTimeGroup>;
+    hasGradePushEnabled: boolean;
+    hasAnyLtiExternalGroup: boolean;
+    canEditExternalGroups: boolean;
+    groupUserRoles?: ModelCollection<GroupUserRole>;
+    updateExternalGroup: (externalGroup: ExternalGroup | LtiLaunch | UniTimeGroup) => void;
+}
+export declare const ExternalGroupsTable: FunctionComponent<ExternalGroupsTableProps>;

package/lib/components/Groups/ExternalGroups/Table.js

@@ -0,0 +1,83 @@
+"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.ExternalGroupsTable = void 0;
+var ToggleButton_1 = __importDefault(require("@material-ui/lab/ToggleButton"));
+var ToggleButtonGroup_1 = __importDefault(require("@material-ui/lab/ToggleButtonGroup"));
+var lodash_1 = require("lodash");
+var react_1 = __importDefault(require("react"));
+var react_super_responsive_table_1 = require("react-super-responsive-table");
+var constants_1 = require("../../../constants");
+var model_1 = require("../../../utils/model");
+var user_1 = require("../../../utils/user");
+var shouldShowAutoGradePushColumn = function (hasAnyLtiExternalGroup, group, hasGradePushEnabled) { return (hasAnyLtiExternalGroup && lodash_1.isEmpty(group)) || hasGradePushEnabled; };
+var renderTableHeaderRow = function (hasAnyLtiExternalGroup, group, hasGradePushEnabled) {
+    var headerCells = ['Course Name', 'Course Description', 'Instructor'];
+    if (shouldShowAutoGradePushColumn(hasAnyLtiExternalGroup, group, hasGradePushEnabled)) {
+        headerCells.push('Grade Push');
+    }
+    return (react_1.default.createElement(react_super_responsive_table_1.Tr, null, headerCells.map(function (value, i) { return (react_1.default.createElement(react_super_responsive_table_1.Th, { key: i }, value)); })));
+};
+var renderTableBodyRow = function (key, externalGroup, owner, hasGradePushEnabled, hasAnyLtiExternalGroup, canEditExternalGroups, group, updateExternalGroup) {
+    var cells = [
+        externalGroup.name,
+        react_1.default.createElement("span", { style: { overflowWrap: 'anywhere' } }, externalGroup.description),
+        owner ? "" + user_1.displayName(owner) : ''
+    ];
+    // brand new LTI group or editing a group that has grade push enabled
+    if (shouldShowAutoGradePushColumn(hasAnyLtiExternalGroup, group, hasGradePushEnabled)) {
+        if (canEditExternalGroups) {
+            cells.push(react_1.default.createElement(ToggleButtonGroup_1.default, { value: externalGroup.isAutoGradePushEnabled, exclusive: true, onChange: function (_, newValue) {
+                    // do not allow "turning off" any of the selections
+                    if (newValue === null)
+                        return;
+                    updateExternalGroup(__assign(__assign({}, externalGroup), { isAutoGradePushEnabled: newValue }));
+                }, "aria-label": "auto grade push" },
+                react_1.default.createElement(ToggleButton_1.default, { value: true }, "Automatic"),
+                react_1.default.createElement(ToggleButton_1.default, { value: false }, "Manual")));
+        }
+        else {
+            cells.push(externalGroup.isAutoGradePushEnabled ? 'Automatic' : 'Manual');
+        }
+    }
+    return (react_1.default.createElement(react_super_responsive_table_1.Tr, { key: key }, cells.map(function (value, i) { return (react_1.default.createElement(react_super_responsive_table_1.Td, { key: i }, value)); })));
+};
+var ExternalGroupsTable = function (_a) {
+    var group = _a.group, externalGroups = _a.externalGroups, hasGradePushEnabled = _a.hasGradePushEnabled, hasAnyLtiExternalGroup = _a.hasAnyLtiExternalGroup, canEditExternalGroups = _a.canEditExternalGroups, groupUserRoles = _a.groupUserRoles, updateExternalGroup = _a.updateExternalGroup, other = __rest(_a, ["group", "externalGroups", "hasGradePushEnabled", "hasAnyLtiExternalGroup", "canEditExternalGroups", "groupUserRoles", "updateExternalGroup"]) // for passing aria-describedby to tables
+    ;
+    return (react_1.default.createElement("div", { className: "table-container" },
+        react_1.default.createElement(react_super_responsive_table_1.Table, __assign({}, other, { className: "w-100 mb4" }),
+            react_1.default.createElement(react_super_responsive_table_1.Thead, null, renderTableHeaderRow(hasAnyLtiExternalGroup, group, hasGradePushEnabled)),
+            react_1.default.createElement(react_super_responsive_table_1.Tbody, null, externalGroups.map(function (externalGroup, i) {
+                var _a;
+                var owner = lodash_1.isEmpty(group) && !!groupUserRoles
+                    ? model_1.getModelArray(groupUserRoles).find(function (gur) { return gur.userId === externalGroup.userId && gur.role === constants_1.BASE_ROLE.GROUP_OWNER; })
+                    : (_a = group.owners) === null || _a === void 0 ? void 0 : _a.find(function (o) { return o.id === externalGroup.userId; });
+                return renderTableBodyRow(i, externalGroup, owner, hasGradePushEnabled, hasAnyLtiExternalGroup, canEditExternalGroups, group, updateExternalGroup);
+            })))));
+};
+exports.ExternalGroupsTable = ExternalGroupsTable;

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

@@ -9,6 +9,8 @@ export interface UserRolesReduxProps {
     canDeleteSelf?: boolean;
 }
 export interface UserRolesOwnProps extends CollectionComponentWrappedProps<UserRole> {
+    /** Should the component prevent modifications, independent of permissions? */
+    readOnly?: boolean;
     /** Is the current user allowed to delete their own user role? Overrides the value from redux. */
     canDeleteSelf?: boolean;
     /** If multiple roles allowed, each role is displayed per user, otherwise a select dropdown is displayed. */
@@ -104,5 +106,5 @@ export declare class UserRoles extends Component<UserRolesProps, UserRolesState>
     render(): JSX.Element;
 }
 export declare const mapStateToProps: (state: BaseReduxState, ownProps: UserRolesOwnProps) => UserRolesReduxProps;
-declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "externalProviders" | "model" | "ref" | "key" | "guid" | "load" | "modelName" | "pathParams" | "modelStatus" | "queryParams" | "disableAutoLoad" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "entityName" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "singularArticleForRole"> & UserRolesOwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "externalProviders" | "model" | "ref" | "key" | "readOnly" | "guid" | "load" | "modelName" | "pathParams" | "modelStatus" | "queryParams" | "disableAutoLoad" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "entityName" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "singularArticleForRole"> & UserRolesOwnProps>;
 export default _default;

package/lib/components/UserRoles/index.js

@@ -390,12 +390,13 @@ var UserRoles = /** @class */ (function (_super) {
     //#endregion Remove User
     UserRoles.prototype.render = function () {
         var _this = this;
-        var _a = this.props, modelStatus = _a.modelStatus, canModify = _a.canModify, canDeleteSelf = _a.canDeleteSelf, allowMultipleRoles = _a.allowMultipleRoles, isAddDisabled = _a.isAddDisabled, isUpdateDisabled = _a.isUpdateDisabled, isDeleteDisabled = _a.isDeleteDisabled, defaultRole = _a.defaultRole, requiredRole = _a.requiredRole, roleDescriptions = _a.roleDescriptions, addRoleExcludeList = _a.addRoleExcludeList, entityName = _a.entityName, renderTableDescription = _a.renderTableDescription, renderAddDescription = _a.renderAddDescription;
+        var _a = this.props, modelStatus = _a.modelStatus, canModify = _a.canModify, readOnly = _a.readOnly, canDeleteSelf = _a.canDeleteSelf, allowMultipleRoles = _a.allowMultipleRoles, isAddDisabled = _a.isAddDisabled, isUpdateDisabled = _a.isUpdateDisabled, isDeleteDisabled = _a.isDeleteDisabled, defaultRole = _a.defaultRole, requiredRole = _a.requiredRole, roleDescriptions = _a.roleDescriptions, addRoleExcludeList = _a.addRoleExcludeList, entityName = _a.entityName, renderTableDescription = _a.renderTableDescription, renderAddDescription = _a.renderAddDescription;
         var _b = this.state, sortedUsers = _b.sortedUsers, isAdding = _b.isAdding, isUpdating = _b.isUpdating, isRemoving = _b.isRemoving, shouldResetAddForm = _b.shouldResetAddForm, shouldShowRemoveDialog = _b.shouldShowRemoveDialog, userRoleToUpdate = _b.userRoleToUpdate, userRoleToRemove = _b.userRoleToRemove, successMessage = _b.successMessage, existingMessage = _b.existingMessage, blockedMessage = _b.blockedMessage, failMessage = _b.failMessage;
         var addableRoleDescriptions = addRoleExcludeList
             ? lodash_1.pickBy(roleDescriptions, function (_, key) { return !addRoleExcludeList.includes(key); })
             : roleDescriptions;
         var roles = Object.keys(roleDescriptions);
+        var shouldRenderAsMutable = !readOnly && canModify;
         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({
@@ -421,13 +422,13 @@ var UserRoles = /** @class */ (function (_super) {
                     });
                 } },
                 react_1.default.createElement("p", { className: "pre-wrap" }, failMessage))),
-            canModify && (react_1.default.createElement(Add_1.default, { id: "entityUserRolesAdd", disabled: isAddDisabled, entityName: entityName, defaultRole: defaultRole, roleDescriptions: addableRoleDescriptions, renderAddDescription: renderAddDescription, textForRole: this.textForRole, isAddingUsersToRole: isAdding, shouldReset: shouldResetAddForm, addUserRoles: this.addUserRoles })),
-            !!renderTableDescription && renderTableDescription(canModify),
+            shouldRenderAsMutable && (react_1.default.createElement(Add_1.default, { id: "entityUserRolesAdd", disabled: isAddDisabled, entityName: entityName, defaultRole: defaultRole, roleDescriptions: addableRoleDescriptions, renderAddDescription: renderAddDescription, textForRole: this.textForRole, isAddingUsersToRole: isAdding, shouldReset: shouldResetAddForm, addUserRoles: this.addUserRoles })),
+            !!renderTableDescription && renderTableDescription(shouldRenderAsMutable),
             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(Context_1.UserRolesContext.Provider, { value: {
-                        isUpdateDisabled: isUpdateDisabled,
-                        isDeleteDisabled: isDeleteDisabled,
-                        canModify: canModify,
+                        isUpdateDisabled: isUpdateDisabled || readOnly,
+                        isDeleteDisabled: isDeleteDisabled || readOnly,
+                        canModify: shouldRenderAsMutable,
                         canDeleteSelf: canDeleteSelf,
                         allowMultipleRoles: allowMultipleRoles,
                         roles: roles,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "4.8.0",
+	"version": "4.9.0-alpha.2",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -97,6 +97,7 @@
 	"dependencies": {
 		"@material-ui/core": "^4.11.3",
 		"@material-ui/icons": "^4.11.2",
+		"@material-ui/lab": "^4.0.0-alpha.57",
 		"@microsoft/applicationinsights-web": "^2.5.11",
 		"@redux-saga/types": "^1.1.0",
 		"@sentry/react": "^7.38.0",
@@ -140,6 +141,7 @@
 		"react-router": "^5.2.0",
 		"react-router-bootstrap": "^0.25.0",
 		"react-router-dom": "^5.2.0",
+		"react-super-responsive-table": "^5.2.0",
 		"react-table": "^6.11.5",
 		"redux": "^4.0.5",
 		"redux-devtools-extension": "^2.13.8",