Add text attribute for product and page translations (#1276)

* initial commit

* Refactor translation components

* Wire up products

* Update types

* add logic for withChoices flag

* refactoring

* fixing errors

* change in intl.ts

* amended Changelog

* fix formatting

* fixing stuff

* Update translations

* remove unused declaration

* add changes

* Fixes

* Add newline

* Update displayName

* Update snapshots

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

CHANGELOG.md

@@ -73,6 +73,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add Metadata for Sale & Voucher - #7653 by @piotrgrundas
 - Add variant create options dialog - #1238 by @orzechdev
 - Fix for errors on changing channel availability - #1264 by @krzysztofwolski
+- Add text attribute for product and page translations - #1276 by @kamilpastuszka
 
 # 2.11.1
 

locale/defaultMessages.json

@@ -6668,6 +6668,9 @@
     "context": "independent of any particular day, eg. 11:35",
     "string": "Time"
   },
+  "src_dot_translationAttributes": {
+    "string": "Attributes"
+  },
   "src_dot_translations": {
     "context": "translations section name",
     "string": "Translations"
@@ -6688,6 +6691,21 @@
   "src_dot_translations_dot_components_dot_TranslationFields_dot_3793796047": {
     "string": "No translation yet"
   },
+  "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_1567737068": {
+    "context": "attribute values",
+    "string": "Value {number}"
+  },
+  "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_2642976392": {
+    "string": "Attribute Name"
+  },
+  "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_884093025": {
+    "context": "header",
+    "string": "Translation Attribute \"{attribute}\" - {languageCode}"
+  },
+  "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_values": {
+    "context": "section name",
+    "string": "Values"
+  },
   "src_dot_translations_dot_components_dot_TranslationsCategoriesPage_dot_1214235329": {
     "string": "Category Name"
   },
@@ -6790,28 +6808,13 @@
   "src_dot_translations_dot_components_dot_TranslationsPagesPage_dot_3468022343": {
     "string": "Search Engine Preview"
   },
+  "src_dot_translations_dot_components_dot_TranslationsPagesPage_dot_4165966072": {
+    "context": "attribute list",
+    "string": "Attribute {number}"
+  },
   "src_dot_translations_dot_components_dot_TranslationsPagesPage_dot_432157284": {
     "string": "Page Title"
   },
-  "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_1567737068": {
-    "context": "attribute values",
-    "string": "Value {number}"
-  },
-  "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_2642976392": {
-    "string": "Attribute Name"
-  },
-  "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_3495336243": {
-    "context": "attribute richtext value",
-    "string": "Text"
-  },
-  "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_884093025": {
-    "context": "header",
-    "string": "Translation Attribute \"{attribute}\" - {languageCode}"
-  },
-  "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_values": {
-    "context": "section name",
-    "string": "Values"
-  },
   "src_dot_translations_dot_components_dot_TranslationsProductsPage_dot_1406947243": {
     "string": "Search Engine Description"
   },
@@ -6831,6 +6834,10 @@
   "src_dot_translations_dot_components_dot_TranslationsProductsPage_dot_3468022343": {
     "string": "Search Engine Preview"
   },
+  "src_dot_translations_dot_components_dot_TranslationsProductsPage_dot_4165966072": {
+    "context": "attribute list",
+    "string": "Attribute {number}"
+  },
   "src_dot_translations_dot_components_dot_TranslationsSalesPage_dot_3731955064": {
     "context": "header",
     "string": "Translation Sale \"{saleName}\" - {languageCode}"

src/fragments/translations.ts

@@ -44,6 +44,7 @@ export const collectionTranslationFragment = gql`
     }
   }
 `;
+
 export const productTranslationFragment = gql`
   fragment ProductTranslationFragment on ProductTranslatableContent {
     product {
@@ -55,14 +56,31 @@ export const productTranslationFragment = gql`
     }
     translation(languageCode: $language) {
       id
+      seoTitle
+      seoDescription
+      name
       description
       language {
         code
         language
       }
+    }
+    attributeValues {
+      id
       name
-      seoDescription
-      seoTitle
+      richText
+      attributeValue {
+        id
+      }
+      translation(languageCode: $language) {
+        id
+        name
+        richText
+        language {
+          code
+          language
+        }
+      }
     }
   }
 `;
@@ -139,6 +157,23 @@ export const pageTranslationFragment = gql`
         language
       }
     }
+    attributeValues {
+      id
+      name
+      richText
+      attributeValue {
+        id
+      }
+      translation(languageCode: $language) {
+        id
+        name
+        richText
+        language {
+          code
+          language
+        }
+      }
+    }
   }
 `;
 export const pageTranslatableFragment = gql`
@@ -148,7 +183,6 @@ export const pageTranslatableFragment = gql`
     seoDescription
     seoTitle
     title
-
     translation(languageCode: $language) {
       id
       content
@@ -188,6 +222,8 @@ export const attributeChoicesTranslationFragment = gql`
 
 export const attributeTranslationFragment = gql`
   fragment AttributeTranslationFragment on AttributeTranslatableContent {
+    id
+    name
     translation(languageCode: $language) {
       id
       name
@@ -203,6 +239,30 @@ export const attributeTranslationFragment = gql`
 export const attributeTranslationDetailsFragment = gql`
   ${attributeChoicesTranslationFragment}
   fragment AttributeTranslationDetailsFragment on AttributeTranslatableContent {
+    translation(languageCode: $language) {
+      id
+      name
+    }
+    attribute {
+      id
+      name
+      inputType
+      withChoices
+      choices(
+        first: $firstValues
+        after: $afterValues
+        last: $lastValues
+        before: $beforeValues
+      ) {
+        ...AttributeChoicesTranslationFragment
+      }
+    }
+  }
+`;
+
+export const attributeValueTranslatableContentFragment = gql`
+  ${attributeChoicesTranslationFragment}
+  fragment AttributeValueTranslatableContentFragment on AttributeTranslatableContent {
     translation(languageCode: $language) {
       id
       name

src/fragments/types/AttributeTranslationDetailsFragment.ts

@@ -56,6 +56,7 @@ export interface AttributeTranslationDetailsFragment_attribute {
   id: string;
   name: string | null;
   inputType: AttributeInputTypeEnum | null;
+  withChoices: boolean;
   choices: AttributeTranslationDetailsFragment_attribute_choices | null;
 }
 

src/fragments/types/AttributeTranslationFragment.ts

@@ -24,6 +24,8 @@ export interface AttributeTranslationFragment_attribute {
 
 export interface AttributeTranslationFragment {
   __typename: "AttributeTranslatableContent";
+  id: string;
+  name: string;
   translation: AttributeTranslationFragment_translation | null;
   attribute: AttributeTranslationFragment_attribute | null;
 }

src/fragments/types/AttributeValueTranslatableContentFragment.ts

@@ -0,0 +1,66 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { AttributeInputTypeEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: AttributeValueTranslatableContentFragment
+// ====================================================
+
+export interface AttributeValueTranslatableContentFragment_translation {
+  __typename: "AttributeTranslation";
+  id: string;
+  name: string;
+}
+
+export interface AttributeValueTranslatableContentFragment_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface AttributeValueTranslatableContentFragment_attribute_choices_edges_node_translation {
+  __typename: "AttributeValueTranslation";
+  id: string;
+  name: string;
+  richText: any | null;
+}
+
+export interface AttributeValueTranslatableContentFragment_attribute_choices_edges_node {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  richText: any | null;
+  inputType: AttributeInputTypeEnum | null;
+  translation: AttributeValueTranslatableContentFragment_attribute_choices_edges_node_translation | null;
+}
+
+export interface AttributeValueTranslatableContentFragment_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: AttributeValueTranslatableContentFragment_attribute_choices_edges_node;
+}
+
+export interface AttributeValueTranslatableContentFragment_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: AttributeValueTranslatableContentFragment_attribute_choices_pageInfo;
+  edges: AttributeValueTranslatableContentFragment_attribute_choices_edges[];
+}
+
+export interface AttributeValueTranslatableContentFragment_attribute {
+  __typename: "Attribute";
+  id: string;
+  name: string | null;
+  inputType: AttributeInputTypeEnum | null;
+  choices: AttributeValueTranslatableContentFragment_attribute_choices | null;
+}
+
+export interface AttributeValueTranslatableContentFragment {
+  __typename: "AttributeTranslatableContent";
+  translation: AttributeValueTranslatableContentFragment_translation | null;
+  attribute: AttributeValueTranslatableContentFragment_attribute | null;
+}

src/fragments/types/PageTranslationFragment.ts

@@ -34,8 +34,37 @@ export interface PageTranslationFragment_translation {
   language: PageTranslationFragment_translation_language;
 }
 
+export interface PageTranslationFragment_attributeValues_attributeValue {
+  __typename: "AttributeValue";
+  id: string;
+}
+
+export interface PageTranslationFragment_attributeValues_translation_language {
+  __typename: "LanguageDisplay";
+  code: LanguageCodeEnum;
+  language: string;
+}
+
+export interface PageTranslationFragment_attributeValues_translation {
+  __typename: "AttributeValueTranslation";
+  id: string;
+  name: string;
+  richText: any | null;
+  language: PageTranslationFragment_attributeValues_translation_language;
+}
+
+export interface PageTranslationFragment_attributeValues {
+  __typename: "AttributeValueTranslatableContent";
+  id: string;
+  name: string;
+  richText: any | null;
+  attributeValue: PageTranslationFragment_attributeValues_attributeValue | null;
+  translation: PageTranslationFragment_attributeValues_translation | null;
+}
+
 export interface PageTranslationFragment {
   __typename: "PageTranslatableContent";
   page: PageTranslationFragment_page | null;
   translation: PageTranslationFragment_translation | null;
+  attributeValues: PageTranslationFragment_attributeValues[];
 }

src/fragments/types/ProductTranslationFragment.ts

@@ -27,15 +27,44 @@ export interface ProductTranslationFragment_translation_language {
 export interface ProductTranslationFragment_translation {
   __typename: "ProductTranslation";
   id: string;
+  seoTitle: string | null;
+  seoDescription: string | null;
+  name: string | null;
   description: any | null;
   language: ProductTranslationFragment_translation_language;
-  name: string | null;
-  seoDescription: string | null;
-  seoTitle: string | null;
+}
+
+export interface ProductTranslationFragment_attributeValues_attributeValue {
+  __typename: "AttributeValue";
+  id: string;
+}
+
+export interface ProductTranslationFragment_attributeValues_translation_language {
+  __typename: "LanguageDisplay";
+  code: LanguageCodeEnum;
+  language: string;
+}
+
+export interface ProductTranslationFragment_attributeValues_translation {
+  __typename: "AttributeValueTranslation";
+  id: string;
+  name: string;
+  richText: any | null;
+  language: ProductTranslationFragment_attributeValues_translation_language;
+}
+
+export interface ProductTranslationFragment_attributeValues {
+  __typename: "AttributeValueTranslatableContent";
+  id: string;
+  name: string;
+  richText: any | null;
+  attributeValue: ProductTranslationFragment_attributeValues_attributeValue | null;
+  translation: ProductTranslationFragment_attributeValues_translation | null;
 }
 
 export interface ProductTranslationFragment {
   __typename: "ProductTranslatableContent";
   product: ProductTranslationFragment_product | null;
   translation: ProductTranslationFragment_translation | null;
+  attributeValues: ProductTranslationFragment_attributeValues[];
 }

src/intl.ts

@@ -99,6 +99,9 @@ export const commonMessages = defineMessages({
   summary: {
     defaultMessage: "Summary"
   },
+  translationAttributes: {
+    defaultMessage: "Attributes"
+  },
   unauthorizedDashboardAccess: {
     defaultMessage: "Only staff users can access the dashboard"
   },

src/storybook/stories/translations/TranslationsEntitiesListPage.tsx

@@ -18,7 +18,7 @@ const props: TranslationsEntitiesListPageProps = {
     onCategoriesTabClick: () => undefined,
     onCollectionsTabClick: () => undefined,
     onPagesTabClick: () => undefined,
-    onProductTypesTabClick: () => undefined,
+    onAttributesTabClick: () => undefined,
     onProductsTabClick: () => undefined,
     onSalesTabClick: () => undefined,
     onShippingMethodsTabClick: () => undefined,