@bigbinary/neeto-tags-frontend 1.5.7 → 1.5.9

package/app/javascript/src/translations/en.json

@@ -5,7 +5,7 @@
         "deleteTag": "Delete tag?"
       },
       "message": {
-        "deleteTag_": "You are permanently deleting the tag <strong>{{name}}</strong>. This can't be undone."
+        "deleteTag_": "You are permanently deleting the tag <strong>{{name, anyCase}}</strong>. This can't be undone."
       }
     },
     "button": {
@@ -31,7 +31,7 @@
       "tag_other": "Tags"
     },
     "helper": {
-      "mergeTagsMessage_one": "The {{- sourceTags, boldList}} tag will be merged into the <strong>{{destinationTag}}</strong> tag. This will also affect the {{entities}} assigned with the <strong>{{sourceTags}}</strong> tag. Do you want to continue?",
+      "mergeTagsMessage_one": "The {{- sourceTags, boldList}} tag will be merged into the <strong>{{destinationTag}}</strong> tag. This will also affect the {{entities}} assigned with the <strong>{{sourceTags, anyCase}}</strong> tag. Do you want to continue?",
       "mergeTagsMessage_other": "The {{- sourceTags, boldList}} tags will be merged into the <strong>{{destinationTag}}</strong> tag. This will also affect the {{entities}} assigned with these <strong>{{count}}</strong> tags. Do you want to continue?",
       "tagWithCount_one": "{{count}} {{type}} tag",
       "tagWithCount_other": "{{count}} {{type}} tags",

package/dist/index.cjs.js

@@ -12,9 +12,9 @@ var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var i18next = require('i18next');
 var classNames = require('classnames');
+var Metadata = require('@bigbinary/neeto-molecules/Metadata');
 var reactRouterDom = require('react-router-dom');
-var Container = require('@bigbinary/neeto-molecules/Container');
-var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var Container$1 = require('@bigbinary/neeto-molecules/Container');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var reactQuery = require('react-query');
@@ -22,6 +22,7 @@ var axios = require('axios');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var formik = require('@bigbinary/neetoui/formik');
 var yup = require('yup');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var devtools = require('react-query/devtools');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -46,13 +47,14 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
-var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var Metadata__default = /*#__PURE__*/_interopDefaultLegacy(Metadata);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container$1);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -131,62 +133,11 @@ var KEYBOARD_SHORTCUTS = {
   }
 };
 
-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$1 = ".neeto-tags__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL1RhZ3Mvc3R5bGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0NBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by10YWdzX19tZXRhZGF0YS1jYXJkX19zcGlubmVyIHtcbiAgc2NhbGU6IDAuNjtcbn1cbiJdfQ== */";
-n(css$1,{});
-
-var TagsList = function TagsList(_ref) {
-  var selectedTags = _ref.selectedTags,
-    isDisabled = _ref.isDisabled,
-    handleDeleteTag = _ref.handleDeleteTag,
-    tagProps = _ref.tagProps;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start gap-2 break-all"
-  }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends({
-      disabled: isDisabled,
-      key: tag.value,
-      label: tag.label,
-      style: "primary",
-      className: classNames__default["default"]({
-        "cursor-not-allowed opacity-50": isDisabled
-      }),
-      onClose: function onClose() {
-        return !isDisabled && handleDeleteTag(tag);
-      }
-    }, tagProps));
-  }));
-};
-
-var TagsSelector = reactUtils.withT(function (_ref) {
-  var t = _ref.t,
-    defaultMenuIsOpen = _ref.defaultMenuIsOpen,
-    tags = _ref.tags,
-    onChange = _ref.onChange,
-    onCreateOption = _ref.onCreateOption,
-    selectProps = _ref.selectProps;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    defaultMenuIsOpen: defaultMenuIsOpen,
-    onChange: onChange,
-    onCreateOption: onCreateOption,
-    autoFocus: true,
-    isCreateable: true,
-    className: "neeto-ui-mt-4",
-    maxLength: 50,
-    options: tags,
-    placeholder: t("neetoTags.placeholder.selectOrCreateTag")
-  }, selectProps));
-});
-
 var Title = function Title(_ref) {
   var _ref$titleProps = _ref.titleProps,
     titleProps = _ref$titleProps === void 0 ? {} : _ref$titleProps,
     title = _ref.title,
     isUpdating = _ref.isUpdating,
-    setIsTagsDropdownVisible = _ref.setIsTagsDropdownVisible,
-    showAddTagsOnTitle = _ref.showAddTagsOnTitle,
-    isDisabled = _ref.isDisabled,
     isLoading = _ref.isLoading;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -212,8 +163,6 @@ var Title = function Title(_ref) {
     }, 5000);
   }, [didStartUpdate, isUpdating]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("flex w-full items-center justify-between gap-2", titleProps.containerClassName)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends({
     className: "neeto-ui-text-gray-700",
@@ -226,19 +175,94 @@ var Title = function Title(_ref) {
   }), !isUpdating && isCheckIconVisible && /*#__PURE__*/React__default["default"].createElement(neetoIcons.Check, {
     className: "neeto-ui-text-success-500",
     size: 20
-  }))), showAddTagsOnTitle && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  })));
+};
+
+var TitleActionBlock = function TitleActionBlock(_ref) {
+  var isDisabled = _ref.isDisabled,
+    setIsTagsDropdownVisible = _ref.setIsTagsDropdownVisible;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     disabled: isDisabled,
     icon: neetoIcons.Settings,
     size: "15",
     style: "icon",
     onClick: function onClick() {
-      return setIsTagsDropdownVisible(function (addTag) {
-        return ramda.not(addTag);
-      });
+      return setIsTagsDropdownVisible(ramda.not);
     }
+  });
+};
+
+var Container = function Container(_ref) {
+  var isMetadataBlock = _ref.isMetadataBlock,
+    containerProps = _ref.containerProps,
+    actionBlockProps = _ref.actionBlockProps,
+    titleComponentProps = _ref.titleComponentProps,
+    children = _ref.children,
+    isTagsBodyVisible = _ref.isTagsBodyVisible,
+    bodyProps = _ref.bodyProps;
+  if (isMetadataBlock) {
+    return /*#__PURE__*/React__default["default"].createElement(Metadata__default["default"].Block, _extends({}, containerProps, {
+      actionBlock: /*#__PURE__*/React__default["default"].createElement(TitleActionBlock, actionBlockProps),
+      title: /*#__PURE__*/React__default["default"].createElement(Title, titleComponentProps)
+    }), isTagsBodyVisible && children);
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: "neeto-ui-tags-wrapper flex w-full flex-col items-start gap-2"
+  }, containerProps), titleComponentProps.showTitleBar && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]("flex w-full items-center justify-between gap-2", titleComponentProps.containerClassName)
+  }, /*#__PURE__*/React__default["default"].createElement(Title, titleComponentProps), titleComponentProps.showAddTagsOnTitle && /*#__PURE__*/React__default["default"].createElement(TitleActionBlock, actionBlockProps)), isTagsBodyVisible && /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: "neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg w-full border p-4"
+  }, bodyProps), children));
+};
+
+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$1 = ".neeto-tags__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL1RhZ3Mvc3R5bGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0NBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by10YWdzX19tZXRhZGF0YS1jYXJkX19zcGlubmVyIHtcbiAgc2NhbGU6IDAuNjtcbn1cbiJdfQ== */";
+n(css$1,{});
+
+var TagsList = function TagsList(_ref) {
+  var selectedTags = _ref.selectedTags,
+    isDisabled = _ref.isDisabled,
+    handleDeleteTag = _ref.handleDeleteTag,
+    tagProps = _ref.tagProps;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start gap-2 break-all"
+  }, selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.map(function (tag) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends({
+      disabled: isDisabled,
+      key: tag.value,
+      label: tag.label,
+      style: "primary",
+      className: classNames__default["default"]({
+        "cursor-not-allowed opacity-50": isDisabled
+      }),
+      onClose: function onClose() {
+        return !isDisabled && handleDeleteTag(tag);
+      }
+    }, tagProps));
   }));
 };
 
+var TagsSelector = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    defaultMenuIsOpen = _ref.defaultMenuIsOpen,
+    tags = _ref.tags,
+    onChange = _ref.onChange,
+    onCreateOption = _ref.onCreateOption,
+    selectProps = _ref.selectProps;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    defaultMenuIsOpen: defaultMenuIsOpen,
+    onChange: onChange,
+    onCreateOption: onCreateOption,
+    autoFocus: true,
+    isCreateable: true,
+    className: "neeto-ui-mt-4",
+    maxLength: 50,
+    options: tags,
+    placeholder: t("neetoTags.placeholder.selectOrCreateTag")
+  }, selectProps));
+});
+
 /**
  * A component that helps to manage tags.
  * Renders selected tags, has dropdown to list down available tags
@@ -271,7 +295,9 @@ var Tags$2 = function Tags(_ref) {
     _ref$bodyProps = _ref.bodyProps,
     bodyProps = _ref$bodyProps === void 0 ? {} : _ref$bodyProps,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isMetadataBlock = _ref.isMetadataBlock,
+    isMetadataBlock = _ref$isMetadataBlock === void 0 ? false : _ref$isMetadataBlock;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
@@ -311,13 +337,16 @@ var Tags$2 = function Tags(_ref) {
   var isAddTagsButtonVisible = !showAddTagsOnTitle && !isTagsDropdownVisible;
   var isTagsBodyVisible = neetoCist.isNotEmpty(selectedTags) || isTagsDropdownVisible || isAddTagsButtonVisible;
   var titleComponentProps = {
-    isDisabled: isDisabled,
     isLoading: isLoading,
     isUpdating: isUpdating,
-    setIsTagsDropdownVisible: setIsTagsDropdownVisible,
     showAddTagsOnTitle: showAddTagsOnTitle,
     title: title,
-    titleProps: titleProps
+    titleProps: titleProps,
+    showTitleBar: showTitleBar
+  };
+  var actionBlockProps = {
+    isDisabled: isDisabled,
+    setIsTagsDropdownVisible: setIsTagsDropdownVisible
   };
   var tagsListProps = {
     handleDeleteTag: handleDeleteTag,
@@ -337,11 +366,14 @@ var Tags$2 = function Tags(_ref) {
     },
     selectProps: selectProps
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
-    className: "neeto-ui-tags-wrapper flex w-full flex-col items-start gap-2"
-  }, containerProps), showTitleBar && /*#__PURE__*/React__default["default"].createElement(Title, titleComponentProps), isTagsBodyVisible && /*#__PURE__*/React__default["default"].createElement("div", _extends({
-    className: "neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg w-full border p-4"
-  }, bodyProps), neetoCist.isNotEmpty(selectedTags) && /*#__PURE__*/React__default["default"].createElement(TagsList, tagsListProps), isTagsDropdownVisible && /*#__PURE__*/React__default["default"].createElement(TagsSelector, tagsSelectorProps), isAddTagsButtonVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    actionBlockProps: actionBlockProps,
+    bodyProps: bodyProps,
+    containerProps: containerProps,
+    isMetadataBlock: isMetadataBlock,
+    isTagsBodyVisible: isTagsBodyVisible,
+    titleComponentProps: titleComponentProps
+  }, neetoCist.isNotEmpty(selectedTags) && /*#__PURE__*/React__default["default"].createElement(TagsList, tagsListProps), isTagsDropdownVisible && /*#__PURE__*/React__default["default"].createElement(TagsSelector, tagsSelectorProps), isAddTagsButtonVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
     className: "neeto-ui-mt-4",
     disabled: isDisabled,
     icon: neetoIcons.Plus,
@@ -351,7 +383,7 @@ var Tags$2 = function Tags(_ref) {
     onClick: function onClick() {
       return setIsTagsDropdownVisible(true);
     }
-  }, buttonProps))));
+  }, buttonProps)));
 };
 
 function _typeof(obj) {
@@ -493,7 +525,7 @@ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchTags = function useFetchTags(params) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([TAG_KEY, Object.values(params)], function () {
+  return reactQuery.useQuery([TAG_KEY, params], function () {
     return tagsApi.fetch(params);
   }, _objectSpread$3({
     staleTime: STALE_TIME,
@@ -504,48 +536,40 @@ var useFetchTags = function useFetchTags(params) {
   }, options));
 };
 var useCreateTag = function useCreateTag() {
-  return reactQuery.useMutation(function (_ref) {
+  return reactUtils.useMutationWithInvalidation(function (_ref) {
     var url = _ref.url,
       payload = _ref.payload;
     return tagsApi.create(url, payload);
   }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries([TAG_KEY]);
-    }
+    keysToInvalidate: [[TAG_KEY]]
   });
 };
 var useUpdateTag = function useUpdateTag() {
-  return reactQuery.useMutation(function (_ref2) {
+  return reactUtils.useMutationWithInvalidation(function (_ref2) {
     var url = _ref2.url,
       id = _ref2.id,
       payload = _ref2.payload;
     return tagsApi.update(url, id, payload);
   }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries([TAG_KEY]);
-    }
+    keysToInvalidate: [[TAG_KEY]]
   });
 };
 var useDeleteTag = function useDeleteTag() {
-  return reactQuery.useMutation(function (_ref3) {
+  return reactUtils.useMutationWithInvalidation(function (_ref3) {
     var url = _ref3.url,
       id = _ref3.id;
     return tagsApi.destroy(url, id);
   }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries([TAG_KEY]);
-    }
+    keysToInvalidate: [[TAG_KEY]]
   });
 };
 var useMergeTags = function useMergeTags() {
-  return reactQuery.useMutation(function (_ref4) {
+  return reactUtils.useMutationWithInvalidation(function (_ref4) {
     var url = _ref4.url,
       payload = _ref4.payload;
     return tagsApi.merge(url, payload);
   }, {
-    onSuccess: function onSuccess() {
-      return queryClient.invalidateQueries([TAG_KEY]);
-    }
+    keysToInvalidate: [[TAG_KEY]]
   });
 };
 var refetchTags = function refetchTags() {
@@ -902,11 +926,6 @@ var Dashboard = function Dashboard(_ref) {
       }
     });
   };
-  if (isLoading) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-w-full neeto-ui-h-screen"
-    }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null));
-  }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header, {
     breadcrumbs: breadcrumbs,
     data: data,
@@ -922,7 +941,7 @@ var Dashboard = function Dashboard(_ref) {
     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", {
+  }), !isLoading && !(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"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
@@ -946,6 +965,7 @@ var Dashboard = function Dashboard(_ref) {
     currentPageNumber: page,
     defaultPageSize: constants.DEFAULT_PAGE_SIZE,
     handlePageChange: setPage,
+    loading: isLoading,
     paginationProps: {
       showSizeChanger: false
     },