From 441e265c32ee64f08890abe0044349702e9c02ab Mon Sep 17 00:00:00 2001
From: andres-portainer <91705312+andres-portainer@users.noreply.github.com>
Date: Thu, 4 Aug 2022 10:10:13 -0300
Subject: [PATCH] feat(ui): renovate the docker images edit page EE-3505
 (#7375)

---
 app/docker/views/images/edit/image.html | 99 ++++++++++++++-----------
 1 file changed, 56 insertions(+), 43 deletions(-)

diff --git a/app/docker/views/images/edit/image.html b/app/docker/views/images/edit/image.html
index 955630666..0f987a23c 100644
--- a/app/docker/views/images/edit/image.html
+++ b/app/docker/views/images/edit/image.html
@@ -9,18 +9,26 @@
           <div class="form-group">
             <div class="row">
               <div class="pull-left" ng-repeat="tag in image.RepoTags" style="display: table">
-                <div class="input-group col-md-1" style="padding: 0 15px">
-                  <span class="input-group-addon">{{ tag }}</span>
-                  <span class="input-group-btn" authorization="DockerImagePush, DockerImageCreate, DockerImageDelete">
-                    <a data-toggle="tooltip" class="btn btn-primary interactive" title="Push to registry" ng-click="pushTag(tag)" authorization="DockerImagePush">
-                      <span class="fa fa-upload white-icon" aria-hidden="true"></span>
-                    </a>
-                    <a data-toggle="tooltip" class="btn btn-primary interactive" title="Pull from registry" ng-click="pullTag(tag)" authorization="DockerImageCreate">
-                      <span class="fa fa-download white-icon" aria-hidden="true"></span>
-                    </a>
-                    <a data-toggle="tooltip" class="btn btn-primary interactive" title="Remove tag" ng-click="removeTag(tag)" authorization="DockerImageDelete">
-                      <span class="fa fa-trash-alt white-icon" aria-hidden="true"></span>
-                    </a>
+                <div class="input-group col-md-1 !pr-3.5 !pl-3.5">
+                  <span class="input-group-addon" style="border-right: 1px solid var(--border-input-group-addon-color); border-radius: 4px">{{ tag }}</span>
+                  <span class="input-group-btn" style="padding: 0px 5px">
+                    <span style="margin: 0px 5px" authorization="DockerImagePush">
+                      <a data-toggle="tooltip" class="btn btn-primary interactive" title="Push to registry" ng-click="pushTag(tag)">
+                        <pr-icon icon="'upload'" feather="true" class="text-white"></pr-icon>
+                      </a>
+                    </span>
+
+                    <span class="my-0 mx-1" authorization="DockerImageCreate">
+                      <a data-toggle="tooltip" class="btn btn-primary interactive" title="Pull from registry" ng-click="pullTag(tag)">
+                        <pr-icon icon="'download'" feather="true" class="text-white"></pr-icon>
+                      </a>
+                    </span>
+
+                    <span class="my-0 mx-1" authorization="DockerImageDelete">
+                      <a data-toggle="tooltip" class="btn btn-primary interactive" title="Remove tag" ng-click="removeTag(tag)">
+                        <pr-icon icon="'trash-2'" feather="true" class="text-white"></pr-icon>
+                      </a>
+                    </span>
                   </span>
                 </div>
               </div>
@@ -28,20 +36,19 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <span class="small text-muted">
-                Note: you can click on the upload icon <span class="fa fa-upload" aria-hidden="true"></span> to push an image or on the download icon
-                <span class="fa fa-download" aria-hidden="true"></span> to pull an image or on the trash icon <span class="fa fa-trash-alt" aria-hidden="true"></span> to delete a
-                tag.
+              <span class="small text-muted" authorization="DockerImageDelete">
+                Note: you can click on the upload icon <pr-icon icon="'upload'" feather="true"></pr-icon> to push an image or on the download icon
+                <pr-icon icon="'download'" feather="true"></pr-icon> to pull an image or on the trash icon <pr-icon icon="'trash-2'" feather="true"></pr-icon> to delete a tag.
               </span>
             </div>
             <div class="col-sm-12">
-              <span id="downloadResourceHint" class="createResource" style="display: none; margin-left: 0">
+              <span id="downloadResourceHint" class="createResource ml-0" style="display: none">
                 Download in progress...
-                <i class="fa fa-circle-notch fa-spin" aria-hidden="true" style="margin-left: 2px"></i>
+                <i class="fa fa-circle-notch fa-spin ml-0.5" aria-hidden="true"></i>
               </span>
-              <span id="uploadResourceHint" class="createResource" style="display: none; margin-left: 0">
+              <span id="uploadResourceHint" class="createResource ml-0.5" style="display: none">
                 Upload in progress...
-                <i class="fa fa-circle-notch fa-spin" aria-hidden="true" style="margin-left: 2px"></i>
+                <i class="fa fa-circle-notch fa-spin ml-0.5" aria-hidden="true"></i>
               </span>
             </div>
           </div>
@@ -97,9 +104,9 @@
               <td>ID</td>
               <td>
                 {{ image.Id }}
-                <button authorization="DockerImageDelete" class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"
-                  ><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this image</button
-                >
+                <button authorization="DockerImageDelete" class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)">
+                  <pr-icon icon="'trash-2'" feather="true"></pr-icon> Delete this image
+                </button>
                 <button
                   authorization="DockerImageGet"
                   class="btn btn-xs btn-primary"
@@ -107,7 +114,7 @@
                   button-spinner="$ctrl.exportInProgress"
                   ng-disabled="state.exportInProgress"
                 >
-                  <i class="fa fa-download space-right" aria-hidden="true"></i>
+                  <pr-icon icon="'download'" feather="true"></pr-icon>
                   <span ng-hide="state.exportInProgress">Export this image</span>
                   <span ng-show="state.exportInProgress">Export in progress...</span>
                 </button>
@@ -212,34 +219,40 @@
       <rd-widget-body classes="no-padding">
         <table id="image-layers" class="table">
           <thead>
-            <th style="white-space: nowrap">
-              <a ng-click="order('Order')">
-                Order
-                <span ng-show="sortType == 'Order' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                <span ng-show="sortType == 'Order' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-              </a>
+            <th class="whitespace-nowrap">
+              <table-column-header
+                col-title="'Order'"
+                can-sort="true"
+                is-sorted="$ctrl.state.orderBy === 'Order'"
+                is-sorted-desc="$ctrl.state.orderBy === 'Order' && $ctrl.state.reverseOrder"
+                ng-click="$ctrl.changeOrderBy('Order')"
+              ></table-column-header>
             </th>
             <th>
-              <a ng-click="order('Size')">
-                Size
-                <span ng-show="sortType == 'Size' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                <span ng-show="sortType == 'Size' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-              </a>
+              <table-column-header
+                col-title="'Size'"
+                can-sort="true"
+                is-sorted="$ctrl.state.orderBy === 'Size'"
+                is-sorted-desc="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"
+                ng-click="$ctrl.changeOrderBy('Size')"
+              ></table-column-header>
             </th>
             <th>
-              <a ng-click="order('CreatedBy')">
-                Layer
-                <span ng-show="sortType == 'CreatedBy' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                <span ng-show="sortType == 'CreatedBy' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-              </a>
+              <table-column-header
+                col-title="'Layer'"
+                can-sort="true"
+                is-sorted="$ctrl.state.orderBy === 'Layer'"
+                is-sorted-desc="$ctrl.state.orderBy === 'Layer' && $ctrl.state.reverseOrder"
+                ng-click="$ctrl.changeOrderBy('Layer')"
+              ></table-column-header>
             </th>
           </thead>
           <tbody>
             <tr ng-repeat="layer in history | orderBy:sortType:sortReverse">
-              <td style="white-space: nowrap">
+              <td class="whitespace-nowrap">
                 {{ layer.Order }}
               </td>
-              <td style="white-space: nowrap">
+              <td class="whitespace-nowrap">
                 {{ layer.Size | humansize }}
               </td>
               <td class="expand">
@@ -249,7 +262,7 @@
                   </span>
                   <span id="layer-command-{{ $index }}-short">
                     {{ layer.CreatedBy | imagelayercommand | truncate: 130 }}
-                    <span ng-if="layer.CreatedBy.length > 130" style="margin-left: 5px">
+                    <span ng-if="layer.CreatedBy.length > 130" class="ml-1">
                       <a id="layer-command-expander{{ $index }}" class="btn" ng-click="toggleLayerCommand($index)">
                         <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon>
                       </a>