@bigbinary/neeto-tags-frontend 1.1.12 → 1.3.0

package/dist/index.cjs.js

@@ -11,17 +11,17 @@ var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var reactQuery = require('react-query');
 var axios = require('axios');
-var classNames = require('classnames');
 var i18next = require('i18next');
 var yup = require('yup');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var formik = require('@bigbinary/neetoui/formik');
+var classames = require('classnames');
 var devtools = require('react-query/devtools');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -45,14 +45,14 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
+var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
+var classames__default = /*#__PURE__*/_interopDefaultLegacy(classames);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -139,7 +139,9 @@ var Tags$2 = function Tags(_ref) {
     onTagDelete = _ref.onTagDelete,
     tagProps = _ref.tagProps,
     selectProps = _ref.selectProps,
-    buttonProps = _ref.buttonProps;
+    buttonProps = _ref.buttonProps,
+    _ref$showSuccessToast = _ref.showSuccessToastr,
+    showSuccessToastr = _ref$showSuccessToast === void 0 ? false : _ref$showSuccessToast;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
@@ -159,7 +161,7 @@ var Tags$2 = function Tags(_ref) {
     setAddTag(false);
     onTagSelect(event);
     // @ts-ignore
-    neetoui.Toastr.success("", {
+    showSuccessToastr && neetoui.Toastr.success("", {
       icon: "👍",
       className: "w-20"
     });
@@ -167,7 +169,7 @@ var Tags$2 = function Tags(_ref) {
   var handleDeleteTag = function handleDeleteTag(tag) {
     onTagDelete(tag);
     // @ts-ignore
-    neetoui.Toastr.success("", {
+    showSuccessToastr && neetoui.Toastr.success("", {
       icon: "👍",
       className: "w-20"
     });
@@ -254,36 +256,32 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var Menu$1 = reactUtils.withT(function (_ref) {
-  var t = _ref.t,
-    tagTypes = _ref.tagTypes,
-    showMenu = _ref.showMenu,
+var DEFAULT_PAGE_SIZE = 10;
+var PANE_TYPES = {
+  CREATE: "CREATE_TAG",
+  EDIT: "EDIT_TAG"
+};
+var INITIAL_TAG_VALUES = {
+  name: "",
+  description: ""
+};
+
+var Menu$1 = function Menu(_ref) {
+  var tagTypes = _ref.tagTypes,
     tagType = _ref.tagType,
     setTagType = _ref.setTagType;
-  return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
-    showMenu: showMenu,
-    title: t("neetoTags.common.tag", constants.PLURAL)
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, {
+    className: "mb-6"
   }, Object.values(tagTypes).map(function (tag) {
-    return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
       active: tagType.id === tag.id,
       description: tag.description,
       key: tag.id,
-      label: tag.label,
       onClick: function onClick() {
         setTagType(tag);
       }
-    });
+    }, tag.label);
   }));
-});
-
-var DEFAULT_PAGE_SIZE = 10;
-var PANE_TYPES = {
-  CREATE: "CREATE_TAG",
-  EDIT: "EDIT_TAG"
-};
-var INITIAL_TAG_VALUES = {
-  name: "",
-  description: ""
 };
 
 var fetch = function fetch(_ref) {
@@ -331,13 +329,13 @@ var queryClient = new reactQuery.QueryClient({
 var TAG_KEY = "tag-key";
 var STALE_TIME = 3200000;
 
-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; }
+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, Object.values(params)], function () {
     return tagsApi.fetch(params);
-  }, _objectSpread$5({
+  }, _objectSpread$4({
     staleTime: STALE_TIME,
     select: function select(response) {
       return response.data || response;
@@ -394,21 +392,6 @@ var refetchTags = function refetchTags() {
   return queryClient.invalidateQueries([TAG_KEY]);
 };
 
-var TableWrapper = function TableWrapper(_ref) {
-  var children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
-    _ref$hasPagination = _ref.hasPagination,
-    hasPagination = _ref$hasPagination === void 0 ? false : _ref$hasPagination;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("flex min-h-0 w-full flex-grow flex-col pb-6", className)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("min-h-0 flex-grow", {
-      "pb-11": hasPagination
-    })
-  }, children));
-};
-
 var NO_DATA_PRIMARY_BUTTON_PROPS$1 = {
   "data-cy": "add-new-tag-button",
   label: i18next.t("neetoTags.common.addNewTag", constants.SINGULAR)
@@ -430,20 +413,12 @@ var TAGS_FORMIK_PROPS = {
   validationSchema: TAG_SCHEMA
 };
 
-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 Header = function Header(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
-    _ref$handleMenuToggle = _ref.handleMenuToggle,
-    handleMenuToggle = _ref$handleMenuToggle === void 0 ? pure.noop : _ref$handleMenuToggle,
-    _ref$displayMenu = _ref.displayMenu,
-    displayMenu = _ref$displayMenu === void 0 ? false : _ref$displayMenu,
     _ref$tagsMergable = _ref.tagsMergable,
     tagsMergable = _ref$tagsMergable === void 0 ? false : _ref$tagsMergable,
     setPaneType = _ref.setPaneType,
     setSelectedTag = _ref.setSelectedTag,
-    _ref$tagType = _ref.tagType,
-    tagType = _ref$tagType === void 0 ? {} : _ref$tagType,
     _ref$searchTerm = _ref.searchTerm,
     searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm,
     setSearchTerm = _ref.setSearchTerm,
@@ -474,7 +449,7 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], {
     actionBlock: /*#__PURE__*/React__default["default"].createElement(ActionBlock, null),
     breadcrumbs: breadcrumbs,
-    menuBarToggle: displayMenu && handleMenuToggle,
+    title: t("neetoTags.common.tag", constants.PLURAL),
     searchProps: {
       "data-cy": "neeto-tags-search-text-input-field",
       value: searchTerm,
@@ -485,11 +460,6 @@ var Header = function Header(_ref) {
       },
       placeholder: t("neetoTags.placeholder.searchTags")
     }
-    // eslint-disable-next-line @bigbinary/neeto/no-missing-localization
-    ,
-    title: t("neetoTags.helper.tagWithType", _objectSpread$4(_objectSpread$4({}, constants.PLURAL), {}, {
-      type: tagType.label
-    }))
   });
 };
 
@@ -698,13 +668,14 @@ var Dashboard = function Dashboard(_ref) {
     createTags = _ref.createTags,
     deleteTags = _ref.deleteTags,
     displayMenu = _ref.displayMenu,
-    handleMenuToggle = _ref.handleMenuToggle,
     onTagRowClick = _ref.onTagRowClick,
     _ref$tagsMergable = _ref.tagsMergable,
     tagsMergable = _ref$tagsMergable === void 0 ? false : _ref$tagsMergable,
     tagsPath = _ref.tagsPath,
     tagType = _ref.tagType,
-    updateTags = _ref.updateTags;
+    updateTags = _ref.updateTags,
+    setTagType = _ref.setTagType,
+    tagTypes = _ref.tagTypes;
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTag = _useState2[0],
@@ -794,17 +765,19 @@ var Dashboard = function Dashboard(_ref) {
     breadcrumbs: breadcrumbs,
     data: data,
     displayMenu: displayMenu,
-    handleMenuToggle: handleMenuToggle,
     searchTerm: searchTerm,
     setPaneType: setPaneType,
     setSearchTerm: setSearchTerm,
     setSelectedTag: setSelectedTag,
-    tagType: tagType,
     tagsMergable: tagsMergable,
     tagsPath: tagsPath,
     goToFirstPage: function goToFirstPage() {
       return setPageIndex(constants.DEFAULT_PAGE_INDEX);
     }
+  }), displayMenu && /*#__PURE__*/React__default["default"].createElement(Menu$1, {
+    setTagType: setTagType,
+    tagType: tagType,
+    tagTypes: tagTypes
   }), !(data !== null && data !== void 0 && (_data$tags2 = data.tags) !== null && _data$tags2 !== void 0 && _data$tags2.length) ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ntm-empty-state",
     "data-cy": "empty-state-container"
@@ -821,7 +794,7 @@ var Dashboard = function Dashboard(_ref) {
       count: data === null || data === void 0 ? void 0 : data.totalCount,
       type: (_tagType$label = tagType.label) === null || _tagType$label === void 0 ? void 0 : _tagType$label.toLowerCase()
     }))
-  }), /*#__PURE__*/React__default["default"].createElement(TableWrapper, {
+  }), /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: (data === null || data === void 0 ? void 0 : data.totalCount) > DEFAULT_PAGE_SIZE
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
@@ -958,7 +931,7 @@ var List = function List(_ref) {
     var selectedCounterTags = listType.counterTagIds.includes(tag.id);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: tag.id,
-      className: classNames__default["default"]("neeto-ui-flex neeto-ui-justify-between neeto-ui-items-center neeto-tags-border neeto-ui-border-white neeto-ui-p-2 neeto-ui-rounded-lg neeto-ui-mt-2 neeto-ui-cursor-pointer", {
+      className: classames__default["default"]("neeto-ui-flex neeto-ui-justify-between neeto-ui-items-center neeto-tags-border neeto-ui-border-white neeto-ui-p-2 neeto-ui-rounded-lg neeto-ui-mt-2 neeto-ui-cursor-pointer", {
         "neeto-ui-bg-pastel-blue neeto-ui-border-primary-600": selectedTagIds,
         "hover:neeto-ui-bg-gray-100": !selectedTagIds,
         "neeto-ui-cursor-not-allowed neeto-ui-bg-gray-100 neeto-ui-text-gray-500": selectedCounterTags
@@ -1545,8 +1518,6 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
 var Merge = function Merge(_ref) {
   var _data$tags;
   var breadcrumbs = _ref.breadcrumbs,
-    displayMenu = _ref.displayMenu,
-    handleMenuToggle = _ref.handleMenuToggle,
     mergeTags = _ref.mergeTags,
     tagsPath = _ref.tagsPath,
     tagType = _ref.tagType;
@@ -1578,12 +1549,9 @@ var Merge = function Merge(_ref) {
   });
   var updatedBreadcrumbs = React.useMemo(function () {
     return [].concat(_toConsumableArray(breadcrumbs), [{
-      text: t("neetoTags.helper.tagWithType", _objectSpread$1(_objectSpread$1({}, constants.PLURAL), {}, {
-        type: tagType.label
-      })),
-      link: tagsPath
+      text: t("neetoTags.common.mergeTag", constants.PLURAL)
     }]);
-  }, [breadcrumbs, tagsPath]);
+  }, [breadcrumbs]);
   var getTagState = function getTagState(type) {
     return {
       tags: type === "source" ? sourceTags : destinationTags,
@@ -1632,7 +1600,6 @@ var Merge = function Merge(_ref) {
     isHeaderFixed: true
   }, /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], {
     breadcrumbs: updatedBreadcrumbs,
-    menuBarToggle: displayMenu ? handleMenuToggle : null,
     title: t("neetoTags.common.mergeTag", constants.PLURAL),
     actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "neeto-tags-merge-button",
@@ -1730,44 +1697,28 @@ var Tags = function Tags(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     tagType = _useState2[0],
     setTagType = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isMenuOpen = _useState4[0],
-    setIsMenuOpen = _useState4[1];
-  var handleMenuToggle = function handleMenuToggle() {
-    return setIsMenuOpen(function (isMenuOpen) {
-      return !isMenuOpen;
-    });
-  };
   var routes = createRoutes(_objectSpread(_objectSpread({}, config), {}, {
-    handleMenuToggle: handleMenuToggle,
     displayMenu: displayMenu,
-    tagType: tagType
-  }));
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-flex"
-  }, displayMenu && /*#__PURE__*/React__default["default"].createElement(Menu$1, {
-    setTagType: setTagType,
-    showMenu: isMenuOpen,
     tagType: tagType,
-    tagTypes: tagTypes
-  }), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Switch, null, routes.map(function (_ref2) {
+    setTagType: setTagType
+  }));
+  return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Switch, null, routes.map(function (_ref2) {
     var exact = _ref2.exact,
       path = _ref2.path,
       component = _ref2.component;
     return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
       component: component,
       exact: exact,
-      key: path,
-      path: path
+      path: path,
+      key: path
     });
-  })));
+  }));
 };
 var Tags$1 = withReactQuery(Tags);
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-tags-border{border-width:thin}.ntm-empty-state{height:100%;margin:auto;width:100%}.ntm-empty-state,.ntm-empty-state__image{align-items:center;display:flex;justify-content:center}.ntm-empty-state__image{margin-left:0 auto 4rem auto}.ntm-empty-state__title{font-size:1.25rem;line-height:1.75rem;margin-bottom:1rem;text-align:center}.ntm-empty-state__description{margin-bottom:1.5rem;text-align:center}.ntm-empty-state__action-block{display:flex;justify-content:center}.neeto-tags-table__wrapper{height:calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - var(--neeto-ui-sub-header-height) - var(--neeto-ui-sub-header-bottom-margin));padding:0 24px;width:100%}.neeto-tags-table__column{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.neeto-tags-merge__wrapper{height:calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height));margin:0 auto;max-width:1200px;padding:0 24px 24px;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container{display:flex;flex-direction:row;height:100%;justify-content:space-between;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list{width:48%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list .neeto-tags-merge__items{height:calc(100vh - var(--neeto-ui-main-header-height) - 120px);overflow-y:auto;padding-top:16px}";
+var css = ".neeto-tags-border{border-width:thin}.ntm-empty-state{height:100%;margin:auto;width:100%}.ntm-empty-state,.ntm-empty-state__image{align-items:center;display:flex;justify-content:center}.ntm-empty-state__image{margin-left:0 auto 4rem auto}.ntm-empty-state__title{font-size:1.25rem;line-height:1.75rem;margin-bottom:1rem;text-align:center}.ntm-empty-state__description{margin-bottom:1.5rem;text-align:center}.ntm-empty-state__action-block{display:flex;justify-content:center}.neeto-tags-table__wrapper{height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) - var(--neeto-molecules-sub-header-height) - var(--neeto-molecules-sub-header-bottom-margin));padding:0 24px;width:100%}.neeto-tags-table__column{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.neeto-tags-merge__wrapper{height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height));margin:0 auto;max-width:1200px;padding:0 24px 24px;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container{display:flex;flex-direction:row;height:100%;justify-content:space-between;width:100%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list{width:48%}.neeto-tags-merge__wrapper .neeto-tags-merge__container .neeto-tags-merge__list .neeto-tags-merge__items{height:calc(100vh - var(--neeto-molecules-main-header-height) - 120px);overflow-y:auto;padding-top:16px}";
 n(css,{});
 
 var App = function App(_ref) {