Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-133329

Implement Translation Manager component to define the available translations

    Details

      Description

      Some decisions about how to manage translations have been made in the past. In the process, the “delete translation” operation was oversaught, meaning a big feature loss when editing web content structures. This orginated LEXI-1120 to bring that feature back.

      Proposal goes a bit beyond, and tries to unify all foreseen scenarios using a new interaction implemented by the (new) Translation Manager component, which provides 2 separate flows:

      • Selection: allows to select and set a language for a given usage. This has two variants
        • Language Selection: allows to select a language, with no additional information
        • Translation Selection: allows to select a translation so the translation status is shown as part of the drowpdown
      • Management: this flow allows to define the active languages for a given object. This interaction takes place in a modal where languages can be added and deleted from the available languages list, then user can confirm or cancel the operation.

      In addition, different product teams made custom solutions to enable language or translation selection, which are very similar. As a result, there is a need for a new component that can gradually be used in place of the myriad of custom solutions implemented by the product teams to manage translations.

      Acceptance criteria:

      • Two separate react components are provided to support both translation management and selection flows
      • Components implement interactions as defined in the spec
      • Multiple instances of the translation selector component can exist in a page, and all of them are syncronized both in terms of current selection and available languages
      • Components are integrated with <liferay-ui:input-localized> tag to facilitate integration from existing JSP-based apps which need to use this new component with the least possible effort.

       

      Test Scenarios:

      Requirement Test Case Covered by frontend/backend unit test? (Yes/No) Test Priority (business impact) Pass/Fail
        Given a web content being created
      When translator selector next to the title is selected
      And When manage translation is selected
      Then assert default language is available
      And assert link to Manage Translations is available
      And no other options are available from menu
      no 5-critical  
        Given a web content created
      When the kebab menu is clicked for created web content
      And When Translate is selected
      Then the translation side by side screen will be shown
      no 4-major  
      Multiple instances of the translation selector component can exist in a page, and all of them are syncronized both in terms of current selection and available languages  Given a web content with title and description translated
      When click language selector next to title
      And When select a different available language
      Then the language selector next to description field is changed to the selected language
      And Then the description field is translated to the selected language
      no  4-major   
      Components are integrated with <liferay-ui:input-localized> tag to facilitate integration from existing JSP-based apps which need to use this new component with the least possible effort.  Given a web content being created
      And Given the title of the web content is set
      When the language selector is clicked and set to a non default language
      And When type new translated value to the title field
      And When save the web content
      And When go to edit web content
      And When click on language selector
      Then translated language is available to select
      no  5-critical   
        Given the Manage Translation Modal
      When the trash can next to language in the list is clicked
      Then the language will be deleted from the Manage Translation list
      no 5-critical  
        Given the Manage Translation Modal
      When text is added to the search bar of the Manage Translation Modal
      Then the list will filter the results using Code and Language fields
      no 4-major  

      Exploratory Scenarios:

      Requirement Test Case Test Priority (business impact) Chrome
      Pass/Fail
      Safari
      Pass/Fail
      Firefox
      Pass/Fail
      Edge
      Pass/Fail
      Comments
        Exploratory Test: Validate UI looks ok for Manage translation modal on Chrome / FF / EDGE / SAFARI 2-low          
        Exploratory Test: Validate UI looks ok for translation modal on mobile device 2-low       n/a  n/a  
      Accessibility Given: Manage translation modal
      When: Use keyboard only
      Then: Able to access all interactible elements on page
      2-low     n/a   n/a   n/a  
        Given: Manage translation modal
      When: using a screenreader
      Then: identifies all aspects of actions and sections and user can navigate the page
      2-low     n/a   n/a   n/a  
        Given: Manage translation modal
      When: Use AXE chrome extension
      Then: No issues related to WCAG AA and A related to translation modal
      2-low     n/a   n/a   n/a  
        Exploratory Test: Check if different languages can be set and deleted with the Manage Translation modal 2-low     n/a   n/a   n/a  

       

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              support-lep@liferay.com SE Support
              Reporter:
              bruno.fernandez Bruno Fernández
              Recent user:
              Luiz Jardim
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:

                  Packages

                  Version Package