Improve UX to manage and browse vocabularies within the Categories Administration application

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Categories
• Labels:
  • echo-board-in
  • echo-not-test-scope
  • fc_20_06
  • fc_20_07
  • fc_20_08
• Epic/Theme:
  • Content_Performance_Analytics
• Epic Link: echo-taxonomies-for-marketers
• Sprint: TANGO | SP_37 | May26 - Jun09
• Git Pull Request: https://github.com/liferay-echo/liferay-portal/pull/1135

Motivation

Some UX improvements are required to facilitate creation and managing of vocabularies and categories.

Design

https://www.figma.com/file/NPKvcY0e7rdqJGTRlw4gFG/LPS-111333-vocabularies-configuration-extension?node-id=129%3A26803

See screenshot below

Technical Requirements

• For this page we will be using the same components as in Site builder > Page Fragments, where vocabularies will appear at a column at the left, making the categories immediately visible
• The default view for the page will be first tab in the index, i. e., Audience
• A help message will show in Audience and Stage tabs: Learn how to use categories for auditing content. Show me how . "Show me how" will link to a video /documentation page in the Help Center (TBD).
• If possible we will use the "Add a new one" button described in LPS-114120 when adding new vocabularies /categories
• OOTB taxonomies (Site: Global) can be renamed, edited or deleted from Global, but not from any other site
• Custom taxonomies can be added, deleted or renamed (see LPS-112736)
• A warning message will show when deleting a category or a taxonomy (see LPS-113922)

Acceptance Criteria

• Given the vocabulary management application
• When there are vocabularies created
• Then they show on the left side of the screen and user can navigate from one to another

–

• Given the vocabulary management application
• When the user clicks on any of them
• Then a help message shows on top of the page: Learn how to tailor categories to your needs

–

• Given the vocabulary management application
• When the user visits it for the first time
• Then the first vocabulary shown in the list is the fist vocabulary on the current site
• And When there is not a vocabulary in current site
• Then the first vocabulary shown in the list is the first vocabulary on the global site (Topic)

-- 

Test Scenarios

AC ID	Test Strategy	Test Scenarios	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd? (unit or integration)	Poshi?
01	Low	When the user accesses to Categorization > Categories, the vocabularies will appear at the left side and at the right side the categories of the vocabulary selected	No	No	No
02	Normal	When the user accesses to Categorization > Categories, he can navigate from one to another	No	No	Yes
03	Low	When the user accesses to Categorization > Categories, the first vocabulary shown in the list is Audience	No	No	Yes
04	Low	When the user accesses to Categorization > Categories and there is not a vocabulary in current site, the first vocabulary shown in the list is the first vocabulary on the global site (Topic)	No	No	Yes