Replace translate filter and retrieve tooltip text from strings file

awx/ui/client/lib/components/layout/_index.less

@@ -96,6 +96,8 @@
         .at-Layout-sideNavItem {
             display: flex;
             cursor: pointer;
+            text-transform: uppercase;
+
 
                 > i.fa {
                     padding-left: 20px;
@@ -132,7 +134,6 @@
                 justify-content: flex-start;
                 align-items: center;
                 padding-right: @at-padding-between-side-nav-icon-text;
-                text-transform: uppercase;
             }
 
             + .at-Layout-main {

awx/ui/client/lib/components/layout/side-nav-item.directive.js

@@ -5,9 +5,9 @@ function atSideNavItemLink (scope, element, attrs, ctrl) {
     scope.layoutVm = ctrl[1];
 }
 
-function AtSideNavItemController ($state, $scope) {
+function AtSideNavItemController ($state, $scope, strings) {
     let vm = this || {};
-    vm.popoverText = $scope.name.replace(/_/g,' ');
+
     $scope.$watch('layoutVm.currentState', function(current) {
         if ($scope.name === 'portal mode') {
             vm.isRoute = (current && current.indexOf('portalMode') === 0);
@@ -30,7 +30,7 @@ function AtSideNavItemController ($state, $scope) {
 
     vm.tooltip = {
         popover: {
-            text: vm.popoverText,
+            text: strings.get(`layout.${$scope.name}`),
             on: 'mouseenter',
             icon: $scope.iconClass,
             position: 'right',
@@ -39,7 +39,7 @@ function AtSideNavItemController ($state, $scope) {
     }
 }
 
-AtSideNavItemController.$inject = ['$state', '$scope'];
+AtSideNavItemController.$inject = ['$state', '$scope', 'ComponentsStrings'];
 
 function atSideNavItem () {
     return {