Redesign enterprise tile

corehq/apps/enterprise/api/api.py

@@ -8,7 +8,7 @@
     ODataFeedResource,
     WebUserResource,
     SMSResource,
-    APIUsageResource,
+    APIKeysResource,
     TwoFactorAuthResource,
 )
 
@@ -20,5 +20,5 @@
 v1_api.register(ODataFeedResource())
 v1_api.register(CommCareVersionComplianceResource())
 v1_api.register(SMSResource())
-v1_api.register(APIUsageResource())
+v1_api.register(APIKeysResource())
 v1_api.register(TwoFactorAuthResource())

corehq/apps/enterprise/api/resources.py

@@ -440,15 +440,15 @@ def get_primary_keys(self):
         return ('mobile_worker', 'domain',)
 
 
-class APIUsageResource(ODataEnterpriseReportResource):
+class APIKeysResource(ODataEnterpriseReportResource):
     web_user = fields.CharField()
     api_key_name = fields.CharField()
     scope = fields.CharField()
     expiration_date = fields.DateTimeField()
     created_date = fields.DateTimeField()
     last_used_date = fields.DateTimeField()
 
-    REPORT_SLUG = EnterpriseReport.API_USAGE
+    REPORT_SLUG = EnterpriseReport.API_KEYS
 
     def dehydrate(self, bundle):
         bundle.data['web_user'] = bundle.obj[0]

corehq/apps/enterprise/enterprise.py

@@ -48,7 +48,7 @@ class EnterpriseReport(ABC):
     ODATA_FEEDS = 'odata_feeds'
     COMMCARE_VERSION_COMPLIANCE = 'commcare_version_compliance'
     SMS = 'sms'
-    API_USAGE = 'api_usage'
+    API_KEYS = 'api_keys'
     TWO_FACTOR_AUTH = '2fa'
 
     DATE_ROW_FORMAT = '%Y/%m/%d %H:%M:%S'
@@ -59,12 +59,11 @@ def title(self):
         pass
 
     @property
-    @abstractmethod
     def total_description(self):
         """
         To provide a description of the total number we displayed in tile
         """
-        pass
+        return ''
 
     def __init__(self, account, couch_user, **kwargs):
         self.account = account
@@ -97,7 +96,7 @@ def create(cls, slug, account_id, couch_user, **kwargs):
             report = EnterpriseCommCareVersionReport(account, couch_user, **kwargs)
         elif slug == cls.SMS:
             report = EnterpriseSMSReport(account, couch_user, **kwargs)
-        elif slug == cls.API_USAGE:
+        elif slug == cls.API_KEYS:
             report = EnterpriseAPIReport(account, couch_user, **kwargs)
         elif slug == cls.TWO_FACTOR_AUTH:
             report = Enterprise2FAReport(account, couch_user, **kwargs)
@@ -146,7 +145,6 @@ def total(self):
 class EnterpriseDomainReport(EnterpriseReport):
 
     title = gettext_lazy('Project Spaces')
-    total_description = gettext_lazy('# of Project Spaces')
 
     @property
     def headers(self):
@@ -171,7 +169,6 @@ def total_for_domain(self, domain_obj):
 class EnterpriseWebUserReport(EnterpriseReport):
 
     title = gettext_lazy('Web Users')
-    total_description = gettext_lazy('# of Web Users')
 
     @property
     def headers(self):
@@ -218,7 +215,6 @@ def total_for_domain(self, domain_obj):
 
 class EnterpriseMobileWorkerReport(EnterpriseReport):
     title = gettext_lazy('Mobile Workers')
-    total_description = gettext_lazy('# of Mobile Workers')
 
     @property
     def headers(self):
@@ -250,7 +246,6 @@ def total_for_domain(self, domain_obj):
 
 class EnterpriseFormReport(EnterpriseReport):
     title = gettext_lazy('Mobile Form Submissions')
-    total_description = gettext_lazy('# of Mobile Form Submissions')
 
     MAXIMUM_USERS_PER_DOMAIN = getattr(settings, 'ENTERPRISE_REPORT_DOMAIN_USER_LIMIT', 20_000)
     MAXIMUM_ROWS_PER_REQUEST = getattr(settings, 'ENTERPRISE_REPORT_ROW_LIMIT', 1_000_000)
@@ -359,7 +354,6 @@ def total_for_domain(self, domain_obj):
 
 class EnterpriseODataReport(EnterpriseReport):
     title = gettext_lazy('OData Feeds')
-    total_description = gettext_lazy('# of OData Feeds')
 
     MAXIMUM_EXPECTED_EXPORTS = 150
 
@@ -571,8 +565,7 @@ def rows_for_domain(self, domain_obj):
 
 
 class EnterpriseAPIReport(EnterpriseReport):
-    title = gettext_lazy('API Usage')
-    total_description = gettext_lazy('# of Active API Keys')
+    title = gettext_lazy('API Keys')
 
     @property
     def headers(self):

corehq/apps/enterprise/static/enterprise/js/project_dashboard.js

@@ -225,11 +225,13 @@ hqDefine("enterprise/js/project_dashboard", [
 
     function updateDisplayTotal($element, kwargs) {
         const $display = $element.find(".js-total");
+        const $helpTotal = $element.find(".help-total");
         const slug = $element.data("slug");
         const requestParams = {
             url: initialPageData.reverse("enterprise_dashboard_total", slug),
             success: function (data) {
                 $display.html(localizeNumberlikeString(data.total));
+                $helpTotal.removeClass("d-none");
             },
             error: function (request) {
                 if (request.responseJSON) {
@@ -238,10 +240,12 @@ hqDefine("enterprise/js/project_dashboard", [
                     alertUser.alert_user(gettext("Error updating display total, please try again or report an issue if this persists."), "danger");
                 }
                 $display.html(gettext("??"));
+                $helpTotal.addClass("d-none");
             },
             data: kwargs,
         };
         $display.html('<i class="fa fa-spin fa-spinner"></i>');
+        $helpTotal.addClass("d-none");
         $.ajax(requestParams);
     }
 

corehq/apps/enterprise/templates/enterprise/partials/project_tile.html

@@ -1,34 +1,52 @@
 {% load i18n %}
 
 <div
-  class="card text-center js-report-panel h-100" id="{{ report.slug }}"
+  class="card text-center js-report-panel h-100"
+  id="{{ report.slug }}"
   data-slug="{{ report.slug }}"
 >
   <div class="card-header">
     <h4 class="fs-5 pt-2">{{ report.title }}</h4>
   </div>
   <div class="card-body pb-1">
-    <div class="js-total fw-bold fs-1">
-      <i class="fa fa-spin fa-spinner"></i>
+    <div class="row justify-content-center">
+      <div class="col-auto align-items-center position-relative">
+        <div class="js-total fs-1">
+          <i class="fa fa-spin fa-spinner"></i>
+        </div>
+        {% if report.total_description %}
+          <div class="help-total position-absolute start-100 top-25 d-none">
+            <span
+              class="hq-help-template"
+              data-content="{{ report.total_description }}"
+              data-placement="right"
+            >
+            </span>
+          </div>
+        {% endif %}
+      </div>
     </div>
-    <div class="fs-5 ">{{ report.total_description }}</div>
   </div>
   <div class="card-footer bg-transparent border-0 pt-0">
     <div class="pb-2">
       {% if report.slug in uses_date_range %}
         <button
-          class="btn btn-link fs-6" id="{{ report.slug }}_dateRangeDisplay" type="button"
+          class="btn btn-link fs-6"
+          id="{{ report.slug }}_dateRangeDisplay"
+          type="button"
           data-bind="text: presetText"
           data-bs-toggle="modal"
           data-bs-target="#enterpriseFormsDaterange"
           data-sender="{{ report.slug }}"
-        >&nbsp;</button>
+        >
+          &nbsp;
+        </button>
       {% else %}
         <div class="form-control-plaintext fs-6">&nbsp;</div>
       {% endif %}
     </div>
     <div class="mb-4">
-      <button class="btn btn-primary btn-lg js-email-report">
+      <button class="btn btn-outline-primary btn-lg js-email-report">
         <i class="fa fa-envelope"></i>
         {% trans "Email Report" %}
       </button>

corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss

@@ -234,3 +234,11 @@ $pagination-padding-y-lg: 0.5rem;
 // Table loading indicator
 $table-loading-spinner-size: 150px;
 $table-loading-spinner-border-width: 20px;
+
+// Override bootstrap position values to include 25%
+$position-values: (
+  0: 0,
+  25: 25%,
+  50: 50%,
+  100: 100%,
+);

corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt

@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,127 +1,236 @@
+@@ -1,127 +1,244 @@
 -@import "@{b3-import-variables}";
 -
 -// Nunito Sans is used on dimagi.com and embedded in hqwebapp/base.html
@@ -344,3 +344,11 @@
 +// Table loading indicator
 +$table-loading-spinner-size: 150px;
 +$table-loading-spinner-border-width: 20px;
++
++// Override bootstrap position values to include 25%
++$position-values: (
++  0: 0,
++  25: 25%,
++  50: 50%,
++  100: 100%,
++);