@bigbinary/neeto-tags-frontend 1.5.14 → 1.5.16

package/README.md

@@ -1,19 +1,153 @@
-# neetoTagsNano
 
-This repo acts as the source of truth for the new nano's structure, configs,
-data etc.
+# neeto-tags-nano
+The `neeto-tags-nano` manages tags across neeto applications. The nano exports the `@bigbinary/neeto-tags-frontend` NPM package and `neeto-tags-engine` Rails engine for development.
 
-# Local Development Setup
+# Contents
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+        - [Installation](#installation)
+        - [Usage](#usage)
+    - [Frontend package](#frontend-package)
+        - [Installation](#installation-1)
+        - [Components](#components)
+2. [Instructions for Publishing](#instructions-for-publishing)
 
-1. Setup
-   [Instructions](https://github.com/bigbinary/neeto-engineering/tree/main/Local-Development-Setup).
+# Development with Host Application
+## Engine
+The engine is used to manage tags for any entity across neeto products.
 
-2. Run `yarn build` to bundle the app.
+### Installation
+1. Add this line to your application's Gemfile:
+    ```ruby
+    source "NEETO_GEM_SERVER_URL" do
+       # ..existing gems
 
-3. Visit http://spinkart.lvh.me:9100 and login with email `oliver@example.com`
-   and password `welcome`.
+       gem 'neeto-tags-engine'
+    end
+    ```
+2. And then execute:
+    ```ruby
+    bundle install
+    ```
+3. Add this line to your application's `config/routes.rb` file:
+    ```ruby
+    mount NeetoTagsEngine::Engine => "/neeto_tags_engine"
+    ```
+4. Run the following command to copy the migrations from the engine to the host application:
+    ```ruby
+    bundle exec rails neeto_tags_engine:install:migrations
+    ```
+5. Add the migrations to the database:
+    ```ruby
+    bundle exec rails db:migrate
+    ```
+### Usage
+You can learn more about the setup and usage here:
+1. [Models](/docs/engine/models.md)
+2. [Controllers](/docs/engine/controllers.md)
 
-# Publish instructions
+## Frontend package
+The package exports two components: `NeetoTags` and `Tags`.
 
-1. [Engine and package installation](./docs/engine-and-package-installation.md)
-2. [Building and releasing](./docs/building-and-releasing.md)
+The package also exports one hook: `refetchTags`.
+
+### Installation
+1. `neeto-tags-nano` has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:
+    ```zsh
+    yarn add @bigbinary/neeto-commons-frontend@2.0.35 @bigbinary/neeto-icons@1.9.10 @bigbinary/neetoui@4.3.3 @honeybadger-io/js@5.1.1 @honeybadger-io/react@5.1.2 axios@1.3.3 classnames@2.3.2 formik@2.2.9 js-logger@1.6.1 ramda@0.28.0 react-helmet@6.1.0 react-query@3.39.3 react-router-dom@5.3.4 react-toastify@8.2.0 yup@1.0.0
+    ```
+
+2. Now install the latest `neeto-tags-nano` package using the below command:
+    ```zsh
+    yarn add @bigbinary/neeto-tags-frontend
+    ```
+
+### Components
+#### `NeetoTags` ([source code](https://github.com/bigbinary/neeto-tags-nano/blob/e61f7bd2b9cab9fbf29fcfecf57e66131c86e6ef/app/javascript/src/index.jsx))
+This component provides a dashboard to manage tags for an application.
+
+##### Props
+- `config`: Configuration object that includes specifications for tags, display menu, and breadcrumbs.
+
+##### Configuration
+Refer to the [NeetoTags](/docs/frontend/neeto_tags.md) section for detailed information on the available configurations for the `NeetoTags` component.
+
+##### Usage
+```jsx
+import React from "react";
+
+import { NeetoTags } from "@bigbinary/neeto-tags-frontend";
+
+const App = () => {
+  return <NeetoTags config={config} />;
+};
+export default App;
+```
+
+#### `Tags` ([source code](https://github.com/bigbinary/neeto-tags-nano/blob/e61f7bd2b9cab9fbf29fcfecf57e66131c86e6ef/app/javascript/src/components/Tags/index.jsx#L22))
+
+This component provides functionality to assign tags to an entity.
+
+##### Configuration
+Refer to the [Tags](/docs/frontend/tags.md) section for detailed information on the available configurations for the `Tags` component.
+
+##### Usage
+```jsx
+import React from "react";
+
+import { TagsComponent } from "@bigbinary/neeto-tags-frontend";
+
+const App = ({
+  allTags,
+  buttonProps,
+  selectProps,
+  selectedTags,
+  handleTagCreate,
+  handleTagRemove,
+  handleTagSelect,
+}) => {
+  return (
+    <TagsComponent
+      allTags={allTags}
+      buttonProps={buttonProps}
+      selectProps={selectProps}
+      selectedTags={selectedTags}
+      onTagCreate={handleTagCreate}
+      onTagDelete={handleTagRemove}
+      onTagSelect={handleTagSelect}
+    />
+  );
+};
+
+export default App;
+```
+
+### Hooks
+#### `refetchTags` ([source code](https://github.com/bigbinary/neeto-tags-nano/blob/e61f7bd2b9cab9fbf29fcfecf57e66131c86e6ef/app/javascript/src/hooks/useTagsApi.js#L39))
+This function refetches the tags list.
+
+##### Usage
+Below is an example usage of the `refetchTags` hook:
+
+```js
+const useBulkUpdateTickets = () =>
+  useMutationWithInvalidation(
+    ({ payload }) => ticketsApi.bulkUpdateTickets(payload),
+    {
+      keysToInvalidate: [
+        [QUERY_KEYS.TICKETS_LIST],
+        [QUERY_KEYS.TICKETS_DEFAULT_VIEWS],
+        [QUERY_KEYS.TEAMS],
+        ...REPORT_DATA_KEYS_TO_INVALIDATE,
+      ],
+      onSuccess: () => {
+        refetchTags();
+      },
+    }
+  );
+```
+Used by [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/5ba3471deae047bc9d08dca6bf26537194b9a209/app/javascript/src/hooks/reactQuery/tickets/useTicketsApi.js#L83)
+
+
+# Instructions for Publishing
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/dist/index.cjs.js

@@ -17,9 +17,9 @@ var reactRouterDom = require('react-router-dom');
 var Container$1 = require('@bigbinary/neeto-molecules/Container');
 var reactQuery = require('react-query');
 var axios = require('axios');
+var yup = require('yup');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var formik = require('@bigbinary/neetoui/formik');
-var yup = require('yup');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
@@ -50,8 +50,8 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var Metadata__default = /*#__PURE__*/_interopDefaultLegacy(Metadata);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container$1);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
@@ -204,7 +204,8 @@ var Container = function Container(_ref) {
   if (isMetadataBlock) {
     return /*#__PURE__*/React__default["default"].createElement(Metadata__default["default"].Block, _extends({}, containerProps, {
       actionBlock: /*#__PURE__*/React__default["default"].createElement(TitleActionBlock, actionBlockProps),
-      title: /*#__PURE__*/React__default["default"].createElement(Title, titleComponentProps)
+      title: /*#__PURE__*/React__default["default"].createElement(Title, titleComponentProps),
+      className: "space-y-4"
     }), isTagsBodyVisible && children);
   }
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({
@@ -257,7 +258,6 @@ var TagsSelector = reactUtils.withT(function (_ref) {
     onCreateOption: onCreateOption,
     autoFocus: true,
     isCreateable: true,
-    className: "neeto-ui-mt-4",
     maxLength: 50,
     options: tags,
     placeholder: t("neetoTags.placeholder.selectOrCreateTag")
@@ -375,7 +375,6 @@ var Tags$2 = function Tags(_ref) {
     isTagsBodyVisible: isTagsBodyVisible,
     titleComponentProps: titleComponentProps
   }, neetoCist.isNotEmpty(selectedTags) && /*#__PURE__*/React__default["default"].createElement(TagsList, tagsListProps), isTagsDropdownVisible && /*#__PURE__*/React__default["default"].createElement(TagsSelector, tagsSelectorProps), isAddTagsButtonVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
-    className: "neeto-ui-mt-4",
     disabled: isDisabled,
     icon: neetoIcons.Plus,
     label: t("neetoTags.button.addTag", constants.SINGULAR),
@@ -522,13 +521,13 @@ var queryClient = new reactQuery.QueryClient({
   })
 });
 
-function ownKeys$3(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$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; }
+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 useFetchTags = function useFetchTags(params) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return reactQuery.useQuery([TAG_KEY, params], function () {
     return tagsApi.fetch(params);
-  }, _objectSpread$3({
+  }, _objectSpread$4({
     staleTime: STALE_TIME,
     select: function select(response) {
       return response.data || response;
@@ -577,6 +576,29 @@ var refetchTags = function refetchTags() {
   return queryClient.invalidateQueries([TAG_KEY]);
 };
 
+var TAG_NAME_MAX_LENGTH = 50;
+var TAG_DESCRIPTION_ROW_LENGTH = 3;
+var TAG_DESCRIPTION_MAX_LENGTH = 255;
+var TAG_SCHEMA = yup__namespace.object().shape({
+  name: yup__namespace.string().typeError(i18next.t("neetoTags.validation.nameMustBeString")).required(i18next.t("neetoTags.validation.nameRequired")).max(TAG_NAME_MAX_LENGTH, i18next.t("neetoTags.validation.nameMaxLength", {
+    length: TAG_NAME_MAX_LENGTH
+  })),
+  description: yup__namespace.string().typeError(i18next.t("neetoTags.validation.descriptionMustBeString")).nullable().max(TAG_DESCRIPTION_MAX_LENGTH, i18next.t("neetoTags.validation.descriptionMaxLength", {
+    length: TAG_DESCRIPTION_MAX_LENGTH
+  }))
+});
+var TAGS_FORMIK_PROPS = {
+  validateOnBlur: true,
+  validateOnChange: true,
+  validationSchema: TAG_SCHEMA
+};
+var DEFAULT_FILTERS = {
+  page: constants.DEFAULT_PAGE_INDEX,
+  pageSize: constants.DEFAULT_PAGE_SIZE,
+  sortBy: "",
+  orderBy: ""
+};
+
 var Header = function Header(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
     _ref$tagsMergable = _ref.tagsMergable,
@@ -665,25 +687,8 @@ var useTagsForm = function useTagsForm(_ref) {
   };
 };
 
-var TAG_NAME_MAX_LENGTH = 50;
-var TAG_DESCRIPTION_ROW_LENGTH = 3;
-var TAG_DESCRIPTION_MAX_LENGTH = 255;
-var TAG_SCHEMA = yup__namespace.object().shape({
-  name: yup__namespace.string().typeError(i18next.t("neetoTags.validation.nameMustBeString")).required(i18next.t("neetoTags.validation.nameRequired")).max(TAG_NAME_MAX_LENGTH, i18next.t("neetoTags.validation.nameMaxLength", {
-    length: TAG_NAME_MAX_LENGTH
-  })),
-  description: yup__namespace.string().typeError(i18next.t("neetoTags.validation.descriptionMustBeString")).nullable().max(TAG_DESCRIPTION_MAX_LENGTH, i18next.t("neetoTags.validation.descriptionMaxLength", {
-    length: TAG_DESCRIPTION_MAX_LENGTH
-  }))
-});
-var TAGS_FORMIK_PROPS = {
-  validateOnBlur: true,
-  validateOnChange: true,
-  validationSchema: TAG_SCHEMA
-};
-
-function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(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$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 ManageTags = function ManageTags(_ref) {
   var createTags = _ref.createTags,
     goToFirstPage = _ref.goToFirstPage,
@@ -715,7 +720,7 @@ var ManageTags = function ManageTags(_ref) {
     style: "h2",
     weight: "semibold"
   }, isEdit ? t("neetoTags.common.editTag") : t("neetoTags.common.addNewTag", constants.SINGULAR))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
-    formikProps: _objectSpread$2(_objectSpread$2({}, TAGS_FORMIK_PROPS), {}, {
+    formikProps: _objectSpread$3(_objectSpread$3({}, TAGS_FORMIK_PROPS), {}, {
       initialValues: initialValues,
       onSubmit: handleSubmit
     })
@@ -836,13 +841,13 @@ var renderColumnData = function renderColumnData(handleEdit, handleDelete) {
 var Table = function Table(_ref) {
   var _data$tags;
   var data = _ref.data,
+    filters = _ref.filters,
     handleDelete = _ref.handleDelete,
     handleEdit = _ref.handleEdit,
+    handleOnChange = _ref.handleOnChange,
     isLoading = _ref.isLoading,
     onTagRowClick = _ref.onTagRowClick,
-    page = _ref.page,
     primaryButtonProps = _ref.primaryButtonProps,
-    setPage = _ref.setPage,
     tagType = _ref.tagType;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -866,13 +871,12 @@ var Table = function Table(_ref) {
       type: (tagType === null || tagType === void 0 ? void 0 : tagType.label) || ""
     }))
   }), /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
-    hasPagination: (data === null || data === void 0 ? void 0 : data.totalCount) > constants.DEFAULT_PAGE_SIZE
+    hasPagination: (data === null || data === void 0 ? void 0 : data.totalCount) > filters.pageSize
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
     allowRowClick: !!onTagRowClick,
-    currentPageNumber: page,
-    defaultPageSize: constants.DEFAULT_PAGE_SIZE,
-    handlePageChange: setPage,
+    currentPageNumber: filters.page,
+    defaultPageSize: filters.pageSize,
     loading: isLoading,
     paginationProps: {
       showSizeChanger: false
@@ -884,6 +888,7 @@ var Table = function Table(_ref) {
     },
     totalCount: data === null || data === void 0 ? void 0 : data.totalCount,
     columnData: renderColumnData(handleEdit, handleDelete, tagType.columns),
+    onChange: handleOnChange,
     onRowClick: function onRowClick(event, record, rowIndex) {
       return onTagRowClick({
         event: event,
@@ -894,6 +899,8 @@ var Table = function Table(_ref) {
   })));
 };
 
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Dashboard = function Dashboard(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
     createTags = _ref.createTags,
@@ -911,27 +918,25 @@ var Dashboard = function Dashboard(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selectedTag = _useState2[0],
     setSelectedTag = _useState2[1];
-  var _useState3 = React.useState(constants.DEFAULT_PAGE_INDEX),
+  var _useState3 = React.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    page = _useState4[0],
-    setPage = _useState4[1];
-  var _useState5 = React.useState(null),
+    paneType = _useState4[0],
+    setPaneType = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    paneType = _useState6[0],
-    setPaneType = _useState6[1];
-  var _useState7 = React.useState(false),
+    isDeleteAlertOpen = _useState6[0],
+    setIsDeleteAlertOpen = _useState6[1];
+  var _useState7 = React.useState(DEFAULT_FILTERS),
     _useState8 = _slicedToArray(_useState7, 2),
-    isDeleteAlertOpen = _useState8[0],
-    setIsDeleteAlertOpen = _useState8[1];
+    filters = _useState8[0],
+    setFilters = _useState8[1];
   var _useQueryParams = reactUtils.useQueryParams(),
     _useQueryParams$searc = _useQueryParams.search_term,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
-  var _useFetchTags = useFetchTags({
+  var _useFetchTags = useFetchTags(_objectSpread$2({
       url: tagType.url,
-      searchTerm: searchTerm,
-      pageSize: constants.DEFAULT_PAGE_SIZE,
-      page: page
-    }),
+      searchTerm: searchTerm
+    }, filters)),
     data = _useFetchTags.data,
     isLoading = _useFetchTags.isLoading;
   var _useTranslation = reactI18next.useTranslation(),
@@ -956,6 +961,16 @@ var Dashboard = function Dashboard(_ref) {
     setIsDeleteAlertOpen(false);
     setSelectedTag(null);
   };
+  var handleOnChange = function handleOnChange(_ref2, _, _ref3) {
+    var page = _ref2.current;
+    var sortBy = _ref3.field,
+      orderBy = _ref3.order;
+    return setFilters(ramda.mergeLeft({
+      page: page,
+      sortBy: orderBy && sortBy,
+      orderBy: orderBy
+    }));
+  };
   var _useDeleteTag = useDeleteTag(),
     mutate = _useDeleteTag.mutate,
     isDeletingTag = _useDeleteTag.isLoading;
@@ -970,9 +985,9 @@ var Dashboard = function Dashboard(_ref) {
         var _data$tags, _deleteTags$onSuccess;
         setIsDeleteAlertOpen(false);
         if ((data === null || data === void 0 || (_data$tags = data.tags) === null || _data$tags === void 0 ? void 0 : _data$tags.length) === 1) {
-          setPage(function (page) {
-            return page - 1;
-          });
+          setFilters(ramda.mergeLeft({
+            page: filters.page - 1
+          }));
         }
         deleteTags === null || deleteTags === void 0 || (_deleteTags$onSuccess = deleteTags.onSuccess) === null || _deleteTags$onSuccess === void 0 ? void 0 : _deleteTags$onSuccess.callback();
         // @ts-ignore
@@ -983,6 +998,11 @@ var Dashboard = function Dashboard(_ref) {
       }
     });
   };
+  var resetPage = function resetPage() {
+    return setFilters(ramda.mergeLeft({
+      page: constants.DEFAULT_PAGE_INDEX
+    }));
+  };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header, {
     breadcrumbs: breadcrumbs,
     data: data,
@@ -991,30 +1011,26 @@ var Dashboard = function Dashboard(_ref) {
     setSelectedTag: setSelectedTag,
     tagsMergable: tagsMergable,
     tagsPath: tagsPath,
-    goToFirstPage: function goToFirstPage() {
-      return setPage(constants.DEFAULT_PAGE_INDEX);
-    }
+    goToFirstPage: resetPage
   }), displayMenu && /*#__PURE__*/React__default["default"].createElement(Menu$1, {
     setTagType: setTagType,
     tagType: tagType,
     tagTypes: tagTypes
   }), /*#__PURE__*/React__default["default"].createElement(Table, {
     data: data,
+    filters: filters,
     handleDelete: handleDelete,
     handleEdit: handleEdit,
+    handleOnChange: handleOnChange,
     isLoading: isLoading,
     onTagRowClick: onTagRowClick,
-    page: page,
     primaryButtonProps: primaryButtonProps,
-    setPage: setPage,
     tagType: tagType
   })), /*#__PURE__*/React__default["default"].createElement(ManageTags, {
     createTags: createTags,
     tagType: tagType,
     updateTags: updateTags,
-    goToFirstPage: function goToFirstPage() {
-      return setPage(constants.DEFAULT_PAGE_INDEX);
-    },
+    goToFirstPage: resetPage,
     tag: selectedTag,
     type: paneType,
     onClose: function onClose() {