studiokit-scaffolding-js 5.1.1 → 5.1.2-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/ManageTable.js

@@ -1,4 +1,15 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,6 +21,10 @@ var react_2 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var react_table_1 = __importDefault(require("react-table"));
 var table_1 = require("../constants/table");
+var table_2 = require("../utils/table");
+var ManageTableNoDataComponent_1 = require("./ManageTableNoDataComponent");
+var PaginationNextButton_1 = require("./PaginationNextButton");
+var PaginationPreviousButton_1 = require("./PaginationPreviousButton");
 var RefreshIndicator_1 = require("./RefreshIndicator");
 var ManageTable = function (_a) {
     //#region Data
@@ -62,33 +77,15 @@ var ManageTable = function (_a) {
     var SearchTabs = react_1.useMemo(function () { return (react_2.default.createElement(react_bootstrap_1.Tabs, { activeKey: selectedTab, id: "search-tabs", onSelect: onTabSelect }, tabs.map(function (tab) { return (react_2.default.createElement(react_bootstrap_1.Tab, { key: tab, eventKey: tab.toString(), title: getTabName(tab) + " (" + dataLengthByTab[tab] + ")", disabled: noResultsFound })); }))); }, [dataLengthByTab, getTabName, noResultsFound, onTabSelect, selectedTab, tabs]);
     //#endregion Tabs
     //#region Table
-    var NoDataComponent = react_1.useMemo(function () {
-        return hasSearched ? (react_2.default.createElement("p", { className: "pt4 tc" },
-            "No ",
-            entityName.toLocaleLowerCase(),
-            " matched your search.",
-            canQueryAll && !queryAll && (react_2.default.createElement(react_2.default.Fragment, null,
-                " You might want to try again with \"Search All ",
-                entityName,
-                "\" checked.")))) : (react_2.default.createElement("p", { className: "pt4 tc" },
-            "No ",
-            getTabName(selectedTab).toLowerCase(),
-            " ",
-            entityName.toLocaleLowerCase(),
-            ' ',
-            isFiltered ? 'matched your search' : 'found',
-            "."));
-    }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
+    var NoDataComponent = react_1.useMemo(function () { return (react_2.default.createElement(ManageTableNoDataComponent_1.ManageTableNoDataComponent, __assign({}, { canQueryAll: canQueryAll, entityName: entityName, getTabName: getTabName, hasSearched: hasSearched, isFiltered: isFiltered, queryAll: queryAll, selectedTab: selectedTab }))); }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
     var NoDataComponentCallback = react_1.useCallback(function () { return NoDataComponent; }, [NoDataComponent]);
     var Table = react_1.useMemo(function () {
-        var _a;
+        // show pagination if there are more rows than the default page size
         var showPagination = !!data && data.length > table_1.TABLE_DEFAULT_PAGE_SIZE;
         // if pagination is not enabled, or page is not set, ensure page is 0, the first page
         var pageForTab = showPagination && pageByTab && selectedTab ? pageByTab[selectedTab] : 0;
-        // if there are less items to display than the page size, shrink the page size so there are not empty rows
-        var currentPageSize = Math.min((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : table_1.TABLE_DEFAULT_PAGE_SIZE, pageSize !== null && pageSize !== void 0 ? pageSize : table_1.TABLE_DEFAULT_PAGE_SIZE);
-        var pageSizeOptions = table_1.TABLE_PAGE_SIZE_OPTIONS.filter(function (s) { return !(data === null || data === void 0 ? void 0 : data.length) || s <= (data === null || data === void 0 ? void 0 : data.length); });
-        return (react_2.default.createElement(react_table_1.default, { "aria-describedby": "search-results-label", className: "manage-table -striped cb" + ((data === null || data === void 0 ? void 0 : data.length) === 1 ? ' single-row-action-button' : ''), data: data, showPagination: showPagination, showPaginationTop: true, sorted: sortingRules, pageSize: currentPageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NoDataComponent: NoDataComponentCallback }));
+        var pageSizeOptions = table_2.getPageSizeOptions(data === null || data === void 0 ? void 0 : data.length);
+        return (react_2.default.createElement(react_table_1.default, { "aria-describedby": "search-results-label", className: "manage-table -striped cb" + ((data === null || data === void 0 ? void 0 : data.length) === 1 ? ' single-row-action-button' : ''), data: data, showPagination: showPagination, showPaginationTop: true, sorted: sortingRules, pageSize: pageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, minRows: 0, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NextComponent: PaginationNextButton_1.PaginationNextButton, PreviousComponent: PaginationPreviousButton_1.PaginationPreviousButton, NoDataComponent: NoDataComponentCallback }));
     }, [
         NoDataComponentCallback,
         columns,

package/lib/components/ManageTableNoDataComponent.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+export interface ManageTableNoDataComponentProps {
+    entityName: string;
+    selectedTab?: number;
+    getTabName: (tab?: number) => string;
+    queryAll?: boolean;
+    canQueryAll?: boolean;
+    isFiltered?: boolean;
+    hasSearched?: boolean;
+}
+export declare const ManageTableNoDataComponent: FunctionComponent<ManageTableNoDataComponentProps>;

package/lib/components/ManageTableNoDataComponent.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManageTableNoDataComponent = void 0;
+var react_1 = __importDefault(require("react"));
+var ManageTableNoDataComponent = function (_a) {
+    var entityName = _a.entityName, selectedTab = _a.selectedTab, getTabName = _a.getTabName, queryAll = _a.queryAll, canQueryAll = _a.canQueryAll, isFiltered = _a.isFiltered, hasSearched = _a.hasSearched;
+    return (react_1.default.createElement("p", { className: "pt4 tc" }, hasSearched ? (react_1.default.createElement(react_1.default.Fragment, null,
+        "No ",
+        entityName.toLocaleLowerCase(),
+        " matched your search.",
+        canQueryAll && !queryAll && (react_1.default.createElement(react_1.default.Fragment, null,
+            " You might want to try again with \"Search All ",
+            entityName,
+            "\" checked.")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        "No ",
+        getTabName(selectedTab).toLowerCase(),
+        " ",
+        entityName.toLocaleLowerCase(),
+        ' ',
+        isFiltered ? 'matched your search' : 'found',
+        "."))));
+};
+exports.ManageTableNoDataComponent = ManageTableNoDataComponent;

package/lib/components/PaginationNextButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@material-ui/core';
+import { FunctionComponent } from 'react';
+export declare const PaginationNextButton: FunctionComponent<ButtonProps>;

package/lib/components/PaginationNextButton.js

@@ -0,0 +1,24 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationNextButton = void 0;
+var core_1 = require("@material-ui/core");
+var KeyboardArrowRight_1 = __importDefault(require("@material-ui/icons/KeyboardArrowRight"));
+var react_1 = __importDefault(require("react"));
+var PaginationNextButton = function (props) { return (react_1.default.createElement(core_1.Button, __assign({ className: "btn-text color-primary w-100" }, props),
+    "Next ",
+    react_1.default.createElement(KeyboardArrowRight_1.default, null))); };
+exports.PaginationNextButton = PaginationNextButton;

package/lib/components/PaginationPreviousButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@material-ui/core';
+import { FunctionComponent } from 'react';
+export declare const PaginationPreviousButton: FunctionComponent<ButtonProps>;

package/lib/components/PaginationPreviousButton.js

@@ -0,0 +1,24 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationPreviousButton = void 0;
+var core_1 = require("@material-ui/core");
+var KeyboardArrowLeft_1 = __importDefault(require("@material-ui/icons/KeyboardArrowLeft"));
+var react_1 = __importDefault(require("react"));
+var PaginationPreviousButton = function (props) { return (react_1.default.createElement(core_1.Button, __assign({ className: "btn-text color-primary w-100" }, props),
+    react_1.default.createElement(KeyboardArrowLeft_1.default, null),
+    " Previous")); };
+exports.PaginationPreviousButton = PaginationPreviousButton;

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 },
+            (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/css/components/_tables.css

@@ -62,6 +62,39 @@ th,
  * react table
  */
 
+.table-container {
+	width: 100%;
+	overflow-x: auto;
+}
+
+.table-search-container {
+	padding: 0 !important;
+	text-align: left;
+	background: white;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 3px;
+	width: 100%;
+
+	& .MuiSvgIcon-root {
+		margin-top: 0.55rem;
+	}
+
+	& .table-search-input {
+		text-align: left;
+		outline: none !important;
+		border: none !important;
+		width: 100%;
+	}
+
+	& input[type=search] {
+		-webkit-appearance: none;
+	}
+
+	& input[type=search]::-webkit-search-cancel-button {
+		-webkit-appearance: searchfield-cancel-button;
+	}
+}
+
 .ReactTable {
 	& .rt-thead .rt-tr {
 		background-color: var(--color-off-white);
@@ -88,10 +121,81 @@ th,
 		overflow: visible;
 	}
 
-	& .-pagination .-btn[disabled] {
-		opacity: 1 !important;
-		background-color: var(--color-light-grey) !important;
-		color: var(--color-dark-grey) !important;
+	& .pagination-top,
+	& .pagination-bottom {
+		background-color: var(--color-off-white);
+
+		& .-pagination {
+			padding: 0.5rem 0.6rem;
+			border-top: none;
+		}
+	}
+
+	& .pagination-top .-pagination {
+		border-bottom: 1px solid var(--color-light-grey);
+	}
+
+	& .pagination-bottom .-pagination {
+		border-top: 1px solid var(--color-light-grey);
+	}
+
+	& .-pagination .-previous,
+	& .-pagination .-next {
+		& .MuiButton-text {
+			background-color: var(--color-white);
+			border: 1px solid var(--color-light-grey);
+
+			&[disabled] {
+				background-color: var(--color-light-grey);
+			}
+
+			& .MuiButton-label .MuiSvgIcon-root {
+				margin: 0;
+			}
+		}
+	}
+
+	/* duplicate .form-control styles */
+	& .-pagination input,
+	.-pagination select {
+		display: block;
+		width: 100%;
+		height: calc(1.5em + 0.75rem + 2px);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.5;
+		color: #495057;
+		background-color: #fff;
+		background-clip: padding-box;
+		border: 1px solid #ced4da;
+		border-radius: 0.25rem;
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+		font-family: var(--text-font-stack);
+		padding: 0.5rem;
+		border-color: var(--color-light-grey);
+		box-shadow: none;
+
+		&:focus {
+			border-color: #80bdff;
+			outline: 0;
+			-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+		}
+
+		&::placeholder {
+			color: #6c757d;
+			opacity: 1;
+		}
+	}
+
+	& .-pagination .-pageSizeOptions.select {
+		padding: 0.375rem 0.75rem;
+	}
+
+	&.single-row-action-button {
+		& .rt-tbody {
+			padding-bottom: 108px;
+		}
 	}
 
 	& .rt-noData {
@@ -113,39 +217,6 @@ th,
 	}
 }
 
-.table-container {
-	width: 100%;
-	overflow-x: auto;
-}
-
-.table-search-container {
-	padding: 0 !important;
-	text-align: left;
-	background: white;
-	border: 1px solid rgba(0, 0, 0, 0.1);
-	border-radius: 3px;
-	width: 100%;
-
-	& .MuiSvgIcon-root {
-		margin-top: 0.55rem;
-	}
-
-	& .table-search-input {
-		text-align: left;
-		outline: none !important;
-		border: none !important;
-		width: 100%;
-	}
-
-	& input[type=search] {
-		-webkit-appearance: none;
-	}
-
-	& input[type=search]::-webkit-search-cancel-button {
-		-webkit-appearance: searchfield-cancel-button;
-	}
-}
-
 .striped-table tr:nth-child(even) {
 	background-color: var(--color-light-blue) !important;
 }

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/lib/utils/table.d.ts

@@ -0,0 +1,7 @@
+export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
+export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";
+/**
+ * return page size options that are less than or equal to the total data length,
+ * and one that is greater (if it exists) to allow viewing all data on one page.
+ * */
+export declare const getPageSizeOptions: (dataLength?: number | undefined) => number[];

package/lib/utils/{manageTable.js → table.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
+exports.getPageSizeOptions = exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
 var table_1 = require("../constants/table");
 var getManageTableTabName = function (selectedTab) {
     switch (selectedTab) {
@@ -26,3 +26,17 @@ var getGroupManageTableTabName = function (selectedTab) {
     }
 };
 exports.getGroupManageTableTabName = getGroupManageTableTabName;
+/**
+ * return page size options that are less than or equal to the total data length,
+ * and one that is greater (if it exists) to allow viewing all data on one page.
+ * */
+var getPageSizeOptions = function (dataLength) {
+    return table_1.TABLE_PAGE_SIZE_OPTIONS.reduce(function (options, option, currentIndex) {
+        var prevOption = currentIndex > 0 ? options[currentIndex - 1] : undefined;
+        if (!dataLength || option < dataLength || (prevOption && prevOption < dataLength)) {
+            options.push(option);
+        }
+        return options;
+    }, []);
+};
+exports.getPageSizeOptions = getPageSizeOptions;

package/package.json

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

package/lib/utils/manageTable.d.ts

@@ -1,2 +0,0 @@
-export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
-export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";