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

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
+        }
+      });
     }
   }
 });

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
+        }
+      });
     }
   }
 });

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>

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>

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}}