From b28f635fb285e960c96ad80e6243d258118ef0e0 Mon Sep 17 00:00:00 2001
From: matias-portainer <104775949+matias-portainer@users.noreply.github.com>
Date: Tue, 2 Aug 2022 10:28:27 -0300
Subject: [PATCH] feat(ui): renovate the edge jobs edit page EE-3531 (#7192)

---
 .../edgeJobResultsDatatable.html               | 18 +++++++++---------
 app/edge/views/edge-jobs/edgeJob/edgeJob.html  | 11 +++++++----
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html b/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html
index 518354659..c7e52f7d3 100644
--- a/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html
+++ b/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html
@@ -2,14 +2,14 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i>
+        <div class="toolBarTitle vertical-center">
+          <span><pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon></span>
           {{ $ctrl.titleText }}
         </div>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
+        <div class="searchBar">
+          <span><pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon></span>
+          <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">
@@ -17,9 +17,9 @@
             <tr>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('Endpoint')">
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Endpoint' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Endpoint' && $ctrl.state.reverseOrder"></i>
                   Environment
+                  <span><pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Endpoint' && !$ctrl.state.reverseOrder"></pr-icon></span>
+                  <span><pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Endpoint' && $ctrl.state.reverseOrder"></pr-icon></span>
                 </a>
               </th>
               <th> Actions </th>
@@ -52,7 +52,7 @@
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
+              <span class="mr-1"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
                 <option value="0">All</option>
                 <option value="10">10</option>
diff --git a/app/edge/views/edge-jobs/edgeJob/edgeJob.html b/app/edge/views/edge-jobs/edgeJob/edgeJob.html
index 066f40372..2559ec4ca 100644
--- a/app/edge/views/edge-jobs/edgeJob/edgeJob.html
+++ b/app/edge/views/edge-jobs/edgeJob/edgeJob.html
@@ -6,7 +6,9 @@
       <rd-widget-body>
         <uib-tabset active="$ctrl.state.activeTab">
           <uib-tab index="0" select="$ctrl.showEditor()">
-            <uib-tab-heading> <i class="fa fa-wrench" aria-hidden="true"></i> Configuration </uib-tab-heading>
+            <uib-tab-heading>
+              <span><pr-icon icon="'tool'" feather="true"></pr-icon></span> Configuration
+            </uib-tab-heading>
 
             <edge-job-form
               ng-if="$ctrl.edgeJob && $ctrl.state.showEditorTab"
@@ -22,13 +24,14 @@
           </uib-tab>
 
           <uib-tab index="1">
-            <uib-tab-heading> <i class="fa fa-tasks" aria-hidden="true"></i> Results </uib-tab-heading>
+            <uib-tab-heading>
+              <span><pr-icon icon="'list'" feather="true"></pr-icon></span> Results
+            </uib-tab-heading>
 
             <edge-job-results-datatable
-              style="display: block; margin-top: 10px"
               ng-if="$ctrl.results"
               title-text="Results"
-              title-icon="fa-tasks"
+              title-icon="list"
               dataset="$ctrl.results"
               table-key="edge-job-results"
               order-by="Status"