studiokit-scaffolding-js 5.1.2 → 5.1.3-next.1.2

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

@@ -46,7 +46,7 @@ export declare function configureCollectionComponent<TModel extends Model, TOwnP
     };
     contextType?: React.Context<any> | undefined;
 };
-export declare const configureMapStateToProps: <TModel extends Model, TOwnProps extends Pick<CollectionComponentProps<TModel>, "match" | "queryParams" | "modelName" | "guid" | "location" | "history" | "staticContext" | "pathParams" | "disableAutoLoad">>(modelName: string) => (state: BaseReduxState, ownProps: TOwnProps & Partial<CollectionComponentProps<TModel>>) => import("../../types").CollectionSelectorMethodResponse<Model>;
+export declare const configureMapStateToProps: <TModel extends Model, TOwnProps extends Pick<CollectionComponentProps<TModel>, "match" | "queryParams" | "modelName" | "guid" | "location" | "history" | "staticContext" | "pathParams" | "disableAutoLoad" | "disableAutoLoadOnParamsChange">>(modelName: string) => (state: BaseReduxState, ownProps: TOwnProps & Partial<CollectionComponentProps<TModel>>) => import("../../types").CollectionSelectorMethodResponse<Model>;
 /**
  * HOC that provides "collection" related functionality, using redux `connect()`, react-router-dom `withRouter()`, and `GuidComponent`.
  *

package/lib/components/HOC/CollectionComponent.js

@@ -126,10 +126,12 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
         };
         CollectionComponent.prototype.componentDidUpdate = function (prevProps) {
             var prevModel = prevProps.model, prevModelName = prevProps.modelName, prevPathParams = prevProps.pathParams, prevQueryParams = prevProps.queryParams;
-            var _a = this.props, model = _a.model, modelName = _a.modelName, pathParams = _a.pathParams, queryParams = _a.queryParams;
+            var _a = this.props, model = _a.model, modelName = _a.modelName, pathParams = _a.pathParams, queryParams = _a.queryParams, disableAutoLoadOnParamsChange = _a.disableAutoLoadOnParamsChange;
             var fetchingId = this.state.fetchingId;
             model_1.handleModelFetchFinish(model, prevModel, fetchingId, this.changeModelStatus);
-            collection_1.handleCollectionParamsChange(modelName, prevModelName, pathParams, prevPathParams, queryParams, prevQueryParams, this.load);
+            if (!disableAutoLoadOnParamsChange) {
+                collection_1.handleCollectionParamsChange(modelName, prevModelName, pathParams, prevPathParams, queryParams, prevQueryParams, this.load);
+            }
         };
         CollectionComponent.prototype.componentWillUnmount = function () {
             var model = this.props.model;

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

@@ -45,7 +45,7 @@ export declare function configureCollectionItemComponent<TModel extends Model, T
     };
     contextType?: React.Context<any> | undefined;
 };
-export declare const configureMapStateToProps: <TModel extends Model, TOwnProps extends Pick<CollectionItemComponentProps<TModel>, "match" | "queryParams" | "modelName" | "guid" | "location" | "history" | "staticContext" | "pathParams" | "disableAutoLoad">>(modelName: string) => (state: BaseReduxState, ownProps: TOwnProps) => import("../../types").CollectionSelectorMethodResponse<Model>;
+export declare const configureMapStateToProps: <TModel extends Model, TOwnProps extends Pick<CollectionItemComponentProps<TModel>, "match" | "queryParams" | "modelName" | "guid" | "location" | "history" | "staticContext" | "pathParams" | "disableAutoLoad" | "disableAutoLoadOnParamsChange">>(modelName: string) => (state: BaseReduxState, ownProps: TOwnProps) => import("../../types").CollectionSelectorMethodResponse<Model>;
 /**
  * HOC that provides "collection" related functionality for a single item in a collection, using redux `connect()`, react-router-dom `withRouter()`, and `GuidComponent`.
  *

package/lib/components/HOC/CollectionItemComponent.js

@@ -128,9 +128,11 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
         };
         CollectionItemComponent.prototype.componentDidUpdate = function (prevProps) {
             var prevModel = prevProps.model, prevModelName = prevProps.modelName, prevPathParams = prevProps.pathParams, prevQueryParams = prevProps.queryParams;
-            var _a = this.props, modelName = _a.modelName, model = _a.model, pathParams = _a.pathParams, queryParams = _a.queryParams;
+            var _a = this.props, modelName = _a.modelName, model = _a.model, pathParams = _a.pathParams, queryParams = _a.queryParams, disableAutoLoadOnParamsChange = _a.disableAutoLoadOnParamsChange;
             model_1.handleModelFetchFinish(model, prevModel, undefined, this.setModelStatus);
-            collection_1.handleCollectionItemParamsChange(modelName, prevModelName, pathParams, prevPathParams, queryParams, prevQueryParams, this.load);
+            if (!disableAutoLoadOnParamsChange) {
+                collection_1.handleCollectionItemParamsChange(modelName, prevModelName, pathParams, prevPathParams, queryParams, prevQueryParams, this.load);
+            }
         };
         CollectionItemComponent.prototype.render = function () {
             var _a = this.props, history = _a.history, match = _a.match, location = _a.location, staticContext = _a.staticContext, otherProps = __rest(_a, ["history", "match", "location", "staticContext"]);

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

@@ -22,8 +22,8 @@ export interface SearchPersistorMethods<T extends 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>): ComponentType<TOwnProps & SearchPersistorProps>;
-export declare function configureSearchPersistorComponent<TOwnProps extends {}, TSearchType extends Search>(WrappedComponent: ComponentType<TOwnProps & SearchPersistorWrappedProps<TSearchType>>): ComponentType<TOwnProps & SearchPersistorProps<TSearchType>>;
+export declare function configureSearchPersistorComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & SearchPersistorWrappedProps>, disableLocalSearch?: boolean): ComponentType<TOwnProps & SearchPersistorProps>;
+export declare function configureSearchPersistorComponent<TOwnProps extends {}, TSearchType extends Search>(WrappedComponent: ComponentType<TOwnProps & SearchPersistorWrappedProps<TSearchType>>, disableLocalSearch?: boolean): 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>;
 /**
@@ -44,9 +44,11 @@ export declare const configureMapDispatchToProps: <TSearchType extends Search>(k
  *
  * @param WrappedComponent The component to wrap
  * @param key The key under "search" in redux where the component’s search params will be stored
+ * @param disableLocalSearch By default, `doSearch` is only called at initialization and when `queryAll` is `true`, and searching happens locally (see ManageTable).
+ * If `disableLocalSearch` is `true` then the legacy logic is used, where `doSearch` is always called for all searches.
  * @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 default function searchPersistorComponent<TOwnProps extends SearchPersistorWrappedProps>(WrappedComponent: ComponentType<TOwnProps>, key: string, disableLocalSearch?: boolean): ComponentClass<Omit<TOwnProps, keyof SearchPersistorWrappedProps>>;
 /**
  * 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`.
@@ -65,6 +67,8 @@ export default function searchPersistorComponent<TOwnProps extends SearchPersist
  *
  * @param WrappedComponent The component to wrap
  * @param key The key under "search" in redux where the component’s search params will be stored
+ * @param disableLocalSearch By default, `doSearch` is only called at initialization and when `queryAll` is `true`, and searching happens locally (see ManageTable).
+ * If `disableLocalSearch` is `true` then the legacy logic is used, where `doSearch` is always called for all searches.
  * @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>>>;
+export default function searchPersistorComponent<TOwnProps extends SearchPersistorWrappedProps<TSearchType>, TSearchType extends Search>(WrappedComponent: ComponentType<TOwnProps>, key: string, disableLocalSearch?: boolean): ComponentClass<Omit<TOwnProps, keyof SearchPersistorWrappedProps<TSearchType>>>;

package/lib/components/HOC/SearchPersistorComponent.js

@@ -48,7 +48,7 @@ var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var actions_1 = require("../../redux/actions");
-function configureSearchPersistorComponent(WrappedComponent) {
+function configureSearchPersistorComponent(WrappedComponent, disableLocalSearch) {
     return /** @class */ (function (_super) {
         __extends(SearchPersistorComponent, _super);
         function SearchPersistorComponent(props) {
@@ -105,8 +105,8 @@ function configureSearchPersistorComponent(WrappedComponent) {
                     pageSize: search.pageSize,
                     pageByTab: search.pageByTab
                 }), 
-                // do not trigger a re-load unless queryAll is true
-                search.queryAll ? _this.doSearch : undefined);
+                // do not trigger a re-load unless queryAll is true, or local search is disabled
+                disableLocalSearch || search.queryAll ? _this.doSearch : undefined);
             };
             _this.setSelectedTab = function (selectedTab) {
                 var _a, _b;
@@ -126,16 +126,20 @@ function configureSearchPersistorComponent(WrappedComponent) {
             };
             _this.handleKeywordsKeyDown = function (event) {
                 var _a;
-                if (event.key === 'Enter' && ((_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.queryAll)) {
+                if (event.key === 'Enter' && (disableLocalSearch || ((_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.queryAll))) {
                     _this.handleSearchClick();
                 }
             };
             _this.setQueryAll = function (event) {
+                var _a;
                 var queryAll = event.target.checked;
                 _this.updateAndPersistSearch({
                     queryAll: queryAll,
-                    requiredMessage: !queryAll ? null : _this.state.search ? _this.state.search.requiredMessage : null
-                }, _this.doSearch);
+                    // clear the `requiredMessage` when turning off `queryAll` and local search is enabled
+                    requiredMessage: !queryAll && !disableLocalSearch ? null : (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.requiredMessage
+                }, 
+                // only automatically trigger re-load when local search is enabled
+                !disableLocalSearch ? _this.doSearch : undefined);
             };
             _this.setSortingRules = function (newSortingRules) {
                 _this.updateAndPersistSearch({
@@ -213,8 +217,8 @@ var configureMapDispatchToProps = function (key) { return function (dispatch) {
     };
 }; };
 exports.configureMapDispatchToProps = configureMapDispatchToProps;
-function searchPersistorComponent(WrappedComponent, key) {
-    var SearchPersistorComponent = configureSearchPersistorComponent(WrappedComponent);
+function searchPersistorComponent(WrappedComponent, key, disableLocalSearch) {
+    var SearchPersistorComponent = configureSearchPersistorComponent(WrappedComponent, disableLocalSearch);
     var mapStateToProps = exports.configureMapStateToProps(key);
     var mapDispatchToProps = exports.configureMapDispatchToProps(key);
     // @ts-ignore: could not match inferred type from the `connect` HOC

package/lib/components/SearchControls.d.ts

@@ -9,6 +9,8 @@ export interface SearchControlsProps extends Search, SearchControlsMethods {
     handleDateChange?: (dateString: string, date?: Date) => void;
     canReadAnyGlobally?: boolean;
     canReadSome?: boolean;
+    /** force Search button to be visible. otherwise only shows when `queryAll` is `true`. */
+    showSearchButton?: boolean;
 }
 export declare const SearchControls: FunctionComponent<SearchControlsProps>;
 export {};

package/lib/components/SearchControls.js

@@ -12,7 +12,7 @@ var react_bootstrap_1 = require("react-bootstrap");
 var AlertWithIcon_1 = require("./AlertWithIcon");
 var DateField_1 = require("./Forms/DateField");
 var SearchControls = function (_a) {
-    var keywords = _a.keywords, invalidKeywords = _a.invalidKeywords, dateString = _a.dateString, queryAll = _a.queryAll, requiredMessage = _a.requiredMessage, setKeywords = _a.setKeywords, handleKeywordsKeyDown = _a.handleKeywordsKeyDown, handleSearchClick = _a.handleSearchClick, resetSearch = _a.resetSearch, setQueryAll = _a.setQueryAll, keywordPlaceholder = _a.keywordPlaceholder, handleDateChange = _a.handleDateChange, queryAllText = _a.queryAllText, canReadAnyGlobally = _a.canReadAnyGlobally, canReadSome = _a.canReadSome;
+    var keywords = _a.keywords, invalidKeywords = _a.invalidKeywords, dateString = _a.dateString, queryAll = _a.queryAll, requiredMessage = _a.requiredMessage, setKeywords = _a.setKeywords, handleKeywordsKeyDown = _a.handleKeywordsKeyDown, handleSearchClick = _a.handleSearchClick, resetSearch = _a.resetSearch, setQueryAll = _a.setQueryAll, keywordPlaceholder = _a.keywordPlaceholder, handleDateChange = _a.handleDateChange, queryAllText = _a.queryAllText, canReadAnyGlobally = _a.canReadAnyGlobally, canReadSome = _a.canReadSome, showSearchButton = _a.showSearchButton;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         !!requiredMessage && (react_1.default.createElement(AlertWithIcon_1.AlertWithIcon, { variant: "danger", className: "mb0", id: "requiredMessageAlert" },
             react_1.default.createElement("p", null, requiredMessage))),
@@ -25,7 +25,7 @@ var SearchControls = function (_a) {
             react_1.default.createElement(DateField_1.DateField, { id: "date", onChange: handleDateChange, label: "Date", "aria-label": "Active date", className: "fl-ns mw5-ns mr3-ns mb3 mb0-ns w-100-lt-xs date-align", value: dateString }))),
         react_1.default.createElement("div", { className: "fl-ns mt3-ns pt3-ns w-100-lt-xs" },
             canReadAnyGlobally && !!setQueryAll && (react_1.default.createElement(react_bootstrap_1.FormCheck, { name: "queryAll", id: "queryAll", checked: queryAll, disabled: canReadAnyGlobally && !canReadSome, onChange: setQueryAll, className: "fl-ns f6 mr2-ns mb3 mt2 w-100-lt-xs", label: react_1.default.createElement("span", { className: "b black" }, queryAllText || 'Search All') })),
-            canReadAnyGlobally && queryAll && (react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs search-button", onClick: handleSearchClick, color: "primary", disabled: (!keywords || keywords.length < 3 || !!invalidKeywords) && !dateString },
+            (showSearchButton || (canReadAnyGlobally && queryAll)) && (react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs search-button", onClick: handleSearchClick, color: "primary", disabled: (!keywords || keywords.length < 3 || !!invalidKeywords) && !dateString },
                 react_1.default.createElement(Search_1.default, null),
                 "Search")),
             react_1.default.createElement(Button_1.default, { className: "btn-text color-pink fr-ns mb3 w-100-lt-xs", onClick: resetSearch },

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

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { UserWithRoles } from '../../types/UserRole';
+import { UserWithRoles } from '../../types';
 export interface RoleCellProps {
     user: UserWithRoles;
     requiredRoleCount?: number;

package/lib/components/UserRoles/RoleCell.js

@@ -27,7 +27,7 @@ var core_1 = require("@material-ui/core");
 var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
 var react_1 = __importStar(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
-var react_redux_1 = require("react-redux");
+var useCurrentUserId_1 = require("../../hooks/useCurrentUserId");
 var userRole_1 = require("../../utils/userRole");
 var IconExternalUser_1 = require("../Icons/IconExternalUser");
 var Inline_1 = require("../RefreshIndicator/Inline");
@@ -36,12 +36,7 @@ var Select_1 = require("./Select");
 var RoleCell = function (_a) {
     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;
-    });
+    var currentUserId = useCurrentUserId_1.useCurrentUserId();
     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);

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

@@ -107,5 +107,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, "ref" | "queryParams" | "modelName" | "externalProviders" | "model" | "key" | "readOnly" | "guid" | "entityName" | "load" | "pathParams" | "modelStatus" | "disableAutoLoad" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "ref" | "queryParams" | "modelName" | "externalProviders" | "model" | "key" | "readOnly" | "guid" | "entityName" | "load" | "pathParams" | "modelStatus" | "disableAutoLoad" | "disableAutoLoadOnParamsChange" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
 export default _default;

package/lib/constants/configuration.d.ts

@@ -5,3 +5,5 @@ export declare const setShardConfig: (value: Configuration) => void;
 export declare const getShardConfig: () => Configuration;
 export declare const setEndpointMappings: (value: EndpointMappings) => void;
 export declare const getEndpointMappings: () => EndpointMappings;
+export declare const setUserId: (value: string | null) => void;
+export declare const getUserId: () => string | null;

package/lib/constants/configuration.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEndpointMappings = exports.setEndpointMappings = exports.getShardConfig = exports.setShardConfig = exports.getAppConfig = exports.setAppConfig = void 0;
+exports.getUserId = exports.setUserId = exports.getEndpointMappings = exports.setEndpointMappings = exports.getShardConfig = exports.setShardConfig = exports.getAppConfig = exports.setAppConfig = void 0;
 var appConfig;
 var shardConfig;
 var endpointMappings;
+var userId;
 var setAppConfig = function (value) {
     appConfig = value;
 };
@@ -37,3 +38,11 @@ var getEndpointMappings = function () {
     return endpointMappings;
 };
 exports.getEndpointMappings = getEndpointMappings;
+var setUserId = function (value) {
+    userId = value;
+};
+exports.setUserId = setUserId;
+var getUserId = function () {
+    return userId;
+};
+exports.getUserId = getUserId;

package/lib/hooks/useCollection.js

@@ -5,7 +5,7 @@ var react_1 = require("react");
 var collection_1 = require("../utils/collection");
 var useCollectionConfiguration_1 = require("./useCollectionConfiguration");
 function useCollection(props) {
-    var modelName = props.modelName;
+    var modelName = props.modelName, disableAutoLoadOnParamsChange = props.disableAutoLoadOnParamsChange;
     // state, route, and redux
     var config = useCollectionConfiguration_1.useCollectionConfiguration(props, collection_1.selectCollectionFromState);
     var previousModelName = config.previousModelName, guid = config.guid, model = config.model, pathParams = config.pathParams, previousPathParams = config.previousPathParams, queryParams = config.queryParams, previousQueryParams = config.previousQueryParams, fetchingId = config.fetchingId, modelStatus = config.modelStatus, previousModelStatus = config.previousModelStatus, isInitialized = config.isInitialized, setIsInitialized = config.setIsInitialized, methodConfig = config.methodConfig, modelArray = config.modelArray;
@@ -33,10 +33,21 @@ function useCollection(props) {
             setIsInitialized(true);
         }
     }, [isInitialized, load, methodConfig, model, setIsInitialized]);
-    // re-load if `pathParams` or `queryParams` change
+    // re-load if `pathParams` or `queryParams` change, unless `disableAutoLoadOnParamsChange` is true
     react_1.useEffect(function () {
-        collection_1.handleCollectionParamsChange(modelName, previousModelName, pathParams, previousPathParams, queryParams, previousQueryParams, load);
-    }, [load, modelName, pathParams, previousModelName, previousPathParams, previousQueryParams, queryParams]);
+        if (!disableAutoLoadOnParamsChange) {
+            collection_1.handleCollectionParamsChange(modelName, previousModelName, pathParams, previousPathParams, queryParams, previousQueryParams, load);
+        }
+    }, [
+        disableAutoLoadOnParamsChange,
+        load,
+        modelName,
+        pathParams,
+        previousModelName,
+        previousPathParams,
+        previousQueryParams,
+        queryParams
+    ]);
     // cleanup on unmount
     react_1.useEffect(function () {
         return function cleanup() {

package/lib/hooks/useCollectionItem.js

@@ -5,7 +5,7 @@ var react_1 = require("react");
 var collection_1 = require("../utils/collection");
 var useCollectionConfiguration_1 = require("./useCollectionConfiguration");
 function useCollectionItem(props) {
-    var modelName = props.modelName;
+    var modelName = props.modelName, disableAutoLoadOnParamsChange = props.disableAutoLoadOnParamsChange;
     // state, route, and redux
     var config = useCollectionConfiguration_1.useCollectionConfiguration(props, collection_1.selectCollectionItemFromState);
     var previousModelName = config.previousModelName, guid = config.guid, model = config.model, pathParams = config.pathParams, previousPathParams = config.previousPathParams, queryParams = config.queryParams, previousQueryParams = config.previousQueryParams, modelStatus = config.modelStatus, previousModelStatus = config.previousModelStatus, isInitialized = config.isInitialized, setIsInitialized = config.setIsInitialized, methodConfig = config.methodConfig, modelMinusRelations = config.modelMinusRelations;
@@ -34,10 +34,21 @@ function useCollectionItem(props) {
             setIsInitialized(true);
         }
     }, [isInitialized, load, methodConfig, model, setIsInitialized]);
-    // re-load if `pathParams` or `queryParams` change
+    // re-load if `pathParams` or `queryParams` change, unless `disableAutoLoadOnParamsChange` is true
     react_1.useEffect(function () {
-        collection_1.handleCollectionItemParamsChange(modelName, previousModelName, pathParams, previousPathParams, queryParams, previousQueryParams, load);
-    }, [load, modelName, pathParams, previousModelName, previousPathParams, previousQueryParams, queryParams]);
+        if (!disableAutoLoadOnParamsChange) {
+            collection_1.handleCollectionItemParamsChange(modelName, previousModelName, pathParams, previousPathParams, queryParams, previousQueryParams, load);
+        }
+    }, [
+        disableAutoLoadOnParamsChange,
+        load,
+        modelName,
+        pathParams,
+        previousModelName,
+        previousPathParams,
+        previousQueryParams,
+        queryParams
+    ]);
     return {
         guid: guid,
         model: model,

package/lib/hooks/useCurrentUserId.d.ts

@@ -0,0 +1 @@
+export declare const useCurrentUserId: () => string;

package/lib/hooks/useCurrentUserId.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentUserId = void 0;
+var react_redux_1 = require("react-redux");
+var useCurrentUserId = function () {
+    return 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;
+    });
+};
+exports.useCurrentUserId = useCurrentUserId;

package/lib/redux/sagas/sentrySaga.js

@@ -48,39 +48,45 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var Sentry = __importStar(require("@sentry/react"));
 var effects_1 = require("redux-saga/effects");
-var configuration_1 = require("../../constants/configuration");
+var constants_1 = require("../../constants");
+var analytics_1 = require("../../utils/analytics");
 var actions_1 = require("../actions");
 function sentrySaga() {
     var appConfig, sentryDsn, _loop_1;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                appConfig = configuration_1.getAppConfig();
+                appConfig = constants_1.getAppConfig();
                 sentryDsn = appConfig.SENTRY_DSN;
                 if (!sentryDsn) {
                     return [2 /*return*/];
                 }
                 _loop_1 = function () {
-                    var userInfoResponse, userInfo;
+                    var userInfoResponse, userInfo, userId;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
                             case 0: return [4 /*yield*/, effects_1.take(function (action) { return action.type === actions_1.NET_ACTION.FETCH_RESULT_RECEIVED && action.modelName === 'user.userInfo'; })];
                             case 1:
                                 userInfoResponse = _a.sent();
                                 userInfo = userInfoResponse.data;
+                                userId = userInfo.id;
+                                constants_1.setUserId(userId);
                                 Sentry.configureScope(function (scope) {
                                     scope.setUser({
-                                        id: userInfo.id,
+                                        id: userId,
                                         username: userInfo.userName,
                                         email: userInfo.email
                                     });
                                 });
+                                analytics_1.setGoogleAnalyticsUserId(userId);
                                 return [4 /*yield*/, effects_1.take(actions_1.AUTH_ACTION.LOG_OUT_REQUESTED)];
                             case 2:
                                 _a.sent();
+                                constants_1.setUserId(null);
                                 Sentry.configureScope(function (scope) {
                                     scope.setUser({});
                                 });
+                                analytics_1.setGoogleAnalyticsUserId(null);
                                 return [4 /*yield*/, effects_1.take(actions_1.AUTH_ACTION.GET_TOKEN_SUCCEEDED)];
                             case 3:
                                 _a.sent();

package/lib/startup.js

@@ -62,7 +62,7 @@ var startup = function (appConfig, endpointMappings) {
     var locationListener = function (location, action) {
         // send pageview to Google Analytics
         if (appConfig.GOOGLE_ANALYTICS_TRACKING_ID) {
-            react_ga4_1.default.send({ hitType: 'pageview', page: location.pathname });
+            react_ga4_1.default.send({ hitType: 'pageview', page: location.pathname, user_id: configuration_1.getUserId() });
         }
         // send pageview to Application Insights
         if (appInsights) {

package/lib/types/Analytics.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Google Analytics Event
+ */
+export interface GoogleAnalyticsEvent {
+    userId: string | null;
+    eventName: string;
+    category?: string;
+    action?: string;
+    label?: string;
+}

package/lib/types/Analytics.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/types/Collection.d.ts

@@ -14,8 +14,10 @@ export interface CollectionCommonProps {
     pathParams: string[];
     /** Custom queryParams for use in all requests. */
     queryParams?: Dictionary<string>;
-    /** Whether or not to trigger `load()` after mounting. Default is `false`. */
+    /** Whether to disable triggering `load()` after mounting. Default is `false`. */
     disableAutoLoad?: boolean;
+    /** Whether to disable triggering `load()` when `pathParams` or `queryParams` change. Default is `false`. */
+    disableAutoLoadOnParamsChange?: boolean;
 }
 /** See `CollectionSelectorMethod` */
 export interface CollectionSelectorMethodParams {

package/lib/utils/analytics.d.ts

@@ -0,0 +1,11 @@
+import { GoogleAnalyticsEvent } from '../types/Analytics';
+/**
+ * Set the User ID for Google Analytics with a given value
+ * @param userId
+ */
+export declare const setGoogleAnalyticsUserId: (userId: string | null) => void;
+/**
+ * Send an event to Google Analytics
+ * @param event
+ */
+export declare const trackGoogleAnalyticsEvent: (event: GoogleAnalyticsEvent) => void;

package/lib/utils/analytics.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackGoogleAnalyticsEvent = exports.setGoogleAnalyticsUserId = void 0;
+var react_ga4_1 = __importDefault(require("react-ga4"));
+var constants_1 = require("../constants");
+/**
+ * Set the User ID for Google Analytics with a given value
+ * @param userId
+ */
+var setGoogleAnalyticsUserId = function (userId) {
+    var appConfig = constants_1.getAppConfig();
+    if (appConfig.GOOGLE_ANALYTICS_TRACKING_ID === undefined)
+        return;
+    react_ga4_1.default.gtag('config', appConfig.GOOGLE_ANALYTICS_TRACKING_ID, {
+        user_id: userId
+    });
+};
+exports.setGoogleAnalyticsUserId = setGoogleAnalyticsUserId;
+/**
+ * Send an event to Google Analytics
+ * @param event
+ */
+var trackGoogleAnalyticsEvent = function (event) {
+    var userId = event.userId, eventName = event.eventName, category = event.category, action = event.action, label = event.label;
+    var appConfig = constants_1.getAppConfig();
+    if (appConfig.GOOGLE_ANALYTICS_TRACKING_ID === undefined)
+        return;
+    react_ga4_1.default.event(eventName, {
+        event_category: category,
+        action: action,
+        event_label: label,
+        user_id: userId
+    });
+};
+exports.trackGoogleAnalyticsEvent = trackGoogleAnalyticsEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "5.1.2",
+	"version": "5.1.3-next.1.2",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",