[#409] Update UI for API keys (#416)

* [#409] Update UI for API keys * [#409] Bump apigee_edge requierement to 8.x-1.15 Co-authored-by: Arlina Espinoza <[email protected]>
apigee · Sep 8, 2020 · e610416 · e610416
1 parent ae22c6d
commit e610416
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 39 deletions.
diff --git a/composer.json b/composer.json
@@ -8,7 +8,7 @@
     "drupal/admin_toolbar": "^2.0",
     "drupal/adminimal_admin_toolbar": "^1.9",
     "drupal/apigee_api_catalog": "^2.2",
-    "drupal/apigee_edge": "^1.14",
+    "drupal/apigee_edge": "^1.15",
     "drupal/better_exposed_filters": "^5.0",
     "drupal/default_content": "^1.0@alpha",
     "drupal/email_registration": "^1.0@RC",

diff --git a/modules/custom/apigee_kickstart_enhancement/apigee_kickstart_enhancement.module b/modules/custom/apigee_kickstart_enhancement/apigee_kickstart_enhancement.module
@@ -23,7 +23,7 @@
  * Main module file for Apigee Kickstart Enhancement.
  */
 
-use Apigee\Edge\Api\Management\Entity\AppCredential;
+use Apigee\Edge\Api\Management\Entity\AppCredentialInterface;
 use Apigee\Edge\Structure\CredentialProduct;
 use Drupal\apigee_edge\Entity\AppInterface;
 use Drupal\apigee_edge\Entity\EdgeEntityViewBuilder;
@@ -280,47 +280,31 @@ function _apigee_kickstart_enhancement_check_app_warnings(AppInterface $app, Ent
   $warnings['expiredCred'] = FALSE;
 
   foreach ($app->getCredentials() as $credential) {
-    if ($credential->getStatus() === AppCredential::STATUS_REVOKED) {
-      $args = [
-        '@app' => mb_strtolower($entity_type->getSingularLabel()),
-      ];
-      if (count($app->getCredentials()) > 1) {
-        $warnings['revokedCred'] = t('One of the credentials associated with this @app is in revoked status.', $args);
-      }
-      else {
-        $warnings['revokedCred'] = t('The credential associated with this @app is in revoked status.', $args);
-      }
-      break;
-    }
-
     // Check for expired credentials.
     if (($expired_date = $credential->getExpiresAt()) && Drupal::time()->getRequestTime() - $expired_date->getTimestamp() > 0) {
       $warnings['expiredCred'] = t('At least one of the credentials associated with this @app is expired.', [
         '@app' => mb_strtolower($entity_type->getSingularLabel()),
       ]);
     }
 
-    foreach ($credential->getApiProducts() as $cred_product) {
-      if ($cred_product->getStatus() == CredentialProduct::STATUS_REVOKED || $cred_product->getStatus() == CredentialProduct::STATUS_PENDING) {
-        $args = [
-          '@app' => mb_strtolower($entity_type->getSingularLabel()),
-          '@api_product' => mb_strtolower(Drupal::entityTypeManager()
-            ->getDefinition('api_product')
-            ->getSingularLabel()),
-          '@status' => $cred_product->getStatus() == CredentialProduct::STATUS_REVOKED ? t('revoked') : t('pending'),
-        ];
-        if (count($app->getCredentials()) === 1) {
-          /** @var \Drupal\apigee_edge\Entity\ApiProductInterface $apiProduct */
-          $api_product = Drupal::entityTypeManager()
-            ->getStorage('api_product')
-            ->load($cred_product->getApiproduct());
-          $args['%name'] = $api_product->label();
-          $warnings['revokedOrPendingCredProduct'] = t('%name @api_product associated with this @app is in @status status.', $args);
-        }
-        else {
-          $warnings['revokedOrPendingCredProduct'] = t('At least one @api_product associated with one of the credentials of this @app is in @status status.', $args);
+    if ($credential->getStatus() === AppCredentialInterface::STATUS_APPROVED) {
+      foreach ($credential->getApiProducts() as $cred_product) {
+        if ($cred_product->getStatus() == CredentialProduct::STATUS_REVOKED || $cred_product->getStatus() == CredentialProduct::STATUS_PENDING) {
+          $args = [
+            '@app' => mb_strtolower($entity_type->getSingularLabel()),
+            '@api_product' => mb_strtolower(Drupal::entityTypeManager()->getDefinition('api_product')->getSingularLabel()),
+            '@status' => $cred_product->getStatus() == CredentialProduct::STATUS_REVOKED ? t('revoked') : t('pending'),
+          ];
+          if (count($app->getCredentials()) === 1) {
+            /** @var \Drupal\apigee_edge\Entity\ApiProductInterface $apiProduct */
+            $api_product = Drupal::entityTypeManager()->getStorage('api_product')->load($cred_product->getApiproduct());
+            $args['%name'] = $api_product->label();
+            $warnings['revokedOrPendingCredProduct'] = t('%name @api_product associated with this @app is in @status status.', $args);
+          } else {
+            $warnings['revokedOrPendingCredProduct'] = t('At least one @api_product associated with one of the credentials of this @app is in @status status.', $args);
+          }
+          break;
         }
-        break;
       }
     }
   }

diff --git a/themes/custom/apigee_kickstart/assets/css/apigee-kickstart.style.css b/themes/custom/apigee_kickstart/assets/css/apigee-kickstart.style.css
@@ -11667,6 +11667,13 @@ table.table-bordered tbody td {
   padding: 1rem;
 }
 
+.ui-widget.ui-dialog {
+  z-index: 9999;
+}
+.ui-widget.ui-dialog .ui-dialog-buttonset.form-actions {
+  display: flex;
+}
+
 html,
 body {
   height: 100%;
@@ -13034,6 +13041,16 @@ ul.social-links li a {
 .apigee-entity--app .card .card-body {
   padding: 0.5rem 0;
 }
+.apigee-entity--app__credentials + .apigee-entity--app__credentials {
+  margin-top: 1rem;
+}
+.apigee-entity--app__credentials .card-header {
+  display: flex;
+  align-items: center;
+}
+.apigee-entity--app__credentials .card-header .btn {
+  margin-left: auto;
+}
 .apigee-entity--app__credentials fieldset {
   padding-bottom: 0.5rem;
 }
@@ -13057,6 +13074,7 @@ ul.social-links li a {
 .apigee-entity--app__credentials fieldset .fieldset-wrapper > div.wrapper--secondary {
   padding-left: 1.2rem;
   padding-right: 1.2rem;
+  margin-top: 2rem;
 }
 .apigee-entity--app__credentials fieldset .fieldset-wrapper > div.wrapper--secondary label {
   padding: 0.8rem 0;
@@ -13077,6 +13095,16 @@ ul.social-links li a {
 .apigee-entity--app__credentials fieldset .fieldset-wrapper > div.wrapper--secondary .api-product-list-row .api-product-name {
   flex: 1;
 }
+.apigee-entity--app__credentials .app-credential {
+  position: relative;
+}
+.apigee-entity--app__credentials .app-credential .dropbutton-wrapper {
+  width: auto;
+  top: 0.5rem;
+}
+.apigee-entity--app__credentials .app-credential .dropbutton-wrapper.dropbutton-single a {
+  border-radius: 4px;
+}
 
 .apigee-entity--app--view-mode-full {
   margin-bottom: 5rem;

diff --git a/themes/custom/apigee_kickstart/includes/apigee.inc b/themes/custom/apigee_kickstart/includes/apigee.inc
@@ -71,6 +71,26 @@ function apigee_kickstart_preprocess_apigee_entity__app(array &$variables) {
       }
     }
   }
+
+
+  if (!empty($variables['content']['add_keys'])) {
+    /** @var \Drupal\Core\Url $url */
+    $url = $variables['content']['add_keys']['#url'];
+    $attributes = $url->getOption('attributes');
+
+    // Add button classes to add_keys link.
+    $attributes['class'] = array_merge($attributes['class'], ['btn', 'btn-primary', 'btn-sm']);
+
+    // Increase the height for the dialog.
+    $attributes['data-dialog-options'] = json_encode([
+      'width' => 500,
+      'height' => 450,
+      'draggable' => FALSE,
+      'autoResize' => FALSE,
+    ]);
+
+    $url->setOption('attributes', $attributes);
+  }
 }
 
 /**

diff --git a/themes/custom/apigee_kickstart/src/sass/apigee/_app.scss b/themes/custom/apigee_kickstart/src/sass/apigee/_app.scss
@@ -64,6 +64,19 @@
 
   &__credentials {
 
+    + .apigee-entity--app__credentials {
+      margin-top: 1rem;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+
+      .btn {
+        margin-left: auto;
+      }
+    }
+
     fieldset {
       padding-bottom: .5rem;
 
@@ -91,6 +104,7 @@
           &.wrapper--secondary {
             padding-left: 1.2rem;
             padding-right: 1.2rem;
+            margin-top: 2rem;
 
             label {
               padding: .8rem 0;
@@ -116,6 +130,22 @@
         }
       }
     }
+
+    .app-credential {
+      position: relative;
+
+      .dropbutton-wrapper {
+        width: auto;
+        top: .5rem;
+
+        &.dropbutton-single {
+
+          a {
+            border-radius: 4px;
+          }
+        }
+      }
+    }
   }
 }
 

diff --git a/themes/custom/apigee_kickstart/src/sass/base/_elements.scss b/themes/custom/apigee_kickstart/src/sass/base/_elements.scss
@@ -149,3 +149,11 @@ table.table-bordered {
     }
   }
 }
+
+.ui-widget.ui-dialog {
+  z-index: 9999;
+
+  .ui-dialog-buttonset.form-actions {
+    display: flex;
+  }
+}
diff --git a/...s/custom/apigee_kickstart/templates/apigee/apigee-entity--app--collapsible-card.html.twig b/...s/custom/apigee_kickstart/templates/apigee/apigee-entity--app--collapsible-card.html.twig
@@ -59,18 +59,25 @@
                     {{ "Details" }}
                   </h4>
                   <div class="card-body">
-                    {{ content|without('status', 'credentials', 'warnings') }}
+                    {{ content|without('status', 'credentials', 'warnings', 'add_keys') }}
                   </div>
                 </div>
 
                 <div class="card apigee-entity--app__credentials">
                   <h4 class="card-header bg-white">
                     {{ "Credentials"|t }}
+                    {{ content.add_keys }}
                   </h4>
                   <div class="card-body pb-0">
-                    {{ content.credentials }}
+                    {{ content.credentials.approved }}
                   </div>
                 </div>
+
+                {% if content.credentials.revoked %}
+                  <div class="apigee-entity--app__credentials">
+                    {{ content.credentials.revoked }}
+                  </div>
+                {% endif %}
               </div>
             </div>
           {% endif %}

diff --git a/themes/custom/apigee_kickstart/templates/apigee/apigee-entity--app.html.twig b/themes/custom/apigee_kickstart/templates/apigee/apigee-entity--app.html.twig
@@ -59,18 +59,25 @@
             {{ "Details" }}
           </h4>
           <div class="card-body">
-            {{ content|without('credentials', 'warnings') }}
+            {{ content|without('credentials', 'warnings', 'add_keys') }}
           </div>
         </div>
 
         <div class="card apigee-entity--app__credentials">
           <h4 class="card-header bg-white">
             {{ "Credentials"|t }}
+            {{ content.add_keys }}
           </h4>
           <div class="card-body pb-0">
-            {{ content.credentials }}
+            {{ content.credentials.approved }}
           </div>
         </div>
+
+        {% if content.credentials.revoked %}
+          <div class="apigee-entity--app__credentials">
+            {{ content.credentials.revoked }}
+          </div>
+        {% endif %}
       </div>
     {% endif %}
   </div>