@bigbinary/neeto-tags-frontend 0.0.30 → 0.0.31

package/dist/index.js

@@ -27,7 +27,7 @@ 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; }
@@ -3505,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 = {
@@ -6858,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;
@@ -6872,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: {
@@ -6890,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();
@@ -6912,25 +6914,38 @@ 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"
@@ -6940,15 +6955,16 @@ var ManageTags = function ManageTags(_ref) {
     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,
@@ -6962,16 +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,
-        label: t("saveChanges")
-      }
+      style: "primary",
+      type: "submit"
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "neeto-tags-manage-tag-cancel-button",
+      label: t("cancel"),
+      onClick: onPaneClose,
+      style: "text"
     })));
   }));
 };