Adds sort, show/hide, and copy functionality to Variable pages (#13680)

* Sortable header added to variable page

* Showhide and copyable

ui/app/components/secure-variable-form/input-group.hbs

@@ -18,7 +18,7 @@
   >
     <FlightIcon
       @name={{if this.isObscured "eye-off" "eye"}}
-      @title={{if this.isObscured "Show Values" "Hide Values"}}
+      @title={{if this.isObscured "Show Value" "Hide Value"}}
     />
   </button>
 </label>

ui/app/controllers/variables/variable/index.js

@@ -1,5 +1,5 @@
 import Controller from '@ember/controller';
-import { action } from '@ember/object';
+import { set, action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import messageForError from '../../../utils/message-from-adapter-error';
 import { inject as service } from '@ember/service';
@@ -9,6 +9,15 @@ export default class VariablesVariableIndexController extends Controller {
   queryParams = ['view'];
 
   @service router;
+  queryParams = ['sortProperty', 'sortDescending'];
+
+  @tracked sortProperty = 'key';
+  @tracked sortDescending = true;
+
+  get sortedKeyValues() {
+    const sorted = this.model.keyValues.sortBy(this.sortProperty);
+    return this.sortDescending ? sorted : sorted.reverse();
+  }
 
   @tracked
   error = null;
@@ -62,7 +71,6 @@ export default class VariablesVariableIndexController extends Controller {
       this.view = 'table';
     }
   }
-
   //#endregion Code View
 
   get shouldShowLinkedEntities() {
@@ -72,4 +80,8 @@ export default class VariablesVariableIndexController extends Controller {
       this.model.pathLinkedEntities?.task
     );
   }
+
+  toggleRowVisibility(kv) {
+    set(kv, 'isVisible', !kv.isVisible);
+  }
 }

ui/app/styles/components/secure-variables.scss

@@ -132,6 +132,18 @@ table.path-tree {
   }
 }
 
+table.variable-items {
+  // table-layout: fixed;
+  td.value-cell {
+    width: 80%;
+    & > div {
+      display: grid;
+      grid-template-columns: auto auto 1fr;
+      gap: 0.5rem;
+    }
+  }
+}
+
 @keyframes slide-in {
   0% {
     top: 10px;

ui/app/templates/variables/variable/index.hbs

@@ -92,14 +92,39 @@
     </div>
   </div>
 {{else}}
-  <ListTable data-test-eval-table @source={{this.model.keyValues}} as |t|>
+  <ListTable class="variable-items" @source={{this.sortedKeyValues}} @sortProperty={{this.sortProperty}} @sortDescending={{this.sortDescending}} as |t|>
+    <t.head>
+      <t.sort-by @prop="key">Key</t.sort-by>
+      <t.sort-by @prop="value">Value</t.sort-by>
+    </t.head>
     <t.body as |row|>
       <tr data-test-var={{row.model.key}}>
         <td>
           {{row.model.key}}
         </td>
-        <td>
-          {{row.model.value}}
+        <td colspan="3" class="value-cell">
+          <div>
+            <CopyButton
+              @compact={{true}}
+              @clipboardText={{row.model.value}}
+            />
+            <button
+              class="show-hide-values button is-borderless is-compact"
+              type="button"
+              {{on "click" (action this.toggleRowVisibility row.model)}}
+            >
+              <FlightIcon
+                @name={{if row.model.isVisible "eye" "eye-off"}}
+                @title={{if row.model.isVisible "Hide Value" "Show Value"}}
+              />
+            </button>
+
+            {{#if row.model.isVisible}}
+              {{row.model.value}}
+            {{else}}
+              ********
+            {{/if}}
+          </div>
         </td>
       </tr>
     </t.body>