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

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

@@ -3085,7 +3085,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 +3107,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 +3115,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 +3255,29 @@ const ExportResourcesProvider = _ref => {
   React__default["default"].useEffect(() => {
     formik$1.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
+
+  // The modal can be mounted before the data backing `fieldGroups` is ready
+  // (the consumer opens it immediately and passes `isLoading`). Formik snapshots
+  // the initial values once and does not reinitialize, so when the groups
+  // arrive we set just the `groups` field — leaving any file settings the user
+  // already changed on step 1 untouched. Guarded to run once, and only when the
+  // form actually mounted without groups (a no-op for consumers that pass the
+  // full `fieldGroups` upfront).
+  const hasPopulatedFieldGroups = React__default["default"].useRef(false);
+  React__default["default"].useLayoutEffect(() => {
+    if (hasPopulatedFieldGroups.current) return;
+    if (_valuesInstanceProperty__default["default"](formik$1).groups.length === 0 && initialValues.groups.length > 0) {
+      formik$1.setFieldValue('groups', initialValues.groups);
+      hasPopulatedFieldGroups.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValues.groups]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,
       currentStep,
       setCurrentStep,
+      isLoading: props.isLoading,
       onClose: props.onClose,
       resourceType: props.resourceType,
       exportType: exportType,
@@ -3729,7 +3755,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 +3778,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 +3806,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

@@ -3052,7 +3052,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 +3074,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 +3082,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 +3222,29 @@ const ExportResourcesProvider = _ref => {
   React__default["default"].useEffect(() => {
     formik$1.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
+
+  // The modal can be mounted before the data backing `fieldGroups` is ready
+  // (the consumer opens it immediately and passes `isLoading`). Formik snapshots
+  // the initial values once and does not reinitialize, so when the groups
+  // arrive we set just the `groups` field — leaving any file settings the user
+  // already changed on step 1 untouched. Guarded to run once, and only when the
+  // form actually mounted without groups (a no-op for consumers that pass the
+  // full `fieldGroups` upfront).
+  const hasPopulatedFieldGroups = React__default["default"].useRef(false);
+  React__default["default"].useLayoutEffect(() => {
+    if (hasPopulatedFieldGroups.current) return;
+    if (_valuesInstanceProperty__default["default"](formik$1).groups.length === 0 && initialValues.groups.length > 0) {
+      formik$1.setFieldValue('groups', initialValues.groups);
+      hasPopulatedFieldGroups.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValues.groups]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
       formik: formik$1,
       currentStep,
       setCurrentStep,
+      isLoading: props.isLoading,
       onClose: props.onClose,
       resourceType: props.resourceType,
       exportType: exportType,
@@ -3696,7 +3722,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 +3745,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 +3773,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';
@@ -3042,7 +3042,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 +3064,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 +3072,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 +3212,29 @@ const ExportResourcesProvider = _ref => {
   React.useEffect(() => {
     formik.validateForm();
   }, [currentStep, fieldSelectionMode, importedHeaders, exportType]);
+
+  // The modal can be mounted before the data backing `fieldGroups` is ready
+  // (the consumer opens it immediately and passes `isLoading`). Formik snapshots
+  // the initial values once and does not reinitialize, so when the groups
+  // arrive we set just the `groups` field — leaving any file settings the user
+  // already changed on step 1 untouched. Guarded to run once, and only when the
+  // form actually mounted without groups (a no-op for consumers that pass the
+  // full `fieldGroups` upfront).
+  const hasPopulatedFieldGroups = React.useRef(false);
+  React.useLayoutEffect(() => {
+    if (hasPopulatedFieldGroups.current) return;
+    if (_valuesInstanceProperty(formik).groups.length === 0 && initialValues.groups.length > 0) {
+      formik.setFieldValue('groups', initialValues.groups);
+      hasPopulatedFieldGroups.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValues.groups]);
   return jsx(ExportResourcesContext.Provider, {
     value: {
       formik,
       currentStep,
       setCurrentStep,
+      isLoading: props.isLoading,
       onClose: props.onClose,
       resourceType: props.resourceType,
       exportType: exportType,
@@ -3686,7 +3712,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 +3735,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 +3763,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.0",
   "license": "BSD-3-Clause",
   "publishConfig": {
     "access": "public"