orc-shared 5.10.0-dev.12 → 5.10.0-dev.13

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js

@@ -0,0 +1,89 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    container: {
+      display: "flex",
+      padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2)),
+      minHeight: theme.spacing(4),
+      alignItems: "center",
+      borderBottom: "".concat(theme.spacing(0.1), " solid ").concat(theme.palette.grey.borders)
+    },
+    rightContent: {
+      justifyContent: "flex-end",
+      alignItems: "center",
+      display: "flex",
+      flex: 1
+    }
+  };
+});
+var SectionToolbar = function SectionToolbar(_ref) {
+  var children = _ref.children,
+    rightContent = _ref.rightContent;
+  var classes = useStyles();
+  var container = /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, children, [rightContent && /*#__PURE__*/_react.default.createElement("div", {
+    key: "rightContent",
+    className: classes.rightContent
+  }, rightContent)]);
+  return container;
+};
+__signature__(SectionToolbar, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(SectionToolbar, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var _default = SectionToolbar;
+var _default2 = _default;
+var _default3 = exports.default = _default2;
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js");
+  reactHotLoader.register(SectionToolbar, "SectionToolbar", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js");
+  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js");
+  reactHotLoader.register(SectionToolbar, "SectionToolbar", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js");
+  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/dist/components/MaterialUI/DataDisplay/Table.js

@@ -383,10 +383,36 @@ var FullTableWithSavedScrollbar = _react.default.forwardRef(__signature__(__sign
   };
   (0, _react.useEffect)(function () {
     if (scrollbarViewState.scrollBarPosition > 0) {
+      // The Table component usually display the provided list ASAP however it can happen that the Table is not fully rendered with its items when we attempt to change the scrollTop value.
+      // The timer should ensure that the list is rendered before attempting to change the scrollTop if the first attempt was not able to set the scroll position
+      // 		This edge case was found using these steps:
+      //          * Create an organization with 50+ customers
+      //          * Go to the customer section of the organization and scroll down a bit
+      //          * Wait 1 second for the scroll position to be stored
+      //          * Go to the organization list (click on the tab)
+      //          * Go back to the organization (its tab should still be visible)
+      //          * We expect the customer list to remember its scroll position but it wasn't the case
+      //
+      // In addition to the timer, the tableName was added as a dependency to force the effect to execute again when it changes.
+      // The tableName value in the organization's customers page is composed with 2 parts: "OrganizationCustomers_" + organizationId. This allows 2 organizations to use different scroll position for their respective customers pages.
+      // When the page first load, it is possible for organizationId to not yet be defined (strange but it's routing related) and because of that this useEffect was executed but with an unknown scrollBarPosition.
+      // The organizationId will be set on the next render and this useEffect needs be executed again to have the list scrolled to the correct position.
+
+      var previousScrollTop = ref.current.scrollTop;
       ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+
+      // Note AD20250714: I was not able to create a test for the code below because it needs to run in a real browser otherwise the behavior with scrollTop does not match reality
+      /* istanbul ignore if */
+      if (ref.current.scrollTop === previousScrollTop) {
+        setTimeout(function () {
+          // using a timer to give a chance to the UI to populate the list
+          ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+        }, 250);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [props.tableName]); // forcing this effect to run again when the tableName changes
+
   return /*#__PURE__*/_react.default.createElement(DefaultFullTable, _extends({}, props, {
     ref: ref,
     saveScrollBarPosition: saveScrollBarPosition

package/dist/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js

@@ -0,0 +1,196 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TableProps = _interopRequireDefault(require("./TableProps"));
+var _tableHelpers = _interopRequireDefault(require("./tableHelpers"));
+var _useInMemoryPaging2 = _interopRequireDefault(require("../../../hooks/useInMemoryPaging"));
+var _Placeholder = _interopRequireDefault(require("./PredefinedElements/Placeholder"));
+var _comparisonHelper = require("../../../utils/comparisonHelper");
+var _reactIntl = require("react-intl");
+var _sharedMessages = _interopRequireDefault(require("../../../sharedMessages"));
+var _SearchControl = _interopRequireDefault(require("../Inputs/PredefinedElements/SearchControl"));
+var _Table = _interopRequireDefault(require("./Table"));
+var _SectionToolbar = _interopRequireDefault(require("./PredefinedElements/SectionToolbar"));
+var _TableInfoBar = _interopRequireDefault(require("./PredefinedElements/TableInfoBar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var listFilter = function listFilter(list, searchTerm, searchProperties) {
+  if (!searchTerm) {
+    return list;
+  }
+  return list.filter(function (item) {
+    return (0, _comparisonHelper.doesObjectContainsTextCaseInsensitive)(item, searchTerm, searchProperties);
+  });
+};
+function getTableInfo(totalCountLabelId, noRowsTotalCountLabelId, formatMessage, totalCount) {
+  if (totalCountLabelId && noRowsTotalCountLabelId) {
+    if (totalCount) {
+      return /*#__PURE__*/_react.default.createElement(_TableInfoBar.default, {
+        tableLabel: formatMessage(totalCountLabelId, {
+          quantity: totalCount
+        })
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_TableInfoBar.default, {
+      tableLabel: formatMessage(noRowsTotalCountLabelId)
+    });
+  }
+  return null;
+}
+var TableWithInMemoryPaging = function TableWithInMemoryPaging(_ref) {
+  var sortedRows = _ref.sortedRows,
+    tableName = _ref.tableName,
+    _ref$searchProperties = _ref.searchProperties,
+    searchProperties = _ref$searchProperties === void 0 ? [] : _ref$searchProperties,
+    columnDefs = _ref.columnDefs,
+    toolbarRightContent = _ref.toolbarRightContent,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 20 : _ref$pageSize,
+    _ref$onItemClick = _ref.onItemClick,
+    onItemClick = _ref$onItemClick === void 0 ? null : _ref$onItemClick,
+    _ref$isReadMode = _ref.isReadMode,
+    isReadMode = _ref$isReadMode === void 0 ? true : _ref$isReadMode,
+    _ref$totalCountLabelI = _ref.totalCountLabelId,
+    totalCountLabelId = _ref$totalCountLabelI === void 0 ? null : _ref$totalCountLabelI,
+    _ref$noRowsTotalCount = _ref.noRowsTotalCountLabelId,
+    noRowsTotalCountLabelId = _ref$noRowsTotalCount === void 0 ? null : _ref$noRowsTotalCount,
+    _ref$placeholderIcon = _ref.placeholderIcon,
+    placeholderIcon = _ref$placeholderIcon === void 0 ? null : _ref$placeholderIcon,
+    _ref$placeholderTitle = _ref.placeholderTitle,
+    placeholderTitle = _ref$placeholderTitle === void 0 ? null : _ref$placeholderTitle,
+    _ref$placeholderSubti = _ref.placeholderSubtitle,
+    placeholderSubtitle = _ref$placeholderSubti === void 0 ? null : _ref$placeholderSubti;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var tableRef = (0, _react.useRef)(null);
+  var initialSearchProperties = (0, _react.useRef)(searchProperties);
+  var searchPlaceholder = formatMessage(_sharedMessages.default.search);
+  var sortAndFilter = (0, _react.useCallback)(function (_ref2) {
+    var list = _ref2.list,
+      filters = _ref2.filters;
+    var searchTerm = filters.searchTerm;
+    return listFilter(list, searchTerm, initialSearchProperties.current);
+  }, [initialSearchProperties]);
+  var _useInMemoryPaging = (0, _useInMemoryPaging2.default)({
+      viewStateName: tableName,
+      tableRef: tableRef,
+      records: sortedRows,
+      pageSize: pageSize,
+      sortAndFilterFn: sortAndFilter
+    }),
+    rowsSlice = _useInMemoryPaging.rows,
+    scrollLoader = _useInMemoryPaging.scrollLoader,
+    currentPage = _useInMemoryPaging.currentPage,
+    filters = _useInMemoryPaging.filters,
+    setFilter = _useInMemoryPaging.setFilter,
+    totalCount = _useInMemoryPaging.totalCount;
+  var _buildHeaderAndRowFro = (0, _tableHelpers.default)(columnDefs, rowsSlice, isReadMode),
+    headers = _buildHeaderAndRowFro.headers,
+    rows = _buildHeaderAndRowFro.rows;
+  var placeholder = /*#__PURE__*/_react.default.createElement(_Placeholder.default, {
+    icon: placeholderIcon,
+    title: placeholderTitle,
+    subtitle: placeholderSubtitle,
+    cellList: columnDefs.map(function (col) {
+      return col.placeholder;
+    })
+  });
+  var onSearch = function onSearch(searchOption, searchText) {
+    setFilter(_objectSpread(_objectSpread({}, filters), {}, {
+      searchTerm: searchText
+    }));
+  };
+  var tableProps = new _TableProps.default();
+  tableProps.set(_TableProps.default.propNames.stickyHeader, true);
+  tableProps.set(_TableProps.default.propNames.withoutTopBorder, true);
+  tableProps.set(_TableProps.default.propNames.deepPropsComparation, true);
+  tableProps.set(_TableProps.default.propNames.saveScrollbarPosition, true);
+  tableProps.set(_TableProps.default.propNames.tableName, tableName);
+  if (onItemClick) {
+    tableProps.set(_TableProps.default.propNames.onRowClick, onItemClick);
+  }
+  var hasToolbar = toolbarRightContent || searchProperties.length > 0;
+  var toolbar = hasToolbar ? /*#__PURE__*/_react.default.createElement(_SectionToolbar.default, {
+    rightContent: toolbarRightContent
+  }, searchProperties.length > 0 && /*#__PURE__*/_react.default.createElement(_SearchControl.default, {
+    placeholder: searchPlaceholder,
+    defaultValue: filters.searchTerm,
+    onSearch: onSearch,
+    focusAndSelectSearchFieldOnLoad: false
+  })) : null;
+  var tableInfo = getTableInfo(totalCountLabelId, noRowsTotalCountLabelId, formatMessage, totalCount);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolbar, /*#__PURE__*/_react.default.createElement(_Table.default, {
+    ref: tableRef,
+    headers: headers,
+    tableInfo: tableInfo,
+    rows: rows,
+    tableProps: tableProps,
+    placeholder: placeholder,
+    scrollLoader: scrollLoader,
+    latestPage: currentPage,
+    pageLength: pageSize
+  }));
+};
+__signature__(TableWithInMemoryPaging, "useIntl{{ formatMessage }}\nuseRef{tableRef}\nuseRef{initialSearchProperties}\nuseCallback{sortAndFilter}\nuseInMemoryPaging{{\n\t\trows: rowsSlice,\n\t\tscrollLoader,\n\t\tcurrentPage,\n\t\tfilters,\n\t\tsetFilter,\n\t\ttotalCount,\n\t}}", function () {
+  return [_reactIntl.useIntl, _useInMemoryPaging2.default];
+});
+__signature__(TableWithInMemoryPaging, "useIntl{{ formatMessage }}\nuseRef{tableRef}\nuseRef{initialSearchProperties}\nuseCallback{sortAndFilter}\nuseInMemoryPaging{{\n\t\trows: rowsSlice,\n\t\tscrollLoader,\n\t\tcurrentPage,\n\t\tfilters,\n\t\tsetFilter,\n\t\ttotalCount,\n\t}}", function () {
+  return [_reactIntl.useIntl, _useInMemoryPaging2.default];
+});
+var _default = TableWithInMemoryPaging;
+var _default2 = _default;
+var _default3 = exports.default = _default2;
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(listFilter, "listFilter", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+  reactHotLoader.register(getTableInfo, "getTableInfo", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+  reactHotLoader.register(TableWithInMemoryPaging, "TableWithInMemoryPaging", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(listFilter, "listFilter", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+  reactHotLoader.register(getTableInfo, "getTableInfo", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+  reactHotLoader.register(TableWithInMemoryPaging, "TableWithInMemoryPaging", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/dist/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -274,6 +274,7 @@ var SearchControl = function SearchControl(_ref) {
   })));
   var searchSection = /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "data-qa": "searchButton",
+    "data-testid": "searchButton",
     variant: "contained",
     disabled: disabled,
     classes: {

package/dist/hooks/useInMemoryPaging.js

@@ -48,16 +48,12 @@ var useInMemoryPaging = function useInMemoryPaging(_ref) {
     _useViewState2 = _slicedToArray(_useViewState, 2),
     viewState = _useViewState2[0],
     updateViewState = _useViewState2[1];
-  var internalSortAndFilterFn = (0, _react.useRef)(sortAndFilterFn);
   var internalInitialSort = (0, _react.useRef)(initialSort);
   var internalInitialFilters = (0, _react.useRef)(initialFilters);
   var filters = (_viewState$filters = viewState.filters) != null ? _viewState$filters : internalInitialFilters.current;
   var sorting = (_viewState$sorting = viewState.sorting) != null ? _viewState$sorting : internalInitialSort.current;
   var currentPage = (_viewState$currentPag = viewState.currentPage) != null ? _viewState$currentPag : 1;
   var nextPageToLoad = (_viewState$nextPageTo = viewState.nextPageToLoad) != null ? _viewState$nextPageTo : 1;
-  if (internalSortAndFilterFn.current !== sortAndFilterFn) {
-    console.warn("[useInMemoryPaging]: a different value for sortAndFilterFn was detected between renders, ensure that it never changes (define it outside of your component).");
-  }
   var setFilter = function setFilter(filters) {
     scrollTableRef(tableRef);
     updateViewState("filters", filters);
@@ -77,13 +73,13 @@ var useInMemoryPaging = function useInMemoryPaging(_ref) {
     }
   }, [nextPageToLoad, updateViewState]);
   var _useMemo = (0, _react.useMemo)(function () {
-      var list = internalSortAndFilterFn.current({
+      var list = sortAndFilterFn({
         list: (0, _utils.unwrapImmutable)(records),
         filters: filters,
         sorting: sorting
       });
       return [(0, _utils.unwrapImmutable)(list.slice(0, currentPage * pageSize)), list.length];
-    }, [currentPage, pageSize, records, filters, sorting, internalSortAndFilterFn]),
+    }, [currentPage, pageSize, records, filters, sorting, sortAndFilterFn]),
     _useMemo2 = _slicedToArray(_useMemo, 2),
     rows = _useMemo2[0],
     totalCount = _useMemo2[1];
@@ -98,10 +94,10 @@ var useInMemoryPaging = function useInMemoryPaging(_ref) {
     totalCount: totalCount
   };
 };
-__signature__(useInMemoryPaging, "useViewState{[viewState, updateViewState]}\nuseRef{internalSortAndFilterFn}\nuseRef{internalInitialSort}\nuseRef{internalInitialFilters}\nuseCallback{scrollLoader}\nuseMemo{[rows, totalCount]}", function () {
+__signature__(useInMemoryPaging, "useViewState{[viewState, updateViewState]}\nuseRef{internalInitialSort}\nuseRef{internalInitialFilters}\nuseCallback{scrollLoader}\nuseMemo{[rows, totalCount]}", function () {
   return [_useViewState3.default];
 });
-__signature__(useInMemoryPaging, "useViewState{[viewState, updateViewState]}\nuseRef{internalSortAndFilterFn}\nuseRef{internalInitialSort}\nuseRef{internalInitialFilters}\nuseCallback{scrollLoader}\nuseMemo{[rows, totalCount]}", function () {
+__signature__(useInMemoryPaging, "useViewState{[viewState, updateViewState]}\nuseRef{internalInitialSort}\nuseRef{internalInitialFilters}\nuseCallback{scrollLoader}\nuseMemo{[rows, totalCount]}", function () {
   return [_useViewState3.default];
 });
 var _default = useInMemoryPaging;

package/dist/sharedMessages.js

@@ -313,6 +313,10 @@ var sharedMessages = (0, _reactIntl.defineMessages)({
   lastModifiedBy: {
     id: "orc-shared.lastModifiedBy",
     defaultMessage: "Last Modified By"
+  },
+  search: {
+    id: "orc-shared.search",
+    defaultMessage: "Search"
   }
 });
 var _default = sharedMessages;

package/dist/utils/comparisonHelper.js

@@ -128,7 +128,16 @@ var doesObjectContainsTextCaseInsensitive = exports.doesObjectContainsTextCaseIn
   var loweredSearchTerm = searchTerm.toLowerCase();
   var propertiesToSearch = properties.length > 0 ? properties : Object.keys(obj);
   var result = propertiesToSearch.find(function (key) {
-    return typeof obj[key] === "string" && caseInsensitiveIncludes(obj[key], loweredSearchTerm);
+    if (typeof obj[key] === "string") {
+      return caseInsensitiveIncludes(obj[key], loweredSearchTerm);
+    }
+    if (typeof obj[key] === "object" && obj[key]) {
+      var objectValues = Object.values(obj[key]);
+      return objectValues.find(function (ovKey) {
+        return typeof ovKey === "string" && caseInsensitiveIncludes(ovKey, loweredSearchTerm);
+      });
+    }
+    return false;
   }) !== undefined;
   return result;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.0-dev.12",
+	"version": "5.10.0-dev.13",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	container: {
+		display: "flex",
+		padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+		minHeight: theme.spacing(4),
+		alignItems: "center",
+		borderBottom: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
+	},
+	rightContent: {
+		justifyContent: "flex-end",
+		alignItems: "center",
+		display: "flex",
+		flex: 1,
+	},
+}));
+
+const SectionToolbar = ({ children, rightContent }) => {
+	const classes = useStyles();
+
+	const container = (
+		<div className={classes.container}>
+			{children}
+			{[
+				rightContent && (
+					<div key={"rightContent"} className={classes.rightContent}>
+						{rightContent}
+					</div>
+				),
+			]}
+		</div>
+	);
+
+	return container;
+};
+
+export default SectionToolbar;

package/src/components/MaterialUI/DataDisplay/Table.js

@@ -384,10 +384,35 @@ const FullTableWithSavedScrollbar = React.forwardRef((props, ref) => {
 
 	useEffect(() => {
 		if (scrollbarViewState.scrollBarPosition > 0) {
+			// The Table component usually display the provided list ASAP however it can happen that the Table is not fully rendered with its items when we attempt to change the scrollTop value.
+			// The timer should ensure that the list is rendered before attempting to change the scrollTop if the first attempt was not able to set the scroll position
+			// 		This edge case was found using these steps:
+			//          * Create an organization with 50+ customers
+			//          * Go to the customer section of the organization and scroll down a bit
+			//          * Wait 1 second for the scroll position to be stored
+			//          * Go to the organization list (click on the tab)
+			//          * Go back to the organization (its tab should still be visible)
+			//          * We expect the customer list to remember its scroll position but it wasn't the case
+			//
+			// In addition to the timer, the tableName was added as a dependency to force the effect to execute again when it changes.
+			// The tableName value in the organization's customers page is composed with 2 parts: "OrganizationCustomers_" + organizationId. This allows 2 organizations to use different scroll position for their respective customers pages.
+			// When the page first load, it is possible for organizationId to not yet be defined (strange but it's routing related) and because of that this useEffect was executed but with an unknown scrollBarPosition.
+			// The organizationId will be set on the next render and this useEffect needs be executed again to have the list scrolled to the correct position.
+
+			const previousScrollTop = ref.current.scrollTop;
 			ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+
+			// Note AD20250714: I was not able to create a test for the code below because it needs to run in a real browser otherwise the behavior with scrollTop does not match reality
+			/* istanbul ignore if */
+			if (ref.current.scrollTop === previousScrollTop) {
+				setTimeout(() => {
+					// using a timer to give a chance to the UI to populate the list
+					ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+				}, 250);
+			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [props.tableName]); // forcing this effect to run again when the tableName changes
 
 	return <DefaultFullTable {...props} ref={ref} saveScrollBarPosition={saveScrollBarPosition} />;
 });

package/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.js

@@ -0,0 +1,144 @@
+import React, { useCallback, useRef } from "react";
+import TableProps from "./TableProps";
+import buildHeaderAndRowFromConfig from "./tableHelpers";
+import useInMemoryPaging from "../../../hooks/useInMemoryPaging";
+import Placeholder from "./PredefinedElements/Placeholder";
+import { doesObjectContainsTextCaseInsensitive } from "../../../utils/comparisonHelper";
+import { useIntl } from "react-intl";
+import sharedMessages from "../../../sharedMessages";
+import SearchControl from "../Inputs/PredefinedElements/SearchControl";
+import Table from "./Table";
+import SectionToolbar from "./PredefinedElements/SectionToolbar";
+import TableInfoBar from "./PredefinedElements/TableInfoBar";
+
+const listFilter = (list, searchTerm, searchProperties) => {
+	if (!searchTerm) {
+		return list;
+	}
+
+	return list.filter(item => doesObjectContainsTextCaseInsensitive(item, searchTerm, searchProperties));
+};
+
+function getTableInfo(totalCountLabelId, noRowsTotalCountLabelId, formatMessage, totalCount) {
+	if (totalCountLabelId && noRowsTotalCountLabelId) {
+		if (totalCount) {
+			return (
+				<TableInfoBar
+					tableLabel={formatMessage(totalCountLabelId, {
+						quantity: totalCount,
+					})}
+				/>
+			);
+		}
+		return <TableInfoBar tableLabel={formatMessage(noRowsTotalCountLabelId)} />;
+	}
+
+	return null;
+}
+
+const TableWithInMemoryPaging = ({
+	sortedRows,
+	tableName,
+	searchProperties = [],
+	columnDefs,
+	toolbarRightContent,
+	pageSize = 20,
+	onItemClick = null,
+	isReadMode = true,
+	totalCountLabelId = null,
+	noRowsTotalCountLabelId = null,
+	placeholderIcon = null,
+	placeholderTitle = null,
+	placeholderSubtitle = null,
+}) => {
+	const { formatMessage } = useIntl();
+	const tableRef = useRef(null);
+	const initialSearchProperties = useRef(searchProperties);
+	const searchPlaceholder = formatMessage(sharedMessages.search);
+	const sortAndFilter = useCallback(
+		({ list, filters }) => {
+			const { searchTerm } = filters;
+
+			return listFilter(list, searchTerm, initialSearchProperties.current);
+		},
+		[initialSearchProperties],
+	);
+
+	const {
+		rows: rowsSlice,
+		scrollLoader,
+		currentPage,
+		filters,
+		setFilter,
+		totalCount,
+	} = useInMemoryPaging({
+		viewStateName: tableName,
+		tableRef,
+		records: sortedRows,
+		pageSize: pageSize,
+		sortAndFilterFn: sortAndFilter,
+	});
+
+	const { headers, rows } = buildHeaderAndRowFromConfig(columnDefs, rowsSlice, isReadMode);
+	const placeholder = (
+		<Placeholder
+			icon={placeholderIcon}
+			title={placeholderTitle}
+			subtitle={placeholderSubtitle}
+			cellList={columnDefs.map(col => col.placeholder)}
+		/>
+	);
+
+	const onSearch = (searchOption, searchText) => {
+		setFilter({
+			...filters,
+			searchTerm: searchText,
+		});
+	};
+
+	const tableProps = new TableProps();
+	tableProps.set(TableProps.propNames.stickyHeader, true);
+	tableProps.set(TableProps.propNames.withoutTopBorder, true);
+	tableProps.set(TableProps.propNames.deepPropsComparation, true);
+	tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+	tableProps.set(TableProps.propNames.tableName, tableName);
+	if (onItemClick) {
+		tableProps.set(TableProps.propNames.onRowClick, onItemClick);
+	}
+
+	const hasToolbar = toolbarRightContent || searchProperties.length > 0;
+	const toolbar = hasToolbar ? (
+		<SectionToolbar rightContent={toolbarRightContent}>
+			{searchProperties.length > 0 && (
+				<SearchControl
+					placeholder={searchPlaceholder}
+					defaultValue={filters.searchTerm}
+					onSearch={onSearch}
+					focusAndSelectSearchFieldOnLoad={false}
+				/>
+			)}
+		</SectionToolbar>
+	) : null;
+
+	const tableInfo = getTableInfo(totalCountLabelId, noRowsTotalCountLabelId, formatMessage, totalCount);
+
+	return (
+		<>
+			{toolbar}
+
+			<Table
+				ref={tableRef}
+				headers={headers}
+				tableInfo={tableInfo}
+				rows={rows}
+				tableProps={tableProps}
+				placeholder={placeholder}
+				scrollLoader={scrollLoader}
+				latestPage={currentPage}
+				pageLength={pageSize}
+			/>
+		</>
+	);
+};
+
+export default TableWithInMemoryPaging;

package/src/components/MaterialUI/DataDisplay/TableWithInMemoryPaging.test.js

@@ -0,0 +1,421 @@
+import React from "react";
+import sinon from "sinon";
+import { mount } from "enzyme";
+import Table from "./Table";
+import { buildHeaderAndRowFromConfig } from "./tableHelpers";
+import TableInfoBar from "./PredefinedElements/TableInfoBar";
+import { extractMessages } from "../../../utils/testUtils";
+import TableProps from "./TableProps";
+import { createMuiTheme } from "./../../../utils/testUtils";
+import { TestWrapper } from "../../../utils/testUtils";
+import TableWithInMemoryPaging from "./TableWithInMemoryPaging";
+import sharedMessages from "../../../sharedMessages";
+import SearchControl from "../Inputs/PredefinedElements/SearchControl";
+import SectionToolbar from "./PredefinedElements/SectionToolbar";
+import buildStore from "../../../buildStore";
+import { fireEvent, render, getByPlaceholderText, getByTestId, queryAllByRole } from "@testing-library/react";
+import Placeholder from "./PredefinedElements/Placeholder";
+
+const messages = extractMessages(sharedMessages);
+
+const getColumnDefs = () => [
+	{
+		fieldName: "name",
+		label: "name",
+		placeholder: "t",
+	},
+];
+
+const standardListRecords = Array.from(Array(50).keys()).map(k => ({ name: "n" + k, id: k }));
+
+describe("TableWithInMemoryPaging", () => {
+	const theme = createMuiTheme();
+
+	let store;
+
+	beforeEach(() => {
+		global.SUPPORTED_LOCALES = undefined;
+		store = buildStore([]); // use the real reducers
+	});
+
+	afterEach(() => {
+		delete process.env.SUPPORTED_LOCALES;
+	});
+
+	it("Renders TableWithInMemoryPaging", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<TableWithInMemoryPaging
+					sortedRows={standardListRecords}
+					tableName={"StateName"}
+					columnDefs={configDefs}
+					pageSize={20}
+				/>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper provider={{ store }} memoryRouter intlProvider stylesProvider>
+				<Table rows={rows} headers={headers} tableProps={tableProps} />
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with onItemClick", () => {
+		const configDefs = getColumnDefs();
+		const onItemClick = sinon.spy().named("onItemClick");
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<TableWithInMemoryPaging
+					sortedRows={standardListRecords}
+					tableName={"StateName"}
+					columnDefs={configDefs}
+					pageSize={20}
+					onItemClick={onItemClick}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const row = mountedComponent.find("td").first();
+
+		row.simulate("click");
+		expect(onItemClick, "was called once");
+	});
+
+	it("Renders TableWithInMemoryPaging with right toolbar", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const toolbarRightContent = <div>hello</div>;
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						toolbarRightContent={toolbarRightContent}
+						pageSize={20}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<SectionToolbar rightContent={toolbarRightContent}></SectionToolbar>
+					<Table rows={rows} headers={headers} tableProps={tableProps} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with search", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						pageSize={20}
+						searchProperties={["name"]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<SectionToolbar>
+						<SearchControl placeholder="Search" />
+					</SectionToolbar>
+					<Table rows={rows} headers={headers} tableProps={tableProps} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with search and right toolbar", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+		const toolbarRightContent = <div>hello</div>;
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						searchProperties={["name"]}
+						toolbarRightContent={toolbarRightContent}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<SectionToolbar rightContent={toolbarRightContent}>
+						<SearchControl placeholder="Search" />
+					</SectionToolbar>
+					<Table rows={rows} headers={headers} tableProps={tableProps} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging search for something", () => {
+		const configDefs = getColumnDefs();
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						searchProperties={["name"]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const { container } = render(component);
+
+		const searchInput = getByPlaceholderText(container, "Search");
+		const searchButton = getByTestId(container, "searchButton");
+
+		const beforeTableRowCount = queryAllByRole(container, "cell").length;
+		expect(beforeTableRowCount, "not to be", 0);
+
+		fireEvent.change(searchInput, {
+			target: {
+				value: "invalid text",
+			},
+		});
+		fireEvent.click(searchButton);
+
+		const afterTableRowCount = queryAllByRole(container, "getAllByRole").length;
+
+		expect(beforeTableRowCount, "not to be", afterTableRowCount);
+		expect(afterTableRowCount, "to be", 0);
+	});
+
+	it("Renders TableWithInMemoryPaging with filled count bar", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, standardListRecords.slice(0, 20));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={standardListRecords}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						totalCountLabelId={sharedMessages.about}
+						noRowsTotalCountLabelId={sharedMessages.help}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const tableInfo = <TableInfoBar tableLabel={"About"} />;
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<Table rows={rows} headers={headers} tableProps={tableProps} tableInfo={tableInfo} />
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders TableWithInMemoryPaging with empty count bar and with placeholder", () => {
+		const configDefs = getColumnDefs();
+		const { headers, rows } = buildHeaderAndRowFromConfig(configDefs, []);
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<TableWithInMemoryPaging
+						sortedRows={[]}
+						tableName={"StateName"}
+						columnDefs={configDefs}
+						totalCountLabelId={sharedMessages.about}
+						noRowsTotalCountLabelId={sharedMessages.help}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.stickyHeader, true);
+		tableProps.set(TableProps.propNames.withoutTopBorder, true);
+		tableProps.set(TableProps.propNames.deepPropsComparation, true);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+		tableProps.set(TableProps.propNames.tableName, "StateName");
+
+		const tableInfo = <TableInfoBar tableLabel={"Help"} />;
+
+		const placeholder = <Placeholder cellList={configDefs.map(col => col.placeholder)} />;
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<Table
+						rows={rows}
+						headers={headers}
+						tableProps={tableProps}
+						tableInfo={tableInfo}
+						placeholder={placeholder}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+});

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -255,6 +255,7 @@ const SearchControl = ({
 	const searchSection = (
 		<IconButton
 			data-qa="searchButton"
+			data-testid="searchButton"
 			variant="contained"
 			disabled={disabled}
 			classes={{ root: classes.searchButton }}

package/src/hooks/useInMemoryPaging.js

@@ -20,7 +20,6 @@ const useInMemoryPaging = ({
 	sortAndFilterFn,
 }) => {
 	const [viewState, updateViewState] = useViewState(viewStateName);
-	const internalSortAndFilterFn = useRef(sortAndFilterFn);
 	const internalInitialSort = useRef(initialSort);
 	const internalInitialFilters = useRef(initialFilters);
 
@@ -29,12 +28,6 @@ const useInMemoryPaging = ({
 	const currentPage = viewState.currentPage ?? 1;
 	const nextPageToLoad = viewState.nextPageToLoad ?? 1;
 
-	if (internalSortAndFilterFn.current !== sortAndFilterFn) {
-		console.warn(
-			"[useInMemoryPaging]: a different value for sortAndFilterFn was detected between renders, ensure that it never changes (define it outside of your component).",
-		);
-	}
-
 	const setFilter = filters => {
 		scrollTableRef(tableRef);
 		updateViewState("filters", filters);
@@ -60,13 +53,13 @@ const useInMemoryPaging = ({
 	);
 
 	const [rows, totalCount] = useMemo(() => {
-		let list = internalSortAndFilterFn.current({
+		const list = sortAndFilterFn({
 			list: unwrapImmutable(records),
 			filters: filters,
 			sorting: sorting,
 		});
 		return [unwrapImmutable(list.slice(0, currentPage * pageSize)), list.length];
-	}, [currentPage, pageSize, records, filters, sorting, internalSortAndFilterFn]);
+	}, [currentPage, pageSize, records, filters, sorting, sortAndFilterFn]);
 
 	return {
 		rows,

package/src/hooks/useInMemoryPaging.test.js

@@ -512,40 +512,4 @@ describe.each([
 			],
 		});
 	});
-
-	it("mutating sortAndFilterFn should display a warning", () => {
-		state = state.setIn(
-			["view", "inMemory"],
-			Immutable.fromJS({
-				currentPage: 2,
-				nextPageToLoad: 2,
-			}),
-		);
-
-		const tableRef = {
-			current: {
-				scrollToTop: sinon.spy().named("tableRefcurrent"),
-			},
-		};
-
-		const component = (
-			<Provider store={store}>
-				<TestComp allRecords={listValues} stateName={"inMemory"} sortAndFilterFn={sortAndFilter} tableRef={tableRef} />
-			</Provider>
-		);
-
-		const mountedComponent = mount(component);
-		mountedComponent.setProps({
-			children: (
-				<TestComp allRecords={listValues} stateName={"inMemory"} sortAndFilterFn={list => list} tableRef={tableRef} />
-			),
-		});
-		mountedComponent.update();
-
-		expect(console.warn, "to have a call satisfying", {
-			args: [
-				"[useInMemoryPaging]: a different value for sortAndFilterFn was detected between renders, ensure that it never changes (define it outside of your component).",
-			],
-		});
-	});
 });

package/src/sharedMessages.js

@@ -299,6 +299,10 @@ const sharedMessages = defineMessages({
 		id: "orc-shared.lastModifiedBy",
 		defaultMessage: "Last Modified By",
 	},
+	search: {
+		id: "orc-shared.search",
+		defaultMessage: "Search",
+	},
 });
 
 export default sharedMessages;

package/src/translations/en-US.json

@@ -58,6 +58,7 @@
 	"orc-shared.scopeChangeWithUnsavedDataConfirmation": "One or more entities opened will be closed with unsaved data. Would you like to change scope?",
 	"orc-shared.scopeChangeWithUnsavedDataTitle": "Confirm scope change without saving data",
 	"orc-shared.scopeFilterPlaceholder": "Type a scope name",
+	"orc-shared.search": "Search",
 	"orc-shared.shared": "Shared",
 	"orc-shared.showFewerLanguages": "Show fewer languages",
 	"orc-shared.showMoreLanguages": "Show more languages",

package/src/translations/fr-CA.json

@@ -58,6 +58,7 @@
 	"orc-shared.scopeChangeWithUnsavedDataConfirmation": "Une ou plusieurs entités ouvertes seront fermées, entraînant la perte de données non-sauvegardées. Voulez-vous vraiment changer de Scope?",
 	"orc-shared.scopeChangeWithUnsavedDataTitle": "Confirmation du changement de Scope sans sauvegarde",
 	"orc-shared.scopeFilterPlaceholder": "Entrez un nom de Scope",
+	"orc-shared.search": "Recherche",
 	"orc-shared.shared": "Partagé",
 	"orc-shared.showFewerLanguages": "Afficher moins de langues",
 	"orc-shared.showMoreLanguages": "Afficher plus de langues",

package/src/utils/comparisonHelper.js

@@ -117,8 +117,19 @@ export const doesObjectContainsTextCaseInsensitive = (obj, searchTerm, propertie
 	const loweredSearchTerm = searchTerm.toLowerCase();
 	const propertiesToSearch = properties.length > 0 ? properties : Object.keys(obj);
 	const result =
-		propertiesToSearch.find(
-			key => typeof obj[key] === "string" && caseInsensitiveIncludes(obj[key], loweredSearchTerm),
-		) !== undefined;
+		propertiesToSearch.find(key => {
+			if (typeof obj[key] === "string") {
+				return caseInsensitiveIncludes(obj[key], loweredSearchTerm);
+			}
+
+			if (typeof obj[key] === "object" && obj[key]) {
+				const objectValues = Object.values(obj[key]);
+				return objectValues.find(
+					ovKey => typeof ovKey === "string" && caseInsensitiveIncludes(ovKey, loweredSearchTerm),
+				);
+			}
+
+			return false;
+		}) !== undefined;
 	return result;
 };

package/src/utils/comparisonHelper.test.js

@@ -227,8 +227,18 @@ describe("doesObjectContainsTextCaseInsensitive function", () => {
 		expect(result, "to be", true);
 	});
 
-	it("only look at first level properties (not deep)", function () {
+	it("does look at second level properties of type string", function () {
 		const result = doesObjectContainsTextCaseInsensitive({ prop: { prop2: "VALUE" } }, "val");
+		expect(result, "to be", true);
+	});
+
+	it("does not look at second level properties of type number", function () {
+		const result = doesObjectContainsTextCaseInsensitive({ prop: { prop2: 123 } }, "val");
+		expect(result, "to be", false);
+	});
+
+	it("does not look at third level properties", function () {
+		const result = doesObjectContainsTextCaseInsensitive({ prop: { prop2: { prop3: "VALUE" } } }, "val");
 		expect(result, "to be", false);
 	});