@bigbinary/neeto-approvals-frontend 0.2.8 → 0.2.10

package/dist/index.js

@@ -1,10 +1,10 @@
-import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Container from '@bigbinary/neeto-molecules/Container';
-import { useLocation, useHistory, Link, Switch, Route, Redirect, useParams } from 'react-router-dom';
+import { Link, useLocation, useHistory, Switch, Route, Redirect, useParams } from 'react-router-dom';
 import i18next, { t as t$1 } from 'i18next';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
-import { Button, Tag, Pane, Typography, Label, Textarea, Table as Table$1, NoData, Dropdown, Alert, Tab as Tab$1, Select as Select$1, Callout } from '@bigbinary/neetoui';
-import { curryN, isNil, curry, complement, either, isEmpty, assoc, keys } from 'ramda';
+import { Button, Tag, Pane, Typography, Label, Textarea, Table as Table$1, NoData, Alert, Tab as Tab$1, Select as Select$1, Callout } from '@bigbinary/neetoui';
+import { curryN, isNil, curry, complement, either, isEmpty, keys } from 'ramda';
 import { useMutationWithInvalidation, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { useTranslation, Trans } from 'react-i18next';
 import { useQuery, useQueryClient } from 'react-query';
@@ -19,8 +19,8 @@ import { removeBy, findById } from '@bigbinary/neeto-commons-frontend/pure';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Form as Form$2, Input, Textarea as Textarea$1, Select } from '@bigbinary/neetoui/formik';
 import * as yup from 'yup';
-import { MenuHorizontal } from '@bigbinary/neeto-icons';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 
 function _typeof$1(obj) {
@@ -132,35 +132,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: t$1("neetoApprovals.common.rejectedBy"),
-  approved: t$1("neetoApprovals.common.approvedBy"),
-  cancelled: t$1("neetoApprovals.common.cancelledBy")
-};
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -286,9 +257,9 @@ var findBy = /*#__PURE__*/curry(function (pattern, array) {
   return array.find(matches(pattern));
 });
 
-var handleEmptyPage = function handleEmptyPage(data, pageProperties, handleTablePagination) {
+var handleEmptyPage = function handleEmptyPage(data, pageProperties, handlePageChange) {
   if (isEmpty(data) && pageProperties.page !== 1) {
-    handleTablePagination(pageProperties.page - 1, pageProperties.pageSize);
+    handlePageChange(pageProperties.page - 1, pageProperties.pageSize);
   }
 };
 
@@ -349,49 +320,63 @@ var useUpdateRequest = function useUpdateRequest(options) {
   }, options));
 };
 
-var useUrlSearchParams = function useUrlSearchParams() {
-  var _useLocation = useLocation(),
-    search = _useLocation.search;
-  return useMemo(function () {
-    return new URLSearchParams(search);
-  }, [search]);
-};
-
 var usePaginate = function usePaginate() {
-  var urlParams = useUrlSearchParams();
   var _useState = useState({
-      page: Number(urlParams.get("page")) || DEFAULT_PAGE_INDEX,
-      pageSize: Number(urlParams.get("size")) || DEFAULT_PAGE_SIZE
+      page: DEFAULT_PAGE_INDEX,
+      pageSize: DEFAULT_PAGE_SIZE
     }),
     _useState2 = _slicedToArray$1(_useState, 2),
     pageProperties = _useState2[0],
     setPageProperties = _useState2[1];
-  var history = useHistory();
-  var handleTablePagination = useCallback(function (page, pageSize) {
-    urlParams.set("page", page);
-    urlParams.set("size", pageSize);
-    history.push({
-      search: urlParams.toString()
+  var resetPageProperties = function resetPageProperties() {
+    return setPageProperties({
+      page: DEFAULT_PAGE_INDEX,
+      pageSize: DEFAULT_PAGE_SIZE
     });
+  };
+  var handlePageChange = function handlePageChange(page, pageSize) {
     setPageProperties({
       page: page,
       pageSize: pageSize
     });
-  }, [urlParams, history]);
-  useEffect(function () {
-    var page = urlParams.get("page") || DEFAULT_PAGE_INDEX;
-    var pageSize = urlParams.get("size") || 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: t$1("neetoApprovals.common.rejectedBy"),
+  approved: t$1("neetoApprovals.common.approvedBy"),
+  cancelled: t$1("neetoApprovals.common.cancelledBy")
+};
+var DATA_CY_KEY = "data-cy";
+
 dayjs.extend(utc);
 dayjs.extend(timezone);
 var updateApprovalDetails = function updateApprovalDetails(_ref) {
@@ -598,7 +583,7 @@ var History = function History(_ref) {
   var debouncedSearchTerm = useDebounce(filters.searchTerm, SEARCH_DELAY);
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange;
   var _useState3 = useState({}),
     _useState4 = _slicedToArray$1(_useState3, 2),
     approvalDetails = _useState4[0],
@@ -611,8 +596,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,
@@ -631,7 +617,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
     }));
   };
@@ -644,8 +630,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) < DEFAULT_PAGE_SIZE + 1
     },
@@ -688,7 +674,7 @@ var PendingRequests = function PendingRequests(_ref) {
   var debouncedSearchTerm = useDebounce(filters.searchTerm, SEARCH_DELAY);
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFetchRequests = useFetchRequests({
@@ -697,8 +683,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
@@ -714,7 +701,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
     }));
   };
@@ -737,8 +724,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) < DEFAULT_PAGE_SIZE + 1
     },
@@ -1013,10 +1000,12 @@ var Form$1 = function Form(_ref) {
   }))), /*#__PURE__*/React.createElement(Pane.Footer, {
     className: "flex gap-x-2"
   }, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "neeto-approvals-templates-save-template-btn",
     label: t("neetoApprovals.buttons.saveChanges"),
     loading: isLoading,
     type: "submit"
   }), /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "neeto-approvals-templates-close-template-form-btn",
     label: t("neetoApprovals.buttons.cancel"),
     style: "text",
     onClick: onClose
@@ -1153,53 +1142,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
   }))));
 };
 
-var Menu = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
-var columnData = function columnData(_ref) {
-  var onEditClick = _ref.onEditClick,
-    onDeleteClick = _ref.onDeleteClick;
-  return [{
-    dataIndex: "name",
-    key: "name",
-    sorter: true,
-    title: i18next.t("neetoApprovals.common.name")
-  }, {
-    dataIndex: "approverName",
-    key: "approverName",
-    title: i18next.t("neetoApprovals.common.approver", SINGULAR)
-  }, {
-    key: "actions",
-    ellipsis: true,
-    render: function render(_, template) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex flex-row items-center justify-end space-x-3",
-        onClick: function onClick(event) {
-          return event.stopPropagation();
-        }
-      }, /*#__PURE__*/React.createElement(Dropdown, {
-        autoWidth: true,
-        buttonProps: {
-          style: "text"
-        },
-        className: "flex-shrink-0",
-        icon: MenuHorizontal,
-        position: "bottom-end",
-        strategy: "fixed"
-      }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-        "data-cy": "approvers-edit-button",
-        onClick: function onClick() {
-          return onEditClick(template);
-        }
-      }, i18next.t("neetoApprovals.common.edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
-        "data-cy": "approvers-delete-button",
-        onClick: function onClick() {
-          return onDeleteClick(template);
-        }
-      }, i18next.t("neetoApprovals.common.delete")))));
-    }
-  }];
-};
-
 var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
   var entity = _ref.entity,
     url = _ref.url;
@@ -1220,14 +1162,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,
@@ -1235,10 +1177,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 = useTranslation(),
     t = _useTranslation.t;
   var columns = columnData({
@@ -1265,7 +1205,7 @@ var Table = function Table(_ref) {
       url: helpDocUrl
     })
   };
-  if (isEmpty(items)) {
+  if (isEmpty(rowData)) {
     return /*#__PURE__*/React.createElement("div", {
       className: "flex h-full w-full flex-grow items-center justify-center"
     }, /*#__PURE__*/React.createElement(NoData, _extends({
@@ -1282,55 +1222,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) < DEFAULT_PAGE_SIZE + 1
+      hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < 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.t("neetoApprovals.common.name"),
+    ellipsis: true,
+    render: function render(_, template) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React.createElement(Typography, {
+        className: "truncate",
+        style: "body2"
+      }, template.name), /*#__PURE__*/React.createElement(MoreDropdown, {
+        dropdownProps: {
+          strategy: "fixed",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        },
+        menuItems: [_defineProperty({
+          key: "edit",
+          label: i18next.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.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.t("neetoApprovals.common.approver", 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 = useState({}),
+  var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray$1(_useState, 2),
-    selectedTemplate = _useState2[0],
-    setSelectedTemplate = _useState2[1];
-  var _useState3 = useState(false),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = useState({}),
     _useState4 = _slicedToArray$1(_useState3, 2),
-    isDeleteAlertOpen = _useState4[0],
-    setIsDeleteAlertOpen = _useState4[1];
+    selectedTemplate = _useState4[0],
+    setSelectedTemplate = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray$1(_useState5, 2),
-    isEditPaneOpen = _useState6[0],
-    setIsEditPaneOpen = _useState6[1];
+    isDeleteAlertOpen = _useState6[0],
+    setIsDeleteAlertOpen = _useState6[1];
   var _useState7 = useState(false),
     _useState8 = _slicedToArray$1(_useState7, 2),
-    isShowPaneOpen = _useState8[0],
-    setIsShowPaneOpen = _useState8[1];
-  var debouncedSearchTerm = useDebounce(filters.searchTerm, SEARCH_DELAY);
+    isEditPaneOpen = _useState8[0],
+    setIsEditPaneOpen = _useState8[1];
+  var _useState9 = 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 = useTranslation(),
     t = _useTranslation.t;
+  var debouncedSearchTerm = useDebounce(searchTerm, SEARCH_DELAY);
+  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,
@@ -1350,7 +1346,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);
   };
@@ -1358,7 +1355,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);
   };
@@ -1370,15 +1368,18 @@ var Templates = function Templates(_ref) {
   };
   var entity = (_t = t("neetoApprovals.common.template", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
   return /*#__PURE__*/React.createElement(React.Fragment, null, isTemplateLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.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.createElement(Create, _extends({
@@ -1427,16 +1428,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.createElement(Templates, _objectSpread$3({
-        filters: filters,
         isNewTemplatePaneOpen: isNewTemplatePaneOpen,
-        setFilters: setFilters,
+        searchTerm: searchTerm,
         setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
       }, config));
     },
@@ -1444,6 +1443,7 @@ var createRoutes = function createRoutes(_ref) {
     actionBlock: function actionBlock() {
       var _t;
       return /*#__PURE__*/React.createElement(Button, {
+        "data-cy": "neeto-approvals-templates-add-new-button",
         label: t$1("neetoApprovals.common.addNew_", {
           what: (_t = t$1("neetoApprovals.common.template", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
         }),
@@ -1472,8 +1472,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 = useTranslation(),
     t = _useTranslation.t;
   var _useLocation = useLocation(),
@@ -1486,9 +1486,9 @@ var Header = function Header(_ref) {
     title: t("neetoApprovals.common.approval", PLURAL),
     searchProps: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder) && {
       onChange: function onChange(event) {
-        return setFilters(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
@@ -1552,27 +1552,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 = useState(DEFAULT_FILTER_VALUES),
+  var _useState = useState(""),
     _useState2 = _slicedToArray$1(_useState, 2),
-    filters = _useState2[0],
-    setFilters = _useState2[1];
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useState3 = 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.createElement("div", {
     className: "neeto-approvals"
   }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _objectSpread$1({
     appRoutes: appRoutes,
-    filters: filters,
-    setFilters: setFilters
+    searchTerm: searchTerm,
+    setSearchTerm: setSearchTerm
   }, config)), /*#__PURE__*/React.createElement(Tab, {
     approvalsPath: config.approvalsPath
   }), /*#__PURE__*/React.createElement(Switch, null, appRoutes.map(function (_ref2) {