@bigbinary/neeto-tags-frontend 1.5.5 → 1.5.7

package/README.md

@@ -1,4 +1,4 @@
-# neeto-tags-nano
+# neetoTagsNano
 
 This repo acts as the source of truth for the new nano's structure, configs,
 data etc.

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

@@ -55,6 +55,9 @@
       "nameMaxLength": "Name must be less than {{length}} characters.",
       "nameRequired": "Name is a required field.",
       "nameMustBeString": "Name must be a string"
+    },
+    "shortcuts": {
+      "addTag": "Add Tags"
     }
   }
 }

package/dist/index.cjs.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
+var i18next = require('i18next');
 var classNames = require('classnames');
 var reactRouterDom = require('react-router-dom');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
@@ -20,7 +21,6 @@ var reactQuery = require('react-query');
 var axios = require('axios');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var formik = require('@bigbinary/neetoui/formik');
-var i18next = require('i18next');
 var yup = require('yup');
 var devtools = require('react-query/devtools');
 
@@ -124,18 +124,70 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var KEYBOARD_SHORTCUTS = {
+  addTag: {
+    sequence: "t",
+    description: i18next.t("neetoTags.shortcuts.addTag")
+  }
+};
+
 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-chat__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL1RhZ3Mvc3R5bGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0NBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1jaGF0X19tZXRhZGF0YS1jYXJkX19zcGlubmVyIHtcbiAgc2NhbGU6IDAuNjtcbn1cbiJdfQ== */";
+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;
+    showAddTagsOnTitle = _ref.showAddTagsOnTitle,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var tagsTitle = title || t("neetoTags.common.tag", constants.PLURAL);
@@ -169,12 +221,13 @@ var Title = function Title(_ref) {
     weight: "bold"
   }, titleProps), tagsTitle), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "inline-flex h-6 items-center"
-  }, isUpdating && /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, {
-    className: "neeto-chat__metadata-card__spinner"
+  }, (isUpdating || isLoading) && /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, {
+    className: "neeto-tags__metadata-card__spinner"
   }), !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, {
+    disabled: isDisabled,
     icon: neetoIcons.Settings,
     size: "15",
     style: "icon",
@@ -211,16 +264,24 @@ var Tags$2 = function Tags(_ref) {
     isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
     _ref$showAddTagsOnTit = _ref.showAddTagsOnTitle,
     showAddTagsOnTitle = _ref$showAddTagsOnTit === void 0 ? true : _ref$showAddTagsOnTit,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$showTitleBar = _ref.showTitleBar,
     showTitleBar = _ref$showTitleBar === void 0 ? true : _ref$showTitleBar,
     _ref$bodyProps = _ref.bodyProps,
-    bodyProps = _ref$bodyProps === void 0 ? {} : _ref$bodyProps;
+    bodyProps = _ref$bodyProps === void 0 ? {} : _ref$bodyProps,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTagsDropdownVisible = _useState2[0],
     setIsTagsDropdownVisible = _useState2[1];
+  reactUtils.useHotKeys(KEYBOARD_SHORTCUTS.addTag.sequence, function (event) {
+    event.preventDefault();
+    setIsTagsDropdownVisible(true);
+  });
   var tags = React.useMemo(function () {
     if (!allTags) return [];
     if (!selectedTags) return allTags;
@@ -249,44 +310,40 @@ var Tags$2 = function Tags(_ref) {
   };
   var isAddTagsButtonVisible = !showAddTagsOnTitle && !isTagsDropdownVisible;
   var isTagsBodyVisible = neetoCist.isNotEmpty(selectedTags) || isTagsDropdownVisible || isAddTagsButtonVisible;
-  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, {
+  var titleComponentProps = {
+    isDisabled: isDisabled,
+    isLoading: isLoading,
     isUpdating: isUpdating,
     setIsTagsDropdownVisible: setIsTagsDropdownVisible,
     showAddTagsOnTitle: showAddTagsOnTitle,
     title: title,
     titleProps: titleProps
-  }), 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("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, index) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends({
-      key: "".concat(index, "-").concat(tag.label),
-      label: tag.label,
-      style: "primary",
-      onClose: function onClose() {
-        return handleDeleteTag(tag);
-      }
-    }, tagProps));
-  })), isTagsDropdownVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    autoFocus: true,
-    isCreateable: true,
-    className: "neeto-ui-mt-4",
+  };
+  var tagsListProps = {
+    handleDeleteTag: handleDeleteTag,
+    isDisabled: isDisabled,
+    selectedTags: selectedTags,
+    tagProps: tagProps
+  };
+  var tagsSelectorProps = {
     defaultMenuIsOpen: showAddTagsOnTitle,
-    maxLength: 50,
-    options: tags,
-    placeholder: t("neetoTags.placeholder.selectOrCreateTag"),
+    tags: tags,
     onChange: function onChange(event) {
       return handleAddExistingTag(event);
     },
     onCreateOption: function onCreateOption(event) {
       setIsTagsDropdownVisible(false);
       onTagCreate(event);
-    }
-  }, selectProps)), isAddTagsButtonVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    },
+    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({
     className: "neeto-ui-mt-4",
+    disabled: isDisabled,
     icon: neetoIcons.Plus,
     label: t("neetoTags.button.addTag", constants.SINGULAR),
     size: "small",
@@ -501,9 +558,6 @@ var Header = function Header(_ref) {
     tagsMergable = _ref$tagsMergable === void 0 ? false : _ref$tagsMergable,
     setPaneType = _ref.setPaneType,
     setSelectedTag = _ref.setSelectedTag,
-    _ref$searchTerm = _ref.searchTerm,
-    searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm,
-    setSearchTerm = _ref.setSearchTerm,
     _ref$goToFirstPage = _ref.goToFirstPage,
     goToFirstPage = _ref$goToFirstPage === void 0 ? neetoCist.noop : _ref$goToFirstPage,
     _ref$tagsPath = _ref.tagsPath,
@@ -512,6 +566,9 @@ var Header = function Header(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var history = reactRouterDom.useHistory();
+  var resetPage = reactUtils.useFuncDebounce(function () {
+    return goToFirstPage();
+  });
   var ActionBlock = function ActionBlock() {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, tagsMergable && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "neeto-tags-merge-tags-button",
@@ -529,17 +586,12 @@ var Header = function Header(_ref) {
     }));
   };
   return /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], {
-    actionBlock: /*#__PURE__*/React__default["default"].createElement(ActionBlock, null),
     breadcrumbs: breadcrumbs,
+    actionBlock: /*#__PURE__*/React__default["default"].createElement(ActionBlock, null),
     title: t("neetoTags.common.tag", constants.PLURAL),
     searchProps: {
       "data-cy": "neeto-tags-search-text-input-field",
-      value: searchTerm,
-      onChange: function onChange(_ref2) {
-        var value = _ref2.target.value;
-        value.trim() && goToFirstPage();
-        setSearchTerm(value);
-      },
+      onChange: resetPage,
       placeholder: t("neetoTags.placeholder.searchTags")
     }
   });
@@ -774,26 +826,24 @@ var Dashboard = function Dashboard(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selectedTag = _useState2[0],
     setSelectedTag = _useState2[1];
-  var _useState3 = React.useState(""),
+  var _useState3 = React.useState(constants.DEFAULT_PAGE_INDEX),
     _useState4 = _slicedToArray(_useState3, 2),
-    searchTerm = _useState4[0],
-    setSearchTerm = _useState4[1];
-  var _useState5 = React.useState(constants.DEFAULT_PAGE_INDEX),
+    page = _useState4[0],
+    setPage = _useState4[1];
+  var _useState5 = React.useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    page = _useState6[0],
-    setPage = _useState6[1];
-  var _useState7 = React.useState(null),
+    paneType = _useState6[0],
+    setPaneType = _useState6[1];
+  var _useState7 = React.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    paneType = _useState8[0],
-    setPaneType = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isDeleteAlertOpen = _useState10[0],
-    setIsDeleteAlertOpen = _useState10[1];
-  var debouncedSearchTerm = reactUtils.useDebounce(searchTerm, 500);
+    isDeleteAlertOpen = _useState8[0],
+    setIsDeleteAlertOpen = _useState8[1];
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.search_term,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
   var _useFetchTags = useFetchTags({
       url: tagType.url,
-      searchTerm: debouncedSearchTerm.trim(),
+      searchTerm: searchTerm,
       pageSize: constants.DEFAULT_PAGE_SIZE,
       page: page
     }),
@@ -861,9 +911,7 @@ var Dashboard = function Dashboard(_ref) {
     breadcrumbs: breadcrumbs,
     data: data,
     displayMenu: displayMenu,
-    searchTerm: searchTerm,
     setPaneType: setPaneType,
-    setSearchTerm: setSearchTerm,
     setSelectedTag: setSelectedTag,
     tagsMergable: tagsMergable,
     tagsPath: tagsPath,