@commercetools-frontend-extensions/export-resources-modal v3.7.0
@commercetools-frontend-extensions/export-resources-modal
Package for exporting resources from Merchant Center Applications.
This library takes into account that you are building a Merchant Center Applications which documentation you can find here. The components follow the same principles of the UIKit components.
Getting started
$ npm install --save @commercetools-frontend-extensions/export-resources-modal
// or
$ yarn add @commercetools-frontend-extensions/export-resources-modal
Description
Export Resources Modal is an internal component used to export resources into csv or json files, it's using Exporter Services to create async export Job.
Usage
import { ExportResourcesModal } from '@commercetools-frontend-extensions/export-resources-modal';
// Use case: Exporting all resources
<ExportResourcesModal
isOpen={true}
exportType="all"
outputFormat="csv"
resourceType="category"
totalResourcesCount={143}
fields={[
{
name: 'key',
label: 'Category key',
isRequired: true
},
{
name: 'externalId',
label: 'External id',
isSelectedByDefault: false,
},
{ name: 'createdAt', label: 'Created at' },
{ name: 'lastModifiedAt', label: 'Last modified at' },
{ name: 'name', label: 'Name' },
{
name: 'parent',
fields: [
{
name: 'name',
label: 'Parent name',
},
{
name: 'key',
label: 'Parent key',
},
],
},
{
name: 'id',
label: 'Id',
isSelectedByDefault: false,
},
]}
customFields={[
{
type:{
key: 'general-category-attributes',
label: 'General category attributes',
resourceTypeIds: ['category'],
},
fields: [
{
name: 'season',
label: 'Season',
},
{
name: 'target-audience',
label: 'Target audience',
},
],
},
{
type:{
key: 'book-category-attributes',
label: 'Book category attributes',
resourceTypeIds: ['category', 'asset'],
},
fields: [
{
name: 'genre',
label: 'Genre',
},
{
name: 'age-group',
label: 'Age group',
},
],
}
]}
renderProperties={()=>(
<>
- The category parent is referenced by externalId or key.
</>
)}
onClose={() => {
...
}}
/>
// Use case: Exporting only selected resources by their IDs
<ExportResourcesModal
isOpen={true}
exportType="selected"
outputFormat="csv"
resourceType="category"
selectedResourceIds={['02ed9a7d-7c1f-40da-b2b7-4cca6752bf29', '04051276-1641-4e01-a03e-d4de16b7e4eb', 'ac7d9f7b-5c7d-4dd3-b82b-8555ab4a2a6e']}
fields={[
{
name: 'key',
label: 'Category key',
isRequired: true,
},
{
name: 'externalId',
label: 'External id',
isSelectedByDefault: false,
},
{ name: 'createdAt', label: 'Created at' },
{ name: 'lastModifiedAt', label: 'Last modified at' },
{ name: 'name', label: 'Name' },
{
name: 'parent',
fields: [
{
name: 'name',
label: 'Parent name',
},
{
name: 'key',
label: 'Parent key',
},
],
},
{
name: 'id',
label: 'Id',
isSelectedByDefault: false,
},
]}
customFields={[
{
type:{
key: 'general-category-attributes',
label: 'General category attributes',
resourceTypeIds: ['category'],
},
fields: [
{
name: 'season',
label: 'Season',
},
{
name: 'target-audience',
label: 'Target audience',
},
],
},
{
type:{
key: 'book-category-attributes',
label: 'Book category attributes',
resourceTypeIds: ['category', 'asset'],
},
fields: [
{
name: 'genre',
label: 'Genre',
},
{
name: 'age-group',
label: 'Age group',
},
],
}
]}
renderProperties={()=>(
<>
- The category parent is referenced by externalId or key.
</>
)}
onClose={() => {
...
}}
/>
Properties
Props | Type | Required | Default | Description |
---|---|---|---|---|
isOpen | boolean | false | Controls whether the export modal is open or closed | |
outputFormat | string Possible values: csv , json | csv | The file format to export | |
onExportSuccess | function | Callback function that is called when the export operation is successful | ||
onClose | function | Callback function invoked when the modal is requested to close (on overlay click, close button click or ESC press). This function is also called after an export operation regardless of its success or failure | ||
resourceType | string | ✅ | The type of the resource, example: category , product ... | |
totalResourcesCount | number | (✅) Required only if the exportType is all | The count of all resources of identified resourceType | |
exportType | string Possible values:all and selected | all | The type of export, so either export all resources or export only selected resources | |
selectedResourceIds | array | (✅) Required only if the exportType is selected | Array of Ids of the selected resources | |
fields | array | ✅ | Array of the fields to export. The fields must align with the commercetools API schema | |
fields[].name | string | ✅ | A string that represents the unique identifier for each field | |
fields[].label | string | ✅ | The label of the field to be shown in the export modal | |
fields[].isRequired | boolean | false | isRequired field indicates whether a field is required for the export process. If true the field will be selected by default and cannot be deselected by the user. This is useful for fields that are essential for the export process. Fields marked as required will have a * appended to their label in the UI | |
fields[].isSelectedByDefault | boolean | true | This field is a part of the fields array is used to control the default state of the corresponding checkbox in the UI. If isSelectedByDefault is set to true, the checkbox for that particular field will be checked by default when the component loads. The default value of this attribute is true which means unless explicitly set to false , the checkbox for the field will be checked on initial load. | |
customFields | array | Array of objects, each representing a group of custom fields defined under a specific type. | ||
customFields[].type | string | The type object. | ||
customFields[].type.key | string | The unique identifier for the type. | ||
customFields[].type.label | string | The label of the type to be shown in the export modal. | ||
customFields[].type.resourceTypeIds | string[] | An array of resource type IDs for which the type is defined. | ||
customFields[].fields | array | An array of objects with custom fields defined under the type represented by type.key . | ||
customFields[].fields[].name | string | The name of the custom field. | ||
customFields[].fields[].label | string | The label of the custom field to be shown in the export modal. This should match the label of the custom field in the selected locale. | ||
renderProperties | function | A prop to render properties that are resource-specific |
Releasing
This package uses changesets
in order to do releases to NPM.
In case you want to publish a new version with the latest changes you need to:
- Add a changeset with
pnpm changeset
and select@commercetools-frontend-extensions/export-resources-modal
as the modified package. - Some options would be appear in order to do the release:
patch
: use this release for fixes or small changesminor
: use this release for depenency upgrades or medium changesmajor
: use this release for breaking changes
- After selecting the option you will need to add a comment for the release notes. We recommend to use the same format as for the commits.
- e.g:
feat(utils): add utils for dates
- e.g:
- Push the
changeset
to your branch and GitHub actions will detect that the PR contains changes that affect the published library. - After the PR gets merged, another PR will be created called
Version Packages
which is the one that will be detected, again by GitHub Actions, to do a release to NPM. - Make sure that everything is correct and then merge
Version Packages
PR. - Wait until the new version is available in NPM and then deploy the custom in CircleCI.
i18n
The repo is configured with an integration with Transifex. The process for i18n is the same as the Merchant Center uses.
pnpm i18n:build
for adding the new keys to transifex.
Once the PR gets merged to main
transifex will receive a notification with new keys that need to be translated (that's why is important that description
and defaultMessage
are descriptive enough).
Whenever the translators finish translations and mark them as done, the repo will receive a PR (per language) for adding translated messages.
Once we review that translated keys are correct and add a changeset
we can merge the PR. (Don't forget to deploy the custom app)
8 days ago
14 days ago
16 days ago
27 days ago
28 days ago
29 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
6 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
5 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago