Style and other fixes for API features

assets/javascripts/discourse/controllers/admin-wizards-api-show.js.es6

@@ -88,6 +88,11 @@ export default Controller.extend({
   twoLeggedOauth: equal("api.authType", "oauth_2"),
   threeLeggedOauth: equal("api.authType", "oauth_3"),
 
+  @discourseComputed("api.isNew")
+  nameClass(isNew) {
+    return isNew ? "new" : "saved";
+  },
+
   actions: {
     addParam() {
       this.get("api.authParams").pushObject({});

assets/javascripts/discourse/templates/admin-wizards-api-show.hbs

@@ -21,11 +21,11 @@
     {{/if}}
   </div>
 
-  <div class="wizard-header">
+  <div class="wizard-header large">
     {{#if api.isNew}}
       {{i18n "admin.wizard.api.new"}}
     {{else}}
-      {{api.title}}
+      <span>{{api.title}}</span>
     {{/if}}
   </div>
 
@@ -35,12 +35,12 @@
       {{input value=api.title placeholder=(i18n "admin.wizard.api.title_placeholder")}}
     </div>
 
-    <div class="name">
+    <div class="name {{nameClass}}">
       <label>{{i18n "admin.wizard.api.name"}}</label>
       {{#if api.isNew}}
         {{input value=api.name placeholder=(i18n "admin.wizard.api.name_placeholder")}}
       {{else}}
-        {{api.name}}
+        <span>{{api.name}}</span>
       {{/if}}
     </div>
   </div>
@@ -63,7 +63,7 @@
     {{/if}}
   </div>
 
-  <div class="wizard-header">
+  <div class="wizard-header medium">
     {{i18n "admin.wizard.api.auth.label"}}
   </div>
 </div>
@@ -71,7 +71,7 @@
 <div class="wizard-api-authentication">
   <div class="settings">
 
-    <div class="wizard-header medium">
+    <div class="wizard-header small">
       {{i18n "admin.wizard.api.auth.settings"}}
     </div>
 
@@ -174,7 +174,7 @@
         {{/if}}
       </div>
 
-      <div class="wizard-header medium">
+      <div class="wizard-header small">
         {{i18n "admin.wizard.api.status.label"}}
       </div>
 
@@ -220,7 +220,7 @@
   {{/if}}
 </div>
 
-<div class="wizard-header">
+<div class="wizard-header medium">
   {{i18n "admin.wizard.api.endpoint.label"}}
 </div>
 
@@ -277,11 +277,15 @@
   {{/if}}
 </div>
 
-<div class="wizard-header">
+<div class="wizard-header medium">
   {{i18n "admin.wizard.api.log.label"}}
-  {{d-button action=(action "clearLogs")
-             icon="trash-alt"
-             class="clear-logs"}}
+
+  <div class="controls">
+    {{d-button
+      action=(action "clearLogs")
+      class="clear-logs"
+      label="admin.wizard.api.log.clear"}}
+  </div>
 </div>
 
 <div class="wizard-api-log">
@@ -300,7 +304,7 @@
             <td>{{logentry.time}}</td>
             <td class="user-image">
               <div class="user-image-inner">
-                <a href={{logentry.userpath}} data-user-card={{logentry.username}}>{{avatar logentry imageSize="large"}}</a>
+                <a href={{logentry.userpath}} data-user-card={{logentry.username}}>{{avatar logentry imageSize="medium"}}</a>
               </div>
             </td>
             <td>{{logentry.status}}</td>

assets/stylesheets/admin/admin.scss

@@ -79,7 +79,8 @@ $error: #ef1700;
     }
   }
 
-  & + div {
+  & + div,
+  & + div + div {
     margin-top: 30px;
   }
 }
@@ -212,6 +213,7 @@ $error: #ef1700;
 
 .wizard-header {
   margin-bottom: 20px;
+  display: flex;
 
   &.large {
     font-size: 1.5em;
@@ -253,11 +255,12 @@ $error: #ef1700;
   }
 
   &.medium {
-    font-size: 1.3em;
+    font-size: 1.2em;
   }
 
   &.small {
     font-size: 1em;
+    font-weight: 700;
     margin-bottom: 5px;
   }
 
@@ -266,8 +269,9 @@ $error: #ef1700;
   }
 
   .controls {
+    font-size: 1rem;
+    display: flex;
     margin-left: auto;
-    margin-right: 0.5rem;
   }
 }
 

assets/stylesheets/admin/wizard/api.scss

@@ -40,9 +40,18 @@
     float: right;
   }
 
-  .wizard-header {
-    overflow: hidden;
-    font-size: 1.3em;
+  .metadata {
+    display: flex;
+
+    .title {
+      margin-right: 1em;
+    }
+
+    .name.saved span {
+      display: inline-block;
+      padding: 6px 12px;
+      background-color: var(--primary-low);
+    }
   }
 }
 
@@ -74,10 +83,6 @@
     width: 50%;
     max-width: 50%;
 
-    .wizard-header {
-      overflow: hidden;
-    }
-
     .authorization {
       float: right;
     }

config/locales/client.en.yml

@@ -447,6 +447,7 @@ en:
 
           log:
             label: "Logs"
+            clear: clear
 
         log:
           nav_label: "Logs"

lib/custom_wizard/api/log_entry.rb

@@ -27,7 +27,7 @@ class CustomWizard::Api::LogEntry
       log_id = new_data['log_id']
     else
       data = {}
-      log_id = SecureRandom.hex(3)
+      log_id = SecureRandom.hex(8)
     end
 
     new_data.each do |k, v|