@scaleflex/widget-explorer 4.0.6 → 4.1.0

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/Variations.constants.js

@@ -8,12 +8,16 @@ var VARIATIONS_TAB_IDS = {
 };
 var VARIATIONS_TAB = _defineProperty(_defineProperty({}, VARIATIONS_TAB_IDS.MANUAL, {
   id: VARIATIONS_TAB_IDS.MANUAL,
-  i18nKey: 'explorerFileWindowVariationsManualTabLabel'
+  i18nKey: 'explorerFileWindowVariationsManualTabLabel',
+  hide: function hide(_ref) {
+    var variationsHideManualSubTab = _ref.variationsHideManualSubTab;
+    return variationsHideManualSubTab;
+  }
 }), VARIATIONS_TAB_IDS.AUTOMATIC, {
   id: VARIATIONS_TAB_IDS.AUTOMATIC,
   i18nKey: 'explorerFileWindowVariationsAutomaticTabLabel',
-  disabled: function disabled(_ref) {
-    var presetsVariants = _ref.presetsVariants;
+  disabled: function disabled(_ref2) {
+    var presetsVariants = _ref2.presetsVariants;
     return (presetsVariants === null || presetsVariants === void 0 ? void 0 : presetsVariants.length) === 0;
   }
 });

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/Variations.styled.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 import styled, { css } from 'styled-components';
 import { StatusLabel, Search, Skeleton, Tabs as SfxTabs, Tab as SfxTab } from '@scaleflex/ui/core';
@@ -142,6 +142,7 @@ var Tab = styled(SfxTab)(_templateObject29 || (_templateObject29 = _taggedTempla
   return theme.typography.font[FV.LabelLarge];
 });
 var EditModalContent = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+var PresetInputsWrapper = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  width: 100%;\n"])));
 var Styled = {
   Actions: Actions,
   Title: Title,
@@ -170,6 +171,7 @@ var Styled = {
   SkeletonItemWrapper: SkeletonItemWrapper,
   Tabs: Tabs,
   Tab: Tab,
-  EditModalContent: EditModalContent
+  EditModalContent: EditModalContent,
+  PresetInputsWrapper: PresetInputsWrapper
 };
 export default Styled;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/Variations.thunks.js

@@ -1,5 +1,18 @@
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 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); }
 import createThunk from '@scaleflex/widget-utils/lib/createThunk';
 import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { presetsUpdated, selectPresets } from '../../../../slices/metadata.slice';
 export var getVariants = createThunk(async function (fileUuid, thunkApi) {
   var _await$thunkApi$extra = await thunkApi.extra.apiClient.get("file/".concat(fileUuid, "/variants"), {
       id: 'fileVariants',
@@ -51,4 +64,36 @@ export var deleteVariant = createThunk(async function (_ref3, thunkApi) {
     abortSignal: thunkApi.signal
   });
   return response;
+});
+export var addNewPreset = createThunk(async function () {
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    newPreset = _ref4.newPreset;
+  var thunkApi = arguments.length > 1 ? arguments[1] : undefined;
+  var _ref5 = thunkApi.extra.filerobot || {},
+    projectUuid = _ref5.opts.projectUuid;
+  var currentPresets = selectPresets(thunkApi.getState()).map(function (preset) {
+    return _objectSpread(_objectSpread({}, preset), {}, {
+      desc: preset.desc || '',
+      params: preset.params || {},
+      sampleImgSrc: preset.sampleImgSrc || ''
+    });
+  }) || [];
+  var newPresetsData = [].concat(_toConsumableArray(currentPresets), [newPreset]);
+  var _await$thunkApi$extra7 = await thunkApi.extra.apiClient.putAdmin("project/".concat(projectUuid, "/data-diff"), {
+      data: {
+        'cloudimg/presets': newPresetsData
+      },
+      id: 'filePresets',
+      abortSignal: thunkApi.signal
+    }),
+    data = _await$thunkApi$extra7.data_input;
+  var newPresets = data === null || data === void 0 ? void 0 : data['cloudimg/presets'];
+  if (newPresets) {
+    thunkApi.dispatch(presetsUpdated({
+      presets: newPresets
+    }));
+  } else {
+    return thunkApi.rejectWithValue('Failed to add new preset');
+  }
+  return newPresets;
 });

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsContent.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var VariationsContent = function VariationsContent(_ref) {
   var originalFile = _ref.originalFile,
     addNewVariant = _ref.addNewVariant,
+    addNewPreset = _ref.addNewPreset,
     isLoading = _ref.isLoading,
     variants = _ref.variants,
     searchQuery = _ref.searchQuery,
@@ -21,7 +22,8 @@ var VariationsContent = function VariationsContent(_ref) {
     editVariantName = _ref.editVariantName,
     setSelectedVariant = _ref.setSelectedVariant,
     i18n = _ref.i18n,
-    activeTabId = _ref.activeTabId;
+    activeTabId = _ref.activeTabId,
+    showAddPresetButton = _ref.showAddPresetButton;
   var dispatch = useDispatch();
   var hasUserVariantEditPermission = useSelector(function (state) {
     return selectIsUserPermittedTo(state, PERMISSIONS.FILE_IMAGE_EDITOR);
@@ -29,6 +31,7 @@ var VariationsContent = function VariationsContent(_ref) {
   var isUserAuth = useSelector(selectIsUserAuth);
   var isUserPermittedToEditVariant = isUserAuth && hasUserVariantEditPermission;
   var showAddVariantButton = isUserPermittedToEditVariant && activeTabId === VARIATIONS_TAB_IDS.MANUAL;
+  var isShowAddPresetButton = showAddPresetButton && isUserPermittedToEditVariant && activeTabId === VARIATIONS_TAB_IDS.AUTOMATIC;
   var onSelectVariant = function onSelectVariant(variant) {
     setSelectedVariant(variant);
     dispatch(filesVariationsUpdated(variant));
@@ -56,6 +59,17 @@ var VariationsContent = function VariationsContent(_ref) {
           size: 14
         }), i18n('explorerFileWindowAddVariationButton')]
       })]
+    }), isShowAddPresetButton && /*#__PURE__*/_jsxs(StyledVariants.AddVariantBtn, {
+      onClick: addNewPreset,
+      "data-testid": "add-preset-button",
+      children: [/*#__PURE__*/_jsx(VariantPlaceholder, {
+        size: 115,
+        height: 58
+      }), /*#__PURE__*/_jsxs(StyledVariants.AddVariantBtnLabel, {
+        children: [/*#__PURE__*/_jsx(PlusOutline, {
+          size: 14
+        }), i18n('explorerFileWindowAddPresetButton')]
+      })]
     }), variants.map(function (variant) {
       return /*#__PURE__*/_jsx(VariationItem, {
         variant: variant,

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsTabs.js

@@ -1,5 +1,6 @@
 import StyledVariants from './Variations.styled';
 import { VARIATIONS_TABS } from './Variations.constants';
+import { useExplorer } from '../../../../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 var VariationsTabs = function VariationsTabs(_ref) {
   var i18n = _ref.i18n,
@@ -9,6 +10,10 @@ var VariationsTabs = function VariationsTabs(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     presetsVariants = _ref.presetsVariants;
+  var _useExplorer = useExplorer(),
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    variationsHideManualSubTab = _useExplorer$opts2.variationsHideManualSubTab;
   return /*#__PURE__*/_jsx(StyledVariants.Tabs, {
     onChange: handleChangeTab,
     value: activeTabId,
@@ -16,8 +21,11 @@ var VariationsTabs = function VariationsTabs(_ref) {
     children: VARIATIONS_TABS.map(function (_ref2) {
       var i18nKey = _ref2.i18nKey,
         id = _ref2.id,
-        disabled = _ref2.disabled;
-      return /*#__PURE__*/_jsx(StyledVariants.Tab, {
+        disabled = _ref2.disabled,
+        hide = _ref2.hide;
+      return !(hide !== null && hide !== void 0 && hide({
+        variationsHideManualSubTab: variationsHideManualSubTab
+      })) && /*#__PURE__*/_jsx(StyledVariants.Tab, {
         size: "lg",
         label: i18n(i18nKey),
         value: id,
@@ -26,7 +34,7 @@ var VariationsTabs = function VariationsTabs(_ref) {
           presetsVariants: presetsVariants
         }))
       }, id);
-    })
+    }).filter(Boolean)
   });
 };
 export default VariationsTabs;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsTopOptions.js

@@ -63,10 +63,10 @@ var VariationsTopOptions = function VariationsTopOptions(_ref) {
     }
     var variantName = variant.name;
     var variantUrl = getFileLink(variant, 'cdn');
-    /*
-    * TODO: Check the following in-case BE supports it,
-    * Disabled download as zip due to this task: https://scaleflexhq.atlassian.net/browse/FRA-7213
-    * To re-enabled Remove dismissUsageRights: true.
+    /*
+    * TODO: Check the following in-case BE supports it,
+    * Disabled download as zip due to this task: https://scaleflexhq.atlassian.net/browse/FRA-7213
+    * To re-enabled Remove dismissUsageRights: true.
     */
 
     var downloadParams = _objectSpread({

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/index.js

@@ -1,4 +1,5 @@
-var _excluded = ["variantUrl", "name"];
+var _excluded = ["variantUrl", "name", "desc"],
+  _excluded2 = ["variantUrl", "name"];
 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 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; }
@@ -17,11 +18,11 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, InputGroup } from '@scaleflex/ui/core';
 import { PC } from '@scaleflex/widget-common';
-import { Download, Lock, Rename } from '@scaleflex/icons';
+import { Download, Lock, Preset, Rename } from '@scaleflex/icons';
 import { useTheme } from '@scaleflex/ui/theme/hooks';
 import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
 import getFileNameAndExtension from '@scaleflex/widget-utils/lib/getFileNameAndExtension';
@@ -34,7 +35,7 @@ import { useExplorer } from '../../../../hooks';
 import StyledVariants from './Variations.styled';
 import VariationsSearch from './VariationsSearch';
 import { createRemovedBackgroundVariantObject } from './Variations.utils';
-import { addNewVariant, deleteVariant, editVariant, getVariants } from './Variations.thunks';
+import { addNewVariant, deleteVariant, editVariant, getVariants, addNewPreset } from './Variations.thunks';
 import { fetchFileByUuid, filesVariationsUpdated, fileUpdated, selectFilesVariations } from '../../../../slices/files.slice';
 import { useTransformedDownloadModal } from '../../../Modals/TransformedDownload';
 import VariationsContent from './VariationsContent';
@@ -50,6 +51,10 @@ var _isUnMounting = false;
 var extractVariantQuery = function extractVariantQuery(variantUrl) {
   return variantUrl.substr(variantUrl.indexOf('?') + 1);
 };
+var URL_BUILDER_OPENED_AS_MODE = {
+  PRESET: 'preset',
+  VARIANT: 'variant'
+};
 var VariationsTab = function VariationsTab(_ref) {
   var originalFile = _ref.originalFile,
     previewedFile = _ref.previewedFile,
@@ -62,7 +67,10 @@ var VariationsTab = function VariationsTab(_ref) {
   var _useExplorer = useExplorer(),
     i18n = _useExplorer.i18n,
     info = _useExplorer.info,
-    hideDownloadVariationsOption = _useExplorer.opts.hideDownloadVariationsOption;
+    _useExplorer$opts = _useExplorer.opts,
+    hideDownloadVariationsOption = _useExplorer$opts.hideDownloadVariationsOption,
+    variationsShowAddPresetButton = _useExplorer$opts.variationsShowAddPresetButton,
+    variationsHideManualSubTab = _useExplorer$opts.variationsHideManualSubTab;
   var triggerTransformedDownloadModal = useTransformedDownloadModal();
   var displayedFileVariant = useSelector(selectFilesVariations);
   var presets = useSelector(selectPresets);
@@ -90,6 +98,7 @@ var VariationsTab = function VariationsTab(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     selectedVariant = _useState12[0],
     setSelectedVariant = _useState12[1];
+  var urlBuilderSaveModeRef = useRef(URL_BUILDER_OPENED_AS_MODE.VARIANT);
   var url = getFileLink(originalFile, 'cdn');
   var isAutomaticTabActive = activeVariationsTabId === VARIATIONS_TAB_IDS.AUTOMATIC;
   var customVariants = useMemo(function () {
@@ -125,7 +134,7 @@ var VariationsTab = function VariationsTab(_ref) {
       return variant.name.toLowerCase().includes(loweredCaseValue);
     });
   }, [searchQuery, originalVariants, nextVariants]);
-  var triggerVariantRequest = function triggerVariantRequest(requestPromise, successFn) {
+  var triggerSaveRequest = function triggerSaveRequest(requestPromise, successFn) {
     setIsLoading(true);
     return handlePromise(requestPromise, function () {
       if (_isUnMounting) {
@@ -139,15 +148,53 @@ var VariationsTab = function VariationsTab(_ref) {
       setIsLoading(false);
     });
   };
-  var handleSavingNewVariant = function handleSavingNewVariant(_ref2) {
+  var handleSavingNewPreset = function handleSavingNewPreset(_ref2) {
     var variantUrl = _ref2.variantUrl,
       name = _ref2.name,
+      desc = _ref2.desc,
       moreProps = _objectWithoutProperties(_ref2, _excluded);
     var _ref3 = moreProps || {},
       onClose = _ref3.onClose;
     if (isFunction(onClose)) {
       onClose();
     }
+    info(i18n('explorerFileWindowVariationSavedInfo', 3000));
+    var newPreset = {
+      name: name,
+      desc: desc,
+      params: extractVariantQuery(variantUrl).split('&').reduce(function (acc, curr) {
+        var _curr$split = curr.split('='),
+          _curr$split2 = _slicedToArray(_curr$split, 2),
+          key = _curr$split2[0],
+          value = _curr$split2[1];
+        acc[key] = value;
+        return acc;
+      }, {}),
+      sampleImgSrc: url
+    };
+    triggerSaveRequest(dispatch(addNewPreset({
+      preset: newPreset
+    })), function (_) {
+      info(i18n('explorerFileWindowPresetAddedInfo'), 'success');
+      setShowUrlBuilderModal(false);
+    }, setIsLoading);
+  };
+  var handleUrlBuilderNewSave = function handleUrlBuilderNewSave() {
+    if (urlBuilderSaveModeRef.current === URL_BUILDER_OPENED_AS_MODE.PRESET) {
+      triggerAddPresetModal.apply(void 0, arguments);
+      return;
+    }
+    triggerAddVariantModal.apply(void 0, arguments);
+  };
+  var handleSavingNewVariant = function handleSavingNewVariant(_ref4) {
+    var variantUrl = _ref4.variantUrl,
+      name = _ref4.name,
+      moreProps = _objectWithoutProperties(_ref4, _excluded2);
+    var _ref5 = moreProps || {},
+      onClose = _ref5.onClose;
+    if (isFunction(onClose)) {
+      onClose();
+    }
     var _getFileNameAndExtens = getFileNameAndExtension(originalFile.name, originalFile.type),
       extension = _getFileNameAndExtens.extension;
     info(i18n('explorerFileWindowVariationSavedInfo', 3000));
@@ -157,7 +204,7 @@ var VariationsTab = function VariationsTab(_ref) {
       query: extractVariantQuery(variantUrl),
       extension: extension
     };
-    triggerVariantRequest(dispatch(addNewVariant({
+    triggerSaveRequest(dispatch(addNewVariant({
       fileUuid: originalFile.uuid,
       data: newVariantData
     })), function (newVariant) {
@@ -167,11 +214,119 @@ var VariationsTab = function VariationsTab(_ref) {
       setOriginalVariants([].concat(_toConsumableArray(originalVariants), [newVariant]));
     }, setIsLoading);
   };
+  var triggerAddPresetModal = function triggerAddPresetModal(variantUrl, moreProps) {
+    var tmpData = {
+      name: '',
+      desc: '',
+      error: ''
+    };
+    var updateName = function updateName(e, setPrimaryButtonDisabled, updateData) {
+      var newName = e.target.value;
+      var isExistingName = presets.find(function (preset) {
+        var _preset$name;
+        return ((_preset$name = preset.name) === null || _preset$name === void 0 ? void 0 : _preset$name.toLowerCase()) === (newName === null || newName === void 0 ? void 0 : newName.toLowerCase());
+      });
+      tmpData.name = newName;
+      if (!newName) {
+        tmpData.error = i18n('mutualizedFieldRequired');
+      } else if (isExistingName) {
+        tmpData.error = i18n('explorerFileWindowVariationsNameExistsError');
+      } else if (/[{}|\\^~@`,\s]/.test(newName)) {
+        tmpData.error = i18n('explorerFileWindowAddPresetNameRegexError');
+      } else {
+        tmpData.error = '';
+      }
+      setPrimaryButtonDisabled(Boolean(tmpData.error) || !newName || isExistingName);
+      updateData(_objectSpread({}, tmpData));
+    };
+    var updateDescription = function updateDescription(e, updateData) {
+      var newDesc = e.target.value;
+      tmpData.desc = newDesc;
+      updateData(_objectSpread({}, tmpData));
+    };
+    var presetNameInputId = 'filerobotPresetNameModalInput';
+    toggleModal({
+      icon: /*#__PURE__*/_jsx(Preset, {
+        size: 29,
+        color: theme.palette[PC.AccentPrimary]
+      }),
+      showTitleLabel: true,
+      title: i18n('explorerFileWindowAddPresetTitle'),
+      content: function content(_ref6) {
+        var updateData = _ref6.updateData,
+          data = _ref6.data,
+          setPrimaryButtonDisabled = _ref6.setPrimaryButtonDisabled;
+        return /*#__PURE__*/_jsxs(StyledVariants.PresetInputsWrapper, {
+          children: [/*#__PURE__*/_jsx(InputGroup, {
+            onChange: function onChange(e) {
+              return updateName(e, setPrimaryButtonDisabled, updateData);
+            },
+            error: Boolean(data.error),
+            hint: data.error,
+            label: "".concat(i18n('mutualizedNameFieldLabel'), " *"),
+            placeholder: i18n('explorerFileWindowAddPresetNamePlaceholder'),
+            value: tmpData.name || data.name || '',
+            InputProps: {
+              fullWidth: true
+            },
+            fullWidth: true,
+            focusOnMount: true
+          }), /*#__PURE__*/_jsx(InputGroup, {
+            type: "textarea",
+            onChange: function onChange(e) {
+              return updateDescription(e, updateData);
+            },
+            label: i18n('explorerFileWindowAddPresetDescLabel'),
+            placeholder: i18n('explorerFileWindowAddPresetDescPlaceholder'),
+            value: tmpData.desc || data.desc || '',
+            fullWidth: true
+          })]
+        });
+      },
+      onButtonPrimaryClick: function onButtonPrimaryClick() {
+        return handleSavingNewPreset(_objectSpread(_objectSpread({
+          variantUrl: variantUrl
+        }, tmpData), moreProps));
+      },
+      inputToFocus: presetNameInputId,
+      enterKeySubmits: true,
+      disablePrimaryButton: true,
+      modalStyle: {
+        width: 450,
+        maxWidth: 'none'
+      },
+      rootModalStyles: {
+        zIndex: 1500
+      },
+      modalBodyStyle: {
+        textAlign: 'center',
+        padding: '12px 32px'
+      },
+      modalFooterStyle: {
+        flexDirection: 'row',
+        padding: '12px 32px 32px 32px'
+      },
+      primaryTitleStyle: {
+        textAlign: 'center'
+      },
+      modalSecondaryButtonColor: 'basic',
+      contentStyle: {
+        textAlign: 'center'
+      },
+      modalPrimaryButton: {
+        width: 187
+      },
+      modalSecondaryButton: {
+        width: 187
+      },
+      inlineActionButtons: true
+    });
+  };
   var triggerAddVariantModal = function triggerAddVariantModal(variantUrl) {
     var moreProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var _ref4 = moreProps || {},
-      ratioGroupKey = _ref4.ratioGroupKey,
-      ratioTitleKey = _ref4.ratioTitleKey;
+    var _ref7 = moreProps || {},
+      ratioGroupKey = _ref7.ratioGroupKey,
+      ratioTitleKey = _ref7.ratioTitleKey;
     var name = '';
     if (ratioGroupKey && ratioTitleKey) {
       name = "".concat(i18n(ratioGroupKey) || ratioGroupKey, " - ").concat(i18n(ratioTitleKey) || ratioTitleKey);
@@ -206,10 +361,10 @@ var VariationsTab = function VariationsTab(_ref) {
       }),
       showTitleLabel: true,
       title: i18n('explorerFileWindowAddVariationTitle'),
-      content: function content(_ref5) {
-        var updateData = _ref5.updateData,
-          data = _ref5.data,
-          setPrimaryButtonDisabled = _ref5.setPrimaryButtonDisabled;
+      content: function content(_ref8) {
+        var updateData = _ref8.updateData,
+          data = _ref8.data,
+          setPrimaryButtonDisabled = _ref8.setPrimaryButtonDisabled;
         return /*#__PURE__*/_jsx(InputGroup, {
           onChange: function onChange(e) {
             return updateName(e, setPrimaryButtonDisabled, updateData);
@@ -265,14 +420,20 @@ var VariationsTab = function VariationsTab(_ref) {
     if (originalFile.uuid !== previewedFile.uuid) {
       return;
     }
+    urlBuilderSaveModeRef.current = URL_BUILDER_OPENED_AS_MODE.VARIANT;
+    setQueryString('');
+    setShowUrlBuilderModal(true);
+  };
+  var triggerAddNewPresetModal = function triggerAddNewPresetModal() {
+    urlBuilderSaveModeRef.current = URL_BUILDER_OPENED_AS_MODE.PRESET;
     setQueryString('');
     setShowUrlBuilderModal(true);
   };
   var downloadAllVariants = function downloadAllVariants() {
     var variantsWithExtensions = searchedVariants.map(function (variant) {
-      var _ref6, _variant$info, _variant$info2;
+      var _ref9, _variant$info, _variant$info2;
       return _objectSpread(_objectSpread({}, variant), {}, {
-        extension: variant.bgRemoved ? 'png' : getFileNameAndExtension(variant.name).extension || ((_ref6 = ((_variant$info = variant.info) === null || _variant$info === void 0 ? void 0 : _variant$info.ext) || ((_variant$info2 = variant.info) === null || _variant$info2 === void 0 ? void 0 : _variant$info2.img_type)) === null || _ref6 === void 0 ? void 0 : _ref6.toLowerCase())
+        extension: variant.bgRemoved ? 'png' : getFileNameAndExtension(variant.name).extension || ((_ref9 = ((_variant$info = variant.info) === null || _variant$info === void 0 ? void 0 : _variant$info.ext) || ((_variant$info2 = variant.info) === null || _variant$info2 === void 0 ? void 0 : _variant$info2.img_type)) === null || _ref9 === void 0 ? void 0 : _ref9.toLowerCase())
       });
     });
     triggerTransformedDownloadModal(variantsWithExtensions, {
@@ -282,7 +443,7 @@ var VariationsTab = function VariationsTab(_ref) {
   };
   var submitVariantEdit = function submitVariantEdit(data) {
     toggleModal(null);
-    triggerVariantRequest(dispatch(editVariant({
+    triggerSaveRequest(dispatch(editVariant({
       fileUuid: originalFile.uuid,
       data: data
     })), function (updatedVariant) {
@@ -306,7 +467,7 @@ var VariationsTab = function VariationsTab(_ref) {
       info(i18n('variantDeleteOriginalError'));
       return;
     }
-    triggerVariantRequest(dispatch(deleteVariant({
+    triggerSaveRequest(dispatch(deleteVariant({
       fileUuid: originalFile.uuid,
       variantUuid: variantUuid
     })), function (_) {
@@ -320,8 +481,8 @@ var VariationsTab = function VariationsTab(_ref) {
   useEffect(function () {
     _isUnMounting = false;
     var mainFile = previewedFile || displayedFileVariant || originalFile;
-    if (previewedFile.uuid) {
-      triggerVariantRequest(dispatch(getVariants(previewedFile.uuid)), function (loadedVariants) {
+    if (previewedFile.uuid && !variationsHideManualSubTab) {
+      triggerSaveRequest(dispatch(getVariants(previewedFile.uuid)), function (loadedVariants) {
         var mainVariants = [mainFile];
         if (mainFile.info.remove_background) {
           mainVariants.push(createRemovedBackgroundVariantObject(mainFile));
@@ -329,9 +490,11 @@ var VariationsTab = function VariationsTab(_ref) {
         setOriginalVariants([].concat(mainVariants, _toConsumableArray(loadedVariants)));
         dispatch(filesVariationsUpdated(mainVariants[0]));
       }, setIsLoading);
+    } else {
+      setIsLoading(false);
     }
     if (mainFile.removedBackground && !mainFile.info.remove_background) {
-      triggerVariantRequest(dispatch(fetchFileByUuid(originalFile.uuid)), function (updatedFile) {
+      triggerSaveRequest(dispatch(fetchFileByUuid(originalFile.uuid)), function (updatedFile) {
         var originalVariantsWithRemovedBg = [mainFile];
         if (updatedFile.info.remove_background) {
           originalVariantsWithRemovedBg.push(createRemovedBackgroundVariantObject(updatedFile));
@@ -345,7 +508,9 @@ var VariationsTab = function VariationsTab(_ref) {
       }, setIsLoading);
     }
     return function () {
-      dispatch(filesVariationsUpdated({}));
+      if (!variationsHideManualSubTab) {
+        dispatch(filesVariationsUpdated({}));
+      }
       _isUnMounting = true;
     };
   }, [previewedFile.uuid]);
@@ -353,12 +518,12 @@ var VariationsTab = function VariationsTab(_ref) {
     setSearchQuery('');
   }, [originalVariants]);
   useEffect(function () {
-    var nextActiveTabId = presetsVariants.length === 0 || activeVariationsTabId === VARIATIONS_TAB_IDS.MANUAL ? VARIATIONS_TAB_IDS.MANUAL : VARIATIONS_TAB_IDS.AUTOMATIC;
+    var nextActiveTabId = !variationsHideManualSubTab && (presetsVariants.length === 0 || activeVariationsTabId === VARIATIONS_TAB_IDS.MANUAL) ? VARIATIONS_TAB_IDS.MANUAL : VARIATIONS_TAB_IDS.AUTOMATIC;
     setActiveVariationsTabId(nextActiveTabId);
     return function () {
       setActiveVariationsTabId(null);
     };
-  }, [presetsVariants]);
+  }, [presetsVariants, variationsHideManualSubTab]);
   if (isLoading) {
     return /*#__PURE__*/_jsx(VariationsSkeleton, {
       i18n: i18n,
@@ -415,13 +580,15 @@ var VariationsTab = function VariationsTab(_ref) {
       originalVariantsCount: originalVariantsCount,
       isLoading: isLoading,
       i18n: i18n,
-      activeTabId: activeVariationsTabId
+      activeTabId: activeVariationsTabId,
+      addNewPreset: triggerAddNewPresetModal,
+      showAddPresetButton: variationsShowAddPresetButton
     }), /*#__PURE__*/_jsx(UrlBuilderModal, {
       queryString: queryString,
       showUrlBuilderModal: showUrlBuilderModal,
       setShowUrlBuilderModal: setShowUrlBuilderModal,
       originalFile: originalFile,
-      triggerAddVariantModal: triggerAddVariantModal,
+      onNewSave: handleUrlBuilderNewSave,
       headerTitle: i18n('explorerFileWindowAddVariationButton'),
       actionButtonLabel: i18n('mutualizedSaveButton'),
       urlTitle: i18n('explorerFileWindowVariationsUrlBuilderModalTitle'),

package/lib/components/FileWindowPanel/Header/BeforeUploadActionBtns.js

@@ -35,10 +35,10 @@ var BeforeUploadActionButtons = function BeforeUploadActionButtons(_ref) {
     if (filesLength === 1) dispatch(showAddFilesPanelUpdated(true));
   };
 
-  /**
-   * Navigates to the next item or closes the file window.
-   *
-   * @param {number} indexOffset - The offset from the current index. Defaults to 0.
+  /**
+   * Navigates to the next item or closes the file window.
+   *
+   * @param {number} indexOffset - The offset from the current index. Defaults to 0.
   */
   var navigateNextItemOrCloseFileWindow = function navigateNextItemOrCloseFileWindow() {
     var indexOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

package/lib/components/GalleryRoleSelect/GalleryRoleSelect.utils.js

@@ -49,9 +49,9 @@ export var generatePrettyName = function generatePrettyName(str) {
   return eachWordUpperCase ? convertStringToWordsArray(str).map(capitalizeFirstLetter).join(' ') : capitalizeFirstLetter(convertStringToWordsArray(str).join(' '));
 };
 
-/**
- * @param {string} roleName - Like "GALLERY_EDITOR"
- * @returns {{longName: string, shortName: string, i18nKeyLongName: string, i18nKeyShortName: string}}
+/**
+ * @param {string} roleName - Like "GALLERY_EDITOR"
+ * @returns {{longName: string, shortName: string, i18nKeyLongName: string, i18nKeyShortName: string}}
  */
 export var prettyGalleryRole = function prettyGalleryRole(roleName) {
   var galleryRole = roleName ? roleName.toLowerCase() : 'unknown';

package/lib/components/GalleryRoleSelect/index.js

@@ -26,17 +26,17 @@ import StandardRolesTab from './StandardRolesTab';
 import { GALLERY_ROLE_TABS, GALLERY_ROLE_TABS_IDS } from './GalleryRoleSelect.constants';
 import CustomRolesTab from './CustomRolesTab';
 
-/**
- * @param {object} props
- * @param {string} props.value - Role ID
- * @param {function} props.onChange
- * @param {boolean} [props.showPermissionsInfo=true]
- * @param {number} [props.selectorPaddingX=17]
- * @param {boolean} [props.disabled=false]
- * @param {boolean} [props.readOnly=false]
- * @param {boolean} [props.defaultValueFirstItem=false]
- * @param {number} [props.minPermissions] - Use to specify which roles could be selectable
- * @returns
+/**
+ * @param {object} props
+ * @param {string} props.value - Role ID
+ * @param {function} props.onChange
+ * @param {boolean} [props.showPermissionsInfo=true]
+ * @param {number} [props.selectorPaddingX=17]
+ * @param {boolean} [props.disabled=false]
+ * @param {boolean} [props.readOnly=false]
+ * @param {boolean} [props.defaultValueFirstItem=false]
+ * @param {number} [props.minPermissions] - Use to specify which roles could be selectable
+ * @returns
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var GalleryRoleSelect = function GalleryRoleSelect(_ref) {