@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}
    outputFormat="csv"
    resourceType="category"
    totalResourcesCount={143}
    fieldGroups={[
      {
        groupLabel: 'All general fields',
        groupName: 'general-fields',
        previewGroupLabel: 'general fields',
        fields: [
          {
            name: 'key',
            label: 'Category key',
            isRequired: true,
          },
          {
            name: 'externalId',
            label: 'External id',
          },
          {
            name: 'createdAt',
            label: 'Created at',
            isSelectedByDefault: true,
          },
          {
            name: 'lastModifiedAt',
            label: 'Last modified at',
            isSelectedByDefault: true,
          },
          { name: 'name', label: 'Name', isSelectedByDefault: true },
          {
            name: 'parent',
            label: 'parent',
            isSelectedByDefault: true,
            fields: [
              {
                name: 'parent.name',
                label: 'Parent name',
              },
              {
                name: 'parent.key',
                label: 'Parent key',
              },
            ],
          },
          {
            name: 'id',
            label: 'Id',
            isSelectedByDefault: true,
          },
        ],
      },
      {
        groupLabel: 'All custom fields',
        groupName: 'custom-fields',
        previewGroupLabel: 'custom fields',
        fields: [
          {
            name: 'custom-type-key-and-type-id',
            label: 'Custom type key and type id',
          },
          {
            name: 'general-category-attributes',
            label: 'General category attributes',
            fields: [
              {
                name: 'custom.fields.season',
                label: 'Season',
              },
              {
                name: 'custom.fields.target-audience',
                label: 'Target audience',
              },
            ],
          },
          {
            name: 'book-category-attributes',
            label: 'Book category attributes',
            fields: [
              {
                name: 'custom.fields.genre',
                label: 'Genre',
              },
              {
                name: 'custom.fields.age-group',
                label: 'Age group',
              },
            ],
          },
        ],
      },
    ]}
    fieldOrder={['*', 'custom']}
    onClose={() => {
      ...
    }}
/>


// Use case: Exporting filtered resources
<ExportResourcesModal
    isOpen={true}
    outputFormat="csv"
    resourceType="category"
    filters={{
      { 
        filters: [ 'key = "category-key"'], 
        fullText: {
          text: 'category-text',
          locale: 'en'
        } 
      },
      total: 20
    }}
    totalResourcesCount={143}
    fieldGroups={[
      {
        groupLabel: 'All general fields',
        groupName: 'general-fields',
        previewGroupLabel: 'general fields',
        fields: [
          {
            name: 'key',
            label: 'Category key',
            isRequired: true,
          },
          {
            name: 'externalId',
            label: 'External id',
          },
          {
            name: 'createdAt',
            label: 'Created at',
            isSelectedByDefault: true,
          },
          {
            name: 'lastModifiedAt',
            label: 'Last modified at',
            isSelectedByDefault: true,
          },
          { name: 'name', label: 'Name', isSelectedByDefault: true },
          {
            name: 'parent',
            label: 'parent',
            isSelectedByDefault: true,
            fields: [
              {
                name: 'parent.name',
                label: 'Parent name',
              },
              {
                name: 'parent.key',
                label: 'Parent key',
              },
            ],
          },
          {
            name: 'id',
            label: 'Id',
            isSelectedByDefault: true,
          },
        ],
      },
      {
        groupLabel: 'All custom fields',
        groupName: 'custom-fields',
        previewGroupLabel: 'custom fields',
        fields: [
          {
            name: 'custom-type-key-and-type-id',
            label: 'Custom type key and type id',
          },
          {
            name: 'general-category-attributes',
            label: 'General category attributes',
            fields: [
              {
                name: 'custom.fields.season',
                label: 'Season',
              },
              {
                name: 'custom.fields.target-audience',
                label: 'Target audience',
              },
            ],
          },
          {
            name: 'book-category-attributes',
            label: 'Book category attributes',
            fields: [
              {
                name: 'custom.fields.genre',
                label: 'Genre',
              },
              {
                name: 'custom.fields.age-group',
                label: 'Age group',
              },
            ],
          },
        ],
      },
    ]}
    fieldOrder={['*', 'custom']}
    onClose={() => {
      ...
    }}
/>

// Use case: Exporting only selected resources by their IDs
<ExportResourcesModal
    isOpen={true}
    outputFormat="csv"
    resourceType="category"
    selectedResourceIds={['02ed9a7d-7c1f-40da-b2b7-4cca6752bf29', '04051276-1641-4e01-a03e-d4de16b7e4eb', 'ac7d9f7b-5c7d-4dd3-b82b-8555ab4a2a6e']}
    fields={[
      {
          groupLabel: 'All General fields',
          groupName: 'general-fields',
          previewGroupLabel: 'general fields',
          fields:[
            {
              name: 'key',
              label: 'Category key',
              isRequired: true,
              isSelectedByDefault: true,
            },
            {
              name: 'externalId',
              label: 'External id',
            },
            { name: 'createdAt', label: 'Created at', isSelectedByDefault: true, },
            { name: 'lastModifiedAt', label: 'Last modified at', isSelectedByDefault: true, },
            { name: 'name', label: 'Name', isSelectedByDefault: true, },
            {
              name: 'parent',
              isSelectedByDefault: true,
              fields: [
                {
                  name: 'parent.name',
                  label: 'Parent name',
                },
                {
                  name: 'parent.key',
                  label: 'Parent key',
                },
              ],
            },
            {
              name: 'id',
              label: 'Id',
            },
            ]
        },
        {
            groupLabel: 'All custom fields',
            groupName: 'custom-fields',
            previewGroupLabel: 'custom fields',
            fields: [
              {
                name: 'custom-type-key-and-typeid',
                label: 'Custom type key and type id',
                isSelectedByDefault: false,
              },
              {
                name: 'general-category-attributes',
                label: 'General category attributes',
                isSelectedByDefault: false,
                fields: [
                  {
                    name: 'season',
                    label: 'Season',
                  },
                  {
                    name: 'target-audience',
                    label: 'Target audience',
                  },
                ],
              },
              {
                name: 'book-category-attributes',
                label: 'Book category attributes',
                isSelectedByDefault: false,
                fields: [
                  {
                    name: 'genre',
                    label: 'Genre',
                  },
                  {
                    name: 'age-group',
                    label: 'Age group',
                  },
                ],
              },
            ]
        }
    ]}
    onClose={() => {
      ...
    }}
/>

Properties

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:

1. Add a changeset with pnpm changeset and select @commercetools-frontend-extensions/export-resources-modal as the modified package.
2. Some options would be appear in order to do the release:
   • patch: use this release for fixes or small changes
   • minor: use this release for depenency upgrades or medium changes
   • major: use this release for breaking changes
3. 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
4. Push the changeset to your branch and GitHub actions will detect that the PR contains changes that affect the published library.
5. 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.
6. Make sure that everything is correct and then merge Version Packages PR.
7. Wait until the new version is available in NPM and then deploy the custom in CircleCI.

Canary releases

Canary releases are automatically published to the distribution channel via CI following a successful build and merge to the main branch.

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)