Manage Keywords Page - React rewrite

[pratisthabuddhacharya]

Feature description and context

Existing keyword administration page has legacy functionality that needs to be removed and the page as a whole needs to be updated for react

• change the word "photo keyword" from header -> administer to "manage keywords
• remove “add a new keyword”; it can be done generally by anyone
• update “remove a keyword”; should show list of keywords in system and number of usages
• update “rename a keyword”; should show list of keywords in system and number of usages.
• user should be able to confirm the remove and rename actions
• there should be a success/failure message after confirmation.

Do any roles have different access/views? - admin-only access

What pages are impacted?(list as url appears: /page) - /appadmin/kwAdmin.jsp

Feature sign-off requirements

Non-functional requirements

• should match the design and be responsive
• should use wildbook's components, text and color styles
• text is internationalized
• unit test that links work

functional requirements

• page should be accessed at new url: `[url]/react/admin/keywords
• header updates:
  • header > administer > photo keyword change "photo keyword" to "manage keywords"
  • header navigation reference is updated to point at the new page across all headers
    • frontend/src/constants/navMenu.js
    • src/main/webapp/header.jsp
    • src/main/resources/servletResponseTemplate.htm
• in the manage keywords page
  • i should be able to search keyword using the search bar
  • i should be able to switch between sorting the keyword alphabetically A-Z or Z-A using sort button
  • all the elements in the page should match the figma design and use the components provided in the file
  • the cards displaying the keyword should have the keyword, number of usage and edit and delete buttons in it
  • when user clicks on edit, the card changes to edit mode, user can rename it and click on ✅ icon to save the changes and ❎ button to cancel
  • user will be shown a popup to confirm the edit action
  • when user clicks on delete icon, user will be shown popup to confirm the delete action
  • while hovering on the icons [edit and delete icons + save changes and cancel icons in edit mode] a tooltip will show the label.
    • eg. if i hover over pencil icon, it will say "edit"

Design

• Figma link (static or prototype; specify)
  • Figma Design
  • Prototype

Note: the prototype does not show all the necessary interactions due to Figma's limitations.

• Component list/reference

  • Header (signed-in)
  • Footer
  • Cards

• Navigation sitemap

• Images needed large-image.zip