UX: Help users understand the meaning of each scope. (#10468)

UX: Help users understand the meaning of each scope. (#10468)

diff --git a/app/assets/javascripts/admin/controllers/admin-api-keys-new.js b/app/assets/javascripts/admin/controllers/admin-api-keys-new.js
index bd9c446..f859022 100644
--- a/app/assets/javascripts/admin/controllers/admin-api-keys-new.js
+++ b/app/assets/javascripts/admin/controllers/admin-api-keys-new.js
@@ -3,6 +3,7 @@ import { isBlank } from "@ember/utils";
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import showModal from "discourse/lib/show-modal";
 
 export default Controller.extend({
   userModes: [
@@ -48,6 +49,15 @@ export default Controller.extend({
 
     continue() {
       this.transitionToRoute("adminApiKeys.show", this.model.id);
+    },
+
+    showURLs(urls) {
+      return showModal("admin-api-key-urls", {
+        admin: true,
+        model: {
+          urls
+        }
+      });
     }
   }
 });
diff --git a/app/assets/javascripts/admin/controllers/admin-api-keys-show.js b/app/assets/javascripts/admin/controllers/admin-api-keys-show.js
index 6927de8..b907e51 100644
--- a/app/assets/javascripts/admin/controllers/admin-api-keys-show.js
+++ b/app/assets/javascripts/admin/controllers/admin-api-keys-show.js
@@ -3,6 +3,7 @@ import Controller from "@ember/controller";
 import { isEmpty } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { empty } from "@ember/object/computed";
+import showModal from "discourse/lib/show-modal";
 
 export default Controller.extend(bufferedProperty("model"), {
   isNew: empty("model.id"),
@@ -51,6 +52,15 @@ export default Controller.extend(bufferedProperty("model"), {
 
     undoRevokeKey(key) {
       key.undoRevoke().catch(popupAjaxError);
+    },
+
+    showURLs(urls) {
+      return showModal("admin-api-key-urls", {
+        admin: true,
+        model: {
+          urls
+        }
+      });
     }
   }
 });
diff --git a/app/assets/javascripts/admin/templates/api-keys-new.hbs b/app/assets/javascripts/admin/templates/api-keys-new.hbs
index 2809541..59678c1 100644
--- a/app/assets/javascripts/admin/templates/api-keys-new.hbs
+++ b/app/assets/javascripts/admin/templates/api-keys-new.hbs
@@ -37,12 +37,15 @@
     {{/admin-form-row}}
 
     {{#unless useGlobalKey}}
+      <div class="scopes-title">{{i18n "admin.api.scopes.title"}}</div>
+      <p>{{i18n "admin.api.scopes.description"}}</p>
       {{#each-in scopes as |resource actions|}}
         <table class="scopes-table">
           <thead>
             <tr>
               <td><b>{{resource}}</b></td>
               <td></td>
+              <td>{{i18n "admin.api.scopes.allowed_urls"}}</td>
               <td>{{i18n "admin.api.scopes.optional_allowed_parameters"}}</td>
             </tr>
           </thead>
@@ -50,7 +53,15 @@
             {{#each actions as |act|}}
               <tr>
                 <td>{{input type="checkbox" checked=act.selected}}</td>
-                <td><b>{{act.name}}</b></td>
+                <td>
+                  <div class="scope-name">{{act.name}}</div>
+                  <span class="scope-tooltip" data-tooltip={{i18n (concat "admin.api.scopes.descriptions." resource "." act.key)}}>
+                    {{d-icon "question-circle"}}
+                  </span>
+                </td>
+                <td>
+                  {{d-button icon="link" action=(action "showURLs" act.urls) class="btn-info"}}
+                </td>
                 <td>
                   {{#each act.params as |p|}}
                     <div>
diff --git a/app/assets/javascripts/admin/templates/api-keys-show.hbs b/app/assets/javascripts/admin/templates/api-keys-show.hbs
index 2ffd5c4..4167716 100644
--- a/app/assets/javascripts/admin/templates/api-keys-show.hbs
+++ b/app/assets/javascripts/admin/templates/api-keys-show.hbs
@@ -81,14 +81,14 @@
   {{/admin-form-row}}
 
   {{#if model.api_key_scopes.length}}
-    {{#admin-form-row label="admin.api.scopes.title"}}
-    {{/admin-form-row}}
+    <div class="scopes-title">{{i18n "admin.api.scopes.title"}}</div>
 
     <table class="scopes-table">
       <thead>
         <tr>
           <td>{{i18n "admin.api.scopes.resource"}}</td>
           <td>{{i18n "admin.api.scopes.action"}}</td>
+          <td>{{i18n "admin.api.scopes.allowed_urls"}}</td>
           <td>{{i18n "admin.api.scopes.allowed_parameters"}}</td>
         </tr>
       </thead>
@@ -96,7 +96,17 @@
         {{#each model.api_key_scopes as |scope|}}
           <tr>
             <td>{{scope.resource}}</td>
-            <td>{{scope.action}}</td>
+            <td>
+              {{scope.action}}
+              <span
+                class="scope-tooltip"
+                data-tooltip={{i18n (concat "admin.api.scopes.descriptions." scope.resource "." scope.key)}}>
+                {{d-icon "question-circle"}}
+              </span>
+            </td>
+            <td>
+              {{d-button icon="link" action=(action "showURLs" scope.urls) class="btn-info"}}
+            </td>
             <td>
               {{#each scope.parameters as |p|}}
                 <div>
diff --git a/app/assets/javascripts/admin/templates/modal/admin-api-key-urls.hbs b/app/assets/javascripts/admin/templates/modal/admin-api-key-urls.hbs
new file mode 100644
index 0000000..f9a138f
--- /dev/null
+++ b/app/assets/javascripts/admin/templates/modal/admin-api-key-urls.hbs
@@ -0,0 +1,11 @@
+{{#d-modal-body title="admin.api.scopes.allowed_urls"}}
+  <div>
+    <ul>
+      {{#each model.urls as |url|}}
+        <li>
+          <code>{{url}}</code>
+        </li>
+      {{/each}}
+    </ul>
+  </div>
+{{/d-modal-body}}
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 3cfd1dc..2b42c0a 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -125,6 +125,20 @@ table.api-keys {
       text-align: left;
       width: 50%;
     }
+    .scopes-title {
+      font-size: $font-up-2;
+      font-weight: bold;
+      text-decoration: underline;
+      margin-top: 20px;
+    }
+    .scope-name {
+      font-weight: bold;
+      font-size: $font-0;
+      display: inline;
+    }
+    .scope-tooltip {
+      font-size: $font-down-1;
+    }
   }
   .scopes-table {
     margin: 20px 0 20px 0;
diff --git a/app/controllers/admin/api_controller.rb b/app/controllers/admin/api_controller.rb
index d2f8339..7712cc3 100644
--- a/app/controllers/admin/api_controller.rb
+++ b/app/controllers/admin/api_controller.rb
@@ -25,7 +25,15 @@ class Admin::ApiController < Admin::AdminController
   def scopes
     scopes = ApiKeyScope.scope_mappings.reduce({}) do |memo, (resource, actions)|
       memo.tap do |m|
-        m[resource] = actions.map { |k, v| { id: "#{resource}:#{k}", name: k, params: v[:params] } }
+        m[resource] = actions.map do |k, v|
+          {
+            id: "#{resource}:#{k}",
+            key: k,
+            name: k.to_s.gsub('_', ' '),
+            params: v[:params],
+            urls: v[:urls]
+          }
+        end
       end
     end
 
diff --git a/app/models/api_key_scope.rb b/app/models/api_key_scope.rb
index 66fecc5..0e45ff6 100644
--- a/app/models/api_key_scope.rb
+++ b/app/models/api_key_scope.rb
@@ -6,7 +6,7 @@ class ApiKeyScope < ActiveRecord::Base
 
   class << self
     def list_actions
-      actions = []
+      actions = %w[list#category_feed]
 
       TopTopic.periods.each do |p|
         actions.concat(["list#category_top_#{p}", "list#top_#{p}", "list#top_#{p}_feed"])
@@ -18,11 +18,20 @@ class ApiKeyScope < ActiveRecord::Base
     end
 
     def default_mappings
-      {
+      write_actions = %w[posts#create]
+      read_actions = %w[topics#show topics#feed]
+
+      @default_mappings ||= {
         topics: {
-          write: { actions: %w[posts#create topics#feed], params: %i[topic_id] },

[... diff too long, it was truncated ...]

GitHub sha: 390615fb

This commit appears in #10468 which was approved by eviltrout. It was merged by romanrizzi.