@bigbinary/neeto-folders-frontend 2.0.9 → 2.0.11

package/dist/cjs/hooks.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var useFolderActions = require('../useFolderActions-69nKxJCT.js');
+var useFolderActions = require('../useFolderActions-Ok2WR6Ht.js');
 require('@babel/runtime/helpers/defineProperty');
 require('i18next');
 require('@bigbinary/neeto-cist');

package/dist/components.js

@@ -3,11 +3,11 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { shallow } from 'zustand/shallow';
 import { useQueryClient } from '@tanstack/react-query';
 import { useQueryParams, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
+import { buildUrl, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/utils';
 import Alert from '@bigbinary/neetoui/Alert';
 import { useTranslation as useTranslation$1, Trans } from 'react-i18next';
 import { useHistory, Link, NavLink } from 'react-router-dom';
-import { c as useFolderStore, d as useDestroyFolder, a as useFolders, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions } from './useFolderActions-Bjx-yzjp.js';
+import { c as useFolderStore, d as useDestroyFolder, a as useFolders, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions } from './useFolderActions-DQUMayG_.js';
 import { QUERY_KEYS } from './constants.js';
 import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree, b as mapToSortedTree } from './index-CO0LgS5v.js';
 import { a as isActiveFolder, m as mapObj, g as getActiveFolderId, i as isArray } from './internal-B2c8gwOa.js';
@@ -17,6 +17,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import React, { createElement, forwardRef, useMemo, useState, useId, useEffect, startTransition } from 'react';
 import Typography from '@bigbinary/neetoui/Typography';
+import Spinner from '@bigbinary/neetoui/Spinner';
 import Input from '@bigbinary/neetoui/formik/Input';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Form from '@bigbinary/neetoui/formik/Form';
@@ -33,7 +34,7 @@ import Down from '@bigbinary/neeto-icons/Down';
 import Label from '@bigbinary/neetoui/Label';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
 import Button from '@bigbinary/neetoui/Button';
-import { noop, isNotPresent } from '@bigbinary/neeto-cist';
+import { hyphenate, noop, isNotPresent } from '@bigbinary/neeto-cist';
 import Radio from '@bigbinary/neetoui/Radio';
 import { useDraggable, useDroppable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor } from '@dnd-kit/core';
 import Reorder from '@bigbinary/neeto-icons/Reorder';
@@ -347,7 +348,8 @@ var AddEditPane = function AddEditPane(_ref) {
     type = _useFolderStore.type,
     item = _useFolderStore.item;
   var _useFetchFolders = useFetchFolders(config),
-    folders = _useFetchFolders.data;
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
   var _useCreateFolder = useCreateFolder(config),
     createFolder = _useCreateFolder.mutate;
   var _useUpdateFolder = useUpdateFolder(config),
@@ -361,38 +363,59 @@ var AddEditPane = function AddEditPane(_ref) {
   var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
   var parentId = isValidParent ? activeFolder.id : null;
   var extraAttributes = config.extraAttributes;
+  var handleError = function handleError(setStatus, error) {
+    var response = error.response;
+    if (response && response.data && response.data.errors) {
+      setStatus(response.data.errors);
+    }
+  };
   var onSubmitForm = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
-      var payload;
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values, _ref2) {
+      var setStatus, payload, reactQueryOptions, config;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            setStatus = _ref2.setStatus;
             payload = createPayload(values, extraAttributes);
+            reactQueryOptions = {
+              onSuccess: function onSuccess() {
+                showThumbsUpToastr();
+                onClose();
+              },
+              onError: function onError(error) {
+                return handleError(setStatus, error);
+              }
+            };
+            config = {
+              showToastr: false
+            };
             if (!isEditing) {
-              _context.next = 6;
+              _context.next = 9;
               break;
             }
-            _context.next = 4;
+            _context.next = 7;
             return updateFolder({
               id: item.id,
-              payload: payload
-            });
-          case 4:
-            _context.next = 8;
+              payload: payload,
+              config: config
+            }, reactQueryOptions);
+          case 7:
+            _context.next = 11;
             break;
-          case 6:
-            _context.next = 8;
-            return createFolder(payload);
-          case 8:
-            onClose();
           case 9:
+            _context.next = 11;
+            return createFolder({
+              payload: payload,
+              config: config
+            }, reactQueryOptions);
+          case 11:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return function onSubmitForm(_x) {
-      return _ref2.apply(this, arguments);
+    return function onSubmitForm(_x, _x2) {
+      return _ref3.apply(this, arguments);
     };
   }();
   var folderOptions = useMemo(function () {
@@ -403,6 +426,12 @@ var AddEditPane = function AddEditPane(_ref) {
       parentId: parentId
     }, extraAttributes);
   }, [isEditing, item, parentId, extraAttributes]);
+  if (isFetching) {
+    return /*#__PURE__*/jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Pane.Header, {
       children: /*#__PURE__*/jsx(Typography, {
@@ -417,8 +446,8 @@ var AddEditPane = function AddEditPane(_ref) {
         validationSchema: FORM_VALIDATION_SCHEMA,
         onSubmit: onSubmitForm
       },
-      children: function children(_ref3) {
-        var dirty = _ref3.dirty;
+      children: function children(_ref4) {
+        var dirty = _ref4.dirty;
         return /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(Pane.Body, {
             className: "pb-6",
@@ -497,6 +526,7 @@ var Node = function Node(_ref, ref) {
       onClick: onClick,
       ref: ref
     })), {}, {
+      "data-cy": "".concat(hyphenate(folder.name), "-folder-node"),
       className: classNames("relative my-1 flex cursor-pointer items-center px-2 py-1", className),
       children: [icon, /*#__PURE__*/jsxs("div", {
         className: "ml-2",
@@ -569,6 +599,7 @@ var _SelectableNode = function SelectableNode(_ref) {
         readOnly: true,
         checked: selection === folder.id,
         className: "neeto-ui-radio__container",
+        "data-cy": "".concat(hyphenate(folder.name), "-folder-option"),
         name: "move-folder-option"
       }),
       onClick: isDisabled ? noop : function () {
@@ -601,7 +632,8 @@ var PaneBody = function PaneBody(_ref) {
     setFolderState = _useFolderStore.setFolderState;
   var _useFetchFolders = useFetchFolders(config),
     _useFetchFolders$data = _useFetchFolders.data,
-    folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
+    folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data,
+    isFetching = _useFetchFolders.isFetching;
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore2 = useFolderStore(function (store) {
@@ -640,6 +672,12 @@ var PaneBody = function PaneBody(_ref) {
     mode: "global",
     enabled: !!type
   });
+  if (isFetching) {
+    return /*#__PURE__*/jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(Pane.Header, {
       className: "flex items-center justify-between",
@@ -648,6 +686,7 @@ var PaneBody = function PaneBody(_ref) {
         children: t("moveToFolder.title")
       }), /*#__PURE__*/jsx(Button, {
         className: "mr-2",
+        "data-cy": "add-new-folder-button",
         label: t("folders.add"),
         style: "link",
         onClick: onAddFolder
@@ -672,23 +711,29 @@ var PaneBody = function PaneBody(_ref) {
       className: "space-x-2",
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex flex-1 space-x-2",
-        children: [/*#__PURE__*/jsx(Button, _objectSpread$8({
+        children: [/*#__PURE__*/jsx(Button, _objectSpread$8(_objectSpread$8({
           disabled: selection === undefined,
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {
             return onSubmit(selection);
           }
-        }, submitButtonProps)), /*#__PURE__*/jsx(Button, _objectSpread$8({
+        }, submitButtonProps), {}, {
+          "data-cy": "save-changes-button"
+        })), /*#__PURE__*/jsx(Button, _objectSpread$8(_objectSpread$8({
           label: t("common.cancel"),
           style: "text",
           onClick: onClose
-        }, cancelButtonProps))]
-      }), onRemove && /*#__PURE__*/jsx(Button, _objectSpread$8({
+        }, cancelButtonProps), {}, {
+          "data-cy": "cancel-button"
+        }))]
+      }), onRemove && /*#__PURE__*/jsx(Button, _objectSpread$8(_objectSpread$8({
         label: t("moveToFolder.remove"),
         style: "tertiary",
         onClick: onRemove
-      }, removeButtonProps))]
+      }, removeButtonProps), {}, {
+        "data-cy": "remove-from-folder-button"
+      }))]
     })]
   });
 };
@@ -811,7 +856,8 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFetchFolders = useFetchFolders(config),
-    folders = _useFetchFolders.data;
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
   var _useReorderFolders = useReorderFolders(config),
     reorderFolders = _useReorderFolders.mutate;
   var _useFolderStore = useFolderStore(function (store) {
@@ -880,6 +926,12 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
       className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
     })
   };
+  if (isFetching) {
+    return /*#__PURE__*/jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Pane.Header, {
       children: /*#__PURE__*/jsx(Typography, {
@@ -1126,7 +1178,8 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFetchFolders = useFetchFolders(config),
-    folders = _useFetchFolders.data;
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
   var _useReorderFolders = useReorderFolders(config),
     reorderFolders = _useReorderFolders.mutate;
   var sensors = useSensors(useSensor(PointerSensor, sensorConfig));
@@ -1208,6 +1261,12 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
     })
   };
+  if (isFetching) {
+    return /*#__PURE__*/jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Pane.Header, {
       children: /*#__PURE__*/jsx(Typography, {
@@ -1355,6 +1414,7 @@ var FolderTile = function FolderTile(_ref) {
   metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel).toLowerCase());
   return /*#__PURE__*/jsxs(Link, {
     className: "neeto-ui-bg-gray-50 neeto-ui-border-gray-200 neeto-ui-rounded-md hover:neeto-ui-border-primary-500 relative flex max-w-full items-start gap-2 border-2 p-3 transition-colors ease-in",
+    "data-cy": "".concat(hyphenate(folder.name), "-folder-tile"),
     to: link,
     children: [/*#__PURE__*/jsx(Checkbox, {
       checked: isSelected,
@@ -1370,6 +1430,7 @@ var FolderTile = function FolderTile(_ref) {
       className: "flex min-w-0 flex-grow flex-col gap-2",
       children: [/*#__PURE__*/jsx(Typography, {
         className: "-mt-0.5 line-clamp-2 break-words pr-8",
+        "data-cy": "folder-name",
         lineHeight: "snug",
         style: "body1",
         title: folder.name,
@@ -1420,6 +1481,7 @@ var FoldersList = function FoldersList(_ref) {
       children: t("folders.title")
     }), /*#__PURE__*/jsx("div", {
       className: "neeto-folders-grid-view-wrapper mb-10 grid w-full gap-4",
+      "data-cy": "folders-list",
       children: subFolders.map(function (folder) {
         return /*#__PURE__*/createElement(FolderTile, {
           actions: actions,
@@ -1470,6 +1532,7 @@ var FolderNode = function FolderNode(_ref) {
     to: link,
     children: /*#__PURE__*/jsxs("div", {
       className: "flex items-center",
+      "data-cy": "".concat(hyphenate(name), "-folder-sublink"),
       children: [/*#__PURE__*/jsx(Typography, {
         className: "line-clamp-1 block truncate",
         component: "span",