Some newer elements are missing the attribute data-testid

[karel-rehor]

Describe the bug

This is a bug for writing automated tests against applications using clockface. There is a well established idiom of using the attribute data-testid to locate elements to be manipulated during automated testing. When looking to click through the new compressed navbar to open alerts-history, I discovered that the element <button type="button" class="cf-tree-nav--sub-menu-trigger" aria-label="Show sub menu"></button> has no data-testid. With the word 'trigger' in the class name this is an obvious candidate element for automated testing paths. Furthermore this button is covering the anchor element which does have a data-testid attribute, but which does not now trigger the sub menu animation.

To Reproduce Steps to reproduce the behavior:

1. Open influxdata ui
2. Open developer tools console
3. Inspect the bell icon in the navbar
4. The button element contains no data-testid attribute

Expected behavior When writing automated tests, I expect to find data-testid attributes, especially in elements that are targets for user activity. Data-testids, which should not be liable to change, make automated tests more stable.

Currently rendered HTML

 <div class="cf-tree-nav--item">
    <a class="cf-tree-nav--item-block" data-testid="nav-item-alerting" href="/orgs/cb7b5103974a4f2d/alerting">
       <div class="cf-tree-nav--square">
          <span data-testid="icon" class="cf-icon bell"></span>
       </div>
       <div class="cf-tree-nav--label">Alerts</div>
    </a>
    <button type="button" class="cf-tree-nav--sub-menu-trigger" aria-label="Show sub menu"></button>
    <div class="cf-tree-nav--sub-menu" data-testid="tree-nav--sub-menu">
       <div id="alerting" class="cf-tree-nav--sub-item">
          <a class="cf-tree-nav--sub-item-label" data-testid="nav-subitem-alerting" href="/orgs/cb7b5103974a4f2d/alerting">Alerts</a>
       </div>
       <div id="history" class="cf-tree-nav--sub-item">
          <a class="cf-tree-nav--sub-item-label" data-testid="nav-subitem-history" href="/orgs/cb7b5103974a4f2d/alert-history">Alert History</a>
       </div>
    </div>
 </div>

Screenshots If applicable, add screenshots to help explain your problem.

Browser

• OS: Ubuntu 20.04
• Browser Chrome
• Version 95