@bigbinary/neeto-tags-frontend 1.1.8 → 1.1.10

package/dist/index.cjs.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var pure = require('@bigbinary/neeto-commons-frontend/pure');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
 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');
@@ -123,23 +124,6 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var DEFAULT_PAGE_INDEX = 1;
-var DEFAULT_PAGE_SIZE = 10;
-var PANE_TYPES = {
-  CREATE: "CREATE_TAG",
-  EDIT: "EDIT_TAG"
-};
-var INITIAL_TAG_VALUES = {
-  name: "",
-  description: ""
-};
-var SINGULAR = {
-  count: 1
-};
-var PLURAL = {
-  count: 2
-};
-
 /**
  * A component that helps to manage tags.
  * Renders selected tags, has dropdown to list down available tags
@@ -220,7 +204,7 @@ var Tags$2 = function Tags(_ref) {
     }
   }, selectProps)) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
     icon: neetoIcons.Plus,
-    label: t("neetoTags.button.addTag", SINGULAR),
+    label: t("neetoTags.button.addTag", constants.SINGULAR),
     size: "small",
     style: "link",
     onClick: function onClick() {
@@ -270,16 +254,15 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var Menu$1 = function Menu(_ref) {
-  var tagTypes = _ref.tagTypes,
+var Menu$1 = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    tagTypes = _ref.tagTypes,
     showMenu = _ref.showMenu,
     tagType = _ref.tagType,
     setTagType = _ref.setTagType;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
     showMenu: showMenu,
-    title: t("neetoTags.common.tag", PLURAL)
+    title: t("neetoTags.common.tag", constants.PLURAL)
   }, Object.values(tagTypes).map(function (tag) {
     return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
       active: tagType.id === tag.id,
@@ -291,6 +274,16 @@ var Menu$1 = function Menu(_ref) {
       }
     });
   }));
+});
+
+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) {
@@ -418,7 +411,7 @@ var TableWrapper = function TableWrapper(_ref) {
 
 var NO_DATA_PRIMARY_BUTTON_PROPS$1 = {
   "data-cy": "add-new-tag-button",
-  label: i18next.t("neetoTags.common.addNewTag", SINGULAR)
+  label: i18next.t("neetoTags.common.addNewTag", constants.SINGULAR)
 };
 var TAG_NAME_MAX_LENGTH = 50;
 var TAG_DESCRIPTION_ROW_LENGTH = 3;
@@ -465,13 +458,13 @@ var Header = function Header(_ref) {
   var ActionBlock = function ActionBlock() {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, tagsMergable && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "neeto-tags-merge-tags-button",
-      disabled: (data === null || data === void 0 ? void 0 : data.tags.length) < PLURAL.count,
-      label: t("neetoTags.common.mergeTag", PLURAL),
+      disabled: (data === null || data === void 0 ? void 0 : data.tags.length) < constants.PLURAL.count,
+      label: t("neetoTags.common.mergeTag", constants.PLURAL),
       style: "secondary",
       onClick: reactUtils.handleMetaClick(history, "".concat(tagsPath, "/merge"))
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "add-new-tag-button",
-      label: t("neetoTags.common.addNewTag", SINGULAR),
+      label: t("neetoTags.common.addNewTag", constants.SINGULAR),
       onClick: function onClick() {
         setSelectedTag(null);
         setPaneType(PANE_TYPES.CREATE);
@@ -494,7 +487,7 @@ var Header = function Header(_ref) {
     }
     // eslint-disable-next-line @bigbinary/neeto/no-missing-localization
     ,
-    title: t("neetoTags.helper.tagWithType", _objectSpread$4(_objectSpread$4({}, PLURAL), {}, {
+    title: t("neetoTags.helper.tagWithType", _objectSpread$4(_objectSpread$4({}, constants.PLURAL), {}, {
       type: tagType.label
     }))
   });
@@ -515,7 +508,7 @@ var useTagsForm = function useTagsForm(_ref) {
   var handleSubmit = function handleSubmit(values, _ref2) {
     var _values$description;
     var resetForm = _ref2.resetForm;
-    values.description = values === null || values === void 0 ? void 0 : (_values$description = values.description) === null || _values$description === void 0 ? void 0 : _values$description.trim();
+    values.description = values === null || values === void 0 || (_values$description = values.description) === null || _values$description === void 0 ? void 0 : _values$description.trim();
     var tagData = {
       payload: {
         tag: values
@@ -529,7 +522,7 @@ var useTagsForm = function useTagsForm(_ref) {
       onSuccess: function onSuccess() {
         var _tagOperation$onSucce;
         !isEdit && goToFirstPage();
-        tagOperation === null || tagOperation === void 0 ? void 0 : (_tagOperation$onSucce = tagOperation.onSuccess) === null || _tagOperation$onSucce === void 0 ? void 0 : _tagOperation$onSucce.callback();
+        tagOperation === null || tagOperation === void 0 || (_tagOperation$onSucce = tagOperation.onSuccess) === null || _tagOperation$onSucce === void 0 ? void 0 : _tagOperation$onSucce.callback();
         onClose();
       },
       onError: function onError() {
@@ -575,7 +568,7 @@ var ManageTags = function ManageTags(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
-  }, isEdit ? t("neetoTags.common.editTag") : t("neetoTags.common.addNewTag", SINGULAR))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  }, isEdit ? t("neetoTags.common.editTag") : t("neetoTags.common.addNewTag", constants.SINGULAR))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     formikProps: _objectSpread$3(_objectSpread$3({}, TAGS_FORMIK_PROPS), {}, {
       initialValues: initialValues,
       onSubmit: handleSubmit
@@ -711,7 +704,7 @@ var Dashboard = function Dashboard(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     searchTerm = _useState4[0],
     setSearchTerm = _useState4[1];
-  var _useState5 = React.useState(DEFAULT_PAGE_INDEX),
+  var _useState5 = React.useState(constants.DEFAULT_PAGE_INDEX),
     _useState6 = _slicedToArray(_useState5, 2),
     pageIndex = _useState6[0],
     setPageIndex = _useState6[1];
@@ -765,12 +758,12 @@ var Dashboard = function Dashboard(_ref) {
       onSuccess: function onSuccess() {
         var _data$tags, _deleteTags$onSuccess;
         setIsDeleteAlertOpen(false);
-        if ((data === null || data === void 0 ? void 0 : (_data$tags = data.tags) === null || _data$tags === void 0 ? void 0 : _data$tags.length) === 1) {
+        if ((data === null || data === void 0 || (_data$tags = data.tags) === null || _data$tags === void 0 ? void 0 : _data$tags.length) === 1) {
           setPageIndex(function (pageIndex) {
             return pageIndex - 1;
           });
         }
-        deleteTags === null || deleteTags === void 0 ? void 0 : (_deleteTags$onSuccess = deleteTags.onSuccess) === null || _deleteTags$onSuccess === void 0 ? void 0 : _deleteTags$onSuccess.callback();
+        deleteTags === null || deleteTags === void 0 || (_deleteTags$onSuccess = deleteTags.onSuccess) === null || _deleteTags$onSuccess === void 0 ? void 0 : _deleteTags$onSuccess.callback();
         // @ts-ignore
         neetoui.Toastr.success("", {
           icon: "👍",
@@ -792,9 +785,6 @@ var Dashboard = function Dashboard(_ref) {
     breadcrumbs: breadcrumbs,
     data: data,
     displayMenu: displayMenu,
-    goToFirstPage: function goToFirstPage() {
-      return setPageIndex(DEFAULT_PAGE_INDEX);
-    },
     handleMenuToggle: handleMenuToggle,
     searchTerm: searchTerm,
     setPaneType: setPaneType,
@@ -802,7 +792,10 @@ var Dashboard = function Dashboard(_ref) {
     setSelectedTag: setSelectedTag,
     tagType: tagType,
     tagsMergable: tagsMergable,
-    tagsPath: tagsPath
+    tagsPath: tagsPath,
+    goToFirstPage: function goToFirstPage() {
+      return setPageIndex(constants.DEFAULT_PAGE_INDEX);
+    }
   }), !(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"
@@ -845,14 +838,14 @@ var Dashboard = function Dashboard(_ref) {
       });
     }
   })))), /*#__PURE__*/React__default["default"].createElement(ManageTags, {
-    createTags: createTags,
     goToFirstPage: function goToFirstPage() {
-      return setPageIndex(DEFAULT_PAGE_INDEX);
+      return setPageIndex(constants.DEFAULT_PAGE_INDEX);
     },
     tag: selectedTag,
+    createTags: createTags,
     tagType: tagType,
-    type: paneType,
     updateTags: updateTags,
+    type: paneType,
     onClose: function onClose() {
       return setPaneType(null);
     }
@@ -887,12 +880,12 @@ var getListType = function getListType(_ref) {
     _ref$sourceTags = _ref.sourceTags,
     sourceTags = _ref$sourceTags === void 0 ? [] : _ref$sourceTags;
   return isSource ? {
-    label: i18next.t("neetoTags.title.selectSourceTag", SINGULAR),
+    label: i18next.t("neetoTags.title.selectSourceTag", constants.SINGULAR),
     value: "source",
     tagIds: ramda.pluck("id", sourceTags),
     counterTagIds: ramda.pluck("id", destinationTags)
   } : {
-    label: i18next.t("neetoTags.title.selectDestinationTag", SINGULAR),
+    label: i18next.t("neetoTags.title.selectDestinationTag", constants.SINGULAR),
     value: "destination",
     tagIds: ramda.pluck("id", destinationTags),
     counterTagIds: ramda.pluck("id", sourceTags)
@@ -933,8 +926,8 @@ var List = function List(_ref) {
   );
 
   var filteredTags = orderBySourceTags(tagList, sourceTags).filter(function (tag) {
-    var _tag$name, _tag$name$toLowerCase;
-    return tag === null || tag === void 0 ? void 0 : (_tag$name = tag.name) === null || _tag$name === void 0 ? void 0 : (_tag$name$toLowerCase = _tag$name.toLowerCase()) === null || _tag$name$toLowerCase === void 0 ? void 0 : _tag$name$toLowerCase.includes(searchTerm.toLowerCase().trim());
+    var _tag$name;
+    return tag === null || tag === void 0 || (_tag$name = tag.name) === null || _tag$name === void 0 || (_tag$name = _tag$name.toLowerCase()) === null || _tag$name === void 0 ? void 0 : _tag$name.includes(searchTerm.toLowerCase().trim());
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-tags-merge__list neeto-tags-border neeto-ui-border-gray-300 neeto-ui-shadow-xs neeto-ui-rounded-lg neeto-ui-flex neeto-ui-flex-col neeto-ui-p-6"
@@ -1487,8 +1480,9 @@ pluralize$1.exports;
 var pluralizeExports = pluralize$1.exports;
 var pluralize = /*@__PURE__*/getDefaultExportFromCjs(pluralizeExports);
 
-var MergeAlert = function MergeAlert(_ref) {
-  var _ref$destinationTags = _ref.destinationTags,
+var MergeAlert = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    _ref$destinationTags = _ref.destinationTags,
     destinationTags = _ref$destinationTags === void 0 ? [] : _ref$destinationTags,
     handleSubmit = _ref.handleSubmit,
     _ref$isSubmitting = _ref.isSubmitting,
@@ -1500,8 +1494,6 @@ var MergeAlert = function MergeAlert(_ref) {
     sourceTags = _ref$sourceTags === void 0 ? [] : _ref$sourceTags,
     _ref$tagType = _ref.tagType,
     tagType = _ref$tagType === void 0 ? "" : _ref$tagType;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
     isOpen: showModal,
     onClose: function onClose() {
@@ -1510,7 +1502,7 @@ var MergeAlert = function MergeAlert(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     id: "dialog1Title",
     style: "h2"
-  }, t("neetoTags.common.mergeTag", PLURAL))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoTags.common.mergeTag", constants.PLURAL))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     lineHeight: "normal",
     style: "body2"
   }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
@@ -1537,7 +1529,7 @@ var MergeAlert = function MergeAlert(_ref) {
       return setShowModal(false);
     }
   })));
-};
+});
 
 function ownKeys$1(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$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; }
@@ -1577,7 +1569,7 @@ var Merge = function Merge(_ref) {
   });
   var updatedBreadcrumbs = React.useMemo(function () {
     return [].concat(_toConsumableArray(breadcrumbs), [{
-      text: t("neetoTags.helper.tagWithType", _objectSpread$1(_objectSpread$1({}, PLURAL), {}, {
+      text: t("neetoTags.helper.tagWithType", _objectSpread$1(_objectSpread$1({}, constants.PLURAL), {}, {
         type: tagType.label
       })),
       link: tagsPath
@@ -1615,7 +1607,7 @@ var Merge = function Merge(_ref) {
         var _mergeTags$onSuccess;
         setDestinationTags([]);
         setSourceTags([]);
-        mergeTags === null || mergeTags === void 0 ? void 0 : (_mergeTags$onSuccess = mergeTags.onSuccess) === null || _mergeTags$onSuccess === void 0 ? void 0 : _mergeTags$onSuccess.callback();
+        mergeTags === null || mergeTags === void 0 || (_mergeTags$onSuccess = mergeTags.onSuccess) === null || _mergeTags$onSuccess === void 0 ? void 0 : _mergeTags$onSuccess.callback();
         setIsModalOpen(false);
       }
     });
@@ -1632,7 +1624,7 @@ var Merge = function Merge(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], {
     breadcrumbs: updatedBreadcrumbs,
     menuBarToggle: displayMenu ? handleMenuToggle : null,
-    title: t("neetoTags.common.mergeTag", PLURAL),
+    title: t("neetoTags.common.mergeTag", constants.PLURAL),
     actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "neeto-tags-merge-button",
       disabled: isMergeButtonDisabled,
@@ -1662,18 +1654,18 @@ var Merge = function Merge(_ref) {
     size: 24
   }), /*#__PURE__*/React__default["default"].createElement(List, {
     destinationTags: destinationTags,
-    isSource: false,
     sourceTags: sourceTags,
+    isSource: false,
     tagList: data === null || data === void 0 ? void 0 : data.tags,
     onSelect: handleOnTagSelect
   })))), /*#__PURE__*/React__default["default"].createElement(MergeAlert, {
     destinationTags: destinationTags,
     handleSubmit: handleSubmit,
     isSubmitting: isSubmitting,
-    setShowModal: setIsModalOpen,
-    showModal: isModalOpen,
     sourceTags: sourceTags,
-    tagType: tagType
+    tagType: tagType,
+    setShowModal: setIsModalOpen,
+    showModal: isModalOpen
   }));
 };
 
@@ -1686,7 +1678,7 @@ var getCurrentTagType = function getCurrentTagType() {
   var tagLabel = searchParams.get("view");
   var requiredTagType = tagTypes.find(function (tagType) {
     var _tagType$label;
-    return (tagType === null || tagType === void 0 ? void 0 : (_tagType$label = tagType.label) === null || _tagType$label === void 0 ? void 0 : _tagType$label.toLowerCase()) === tagLabel;
+    return (tagType === null || tagType === void 0 || (_tagType$label = tagType.label) === null || _tagType$label === void 0 ? void 0 : _tagType$label.toLowerCase()) === tagLabel;
   });
   return requiredTagType || tagTypes[0];
 };