Add tooltips exported/imported tabs

ui/packages/consul-ui/app/components/peerings/provider/index.js

@@ -5,6 +5,7 @@ import { Tab } from 'consul-ui/components/tab-nav';
 
 export default class PeeringsProvider extends Component {
   @service router;
+  @service intl;
 
   get data() {
     return {
@@ -17,15 +18,21 @@ export default class PeeringsProvider extends Component {
     const { router } = this;
     const owner = getOwner(this);
 
+    const { isReceiver, Name: name } = peer;
     let tabs = [
-      { label: 'Imported Services', route: 'dc.peers.edit.imported' },
+      {
+        label: 'Imported Services',
+        route: 'dc.peers.edit.imported',
+        tooltip: this.intl.t('routes.dc.peers.index.detail.imported.tab-tooltip', { name }),
+      },
       {
         label: 'Exported Services',
         route: 'dc.peers.edit.exported',
+        tooltip: this.intl.t('routes.dc.peers.index.detail.exported.tab-tooltip', { name }),
       },
     ];
 
-    if (peer.isReceiver) {
+    if (isReceiver) {
       tabs = [...tabs, { label: 'Addresses', route: 'dc.peers.edit.addresses' }];
     }
 

ui/packages/consul-ui/translations/routes/en-us.yaml

@@ -135,11 +135,15 @@ dc:
       detail:
         imported:
           count: |
-           {count} imported services
+            {count} imported services
           tooltip: The number of services imported from {name}
+          tab-tooltip: Services imported from {name}
         exported:
           count: |
-           {count} exported services
+            {count} exported services
+          tooltip: The number of services exported from {name}
+          tab-tooltip: Services exported from {name}
+        addresses:
           tooltip: The number of services exported from {name}
   partitions:
     index: