studiokit-scaffolding-js 4.3.20 → 4.3.21

package/lib/components/AlertWithIcon.js

@@ -1,57 +1,57 @@
-"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 });
-var CheckCircle_1 = __importDefault(require("@material-ui/icons/CheckCircle"));
-var Error_1 = __importDefault(require("@material-ui/icons/Error"));
-var Info_1 = __importDefault(require("@material-ui/icons/Info"));
-var Warning_1 = __importDefault(require("@material-ui/icons/Warning"));
-var react_1 = __importDefault(require("react"));
-var react_bootstrap_1 = require("react-bootstrap");
-function getIconForVariant(variant, iconClassName) {
-    var combinedIconClassName = "self-start mr2 " + (iconClassName ? " " + iconClassName : '');
-    switch (variant) {
-        case 'success':
-            return react_1.default.createElement(CheckCircle_1.default, { className: combinedIconClassName });
-        case 'info':
-            return react_1.default.createElement(Info_1.default, { className: combinedIconClassName });
-        case 'warning':
-            return react_1.default.createElement(Warning_1.default, { className: combinedIconClassName });
-        case 'danger':
-            return react_1.default.createElement(Error_1.default, { className: combinedIconClassName });
-        default:
-            return null;
-    }
-}
-var AlertWithIcon = function (props) {
-    var iconClassName = props.iconClassName, className = props.className, children = props.children, variant = props.variant, otherProps = __rest(props, ["iconClassName", "className", "children", "variant"]);
-    var combinedClassName = "alert-with-icon" + (className ? " " + className : '');
-    var Icon = getIconForVariant(variant, iconClassName);
-    return (react_1.default.createElement(react_bootstrap_1.Alert, __assign({ className: combinedClassName, variant: variant }, otherProps),
-        Icon,
-        props.children));
-};
-exports.default = AlertWithIcon;
+"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 });
+var CheckCircle_1 = __importDefault(require("@material-ui/icons/CheckCircle"));
+var Error_1 = __importDefault(require("@material-ui/icons/Error"));
+var Info_1 = __importDefault(require("@material-ui/icons/Info"));
+var Warning_1 = __importDefault(require("@material-ui/icons/Warning"));
+var react_1 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+function getIconForVariant(variant, iconClassName) {
+    var combinedIconClassName = "self-start mr2 " + (iconClassName ? " " + iconClassName : '');
+    switch (variant) {
+        case 'success':
+            return react_1.default.createElement(CheckCircle_1.default, { className: combinedIconClassName });
+        case 'info':
+            return react_1.default.createElement(Info_1.default, { className: combinedIconClassName });
+        case 'warning':
+            return react_1.default.createElement(Warning_1.default, { className: combinedIconClassName });
+        case 'danger':
+            return react_1.default.createElement(Error_1.default, { className: combinedIconClassName });
+        default:
+            return null;
+    }
+}
+var AlertWithIcon = function (props) {
+    var iconClassName = props.iconClassName, className = props.className, children = props.children, variant = props.variant, otherProps = __rest(props, ["iconClassName", "className", "children", "variant"]);
+    var combinedClassName = "alert-with-icon" + (className ? " " + className : '');
+    var Icon = getIconForVariant(variant, iconClassName);
+    return (react_1.default.createElement(react_bootstrap_1.Alert, __assign({ className: combinedClassName, variant: variant }, otherProps),
+        Icon,
+        props.children));
+};
+exports.default = AlertWithIcon;

package/lib/components/Blots/CustomImageSpec.d.ts

@@ -1,14 +1,14 @@
-import { DeleteAction, ImageSpec, ResizeAction } from 'quill-blot-formatter';
-/**
- * This is a custom Spec for the Blot Formatter.
- * https://github.com/Fandom-OSS/quill-blot-formatter
- * Uses the default actions, align, resize, and delete
- * Additionally, the overlay is repositioned correctly after scroll or resize events.
- * Unfortunately the alignment formatting is not supported by quill/react quill.
- */
-declare class CustomImageSpec extends ImageSpec {
-    init(): void;
-    getActions(): (typeof ResizeAction | typeof DeleteAction)[];
-    reposition: (e: any) => void;
-}
-export default CustomImageSpec;
+import { DeleteAction, ImageSpec, ResizeAction } from 'quill-blot-formatter';
+/**
+ * This is a custom Spec for the Blot Formatter.
+ * https://github.com/Fandom-OSS/quill-blot-formatter
+ * Uses the default actions, align, resize, and delete
+ * Additionally, the overlay is repositioned correctly after scroll or resize events.
+ * Unfortunately the alignment formatting is not supported by quill/react quill.
+ */
+declare class CustomImageSpec extends ImageSpec {
+    init(): void;
+    getActions(): (typeof ResizeAction | typeof DeleteAction)[];
+    reposition: (e: any) => void;
+}
+export default CustomImageSpec;

package/lib/components/Blots/CustomImageSpec.js

@@ -1,45 +1,45 @@
-"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 __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var quill_blot_formatter_1 = require("quill-blot-formatter");
-/**
- * This is a custom Spec for the Blot Formatter.
- * https://github.com/Fandom-OSS/quill-blot-formatter
- * Uses the default actions, align, resize, and delete
- * Additionally, the overlay is repositioned correctly after scroll or resize events.
- * Unfortunately the alignment formatting is not supported by quill/react quill.
- */
-var CustomImageSpec = /** @class */ (function (_super) {
-    __extends(CustomImageSpec, _super);
-    function CustomImageSpec() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.reposition = function (e) {
-            if (_this.img) {
-                _this.formatter.repositionOverlay();
-            }
-        };
-        return _this;
-    }
-    CustomImageSpec.prototype.init = function () {
-        _super.prototype.init.call(this);
-        this.formatter.quill.root.addEventListener('scroll', this.reposition);
-        window.addEventListener('resize', this.reposition);
-    };
-    CustomImageSpec.prototype.getActions = function () {
-        return [quill_blot_formatter_1.ResizeAction, quill_blot_formatter_1.DeleteAction];
-    };
-    return CustomImageSpec;
-}(quill_blot_formatter_1.ImageSpec));
-exports.default = CustomImageSpec;
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var quill_blot_formatter_1 = require("quill-blot-formatter");
+/**
+ * This is a custom Spec for the Blot Formatter.
+ * https://github.com/Fandom-OSS/quill-blot-formatter
+ * Uses the default actions, align, resize, and delete
+ * Additionally, the overlay is repositioned correctly after scroll or resize events.
+ * Unfortunately the alignment formatting is not supported by quill/react quill.
+ */
+var CustomImageSpec = /** @class */ (function (_super) {
+    __extends(CustomImageSpec, _super);
+    function CustomImageSpec() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.reposition = function (e) {
+            if (_this.img) {
+                _this.formatter.repositionOverlay();
+            }
+        };
+        return _this;
+    }
+    CustomImageSpec.prototype.init = function () {
+        _super.prototype.init.call(this);
+        this.formatter.quill.root.addEventListener('scroll', this.reposition);
+        window.addEventListener('resize', this.reposition);
+    };
+    CustomImageSpec.prototype.getActions = function () {
+        return [quill_blot_formatter_1.ResizeAction, quill_blot_formatter_1.DeleteAction];
+    };
+    return CustomImageSpec;
+}(quill_blot_formatter_1.ImageSpec));
+exports.default = CustomImageSpec;

package/lib/components/Blots/CustomVideoSpec.d.ts

@@ -1,16 +1,16 @@
-import { DeleteAction, IframeVideoSpec, ResizeAction } from 'quill-blot-formatter';
-/**
- * This is a custom Spec for the Blot Formatter.
- * https://github.com/Fandom-OSS/quill-blot-formatter
- * Uses the default actions, align, resize, and delete
- * Additionally, the overlay is repositioned correctly after scroll or resize events.
- * Unfortunately the alignment formatting is not supported by quill/react quill.
- * Also this class uses an 'imageProxy' which will prevent the embedded
- * video from being played in editing mode
- */
-declare class CustomVideoSpec extends IframeVideoSpec {
-    init(): void;
-    getActions(): (typeof ResizeAction | typeof DeleteAction)[];
-    reposition: (e: any) => void;
-}
-export default CustomVideoSpec;
+import { DeleteAction, IframeVideoSpec, ResizeAction } from 'quill-blot-formatter';
+/**
+ * This is a custom Spec for the Blot Formatter.
+ * https://github.com/Fandom-OSS/quill-blot-formatter
+ * Uses the default actions, align, resize, and delete
+ * Additionally, the overlay is repositioned correctly after scroll or resize events.
+ * Unfortunately the alignment formatting is not supported by quill/react quill.
+ * Also this class uses an 'imageProxy' which will prevent the embedded
+ * video from being played in editing mode
+ */
+declare class CustomVideoSpec extends IframeVideoSpec {
+    init(): void;
+    getActions(): (typeof ResizeAction | typeof DeleteAction)[];
+    reposition: (e: any) => void;
+}
+export default CustomVideoSpec;

package/lib/components/Blots/CustomVideoSpec.js

@@ -1,47 +1,47 @@
-"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 __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var quill_blot_formatter_1 = require("quill-blot-formatter");
-/**
- * This is a custom Spec for the Blot Formatter.
- * https://github.com/Fandom-OSS/quill-blot-formatter
- * Uses the default actions, align, resize, and delete
- * Additionally, the overlay is repositioned correctly after scroll or resize events.
- * Unfortunately the alignment formatting is not supported by quill/react quill.
- * Also this class uses an 'imageProxy' which will prevent the embedded
- * video from being played in editing mode
- */
-var CustomVideoSpec = /** @class */ (function (_super) {
-    __extends(CustomVideoSpec, _super);
-    function CustomVideoSpec() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.reposition = function (e) {
-            if (_this.proxyImage) {
-                _this.formatter.repositionOverlay();
-            }
-        };
-        return _this;
-    }
-    CustomVideoSpec.prototype.init = function () {
-        _super.prototype.init.call(this);
-        this.formatter.quill.root.addEventListener('scroll', this.reposition);
-        window.addEventListener('resize', this.reposition);
-    };
-    CustomVideoSpec.prototype.getActions = function () {
-        return [quill_blot_formatter_1.ResizeAction, quill_blot_formatter_1.DeleteAction];
-    };
-    return CustomVideoSpec;
-}(quill_blot_formatter_1.IframeVideoSpec));
-exports.default = CustomVideoSpec;
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var quill_blot_formatter_1 = require("quill-blot-formatter");
+/**
+ * This is a custom Spec for the Blot Formatter.
+ * https://github.com/Fandom-OSS/quill-blot-formatter
+ * Uses the default actions, align, resize, and delete
+ * Additionally, the overlay is repositioned correctly after scroll or resize events.
+ * Unfortunately the alignment formatting is not supported by quill/react quill.
+ * Also this class uses an 'imageProxy' which will prevent the embedded
+ * video from being played in editing mode
+ */
+var CustomVideoSpec = /** @class */ (function (_super) {
+    __extends(CustomVideoSpec, _super);
+    function CustomVideoSpec() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.reposition = function (e) {
+            if (_this.proxyImage) {
+                _this.formatter.repositionOverlay();
+            }
+        };
+        return _this;
+    }
+    CustomVideoSpec.prototype.init = function () {
+        _super.prototype.init.call(this);
+        this.formatter.quill.root.addEventListener('scroll', this.reposition);
+        window.addEventListener('resize', this.reposition);
+    };
+    CustomVideoSpec.prototype.getActions = function () {
+        return [quill_blot_formatter_1.ResizeAction, quill_blot_formatter_1.DeleteAction];
+    };
+    return CustomVideoSpec;
+}(quill_blot_formatter_1.IframeVideoSpec));
+exports.default = CustomVideoSpec;

package/lib/components/ConnectedModal.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-declare const _default: import("react").ComponentClass<import("react-bootstrap/esm/helpers").ReplaceProps<import("react").ElementType<any>, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap").ModalProps>, any>;
-/**
- * Wrapped version of "react-bootstrap"'s `Modal` component. Uses `ConnectedModalComponent` to coordinate modal state in redux.
- */
-export default _default;
+/// <reference types="react" />
+declare const _default: import("react").ComponentClass<import("react-bootstrap/esm/helpers").ReplaceProps<import("react").ElementType<any>, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap").ModalProps>, any>;
+/**
+ * Wrapped version of "react-bootstrap"'s `Modal` component. Uses `ConnectedModalComponent` to coordinate modal state in redux.
+ */
+export default _default;

package/lib/components/ConnectedModal.js

@@ -1,11 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_bootstrap_1 = require("react-bootstrap");
-var ConnectedModalComponent_1 = __importDefault(require("./HOC/ConnectedModalComponent"));
-/**
- * Wrapped version of "react-bootstrap"'s `Modal` component. Uses `ConnectedModalComponent` to coordinate modal state in redux.
- */
-exports.default = ConnectedModalComponent_1.default(react_bootstrap_1.Modal);
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_bootstrap_1 = require("react-bootstrap");
+var ConnectedModalComponent_1 = __importDefault(require("./HOC/ConnectedModalComponent"));
+/**
+ * Wrapped version of "react-bootstrap"'s `Modal` component. Uses `ConnectedModalComponent` to coordinate modal state in redux.
+ */
+exports.default = ConnectedModalComponent_1.default(react_bootstrap_1.Modal);

package/lib/components/Dropdowns/GroupsDropdown.d.ts

@@ -1,18 +1,18 @@
-import React, { Component } from 'react';
-import { ModelCollection } from 'studiokit-net-js';
-import { ExternalTerm, Group } from '../../types';
-interface Props {
-    title: string;
-    id: string;
-    groups: ModelCollection<Group>;
-    anyRoleButLearner?: boolean;
-    externalTerms: ModelCollection<ExternalTerm>;
-}
-declare class GroupsDropdown extends Component<Props> {
-    loadGroups: () => void;
-    didToggle: (isOpen: boolean) => void;
-    renderGroupMenu: (groups: Group[]) => JSX.Element[] | null;
-    render(): JSX.Element | null;
-}
-declare const _default: import("react-redux").ConnectedComponent<typeof GroupsDropdown, Pick<React.ClassAttributes<GroupsDropdown> & Props, "id" | "title" | "ref" | "key" | "anyRoleButLearner">>;
-export default _default;
+import React, { Component } from 'react';
+import { ModelCollection } from 'studiokit-net-js';
+import { ExternalTerm, Group } from '../../types';
+interface Props {
+    title: string;
+    id: string;
+    groups: ModelCollection<Group>;
+    anyRoleButLearner?: boolean;
+    externalTerms: ModelCollection<ExternalTerm>;
+}
+declare class GroupsDropdown extends Component<Props> {
+    loadGroups: () => void;
+    didToggle: (isOpen: boolean) => void;
+    renderGroupMenu: (groups: Group[]) => JSX.Element[] | null;
+    render(): JSX.Element | null;
+}
+declare const _default: import("react-redux").ConnectedComponent<typeof GroupsDropdown, Pick<React.ClassAttributes<GroupsDropdown> & Props, "id" | "title" | "ref" | "key" | "anyRoleButLearner">>;
+export default _default;

package/lib/components/Dropdowns/GroupsDropdown.js

@@ -1,90 +1,90 @@
-"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 });
-var react_1 = __importStar(require("react"));
-var react_bootstrap_1 = require("react-bootstrap");
-var react_redux_1 = require("react-redux");
-var react_router_bootstrap_1 = require("react-router-bootstrap");
-var studiokit_net_js_1 = require("studiokit-net-js");
-var actionCreator_1 = require("../../redux/actionCreator");
-var date_1 = require("../../utils/date");
-var groupDates_1 = require("../../utils/groupDates");
-var groupRoles_1 = require("../../utils/groupRoles");
-var sort_1 = require("../../utils/sort");
-var ManagedNavDropdown_1 = __importDefault(require("./ManagedNavDropdown"));
-var GroupsDropdown = /** @class */ (function (_super) {
-    __extends(GroupsDropdown, _super);
-    function GroupsDropdown() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.loadGroups = function () {
-            actionCreator_1.dispatchAction(studiokit_net_js_1.NET_ACTION.DATA_REQUESTED, { modelName: 'groups' });
-        };
-        _this.didToggle = function (isOpen) {
-            if (isOpen) {
-                _this.loadGroups();
-            }
-        };
-        _this.renderGroupMenu = function (groups) {
-            if (!groups) {
-                return null;
-            }
-            return groups.sort(sort_1.sortByNameNatural).map(function (group) {
-                var groupURL = "/courses/" + group.id;
-                return (react_1.default.createElement(react_router_bootstrap_1.LinkContainer, { key: group.id, to: "" + groupURL },
-                    react_1.default.createElement(react_bootstrap_1.Dropdown.Item, null, group.name)));
-            });
-        };
-        return _this;
-    }
-    GroupsDropdown.prototype.render = function () {
-        var _a = this.props, title = _a.title, id = _a.id, groups = _a.groups, externalTerms = _a.externalTerms, anyRoleButLearner = _a.anyRoleButLearner;
-        var groupsFilteredByRole = anyRoleButLearner ? groupRoles_1.groupsAsAnythingButLearner(groups) : groupRoles_1.groupsAsLearner(groups);
-        var currentGroups = groupDates_1.filterGroupsByEndDate(groupsFilteredByRole, externalTerms, date_1.isNowBeforeDate);
-        if (currentGroups.length === 0) {
-            return null;
-        }
-        return (react_1.default.createElement(ManagedNavDropdown_1.default, { title: title, id: id, didToggle: this.didToggle }, this.renderGroupMenu(currentGroups)));
-    };
-    return GroupsDropdown;
-}(react_1.Component));
-var mapStateToProps = function (state) {
-    return {
-        groups: !!state.models && !!state.models.groups ? state.models.groups : {},
-        externalTerms: state.models.externalTerms
-    };
-};
-exports.default = react_redux_1.connect(mapStateToProps)(GroupsDropdown);
+"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 });
+var react_1 = __importStar(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var react_redux_1 = require("react-redux");
+var react_router_bootstrap_1 = require("react-router-bootstrap");
+var studiokit_net_js_1 = require("studiokit-net-js");
+var actionCreator_1 = require("../../redux/actionCreator");
+var date_1 = require("../../utils/date");
+var groupDates_1 = require("../../utils/groupDates");
+var groupRoles_1 = require("../../utils/groupRoles");
+var sort_1 = require("../../utils/sort");
+var ManagedNavDropdown_1 = __importDefault(require("./ManagedNavDropdown"));
+var GroupsDropdown = /** @class */ (function (_super) {
+    __extends(GroupsDropdown, _super);
+    function GroupsDropdown() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.loadGroups = function () {
+            actionCreator_1.dispatchAction(studiokit_net_js_1.NET_ACTION.DATA_REQUESTED, { modelName: 'groups' });
+        };
+        _this.didToggle = function (isOpen) {
+            if (isOpen) {
+                _this.loadGroups();
+            }
+        };
+        _this.renderGroupMenu = function (groups) {
+            if (!groups) {
+                return null;
+            }
+            return groups.sort(sort_1.sortByNameNatural).map(function (group) {
+                var groupURL = "/courses/" + group.id;
+                return (react_1.default.createElement(react_router_bootstrap_1.LinkContainer, { key: group.id, to: "" + groupURL },
+                    react_1.default.createElement(react_bootstrap_1.Dropdown.Item, null, group.name)));
+            });
+        };
+        return _this;
+    }
+    GroupsDropdown.prototype.render = function () {
+        var _a = this.props, title = _a.title, id = _a.id, groups = _a.groups, externalTerms = _a.externalTerms, anyRoleButLearner = _a.anyRoleButLearner;
+        var groupsFilteredByRole = anyRoleButLearner ? groupRoles_1.groupsAsAnythingButLearner(groups) : groupRoles_1.groupsAsLearner(groups);
+        var currentGroups = groupDates_1.filterGroupsByEndDate(groupsFilteredByRole, externalTerms, date_1.isNowBeforeDate);
+        if (currentGroups.length === 0) {
+            return null;
+        }
+        return (react_1.default.createElement(ManagedNavDropdown_1.default, { title: title, id: id, didToggle: this.didToggle }, this.renderGroupMenu(currentGroups)));
+    };
+    return GroupsDropdown;
+}(react_1.Component));
+var mapStateToProps = function (state) {
+    return {
+        groups: !!state.models && !!state.models.groups ? state.models.groups : {},
+        externalTerms: state.models.externalTerms
+    };
+};
+exports.default = react_redux_1.connect(mapStateToProps)(GroupsDropdown);