Merge pull request #3883 from 3scale/fix_app_user_key_card

🦋🐛 Fix API Credentials card for backend v1
3scale · Oct 7, 2024 · c0ec886 · c0ec886
2 parents 9b59db2 + edd5537
commit c0ec886
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 75 deletions.
diff --git a/app/javascript/packs/applications_show.scss b/app/javascript/packs/applications_show.scss
@@ -1,2 +1,3 @@
 @import '~@patternfly/patternfly/layouts/Grid/grid.css';
 @import '~@patternfly/patternfly/components/DescriptionList/description-list.css';
+@import '~@patternfly/patternfly/components/Table/table.css';
diff --git a/app/views/buyers/applications/_api_credentials.html.erb b/app/views/buyers/applications/_api_credentials.html.erb
diff --git a/app/views/provider/admin/applications/show.html.slim b/app/views/provider/admin/applications/show.html.slim
@@ -24,8 +24,7 @@ div class="pf-l-grid pf-m-gutter pf-m-all-6-col"
       div class="pf-l-flex__item" id="application_keys" data-object="cinstance" data-url=(provider_admin_application_path(@cinstance, format: :json))
         div class="pf-c-card"
           div class="pf-c-card__title" API Credentials
-          div class="pf-c-card__body"
-            = render partial: 'provider/admin/keys/widget', locals: { cinstance: @cinstance }
+          = render partial: 'provider/admin/keys/widget', locals: { cinstance: @cinstance }
 
       - if @cinstance.service.referrer_filters_required?
         div class="pf-l-flex__item"

diff --git a/app/views/provider/admin/keys/_widget.html.erb b/app/views/provider/admin/keys/_widget.html.erb
@@ -1,29 +1,101 @@
-  <table id="keys" class="list">
-    <%= render :partial => 'buyers/applications/api_credentials',
-               :locals => {:cinstance => cinstance, :regenerate => true } %>
-  </table>
+<% if cinstance.backend_version.v2? %>
+  <div class="pf-c-card__body">
+    <table id="keys" class="list">
+      <tr>
+        <th>Application ID</th>
+        <td><%= cinstance.application_id %></td>
+      </tr>
+      <%= render partial: 'provider/admin/keys/key', collection: cinstance.application_keys,
+                                                     locals: { cinstance: cinstance } %>
+    </table>
+  </div>
 
-  <% if cinstance.backend_version.v2? && cinstance.backend_version.app_keys_allowed? %>
+  <% if cinstance.backend_version.app_keys_allowed? %>
+    <%- can_add_keys = cinstance.application_keys.can_add? %>
     <table class="list">
       <tr>
-        <td colspan="2" id="app-keys-operations" <%= "style=display:none;" unless cinstance.application_keys.can_add? %>>
+        <td colspan="2" id="app-keys-operations" <%= "style=display:none;" unless can_add_keys %>>
           <% if cinstance.custom_keys_enabled? %>
             <%= link_to 'Add Custom key', new_provider_admin_application_key_path(cinstance),
                                           class: 'fancybox action add',
                                           'data-autodimensions' => 'true',
                                           title: 'Add Custom key' %>
-          <% end -%>
+          <% end %>
           <%= link_to 'Add Random key', provider_admin_application_keys_path(cinstance),
-                              :method  => :post,
-                              :remote  => true,
-                              :class   => 'create_key add action' %>
+                                        method: :post,
+                                        remote: true,
+                                        class: 'create_key add action' %>
         </td>
 
-        <% if cinstance.backend_version.v2? %>
-          <td colspan="2" id="app-keys-limit-warning" <%= "style=display:none;" if cinstance.application_keys.can_add? %>;'>
-            Keys limit reached.
-          </td>
-        <% end %>
+        <td colspan="2" id="app-keys-limit-warning" <%= "style=display:none;" if can_add_keys %>>
+          Keys limit reached.
+        </td>
       </tr>
     </table>
   <% end %>
+
+<% elsif cinstance.backend_version.oauth? %>
+  <%- keys = cinstance.keys %>
+  <div class="pf-c-card__body">
+    <table id="keys" class="list">
+      <tr>
+        <th>Client ID</th>
+        <td><%= cinstance.application_id %></td>
+      </tr>
+
+      <tr>
+        <th>Client Secret</th>
+        <td>
+          <span class="key" id="oauth_secret"><%= keys.first %></span>
+          <% if keys.empty? %>
+            <%= fancy_link_to 'Add Random key', provider_admin_application_keys_path(cinstance),
+                                                method: :post,
+                                                remote: true,
+                                                class: 'create_key',
+                                                id: 'regenerate-oauth-key' %>
+          <% else %>
+            <%= fancy_link_to 'Regenerate', regenerate_provider_admin_application_key_path(application_id: cinstance.id, id: keys.first),
+                                            method: :put,
+                                            class: 'delete refresh',
+                                            remote: true,
+                                            id: 'regenerate-oauth-key' %>
+          <% end %>
+        </td>
+      </tr>
+
+      <tr>
+        <th>Redirect URL</th>
+        <td>
+          <span class="key"><%= cinstance.redirect_url %></span>
+          <%= link_to 'Edit', edit_redirect_url_provider_admin_application_path(cinstance),
+                              class: 'fancybox action edit',
+                              'data-autodimensions': 'true' %>
+        </td>
+      </tr>
+    </table>
+  </div>
+
+<% else %>
+  <table id="keys" class="pf-c-table pf-m-no-border-rows">
+    <%- user_key = cinstance.user_key %>
+      <td class="pf-m-fit-content">
+        <%= user_key_label(cinstance) %>
+      </td>
+      <td class="pf-m-truncate pf-m-width-max">
+        <span id="cinstance-user-key" title=<%= user_key %>><%= user_key %></span>
+      </td>
+      <td class="pf-m-fit-content">
+        <% if cinstance.custom_keys_enabled? %>
+          <%= link_to '', edit_provider_admin_application_key_path(cinstance, user_key),
+                          class: 'fancybox action edit',
+                          'data-autodimensions' => 'true',
+                          title: "Set a custom User Key" %>
+        <% end %>
+        <%= link_to 'Regenerate', change_user_key_provider_admin_application_path(cinstance),
+                                  method: :put,
+                                  data: { confirm: "Are you sure?" },
+                                  class: 'action refresh' %>
+      </td>
+    </tr>
+  </table>
+<% end %>
diff --git a/app/views/provider/admin/keys/update.js.erb b/app/views/provider/admin/keys/update.js.erb
@@ -1,14 +1,18 @@
   <% if @error.nil? %>
     $.colorbox.close();
-    document.getElementById('cinstance-user-key').innerHTML = '<%= @cinstance.user_key %>'
+    const userKey = document.getElementById('cinstance-user-key')
+    userKey.innerHTML = '<%= @cinstance.user_key %>'
+    userKey.title = '<%= @cinstance.user_key %>'
+
     $.flash.notice('<%= @notice %>')
   <% else %>
     const input = document.getElementById('cinstance_user_key')
+    const constrol = input.closest('.pf-c-form__group-control')
 
     <%# HACK: Remove helperText and add it again, since replacing the text also removes the icon. %>
-    input.closest('.pf-c-form__group-control').children[1].remove()
+    constrol.children[1].remove()
+    constrol.insertAdjacentHTML('afterend', '<%= j render partial: "shared/pf_error_helper_text", locals: { error: @error } %>')
 
-    input.insertAdjacentHTML('afterend', '<%= j render partial: "shared/pf_error_helper_text", locals: { error: @error } %>')
     input.setAttribute('aria-invalid', 'true')
 
     $.colorbox.resize();