@bigbinary/neeto-tags-frontend 1.0.2 → 1.0.4

package/dist/index.cjs.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
 var layouts = require('@bigbinary/neetoui/layouts');
 var reactQuery = require('react-query');
 var axios = require('axios');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var yup = require('yup');
 var formik = require('@bigbinary/neetoui/formik');
 var classames = require('classnames');
@@ -753,14 +755,24 @@ var Translator = function (_EventEmitter) {
         if (appendNamespaceToCIMode) {
           var nsSeparator = options.nsSeparator || this.options.nsSeparator;
           if (returnDetails) {
-            resolved.res = "".concat(namespace).concat(nsSeparator).concat(key);
-            return resolved;
+            return {
+              res: "".concat(namespace).concat(nsSeparator).concat(key),
+              usedKey: key,
+              exactUsedKey: key,
+              usedLng: lng,
+              usedNS: namespace
+            };
           }
           return "".concat(namespace).concat(nsSeparator).concat(key);
         }
         if (returnDetails) {
-          resolved.res = key;
-          return resolved;
+          return {
+            res: key,
+            usedKey: key,
+            exactUsedKey: key,
+            usedLng: lng,
+            usedNS: namespace
+          };
         }
         return key;
       }
@@ -1559,7 +1571,7 @@ var Interpolator = function () {
             if (typeof missingInterpolationHandler === 'function') {
               var temp = missingInterpolationHandler(str, match, options);
               value = typeof temp === 'string' ? temp : '';
-            } else if (options && options.hasOwnProperty(matchedVar)) {
+            } else if (options && Object.prototype.hasOwnProperty.call(options, matchedVar)) {
               value = '';
             } else if (skipOnVariables) {
               value = match[0];
@@ -1708,34 +1720,34 @@ var Formatter = function () {
     this.logger = baseLogger.create('formatter');
     this.options = options;
     this.formats = {
-      number: createCachedFormatter(function (lng, options) {
-        var formatter = new Intl.NumberFormat(lng, options);
+      number: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.NumberFormat(lng, _objectSpread$2$1({}, opt));
         return function (val) {
           return formatter.format(val);
         };
       }),
-      currency: createCachedFormatter(function (lng, options) {
-        var formatter = new Intl.NumberFormat(lng, _objectSpread$2$1(_objectSpread$2$1({}, options), {}, {
+      currency: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.NumberFormat(lng, _objectSpread$2$1(_objectSpread$2$1({}, opt), {}, {
           style: 'currency'
         }));
         return function (val) {
           return formatter.format(val);
         };
       }),
-      datetime: createCachedFormatter(function (lng, options) {
-        var formatter = new Intl.DateTimeFormat(lng, _objectSpread$2$1({}, options));
+      datetime: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.DateTimeFormat(lng, _objectSpread$2$1({}, opt));
         return function (val) {
           return formatter.format(val);
         };
       }),
-      relativetime: createCachedFormatter(function (lng, options) {
-        var formatter = new Intl.RelativeTimeFormat(lng, _objectSpread$2$1({}, options));
+      relativetime: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.RelativeTimeFormat(lng, _objectSpread$2$1({}, opt));
         return function (val) {
-          return formatter.format(val, options.range || 'day');
+          return formatter.format(val, opt.range || 'day');
         };
       }),
-      list: createCachedFormatter(function (lng, options) {
-        var formatter = new Intl.ListFormat(lng, _objectSpread$2$1({}, options));
+      list: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.ListFormat(lng, _objectSpread$2$1({}, opt));
         return function (val) {
           return formatter.format(val);
         };
@@ -1764,8 +1776,9 @@ var Formatter = function () {
     }
   }, {
     key: "format",
-    value: function format(value, _format, lng, options) {
+    value: function format(value, _format, lng) {
       var _this = this;
+      var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       var formats = _format.split(this.formatSeparator);
       var result = formats.reduce(function (mem, f) {
         var _parseFormatStr = parseFormatStr(f),
@@ -1894,8 +1907,8 @@ var Connector = function (_EventEmitter) {
             if (!loaded[l]) loaded[l] = {};
             var loadedKeys = q.loaded[l];
             if (loadedKeys.length) {
-              loadedKeys.forEach(function (ns) {
-                if (loaded[l][ns] === undefined) loaded[l][ns] = true;
+              loadedKeys.forEach(function (n) {
+                if (loaded[l][n] === undefined) loaded[l][n] = true;
               });
             }
           });
@@ -2549,7 +2562,7 @@ var I18n = function (_EventEmitter) {
       var _this7 = this;
       var deferred = defer();
       if (!this.options.ns) {
-        callback && callback();
+        if (callback) callback();
         return Promise.resolve();
       }
       if (typeof ns === 'string') ns = [ns];
@@ -3491,50 +3504,48 @@ var Tags$2 = function Tags(_ref) {
   var tags = React.useMemo(function () {
     if (!allTags) return [];
     if (!selectedTags) return allTags;
-    var selectedTagValues = selectedTags.map(function (_ref2) {
+    var selectedTagValues = ramda.pluck("value", selectedTags);
+    return allTags.filter(function (_ref2) {
       var value = _ref2.value;
-      return value;
-    });
-    return allTags.filter(function (_ref3) {
-      var value = _ref3.value;
       return !selectedTagValues.includes(value);
     });
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-tags-wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-500 neeto-ui-mb-4",
     style: "h6",
-    weight: "bold",
-    className: "neeto-ui-text-gray-500 neeto-ui-mb-4"
-  }, label), !!selectedTags.length && /*#__PURE__*/React__default["default"].createElement("div", {
+    weight: "bold"
+  }, label), selectedTags.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-flex neeto-ui-mb-2 neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start break-all"
   }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag, index) {
     return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends({
+      className: "neeto-ui-mb-2 neeto-ui-mr-2",
       key: "".concat(index, "-").concat(tag.label),
       label: tag.label,
       style: "primary",
       onClose: function onClose() {
         return onTagDelete(tag);
-      },
-      className: "neeto-ui-mb-2 neeto-ui-mr-2"
+      }
     }, tagProps));
   })), addTag ? /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
     isCreateable: true,
-    placeholder: "Select or Create tag",
+    maxLength: 50,
     options: tags,
-    onChange: function onChange(e) {
+    placeholder: "Select or Create tag",
+    onChange: function onChange(event) {
       setAddTag(false);
-      onTagSelect(e);
+      onTagSelect(event);
     },
-    onCreateOption: function onCreateOption(e) {
+    onCreateOption: function onCreateOption(event) {
       setAddTag(false);
-      onTagCreate(e);
+      onTagCreate(event);
     }
   }, selectProps)) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    icon: neetoIcons.Plus,
+    label: "New Tag",
     size: "small",
     style: "link",
-    label: "New Tag",
-    icon: neetoIcons.Plus,
     onClick: function onClick() {
       return setAddTag(true);
     }
@@ -3553,10 +3564,10 @@ var Menu$1 = function Menu(_ref) {
     title: t("title")
   }, Object.values(tagTypes).map(function (tag) {
     return /*#__PURE__*/React__default["default"].createElement(layouts.MenuBar.Item, {
+      active: tagType.id === tag.id,
+      description: tag.description,
       key: tag.id,
       label: tag.label,
-      description: tag.description,
-      active: tagType.id === tag.id,
       onClick: function onClick() {
         setTagType(tag);
       }
@@ -3610,22 +3621,6 @@ var PLURAL = {
   count: 2
 };
 
-function useDebounce(value, delay) {
-  var _useState = React.useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    debouncedValue = _useState2[0],
-    setDebouncedValue = _useState2[1];
-  React.useEffect(function () {
-    var timer = setTimeout(function () {
-      return setDebouncedValue(value);
-    }, delay || 500);
-    return function () {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 var fetch = function fetch(_ref) {
   var url = _ref.url,
     searchTerm = _ref.searchTerm,
@@ -3668,10 +3663,11 @@ var queryClient = new reactQuery.QueryClient({
   })
 });
 
-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 TAG_KEY = "tag-key";
 var STALE_TIME = 3200000;
+
+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 () {
@@ -3724,10 +3720,8 @@ var useMergeTags = function useMergeTags() {
       payload = _ref4.payload;
     return tagsApi.merge(url, payload);
   }, {
-    onSuccess: function onSuccess(_ref5) {
-      var notice = _ref5.notice;
-      queryClient.invalidateQueries([TAG_KEY]);
-      neetoui.Toastr.success(notice);
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries([TAG_KEY]);
     }
   });
 };
@@ -3858,17 +3852,17 @@ var ManageTags = function ManageTags(_ref) {
       className: "neeto-ui-flex neeto-ui-w-full neeto-ui-flex-col neeto-ui-gap-4"
     }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       required: true,
-      name: "name",
-      label: t("name"),
       "data-cy": "tag-name-text-field",
+      label: t("name"),
       maxLength: TAG_NAME_MAX_LENGTH,
+      name: "name",
       ref: inputReference
     }), /*#__PURE__*/React__default["default"].createElement(formik.Textarea, {
-      name: "description",
-      label: t("description"),
-      rows: TAG_DESCRIPTION_ROW_LENGTH,
       "data-cy": "tag-description-text-area",
-      maxLength: TAG_DESCRIPTION_MAX_LENGTH
+      label: t("description"),
+      maxLength: TAG_DESCRIPTION_MAX_LENGTH,
+      name: "description",
+      rows: TAG_DESCRIPTION_ROW_LENGTH
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "neeto-ui-gap-2"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
@@ -3881,8 +3875,8 @@ var ManageTags = function ManageTags(_ref) {
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "neeto-tags-manage-tag-cancel-button",
       label: t("cancel"),
-      onClick: onClose,
-      style: "text"
+      style: "text",
+      onClick: onClose
     })));
   }));
 };
@@ -3901,11 +3895,11 @@ var renderColumnData = function renderColumnData(columns, handleEdit, handleDele
       }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
         autoWidth: true,
         icon: neetoIcons.MenuHorizontal,
+        position: "bottom-end",
+        strategy: "fixed",
         buttonProps: {
           style: "text"
-        },
-        position: "bottom-end",
-        strategy: "fixed"
+        }
       }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
         "data-cy": "tags-edit-button",
         onClick: function onClick() {
@@ -3965,7 +3959,7 @@ var Dashboard = function Dashboard(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     isDeleteAlertOpen = _useState10[0],
     setIsDeleteAlertOpen = _useState10[1];
-  var debouncedSearchTerm = useDebounce(searchTerm, 500);
+  var debouncedSearchTerm = reactUtils.useDebounce(searchTerm, 500);
   var _useFetchTags = useFetchTags({
       url: tagType.url,
       searchTerm: debouncedSearchTerm.trim(),
@@ -4019,7 +4013,11 @@ var Dashboard = function Dashboard(_ref) {
           });
         }
         deleteTags === null || deleteTags === void 0 ? void 0 : (_deleteTags$onSuccess = deleteTags.onSuccess) === null || _deleteTags$onSuccess === void 0 ? void 0 : _deleteTags$onSuccess.callback();
-        neetoui.Toastr.success(t("deleteSuccess"));
+        // @ts-ignore
+        neetoui.Toastr.success("", {
+          icon: "👍",
+          className: "w-20"
+        });
       },
       onError: function onError(_ref2) {
         var errors = _ref2.errors;
@@ -4035,52 +4033,52 @@ var Dashboard = function Dashboard(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(layouts.Container, {
     isHeaderFixed: true
   }, /*#__PURE__*/React__default["default"].createElement(layouts.Header, {
-    title: "".concat(tagType.label, " ").concat(t("title").toLocaleLowerCase()),
+    breadcrumbs: breadcrumbs,
     menuBarToggle: displayMenu ? handleMenuToggle : null,
-    searchProps: {
-      "data-cy": "neeto-tags-search-text-input-field",
-      value: searchTerm,
-      onChange: function onChange(_ref3) {
-        var value = _ref3.target.value;
-        value.trim() && goToFirstPage();
-        setSearchTerm(value);
-      },
-      placeholder: t("search", {
-        where: t("title").toLocaleLowerCase()
-      })
-    },
+    title: "".concat(tagType.label, " ").concat(t("title").toLocaleLowerCase()),
     actionBlock: /*#__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",
-      style: "secondary",
+      disabled: (data === null || data === void 0 ? void 0 : data.tags.length) < PLURAL.count,
       label: t("merge.mergeTags"),
+      style: "secondary",
       onClick: function onClick() {
         history.push("".concat(tagsPath, "/merge"));
-      },
-      disabled: (data === null || data === void 0 ? void 0 : data.tags.length) < PLURAL.count
+      }
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      "data-cy": "add-new-tag-button",
       label: t("addNew", {
         what: t("tag").toLocaleLowerCase()
       }),
       onClick: function onClick() {
         setSelectedTag(null);
         setPaneType(PANE_TYPES.CREATE);
-      },
-      "data-cy": "add-new-tag-button"
+      }
     })),
-    breadcrumbs: breadcrumbs
+    searchProps: {
+      "data-cy": "neeto-tags-search-text-input-field",
+      value: searchTerm,
+      onChange: function onChange(_ref3) {
+        var value = _ref3.target.value;
+        value.trim() && goToFirstPage();
+        setSearchTerm(value);
+      },
+      placeholder: t("search", {
+        where: t("title").toLocaleLowerCase()
+      })
+    }
   }), !(data !== null && data !== void 0 && (_data$tags2 = data.tags) !== null && _data$tags2 !== void 0 && _data$tags2.length) ? /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-cy": "empty-state-container",
-    className: "ntm-empty-state"
+    className: "ntm-empty-state",
+    "data-cy": "empty-state-container"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
     helpText: getHelpText(kbArticleUrl),
     primaryButtonProps: primaryButtonProps,
     title: t("noTagsToShow")
   })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(layouts.SubHeader, {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "h4",
-      weight: "semibold",
       className: "neeto-ui-gray-800",
-      "data-cy": "neeto-tags-filtered-tags-count-text"
+      "data-cy": "neeto-tags-filtered-tags-count-text",
+      style: "h4",
+      weight: "semibold"
     }, t("tagsWithCount", {
       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()
@@ -4089,48 +4087,48 @@ var Dashboard = function Dashboard(_ref) {
     className: "neeto-tags-table__wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
-    rowData: data === null || data === void 0 ? void 0 : data.tags,
-    columnData: renderColumnData(tagType.columns ? [].concat(_toConsumableArray(COMMON_COLUMNS), _toConsumableArray(tagType.columns)) : COMMON_COLUMNS, handleEdit, handleDelete),
-    defaultPageSize: DEFAULT_PAGE_SIZE,
+    allowRowClick: !!onTagRowClick,
     currentPageNumber: pageIndex,
+    defaultPageSize: DEFAULT_PAGE_SIZE,
     handlePageChange: setPageIndex,
+    paginationProps: {
+      showSizeChanger: false
+    },
+    rowData: data === null || data === void 0 ? void 0 : data.tags,
+    rowSelection: false,
+    scroll: {
+      x: "100%"
+    },
     totalCount: data === null || data === void 0 ? void 0 : data.totalCount,
-    allowRowClick: !!onTagRowClick,
+    columnData: renderColumnData(tagType.columns ? [].concat(_toConsumableArray(COMMON_COLUMNS), _toConsumableArray(tagType.columns)) : COMMON_COLUMNS, handleEdit, handleDelete),
     onRowClick: function onRowClick(event, record, rowIndex) {
       return onTagRowClick({
         event: event,
         tag: record,
         rowIndex: rowIndex
       });
-    },
-    rowSelection: false,
-    paginationProps: {
-      showSizeChanger: false
-    },
-    scroll: {
-      x: "100%"
     }
   })))), /*#__PURE__*/React__default["default"].createElement(ManageTags, {
     createTags: createTags,
     goToFirstPage: goToFirstPage,
-    onClose: function onClose() {
-      return setPaneType(null);
-    },
     tag: selectedTag,
     tagType: tagType,
     type: paneType,
-    updateTags: updateTags
+    updateTags: updateTags,
+    onClose: function onClose() {
+      return setPaneType(null);
+    }
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+    cancelButtonLabel: t("cancel"),
     isOpen: isDeleteAlertOpen,
     isSubmitting: isDeletingTag,
+    submitButtonLabel: t("proceed"),
     title: t("deleteTag"),
     message: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, t("deleteItem", {
       type: t("tag").toLocaleLowerCase()
     }), " ", /*#__PURE__*/React__default["default"].createElement("strong", null, selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.name), "? ", t("cannotBeUndone")),
-    onSubmit: handleConfirmDelete,
     onClose: handleAlertClose,
-    submitButtonLabel: t("proceed"),
-    cancelButtonLabel: t("cancel")
+    onSubmit: handleConfirmDelete
   }));
 };
 
@@ -4169,28 +4167,28 @@ var List = function List(_ref) {
   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 neeto-ui-cursor-pointer"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h4",
-    className: "neeto-ui-mb-3"
+    className: "neeto-ui-mb-3",
+    style: "h4"
   }, type), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
     "data-cy": "neeto-tags-merge-".concat(listType, "-search-text-input-field"),
+    placeholder: t("search", {
+      where: t("tag").toLocaleLowerCase()
+    }),
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
-    },
-    placeholder: t("search", {
-      where: t("tag").toLocaleLowerCase()
-    })
+    }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-tags-merge__items",
     "data-cy": "neeto-tags-merge-".concat(listType, "-tags-list")
   }, tags.map(function (tag) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: tag.id,
       className: classames__default["default"]("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": tag.id === selectedTagId,
         "hover:neeto-ui-bg-gray-100": tag.id !== selectedTagId,
         "neeto-ui-cursor-not-allowed neeto-ui-bg-gray-100 neeto-ui-text-gray-500": tag.id === selectedCounterTagId
       }),
-      key: tag.id,
       onClick: tag.id === selectedCounterTagId ? undefined : function () {
         return onSelect(tag);
       }
@@ -4832,20 +4830,20 @@ var Merge = function Merge(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(layouts.Container, {
     isHeaderFixed: true
   }, /*#__PURE__*/React__default["default"].createElement(layouts.Header, {
-    title: t("merge.mergeTags"),
+    breadcrumbs: updatedBreadcrumbs,
     menuBarToggle: displayMenu ? handleMenuToggle : null,
+    title: t("merge.mergeTags"),
     actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "neeto-tags-merge-button",
       disabled: !(sourceTag !== null && sourceTag !== void 0 && sourceTag.id && destinationTag !== null && destinationTag !== void 0 && destinationTag.id),
+      label: t("merge.merge"),
       onClick: function onClick() {
         setIsModalOpen(true);
-      },
-      label: t("merge.merge")
-    }),
-    breadcrumbs: updatedBreadcrumbs
+      }
+    })
   }), !(data !== null && data !== void 0 && (_data$tags = data.tags) !== null && _data$tags !== void 0 && _data$tags.length) ? /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-cy": "empty-state-container",
-    className: "ntm-empty-state"
+    className: "ntm-empty-state",
+    "data-cy": "empty-state-container"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
     helpText: getHelpText(kbArticleUrl),
     primaryButtonProps: primaryButtonProps,
@@ -4855,34 +4853,34 @@ var Merge = function Merge(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-tags-merge__container"
   }, /*#__PURE__*/React__default["default"].createElement(List, {
-    tagList: data === null || data === void 0 ? void 0 : data.tags,
-    onSelect: setSourceTag,
+    isSource: true,
     selectedCounterTagId: destinationTag === null || destinationTag === void 0 ? void 0 : destinationTag.id,
     selectedTagId: sourceTag === null || sourceTag === void 0 ? void 0 : sourceTag.id,
+    tagList: data === null || data === void 0 ? void 0 : data.tags,
     type: t("select", {
       what: t("merge.sourceTag").toLocaleLowerCase()
     }),
-    isSource: true
+    onSelect: setSourceTag
   }), /*#__PURE__*/React__default["default"].createElement(neetoIcons.Merge, {
-    size: 24,
-    className: "neeto-ui-self-center neeto-ui-mx-6 neeto-ui-text-gray-600"
+    className: "neeto-ui-self-center neeto-ui-mx-6 neeto-ui-text-gray-600",
+    size: 24
   }), /*#__PURE__*/React__default["default"].createElement(List, {
-    tagList: data === null || data === void 0 ? void 0 : data.tags,
-    onSelect: setDestinationTag,
+    isSource: false,
     selectedCounterTagId: sourceTag === null || sourceTag === void 0 ? void 0 : sourceTag.id,
     selectedTagId: destinationTag === null || destinationTag === void 0 ? void 0 : destinationTag.id,
+    tagList: data === null || data === void 0 ? void 0 : data.tags,
     type: t("select", {
       what: t("merge.destinationTag").toLocaleLowerCase()
     }),
-    isSource: false
+    onSelect: setDestinationTag
   })))), /*#__PURE__*/React__default["default"].createElement(MergeAlert, {
-    showModal: isModalOpen,
-    setShowModal: setIsModalOpen,
-    sourceTag: sourceTag,
     destinationTag: destinationTag,
-    tagType: tagType,
     handleSubmit: handleSubmit,
-    isSubmitting: isSubmitting
+    isSubmitting: isSubmitting,
+    setShowModal: setIsModalOpen,
+    showModal: isModalOpen,
+    sourceTag: sourceTag,
+    tagType: tagType
   }));
 };
 
@@ -4955,19 +4953,19 @@ var Tags = function Tags(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-flex"
   }, displayMenu && /*#__PURE__*/React__default["default"].createElement(Menu$1, {
-    tagTypes: tagTypes,
+    setTagType: setTagType,
     showMenu: isMenuOpen,
     tagType: tagType,
-    setTagType: setTagType
+    tagTypes: tagTypes
   }), /*#__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, {
-      key: path,
+      component: component,
       exact: exact,
-      path: path,
-      component: component
+      key: path,
+      path: path
     });
   })));
 };