studiokit-scaffolding-js 5.1.2 → 5.1.3

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/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/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/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/package.json

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