Make a prettier table to display OT&E check results

We now display the results of each check in addition to the overall result.

-------------
Created by MOE: https://github.com/google/moe
MOE_MIGRATED_REVID=231051913

java/google/registry/ui/css/admin-settings.css

@@ -56,3 +56,29 @@ div#tlds.editing .kd-errormessage {
   margin-left: 0.5em;
 }
 
+#ote-results-table {
+  margin-left: 0.5em;
+  margin-top: -5px;
+  border-top: 0;
+  padding-top: 0;
+}
+
+.ote-fulfilled {
+  background-color: #9df797;
+}
+
+.ote-semifulfilled {
+  background-color: #fcd18e;
+}
+
+.ote-unfulfilled {
+  background-color: #ffa9a9;
+}
+
+.ote-results-header {
+  height: 20px;
+}
+
+.ote-results-header-cell {
+  vertical-align: bottom;
+}

java/google/registry/ui/css/registrar_imports_raw.css

@@ -1,10 +1,11 @@
-@import 'kd_components.css';
-@import 'registry.css';
+@import 'admin-settings.css';
 @import 'console.css';
-@import 'forms.css';
-@import 'epp.css';
-@import 'dashboard.css';
-@import 'resources.css';
-@import 'security-settings.css';
 @import 'contact-settings.css';
 @import 'contact-us.css';
+@import 'dashboard.css';
+@import 'epp.css';
+@import 'forms.css';
+@import 'kd_components.css';
+@import 'registry.css';
+@import 'resources.css';
+@import 'security-settings.css';

java/google/registry/ui/externs/json.js

@@ -34,12 +34,25 @@ registry.json.ote = {};
 
 /**
  * @typedef {{
- *   clientId: string,
+ *   description: string,
+ *   requirement: number,
+ *   timesPerformed: number,
  *   completed: boolean
  * }}
  */
+registry.json.ote.OteStatusDetail;
+
+
+/**
+ * @typedef {{
+ *   clientId: string,
+ *   completed: boolean,
+ *   details: !Array.<registry.json.ote.OteStatusDetail>
+ * }}
+ */
 registry.json.ote.OteStatusResult;
 
+
 /**
  * @typedef {{
  *   status: string,

java/google/registry/ui/js/registrar/admin_settings.js

@@ -102,20 +102,17 @@ registry.registrar.AdminSettings.prototype.oteStatusCheck_ = function(
         /** @type {!registry.json.ote.OteStatusResponse} */
         (e.target.getResponseJson(
             registry.registrar.AdminSettings.PARSER_BREAKER_));
-    var message;
+    var oteResultParent = goog.dom.getRequiredElement('ote-status-area-parent');
     if (response.status === 'SUCCESS') {
       var results = response.results[0];
-      message = 'Passed: '.concat(results.completed);
+      goog.soy.renderElement(
+          oteResultParent, registry.soy.registrar.admin.oteResultsTable,
+          {completed: results.completed, detailsList: results.details});
     } else {
-      message = 'Error: '.concat(response.message);
+      goog.soy.renderElement(
+          oteResultParent, registry.soy.registrar.admin.oteErrorArea,
+          {message: response.message});
     }
-    var textParent = goog.dom.getRequiredElement('ote-status-area-parent');
-    if (!textParent.hasChildNodes()) {
-      var textElement = document.createElement('p');
-      textElement.id = 'ote-status-area';
-      textParent.appendChild(textElement);
-    }
-    textParent.firstElementChild.textContent = message;
   }, 'POST', goog.json.serialize({'clientId': clientId}), {
     'X-CSRF-Token': xsrfToken,
     'Content-Type': 'application/json; charset=UTF-8'

java/google/registry/ui/soy/registrar/AdminSettings.soy

@@ -17,6 +17,7 @@
 /** Registrar admin settings page for view and edit. */
 {template .settings}
   {@param allowedTlds: list<string>}
+  {@param type: string} // the registrar type, e.g. REAL, OTE, TEST, etc.
   <form name="item" class="{css('item')} {css('registrar')}">
     <h1>Administrator settings</h1>
     <table>
@@ -48,7 +49,9 @@
           <p>Generate new OT&amp;E accounts <a href="/registrar-ote-setup">here</a>
           </p></td>
       </tr>
-      {call .oteStatus /}
+      {call .oteStatus}
+        {param registrarType: $type /}
+      {/call}
     </table>
   </form>
 {/template}
@@ -67,15 +70,63 @@
 {/template}
 
 {template .oteStatus}
+  {@param registrarType: string}
   <tr class="{css('kd-settings-pane-section')}">
     <td class="{css('setting')}">
       <button
           type="button"
           id="btn-ote-status"
           value="Check OT&amp;E status"
-          class="{css('kd-button')} {css('kd-button-submit')}">Check OT&amp;E status
+          class="{css('kd-button')} {css('kd-button-submit')}
+          {if $registrarType != 'OTE'} {css('disabled')} {/if}">
+        Check OT&amp;E status
       </button>
     </td>
     <td id="ote-status-area-parent" class="{css('setting')}"></td>
   </tr>
 {/template}
+
+{template .oteResultsTable}
+  {@param completed: bool}
+  {@param detailsList: list<[description: string, timesPerformed: int, requirement: int, completed: bool]>}
+  <table id="ote-results-table">
+    {if $completed}
+      <tr class={css('ote-fulfilled')}>
+        <td>Status:</td>
+        <td>Completed</td>
+      </tr>
+    {else}
+      <tr class={css('ote-unfulfilled')}>
+        <td>Status:</td>
+        <td>Not Completed</td>
+      </tr>
+    {/if}
+    <tr class="{css('ote-results-header')}">
+      <th class="{css('ote-results-header-cell')}"><b>Test Name</b></th>
+      <th class="{css('ote-results-header-cell')}"><b>Actions Performed</b></th>
+    </tr>
+    {for $detail in $detailsList}
+      {if $detail.completed}
+        <tr class="{css('ote-fulfilled')}">
+          <td>{$detail.description}</td>
+          <td>Completed</td>
+        </tr>
+      {elseif $detail.timesPerformed > 0}
+        <tr class="{css('ote-semifulfilled')}">
+          <td>{$detail.description}</td>
+          <td>{$detail.timesPerformed} of {$detail.requirement}</td>
+        </tr>
+      {else}
+        <tr class="{css('ote-unfulfilled')}">
+          <td>{$detail.description}</td>
+          <td>Not started</td>
+        </tr>
+      {/if}
+    {/for}
+  </table>
+{/template}
+
+{template .oteErrorArea}
+  {@param message: string}
+  <p id="ote-status-area">Error: {$message}</p>
+{/template}