Add uib prefixes in accordance to migration guide

Migrate deprecated `angular-ui-bootstrap` usage to new `uib`-prefixed
versions. Most of the changes apply to dropdowns, modals and tooltips.

Also remove classes and aria attributes that are added during link phase
for dropdown directives.

Tested against latest ManageIQ Service UI and was not able to locate any
issues.

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Author: jjlangholtz

src/card/basic/card-filter.html

@@ -1,8 +1,8 @@
-<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" uib-dropdown-toggle class="btn btn-default">
   {{currentFilter.label}}
   <span class="caret"></span>
 </button>
-<ul class="dropdown-menu dropdown-menu-right" role="menu">
+<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
   <li ng-repeat="item in filter.filters" ng-class="{'selected': item === currentFilter}">
     <a role="menuitem" tabindex="-1" ng-click="filterCallBackFn(item)">
       {{item.label}}

src/card/basic/card.html

@@ -1,6 +1,6 @@
 <div ng-class="showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
   <div ng-if="showHeader()" ng-class="shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
-    <div ng-if="showFilterInHeader()" class="dropdown card-pf-time-frame-filter">
+    <div ng-if="showFilterInHeader()" uib-dropdown class="card-pf-time-frame-filter">
       <div ng-include="'card/basic/card-filter.html'"></div>
     </div>
     <h2 class="card-pf-title">{{headTitle}}</h2>
@@ -12,7 +12,7 @@ <h2 class="card-pf-title">{{headTitle}}</h2>
     <div ng-transclude></div>
   </div>
   <div ng-if="footer" class="card-pf-footer">
-    <div ng-if="showFilterInFooter()" class="dropdown card-pf-time-frame-filter">
+    <div ng-if="showFilterInFooter()" uib-dropdown class="card-pf-time-frame-filter">
       <div ng-include="'card/basic/card-filter.html'"></div>
     </div>
     <p>

src/charts/utilization-bar/utilization-bar-chart.html

@@ -4,13 +4,13 @@
     <div class="progress progress-label-top-right" ng-if="chartData.dataAvailable !== false">
       <div class="progress-bar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100" ng-class="{'animate': animate,
            'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
-           ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used" >
+           ng-style="{width:chartData.percentageUsed + '%'}" uib-tooltip="{{chartData.percentageUsed}}% Used" >
         <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
         <span ng-if="!chartFooter && (!footerLabelFormat || footerLabelFormat === 'actual')"><strong>{{chartData.used}} of {{chartData.total}} {{units}}</strong> Used</span>
         <span ng-if="!chartFooter && footerLabelFormat === 'percent'"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
       </div>
       <div class="progress-bar progress-bar-remaining"
-           ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
+           ng-style="{width:(100 - chartData.percentageUsed) + '%'}" uib-tooltip="{{100 - chartData.percentageUsed}}% Available">
       </div>
     </div>
   </span>
@@ -21,13 +21,13 @@
       <div class="progress" ng-if="chartData.dataAvailable !== false">
         <div class="progress-bar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100"
              ng-class="{'animate': animate, 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
-             ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used">
+             ng-style="{width:chartData.percentageUsed + '%'}" uib-tooltip="{{chartData.percentageUsed}}% Used">
           <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
           <span ng-if="(!chartFooter) && (!footerLabelFormat || footerLabelFormat === 'actual')" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.used}} {{units}}</strong> Used</span>
           <span ng-if="(!chartFooter) && footerLabelFormat === 'percent'" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
         </div>
         <div class="progress-bar progress-bar-remaining"
-             ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
+             ng-style="{width:(100 - chartData.percentageUsed) + '%'}" uib-tooltip="{{100 - chartData.percentageUsed}}% Available">
         </div>
       </div>
     </div>

src/filters/filter-fields.html

@@ -2,12 +2,12 @@
   <form>
     <div class="form-group toolbar-pf-filter">
       <div class="input-group">
-        <div dropdown class="input-group-btn">
-          <button dropdown-toggle type="button" class="btn btn-default dropdown-toggle filter-fields" aria-haspopup="true" aria-expanded="false" tooltip="Filter by" tooltip-placement="top">
+        <div uib-dropdown class="input-group-btn">
+          <button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
             {{currentField.title}}
             <span class="caret"></span>
           </button>
-          <ul class="dropdown-menu">
+          <ul uib-dropdown-menu>
             <li ng-repeat="item in config.fields">
               <a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
                 {{item.title}}

src/modals/about-modal.directive.js

@@ -78,32 +78,32 @@ angular.module('patternfly.modals')
     },
     templateUrl: 'modals/about-modal.html',
     transclude: true,
-    controller: ['$scope', '$modal', '$transclude', function ($scope, $modal, $transclude) {
+    controller: ['$scope', '$uibModal', '$transclude', function ($scope, $uibModal, $transclude) {
       if ($scope.isOpen === undefined) {
         $scope.isOpen = false;
       }
 
       // The ui-bootstrap modal only supports either template or templateUrl as a way to specify the content.
-      // When the content is retrieved, it is compiled and linked against the provided scope by the $modal service.
+      // When the content is retrieved, it is compiled and linked against the provided scope by the $uibModal service.
       // Unfortunately, there is no way to provide transclusion there.
       //
       // The solution below embeds a placeholder directive (i.e., pfAboutModalTransclude) to append the transcluded DOM.
       // The transcluded DOM is from a different location than the modal, so it needs to be handed over to the
       // placeholder directive. Thus, we're passing the actual DOM, not the parsed HTML.
       $scope.openModal = function () {
-        $modal.open({
-          controller: ['$scope', '$modalInstance', 'content', function ($scope, $modalInstance, content) {
+        $uibModal.open({
+          controller: ['$scope', '$uibModalInstance', 'content', function ($scope, $uibModalInstance, content) {
             $scope.template = content;
             $scope.close = function () {
-              $modalInstance.close();
+              $uibModalInstance.close();
             };
             $scope.$watch(
               function () {
                 return $scope.isOpen;
               },
               function (newValue) {
                 if (newValue === false) {
-                  $modalInstance.close();
+                  $uibModalInstance.close();
                 }
               }
             );

src/navigation/examples/vertical-navigation-basic.js

@@ -564,4 +564,4 @@
     });
   </file>
 </example>
-*/
+*/

src/navigation/examples/vertical-navigation-router.js

@@ -156,4 +156,4 @@
     });
   </file>
 </example>
-*/
+*/

src/navigation/vertical-navigation.html

@@ -38,10 +38,19 @@
                        'mobile-secondary-item-pf': item.isMobileItem && showMobileTertiary}"
             ng-mouseenter="handlePrimaryHover(item)" ng-mouseleave="handlePrimaryUnHover(item)">
           <a ng-click="handlePrimaryClick(item, $event)">
-            <span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: hiddenIcons}" tooltip-append-to-body="true" tooltip-enable="{{navCollapsed}}" tooltip-placement="bottom" tooltip="{{item.title}}" tooltip-class="nav-pf-vertical-tooltip"></span>
+            <span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: hiddenIcons}"
+              uib-tooltip="{{item.title}}"
+              tooltip-append-to-body="true"
+              tooltip-enable="{{navCollapsed}}"
+              tooltip-placement="bottom"
+              tooltip-class="nav-pf-vertical-tooltip">
+            </span>
             <span class="list-group-item-value">{{item.title}}</span>
             <div ng-if="showBadges && item.badges" class="badge-container-pf">
-              <div class="badge {{badge.badgeClass}}" ng-repeat="badge in item.badges" tooltip-append-to-body="true" tooltip-placement="right" tooltip="{{badge.tooltip}}">
+              <div class="badge {{badge.badgeClass}}" ng-repeat="badge in item.badges"
+                uib-tooltip="{{badge.tooltip}}"
+                tooltip-append-to-body="true"
+                tooltip-placement="right">
                 <span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>
                 <span ng-if="badge.count">{{badge.count}}</span>
               </div>
@@ -62,7 +71,10 @@
                 <a ng-click="handleSecondaryClick(item, secondaryItem, $event)">
                   <span class="list-group-item-value">{{secondaryItem.title}}</span>
                   <div ng-if="showBadges && secondaryItem.badges" class="badge-container-pf">
-                    <div class="badge {{badge.badgeClass}}" ng-repeat="badge in secondaryItem.badges" tooltip-append-to-body="true" tooltip-placement="right" tooltip="{{badge.tooltip}}">
+                    <div class="badge {{badge.badgeClass}}" ng-repeat="badge in secondaryItem.badges"
+                      uib-tooltip="{{badge.tooltip}}"
+                      tooltip-append-to-body="true"
+                      tooltip-placement="right">
                       <span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>
                       <span ng-if="badge.count">{{badge.count}}</span>
                     </div>
@@ -78,7 +90,10 @@
                       <a ng-click="handleTertiaryClick(item, secondaryItem, tertiaryItem, $event)">
                         <span class="list-group-item-value">{{tertiaryItem.title}}</span>
                         <div ng-if="showBadges && tertiaryItem.badges" class="badge-container-pf">
-                          <div class="badge {{badge.badgeClass}}" ng-repeat="badge in tertiaryItem.badges" tooltip-append-to-body="true" tooltip-placement="right" tooltip="{{badge.tooltip}}">
+                          <div class="badge {{badge.badgeClass}}" ng-repeat="badge in tertiaryItem.badges"
+                            uib-tooltip="{{badge.tooltip}}"
+                            tooltip-append-to-body="true"
+                            tooltip-placement="right">
                             <span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>
                             <span ng-if="badge.count">{{badge.count}}</span>
                           </div>

src/notification/toast-notification.html

@@ -1,10 +1,10 @@
 <div class="toast-pf alert alert-{{notificationType}}" ng-class="{'alert-dismissable': showCloseButton}"
      ng-mouseenter="handleEnter()" ng-mouseleave="handleLeave()">
-  <div class="dropdown pull-right dropdown-kebab-pf" ng-if="menuActions && menuActions.length > 0">
-    <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+  <div uib-dropdown class="pull-right dropdown-kebab-pf" ng-if="menuActions && menuActions.length > 0">
+    <button uib-dropdown-toggle class="btn btn-link" type="button" id="dropdownKebabRight">
       <span class="fa fa-ellipsis-v"></span>
     </button>
-    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <ul uib-dropdown-menu class="dropdown-menu-right" aria-labelledby="dropdownKebabRight">
       <li ng-repeat="menuAction in menuActions"
           role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"
           ng-class="{'divider': menuAction.isSeparator === true, 'disabled': menuAction.isDisabled === true}">

src/sort/sort.html

@@ -1,12 +1,12 @@
 <div class="sort-pf">
   <form>
     <div class="form-group">
-      <div class="dropdown btn-group">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <div uib-dropdown class="btn-group">
+        <button uib-dropdown-toggle type="button" class="btn btn-default">
           {{config.currentField.title}}
           <span class="caret"></span>
         </button>
-        <ul class="dropdown-menu">
+        <ul uib-dropdown-menu>
           <li ng-repeat="item in config.fields" ng-class="{'selected': item === config.currentField}">
             <a href="javascript:void(0);" class="sort-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
               {{item.title}}