@scaleflex/widget-explorer 0.0.1

package/lib/hooks/useEditFileDetails.js

@@ -0,0 +1,505 @@
+var _excluded = ["name", "tags"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
+import validateItemMetadata from '@scaleflex/widget-utils/lib/metadata/validateItemMetadata';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import { updateUploadInfoMetaTags } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { selectIsUserAuth } from '@scaleflex/widget-core/lib/slices/user.slice';
+import { FILE_WINDOW_TAB_IDS, PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import deepEqual from '@scaleflex/widget-utils/lib/deepEqual';
+import mapMetaAttachmentsObjsToUuids from '@scaleflex/widget-utils/lib/metadata/mapMetaAttachmentsObjsToUuids';
+import { fileWindowUpdated, selectFileWindow } from '../slices/panels.slice';
+import { itemMetadataErrorsUpdated, selectActiveRegionalLang, selectMetadata, selectMetadataModel } from '../slices/metadata.slice';
+import { useConfirmationModal } from '../components/Modals';
+import { renameFile, updateFileMeta, updateFileTags } from '../slices/files.slice';
+import { useValidateFileName, useExplorer, useFileMetadata } from './';
+var getFlattenedRegionalValue = function getFlattenedRegionalValue(regionalValues) {
+  return typeof regionalValues === 'string' ? regionalValues : Object.values(regionalValues || {}).flat().filter(Boolean);
+};
+var useEditFileDetails = function useEditFileDetails(_ref) {
+  var editableFile = _ref.file,
+    _ref$useFileWindow = _ref.useFileWindow,
+    useFileWindow = _ref$useFileWindow === void 0 ? false : _ref$useFileWindow,
+    _ref$customHasUnsaved = _ref.customHasUnsavedChangesRef,
+    customHasUnsavedChangesRef = _ref$customHasUnsaved === void 0 ? null : _ref$customHasUnsaved;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n,
+    checkUserPermissions = _useExplorer.checkUserPermissions;
+  var triggerConfirmationModal = useConfirmationModal();
+  var _useFileMetadata = useFileMetadata({
+      file: editableFile
+    }),
+    customMetadataGroups = _useFileMetadata.customMetadataGroups;
+  var _useValidateFileName = useValidateFileName(true),
+    handleItemRenamingValidation = _useValidateFileName.handleItemRenamingValidation;
+  var isUserAuth = useSelector(selectIsUserAuth);
+  var isFileWindowEditing = useSelector(function (state) {
+    return useFileWindow && selectFileWindow(state).enableEdit;
+  });
+  var tabId = useSelector(function (state) {
+    return useFileWindow && selectFileWindow(state).tabId;
+  });
+  var metadata = useSelector(selectMetadata);
+  var activeRegionalLanguage = useSelector(selectActiveRegionalLang);
+  var metadataModel = useSelector(selectMetadataModel);
+  // Used in-case customHasUnSavedChangesRef provided so hook/internal handling will be used.
+  var metaFieldToScrollRef = useRef(null);
+  var internalHasUnsavedChangesRef = useRef(false);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSaveDisabled = _useState2[0],
+    setIsSaveDisabled = _useState2[1];
+  var _useState3 = useState((editableFile === null || editableFile === void 0 ? void 0 : editableFile.meta) || {}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    editedDetails = _useState4[0],
+    setEditedDetails = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    _isEditing = _useState6[0],
+    setIsEditing = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSaving = _useState8[0],
+    setIsSaving = _useState8[1];
+  var _useState9 = useState(true),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isCustomMetadataOpened = _useState10[0],
+    setIsCustomMetadataOpened = _useState10[1];
+  var _useState11 = useState({}),
+    _useState12 = _slicedToArray(_useState11, 2),
+    metaErrors = _useState12[0],
+    setMetaErrors = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    ignoreChangedNameExtension = _useState14[0],
+    setIgnoreChangedNameExtension = _useState14[1];
+  var hasUnsavedChangesRef = customHasUnsavedChangesRef || internalHasUnsavedChangesRef;
+  var file = editableFile || {};
+  var fileUuidOrId = file.uuid || file.id;
+  var isUserNotAllowedToEdit = useMemo(function () {
+    return !checkUserPermissions([PERMISSIONS.UPLOAD, PERMISSIONS.FILE_META]);
+  }, [checkUserPermissions, isUserAuth]);
+  var fileMeta = file.meta || {};
+  var isEditing = _isEditing || isFileWindowEditing;
+  var isPreUpload = isUploadableFile(file);
+  useUpdateEffect(function () {
+    setEditedDetails(fileMeta);
+  }, [fileMeta]);
+  useUpdateEffect(function () {
+    if (isEditing) {
+      cancelEditing(useFileWindow, true);
+    }
+  }, [fileUuidOrId]);
+
+  // reset errors on pressing cancel
+  useEffect(function () {
+    if (isEditing) {
+      var _validateItemMetadata = validateItemMetadata({
+          metadata: metadata,
+          itemMeta: fileMeta,
+          i18n: i18n,
+          fileName: file.name
+        }),
+        errors = _validateItemMetadata.errors;
+      var firstErrorFieldKey = Object.keys(errors)[0];
+      if (firstErrorFieldKey) {
+        scrollToMetaField(firstErrorFieldKey);
+      }
+      setMetaErrors(errors);
+    } else {
+      setMetaErrors({});
+    }
+  }, [isEditing]);
+  useEffect(function () {
+    if (metaFieldToScrollRef.current && isEditing && isCustomMetadataOpened) {
+      scrollToMetaField(metaFieldToScrollRef.current);
+    }
+  }, [isCustomMetadataOpened, isEditing]);
+  var enableFileWindowEdit = function enableFileWindowEdit() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$shouldEnable = _ref2.shouldEnable,
+      shouldEnable = _ref2$shouldEnable === void 0 ? true : _ref2$shouldEnable,
+      _ref2$forceUseFileWin = _ref2.forceUseFileWindow,
+      forceUseFileWindow = _ref2$forceUseFileWin === void 0 ? false : _ref2$forceUseFileWin,
+      _ref2$tabId = _ref2.tabId,
+      tabId = _ref2$tabId === void 0 ? null : _ref2$tabId;
+    if (useFileWindow || forceUseFileWindow) {
+      dispatch(fileWindowUpdated({
+        "for": fileUuidOrId,
+        enableEdit: shouldEnable,
+        tabId: tabId
+      }));
+    }
+  };
+  var cancelEditing = function cancelEditing() {
+    var forceUseFileWindow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var dismissAlert = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isSaving) {
+      return;
+    }
+    var triggerCancellation = function triggerCancellation() {
+      setIsEditing(false);
+      setEditedDetails(fileMeta);
+      enableFileWindowEdit({
+        shouldEnable: false,
+        forceUseFileWindow: forceUseFileWindow,
+        tabId: tabId
+      });
+    };
+
+    // If there is custom ref provided for unsaved changes, means there is custom handling/triggering from outside
+    // and wrapping the cancelEditing also, so trigger the cancellation directly so it is supposed that the alert is happened or not considered for this use-case.
+    if (customHasUnsavedChangesRef || dismissAlert) {
+      triggerCancellation();
+      return Promise.resolve();
+    }
+    return alertUnsavedChangesFirst(triggerCancellation);
+  };
+  var enableEditing = function enableEditing() {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref3$forceUseFileWin = _ref3.forceUseFileWindow,
+      forceUseFileWindow = _ref3$forceUseFileWin === void 0 ? false : _ref3$forceUseFileWin,
+      onMetaErrorConfirmed = _ref3.onMetaErrorConfirmed,
+      targetTabId = _ref3.tabId,
+      _ref3$forceUseSameTab = _ref3.forceUseSameTabConfirmationMsg,
+      forceUseSameTabConfirmationMsg = _ref3$forceUseSameTab === void 0 ? false : _ref3$forceUseSameTab;
+    // Don't enable editing for the versioned file previewed.
+    // if (originalFile.uuid !== file.uuid) { return }
+    if (isUserNotAllowedToEdit) {
+      return;
+    }
+    var _validateItemMetadata2 = validateItemMetadata({
+        metadata: metadata,
+        itemMeta: fileMeta,
+        i18n: i18n,
+        fileName: file.name
+      }),
+      errors = _validateItemMetadata2.errors,
+      isValid = _validateItemMetadata2.isValid;
+    var _onConfirm = function onConfirm(_tabId) {
+      if (typeof onMetaErrorConfirmed === 'function' && !isValid) {
+        onMetaErrorConfirmed();
+      }
+      enableFileWindowEdit({
+        shouldEnable: true,
+        forceUseFileWindow: forceUseFileWindow,
+        tabId: _tabId
+      });
+      setIsEditing(true);
+      setIsSaveDisabled(true);
+      dispatch(itemMetadataErrorsUpdated(errors));
+      setMetaErrors(errors || {});
+      setEditedDetails(fileMeta);
+    };
+    if (!isValid) {
+      triggerConfirmationModal({
+        title: i18n('explorerFileWindowMissingMetadataTitle'),
+        description: tabId === FILE_WINDOW_TAB_IDS.METADATA || forceUseSameTabConfirmationMsg ? i18n('explorerFileWindowMissingMetadataBody') : i18n('explorerFileWindowMissingMetadataBodyDiffTab'),
+        onConfirm: function onConfirm() {
+          return _onConfirm(FILE_WINDOW_TAB_IDS.METADATA);
+        }
+      });
+      return;
+    }
+    _onConfirm(targetTabId);
+  };
+  var alertUnsavedChangesFirst = function alertUnsavedChangesFirst(_onConfirm2) {
+    return new Promise(function (resolve, reject) {
+      if (isEditing && hasUnsavedChangesRef.current) {
+        triggerConfirmationModal({
+          title: i18n('fileWindowDiscardChangesModalTitle'),
+          description: i18n('fileWindowDiscardChangesModalDesc', {
+            asset_name: file.name
+          }),
+          onConfirm: function onConfirm() {
+            hasUnsavedChangesRef.current = false;
+            if (typeof _onConfirm2 === 'function') {
+              _onConfirm2();
+              resolve();
+            }
+          }
+        });
+        return;
+      }
+      _onConfirm2();
+      resolve();
+    });
+  };
+  var setDetails = function setDetails(objValue) {
+    var updatedDetails = _objectSpread(_objectSpread({}, editedDetails), objValue);
+    setEditedDetails(function (latestDetails) {
+      updatedDetails = _objectSpread(_objectSpread({}, latestDetails), objValue);
+      return updatedDetails;
+    });
+    var _validateItemMetadata3 = validateItemMetadata({
+        metadata: metadata,
+        itemMeta: _objectSpread(_objectSpread({}, editedDetails), objValue),
+        i18n: i18n,
+        fileName: file.name
+      }),
+      errors = _validateItemMetadata3.errors;
+    dispatch(itemMetadataErrorsUpdated(errors));
+    setMetaErrors(errors || {});
+    setTimeout(function () {
+      var _file$meta, _file$meta2, _file$meta3, _file$meta4;
+      if (!file.meta) {
+        return;
+      }
+      var flattenedFileTags = getFlattenedRegionalValue(file.tags || {});
+      var flattenedFileTitle = getFlattenedRegionalValue(((_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta.title) || {});
+      var flattenedFileDescription = getFlattenedRegionalValue(((_file$meta2 = file.meta) === null || _file$meta2 === void 0 ? void 0 : _file$meta2.description) || {});
+      var originalFileData = _objectSpread(_objectSpread({}, file.meta), {}, {
+        name: file.name,
+        tags: flattenedFileTags,
+        title: flattenedFileTitle,
+        description: flattenedFileDescription
+      });
+      var getRootFieldValue = function getRootFieldValue(updatedValue, currentValue) {
+        return typeof updatedValue === 'string' ? updatedValue : getFlattenedRegionalValue(_objectSpread(_objectSpread({}, currentValue), updatedValue));
+      };
+      hasUnsavedChangesRef.current = !deepEqual(_objectSpread(_objectSpread({
+        name: file.name
+      }, updatedDetails), {}, {
+        tags: typeof updatedDetails.tags !== 'undefined' ? getRootFieldValue(updatedDetails.tags, file.tags) : flattenedFileTags,
+        title: typeof updatedDetails.title !== 'undefined' ? getRootFieldValue(updatedDetails.title, (_file$meta3 = file.meta) === null || _file$meta3 === void 0 ? void 0 : _file$meta3.title) : flattenedFileTitle,
+        description: typeof updatedDetails.description !== 'undefined' ? getRootFieldValue(updatedDetails.description, (_file$meta4 = file.meta) === null || _file$meta4 === void 0 ? void 0 : _file$meta4.description) : flattenedFileDescription
+      }), originalFileData);
+      setIsSaveDisabled(!hasUnsavedChangesRef.current);
+    }, 0);
+  };
+  var saveEditedDetails = function saveEditedDetails() {
+    if (isSaving || isSaveDisabled || isUserNotAllowedToEdit) {
+      return;
+    }
+    var name = editedDetails.name,
+      tags = editedDetails.tags,
+      meta = _objectWithoutProperties(editedDetails, _excluded);
+    var _validateItemMetadata4 = validateItemMetadata({
+        metadata: metadata,
+        itemMeta: _objectSpread(_objectSpread({}, fileMeta), meta),
+        i18n: i18n,
+        fileName: name
+      }),
+      isMetaValid = _validateItemMetadata4.isValid,
+      metadataErrors = _validateItemMetadata4.errors;
+    dispatch(itemMetadataErrorsUpdated(metadataErrors));
+    setMetaErrors(metadataErrors || {});
+    if (!isMetaValid) {
+      var firstErrorFieldKey = Object.keys(metadataErrors)[0];
+      scrollToMetaField(firstErrorFieldKey);
+      return;
+    }
+    if (isPreUpload) {
+      savePreUploadFile(meta, name);
+      return;
+    }
+    if (Object.keys(editedDetails).length === 0) {
+      enableFileWindowEdit({
+        shouldEnable: false
+      });
+      setIsEditing(false);
+      return;
+    }
+
+    // TODO: replace the 4 requests with 1 request once backend supports this.
+    var requestsActions = [];
+    if (tags) {
+      var _tags$activeRegionalL;
+      var existingTags = [];
+      var newTags = [];
+      (_tags$activeRegionalL = tags[activeRegionalLanguage]) === null || _tags$activeRegionalL === void 0 ? void 0 : _tags$activeRegionalL.forEach(function (tag) {
+        if (_typeof(tag) === 'object' && tag.sid && tag.label) {
+          existingTags.push(tag.sid);
+        } else {
+          newTags.push(tag);
+        }
+      });
+      requestsActions.push(updateFileTags({
+        uuid: file.uuid,
+        languageKey: activeRegionalLanguage,
+        existingTags: existingTags,
+        newTags: newTags,
+        skipPendingDispatch: true
+      }));
+    }
+    if (metadataModel && meta && Object.keys(meta).length > 0) {
+      var nextMeta = mapMetaAttachmentsObjsToUuids({
+        meta: meta,
+        customMetadataGroups: customMetadataGroups
+      });
+      requestsActions.push(updateFileMeta({
+        uuid: file.uuid,
+        meta: nextMeta,
+        skipPendingDispatch: true
+      }));
+    }
+    var isWaitingNewNameConfirmation = false;
+    if (name && name !== file.name) {
+      setIgnoreChangedNameExtension(false);
+      var addRenamingActionToRequests = function addRenamingActionToRequests() {
+        return requestsActions.push(renameFile({
+          uuid: file.uuid,
+          name: name,
+          skipPendingDispatch: true
+        }));
+      };
+      var renameValidation = handleItemRenamingValidation(file.name, name || file.name, {
+        ignoreChangedNameExtension: ignoreChangedNameExtension,
+        onChangeExtension: function onChangeExtension(handleCancellation) {
+          addRenamingActionToRequests();
+          submitSaving(requestsActions);
+          handleCancellation();
+        },
+        onKeepOldExtension: function onKeepOldExtension(newNameWithOldExt, handleCancellation) {
+          requestsActions.push(renameFile({
+            uuid: file.uuid,
+            name: newNameWithOldExt,
+            skipPendingDispatch: true
+          }));
+          submitSaving(requestsActions);
+          handleCancellation();
+        }
+      });
+      if (!renameValidation.valid) {
+        isWaitingNewNameConfirmation = true;
+        return;
+      }
+      addRenamingActionToRequests();
+    }
+
+    // If the confirmation modal shown for the new name of the file with diff. extension then don't trigger the saving request
+    // and wait for the user to confirm then the callback handler of the name would trigger the saving request,
+    // otherwise either cancel ( if user cancelled) or trigger it if the new has no extension changes/ requests blocking.
+    if (!isWaitingNewNameConfirmation) {
+      submitSaving(requestsActions);
+    }
+  };
+  var submitSaving = function submitSaving(requestsActions) {
+    if (!requestsActions || requestsActions.length === 0 || isSaving) {
+      return;
+    }
+    setIsSaving(true);
+    return handlePromise(Promise.all(requestsActions.map(function (action) {
+      return dispatch(action);
+    })), function () {
+      hasUnsavedChangesRef.current = false;
+      setEditedDetails(fileMeta);
+      setIsEditing(false);
+      enableFileWindowEdit({
+        shouldEnable: false,
+        tabId: tabId
+      });
+    }, info, function () {
+      setIsSaving(false);
+    });
+  };
+  var savePreUploadFile = function savePreUploadFile() {
+    var changedMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var changedName = arguments.length > 1 ? arguments[1] : undefined;
+    var newMeta = _objectSpread(_objectSpread({}, fileMeta), changedMeta);
+    var newName = changedName || file.name || file.info.name;
+    var triggerFileUpdate = function triggerFileUpdate() {
+      return dispatch(updateUploadInfoMetaTags({
+        filesIds: [file.id],
+        meta: newMeta,
+        info: {
+          name: newName
+        }
+      }));
+    };
+    if (newName) {
+      setIgnoreChangedNameExtension(false);
+      var renameValidation = handleItemRenamingValidation(file.name, newName || file.name, {
+        ignoreChangedNameExtension: ignoreChangedNameExtension,
+        onChangeExtension: function onChangeExtension(handleCancellation) {
+          setEditedDetails(fileMeta);
+          triggerFileUpdate();
+          setIgnoreChangedNameExtension(true);
+          handleCancellation();
+        },
+        onKeepOldExtension: function onKeepOldExtension(newNameWithOldExt, handleCancellation) {
+          setEditedDetails(fileMeta);
+          dispatch(updateUploadInfoMetaTags({
+            filesIds: [file.id],
+            meta: newMeta,
+            info: {
+              name: newNameWithOldExt
+            }
+          }));
+          handleCancellation();
+          cancelEditing(useFileWindow, true);
+        }
+      });
+      if (!renameValidation.valid) return;
+    }
+    cancelEditing(useFileWindow, true);
+    triggerFileUpdate();
+  };
+  var scrollToMetaField = function scrollToMetaField(metaFieldKey) {
+    if (isUserNotAllowedToEdit) {
+      return;
+    }
+    if (!metaFieldToScrollRef.current) {
+      metaFieldToScrollRef.current = metaFieldKey;
+    }
+    if (!isCustomMetadataOpened || !isEditing) {
+      setIsCustomMetadataOpened(true);
+      enableEditing({
+        tabId: FILE_WINDOW_TAB_IDS.METADATA
+      });
+      return;
+    }
+    var metaFieldElem = document.querySelector("#meta-field-".concat(metaFieldKey));
+    if (metaFieldElem) {
+      var _metaFieldElem$queryS;
+      /**
+       * block: 'center' replaced with block: 'nearest' as 'center' causes the whole panel's block to be scrolled outside of the view (hidden)
+       * in-case of small screen which is not good as it blocks further operations.
+       * And it's a common issue for people on StackOverFlow so nearest fixed the issue, seems like some strange behavior of scrollIntoView.
+       * https://stackoverflow.com/q/11039885
+      */
+      metaFieldElem.scrollIntoView({
+        block: 'nearest',
+        inline: 'center',
+        behavior: 'smooth'
+      });
+      (_metaFieldElem$queryS = metaFieldElem.querySelector('input')) === null || _metaFieldElem$queryS === void 0 ? void 0 : _metaFieldElem$queryS.focus();
+    }
+    metaFieldToScrollRef.current = null;
+  };
+  return {
+    enableEditing: enableEditing,
+    editedDetails: editedDetails,
+    isEditing: isEditing,
+    cancelEditing: cancelEditing,
+    setDetails: setDetails,
+    saveEditedDetails: saveEditedDetails,
+    isCustomMetadataOpened: isCustomMetadataOpened,
+    setIsCustomMetadataOpened: setIsCustomMetadataOpened,
+    metaErrors: metaErrors,
+    setMetaErrors: setMetaErrors,
+    isUserNotAllowedToEdit: isUserNotAllowedToEdit,
+    isSaving: isSaving,
+    scrollToMetaField: scrollToMetaField,
+    isSaveDisabled: isSaveDisabled
+  };
+};
+export default useEditFileDetails;

package/lib/hooks/useExplorer.js

@@ -0,0 +1,6 @@
+import { usePlugin } from '@scaleflex/widget-core/lib/hooks';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+var useExplorer = function useExplorer() {
+  return usePlugin(PLUGINS_IDS.EXPLORER);
+};
+export default useExplorer;

package/lib/hooks/useExplorerI18n.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import useExplorer from './useExplorer';
+export var useExplorerI18n = function useExplorerI18n() {
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  return useMemo(function () {
+    return i18n;
+  }, [i18n]);
+};
+export default useExplorerI18n;

package/lib/hooks/useExplorerInformer.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import useExplorer from './useExplorer';
+var useExplorerInformer = function useExplorerInformer() {
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info;
+  return useMemo(function () {
+    return info;
+  }, [info]);
+};
+export default useExplorerInformer;

package/lib/hooks/useFetchFileFolderPermissions.js

@@ -0,0 +1,31 @@
+import { useCallback, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { fetchFileFolderPermissions } from '../thunks/permissions.thunks';
+var useFetchFileFolderPermissions = function useFetchFileFolderPermissions() {
+  var dispatch = useDispatch();
+  var permissionsFetchTimer = useRef(null);
+  var fetchPermissions = useCallback(function (_ref) {
+    var foldersUuids = _ref.foldersUuids,
+      filesUuids = _ref.filesUuids,
+      _ref$timer = _ref.timer,
+      timer = _ref$timer === void 0 ? 50 : _ref$timer;
+    permissionsFetchTimer.current = setTimeout(function () {
+      dispatch(fetchFileFolderPermissions({
+        foldersUuids: foldersUuids,
+        filesUuids: filesUuids
+      }));
+      permissionsFetchTimer.current = null;
+    }, timer);
+  }, []);
+  var clearFetchPermissionsTimer = useCallback(function () {
+    if (permissionsFetchTimer.current) {
+      clearTimeout(permissionsFetchTimer.current);
+      permissionsFetchTimer.current = null;
+    }
+  }, []);
+  return {
+    fetchPermissions: fetchPermissions,
+    clearFetchPermissionsTimer: clearFetchPermissionsTimer
+  };
+};
+export default useFetchFileFolderPermissions;

package/lib/hooks/useFetchMetadataTagsBySearchQuery.js

@@ -0,0 +1,38 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { fetchMetadataTagsBySearchQuery } from '../slices/metadata.slice';
+var useFetchMetadataTagsBySearchQuery = function useFetchMetadataTagsBySearchQuery() {
+  var dispatch = useDispatch();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFetchingTags = _useState2[0],
+    setIsFetchingTags = _useState2[1];
+  var fetchSearchQueryTags = function fetchSearchQueryTags(_ref) {
+    var debouncedSearchValue = _ref.debouncedSearchValue,
+      cb = _ref.cb,
+      metadataFieldCKey = _ref.metadataFieldCKey;
+    setIsFetchingTags(true);
+    return dispatch(fetchMetadataTagsBySearchQuery({
+      searchQuery: debouncedSearchValue,
+      metadataFieldCKey: metadataFieldCKey
+    })).then(function () {
+      var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      cb === null || cb === void 0 ? void 0 : cb(tags);
+      return tags;
+    })["finally"](function () {
+      setIsFetchingTags(false);
+    });
+  };
+  return {
+    fetchSearchQueryTags: fetchSearchQueryTags,
+    isFetchingTags: isFetchingTags,
+    setIsFetchingTags: setIsFetchingTags
+  };
+};
+export default useFetchMetadataTagsBySearchQuery;