@bigbinary/neeto-tags-frontend 0.0.27 → 0.0.29

package/dist/index.js

@@ -18,7 +18,7 @@ import _createClass$1 from '@babel/runtime/helpers/createClass';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useHistory, Switch, Route } from 'react-router-dom';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Tag, Dropdown, Button, Toastr, Pane, Typography, PageLoader, Table, Alert, Input as Input$1, Modal } from '@bigbinary/neetoui';
+import { Tag, Dropdown, Toastr, Pane, Typography, Button, PageLoader, Table, Alert, Input as Input$1, Modal } from '@bigbinary/neetoui';
 import * as yup from 'yup';
 import { MenuHorizontal, Plus } from '@bigbinary/neeto-icons';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
@@ -3396,11 +3396,12 @@ var plcHolder = "Type to search tag…";
 var manage = "Manage Tags";
 var remove = "Remove {{tag}} tag";
 var exists = "{{tag}} already exists.";
+var edit = "Edit";
 var addTag = "Add Tag";
 var selectOrCreate = "Select or Create tag";
 var select = "Select {{what}}";
 var search = "Search {{where}}";
-var addNew = "Add New {{what}}";
+var addNew = "Add {{what}}";
 var tag = "Tag";
 var noTagsFound = "No Tags Found";
 var deleteItem = "Are you sure you want to delete {{type}}";
@@ -3408,11 +3409,17 @@ var cannotBeUndone = "This action cannot be undone.";
 var proceed = "Proceed";
 var cancel = "Cancel";
 var name = "Name";
+var required = "{{what}} is a required field.";
+var maxLength = "{{what}} must be less than {{length}} characters.";
+var type = "{{what}} must be a {{type}}.";
 var description = "Description";
 var editItem = "Edit {{what}}";
 var createSuccess = "Tag created successfully.";
 var updateSuccess = "Tag updated successfully.";
 var deleteSuccess = "Tag deleted successfully.";
+var types = {
+	string: "string"
+};
 var merge$1 = {
 	sourceTag: "Source Tag",
 	destinationTag: "Destination Tag",
@@ -3432,6 +3439,8 @@ var en = {
 	remove: remove,
 	exists: exists,
 	"new": "Create new tag",
+	"delete": "Delete",
+	edit: edit,
 	addTag: addTag,
 	selectOrCreate: selectOrCreate,
 	select: select,
@@ -3444,11 +3453,15 @@ var en = {
 	proceed: proceed,
 	cancel: cancel,
 	name: name,
+	required: required,
+	maxLength: maxLength,
+	type: type,
 	description: description,
 	editItem: editItem,
 	createSuccess: createSuccess,
 	updateSuccess: updateSuccess,
 	deleteSuccess: deleteSuccess,
+	types: types,
 	merge: merge$1
 };
 
@@ -3467,18 +3480,18 @@ instance.use(initReactI18next).init({
 var DEFAULT_PAGE_INDEX = 1;
 var DEFAULT_PAGE_SIZE = 10;
 var COMMON_COLUMNS = [{
-  title: "Name",
+  title: instance.t("Name"),
   dataIndex: "name",
   key: "name",
   render: function render(name) {
     return /*#__PURE__*/React.createElement(Tag, {
       label: name,
-      color: "blue"
+      style: "secondary"
     });
   },
   width: "30%"
 }, {
-  title: "Description",
+  title: instance.t("Description"),
   dataIndex: "description",
   key: "description",
   render: function render(description) {
@@ -3487,8 +3500,22 @@ var COMMON_COLUMNS = [{
   width: "40%"
 }];
 var TAG_SCHEMA = yup.object({
-  name: yup.string().typeError("Name must be a string.").required("Name is a required field.").max(50, "Name should not exceed 50 characters."),
-  description: yup.string().typeError("Description must be a string.").nullable().max(255, "Description should not exceed 255 characters.")
+  name: yup.string().typeError(instance.t("type", {
+    what: instance.t("name"),
+    type: instance.t("types.string")
+  })).required(instance.t("required", {
+    what: instance.t("name")
+  })).max(50, instance.t("max", {
+    what: instance.t("name"),
+    max: 50
+  })),
+  description: yup.string().typeError(instance.t("type", {
+    what: instance.t("description"),
+    type: instance.t("types.string")
+  })).nullable().max(100, instance.t("max", {
+    what: instance.t("description"),
+    max: 255
+  }))
 });
 var PANE_TYPES = {
   CREATE: "CREATE_TAG",
@@ -3502,6 +3529,8 @@ var PLURAL = {
   count: 2
 };
 
+var Menu$1 = Dropdown.Menu,
+    MenuItem = Dropdown.MenuItem;
 var renderColumnData = function renderColumnData(columns, handleEdit, handleDelete) {
   return [].concat(_toConsumableArray(columns), [{
     id: "actions",
@@ -3512,34 +3541,25 @@ var renderColumnData = function renderColumnData(columns, handleEdit, handleDele
           return e.stopPropagation();
         }
       }, /*#__PURE__*/React.createElement(Dropdown, {
+        autoWidth: true,
         icon: MenuHorizontal,
         buttonProps: {
           style: "text"
         },
         position: "bottom-end",
-        autoWidth: true,
         strategy: "fixed"
-      }, /*#__PURE__*/React.createElement("li", {
-        className: "neeto-tag-dropdown__item"
-      }, /*#__PURE__*/React.createElement(Button, {
+      }, /*#__PURE__*/React.createElement(Menu$1, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
+        "data-cy": "tags-edit-button",
         onClick: function onClick() {
           return handleEdit(tag);
-        },
-        label: "Edit",
-        style: "text",
-        className: "neeto-tag-dropdown__button",
-        "data-cy": "tags-edit-button"
-      })), /*#__PURE__*/React.createElement("li", {
-        className: "neeto-tag-dropdown__item"
-      }, /*#__PURE__*/React.createElement(Button, {
-        label: "Delete",
+        }
+      }, instance.t("edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
+        style: "danger",
+        "data-cy": "tags-delete-button",
         onClick: function onClick() {
           return handleDelete(tag);
-        },
-        style: "danger-text",
-        className: "neeto-tag-dropdown__button",
-        "data-cy": "tags-delete-button"
-      }))));
+        }
+      }, instance.t("delete")))));
     }
   }]);
 };
@@ -6829,11 +6849,14 @@ var refetchTags = function refetchTags() {
 };
 
 var useTagsForm = function useTagsForm(_ref) {
-  var isEdit = _ref.isEdit,
-      tagType = _ref.tagType,
+  var createTags = _ref.createTags,
+      goToFirstPage = _ref.goToFirstPage,
+      isEdit = _ref.isEdit,
       onClose = _ref.onClose,
-      goToFirstPage = _ref.goToFirstPage;
+      tagType = _ref.tagType,
+      updateTags = _ref.updateTags;
   var tagModification = isEdit ? useUpdateTag : useCreateTag;
+  var tagOperation = isEdit ? updateTags : createTags;
 
   var _tagModification = tagModification(),
       mutate = _tagModification.mutate,
@@ -6857,7 +6880,10 @@ var useTagsForm = function useTagsForm(_ref) {
 
     mutate(tagData, {
       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();
         onClose();
       },
       onError: function onError() {
@@ -6873,11 +6899,13 @@ var useTagsForm = function useTagsForm(_ref) {
 };
 
 var ManageTags = function ManageTags(_ref) {
-  var tag = _ref.tag,
-      type = _ref.type,
+  var createTags = _ref.createTags,
+      goToFirstPage = _ref.goToFirstPage,
       onClose = _ref.onClose,
+      tag = _ref.tag,
       tagType = _ref.tagType,
-      goToFirstPage = _ref.goToFirstPage;
+      type = _ref.type,
+      updateTags = _ref.updateTags;
   var isEdit = type === PANE_TYPES.EDIT;
   var initValues = isEdit ? tag : INITIAL_TAG_VALUES;
 
@@ -6885,10 +6913,12 @@ var ManageTags = function ManageTags(_ref) {
       t = _useTranslation.t;
 
   var _useTagsForm = useTagsForm({
+    createTags: createTags,
+    goToFirstPage: goToFirstPage,
     isEdit: isEdit,
-    tagType: tagType,
     onClose: onClose,
-    goToFirstPage: goToFirstPage
+    tagType: tagType,
+    updateTags: updateTags
   }),
       handleSubmit = _useTagsForm.handleSubmit;
 
@@ -6926,12 +6956,11 @@ var ManageTags = function ManageTags(_ref) {
       rows: 3,
       "data-cy": "tag-description-text-area",
       maxLength: 255
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "flex items-center space-x-2"
-    }, /*#__PURE__*/React.createElement(ActionBlock, {
+    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
       className: "flex items-center space-x-2",
       cancelButtonProps: {
-        onClick: onClose
+        onClick: onClose,
+        disabled: false
       },
       submitButtonProps: {
         loading: isSubmitting
@@ -7033,6 +7062,7 @@ var EmptyState = function EmptyState(_ref) {
     weight: "normal",
     className: "mb-8 text-gray-600"
   }, "For more information, please visit our", " ", /*#__PURE__*/React.createElement(Button, {
+    size: "small",
     style: "link",
     label: "knowledge base.",
     href: kbArticleUrl,
@@ -7046,15 +7076,18 @@ var EmptyState = function EmptyState(_ref) {
 var Dashboard = function Dashboard(_ref) {
   var _data$tags2, _data$tags3, _data$tags4;
 
-  var tagType = _ref.tagType,
-      breadcrumbs = _ref.breadcrumbs,
+  var breadcrumbs = _ref.breadcrumbs,
+      createTags = _ref.createTags,
+      deleteTags = _ref.deleteTags,
       displayMenu = _ref.displayMenu,
       handleMenuToggle = _ref.handleMenuToggle,
-      tagsPath = _ref.tagsPath,
       kbArticleUrl = _ref.kbArticleUrl,
       onTagRowClick = _ref.onTagRowClick,
       _ref$tagsMergable = _ref.tagsMergable,
-      tagsMergable = _ref$tagsMergable === void 0 ? false : _ref$tagsMergable;
+      tagsMergable = _ref$tagsMergable === void 0 ? false : _ref$tagsMergable,
+      tagsPath = _ref.tagsPath,
+      tagType = _ref.tagType,
+      updateTags = _ref.updateTags;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -7128,7 +7161,7 @@ var Dashboard = function Dashboard(_ref) {
     };
     mutate(payload, {
       onSuccess: function onSuccess() {
-        var _data$tags;
+        var _data$tags, _deleteTags$onSuccess;
 
         setIsDeleteAlertOpen(false);
 
@@ -7138,6 +7171,7 @@ 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();
         Toastr.success(t("deleteSuccess"));
       },
       onError: function onError(_ref2) {
@@ -7168,7 +7202,6 @@ var Dashboard = function Dashboard(_ref) {
       })
     },
     actionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, tagsMergable && /*#__PURE__*/React.createElement(Button, {
-      size: "large",
       style: "secondary",
       label: t("merge.mergeTags"),
       onClick: function onClick() {
@@ -7177,7 +7210,6 @@ var Dashboard = function Dashboard(_ref) {
       disabled: (data === null || data === void 0 ? void 0 : data.tags.length) < PLURAL.count
     }), /*#__PURE__*/React.createElement(Button, {
       icon: Plus,
-      size: "large",
       label: t("addNew", {
         what: t("tag")
       }),
@@ -7193,7 +7225,6 @@ var Dashboard = function Dashboard(_ref) {
     kbArticleUrl: kbArticleUrl,
     actionBlock: /*#__PURE__*/React.createElement(Button, {
       icon: Plus,
-      size: "large",
       label: t("addNew", {
         what: t("tag")
       }),
@@ -7236,13 +7267,15 @@ var Dashboard = function Dashboard(_ref) {
       x: "100%"
     }
   })))), /*#__PURE__*/React.createElement(ManageTags, {
-    type: paneType,
-    tagType: tagType,
-    tag: selectedTag,
+    createTags: createTags,
+    goToFirstPage: goToFirstPage,
     onClose: function onClose() {
       return setPaneType(null);
     },
-    goToFirstPage: goToFirstPage
+    tag: selectedTag,
+    tagType: tagType,
+    type: paneType,
+    updateTags: updateTags
   }), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDeleteAlertOpen,
     title: "".concat(t("delete"), " ").concat(selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.name),
@@ -7405,7 +7438,6 @@ var MergeAlert = function MergeAlert(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     label: t("proceed"),
     onClick: handleSubmit,
-    size: "large",
     loading: isSubmitting,
     disabled: isSubmitting
   }), /*#__PURE__*/React.createElement(Button, {
@@ -7413,20 +7445,20 @@ var MergeAlert = function MergeAlert(_ref) {
     label: t("cancel"),
     onClick: function onClick() {
       return setShowModal(false);
-    },
-    size: "large"
+    }
   })));
 };
 
 var Merge = function Merge(_ref) {
   var _data$tags;
 
-  var tagType = _ref.tagType,
-      breadcrumbs = _ref.breadcrumbs,
-      tagsPath = _ref.tagsPath,
-      handleMenuToggle = _ref.handleMenuToggle,
+  var breadcrumbs = _ref.breadcrumbs,
       displayMenu = _ref.displayMenu,
-      kbArticleUrl = _ref.kbArticleUrl;
+      handleMenuToggle = _ref.handleMenuToggle,
+      kbArticleUrl = _ref.kbArticleUrl,
+      mergeTags = _ref.mergeTags,
+      tagsPath = _ref.tagsPath,
+      tagType = _ref.tagType;
 
   var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -7477,8 +7509,11 @@ var Merge = function Merge(_ref) {
       payload: payload
     }, {
       onSuccess: function onSuccess() {
+        var _mergeTags$onSuccess;
+
         setDestinationTag("");
         setSourceTag("");
+        mergeTags === null || mergeTags === void 0 ? void 0 : (_mergeTags$onSuccess = mergeTags.onSuccess) === null || _mergeTags$onSuccess === void 0 ? void 0 : _mergeTags$onSuccess.callback();
         setIsModalOpen(false);
       }
     });
@@ -7498,7 +7533,6 @@ var Merge = function Merge(_ref) {
     title: t("merge.mergeTags"),
     menuBarToggle: displayMenu ? handleMenuToggle : null,
     actionBlock: /*#__PURE__*/React.createElement(Button, {
-      size: "large",
       disabled: !(sourceTag !== null && sourceTag !== void 0 && sourceTag.id && destinationTag !== null && destinationTag !== void 0 && destinationTag.id),
       onClick: function onClick() {
         setIsModalOpen(true);
@@ -7510,6 +7544,7 @@ var Merge = function Merge(_ref) {
     title: "Tags Not Found",
     kbArticleUrl: kbArticleUrl,
     actionBlock: /*#__PURE__*/React.createElement(Button, {
+      size: "small",
       onClick: function onClick() {
         return history.push(tagsPath);
       },