[3scale][2.11][HI-prio] Improve UI for creating a Product Mapping rule

User Story

As an API Provider, when I want to create a new Product Mapping rule, I want to be able to easily find Methods and Metrics for the current Product.

Requirements

Everything that is explained in the mockups, plus:

• When either the Method or Metric radio button is selected it will display the typeahead select for the relevant selection, and hide the one for the unselected option.
• 'Methods' and 'Metrics' selects work in the exact same way, only content changes:
  • typeahead
  • 20 most recently created {items} displayed in the dropdown menu (sorted by most recent)
  • If the sum of all {items} available is higher than 20, display link button to "View all {items}"
  • When "View all {items}" is clicked, open a modal dialog that includes a paginated table listing all {items}
    • display 5 {items} per page
    • sort table by last updated by default
    • make table filterable by {item} name
• It would be great to style the example patterns included in the helper text of the Pattern input field with the PF4 monospace font option 

Resources

• Path: Product > Integration > Mapping rules
• Marvel

Acceptance Criteria

• All requirements have been implemented