mgr/dashboard: disable 'Add Capability' button in rgw user edi…

[alfonsomthd]

Disable 'Add Capability' button when rgw user alreasy has all capabilities added.

Fixes: https://tracker.ceph.com/issues/43564
Signed-off-by: Alfonso Martínez almartin@redhat.com

Checklist

• References tracker ticket
• Updates documentation if necessary
• Includes tests for new functionality or reproducer for bug

---

Show available Jenkins commands

• jenkins retest this please
• jenkins test crimson perf
• jenkins test signed
• jenkins test make check
• jenkins test make check arm64
• jenkins test submodules
• jenkins test dashboard
• jenkins test dashboard backend
• jenkins test docs
• jenkins render docs
• jenkins test ceph-volume all
• jenkins test ceph-volume tox

[votdev]

What about using a tooltip to display that all capabilities have been added?

--- src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html	(date 1578728569000)
+++ src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html	(date 1578923311873)
@@ -415,15 +415,14 @@
                   <button type="button"
                           class="btn btn-light float-right tc_addCapButton"
                           [disabled]="hasCapabilityButtonToBeDisabled()"
+                          i18n-tooltip
+                          tooltip="All capabilities are already added."
+                          [isDisabled]="!hasCapabilityButtonToBeDisabled()"
                           (click)="showCapabilityModal()">
                     <i [ngClass]="[icons.add]"></i>
                     <ng-container i18n>{{ actionLabels.ADD | titlecase }}
                       {{ capabilityLabel | upperFirst }}</ng-container>
                   </button>
-                  <ng-container *ngIf="hasCapabilityButtonToBeDisabled()"
-                                i18n>
-                    All capabilities are already added.
-                  </ng-container>
                 </div>
               </div>
               <span class="help-block"></span>

[alfonsomthd]

What about using a tooltip to display that all capabilities have been added?

I agree.

[tspmelo]

tooltip seems to not work in a disabled button, in Chrome.
https://getbootstrap.com/docs/4.4/components/tooltips/#disabled-elements

[alfonsomthd]

@tspmelo The issue here explained:
https://jakearchibald.com/2017/events-and-disabled-form-fields/
mouse events don't fire when the pointer is over disabled form elements, except in Firefox

As we are using ngx-bootstrap (not plain bootstrap) for tooltips,
it seems appropriate to me to keep tooltip in button and trigger the required events
(tested and it works):

triggers="pointerenter pointerleave"

[alfonsomthd]

jenkins test docs

[tspmelo]

its working now in chrome.

[callithea]

lgtm