@bigbinary/neeto-approvals-frontend 0.2.8 → 0.2.10

package/dist/index.cjs.js

@@ -23,8 +23,8 @@ var pure = require('@bigbinary/neeto-commons-frontend/pure');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var formik = require('@bigbinary/neetoui/formik');
 var yup = require('yup');
-var neetoIcons = require('@bigbinary/neeto-icons');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -57,6 +57,7 @@ var utc__default = /*#__PURE__*/_interopDefaultLegacy(utc);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 
 function _typeof$1(obj) {
@@ -168,35 +169,6 @@ var routes = {
   "public": "approvals/public/request/:id"
 };
 
-new URLSearchParams(window.location.search);
-var DEFAULT_FILTER_VALUES = {
-  searchTerm: "",
-  sortBy: "",
-  orderBy: ""
-};
-var SEARCH_DELAY = 750;
-var STATUSES = {
-  approved: "approved",
-  rejected: "rejected",
-  pending: "pending",
-  cancelled: "cancelled"
-};
-var STATUS_TAG_STYLE = {
-  pending: "primary",
-  approved: "success",
-  rejected: "danger",
-  cancelled: "warning"
-};
-var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
-  message: "",
-  additionalInfo: ""
-};
-var STATUS_UPDATED_BY = {
-  rejected: i18next.t("neetoApprovals.common.rejectedBy"),
-  approved: i18next.t("neetoApprovals.common.approvedBy"),
-  cancelled: i18next.t("neetoApprovals.common.cancelledBy")
-};
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -322,9 +294,9 @@ var findBy = /*#__PURE__*/ramda.curry(function (pattern, array) {
   return array.find(matches(pattern));
 });
 
-var handleEmptyPage = function handleEmptyPage(data, pageProperties, handleTablePagination) {
+var handleEmptyPage = function handleEmptyPage(data, pageProperties, handlePageChange) {
   if (ramda.isEmpty(data) && pageProperties.page !== 1) {
-    handleTablePagination(pageProperties.page - 1, pageProperties.pageSize);
+    handlePageChange(pageProperties.page - 1, pageProperties.pageSize);
   }
 };
 
@@ -385,49 +357,63 @@ var useUpdateRequest = function useUpdateRequest(options) {
   }, options));
 };
 
-var useUrlSearchParams = function useUrlSearchParams() {
-  var _useLocation = reactRouterDom.useLocation(),
-    search = _useLocation.search;
-  return React.useMemo(function () {
-    return new URLSearchParams(search);
-  }, [search]);
-};
-
 var usePaginate = function usePaginate() {
-  var urlParams = useUrlSearchParams();
   var _useState = React.useState({
-      page: Number(urlParams.get("page")) || constants.DEFAULT_PAGE_INDEX,
-      pageSize: Number(urlParams.get("size")) || constants.DEFAULT_PAGE_SIZE
+      page: constants.DEFAULT_PAGE_INDEX,
+      pageSize: constants.DEFAULT_PAGE_SIZE
     }),
     _useState2 = _slicedToArray$1(_useState, 2),
     pageProperties = _useState2[0],
     setPageProperties = _useState2[1];
-  var history = reactRouterDom.useHistory();
-  var handleTablePagination = React.useCallback(function (page, pageSize) {
-    urlParams.set("page", page);
-    urlParams.set("size", pageSize);
-    history.push({
-      search: urlParams.toString()
+  var resetPageProperties = function resetPageProperties() {
+    return setPageProperties({
+      page: constants.DEFAULT_PAGE_INDEX,
+      pageSize: constants.DEFAULT_PAGE_SIZE
     });
+  };
+  var handlePageChange = function handlePageChange(page, pageSize) {
     setPageProperties({
       page: page,
       pageSize: pageSize
     });
-  }, [urlParams, history]);
-  React.useEffect(function () {
-    var page = urlParams.get("page") || constants.DEFAULT_PAGE_INDEX;
-    var pageSize = urlParams.get("size") || constants.DEFAULT_PAGE_SIZE;
-    setPageProperties({
-      page: Number(page),
-      pageSize: Number(pageSize)
-    });
-  }, [urlParams]);
+  };
   return {
     pageProperties: pageProperties,
-    handleTablePagination: handleTablePagination
+    resetPageProperties: resetPageProperties,
+    handlePageChange: handlePageChange
   };
 };
 
+new URLSearchParams(window.location.search);
+var DEFAULT_FILTER_VALUES = {
+  searchTerm: "",
+  sortBy: "",
+  orderBy: ""
+};
+var SEARCH_DELAY = 750;
+var STATUSES = {
+  approved: "approved",
+  rejected: "rejected",
+  pending: "pending",
+  cancelled: "cancelled"
+};
+var STATUS_TAG_STYLE = {
+  pending: "primary",
+  approved: "success",
+  rejected: "danger",
+  cancelled: "warning"
+};
+var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
+  message: "",
+  additionalInfo: ""
+};
+var STATUS_UPDATED_BY = {
+  rejected: i18next.t("neetoApprovals.common.rejectedBy"),
+  approved: i18next.t("neetoApprovals.common.approvedBy"),
+  cancelled: i18next.t("neetoApprovals.common.cancelledBy")
+};
+var DATA_CY_KEY = "data-cy";
+
 dayjs__default["default"].extend(utc__default["default"]);
 dayjs__default["default"].extend(timezone__default["default"]);
 var updateApprovalDetails = function updateApprovalDetails(_ref) {
@@ -634,7 +620,7 @@ var History = function History(_ref) {
   var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, SEARCH_DELAY);
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange;
   var _useState3 = React.useState({}),
     _useState4 = _slicedToArray$1(_useState3, 2),
     approvalDetails = _useState4[0],
@@ -647,8 +633,9 @@ var History = function History(_ref) {
         status: [STATUSES.approved, STATUSES.rejected, STATUSES.cancelled]
       }),
       options: {
-        onSuccess: function onSuccess(requests) {
-          handleEmptyPage(requests, pageProperties, handleTablePagination);
+        onSuccess: function onSuccess(_ref2) {
+          var requests = _ref2.requests;
+          handleEmptyPage(requests, pageProperties, handlePageChange);
           setApprovalDetails(function (approvalDetails) {
             return updateApprovalDetails({
               requestsData: requests,
@@ -667,7 +654,7 @@ var History = function History(_ref) {
     totalCount = _useFetchRequests$dat4 === void 0 ? 0 : _useFetchRequests$dat4;
   var handleTableChange = function handleTableChange(_, __, sorter) {
     setFilters(_objectSpread$a(_objectSpread$a({}, filters), {}, {
-      sortBy: camelToSnakeCase(sorter.field),
+      sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: sorter.order
     }));
   };
@@ -680,8 +667,8 @@ var History = function History(_ref) {
     currentPageNumber: pageProperties.page,
     defaultPageSize: pageProperties.pageSize,
     rowData: approvalHistories,
+    handlePageChange: handlePageChange,
     totalCount: totalCount,
-    handlePageChange: handleTablePagination,
     paginationProps: {
       hideOnSinglePage: (approvalHistories === null || approvalHistories === void 0 ? void 0 : approvalHistories.length) < constants.DEFAULT_PAGE_SIZE + 1
     },
@@ -724,7 +711,7 @@ var PendingRequests = function PendingRequests(_ref) {
   var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, SEARCH_DELAY);
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFetchRequests = useFetchRequests({
@@ -733,8 +720,9 @@ var PendingRequests = function PendingRequests(_ref) {
         status: [STATUSES.pending]
       }),
       options: {
-        onSuccess: function onSuccess(requests) {
-          handleEmptyPage(requests, pageProperties, handleTablePagination);
+        onSuccess: function onSuccess(_ref2) {
+          var requests = _ref2.requests;
+          handleEmptyPage(requests, pageProperties, handlePageChange);
         }
       },
       requestUrl: requestUrl
@@ -750,7 +738,7 @@ var PendingRequests = function PendingRequests(_ref) {
     isLoading = _useUpdateRequest.isLoading;
   var handleTableChange = function handleTableChange(_, __, sorter) {
     setFilters(_objectSpread$9(_objectSpread$9({}, filters), {}, {
-      sortBy: camelToSnakeCase(sorter.field),
+      sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: sorter.order
     }));
   };
@@ -773,8 +761,8 @@ var PendingRequests = function PendingRequests(_ref) {
     currentPageNumber: pageProperties.page,
     defaultPageSize: pageProperties.pageSize,
     rowData: pendingRequests,
+    handlePageChange: handlePageChange,
     totalCount: totalCount,
-    handlePageChange: handleTablePagination,
     paginationProps: {
       hideOnSinglePage: (pendingRequests === null || pendingRequests === void 0 ? void 0 : pendingRequests.length) < constants.DEFAULT_PAGE_SIZE + 1
     },
@@ -1049,10 +1037,12 @@ var Form$1 = function Form(_ref) {
   }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
     className: "flex gap-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-approvals-templates-save-template-btn",
     label: t("neetoApprovals.buttons.saveChanges"),
     loading: isLoading,
     type: "submit"
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-approvals-templates-close-template-form-btn",
     label: t("neetoApprovals.buttons.cancel"),
     style: "text",
     onClick: onClose
@@ -1189,53 +1179,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
   }))));
 };
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var columnData = function columnData(_ref) {
-  var onEditClick = _ref.onEditClick,
-    onDeleteClick = _ref.onDeleteClick;
-  return [{
-    dataIndex: "name",
-    key: "name",
-    sorter: true,
-    title: i18next__default["default"].t("neetoApprovals.common.name")
-  }, {
-    dataIndex: "approverName",
-    key: "approverName",
-    title: i18next__default["default"].t("neetoApprovals.common.approver", constants.SINGULAR)
-  }, {
-    key: "actions",
-    ellipsis: true,
-    render: function render(_, template) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex flex-row items-center justify-end space-x-3",
-        onClick: function onClick(event) {
-          return event.stopPropagation();
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-        autoWidth: true,
-        buttonProps: {
-          style: "text"
-        },
-        className: "flex-shrink-0",
-        icon: neetoIcons.MenuHorizontal,
-        position: "bottom-end",
-        strategy: "fixed"
-      }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        "data-cy": "approvers-edit-button",
-        onClick: function onClick() {
-          return onEditClick(template);
-        }
-      }, i18next__default["default"].t("neetoApprovals.common.edit")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        "data-cy": "approvers-delete-button",
-        onClick: function onClick() {
-          return onDeleteClick(template);
-        }
-      }, i18next__default["default"].t("neetoApprovals.common.delete")))));
-    }
-  }];
-};
-
 var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
   var entity = _ref.entity,
     url = _ref.url;
@@ -1256,14 +1199,14 @@ var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
   });
 };
 
-var _excluded$1 = ["entity", "columnData", "items", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick"];
+var _excluded$1 = ["entity", "columnData", "rowData", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick", "pageProperties"];
 function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Table = function Table(_ref) {
   var _t;
   var entity = _ref.entity,
     columnData = _ref.columnData,
-    items = _ref.items,
+    rowData = _ref.rowData,
     totalCount = _ref.totalCount,
     filters = _ref.filters,
     setFilters = _ref.setFilters,
@@ -1271,10 +1214,8 @@ var Table = function Table(_ref) {
     helpDocUrl = _ref.helpDocUrl,
     onEditClick = _ref.onEditClick,
     onDeleteClick = _ref.onDeleteClick,
+    pageProperties = _ref.pageProperties,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _usePaginate = usePaginate(),
-    pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var columns = columnData({
@@ -1301,7 +1242,7 @@ var Table = function Table(_ref) {
       url: helpDocUrl
     })
   };
-  if (ramda.isEmpty(items)) {
+  if (ramda.isEmpty(rowData)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full flex-grow items-center justify-center"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({
@@ -1318,55 +1259,111 @@ var Table = function Table(_ref) {
     columnData: columns,
     currentPageNumber: pageProperties.page,
     defaultPageSize: pageProperties.pageSize,
-    handlePageChange: handleTablePagination,
-    rowData: items,
+    scroll: {
+      x: 0
+    },
+    tableLayout: "fixed",
     paginationProps: {
-      hideOnSinglePage: (items === null || items === void 0 ? void 0 : items.length) < constants.DEFAULT_PAGE_SIZE + 1
+      hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < constants.DEFAULT_PAGE_SIZE + 1
     },
     onChange: handleTableChange
   }, _objectSpread$5({
+    rowData: rowData,
     totalCount: totalCount
   }, otherProps))));
 };
 
-var _excluded = ["filters", "isNewTemplatePaneOpen", "setFilters", "setIsNewTemplatePaneOpen", "helpDocUrl"];
+var columnData = function columnData(_ref) {
+  var onEditClick = _ref.onEditClick,
+    onDeleteClick = _ref.onDeleteClick;
+  return [{
+    dataIndex: "name",
+    key: "name",
+    sorter: true,
+    title: i18next__default["default"].t("neetoApprovals.common.name"),
+    ellipsis: true,
+    render: function render(_, template) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        className: "truncate",
+        style: "body2"
+      }, template.name), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+        dropdownProps: {
+          strategy: "fixed",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        },
+        menuItems: [_defineProperty({
+          key: "edit",
+          label: i18next__default["default"].t("neetoApprovals.common.edit"),
+          onClick: function onClick(event) {
+            return onEditClick(event, template);
+          }
+        }, DATA_CY_KEY, "neeto-approvals-templates-edit-template-btn"), _defineProperty({
+          key: "delete",
+          label: i18next__default["default"].t("neetoApprovals.common.delete"),
+          onClick: function onClick(event) {
+            return onDeleteClick(event, template);
+          }
+        }, DATA_CY_KEY, "neeto-approvals-templates-delete-template-btn")]
+      }));
+    }
+  }, {
+    dataIndex: "approverName",
+    key: "approverName",
+    sorter: true,
+    title: i18next__default["default"].t("neetoApprovals.common.approver", constants.SINGULAR)
+  }];
+};
+
+var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpen", "helpDocUrl"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Templates = function Templates(_ref) {
   var _t, _t2, _t3;
-  var filters = _ref.filters,
+  var searchTerm = _ref.searchTerm,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
-    setFilters = _ref.setFilters,
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen,
     helpDocUrl = _ref.helpDocUrl,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState({}),
+  var _useState = React.useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray$1(_useState, 2),
-    selectedTemplate = _useState2[0],
-    setSelectedTemplate = _useState2[1];
-  var _useState3 = React.useState(false),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = React.useState({}),
     _useState4 = _slicedToArray$1(_useState3, 2),
-    isDeleteAlertOpen = _useState4[0],
-    setIsDeleteAlertOpen = _useState4[1];
+    selectedTemplate = _useState4[0],
+    setSelectedTemplate = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray$1(_useState5, 2),
-    isEditPaneOpen = _useState6[0],
-    setIsEditPaneOpen = _useState6[1];
+    isDeleteAlertOpen = _useState6[0],
+    setIsDeleteAlertOpen = _useState6[1];
   var _useState7 = React.useState(false),
     _useState8 = _slicedToArray$1(_useState7, 2),
-    isShowPaneOpen = _useState8[0],
-    setIsShowPaneOpen = _useState8[1];
-  var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, SEARCH_DELAY);
+    isEditPaneOpen = _useState8[0],
+    setIsEditPaneOpen = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray$1(_useState9, 2),
+    isShowPaneOpen = _useState10[0],
+    setIsShowPaneOpen = _useState10[1];
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange,
+    resetPageProperties = _usePaginate.resetPageProperties;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var debouncedSearchTerm = reactUtils.useDebounce(searchTerm, SEARCH_DELAY);
+  React.useEffect(function () {
+    resetPageProperties();
+  }, [searchTerm]);
   var _useFetchTemplates = useFetchTemplates(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, pageProperties), filters), {}, {
       searchTerm: debouncedSearchTerm.trim()
     }), {
-      onSuccess: function onSuccess(templates) {
-        handleEmptyPage(templates, pageProperties, handleTablePagination);
+      onSuccess: function onSuccess(_ref2) {
+        var templates = _ref2.templates;
+        handleEmptyPage(templates, pageProperties, handlePageChange);
       }
     }),
     _useFetchTemplates$da = _useFetchTemplates.data,
@@ -1386,7 +1383,8 @@ var Templates = function Templates(_ref) {
       setIsShowPaneOpen(false);
     }
   }, [selectedTemplate]);
-  var onEditClick = function onEditClick(template) {
+  var onEditClick = function onEditClick(event, template) {
+    event.stopPropagation();
     setSelectedTemplate(template);
     setIsEditPaneOpen(true);
   };
@@ -1394,7 +1392,8 @@ var Templates = function Templates(_ref) {
     setSelectedTemplate(templateDetails);
     setIsShowPaneOpen(true);
   };
-  var onDeleteClick = function onDeleteClick(template) {
+  var onDeleteClick = function onDeleteClick(event, template) {
+    event.stopPropagation();
     setSelectedTemplate(template);
     setIsDeleteAlertOpen(true);
   };
@@ -1406,15 +1405,18 @@ var Templates = function Templates(_ref) {
   };
   var entity = (_t = t("neetoApprovals.common.template", constants.PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isTemplateLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(Table, {
-    items: templates,
+    rowData: templates,
     setIsPaneOpen: setIsNewTemplatePaneOpen,
     columnData: columnData,
     entity: entity,
     filters: filters,
+    handlePageChange: handlePageChange,
     helpDocUrl: helpDocUrl,
     onDeleteClick: onDeleteClick,
     onEditClick: onEditClick,
     onRowClick: onRowClick,
+    pageProperties: pageProperties,
+    searchTerm: searchTerm,
     setFilters: setFilters,
     totalCount: totalCount
   }), /*#__PURE__*/React__default["default"].createElement(Create, _extends({
@@ -1463,16 +1465,14 @@ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var createRoutes = function createRoutes(_ref) {
   var config = _ref.config,
-    filters = _ref.filters,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
-    setFilters = _ref.setFilters,
+    searchTerm = _ref.searchTerm,
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
   return [{
     component: function component() {
       return /*#__PURE__*/React__default["default"].createElement(Templates, _objectSpread$3({
-        filters: filters,
         isNewTemplatePaneOpen: isNewTemplatePaneOpen,
-        setFilters: setFilters,
+        searchTerm: searchTerm,
         setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
       }, config));
     },
@@ -1480,6 +1480,7 @@ var createRoutes = function createRoutes(_ref) {
     actionBlock: function actionBlock() {
       var _t;
       return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        "data-cy": "neeto-approvals-templates-add-new-button",
         label: i18next.t("neetoApprovals.common.addNew_", {
           what: (_t = i18next.t("neetoApprovals.common.template", constants.SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
         }),
@@ -1508,8 +1509,8 @@ var Header = function Header(_ref) {
   var _currentTab$actionBlo;
   var appRoutes = _ref.appRoutes,
     breadcrumbs = _ref.breadcrumbs,
-    filters = _ref.filters,
-    setFilters = _ref.setFilters;
+    setSearchTerm = _ref.setSearchTerm,
+    searchTerm = _ref.searchTerm;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useLocation = reactRouterDom.useLocation(),
@@ -1522,9 +1523,9 @@ var Header = function Header(_ref) {
     title: t("neetoApprovals.common.approval", constants.PLURAL),
     searchProps: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder) && {
       onChange: function onChange(event) {
-        return setFilters(ramda.assoc("searchTerm", event.target.value));
+        return setSearchTerm(event.target.value);
       },
-      value: filters.searchTerm,
+      value: searchTerm,
       placeholder: currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder
     },
     breadcrumbs: breadcrumbs
@@ -1588,27 +1589,26 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Approvals = function Approvals(_ref) {
   var config = _ref.config;
-  var _useState = React.useState(DEFAULT_FILTER_VALUES),
+  var _useState = React.useState(""),
     _useState2 = _slicedToArray$1(_useState, 2),
-    filters = _useState2[0],
-    setFilters = _useState2[1];
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray$1(_useState3, 2),
     isNewTemplatePaneOpen = _useState4[0],
     setIsNewTemplatePaneOpen = _useState4[1];
   var appRoutes = createRoutes({
     config: config,
-    filters: filters,
+    searchTerm: searchTerm,
     isNewTemplatePaneOpen: isNewTemplatePaneOpen,
-    setFilters: setFilters,
     setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-approvals"
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header, _objectSpread$1({
     appRoutes: appRoutes,
-    filters: filters,
-    setFilters: setFilters
+    searchTerm: searchTerm,
+    setSearchTerm: setSearchTerm
   }, config)), /*#__PURE__*/React__default["default"].createElement(Tab, {
     approvalsPath: config.approvalsPath
   }), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Switch, null, appRoutes.map(function (_ref2) {