@bigbinary/neeto-tags-frontend 0.0.29 → 0.0.31

package/dist/index.js

@@ -20,14 +20,14 @@ import { useHistory, Switch, Route } from 'react-router-dom';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 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 { MenuHorizontal } from '@bigbinary/neeto-icons';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import ReactDOM from 'react-dom';
 import axios from 'axios';
 import { Container, Header, SubHeader, Scrollable, MenuBar } from '@bigbinary/neetoui/layouts';
 import { Formik, Form } from 'formik';
-import { Input, Textarea, ActionBlock } from '@bigbinary/neetoui/formik';
+import { Input, Textarea } from '@bigbinary/neetoui/formik';
 import classnames 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; }
@@ -3393,20 +3393,23 @@ var title = "Tags";
 var selectTags = "Select tags";
 var selectedTags = "Selected tags";
 var plcHolder = "Type to search tag…";
-var manage = "Manage Tags";
+var manage = "Manage tags";
 var remove = "Remove {{tag}} tag";
 var exists = "{{tag}} already exists.";
+var deleteTag = "Delete tag";
 var edit = "Edit";
-var addTag = "Add Tag";
-var selectOrCreate = "Select or Create tag";
+var addTag = "Add tag";
+var selectOrCreate = "Select or create tag";
 var select = "Select {{what}}";
 var search = "Search {{where}}";
 var addNew = "Add {{what}}";
 var tag = "Tag";
-var noTagsFound = "No Tags Found";
+var noTagsFound = "No tags found";
+var goBack = "Go back";
 var deleteItem = "Are you sure you want to delete {{type}}";
 var cannotBeUndone = "This action cannot be undone.";
 var proceed = "Proceed";
+var saveChanges = "Save changes";
 var cancel = "Cancel";
 var name = "Name";
 var required = "{{what}} is a required field.";
@@ -3421,12 +3424,12 @@ var types = {
 	string: "string"
 };
 var merge$1 = {
-	sourceTag: "Source Tag",
-	destinationTag: "Destination Tag",
-	mergeTags: "Merge Tags",
+	sourceTag: "Source tag",
+	destinationTag: "Destination tag",
+	mergeTags: "Merge tags",
 	merge: "Merge",
 	confirmation: {
-		title: "Merge Tags",
+		title: "Merge tags",
 		message: "Tag <strong>{{sourceTag}}</strong> will be merged into <strong>{{destinationTag}}</strong> tag. This will also be reflected in {{entities}} that are assigned with. This is a non-reversible operation. Do you wish to continue?"
 	}
 };
@@ -3440,6 +3443,7 @@ var en = {
 	exists: exists,
 	"new": "Create new tag",
 	"delete": "Delete",
+	deleteTag: deleteTag,
 	edit: edit,
 	addTag: addTag,
 	selectOrCreate: selectOrCreate,
@@ -3448,9 +3452,11 @@ var en = {
 	addNew: addNew,
 	tag: tag,
 	noTagsFound: noTagsFound,
+	goBack: goBack,
 	deleteItem: deleteItem,
 	cannotBeUndone: cannotBeUndone,
 	proceed: proceed,
+	saveChanges: saveChanges,
 	cancel: cancel,
 	name: name,
 	required: required,
@@ -3499,22 +3505,22 @@ var COMMON_COLUMNS = [{
   },
   width: "40%"
 }];
-var TAG_SCHEMA = yup.object({
+var TAG_SCHEMA = yup.object().shape({
   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", {
+  })).max(50, instance.t("maxLength", {
     what: instance.t("name"),
-    max: 50
+    length: 50
   })),
   description: yup.string().typeError(instance.t("type", {
     what: instance.t("description"),
     type: instance.t("types.string")
-  })).nullable().max(100, instance.t("max", {
+  })).nullable().max(255, instance.t("maxLength", {
     what: instance.t("description"),
-    max: 255
+    length: 255
   }))
 });
 var PANE_TYPES = {
@@ -6852,7 +6858,8 @@ var useTagsForm = function useTagsForm(_ref) {
   var createTags = _ref.createTags,
       goToFirstPage = _ref.goToFirstPage,
       isEdit = _ref.isEdit,
-      onClose = _ref.onClose,
+      onPaneClose = _ref.onPaneClose,
+      setHasSubmitted = _ref.setHasSubmitted,
       tagType = _ref.tagType,
       updateTags = _ref.updateTags;
   var tagModification = isEdit ? useUpdateTag : useCreateTag;
@@ -6866,6 +6873,7 @@ var useTagsForm = function useTagsForm(_ref) {
     var _values$description;
 
     var resetForm = _ref2.resetForm;
+    setHasSubmitted(true);
     values.description = values === null || values === void 0 ? void 0 : (_values$description = values.description) === null || _values$description === void 0 ? void 0 : _values$description.trim();
     var tagData = {
       payload: {
@@ -6884,7 +6892,7 @@ var useTagsForm = function useTagsForm(_ref) {
 
         !isEdit && goToFirstPage();
         tagOperation === null || tagOperation === void 0 ? void 0 : (_tagOperation$onSucce = tagOperation.onSuccess) === null || _tagOperation$onSucce === void 0 ? void 0 : _tagOperation$onSucce.callback();
-        onClose();
+        onPaneClose();
       },
       onError: function onError() {
         resetForm();
@@ -6906,48 +6914,62 @@ var ManageTags = function ManageTags(_ref) {
       tagType = _ref.tagType,
       type = _ref.type,
       updateTags = _ref.updateTags;
-  var isEdit = type === PANE_TYPES.EDIT;
-  var initValues = isEdit ? tag : INITIAL_TAG_VALUES;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasSubmitted = _useState2[0],
+      setHasSubmitted = _useState2[1];
+
+  var isEdit = type === PANE_TYPES.EDIT;
+  var initValues = isEdit ? tag : INITIAL_TAG_VALUES;
+
+  var onPaneClose = function onPaneClose() {
+    setHasSubmitted(false);
+    onClose();
+  };
+
   var _useTagsForm = useTagsForm({
     createTags: createTags,
     goToFirstPage: goToFirstPage,
     isEdit: isEdit,
-    onClose: onClose,
+    onPaneClose: onPaneClose,
+    setHasSubmitted: setHasSubmitted,
     tagType: tagType,
     updateTags: updateTags
   }),
-      handleSubmit = _useTagsForm.handleSubmit;
+      handleSubmit = _useTagsForm.handleSubmit,
+      isSubmitting = _useTagsForm.isSubmitting;
 
   return /*#__PURE__*/React.createElement(Pane, {
     isOpen: !!type,
-    onClose: onClose
+    onClose: onPaneClose
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
   }, isEdit ? t("editItem", {
-    what: t("tag")
+    what: t("tag").toLocaleLowerCase()
   }) : t("addNew", {
-    what: t("tag")
+    what: t("tag").toLocaleLowerCase()
   }))), /*#__PURE__*/React.createElement(Formik, {
     initialValues: initValues,
-    validateOnBlur: false,
-    validateOnChange: false,
     onSubmit: handleSubmit,
+    validateOnBlur: hasSubmitted,
+    validateOnChange: hasSubmitted,
     validationSchema: TAG_SCHEMA
   }, function (_ref2) {
-    var isSubmitting = _ref2.isSubmitting;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form, {
-      className: "flex w-full flex-col space-y-4",
+    var dirty = _ref2.dirty;
+    return /*#__PURE__*/React.createElement(Form, {
       noValidate: true
+    }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+      className: "flex w-full flex-col space-y-4"
     }, /*#__PURE__*/React.createElement(Input, {
       required: true,
       autoFocus: true,
       name: "name",
-      label: "".concat(t("tag"), " ").concat(t("name")),
+      label: "".concat(t("tag"), " ").concat(t("name").toLocaleLowerCase()),
       "data-cy": "tag-name-text-field",
       maxLength: 50
     }), /*#__PURE__*/React.createElement(Textarea, {
@@ -6956,15 +6978,21 @@ var ManageTags = function ManageTags(_ref) {
       rows: 3,
       "data-cy": "tag-description-text-area",
       maxLength: 255
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-      className: "flex items-center space-x-2",
-      cancelButtonProps: {
-        onClick: onClose,
-        disabled: false
+    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "neeto-tags-manage-tag-submit-button",
+      disabled: !dirty || isSubmitting,
+      label: t("saveChanges"),
+      loading: isSubmitting,
+      onClick: function onClick() {
+        return setHasSubmitted(true);
       },
-      submitButtonProps: {
-        loading: isSubmitting
-      }
+      style: "primary",
+      type: "submit"
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "neeto-tags-manage-tag-cancel-button",
+      label: t("cancel"),
+      onClick: onPaneClose,
+      style: "text"
     })));
   }));
 };
@@ -7198,7 +7226,7 @@ var Dashboard = function Dashboard(_ref) {
         setSearchTerm(value);
       },
       placeholder: t("search", {
-        where: t("title")
+        where: t("title").toLocaleLowerCase()
       })
     },
     actionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, tagsMergable && /*#__PURE__*/React.createElement(Button, {
@@ -7209,9 +7237,8 @@ var Dashboard = function Dashboard(_ref) {
       },
       disabled: (data === null || data === void 0 ? void 0 : data.tags.length) < PLURAL.count
     }), /*#__PURE__*/React.createElement(Button, {
-      icon: Plus,
       label: t("addNew", {
-        what: t("tag")
+        what: t("tag").toLocaleLowerCase()
       }),
       onClick: function onClick() {
         setSelectedTag(null);
@@ -7221,12 +7248,11 @@ var Dashboard = function Dashboard(_ref) {
     })),
     breadcrumbs: breadcrumbs
   }), !(data !== null && data !== void 0 && (_data$tags2 = data.tags) !== null && _data$tags2 !== void 0 && _data$tags2.length) ? /*#__PURE__*/React.createElement(EmptyState, {
-    title: "No Tags Found",
+    title: t("noTagsFound"),
     kbArticleUrl: kbArticleUrl,
     actionBlock: /*#__PURE__*/React.createElement(Button, {
-      icon: Plus,
       label: t("addNew", {
-        what: t("tag")
+        what: t("tag").toLocaleLowerCase()
       }),
       onClick: function onClick() {
         setSelectedTag(null);
@@ -7240,7 +7266,7 @@ var Dashboard = function Dashboard(_ref) {
     leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
       component: "h4",
       className: "neeto-ui-gray-800 font-semibold"
-    }, "".concat(data === null || data === void 0 ? void 0 : (_data$tags3 = data.tags) === null || _data$tags3 === void 0 ? void 0 : _data$tags3.length, " ").concat(tagType.label, " Tag(s)"))
+    }, "".concat(data === null || data === void 0 ? void 0 : (_data$tags3 = data.tags) === null || _data$tags3 === void 0 ? void 0 : _data$tags3.length, " ").concat(tagType.label, " tag(s)"))
   }), /*#__PURE__*/React.createElement("div", {
     className: "neeto-tags--table__wrapper"
   }, /*#__PURE__*/React.createElement(Table, {
@@ -7278,9 +7304,9 @@ var Dashboard = function Dashboard(_ref) {
     updateTags: updateTags
   }), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDeleteAlertOpen,
-    title: "".concat(t("delete"), " ").concat(selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.name),
+    title: t("deleteTag"),
     message: /*#__PURE__*/React.createElement(React.Fragment, null, t("deleteItem", {
-      type: t("tag")
+      type: t("tag").toLocaleLowerCase()
     }), " ", /*#__PURE__*/React.createElement("strong", null, selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.name), "? ", t("cannotBeUndone")),
     onSubmit: handleConfirmDelete,
     onClose: handleAlertClose,
@@ -7297,6 +7323,9 @@ var List = function List(_ref) {
       selectedTagId = _ref.selectedTagId,
       type = _ref.type;
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       tags = _useState2[0],
@@ -7323,7 +7352,9 @@ var List = function List(_ref) {
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
     },
-    placeholder: "Search tags"
+    placeholder: t("search", {
+      where: t("tag").toLocaleLowerCase()
+    })
   }), /*#__PURE__*/React.createElement("div", {
     className: "tags-merge__items"
   }, tags.map(function (tag) {
@@ -7541,14 +7572,14 @@ var Merge = function Merge(_ref) {
     }),
     breadcrumbs: updatedBreadcrumbs
   }), !(data !== null && data !== void 0 && (_data$tags = data.tags) !== null && _data$tags !== void 0 && _data$tags.length) ? /*#__PURE__*/React.createElement(EmptyState, {
-    title: "Tags Not Found",
+    title: t("noTagsFound"),
     kbArticleUrl: kbArticleUrl,
     actionBlock: /*#__PURE__*/React.createElement(Button, {
       size: "small",
       onClick: function onClick() {
         return history.push(tagsPath);
       },
-      label: "Go Back"
+      label: t("goBack")
     })
   }) : /*#__PURE__*/React.createElement(Scrollable, {
     className: "w-full"
@@ -7560,7 +7591,7 @@ var Merge = function Merge(_ref) {
     selectedCounterTagId: destinationTag === null || destinationTag === void 0 ? void 0 : destinationTag.id,
     selectedTagId: sourceTag === null || sourceTag === void 0 ? void 0 : sourceTag.id,
     type: t("select", {
-      what: t("merge.sourceTag")
+      what: t("merge.sourceTag").toLocaleLowerCase()
     })
   }), /*#__PURE__*/React.createElement(List, {
     tagList: data === null || data === void 0 ? void 0 : data.tags,
@@ -7568,7 +7599,7 @@ var Merge = function Merge(_ref) {
     selectedCounterTagId: sourceTag === null || sourceTag === void 0 ? void 0 : sourceTag.id,
     selectedTagId: destinationTag === null || destinationTag === void 0 ? void 0 : destinationTag.id,
     type: t("select", {
-      what: t("merge.destinationTag")
+      what: t("merge.destinationTag").toLocaleLowerCase()
     })
   })))), /*#__PURE__*/React.createElement(MergeAlert, {
     showModal: isModalOpen,