@commercetools-frontend-extensions/export-resources-modal 5.14.6 → 5.15.1

package/dist/commercetools-frontend-extensions-export-resources-modal.cjs.dev.js

@@ -1603,7 +1603,10 @@ const updateFieldDependenciesStatus = formik => {
     _forEachInstanceProperty__default["default"](fields).call(fields, (field, index) => {
       const currentPath = `${path}.fields[${index}]`;
       if (hasDependentFields(field)) {
-        formik.setFieldValue(`${currentPath}.isChecked`, isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames), false);
+        const nextIsChecked = isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames);
+        if (field.isChecked !== nextIsChecked) {
+          formik.setFieldValue(`${currentPath}.isChecked`, nextIsChecked, false);
+        }
       }
       if (field.fields) {
         updateFields(field.fields, currentPath);
@@ -3085,7 +3088,8 @@ const ExportFieldsSelectionStep = () => {
     resourceType = _useExportResourcesMo.resourceType,
     fieldSelectionMode = _useExportResourcesMo.fieldSelectionMode,
     setFieldSelectionMode = _useExportResourcesMo.setFieldSelectionMode,
-    setLocaleOption = _useExportResourcesMo.setLocaleOption;
+    setLocaleOption = _useExportResourcesMo.setLocaleOption,
+    isLoading = _useExportResourcesMo.isLoading;
   const shouldDisableImportedCsvTemplateOption = _valuesInstanceProperty__default["default"](formik).outputFormat === OUTPUT_FORMATS.JSON;
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const handleFieldSelectionModeChange = event => {
@@ -3106,7 +3110,7 @@ const ExportFieldsSelectionStep = () => {
     })}: ${intl.formatMessage(messages.confirmSelection)}`,
     iconLeftPrimaryButton: jsxRuntime.jsx(uiKit.AngleRightIcon, {}),
     onPrimaryButtonClick: formik.submitForm,
-    isPrimaryButtonDisabled: !formik.isValid,
+    isPrimaryButtonDisabled: isLoading || !formik.isValid,
     labelSecondary: intl.formatMessage(messages.back),
     onSecondaryButtonClick: () => setCurrentStep(Step.FileSettings),
     onClose: onClose,
@@ -3114,7 +3118,14 @@ const ExportFieldsSelectionStep = () => {
     dataAttributesPrimaryButton: {
       'data-tracking-target': `${resourceType}_export-start_export_button`
     },
-    children: jsxRuntime.jsx(fullstory.Masking.Unmask, {
+    children: isLoading ? jsxRuntime.jsx(uiKit.Spacings.Stack, {
+      scale: "m",
+      alignItems: "center",
+      children: jsxRuntime.jsx(uiKit.LoadingSpinner, {
+        scale: "l",
+        maxDelayDuration: 0
+      })
+    }) : jsxRuntime.jsx(fullstory.Masking.Unmask, {
       children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
         scale: "xl",
         children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
@@ -3247,11 +3258,24 @@ const ExportResourcesProvider = _ref => {
   React__default["default"].useEffect(() => {
     formik$1.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
+  const mountedWhileLoadingRef = React__default["default"].useRef(Boolean(props.isLoading));
+  const hasPopulatedFieldGroups = React__default["default"].useRef(false);
+  React__default["default"].useLayoutEffect(() => {
+    if (!mountedWhileLoadingRef.current || hasPopulatedFieldGroups.current) {
+      return;
+    }
+    if (!props.isLoading && initialValues.groups.length > 0) {
+      formik$1.setFieldValue('groups', initialValues.groups);
+      hasPopulatedFieldGroups.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.isLoading, initialValues.groups]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,
       currentStep,
       setCurrentStep,
+      isLoading: props.isLoading,
       onClose: props.onClose,
       resourceType: props.resourceType,
       exportType: exportType,
@@ -3320,7 +3344,7 @@ const FieldsPreview = _ref => {
 };
 
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ExportConfirmationStep = () => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
@@ -3334,10 +3358,16 @@ const ExportConfirmationStep = () => {
     localeOption = _useExportResourcesMo.localeOption,
     setCurrentStep = _useExportResourcesMo.setCurrentStep,
     onClose = _useExportResourcesMo.onClose;
-  const groupsWithSelectedFields = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups);
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const isUsingImportedCsvLocales = localeOption === 'onlyLocalesFoundInCsvFile';
-  const allSelectedFieldCount = isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups);
+  const selectedFieldsByGroup = React.useMemo(() => {
+    var _context;
+    return _mapInstanceProperty__default["default"](_context = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups)).call(_context, group => ({
+      group,
+      fields: getSelectedFieldLabels(group)
+    }));
+  }, [_valuesInstanceProperty__default["default"](formik).groups]);
+  const allSelectedFieldCount = React.useMemo(() => isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups), [isUsingImportedCsvTemplate, importedHeaders, _valuesInstanceProperty__default["default"](formik).groups]);
   const returnToFieldsSelection = () => setCurrentStep(Step.FieldsSelection);
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     isOpen: true,
@@ -3384,11 +3414,12 @@ const ExportConfirmationStep = () => {
               })]
             }), isUsingImportedCsvTemplate ? jsxRuntime.jsx(FieldsPreview, {
               fields: importedHeaders
-            }) : _mapInstanceProperty__default["default"](groupsWithSelectedFields).call(groupsWithSelectedFields, group => {
-              const selectedFields = getSelectedFieldLabels(group);
+            }) : _mapInstanceProperty__default["default"](selectedFieldsByGroup).call(selectedFieldsByGroup, _ref => {
+              let group = _ref.group,
+                fields = _ref.fields;
               return jsxRuntime.jsx(FieldsPreview, {
                 previewGroupLabel: group.previewGroupLabel,
-                fields: selectedFields
+                fields: fields
               }, group.groupName);
             })]
           })
@@ -3729,7 +3760,7 @@ const useAsyncIntlMessages = (locale, loader) => {
   return state;
 };
 
-const _excluded = ["isOpen", "selectedResourceIds", "outputFormat", "fieldGroups", "fieldOrder"];
+const _excluded = ["isOpen", "isLoading", "selectedResourceIds", "outputFormat", "fieldGroups", "fieldOrder"];
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function invalidateLaunchDarklyCachedFeatureFlag(flagName) {
@@ -3752,6 +3783,8 @@ invalidateLaunchDarklyCachedFeatureFlag('enableOperationsExport');
 const ExportResourcesModal = _ref3 => {
   let _ref3$isOpen = _ref3.isOpen,
     isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen,
+    _ref3$isLoading = _ref3.isLoading,
+    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
     _ref3$selectedResourc = _ref3.selectedResourceIds,
     selectedResourceIds = _ref3$selectedResourc === void 0 ? [] : _ref3$selectedResourc,
     _ref3$outputFormat = _ref3.outputFormat,
@@ -3778,6 +3811,7 @@ const ExportResourcesModal = _ref3 => {
       fieldGroups: fieldGroups,
       fieldOrder: fieldOrder,
       isOpen: isOpen,
+      isLoading: isLoading,
       outputFormat: outputFormat,
       selectedResourceIds: selectedResourceIds
     }, props), {}, {

package/dist/commercetools-frontend-extensions-export-resources-modal.cjs.prod.js

@@ -1603,7 +1603,10 @@ const updateFieldDependenciesStatus = formik => {
     _forEachInstanceProperty__default["default"](fields).call(fields, (field, index) => {
       const currentPath = `${path}.fields[${index}]`;
       if (hasDependentFields(field)) {
-        formik.setFieldValue(`${currentPath}.isChecked`, isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames), false);
+        const nextIsChecked = isAnyDependentChecked(_valuesInstanceProperty__default["default"](formik).groups, field.dependentGroupNames, field.dependentFieldNames);
+        if (field.isChecked !== nextIsChecked) {
+          formik.setFieldValue(`${currentPath}.isChecked`, nextIsChecked, false);
+        }
       }
       if (field.fields) {
         updateFields(field.fields, currentPath);
@@ -3052,7 +3055,8 @@ const ExportFieldsSelectionStep = () => {
     resourceType = _useExportResourcesMo.resourceType,
     fieldSelectionMode = _useExportResourcesMo.fieldSelectionMode,
     setFieldSelectionMode = _useExportResourcesMo.setFieldSelectionMode,
-    setLocaleOption = _useExportResourcesMo.setLocaleOption;
+    setLocaleOption = _useExportResourcesMo.setLocaleOption,
+    isLoading = _useExportResourcesMo.isLoading;
   const shouldDisableImportedCsvTemplateOption = _valuesInstanceProperty__default["default"](formik).outputFormat === OUTPUT_FORMATS.JSON;
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const handleFieldSelectionModeChange = event => {
@@ -3073,7 +3077,7 @@ const ExportFieldsSelectionStep = () => {
     })}: ${intl.formatMessage(messages.confirmSelection)}`,
     iconLeftPrimaryButton: jsxRuntime.jsx(uiKit.AngleRightIcon, {}),
     onPrimaryButtonClick: formik.submitForm,
-    isPrimaryButtonDisabled: !formik.isValid,
+    isPrimaryButtonDisabled: isLoading || !formik.isValid,
     labelSecondary: intl.formatMessage(messages.back),
     onSecondaryButtonClick: () => setCurrentStep(Step.FileSettings),
     onClose: onClose,
@@ -3081,7 +3085,14 @@ const ExportFieldsSelectionStep = () => {
     dataAttributesPrimaryButton: {
       'data-tracking-target': `${resourceType}_export-start_export_button`
     },
-    children: jsxRuntime.jsx(fullstory.Masking.Unmask, {
+    children: isLoading ? jsxRuntime.jsx(uiKit.Spacings.Stack, {
+      scale: "m",
+      alignItems: "center",
+      children: jsxRuntime.jsx(uiKit.LoadingSpinner, {
+        scale: "l",
+        maxDelayDuration: 0
+      })
+    }) : jsxRuntime.jsx(fullstory.Masking.Unmask, {
       children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
         scale: "xl",
         children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
@@ -3214,11 +3225,24 @@ const ExportResourcesProvider = _ref => {
   React__default["default"].useEffect(() => {
     formik$1.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
+  const mountedWhileLoadingRef = React__default["default"].useRef(Boolean(props.isLoading));
+  const hasPopulatedFieldGroups = React__default["default"].useRef(false);
+  React__default["default"].useLayoutEffect(() => {
+    if (!mountedWhileLoadingRef.current || hasPopulatedFieldGroups.current) {
+      return;
+    }
+    if (!props.isLoading && initialValues.groups.length > 0) {
+      formik$1.setFieldValue('groups', initialValues.groups);
+      hasPopulatedFieldGroups.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.isLoading, initialValues.groups]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,
       currentStep,
       setCurrentStep,
+      isLoading: props.isLoading,
       onClose: props.onClose,
       resourceType: props.resourceType,
       exportType: exportType,
@@ -3287,7 +3311,7 @@ const FieldsPreview = _ref => {
 };
 
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ExportConfirmationStep = () => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
@@ -3301,10 +3325,16 @@ const ExportConfirmationStep = () => {
     localeOption = _useExportResourcesMo.localeOption,
     setCurrentStep = _useExportResourcesMo.setCurrentStep,
     onClose = _useExportResourcesMo.onClose;
-  const groupsWithSelectedFields = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups);
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const isUsingImportedCsvLocales = localeOption === 'onlyLocalesFoundInCsvFile';
-  const allSelectedFieldCount = isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups);
+  const selectedFieldsByGroup = React.useMemo(() => {
+    var _context;
+    return _mapInstanceProperty__default["default"](_context = getGroupsWithSelectedFields(_valuesInstanceProperty__default["default"](formik).groups)).call(_context, group => ({
+      group,
+      fields: getSelectedFieldLabels(group)
+    }));
+  }, [_valuesInstanceProperty__default["default"](formik).groups]);
+  const allSelectedFieldCount = React.useMemo(() => isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty__default["default"](formik).groups), [isUsingImportedCsvTemplate, importedHeaders, _valuesInstanceProperty__default["default"](formik).groups]);
   const returnToFieldsSelection = () => setCurrentStep(Step.FieldsSelection);
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     isOpen: true,
@@ -3351,11 +3381,12 @@ const ExportConfirmationStep = () => {
               })]
             }), isUsingImportedCsvTemplate ? jsxRuntime.jsx(FieldsPreview, {
               fields: importedHeaders
-            }) : _mapInstanceProperty__default["default"](groupsWithSelectedFields).call(groupsWithSelectedFields, group => {
-              const selectedFields = getSelectedFieldLabels(group);
+            }) : _mapInstanceProperty__default["default"](selectedFieldsByGroup).call(selectedFieldsByGroup, _ref => {
+              let group = _ref.group,
+                fields = _ref.fields;
               return jsxRuntime.jsx(FieldsPreview, {
                 previewGroupLabel: group.previewGroupLabel,
-                fields: selectedFields
+                fields: fields
               }, group.groupName);
             })]
           })
@@ -3696,7 +3727,7 @@ const useAsyncIntlMessages = (locale, loader) => {
   return state;
 };
 
-const _excluded = ["isOpen", "selectedResourceIds", "outputFormat", "fieldGroups", "fieldOrder"];
+const _excluded = ["isOpen", "isLoading", "selectedResourceIds", "outputFormat", "fieldGroups", "fieldOrder"];
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function invalidateLaunchDarklyCachedFeatureFlag(flagName) {
@@ -3719,6 +3750,8 @@ invalidateLaunchDarklyCachedFeatureFlag('enableOperationsExport');
 const ExportResourcesModal = _ref3 => {
   let _ref3$isOpen = _ref3.isOpen,
     isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen,
+    _ref3$isLoading = _ref3.isLoading,
+    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
     _ref3$selectedResourc = _ref3.selectedResourceIds,
     selectedResourceIds = _ref3$selectedResourc === void 0 ? [] : _ref3$selectedResourc,
     _ref3$outputFormat = _ref3.outputFormat,
@@ -3745,6 +3778,7 @@ const ExportResourcesModal = _ref3 => {
       fieldGroups: fieldGroups,
       fieldOrder: fieldOrder,
       isOpen: isOpen,
+      isLoading: isLoading,
       outputFormat: outputFormat,
       selectedResourceIds: selectedResourceIds
     }, props), {}, {

package/dist/commercetools-frontend-extensions-export-resources-modal.esm.js

@@ -15,7 +15,7 @@ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import { defineMessages, FormattedMessage, useIntl, IntlProvider } from 'react-intl';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { Text, TextInput, Spacings, SelectField, CheckboxInput, ContentNotification, Link, RadioInput, TextField, AngleRightIcon, Grid, designTokens, FieldLabel, Constraints, Tooltip, SupportIcon, Stamp, IconButton, AngleDownIcon, CollapsibleMotion, Card, SearchTextInput, TagList, FlatButton, AngleUpIcon, CheckBoldIcon, DataTable } from '@commercetools-frontend/ui-kit';
+import { Text, TextInput, Spacings, SelectField, CheckboxInput, ContentNotification, Link, RadioInput, TextField, AngleRightIcon, Grid, designTokens, FieldLabel, Constraints, Tooltip, SupportIcon, Stamp, IconButton, AngleDownIcon, CollapsibleMotion, Card, SearchTextInput, LoadingSpinner, TagList, FlatButton, AngleUpIcon, CheckBoldIcon, DataTable } from '@commercetools-frontend/ui-kit';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import _valuesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/values';
 import { FormDialog } from '@commercetools-frontend/application-components';
@@ -1560,7 +1560,10 @@ const updateFieldDependenciesStatus = formik => {
     _forEachInstanceProperty(fields).call(fields, (field, index) => {
       const currentPath = `${path}.fields[${index}]`;
       if (hasDependentFields(field)) {
-        formik.setFieldValue(`${currentPath}.isChecked`, isAnyDependentChecked(_valuesInstanceProperty(formik).groups, field.dependentGroupNames, field.dependentFieldNames), false);
+        const nextIsChecked = isAnyDependentChecked(_valuesInstanceProperty(formik).groups, field.dependentGroupNames, field.dependentFieldNames);
+        if (field.isChecked !== nextIsChecked) {
+          formik.setFieldValue(`${currentPath}.isChecked`, nextIsChecked, false);
+        }
       }
       if (field.fields) {
         updateFields(field.fields, currentPath);
@@ -3042,7 +3045,8 @@ const ExportFieldsSelectionStep = () => {
     resourceType = _useExportResourcesMo.resourceType,
     fieldSelectionMode = _useExportResourcesMo.fieldSelectionMode,
     setFieldSelectionMode = _useExportResourcesMo.setFieldSelectionMode,
-    setLocaleOption = _useExportResourcesMo.setLocaleOption;
+    setLocaleOption = _useExportResourcesMo.setLocaleOption,
+    isLoading = _useExportResourcesMo.isLoading;
   const shouldDisableImportedCsvTemplateOption = _valuesInstanceProperty(formik).outputFormat === OUTPUT_FORMATS.JSON;
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const handleFieldSelectionModeChange = event => {
@@ -3063,7 +3067,7 @@ const ExportFieldsSelectionStep = () => {
     })}: ${intl.formatMessage(messages.confirmSelection)}`,
     iconLeftPrimaryButton: jsx(AngleRightIcon, {}),
     onPrimaryButtonClick: formik.submitForm,
-    isPrimaryButtonDisabled: !formik.isValid,
+    isPrimaryButtonDisabled: isLoading || !formik.isValid,
     labelSecondary: intl.formatMessage(messages.back),
     onSecondaryButtonClick: () => setCurrentStep(Step.FileSettings),
     onClose: onClose,
@@ -3071,7 +3075,14 @@ const ExportFieldsSelectionStep = () => {
     dataAttributesPrimaryButton: {
       'data-tracking-target': `${resourceType}_export-start_export_button`
     },
-    children: jsx(Masking.Unmask, {
+    children: isLoading ? jsx(Spacings.Stack, {
+      scale: "m",
+      alignItems: "center",
+      children: jsx(LoadingSpinner, {
+        scale: "l",
+        maxDelayDuration: 0
+      })
+    }) : jsx(Masking.Unmask, {
       children: jsxs(Spacings.Stack, {
         scale: "xl",
         children: [jsxs(Spacings.Stack, {
@@ -3204,11 +3215,24 @@ const ExportResourcesProvider = _ref => {
   React.useEffect(() => {
     formik.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
+  const mountedWhileLoadingRef = React.useRef(Boolean(props.isLoading));
+  const hasPopulatedFieldGroups = React.useRef(false);
+  React.useLayoutEffect(() => {
+    if (!mountedWhileLoadingRef.current || hasPopulatedFieldGroups.current) {
+      return;
+    }
+    if (!props.isLoading && initialValues.groups.length > 0) {
+      formik.setFieldValue('groups', initialValues.groups);
+      hasPopulatedFieldGroups.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.isLoading, initialValues.groups]);
   return jsx(ExportResourcesContext.Provider, {
     value: {
       formik,
       currentStep,
       setCurrentStep,
+      isLoading: props.isLoading,
       onClose: props.onClose,
       resourceType: props.resourceType,
       exportType: exportType,
@@ -3277,7 +3301,7 @@ const FieldsPreview = _ref => {
 };
 
 function ownKeys$3(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const ExportConfirmationStep = () => {
   const intl = useIntl();
   const _useApplicationContex = useApplicationContext(applicationContext => ({
@@ -3291,10 +3315,16 @@ const ExportConfirmationStep = () => {
     localeOption = _useExportResourcesMo.localeOption,
     setCurrentStep = _useExportResourcesMo.setCurrentStep,
     onClose = _useExportResourcesMo.onClose;
-  const groupsWithSelectedFields = getGroupsWithSelectedFields(_valuesInstanceProperty(formik).groups);
   const isUsingImportedCsvTemplate = fieldSelectionMode === 'imported-csv-template';
   const isUsingImportedCsvLocales = localeOption === 'onlyLocalesFoundInCsvFile';
-  const allSelectedFieldCount = isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty(formik).groups);
+  const selectedFieldsByGroup = useMemo(() => {
+    var _context;
+    return _mapInstanceProperty(_context = getGroupsWithSelectedFields(_valuesInstanceProperty(formik).groups)).call(_context, group => ({
+      group,
+      fields: getSelectedFieldLabels(group)
+    }));
+  }, [_valuesInstanceProperty(formik).groups]);
+  const allSelectedFieldCount = useMemo(() => isUsingImportedCsvTemplate ? importedHeaders.length : getAllSelectedFieldCount(_valuesInstanceProperty(formik).groups), [isUsingImportedCsvTemplate, importedHeaders, _valuesInstanceProperty(formik).groups]);
   const returnToFieldsSelection = () => setCurrentStep(Step.FieldsSelection);
   return jsx(FormDialog, {
     isOpen: true,
@@ -3341,11 +3371,12 @@ const ExportConfirmationStep = () => {
               })]
             }), isUsingImportedCsvTemplate ? jsx(FieldsPreview, {
               fields: importedHeaders
-            }) : _mapInstanceProperty(groupsWithSelectedFields).call(groupsWithSelectedFields, group => {
-              const selectedFields = getSelectedFieldLabels(group);
+            }) : _mapInstanceProperty(selectedFieldsByGroup).call(selectedFieldsByGroup, _ref => {
+              let group = _ref.group,
+                fields = _ref.fields;
               return jsx(FieldsPreview, {
                 previewGroupLabel: group.previewGroupLabel,
-                fields: selectedFields
+                fields: fields
               }, group.groupName);
             })]
           })
@@ -3686,7 +3717,7 @@ const useAsyncIntlMessages = (locale, loader) => {
   return state;
 };
 
-const _excluded = ["isOpen", "selectedResourceIds", "outputFormat", "fieldGroups", "fieldOrder"];
+const _excluded = ["isOpen", "isLoading", "selectedResourceIds", "outputFormat", "fieldGroups", "fieldOrder"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function invalidateLaunchDarklyCachedFeatureFlag(flagName) {
@@ -3709,6 +3740,8 @@ invalidateLaunchDarklyCachedFeatureFlag('enableOperationsExport');
 const ExportResourcesModal = _ref3 => {
   let _ref3$isOpen = _ref3.isOpen,
     isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen,
+    _ref3$isLoading = _ref3.isLoading,
+    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
     _ref3$selectedResourc = _ref3.selectedResourceIds,
     selectedResourceIds = _ref3$selectedResourc === void 0 ? [] : _ref3$selectedResourc,
     _ref3$outputFormat = _ref3.outputFormat,
@@ -3735,6 +3768,7 @@ const ExportResourcesModal = _ref3 => {
       fieldGroups: fieldGroups,
       fieldOrder: fieldOrder,
       isOpen: isOpen,
+      isLoading: isLoading,
       outputFormat: outputFormat,
       selectedResourceIds: selectedResourceIds
     }, props), {}, {

package/dist/declarations/src/@types/export-resources-modal-context.d.ts

@@ -16,6 +16,7 @@ export interface ExportResourcesModalContext {
     formik: FormikProps<FormValues>;
     currentStep: Step;
     setCurrentStep: React.Dispatch<React.SetStateAction<Step>>;
+    isLoading?: boolean;
     onClose: () => void;
     resourceType: ResourceType;
     exportType: ExportType;

package/dist/declarations/src/@types/export-resources-modal-types.d.ts

@@ -26,6 +26,14 @@ export interface Store {
 }
 export interface ExportResourcesModalProps {
     isOpen?: boolean;
+    /**
+     * Pass `true` while the data backing `fieldGroups` is still being fetched.
+     * The modal opens immediately to the (data-independent) file settings step,
+     * and only the field selection step shows a loading spinner until the data is
+     * ready. The fetched `fieldGroups` are then merged into the form without
+     * resetting any file settings the user already changed.
+     */
+    isLoading?: boolean;
     resourceType: ResourceType;
     outputFormat?: string;
     baseFilters?: Pick<Filters, 'where'>;

package/dist/declarations/src/export-resources-modal.d.ts

@@ -1,6 +1,6 @@
 import type { ExportResourcesModalProps } from "./@types/index.js";
 declare const ExportResourcesModal: {
-    ({ isOpen, selectedResourceIds, outputFormat, fieldGroups, fieldOrder, ...props }: ExportResourcesModalProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+    ({ isOpen, isLoading, selectedResourceIds, outputFormat, fieldGroups, fieldOrder, ...props }: ExportResourcesModalProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export default ExportResourcesModal;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend-extensions/export-resources-modal",
   "description": "Shared export modal for exporting resources",
-  "version": "5.14.6",
+  "version": "5.15.1",
   "license": "BSD-3-Clause",
   "publishConfig": {
     "access": "public"