@commercetools-frontend-extensions/export-resources-modal 1.3.1 → 1.3.2

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

@@ -26,21 +26,21 @@ var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibl
 var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
 var _wrapNativeSuper = require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
-var PropTypes = require('prop-types');
-var formik = require('formik');
-var moment = require('moment');
-var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
-var react = require('react');
 var uiKit = require('@commercetools-frontend/ui-kit');
 var omitEmpty = require('omit-empty-es');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
 var designSystem = require('@commercetools-uikit/design-system');
-var react$1 = require('@emotion/react');
+var PropTypes = require('prop-types');
+var React = require('react');
+var react = require('@emotion/react');
 var _styled = require('@emotion/styled/base');
+var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var sdk = require('@commercetools-frontend/sdk');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var formik = require('formik');
+var moment = require('moment');
 var constants = require('@commercetools-frontend/constants');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -58,31 +58,35 @@ var _flatInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatInstanceP
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var moment__default = /*#__PURE__*/_interopDefault(moment);
 var omitEmpty__default = /*#__PURE__*/_interopDefault(omitEmpty);
-var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var moment__default = /*#__PURE__*/_interopDefault(moment);
 
-const EXPORTABLE_RESOURCES = {
-  CATEGORY: 'category',
-  PRODUCT: 'product',
-  DISCOUNT_CODE: 'discountCode'
+const EXPORT_OPERATION_STATES = {
+  PROCESSING: 'processing',
+  COMPLETED: 'completed',
+  FAILED: 'failed'
 };
+
 const EXPORT_SELECTION_TYPES = {
   ALL_RESOURCES: 'allResources',
   ONLY_MATCHING: 'onlyMatching',
   ONLY_SELECTED: 'onlySelected'
 };
+
+const EXPORTABLE_RESOURCES = {
+  CATEGORY: 'category',
+  PRODUCT: 'product',
+  DISCOUNT_CODE: 'discountCode'
+};
+
 const OUTPUT_FORMATS = {
   JSON: 'json',
   CSV: 'csv'
 };
-const EXPORT_OPERATION_STATES = {
-  PROCESSING: 'processing',
-  COMPLETED: 'completed',
-  FAILED: 'failed'
-};
 
 function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -178,6 +182,14 @@ function isFilledArray(maybeArray) {
   return _Array$isArray__default["default"](maybeArray) && maybeArray.length;
 }
 
+/*
+ * This function is responsible for constructing the GraphQL query based on the export settings
+ *
+ * Depending on the type of export selection (all resources, only selected, or only matching/filtered) it constructs different types of queries:
+ * - For 'all resources', it generates a query that fetches all fields and languages specified in the export settings.
+ * - For 'only selected', it creates a query that fetches only the fields and languages of the selected resources. The ids of the selected resources are included in the query.
+ * - The 'only matching' case is a placeholder for future development where a query will be constructed based on certain filtering criteria using the `where` parameter.
+ */
 function buildGraphQuery(exportSettings) {
   var _context;
   const operation = resourceTypeToOperationName(exportSettings.resourceType);
@@ -213,6 +225,21 @@ function buildGraphQuery(exportSettings) {
       throw new UnexpectedSelectionTypeError(exportSettings.exportSelectionType);
   }
 }
+
+/*
+ * This function builds the necessary field structure for our GraphQL queries, tt is specifically designed to handle different types of fields
+ *
+ * For fields whose values change depending on the language aka localised fields, a unique request format is used
+ * This format combines the field and the language, separated by '_____'. This approach is adopted as our system disallows the use of hyphens `-` in these situations
+ *
+ * Fields that don't vary by language but contain additional subfields (known as 'nested fields') are also addressed
+ * In these cases the function is used recursively on these subfields to generate the appropriate request.
+ *
+ * Overall, this function enables us to accurately request different types of data, including those varying by language or containing subfields.
+ *
+ * More details can be found in the related PR: https://github.com/commercetools/commercetools-exporter/pull/103
+ */
+
 function buildFields(_ref) {
   var _context2;
   let fields = _ref.fields,
@@ -220,7 +247,7 @@ function buildFields(_ref) {
   return _flatInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](fields).call(fields, field => {
     if (field.isLocalized) return _mapInstanceProperty__default["default"](languages).call(languages, language => {
       var _context3, _context4, _context5;
-      const alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty__default["default"](_context3 = "".concat(field.key, "_")).call(_context3, language));
+      const alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty__default["default"](_context3 = "".concat(field.key, "_____")).call(_context3, language));
       return _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(alias, ": ")).call(_context5, field.key, "(locale: \"")).call(_context4, language, "\")");
     });else {
       if (isFilledArray(field.fields)) {
@@ -236,6 +263,22 @@ function buildFields(_ref) {
   })).call(_context2);
 }
 
+function validate(values) {
+  const errors = {
+    fileName: {},
+    languages: {}
+  };
+  if (uiKit.TextInput.isEmpty(values.fileName)) {
+    errors.fileName.missing = true;
+  } else if (!/^[a-zA-Z0-9-_]+$/.test(values.fileName)) {
+    errors.fileName.invalidInput = true;
+  }
+  if (values.languages.length < 1) {
+    errors.languages.missing = true;
+  }
+  return omitEmpty__default["default"](errors);
+}
+
 var messages = reactIntl.defineMessages({
   modalTitle: {
     id: 'ExportResourcesModal.modalTitle',
@@ -389,112 +432,26 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-const ExportResourcesContext = /*#__PURE__*/react.createContext();
-
-PropTypes__default["default"].shape({
-  resourceType: PropTypes__default["default"].string.isRequired,
-  outputFormat: PropTypes__default["default"].string,
-  isOpen: PropTypes__default["default"].bool.isRequired,
-  closeModal: PropTypes__default["default"].func.isRequired,
-  allResourcesCount: PropTypes__default["default"].number.isRequired,
-  matchingResourcesCount: PropTypes__default["default"].number,
-  selectedResourceIds: PropTypes__default["default"].array,
-  // TODO: Circular reference
-  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-    key: PropTypes__default["default"].string.isRequired,
-    label: PropTypes__default["default"].string,
-    isLocalized: PropTypes__default["default"].bool,
-    fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-      key: PropTypes__default["default"].string.isRequired,
-      label: PropTypes__default["default"].string,
-      isLocalized: PropTypes__default["default"].bool
-    }))
-  })).isRequired,
-  exportSelectionType: PropTypes__default["default"].string,
-  appliedSearchTerms: PropTypes__default["default"].array,
-  appliedFilters: PropTypes__default["default"].array,
-  renderProperties: PropTypes__default["default"].func
-}).isRequired;
-
-function validate(values) {
-  const errors = {
-    fileName: {},
-    languages: {}
-  };
-  if (uiKit.TextInput.isEmpty(values.fileName)) {
-    errors.fileName.missing = true;
-  } else if (!/^[a-zA-Z0-9-_]+$/.test(values.fileName)) {
-    errors.fileName.invalidInput = true;
-  }
-  if (values.languages.length < 1) {
-    errors.languages.missing = true;
-  }
-  return omitEmpty__default["default"](errors);
-}
-
-const ExportResourcesContextProvider = props => {
-  var _context;
-  const todayFormatted = moment__default["default"]().format('DD-MM-YY_HH-mm');
-  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
-      language: applicationContext.dataLocale
-    })),
-    language = _useApplicationContex.language;
-  const formik$1 = formik.useFormik({
-    initialValues: {
-      outputFormat: props.outputFormat,
-      fileName: _concatInstanceProperty__default["default"](_context = "".concat(resourceTypeToPlural({
-        resourceType: props.resourceType,
-        isUpperCase: true
-      }), "_Export_")).call(_context, todayFormatted),
-      languages: [language],
-      fields: props.fields,
-      appliedSearchTerms: props.appliedSearchTerms,
-      appliedFilters: props.appliedFilters,
-      exportSelectionType: props.exportSelectionType,
-      isAllLanguagesChecked: false
-    },
-    validate
-  });
-  const _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    exportOperationStarted = _useState2[0],
-    setExportOperationStarted = _useState2[1];
-  return jsxRuntime.jsx(ExportResourcesContext.Provider, {
-    value: {
-      formik: formik$1,
-      resourceType: props.resourceType,
-      allResourcesCount: props.allResourcesCount,
-      matchingResourcesCount: props.matchingResourcesCount,
-      selectedResourceIds: props.selectedResourceIds,
-      exportOperationStarted,
-      setExportOperationStarted
-    },
-    children: props.children
+function getBold(msg) {
+  return jsxRuntime.jsx(uiKit.Text.Body, {
+    as: "span",
+    isBold: true,
+    children: msg
   });
-};
-ExportResourcesContextProvider.displayName = 'ExportResourcesContextProvider';
-ExportResourcesContextProvider.propTypes = {};
-
-function useExportResourcesContext() {
-  const context = react.useContext(ExportResourcesContext);
-  if (!context) {
-    throw new MissingExportResourceProviderError();
-  }
-  return context;
 }
 
-const smallTopPadding = /*#__PURE__*/react$1.css("padding-top:", designSystem.customProperties.spacingXs, ";" + ("" ), "" );
+const smallTopPadding = /*#__PURE__*/react.css("padding-top:", designSystem.customProperties.spacingXs, ";" + ("" ), "" );
 const tagListContainer = _ref => {
   let isNewTheme = _ref.isNewTheme;
-  return /*#__PURE__*/react$1.css("width:100%;display:flex;flex-wrap:wrap;display:inline-flex;padding:0 ", isNewTheme ? 0 : designSystem.customProperties.spacingL, ";&>div{margin:0 ", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingS, " 0;}" + ("" ), "" );
+  return /*#__PURE__*/react.css("width:100%;display:flex;flex-wrap:wrap;display:inline-flex;padding:0 ", isNewTheme ? 0 : designSystem.customProperties.spacingL, ";&>div{margin:0 ", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingS, " 0;}" + ("" ), "" );
 };
-const tagListItem = /*#__PURE__*/react$1.css("margin:0 ", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingXs, " 0;display:flex;min-width:0;" + ("" ), "" );
-const divider = /*#__PURE__*/react$1.css("box-sizing:border-box;width:100%;margin:0;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral60, ";" + ("" ), "" );
+const tagListItem = /*#__PURE__*/react.css("margin:0 ", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingXs, " 0;display:flex;min-width:0;" + ("" ), "" );
+const divider = /*#__PURE__*/react.css("box-sizing:border-box;width:100%;margin:0;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral60, ";" + ("" ), "" );
 const notBold = {
   name: "lugakg",
   styles: "font-weight:normal"
 } ;
-const successMessage = /*#__PURE__*/react$1.css("margin-bottom:", designSystem.customProperties.spacingL, ";" + ("" ), "" );
+const successMessage = /*#__PURE__*/react.css("margin-bottom:", designSystem.customProperties.spacingL, ";" + ("" ), "" );
 const styles = {
   tagListItem,
   tagListContainer,
@@ -504,173 +461,50 @@ const styles = {
   successMessage
 };
 
+function TagList(props) {
+  const _useTheme = designSystem.useTheme(),
+    isNewTheme = _useTheme.isNewTheme;
+  return jsxRuntime.jsx("div", {
+    css: styles.tagListContainer({
+      isNewTheme
+    }),
+    "data-testid": props['data-testid'],
+    children: _mapInstanceProperty__default["default"](React.Children).call(React.Children, props.children, tag => jsxRuntime.jsx("div", {
+      css: styles.tagListItem,
+      children: tag
+    }))
+  });
+}
+TagList.displayName = 'TagList';
+TagList.propTypes = {};
+
 function ownKeys$a(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-function ExportSelectionRadioButtons() {
+function AppliedFilters(_ref) {
+  let filters = _ref.filters,
+    onFilterRemove = _ref.onFilterRemove;
   const _useTheme = designSystem.useTheme(),
     isNewTheme = _useTheme.isNewTheme;
-  const intl = reactIntl.useIntl();
-  const _useExportResourcesCo = useExportResourcesContext(),
-    formik = _useExportResourcesCo.formik,
-    resourceType = _useExportResourcesCo.resourceType,
-    allResourcesCount = _useExportResourcesCo.allResourcesCount,
-    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    selectedResourceIds = _useExportResourcesCo.selectedResourceIds;
-  const resourceTypePlural = resourceTypeToPlural({
-    resourceType: resourceType
-  });
-  return jsxRuntime.jsx(uiKit.Spacings.Inline, {
-    scale: "xl",
-    children: jsxRuntime.jsxs(uiKit.RadioInput.Group, {
-      name: "exportSelectionType",
-      value: _valuesInstanceProperty__default["default"](formik).exportSelectionType,
-      direction: "inline",
-      directionProps: {
-        scale: 'xl'
-      },
-      onChange: formik.handleChange,
-      children: [jsxRuntime.jsx(uiKit.RadioInput.Option, {
-        value: EXPORT_SELECTION_TYPES.ALL_RESOURCES,
-        "data-testid": 'test-all-resources',
-        children: jsxRuntime.jsx(uiKit.Text.Body, {
-          isBold: !isNewTheme,
-          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.exportAllResources), {}, {
-            values: {
-              resourceType: resourceTypePlural,
-              count: allResourcesCount
-            }
-          })
-        })
-      }), jsxRuntime.jsx(uiKit.RadioInput.Option, {
-        value: EXPORT_SELECTION_TYPES.ONLY_MATCHING,
-        "data-testid": 'test-only-matching',
-        isDisabled: !Boolean(matchingResourcesCount),
-        children: jsxRuntime.jsx(uiKit.Text.Body, {
-          isBold: !isNewTheme,
-          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.exportOnlyMatchingResources), {}, {
-            values: {
-              count: matchingResourcesCount || intl.formatMessage(messages.nothingApplied)
-            }
-          })
-        })
-      }), jsxRuntime.jsx(uiKit.RadioInput.Option, {
-        value: EXPORT_SELECTION_TYPES.ONLY_SELECTED,
-        "data-testid": 'test-only-selected',
-        isDisabled: !Boolean(selectedResourceIds.length),
-        children: jsxRuntime.jsx(uiKit.Text.Body, {
-          isBold: !isNewTheme,
-          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.exportOnlySelectedResources), {}, {
-            values: {
-              resourceType: resourceTypePlural,
-              count: selectedResourceIds.length
-            }
-          })
+  if (isNewTheme) return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
+    condensed: true,
+    isDefaultClosed: !Boolean(filters.length),
+    header: jsxRuntime.jsx(uiKit.Text.Body, {
+      intlMessage: _objectSpread$a(_objectSpread$a({}, messages.appliedFiltersMessage), {}, {
+        values: {
+          filtersCount: filters.length
+        }
+      })
+    }),
+    children: jsxRuntime.jsx(TagList, {
+      children: _mapInstanceProperty__default["default"](filters).call(filters, filter => jsxRuntime.jsx("div", {
+        "data-testid": "test-filter-".concat(filter),
+        children: jsxRuntime.jsx(uiKit.Tag, {
+          onRemove: () => {
+            onFilterRemove(filter);
+          },
+          children: filter
         })
-      })]
-    })
-  });
-}
-
-function getBold(msg) {
-  return jsxRuntime.jsx(uiKit.Text.Body, {
-    as: "span",
-    isBold: true,
-    children: msg
-  });
-}
-
-function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-function ExportTextMessage() {
-  const _useExportResourcesCo = useExportResourcesContext(),
-    resourceType = _useExportResourcesCo.resourceType,
-    allResourcesCount = _useExportResourcesCo.allResourcesCount,
-    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
-    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    formik = _useExportResourcesCo.formik;
-  const resourceTypePlural = resourceTypeToPlural({
-    resourceType: resourceType
-  });
-  switch (_valuesInstanceProperty__default["default"](formik).exportSelectionType) {
-    case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
-      return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.exportAllMessage), {}, {
-          values: {
-            count: allResourcesCount,
-            resourceType: resourceTypePlural,
-            b: getBold
-          }
-        })
-      });
-    case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
-      return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.exportMatchingMessage), {}, {
-          values: {
-            count: matchingResourcesCount,
-            resourceType: resourceTypePlural,
-            b: getBold
-          }
-        })
-      });
-    case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
-      return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.exportSelectedMessage), {}, {
-          values: {
-            count: selectedResourceIds.length,
-            resourceType: resourceTypePlural,
-            b: getBold
-          }
-        })
-      });
-    default:
-      throw new UnexpectedSelectionTypeError(_valuesInstanceProperty__default["default"](formik).exportSelectionType);
-  }
-}
-
-function TagList(props) {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  return jsxRuntime.jsx("div", {
-    css: styles.tagListContainer({
-      isNewTheme
-    }),
-    "data-testid": props['data-testid'],
-    children: _mapInstanceProperty__default["default"](react.Children).call(react.Children, props.children, tag => jsxRuntime.jsx("div", {
-      css: styles.tagListItem,
-      children: tag
-    }))
-  });
-}
-TagList.displayName = 'TagList';
-TagList.propTypes = {};
-
-function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-function AppliedFilters(_ref) {
-  let filters = _ref.filters,
-    onFilterRemove = _ref.onFilterRemove;
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  if (isNewTheme) return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
-    condensed: true,
-    isDefaultClosed: !Boolean(filters.length),
-    header: jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: _objectSpread$8(_objectSpread$8({}, messages.appliedFiltersMessage), {}, {
-        values: {
-          filtersCount: filters.length
-        }
-      })
-    }),
-    children: jsxRuntime.jsx(TagList, {
-      children: _mapInstanceProperty__default["default"](filters).call(filters, filter => jsxRuntime.jsx("div", {
-        "data-testid": "test-filter-".concat(filter),
-        children: jsxRuntime.jsx(uiKit.Tag, {
-          onRemove: () => {
-            onFilterRemove(filter);
-          },
-          children: filter
-        })
-      }, filter))
+      }, filter))
     })
   });
   return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
@@ -684,7 +518,7 @@ function AppliedFilters(_ref) {
         color: "neutral60"
       }), jsxRuntime.jsx(uiKit.Text.Body, {
         isBold: true,
-        intlMessage: _objectSpread$8(_objectSpread$8({}, messages.appliedFiltersMessage), {}, {
+        intlMessage: _objectSpread$a(_objectSpread$a({}, messages.appliedFiltersMessage), {}, {
           values: {
             filtersCount: filters.length
           }
@@ -705,31 +539,10 @@ function AppliedFilters(_ref) {
 }
 AppliedFilters.propTypes = {};
 
-// TODO: @redesign cleanup
-function ExportBasedOnMyViewsSelectField() {
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
-  return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-    scale: "m",
-    alignItems: "center",
-    children: [jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: messages.exportBasedOnMyViewsMessage
-    }), jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: messages.myViews
-    }), jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
-      max: themedValue(4, 7),
-      children: jsxRuntime.jsx(uiKit.SelectInput, {
-        isDisabled: true,
-        placeholder: "Default"
-      })
-    })]
-  });
-}
-
-function ownKeys$7(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const IconPlaceholder = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1nl5t3e0"
+  target: "e1oion860"
 } )("width:", uiKit.customProperties.spacingM, ";" + ("" ));
 function AppliedSearchTerms(_ref) {
   let appliedSearchTerms = _ref.appliedSearchTerms;
@@ -739,7 +552,7 @@ function AppliedSearchTerms(_ref) {
     condensed: true,
     isDefaultClosed: !Boolean(appliedSearchTerms.length),
     header: jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: _objectSpread$7(_objectSpread$7({}, messages.appliedSearchTermsMessage), {}, {
+      intlMessage: _objectSpread$9(_objectSpread$9({}, messages.appliedSearchTermsMessage), {}, {
         values: {
           searchTermsCount: appliedSearchTerms.length
         }
@@ -760,7 +573,7 @@ function AppliedSearchTerms(_ref) {
         color: "neutral60"
       }), jsxRuntime.jsx(uiKit.Text.Body, {
         isBold: true,
-        intlMessage: _objectSpread$7(_objectSpread$7({}, messages.appliedSearchTermsMessage), {}, {
+        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.appliedSearchTermsMessage), {}, {
           values: {
             searchTermsCount: appliedSearchTerms.length
           }
@@ -777,6 +590,172 @@ function AppliedSearchTerms(_ref) {
 }
 AppliedSearchTerms.propTypes = {};
 
+// TODO: @redesign cleanup
+function ExportBasedOnMyViewsSelectField() {
+  const _useTheme = designSystem.useTheme(),
+    themedValue = _useTheme.themedValue;
+  return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+    scale: "m",
+    alignItems: "center",
+    children: [jsxRuntime.jsx(uiKit.Text.Body, {
+      intlMessage: messages.exportBasedOnMyViewsMessage
+    }), jsxRuntime.jsx(uiKit.Text.Body, {
+      intlMessage: messages.myViews
+    }), jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
+      max: themedValue(4, 7),
+      children: jsxRuntime.jsx(uiKit.SelectInput, {
+        isDisabled: true,
+        placeholder: "Default"
+      })
+    })]
+  });
+}
+
+function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function renderFileNameError(key) {
+  switch (key) {
+    case 'missing':
+      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages.missingFileNameError));
+    case 'invalidInput':
+      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages.invalidFileNameError));
+    default:
+      return null;
+  }
+}
+function renderLanguageError(key) {
+  switch (key) {
+    case 'missing':
+      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages.missingLanguageError));
+    default:
+      return null;
+  }
+}
+
+function useExportResourcesContext() {
+  const context = React.useContext(ExportResourcesContext);
+  if (!context) {
+    throw new MissingExportResourceProviderError();
+  }
+  return context;
+}
+
+async function createExportOperation(_ref) {
+  let projectKey = _ref.projectKey,
+    graphQuery = _ref.graphQuery,
+    asyncDispatchFn = _ref.asyncDispatchFn;
+  const uri = "/proxy/export/".concat(projectKey, "/export-operations");
+  const response = await asyncDispatchFn(sdk.actions.post({
+    // FIXME: EXPORT is undefined
+    mcApiProxyTarget: constants.MC_API_PROXY_TARGETS.EXPORT,
+    uri: uri,
+    headers: {
+      accept: 'application/json'
+    },
+    payload: {
+      query: graphQuery
+    }
+  }));
+  return response;
+}
+
+function ownKeys$7(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ExportConfirmationModal(props) {
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => {
+      var _applicationContext$p, _applicationContext$p2;
+      return {
+        projectName: (_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.name,
+        projectKey: (_applicationContext$p2 = applicationContext.project) === null || _applicationContext$p2 === void 0 ? void 0 : _applicationContext$p2.key
+      };
+    }),
+    projectName = _useApplicationContex.projectName,
+    projectKey = _useApplicationContex.projectKey;
+  const _useExportResourcesCo = useExportResourcesContext(),
+    formik = _useExportResourcesCo.formik,
+    allResourcesCount = _useExportResourcesCo.allResourcesCount,
+    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
+    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
+    resourceType = _useExportResourcesCo.resourceType,
+    setExportOperationStarted = _useExportResourcesCo.setExportOperationStarted;
+  const intl = reactIntl.useIntl();
+  const asyncDispatch = sdk.useAsyncDispatch();
+  const resourceTypePlural = resourceTypeToPlural({
+    resourceType: props.resourceType
+  });
+  const countInConfirmationMessage = () => {
+    switch (_valuesInstanceProperty__default["default"](formik).exportSelectionType) {
+      case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
+        return allResourcesCount;
+      case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
+        return matchingResourcesCount;
+      case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
+        return selectedResourceIds.length;
+      default:
+        throw new UnexpectedSelectionTypeError(_valuesInstanceProperty__default["default"](formik).exportSelectionType);
+    }
+  };
+  return jsxRuntime.jsx(applicationComponents.ConfirmationDialog, {
+    dataAttributesPrimaryButton: {
+      'data-testid': 'confirm-export-button'
+    },
+    title: intl.formatMessage(messages.confirmationTitle, {
+      resourceType: resourceTypePlural
+    }),
+    labelPrimary: intl.formatMessage(messages.exportConfirmationLabel, {
+      resourceType: resourceTypePlural
+    }),
+    isOpen: props.isOpen,
+    onClose: props.closeModal,
+    onCancel: props.closeModal,
+    onConfirm: async () => {
+      setExportOperationStarted(false);
+      const graphQuery = buildGraphQuery({
+        resourceType: resourceType,
+        selectedResourceIds: selectedResourceIds,
+        fields: _valuesInstanceProperty__default["default"](formik).fields,
+        exportSelectionType: _valuesInstanceProperty__default["default"](formik).exportSelectionType,
+        languages: _valuesInstanceProperty__default["default"](formik).languages
+      });
+      props.closeModal();
+      try {
+        const response = await createExportOperation({
+          projectKey,
+          graphQuery,
+          asyncDispatchFn: asyncDispatch
+        });
+        switch (response.state) {
+          case EXPORT_OPERATION_STATES.PROCESSING:
+          case EXPORT_OPERATION_STATES.COMPLETED:
+            setExportOperationStarted(true);
+            break;
+          default:
+            throw new UnexpectedExportOperationStateError(response.state);
+        }
+      } catch (errors) {
+        actionsGlobal.showApiErrorNotification({
+          errors
+        });
+      }
+    },
+    children: jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: _objectSpread$7(_objectSpread$7({}, messages.confirmationBodyPlan), {}, {
+          values: {
+            resourceType: resourceTypePlural,
+            projectName: projectName,
+            count: countInConfirmationMessage(),
+            bold: getBold
+          }
+        })
+      }), jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: messages.confirmationBodyQuestion
+      })]
+    })
+  });
+}
+ExportConfirmationModal.propTypes = {};
+
 function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$6(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$6(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 function normalizeFields(fields) {
@@ -825,29 +804,144 @@ function ExportFields(_ref2) {
       fields: fields
     })
   });
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "s",
-    children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-      scale: "s",
-      alignItems: "flex-start",
-      children: [jsxRuntime.jsx(uiKit.AngleRightIcon, {
-        "data-testid": "test-arrowRight",
-        size: "medium",
-        color: "neutral60"
-      }), jsxRuntime.jsx(uiKit.Text.Body, {
-        isBold: true,
-        intlMessage: _objectSpread$6(_objectSpread$6({}, messages.columnsMessage), {}, {
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "s",
+    children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+      scale: "s",
+      alignItems: "flex-start",
+      children: [jsxRuntime.jsx(uiKit.AngleRightIcon, {
+        "data-testid": "test-arrowRight",
+        size: "medium",
+        color: "neutral60"
+      }), jsxRuntime.jsx(uiKit.Text.Body, {
+        isBold: true,
+        intlMessage: _objectSpread$6(_objectSpread$6({}, messages.columnsMessage), {}, {
+          values: {
+            columnsCount: fields.length
+          }
+        })
+      })]
+    }), jsxRuntime.jsx(FieldsRenderer, {
+      fields: fields
+    })]
+  });
+}
+ExportFields.propTypes = {};
+
+function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ExportSelectionRadioButtons() {
+  const _useTheme = designSystem.useTheme(),
+    isNewTheme = _useTheme.isNewTheme;
+  const intl = reactIntl.useIntl();
+  const _useExportResourcesCo = useExportResourcesContext(),
+    formik = _useExportResourcesCo.formik,
+    resourceType = _useExportResourcesCo.resourceType,
+    allResourcesCount = _useExportResourcesCo.allResourcesCount,
+    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
+    selectedResourceIds = _useExportResourcesCo.selectedResourceIds;
+  const resourceTypePlural = resourceTypeToPlural({
+    resourceType: resourceType
+  });
+  return jsxRuntime.jsx(uiKit.Spacings.Inline, {
+    scale: "xl",
+    children: jsxRuntime.jsxs(uiKit.RadioInput.Group, {
+      name: "exportSelectionType",
+      value: _valuesInstanceProperty__default["default"](formik).exportSelectionType,
+      direction: "inline",
+      directionProps: {
+        scale: 'xl'
+      },
+      onChange: formik.handleChange,
+      children: [jsxRuntime.jsx(uiKit.RadioInput.Option, {
+        value: EXPORT_SELECTION_TYPES.ALL_RESOURCES,
+        "data-testid": 'test-all-resources',
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          isBold: !isNewTheme,
+          intlMessage: _objectSpread$5(_objectSpread$5({}, messages.exportAllResources), {}, {
+            values: {
+              resourceType: resourceTypePlural,
+              count: allResourcesCount
+            }
+          })
+        })
+      }), jsxRuntime.jsx(uiKit.RadioInput.Option, {
+        value: EXPORT_SELECTION_TYPES.ONLY_MATCHING,
+        "data-testid": 'test-only-matching',
+        isDisabled: !Boolean(matchingResourcesCount),
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          isBold: !isNewTheme,
+          intlMessage: _objectSpread$5(_objectSpread$5({}, messages.exportOnlyMatchingResources), {}, {
+            values: {
+              count: matchingResourcesCount || intl.formatMessage(messages.nothingApplied)
+            }
+          })
+        })
+      }), jsxRuntime.jsx(uiKit.RadioInput.Option, {
+        value: EXPORT_SELECTION_TYPES.ONLY_SELECTED,
+        "data-testid": 'test-only-selected',
+        isDisabled: !Boolean(selectedResourceIds.length),
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          isBold: !isNewTheme,
+          intlMessage: _objectSpread$5(_objectSpread$5({}, messages.exportOnlySelectedResources), {}, {
+            values: {
+              resourceType: resourceTypePlural,
+              count: selectedResourceIds.length
+            }
+          })
+        })
+      })]
+    })
+  });
+}
+
+function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ExportTextMessage() {
+  const _useExportResourcesCo = useExportResourcesContext(),
+    resourceType = _useExportResourcesCo.resourceType,
+    allResourcesCount = _useExportResourcesCo.allResourcesCount,
+    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
+    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
+    formik = _useExportResourcesCo.formik;
+  const resourceTypePlural = resourceTypeToPlural({
+    resourceType: resourceType
+  });
+  switch (_valuesInstanceProperty__default["default"](formik).exportSelectionType) {
+    case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
+      return jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: _objectSpread$4(_objectSpread$4({}, messages.exportAllMessage), {}, {
           values: {
-            columnsCount: fields.length
+            count: allResourcesCount,
+            resourceType: resourceTypePlural,
+            b: getBold
           }
         })
-      })]
-    }), jsxRuntime.jsx(FieldsRenderer, {
-      fields: fields
-    })]
-  });
+      });
+    case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
+      return jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: _objectSpread$4(_objectSpread$4({}, messages.exportMatchingMessage), {}, {
+          values: {
+            count: matchingResourcesCount,
+            resourceType: resourceTypePlural,
+            b: getBold
+          }
+        })
+      });
+    case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
+      return jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: _objectSpread$4(_objectSpread$4({}, messages.exportSelectedMessage), {}, {
+          values: {
+            count: selectedResourceIds.length,
+            resourceType: resourceTypePlural,
+            b: getBold
+          }
+        })
+      });
+    default:
+      throw new UnexpectedSelectionTypeError(_valuesInstanceProperty__default["default"](formik).exportSelectionType);
+  }
 }
-ExportFields.propTypes = {};
 
 const ExportSelection = () => {
   const _useTheme = designSystem.useTheme(),
@@ -911,8 +1005,8 @@ const ExportSelection = () => {
   });
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const ExportProperties = props => {
   const _useTheme = designSystem.useTheme(),
     isNewTheme = _useTheme.isNewTheme;
@@ -929,36 +1023,15 @@ const ExportProperties = props => {
   return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
     header: jsxRuntime.jsx(uiKit.Text.Body, {
       isBold: true,
-      intlMessage: _objectSpread$5({}, messages.propertiesPanelLabel)
+      intlMessage: _objectSpread$3({}, messages.propertiesPanelLabel)
     }),
     children: props.renderProperties()
   });
 };
 ExportProperties.propTypes = {};
 
-function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-function renderFileNameError(key) {
-  switch (key) {
-    case 'missing':
-      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages.missingFileNameError));
-    case 'invalidInput':
-      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages.invalidFileNameError));
-    default:
-      return null;
-  }
-}
-function renderLanguageError(key) {
-  switch (key) {
-    case 'missing':
-      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages.missingLanguageError));
-    default:
-      return null;
-  }
-}
-
-function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const outputFormatOptions = [{
   value: OUTPUT_FORMATS.JSON,
   label: 'JSON'
@@ -992,12 +1065,12 @@ function ExportFileSettings(props) {
     children: [jsxRuntime.jsx(applicationComponents.PageContentNarrow, {
       children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
         scale: "xl",
-        children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$3(_objectSpread$3({
+        children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$2(_objectSpread$2({
           isDisabled: true
         }, formik.getFieldProps('outputFormat')), {}, {
           title: intl.formatMessage(messages.outputFormat),
           options: outputFormatOptions
-        })), jsxRuntime.jsx(uiKit.TextField, _objectSpread$3(_objectSpread$3({
+        })), jsxRuntime.jsx(uiKit.TextField, _objectSpread$2(_objectSpread$2({
           title: intl.formatMessage(messages.fileName)
         }, formik.getFieldProps('fileName')), {}, {
           touched: formik.touched.fileName,
@@ -1005,7 +1078,7 @@ function ExportFileSettings(props) {
           renderError: renderFileNameError
         })), jsxRuntime.jsxs(uiKit.Spacings.Stack, {
           scale: "xs",
-          children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$3(_objectSpread$3({
+          children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$2(_objectSpread$2({
             id: "languages",
             title: intl.formatMessage(messages.localLanguage),
             options: mapLanguagesToOptions(languages),
@@ -1042,13 +1115,13 @@ function ExportFileSettings(props) {
     scale: "l",
     children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
       scale: "l",
-      children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$3(_objectSpread$3({
+      children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$2(_objectSpread$2({
         isDisabled: true
       }, formik.getFieldProps('outputFormat')), {}, {
         title: intl.formatMessage(messages.outputFormat),
         options: outputFormatOptions,
         horizontalConstraint: 7
-      })), jsxRuntime.jsx(uiKit.TextField, _objectSpread$3(_objectSpread$3({
+      })), jsxRuntime.jsx(uiKit.TextField, _objectSpread$2(_objectSpread$2({
         title: intl.formatMessage(messages.fileName)
       }, formik.getFieldProps('fileName')), {}, {
         touched: formik.touched.fileName,
@@ -1057,7 +1130,7 @@ function ExportFileSettings(props) {
         horizontalConstraint: 7
       }))]
     }), jsxRuntime.jsx(uiKit.Spacings.Inline, {
-      children: jsxRuntime.jsx(uiKit.SelectField, _objectSpread$3(_objectSpread$3({
+      children: jsxRuntime.jsx(uiKit.SelectField, _objectSpread$2(_objectSpread$2({
         id: "languages",
         title: jsxRuntime.jsxs(uiKit.Spacings.Inline, {
           scale: "s",
@@ -1097,122 +1170,6 @@ function ExportFileSettings(props) {
 ExportFileSettings.displayName = 'ExportFileSettings';
 ExportFileSettings.propTypes = {};
 
-async function createExportOperation(_ref) {
-  let projectKey = _ref.projectKey,
-    graphQuery = _ref.graphQuery,
-    asyncDispatchFn = _ref.asyncDispatchFn;
-  const uri = "/proxy/export/".concat(projectKey, "/export-operations");
-  const response = await asyncDispatchFn(sdk.actions.post({
-    // FIXME: EXPORT is undefined
-    mcApiProxyTarget: constants.MC_API_PROXY_TARGETS.EXPORT,
-    uri: uri,
-    headers: {
-      accept: 'application/json'
-    },
-    payload: {
-      query: graphQuery
-    }
-  }));
-  return response;
-}
-
-function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-function ExportConfirmationModal(props) {
-  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => {
-      var _applicationContext$p, _applicationContext$p2;
-      return {
-        projectName: (_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.name,
-        projectKey: (_applicationContext$p2 = applicationContext.project) === null || _applicationContext$p2 === void 0 ? void 0 : _applicationContext$p2.key
-      };
-    }),
-    projectName = _useApplicationContex.projectName,
-    projectKey = _useApplicationContex.projectKey;
-  const _useExportResourcesCo = useExportResourcesContext(),
-    formik = _useExportResourcesCo.formik,
-    allResourcesCount = _useExportResourcesCo.allResourcesCount,
-    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
-    resourceType = _useExportResourcesCo.resourceType,
-    setExportOperationStarted = _useExportResourcesCo.setExportOperationStarted;
-  const intl = reactIntl.useIntl();
-  const asyncDispatch = sdk.useAsyncDispatch();
-  const resourceTypePlural = resourceTypeToPlural({
-    resourceType: props.resourceType
-  });
-  const countInConfirmationMessage = () => {
-    switch (_valuesInstanceProperty__default["default"](formik).exportSelectionType) {
-      case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
-        return allResourcesCount;
-      case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
-        return matchingResourcesCount;
-      case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
-        return selectedResourceIds.length;
-      default:
-        throw new UnexpectedSelectionTypeError(_valuesInstanceProperty__default["default"](formik).exportSelectionType);
-    }
-  };
-  return jsxRuntime.jsx(applicationComponents.ConfirmationDialog, {
-    dataAttributesPrimaryButton: {
-      'data-testid': 'confirm-export-button'
-    },
-    title: intl.formatMessage(messages.confirmationTitle, {
-      resourceType: resourceTypePlural
-    }),
-    labelPrimary: intl.formatMessage(messages.exportConfirmationLabel, {
-      resourceType: resourceTypePlural
-    }),
-    isOpen: props.isOpen,
-    onClose: props.closeModal,
-    onCancel: props.closeModal,
-    onConfirm: async () => {
-      setExportOperationStarted(false);
-      const graphQuery = buildGraphQuery({
-        resourceType: resourceType,
-        selectedResourceIds: selectedResourceIds,
-        fields: _valuesInstanceProperty__default["default"](formik).fields,
-        exportSelectionType: _valuesInstanceProperty__default["default"](formik).exportSelectionType,
-        languages: _valuesInstanceProperty__default["default"](formik).languages
-      });
-      props.closeModal();
-      try {
-        const response = await createExportOperation({
-          projectKey,
-          graphQuery,
-          asyncDispatchFn: asyncDispatch
-        });
-        switch (response.state) {
-          case EXPORT_OPERATION_STATES.PROCESSING:
-          case EXPORT_OPERATION_STATES.COMPLETED:
-            setExportOperationStarted(true);
-            break;
-          default:
-            throw new UnexpectedExportOperationStateError(response.state);
-        }
-      } catch (errors) {
-        actionsGlobal.showApiErrorNotification({
-          errors
-        });
-      }
-    },
-    children: jsxRuntime.jsxs("div", {
-      children: [jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$2(_objectSpread$2({}, messages.confirmationBodyPlan), {}, {
-          values: {
-            resourceType: resourceTypePlural,
-            projectName: projectName,
-            count: countInConfirmationMessage(),
-            bold: getBold
-          }
-        })
-      }), jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: messages.confirmationBodyQuestion
-      })]
-    })
-  });
-}
-ExportConfirmationModal.propTypes = {};
-
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const getExportLogsLink = (projectKey, msg) => jsxRuntime.jsx(uiKit.Link, {
@@ -1247,6 +1204,76 @@ function ExportOperationSuccessMessage(_ref) {
 }
 ExportOperationSuccessMessage.propTypes = {};
 
+const ExportResourcesContext = /*#__PURE__*/React.createContext();
+
+PropTypes__default["default"].shape({
+  resourceType: PropTypes__default["default"].string.isRequired,
+  outputFormat: PropTypes__default["default"].string,
+  isOpen: PropTypes__default["default"].bool.isRequired,
+  closeModal: PropTypes__default["default"].func.isRequired,
+  allResourcesCount: PropTypes__default["default"].number.isRequired,
+  matchingResourcesCount: PropTypes__default["default"].number,
+  selectedResourceIds: PropTypes__default["default"].array,
+  // TODO: Circular reference
+  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    key: PropTypes__default["default"].string.isRequired,
+    label: PropTypes__default["default"].string,
+    isLocalized: PropTypes__default["default"].bool,
+    fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+      key: PropTypes__default["default"].string.isRequired,
+      label: PropTypes__default["default"].string,
+      isLocalized: PropTypes__default["default"].bool
+    }))
+  })).isRequired,
+  exportSelectionType: PropTypes__default["default"].string,
+  appliedSearchTerms: PropTypes__default["default"].array,
+  appliedFilters: PropTypes__default["default"].array,
+  renderProperties: PropTypes__default["default"].func
+}).isRequired;
+
+const ExportResourcesContextProvider = props => {
+  var _context;
+  const todayFormatted = moment__default["default"]().format('DD-MM-YY_HH-mm');
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
+      language: applicationContext.dataLocale
+    })),
+    language = _useApplicationContex.language;
+  const formik$1 = formik.useFormik({
+    initialValues: {
+      outputFormat: props.outputFormat,
+      fileName: _concatInstanceProperty__default["default"](_context = "".concat(resourceTypeToPlural({
+        resourceType: props.resourceType,
+        isUpperCase: true
+      }), "_Export_")).call(_context, todayFormatted),
+      languages: [language],
+      fields: props.fields,
+      appliedSearchTerms: props.appliedSearchTerms,
+      appliedFilters: props.appliedFilters,
+      exportSelectionType: props.exportSelectionType,
+      isAllLanguagesChecked: false
+    },
+    validate
+  });
+  const _React$useState = React__default["default"].useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    exportOperationStarted = _React$useState2[0],
+    setExportOperationStarted = _React$useState2[1];
+  return jsxRuntime.jsx(ExportResourcesContext.Provider, {
+    value: {
+      formik: formik$1,
+      resourceType: props.resourceType,
+      allResourcesCount: props.allResourcesCount,
+      matchingResourcesCount: props.matchingResourcesCount,
+      selectedResourceIds: props.selectedResourceIds,
+      exportOperationStarted,
+      setExportOperationStarted
+    },
+    children: props.children
+  });
+};
+ExportResourcesContextProvider.displayName = 'ExportResourcesContextProvider';
+ExportResourcesContextProvider.propTypes = {};
+
 const _excluded = ["renderProperties"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }