@bigbinary/neeto-tags-frontend 0.0.47 → 0.0.49

package/dist/index.js

@@ -18,7 +18,7 @@ import _createClass$1 from '@babel/runtime/helpers/createClass';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _extends from '@babel/runtime/helpers/extends';
 import { Plus, MenuHorizontal, Merge as Merge$1 } from '@bigbinary/neeto-icons';
-import { Typography, Tag, Select, Button, Dropdown, Toastr, Pane, PageLoader, Table, Alert, Input as Input$1, Modal } from '@bigbinary/neetoui';
+import { Typography, Tag, Select, Button, Dropdown, Toastr, Pane, PageLoader, NoData, Table, Alert, Input as Input$1, Modal } from '@bigbinary/neetoui';
 import { useHistory, Switch, Route } from 'react-router-dom';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import * as yup from 'yup';
@@ -29,11 +29,11 @@ import axios from 'axios';
 import { Container, Header, SubHeader, MenuBar } from '@bigbinary/neetoui/layouts';
 import { Formik, Form } from 'formik';
 import { Input, Textarea } from '@bigbinary/neetoui/formik';
-import classnames from 'classnames';
+import classames from 'classnames';
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var consoleLogger = {
   type: 'logger',
@@ -120,7 +120,7 @@ var Logger = function () {
   }, {
     key: "create",
     value: function create(moduleName) {
-      return new Logger(this.logger, _objectSpread$6(_objectSpread$6({}, {
+      return new Logger(this.logger, _objectSpread$8(_objectSpread$8({}, {
         prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
       }), this.options));
     }
@@ -2867,9 +2867,9 @@ var unescape = function unescape(text) {
   return text.replace(matchHtmlEntity, unescapeHtmlEntity);
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -2884,7 +2884,7 @@ var i18nInstance;
 var I18nContext = createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$5(_objectSpread$5({}, defaultOptions), options);
+  defaultOptions = _objectSpread$7(_objectSpread$7({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -3011,9 +3011,9 @@ function hasLoadedNamespace(ns, i18n) {
 var _excluded = ["format"],
     _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -3039,7 +3039,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$4({}, target);
+  var newTarget = _objectSpread$6({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -3109,7 +3109,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$4(_objectSpread$4({}, data), combinedTOpts);
+  var opts = _objectSpread$6(_objectSpread$6({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -3119,7 +3119,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+    mem.push(cloneElement(child, _objectSpread$6(_objectSpread$6({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -3151,7 +3151,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$6(_objectSpread$6({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -3182,11 +3182,11 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           var content = node.children[0] ? translationContent : null;
           if (content) mem.push(content);
         } else if (node.children.length === 1 && translationContent) {
-          mem.push(cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$6(_objectSpread$6({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$6(_objectSpread$6({}, child.props), {}, {
             key: i
           })));
         }
@@ -3249,7 +3249,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$4(_objectSpread$4({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$6(_objectSpread$6({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -3257,13 +3257,13 @@ function Trans(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$4(_objectSpread$4({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$6(_objectSpread$6({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$4(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$6(_objectSpread$6(_objectSpread$6(_objectSpread$6({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -3276,9 +3276,9 @@ function Trans(_ref) {
   return useAsParent ? createElement(useAsParent, additionalProps, content) : content;
 }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var usePrevious = function usePrevious(value, ignore) {
   var ref = useRef();
@@ -3315,7 +3315,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$3(_objectSpread$3(_objectSpread$3({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$5(_objectSpread$5(_objectSpread$5({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -3403,9 +3403,12 @@ var addTag = "Add tag";
 var selectOrCreate = "Select or create tag";
 var select = "Select {{what}}";
 var search = "Search {{where}}";
-var addNew = "Add {{what}}";
+var addNew = "Add new {{what}}";
 var tag = "Tag";
 var noTagsFound = "No tags found";
+var noTagsToShow = "There are no tags to show";
+var moreInfoVisit = "For more information, please visit our ";
+var knowledgeBase = "knowledge base";
 var goBack = "Go back";
 var deleteItem = "Are you sure you want to delete {{type}}";
 var cannotBeUndone = "This action cannot be undone.";
@@ -3455,6 +3458,9 @@ var en = {
 	addNew: addNew,
 	tag: tag,
 	noTagsFound: noTagsFound,
+	noTagsToShow: noTagsToShow,
+	moreInfoVisit: moreInfoVisit,
+	knowledgeBase: knowledgeBase,
 	goBack: goBack,
 	deleteItem: deleteItem,
 	cannotBeUndone: cannotBeUndone,
@@ -6872,9 +6878,9 @@ var queryClient = new QueryClient({
   })
 });
 
-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 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$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$1(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 _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$1(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;
 
@@ -6882,7 +6888,7 @@ var useFetchTags = function useFetchTags(params) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useQuery([TAG_KEY, Object.values(params)], function () {
     return tagsApi.fetch(params);
-  }, _objectSpread$2({
+  }, _objectSpread$4({
     staleTime: STALE_TIME,
     select: function select(response) {
       return response.data || response;
@@ -6946,6 +6952,13 @@ var refetchTags = function refetchTags() {
   return queryClient.invalidateQueries([TAG_KEY]);
 };
 
+var NO_DATA_PRIMARY_BUTTON_PROPS$1 = {
+  "data-cy": "add-new-tag-button",
+  label: instance.t("addNew", {
+    what: instance.t("tag").toLocaleLowerCase()
+  })
+};
+
 var useTagsForm = function useTagsForm(_ref) {
   var createTags = _ref.createTags,
       goToFirstPage = _ref.goToFirstPage,
@@ -7092,81 +7105,17 @@ var ManageTags = function ManageTags(_ref) {
   }));
 };
 
-var EmptyStateSVG = function EmptyStateSVG() {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "207",
-    height: "177",
-    viewBox: "0 0 207 177",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M106.5 42L108 86.5",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M78.5 101.5L108 86L131.5 98",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M1 53L30.5 71M30.5 71L11 31L86 3L106.5 42.5L38 75L30.5 71Z",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M38 75L69 94L103.5 122.5L32 77.5L1 53",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M32.5 78L42 128L106 175.5L174 125.5L176 79",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M124 1.5L106.5 42.5L174.5 72L178 70L195.5 25.5L124 1.5Z",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M106 175L103.5 122.5L176 79",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M176 79L206.5 53.5L134.5 95.5L103 122.5",
-    stroke: "#49545C",
-    strokeWidth: "1.5"
+var getHelpText = function getHelpText(url) {
+  return !!url && /*#__PURE__*/React.createElement(React.Fragment, null, instance.t("moreInfoVisit"), /*#__PURE__*/React.createElement(Button, {
+    href: url,
+    label: instance.t("knowledgeBase"),
+    style: "link"
   }));
 };
 
-var EmptyState = function EmptyState(_ref) {
-  var title = _ref.title,
-      kbArticleUrl = _ref.kbArticleUrl,
-      className = _ref.className,
-      _ref$actionBlock = _ref.actionBlock,
-      actionBlock = _ref$actionBlock === void 0 ? null : _ref$actionBlock;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-cy": "empty-state-container",
-    className: classnames(["ntm-empty-state", className])
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    "data-cy": "empty-state-image-container",
-    className: "ntm-empty-state__image"
-  }, /*#__PURE__*/React.createElement(EmptyStateSVG, null)), /*#__PURE__*/React.createElement(Typography, {
-    component: "h2",
-    style: "h2",
-    weight: "semibold",
-    className: "ntm-empty-state__title"
-  }, title), kbArticleUrl && /*#__PURE__*/React.createElement(Typography, {
-    component: "p",
-    style: "body2",
-    weight: "normal",
-    className: "ntm-empty-state__description neeto-ui-text-gray-600"
-  }, "For more information, please visit our", " ", /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    style: "link",
-    label: "knowledge base.",
-    href: kbArticleUrl,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  })), !!actionBlock && /*#__PURE__*/React.createElement("div", {
-    className: "ntm-empty-state__action-block"
-  }, actionBlock)));
-};
+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$1(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 Dashboard = function Dashboard(_ref) {
   var _data$tags2, _tagType$label;
@@ -7225,6 +7174,13 @@ var Dashboard = function Dashboard(_ref) {
 
   var history = useHistory();
 
+  var primaryButtonProps = _objectSpread$3(_objectSpread$3({}, NO_DATA_PRIMARY_BUTTON_PROPS$1), {}, {
+    onClick: function onClick() {
+      setSelectedTag(null);
+      setPaneType(PANE_TYPES.CREATE);
+    }
+  });
+
   var goToFirstPage = function goToFirstPage() {
     if (pageIndex !== DEFAULT_PAGE_INDEX) {
       setPageIndex(DEFAULT_PAGE_INDEX);
@@ -7320,20 +7276,14 @@ var Dashboard = function Dashboard(_ref) {
       "data-cy": "add-new-tag-button"
     })),
     breadcrumbs: breadcrumbs
-  }), !(data !== null && data !== void 0 && (_data$tags2 = data.tags) !== null && _data$tags2 !== void 0 && _data$tags2.length) ? /*#__PURE__*/React.createElement(EmptyState, {
-    title: t("noTagsFound"),
-    kbArticleUrl: kbArticleUrl,
-    actionBlock: /*#__PURE__*/React.createElement(Button, {
-      label: t("addNew", {
-        what: t("tag").toLocaleLowerCase()
-      }),
-      onClick: function onClick() {
-        setSelectedTag(null);
-        setPaneType(PANE_TYPES.CREATE);
-      },
-      "data-cy": "add-new-tag-button"
-    })
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubHeader, {
+  }), !(data !== null && data !== void 0 && (_data$tags2 = data.tags) !== null && _data$tags2 !== void 0 && _data$tags2.length) ? /*#__PURE__*/React.createElement("div", {
+    "data-cy": "empty-state-container",
+    className: "ntm-empty-state"
+  }, /*#__PURE__*/React.createElement(NoData, {
+    helpText: getHelpText(kbArticleUrl),
+    primaryButtonProps: primaryButtonProps,
+    title: t("noTagsToShow")
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubHeader, {
     leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
       style: "h4",
       weight: "semibold",
@@ -7392,6 +7342,12 @@ var Dashboard = function Dashboard(_ref) {
   }));
 };
 
+var NO_DATA_PRIMARY_BUTTON_PROPS = {
+  "data-cy": "neeto-tags-go-back-button",
+  size: "small",
+  label: instance.t("goBack")
+};
+
 var List = function List(_ref) {
   var _ref$tagList = _ref.tagList,
       tagList = _ref$tagList === void 0 ? [] : _ref$tagList,
@@ -7441,7 +7397,7 @@ var List = function List(_ref) {
     "data-cy": "neeto-tags-merge-".concat(listType, "-tags-list")
   }, tags.map(function (tag) {
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames("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("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
@@ -7508,9 +7464,9 @@ var pluralize = function pluralize(_ref) {
   return resultText;
 };
 
-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 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$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$1(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; }
+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$1(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 MergeAlert = function MergeAlert(_ref) {
   var sourceTag = _ref.sourceTag,
@@ -7540,7 +7496,7 @@ var MergeAlert = function MergeAlert(_ref) {
     values: {
       sourceTag: sourceTag.name,
       destinationTag: destinationTag.name,
-      entities: pluralize(_objectSpread$1(_objectSpread$1({
+      entities: pluralize(_objectSpread$2(_objectSpread$2({
         singular: tagType.label.toLowerCase()
       }, PLURAL), {}, {
         skipCount: true
@@ -7564,6 +7520,10 @@ var MergeAlert = function MergeAlert(_ref) {
   })));
 };
 
+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$1(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 Merge = function Merge(_ref) {
   var _data$tags;
 
@@ -7605,6 +7565,12 @@ var Merge = function Merge(_ref) {
       mutate = _useMergeTags.mutate,
       isSubmitting = _useMergeTags.isLoading;
 
+  var primaryButtonProps = _objectSpread$1(_objectSpread$1({}, NO_DATA_PRIMARY_BUTTON_PROPS), {}, {
+    onClick: function onClick() {
+      return history.push(tagsPath);
+    }
+  });
+
   var updatedBreadcrumbs = useMemo(function () {
     return [].concat(_toConsumableArray(breadcrumbs), [{
       text: tagType.label,
@@ -7656,18 +7622,14 @@ var Merge = function Merge(_ref) {
       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.createElement(EmptyState, {
-    title: t("noTagsFound"),
-    kbArticleUrl: kbArticleUrl,
-    actionBlock: /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "neeto-tags-go-back-button",
-      size: "small",
-      onClick: function onClick() {
-        return history.push(tagsPath);
-      },
-      label: t("goBack")
-    })
-  }) : /*#__PURE__*/React.createElement("div", {
+  }), !(data !== null && data !== void 0 && (_data$tags = data.tags) !== null && _data$tags !== void 0 && _data$tags.length) ? /*#__PURE__*/React.createElement("div", {
+    "data-cy": "empty-state-container",
+    className: "ntm-empty-state"
+  }, /*#__PURE__*/React.createElement(NoData, {
+    helpText: getHelpText(kbArticleUrl),
+    primaryButtonProps: primaryButtonProps,
+    title: t("noTagsToShow")
+  })) : /*#__PURE__*/React.createElement("div", {
     className: "neeto-tags-merge__wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     className: "neeto-tags-merge__container"