djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add names of attributes translations (#2566)

Browse source 
* Add names of attributes translations

* Support plain text attributes translation

* Fix translation field type

* Refactor attribute translations input data

* Refactor translation fields code

* Fix translation fields invalid skeleton display
This commit is contained in:
Dawid 2022-11-17 15:14:45 +01:00 committed by GitHub
parent 8ab43fd519
commit e1b3d5b4f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 206 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
introspection.json
View file

@ -9357,6 +9357,22 @@
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "deprecationReason": null
}, },
{
"name": "attribute",
"description": "Represents a value of an attribute.",
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "AttributeTranslatableContent",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{ {
"name": "attributeValue", "name": "attributeValue",
"description": "Represents a value of an attribute.", "description": "Represents a value of an attribute.",

8
locale/defaultMessages.json
View file

@ -3497,10 +3497,6 @@
"context": "window title", "context": "window title",
"string": "Create Product" "string": "Create Product"
}, },
"PajjqE": {
"context": "attribute list",
"string": "Attribute {number}"
},
"PbQJY5": { "PbQJY5": {
"context": "section header", "context": "section header",
"string": "Saleor Apps" "string": "Saleor Apps"
@ -7984,6 +7980,10 @@
"context": "attribute type", "context": "attribute type",
"string": "Content Attribute" "string": "Content Attribute"
}, },
"zgqPGF": {
"context": "attribute list",
"string": "Attribute {name}"
},
"zjHH6b": { "zjHH6b": {
"context": "sale start date", "context": "sale start date",
"string": "Started" "string": "Started"

3
schema.graphql
View file

@ -1881,6 +1881,9 @@ type AttributeValueTranslatableContent implements Node {
languageCode: LanguageCodeEnum! languageCode: LanguageCodeEnum!
): AttributeValueTranslation ): AttributeValueTranslation
"""Represents an attribute."""
attribute: Attribute!
"""Represents a value of an attribute.""" """Represents a value of an attribute."""
attributeValue: AttributeValue @deprecated(reason: "This field will be removed in Saleor 4.0. Get model fields from the root level queries.") attributeValue: AttributeValue @deprecated(reason: "This field will be removed in Saleor 4.0. Get model fields from the root level queries.")

98
src/fragments/translations.ts
View file

@ -1,5 +1,31 @@
import { gql } from "@apollo/client"; import { gql } from "@apollo/client";
export const attributeValueTranslatableFragment = gql`
fragment AttributeValueTranslatable on AttributeValueTranslatableContent {
id
name
plainText
richText
attributeValue {
id
}
attribute {
id
name
}
translation(languageCode: $language) {
id
name
plainText
richText
language {
code
language
}
}
}
`;
export const categoryTranslationFragment = gql` export const categoryTranslationFragment = gql`
fragment CategoryTranslation on CategoryTranslatableContent { fragment CategoryTranslation on CategoryTranslatableContent {
translation(languageCode: $language) { translation(languageCode: $language) {
@ -64,21 +90,7 @@ export const productTranslationFragment = gql`
} }
} }
attributeValues { attributeValues {
id ...AttributeValueTranslatable
name
richText
attributeValue {
id
}
translation(languageCode: $language) {
id
name
richText
language {
code
language
}
}
} }
} }
`; `;
@ -98,21 +110,7 @@ export const productVariantTranslationFragment = gql`
} }
} }
attributeValues { attributeValues {
id ...AttributeValueTranslatable
name
richText
attributeValue {
id
}
translation(languageCode: $language) {
id
name
richText
language {
code
language
}
}
} }
} }
`; `;
@ -191,21 +189,7 @@ export const pageTranslationFragment = gql`
} }
} }
attributeValues { attributeValues {
id ...AttributeValueTranslatable
name
richText
attributeValue {
id
}
translation(languageCode: $language) {
id
name
richText
language {
code
language
}
}
} }
} }
`; `;
@ -240,11 +224,13 @@ export const attributeChoicesTranslationFragment = gql`
node { node {
id id
name name
plainText
richText richText
inputType inputType
translation(languageCode: $language) { translation(languageCode: $language) {
id id
name name
plainText
richText richText
} }
} }
@ -291,28 +277,6 @@ export const attributeTranslationDetailsFragment = gql`
} }
`; `;
export const attributeValueTranslatableContentFragment = gql`
fragment AttributeValueTranslatableContent on AttributeTranslatableContent {
translation(languageCode: $language) {
id
name
}
attribute {
id
name
inputType
choices(
first: $firstValues
after: $afterValues
last: $lastValues
before: $beforeValues
) {
...AttributeChoicesTranslation
}
}
}
`;
export const menuItemTranslationFragment = gql` export const menuItemTranslationFragment = gql`
fragment MenuItemTranslation on MenuItemTranslatableContent { fragment MenuItemTranslation on MenuItemTranslatableContent {
translation(languageCode: $language) { translation(languageCode: $language) {

102
src/graphql/hooks.generated.ts
View file

@ -2505,6 +2505,31 @@ export const CollectionTranslationFragmentDoc = gql`
} }
} }
`; `;
export const AttributeValueTranslatableFragmentDoc = gql`
fragment AttributeValueTranslatable on AttributeValueTranslatableContent {
id
name
plainText
richText
attributeValue {
id
}
attribute {
id
name
}
translation(languageCode: $language) {
id
name
plainText
richText
language {
code
language
}
}
}
`;
export const ProductTranslationFragmentDoc = gql` export const ProductTranslationFragmentDoc = gql`
fragment ProductTranslation on ProductTranslatableContent { fragment ProductTranslation on ProductTranslatableContent {
product { product {
@ -2526,24 +2551,10 @@ export const ProductTranslationFragmentDoc = gql`
} }
} }
attributeValues { attributeValues {
id ...AttributeValueTranslatable
name
richText
attributeValue {
id
}
translation(languageCode: $language) {
id
name
richText
language {
code
language
}
}
} }
} }
`; ${AttributeValueTranslatableFragmentDoc}`;
export const ProductVariantTranslationFragmentDoc = gql` export const ProductVariantTranslationFragmentDoc = gql`
fragment ProductVariantTranslation on ProductVariantTranslatableContent { fragment ProductVariantTranslation on ProductVariantTranslatableContent {
productVariant { productVariant {
@ -2559,24 +2570,10 @@ export const ProductVariantTranslationFragmentDoc = gql`
} }
} }
attributeValues { attributeValues {
id ...AttributeValueTranslatable
name
richText
attributeValue {
id
}
translation(languageCode: $language) {
id
name
richText
language {
code
language
}
}
} }
} }
`; ${AttributeValueTranslatableFragmentDoc}`;
export const SaleTranslationFragmentDoc = gql` export const SaleTranslationFragmentDoc = gql`
fragment SaleTranslation on SaleTranslatableContent { fragment SaleTranslation on SaleTranslatableContent {
sale { sale {
@ -2650,24 +2647,10 @@ export const PageTranslationFragmentDoc = gql`
} }
} }
attributeValues { attributeValues {
id ...AttributeValueTranslatable
name
richText
attributeValue {
id
}
translation(languageCode: $language) {
id
name
richText
language {
code
language
}
}
} }
} }
`; ${AttributeValueTranslatableFragmentDoc}`;
export const PageTranslatableFragmentDoc = gql` export const PageTranslatableFragmentDoc = gql`
fragment PageTranslatable on PageTranslatableContent { fragment PageTranslatable on PageTranslatableContent {
id id
@ -2713,11 +2696,13 @@ export const AttributeChoicesTranslationFragmentDoc = gql`
node { node {
id id
name name
plainText
richText richText
inputType inputType
translation(languageCode: $language) { translation(languageCode: $language) {
id id
name name
plainText
richText richText
} }
} }
@ -2746,27 +2731,6 @@ export const AttributeTranslationDetailsFragmentDoc = gql`
} }
} }
${AttributeChoicesTranslationFragmentDoc}`; ${AttributeChoicesTranslationFragmentDoc}`;
export const AttributeValueTranslatableContentFragmentDoc = gql`
fragment AttributeValueTranslatableContent on AttributeTranslatableContent {
translation(languageCode: $language) {
id
name
}
attribute {
id
name
inputType
choices(
first: $firstValues
after: $afterValues
last: $lastValues
before: $beforeValues
) {
...AttributeChoicesTranslation
}
}
}
${AttributeChoicesTranslationFragmentDoc}`;
export const MenuItemTranslationFragmentDoc = gql` export const MenuItemTranslationFragmentDoc = gql`
fragment MenuItemTranslation on MenuItemTranslatableContent { fragment MenuItemTranslation on MenuItemTranslatableContent {
translation(languageCode: $language) { translation(languageCode: $language) {

6
src/graphql/typePolicies.generated.ts
View file

@ -549,15 +549,15 @@ export type AttributeValueDeletedFieldPolicy = {
recipient?: FieldPolicy<any> | FieldReadFunction<any>, recipient?: FieldPolicy<any> | FieldReadFunction<any>,
attributeValue?: FieldPolicy<any> | FieldReadFunction<any> attributeValue?: FieldPolicy<any> | FieldReadFunction<any>
}; };
export type AttributeValueTranslatableContentKeySpecifier = ('id' | 'name' | 'richText' | 'plainText' | 'translation' | 'attributeValue' | 'attribute' | AttributeValueTranslatableContentKeySpecifier)[]; export type AttributeValueTranslatableContentKeySpecifier = ('id' | 'name' | 'richText' | 'plainText' | 'translation' | 'attribute' | 'attributeValue' | AttributeValueTranslatableContentKeySpecifier)[];
export type AttributeValueTranslatableContentFieldPolicy = { export type AttributeValueTranslatableContentFieldPolicy = {
id?: FieldPolicy<any> | FieldReadFunction<any>, id?: FieldPolicy<any> | FieldReadFunction<any>,
name?: FieldPolicy<any> | FieldReadFunction<any>, name?: FieldPolicy<any> | FieldReadFunction<any>,
richText?: FieldPolicy<any> | FieldReadFunction<any>, richText?: FieldPolicy<any> | FieldReadFunction<any>,
plainText?: FieldPolicy<any> | FieldReadFunction<any>, plainText?: FieldPolicy<any> | FieldReadFunction<any>,
translation?: FieldPolicy<any> | FieldReadFunction<any>, translation?: FieldPolicy<any> | FieldReadFunction<any>,
attributeValue?: FieldPolicy<any> | FieldReadFunction<any>, attribute?: FieldPolicy<any> | FieldReadFunction<any>,
attribute?: FieldPolicy<any> | FieldReadFunction<any> attributeValue?: FieldPolicy<any> | FieldReadFunction<any>
}; };
export type AttributeValueTranslateKeySpecifier = ('translationErrors' | 'errors' | 'attributeValue' | AttributeValueTranslateKeySpecifier)[]; export type AttributeValueTranslateKeySpecifier = ('translationErrors' | 'errors' | 'attributeValue' | AttributeValueTranslateKeySpecifier)[];
export type AttributeValueTranslateFieldPolicy = { export type AttributeValueTranslateFieldPolicy = {

28
src/graphql/types.generated.ts
View file

@ -7413,13 +7413,15 @@ export type TaxClassFragment = { __typename: 'TaxClass', id: string, name: strin
export type TimePeriodFragment = { __typename: 'TimePeriod', amount: number, type: TimePeriodTypeEnum }; export type TimePeriodFragment = { __typename: 'TimePeriod', amount: number, type: TimePeriodTypeEnum };
export type AttributeValueTranslatableFragment = { __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string }, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null };
export type CategoryTranslationFragment = { __typename: 'CategoryTranslatableContent', translation: { __typename: 'CategoryTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null, category: { __typename: 'Category', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null }; export type CategoryTranslationFragment = { __typename: 'CategoryTranslatableContent', translation: { __typename: 'CategoryTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null, category: { __typename: 'Category', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null };
export type CollectionTranslationFragment = { __typename: 'CollectionTranslatableContent', collection: { __typename: 'Collection', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'CollectionTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null }; export type CollectionTranslationFragment = { __typename: 'CollectionTranslatableContent', collection: { __typename: 'Collection', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'CollectionTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null };
export type ProductTranslationFragment = { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; export type ProductTranslationFragment = { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> };
export type ProductVariantTranslationFragment = { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; export type ProductVariantTranslationFragment = { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> };
export type SaleTranslationFragment = { __typename: 'SaleTranslatableContent', sale: { __typename: 'Sale', id: string, name: string } | null, translation: { __typename: 'SaleTranslation', id: string, name: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }; export type SaleTranslationFragment = { __typename: 'SaleTranslatableContent', sale: { __typename: 'Sale', id: string, name: string } | null, translation: { __typename: 'SaleTranslation', id: string, name: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null };
@ -7427,17 +7429,15 @@ export type VoucherTranslationFragment = { __typename: 'VoucherTranslatableConte
export type ShippingMethodTranslationFragment = { __typename: 'ShippingMethodTranslatableContent', id: string, name: string, description: any | null, shippingMethod: { __typename: 'ShippingMethodType', id: string } | null, translation: { __typename: 'ShippingMethodTranslation', id: string, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }; export type ShippingMethodTranslationFragment = { __typename: 'ShippingMethodTranslatableContent', id: string, name: string, description: any | null, shippingMethod: { __typename: 'ShippingMethodType', id: string } | null, translation: { __typename: 'ShippingMethodTranslation', id: string, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null };
export type PageTranslationFragment = { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; export type PageTranslationFragment = { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> };
export type PageTranslatableFragment = { __typename: 'PageTranslatableContent', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }; export type PageTranslatableFragment = { __typename: 'PageTranslatableContent', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null };
export type AttributeChoicesTranslationFragment = { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> }; export type AttributeChoicesTranslationFragment = { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> };
export type AttributeTranslationFragment = { __typename: 'AttributeTranslatableContent', id: string, name: string, translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null } | null }; export type AttributeTranslationFragment = { __typename: 'AttributeTranslatableContent', id: string, name: string, translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null } | null };
export type AttributeTranslationDetailsFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> } | null } | null }; export type AttributeTranslationDetailsFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> } | null } | null };
export type AttributeValueTranslatableContentFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> } | null } | null };
export type MenuItemTranslationFragment = { __typename: 'MenuItemTranslatableContent', translation: { __typename: 'MenuItemTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', language: string } } | null, menuItem: { __typename: 'MenuItem', id: string, name: string } | null }; export type MenuItemTranslationFragment = { __typename: 'MenuItemTranslatableContent', translation: { __typename: 'MenuItemTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', language: string } } | null, menuItem: { __typename: 'MenuItem', id: string, name: string } | null };
@ -9093,7 +9093,7 @@ export type UpdatePageTranslationsMutationVariables = Exact<{
}>; }>;
export type UpdatePageTranslationsMutation = { __typename: 'Mutation', pageTranslate: { __typename: 'PageTranslate', errors: Array<{ __typename: 'TranslationError', code: TranslationErrorCode, field: string | null, message: string | null }>, page: { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | null } | null }; export type UpdatePageTranslationsMutation = { __typename: 'Mutation', pageTranslate: { __typename: 'PageTranslate', errors: Array<{ __typename: 'TranslationError', code: TranslationErrorCode, field: string | null, message: string | null }>, page: { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | null } | null };
export type UpdateVoucherTranslationsMutationVariables = Exact<{ export type UpdateVoucherTranslationsMutationVariables = Exact<{
id: Scalars['ID']; id: Scalars['ID'];
@ -9180,7 +9180,7 @@ export type ProductTranslationsQueryVariables = Exact<{
}>; }>;
export type ProductTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null }; export type ProductTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null };
export type PageTranslationsQueryVariables = Exact<{ export type PageTranslationsQueryVariables = Exact<{
language: LanguageCodeEnum; language: LanguageCodeEnum;
@ -9191,7 +9191,7 @@ export type PageTranslationsQueryVariables = Exact<{
}>; }>;
export type PageTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null }; export type PageTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null };
export type VoucherTranslationsQueryVariables = Exact<{ export type VoucherTranslationsQueryVariables = Exact<{
language: LanguageCodeEnum; language: LanguageCodeEnum;
@ -9254,7 +9254,7 @@ export type ProductTranslationDetailsQueryVariables = Exact<{
}>; }>;
export type ProductTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type ProductTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null };
export type ProductVariantListQueryVariables = Exact<{ export type ProductVariantListQueryVariables = Exact<{
id: Scalars['ID']; id: Scalars['ID'];
@ -9269,7 +9269,7 @@ export type ProductVariantTranslationDetailsQueryVariables = Exact<{
}>; }>;
export type ProductVariantTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type ProductVariantTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null };
export type CategoryTranslationDetailsQueryVariables = Exact<{ export type CategoryTranslationDetailsQueryVariables = Exact<{
id: Scalars['ID']; id: Scalars['ID'];
@ -9293,7 +9293,7 @@ export type PageTranslationDetailsQueryVariables = Exact<{
}>; }>;
export type PageTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type PageTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null };
export type SaleTranslationDetailsQueryVariables = Exact<{ export type SaleTranslationDetailsQueryVariables = Exact<{
id: Scalars['ID']; id: Scalars['ID'];
@ -9321,7 +9321,7 @@ export type AttributeTranslationDetailsQueryVariables = Exact<{
}>; }>;
export type AttributeTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> } | null } | null } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type AttributeTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> } | null } | null } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null };
export type ShippingMethodTranslationDetailsQueryVariables = Exact<{ export type ShippingMethodTranslationDetailsQueryVariables = Exact<{
id: Scalars['ID']; id: Scalars['ID'];

13
src/translations/components/TranslationFields/TranslationFields.tsx
View file

@ -14,7 +14,10 @@ import {
IconButton, IconButton,
makeStyles, makeStyles,
} from "@saleor/macaw-ui"; } from "@saleor/macaw-ui";
import { TranslationField } from "@saleor/translations/types"; import {
TranslationField,
TranslationFieldType,
} from "@saleor/translations/types";
import { ListProps } from "@saleor/types"; import { ListProps } from "@saleor/types";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
@ -178,7 +181,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
</div> </div>
<div className={classes.content}> <div className={classes.content}>
{field && field.value !== undefined ? ( {field && field.value !== undefined ? (
field.type === "short" ? ( field.type === TranslationFieldType.SHORT ? (
<TranslationFieldsShort <TranslationFieldsShort
disabled={disabled} disabled={disabled}
edit={false} edit={false}
@ -187,7 +190,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
onDiscard={onDiscard} onDiscard={onDiscard}
onSubmit={undefined} onSubmit={undefined}
/> />
) : field.type === "long" ? ( ) : field.type === TranslationFieldType.LONG ? (
<TranslationFieldsLong <TranslationFieldsLong
disabled={disabled} disabled={disabled}
edit={false} edit={false}
@ -213,7 +216,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
</div> </div>
<Typography className={classes.content}> <Typography className={classes.content}>
{field && field.translation !== undefined ? ( {field && field.translation !== undefined ? (
field.type === "short" ? ( field.type === TranslationFieldType.SHORT ? (
<TranslationFieldsShort <TranslationFieldsShort
disabled={disabled} disabled={disabled}
edit={activeField === field.name} edit={activeField === field.name}
@ -222,7 +225,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
onDiscard={onDiscard} onDiscard={onDiscard}
onSubmit={data => onSubmit(field, data)} onSubmit={data => onSubmit(field, data)}
/> />
) : field.type === "long" ? ( ) : field.type === TranslationFieldType.LONG ? (
<TranslationFieldsLong <TranslationFieldsLong
disabled={disabled} disabled={disabled}
edit={activeField === field.name} edit={activeField === field.name}

32
src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
View file

@ -15,6 +15,7 @@ import {
languageEntityUrl, languageEntityUrl,
TranslatableEntities, TranslatableEntities,
} from "@saleor/translations/urls"; } from "@saleor/translations/urls";
import { mapAttributeValuesToTranslationFields } from "@saleor/translations/utils";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -84,7 +85,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
}), }),
name: PageTranslationInputFieldName.title, name: PageTranslationInputFieldName.title,
translation: data?.translation?.title || null, translation: data?.translation?.title || null,
type: "short" as "short", type: "short",
value: data?.page?.title, value: data?.page?.title,
}, },
{ {
@ -95,7 +96,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
}), }),
name: PageTranslationInputFieldName.content, name: PageTranslationInputFieldName.content,
translation: data?.translation?.content || null, translation: data?.translation?.content || null,
type: "rich" as "rich", type: "rich",
value: data?.page?.content, value: data?.page?.content,
}, },
]} ]}
@ -123,7 +124,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
}), }),
name: PageTranslationInputFieldName.seoTitle, name: PageTranslationInputFieldName.seoTitle,
translation: data?.translation?.seoTitle || null, translation: data?.translation?.seoTitle || null,
type: "short" as "short", type: "short",
value: data?.page?.seoTitle, value: data?.page?.seoTitle,
}, },
{ {
@ -133,7 +134,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
}), }),
name: PageTranslationInputFieldName.seoDescription, name: PageTranslationInputFieldName.seoDescription,
translation: data?.translation?.seoDescription || null, translation: data?.translation?.seoDescription || null,
type: "long" as "long", type: "long",
value: data?.page?.seoDescription, value: data?.page?.seoDescription,
}, },
]} ]}
@ -151,25 +152,10 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
disabled={disabled} disabled={disabled}
initialState={true} initialState={true}
title={intl.formatMessage(commonMessages.translationAttributes)} title={intl.formatMessage(commonMessages.translationAttributes)}
fields={ fields={mapAttributeValuesToTranslationFields(
data.attributeValues.map((attrVal, i) => ({ data.attributeValues,
id: attrVal.attributeValue.id, intl,
displayName: intl.formatMessage( )}
{
id: "PajjqE",
defaultMessage: "Attribute {number}",
description: "attribute list",
},
{
number: i + 1,
},
),
name: attrVal?.name,
translation: attrVal?.translation?.richText || null,
type: "rich" as "rich",
value: attrVal?.richText,
})) || []
}
saveButtonState={saveButtonState} saveButtonState={saveButtonState}
richTextResetKey={languageCode} richTextResetKey={languageCode}
onEdit={onEdit} onEdit={onEdit}

26
src/translations/components/TranslationsProductVariantsPage/TranslationsProductVariantsPage.tsx
View file

@ -18,6 +18,7 @@ import {
productVariantUrl, productVariantUrl,
TranslatableEntities, TranslatableEntities,
} from "@saleor/translations/urls"; } from "@saleor/translations/urls";
import { mapAttributeValuesToTranslationFields } from "@saleor/translations/utils";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -98,7 +99,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
}), }),
name: TranslationInputFieldName.name, name: TranslationInputFieldName.name,
translation: data?.translation?.name || null, translation: data?.translation?.name || null,
type: "short" as "short", type: "short",
value: data?.name, value: data?.name,
}, },
]} ]}
@ -116,25 +117,10 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
disabled={disabled} disabled={disabled}
initialState={true} initialState={true}
title={intl.formatMessage(commonMessages.translationAttributes)} title={intl.formatMessage(commonMessages.translationAttributes)}
fields={ fields={mapAttributeValuesToTranslationFields(
data.attributeValues.map((attrVal, i) => ({ data.attributeValues,
id: attrVal.attributeValue.id, intl,
displayName: intl.formatMessage( )}
{
id: "PajjqE",
defaultMessage: "Attribute {number}",
description: "attribute list",
},
{
number: i + 1,
},
),
name: attrVal?.name,
translation: attrVal?.translation?.richText || null,
type: "rich" as "rich",
value: attrVal?.richText,
})) || []
}
saveButtonState={saveButtonState} saveButtonState={saveButtonState}
richTextResetKey={languageCode} richTextResetKey={languageCode}
onEdit={onEdit} onEdit={onEdit}

32
src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
View file

@ -15,6 +15,7 @@ import {
languageEntityUrl, languageEntityUrl,
TranslatableEntities, TranslatableEntities,
} from "@saleor/translations/urls"; } from "@saleor/translations/urls";
import { mapAttributeValuesToTranslationFields } from "@saleor/translations/utils";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -97,7 +98,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
}), }),
name: TranslationInputFieldName.name, name: TranslationInputFieldName.name,
translation: data?.translation?.name || null, translation: data?.translation?.name || null,
type: "short" as "short", type: "short",
value: data?.product?.name, value: data?.product?.name,
}, },
{ {
@ -107,7 +108,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
}), }),
name: TranslationInputFieldName.description, name: TranslationInputFieldName.description,
translation: data?.translation?.description || null, translation: data?.translation?.description || null,
type: "rich" as "rich", type: "rich",
value: data?.product?.description, value: data?.product?.description,
}, },
]} ]}
@ -134,7 +135,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
}), }),
name: TranslationInputFieldName.seoTitle, name: TranslationInputFieldName.seoTitle,
translation: data?.translation?.seoTitle || null, translation: data?.translation?.seoTitle || null,
type: "short" as "short", type: "short",
value: data?.product?.seoTitle, value: data?.product?.seoTitle,
}, },
{ {
@ -144,7 +145,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
}), }),
name: TranslationInputFieldName.seoDescription, name: TranslationInputFieldName.seoDescription,
translation: data?.translation?.seoDescription || null, translation: data?.translation?.seoDescription || null,
type: "long" as "long", type: "long",
value: data?.product?.seoDescription, value: data?.product?.seoDescription,
}, },
]} ]}
@ -162,25 +163,10 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
disabled={disabled} disabled={disabled}
initialState={true} initialState={true}
title={intl.formatMessage(commonMessages.translationAttributes)} title={intl.formatMessage(commonMessages.translationAttributes)}
fields={ fields={mapAttributeValuesToTranslationFields(
data.attributeValues.map((attrVal, i) => ({ data.attributeValues,
id: attrVal.attributeValue.id, intl,
displayName: intl.formatMessage( )}
{
id: "PajjqE",
defaultMessage: "Attribute {number}",
description: "attribute list",
},
{
number: i + 1,
},
),
name: attrVal?.name,
translation: attrVal?.translation?.richText || null,
type: "rich" as "rich",
value: attrVal?.richText,
})) || []
}
saveButtonState={saveButtonState} saveButtonState={saveButtonState}
richTextResetKey={languageCode} richTextResetKey={languageCode}
onEdit={onEdit} onEdit={onEdit}

10
src/translations/types.ts
View file

@ -19,12 +19,20 @@ export enum PageTranslationInputFieldName {
richText = "richText", richText = "richText",
} }
export const TranslationFieldType = {
SHORT: "short",
LONG: "long",
RICH: "rich",
} as const;
export type TranslationFieldType = typeof TranslationFieldType[keyof typeof TranslationFieldType];
export interface TranslationField<T extends string = string> { export interface TranslationField<T extends string = string> {
id?: string; id?: string;
displayName: string; displayName: string;
name: T; name: T;
translation: string; translation: string;
type: "short" | "long" | "rich"; type: TranslationFieldType;
value: string; value: string;
} }

42
src/translations/utils.ts
View file

@ -1,6 +1,13 @@
import { OutputData } from "@editorjs/editorjs"; import { OutputData } from "@editorjs/editorjs";
import { AttributeTranslationDetailsFragment } from "@saleor/graphql"; import {
import { TranslationField } from "@saleor/translations/types"; AttributeTranslationDetailsFragment,
AttributeValueTranslatableFragment,
AttributeValueTranslationInput,
} from "@saleor/graphql";
import {
TranslationField,
TranslationFieldType,
} from "@saleor/translations/types";
import { mapEdgesToItems } from "@saleor/utils/maps"; import { mapEdgesToItems } from "@saleor/utils/maps";
import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc"; import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
import { IntlShape } from "react-intl"; import { IntlShape } from "react-intl";
@ -52,3 +59,34 @@ export const getTranslationFields = (
}; };
}, },
) || []; ) || [];
export const mapAttributeValuesToTranslationFields = (
attributeValues: AttributeValueTranslatableFragment[],
intl: IntlShape,
) =>
attributeValues.map<TranslationField>(attrVal => ({
id: attrVal.attributeValue.id,
displayName: intl.formatMessage(
{
id: "zgqPGF",
defaultMessage: "Attribute {name}",
description: "attribute list",
},
{
name: attrVal.attribute.name,
},
),
name: attrVal.name,
translation:
attrVal.translation?.richText || attrVal.translation?.plainText || null,
type: attrVal.richText ? "rich" : "short",
value: attrVal.richText || attrVal.plainText,
})) || [];
export const getAttributeValueTranslationsInputData = (
type: TranslationFieldType,
data: OutputData | string,
): AttributeValueTranslationInput =>
type === TranslationFieldType.RICH
? { richText: JSON.stringify(data) }
: { plainText: data as string };

11
src/translations/views/TranslationsPages.tsx
View file

@ -16,7 +16,10 @@ import { useIntl } from "react-intl";
import TranslationsPagesPage from "../components/TranslationsPagesPage"; import TranslationsPagesPage from "../components/TranslationsPagesPage";
import { PageTranslationInputFieldName, TranslationField } from "../types"; import { PageTranslationInputFieldName, TranslationField } from "../types";
import { getParsedTranslationInputData } from "../utils"; import {
getAttributeValueTranslationsInputData,
getParsedTranslationInputData,
} from "../utils";
export interface TranslationsPagesQueryParams { export interface TranslationsPagesQueryParams {
activeField: string; activeField: string;
@ -96,14 +99,14 @@ const TranslationsPages: React.FC<TranslationsPagesProps> = ({
); );
const handleAttributeValueSubmit = ( const handleAttributeValueSubmit = (
{ id }: TranslationField<PageTranslationInputFieldName>, { id, type }: TranslationField<PageTranslationInputFieldName>,
data: OutputData, data: OutputData | string,
) => ) =>
extractMutationErrors( extractMutationErrors(
updateAttributeValueTranslations({ updateAttributeValueTranslations({
variables: { variables: {
id, id,
input: { richText: JSON.stringify(data) }, input: getAttributeValueTranslationsInputData(type, data),
language: languageCode, language: languageCode,
}, },
}), }),

11
src/translations/views/TranslationsProductVariants.tsx
View file

@ -16,7 +16,10 @@ import { useIntl } from "react-intl";
import { extractMutationErrors, maybe } from "../../misc"; import { extractMutationErrors, maybe } from "../../misc";
import TranslationsProductVariantsPage from "../components/TranslationsProductVariantsPage"; import TranslationsProductVariantsPage from "../components/TranslationsProductVariantsPage";
import { TranslationField, TranslationInputFieldName } from "../types"; import { TranslationField, TranslationInputFieldName } from "../types";
import { getParsedTranslationInputData } from "../utils"; import {
getAttributeValueTranslationsInputData,
getParsedTranslationInputData,
} from "../utils";
export interface TranslationsProductVariantsQueryParams { export interface TranslationsProductVariantsQueryParams {
activeField: string; activeField: string;
@ -98,14 +101,14 @@ const TranslationsProductVariants: React.FC<TranslationsProductVariantsProps> =
); );
const handleAttributeValueSubmit = ( const handleAttributeValueSubmit = (
{ id }: TranslationField<TranslationInputFieldName>, { id, type }: TranslationField<TranslationInputFieldName>,
data: OutputData, data: OutputData | string,
) => ) =>
extractMutationErrors( extractMutationErrors(
updateAttributeValueTranslations({ updateAttributeValueTranslations({
variables: { variables: {
id, id,
input: { richText: JSON.stringify(data) }, input: getAttributeValueTranslationsInputData(type, data),
language: languageCode, language: languageCode,
}, },
}), }),

11
src/translations/views/TranslationsProducts.tsx
View file

@ -16,7 +16,10 @@ import { useIntl } from "react-intl";
import { extractMutationErrors, maybe } from "../../misc"; import { extractMutationErrors, maybe } from "../../misc";
import TranslationsProductsPage from "../components/TranslationsProductsPage"; import TranslationsProductsPage from "../components/TranslationsProductsPage";
import { TranslationField, TranslationInputFieldName } from "../types"; import { TranslationField, TranslationInputFieldName } from "../types";
import { getParsedTranslationInputData } from "../utils"; import {
getAttributeValueTranslationsInputData,
getParsedTranslationInputData,
} from "../utils";
export interface TranslationsProductsQueryParams { export interface TranslationsProductsQueryParams {
activeField: string; activeField: string;
@ -96,14 +99,14 @@ const TranslationsProducts: React.FC<TranslationsProductsProps> = ({
); );
const handleAttributeValueSubmit = ( const handleAttributeValueSubmit = (
{ id }: TranslationField<TranslationInputFieldName>, { id, type }: TranslationField<TranslationInputFieldName>,
data: OutputData, data: OutputData | string,
) => ) =>
extractMutationErrors( extractMutationErrors(
updateAttributeValueTranslations({ updateAttributeValueTranslations({
variables: { variables: {
id, id,
input: { richText: JSON.stringify(data) }, input: getAttributeValueTranslationsInputData(type, data),
language: languageCode, language: languageCode,
}, },
}), }),