refactor(icons): replace fa icons [EE-4459] (#7907)

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html

@@ -2,10 +2,15 @@
   <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> {{ $ctrl.titleText }} </div>
+        <div class="toolBarTitle vertical-center">
+          <div class="widget-icon space-right">
+            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
+          </div>
+          {{ $ctrl.titleText }}
+        </div>
       </div>
       <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+        <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
         <input
           type="text"
           class="searchInput"
@@ -21,18 +26,22 @@
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Name'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Name')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('GroupName')">
-                  Group
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'GroupName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'GroupName' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Group'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'GroupName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'GroupName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('GroupName')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>

app/edge/components/edge-job-form/edgeJobForm.html

@@ -19,10 +19,10 @@
         <div class="small text-warning">
           <div ng-messages="edgeJobForm.edgejob_name.$error">
             <p ng-message="required" class="vertical-center">
-              <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
+              <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
             </p>
             <p ng-message="pattern" class="vertical-center">
-              <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> Allowed characters are: [a-zA-Z0-9_.-]
+              <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> Allowed characters are: [a-zA-Z0-9_.-]
             </p>
           </div>
         </div>
@@ -42,7 +42,7 @@
           <input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
           <label for="config_basic">
             <div class="boxselector_header vertical-center">
-              <pr-icon icon="'calendar'" feather="true"></pr-icon>
+              <pr-icon icon="'calendar'"></pr-icon>
               Basic configuration
             </div>
             <p>Select date from calendar</p>
@@ -52,7 +52,7 @@
           <input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
           <label for="config_advanced">
             <div class="boxselector_header vertical-center">
-              <pr-icon icon="'edit'" feather="true"></pr-icon>
+              <pr-icon icon="'edit'"></pr-icon>
               Advanced configuration
             </div>
             <p>Write your own cron rule</p>
@@ -82,7 +82,7 @@
           <div class="col-sm-12 small text-warning">
             <div ng-messages="edgeJobForm.datepicker.$error">
               <p ng-message="required" class="vertical-center">
-                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
+                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
               </p>
             </div>
           </div>
@@ -108,7 +108,7 @@
           <div class="col-sm-12 small text-warning">
             <div ng-messages="edgeJobForm.edgejob_value.$error">
               <p ng-message="required" class="vertical-center">
-                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
+                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
               </p>
             </div>
           </div>
@@ -137,10 +137,10 @@
           <div class="small text-warning">
             <div ng-messages="edgeJobForm.edgejob_cron.$error">
               <p ng-message="required" class="vertical-center">
-                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
+                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field is required.
               </p>
               <p ng-message="pattern" class="vertical-center">
-                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field format is invalid.
+                <span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon></span> This field format is invalid.
               </p>
             </div>
           </div>
@@ -161,7 +161,7 @@
             <input type="radio" id="method_editor" ng-model="$ctrl.formValues.method" value="editor" />
             <label for="method_editor">
               <div class="boxselector_header vertical-center">
-                <pr-icon icon="'edit'" feather="true"></pr-icon>
+                <pr-icon icon="'edit'"></pr-icon>
                 Web editor
               </div>
               <p>Use our Web editor</p>
@@ -171,7 +171,7 @@
             <input type="radio" id="method_upload" ng-model="$ctrl.formValues.method" value="upload" />
             <label for="method_upload">
               <div class="boxselector_header vertical-center">
-                <pr-icon icon="'upload'" feather="true"></pr-icon>
+                <pr-icon icon="'upload'"></pr-icon>
                 Upload
               </div>
               <p>Upload from your computer</p>
@@ -208,7 +208,7 @@
         <button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.model.File">Select file</button>
         <span class="space-left">
           {{ $ctrl.model.File.name }}
-          <span ng-if="!$ctrl.model.File"><pr-icon icon="'x'" class-name="'icon icon-danger'" feather="true"></pr-icon></span>
+          <span ng-if="!$ctrl.model.File"><pr-icon icon="'x'" class-name="'icon icon-danger'"></pr-icon></span>
         </span>
       </div>
     </div>

app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html

@@ -3,11 +3,11 @@
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
         <div class="toolBarTitle vertical-center">
-          <span><pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon></span>
+          <span><pr-icon icon="$ctrl.titleIcon"></pr-icon></span>
           {{ $ctrl.titleText }}
         </div>
         <div class="searchBar">
-          <span><pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon></span>
+          <span><pr-icon icon="'search'" 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>
@@ -18,8 +18,8 @@
               <th>
                 <a ng-click="$ctrl.changeOrderBy('Endpoint')">
                   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>
+                  <span><pr-icon icon="'arrow-down'" ng-if="$ctrl.state.orderBy === 'Endpoint' && !$ctrl.state.reverseOrder"></pr-icon></span>
+                  <span><pr-icon icon="'arrow-up'" ng-if="$ctrl.state.orderBy === 'Endpoint' && $ctrl.state.reverseOrder"></pr-icon></span>
                 </a>
               </th>
               <th> Actions </th>

app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html

@@ -2,16 +2,16 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle vertical-center"> <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon> {{ $ctrl.titleText }} </div>
+        <div class="toolBarTitle vertical-center"> <pr-icon icon="$ctrl.titleIcon"></pr-icon> {{ $ctrl.titleText }} </div>
         <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" feather="true" class-name="'icon'"></pr-icon>
+          <pr-icon icon="'search'" class-name="'icon'"></pr-icon>
           <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
         </div>
         <div class="actionBar">
           <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
-            <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
+            <pr-icon icon="'trash-2'"></pr-icon>Remove
           </button>
-          <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.jobs.new"> <pr-icon icon="'plus'" feather="true"></pr-icon>Add Edge job </button>
+          <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.jobs.new"> <pr-icon icon="'plus'"></pr-icon>Add Edge job </button>
         </div>
       </div>
       <div class="table-responsive">

app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html

@@ -2,9 +2,9 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle vertical-center"> <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon> {{ $ctrl.titleText }} </div>
+        <div class="toolBarTitle vertical-center"> <pr-icon icon="$ctrl.titleIcon"></pr-icon> {{ $ctrl.titleText }} </div>
         <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
+          <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
           <input
             type="text"
             class="searchInput"

app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html

@@ -2,9 +2,9 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle vertical-center"> <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon> Edge Stacks </div>
+        <div class="toolBarTitle vertical-center"> <pr-icon icon="$ctrl.titleIcon"></pr-icon> Edge Stacks </div>
         <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" feather="true" class-name="'icon'"></pr-icon>
+          <pr-icon icon="'search'" class-name="'icon'"></pr-icon>
           <input
             type="text"
             class="searchInput"
@@ -23,18 +23,16 @@
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
             data-cy="edgeStack-removeStackButton"
           >
-            <pr-icon icon="'trash-2'" feather="true"></pr-icon> Remove
-          </button>
-          <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.stacks.new" data-cy="edgeStack-addStackButton">
-            <pr-icon icon="'plus'" feather="true"></pr-icon> Add stack
+            <pr-icon icon="'trash-2'"></pr-icon> Remove
           </button>
+          <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.stacks.new" data-cy="edgeStack-addStackButton"> <pr-icon icon="'plus'"></pr-icon> Add stack </button>
         </div>
         <div class="settings !w-2.5" data-cy="edgeStack-stackTableSettings">
           <span class="setting mr-0" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
+            <span uib-dropdown-toggle><pr-icon icon="'more-vertical'"></pr-icon></span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
-                <div class="menuHeader"> <pr-icon icon="'settings'" feather="true"></pr-icon> Table settings </div>
+                <div class="menuHeader"> <pr-icon icon="'settings'"></pr-icon> Table settings </div>
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox">
@@ -57,7 +55,7 @@
                         <option value="300">5min</option>
                       </select>
                       <span class="inline-block w-3">
-                        <pr-icon id="refreshRateChange" icon="'check'" style="display: none" mode="'success'" feather="true"></pr-icon>
+                        <pr-icon id="refreshRateChange" icon="'check'" style="display: none" mode="'success'"></pr-icon>
                       </span>
                     </div>
                   </div>

app/edge/components/edit-edge-stack-form/editEdgeStackForm.html

@@ -9,7 +9,7 @@
   <div class="form-group" ng-if="!$ctrl.validateEndpointsForDeployment()">
     <div class="col-sm-12">
       <div class="small text-muted space-right text-warning">
-        <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i>
+        <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
         One or more of the selected Edge group contains Edge Docker endpoints that cannot be used with a Kubernetes Edge stack.
       </div>
     </div>
@@ -24,7 +24,7 @@
   <div class="form-group" ng-if="$ctrl.model.DeploymentType === 0 && $ctrl.hasKubeEndpoint()">
     <div class="col-sm-12">
       <div class="small text-muted space-right">
-        <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i>
+        <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
         Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that not all the
         Compose format options are supported by Kompose at the moment.
       </div>

app/edge/components/group-form/groupForm.html

@@ -16,9 +16,7 @@
       <div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="EdgeGroupForm.group_name.$error">
-            <p ng-message="required" class="vertical-center">
-              <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon> This field is required.
-            </p>
+            <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon> This field is required. </p>
           </div>
         </div>
       </div>
@@ -33,7 +31,7 @@
           <input type="radio" id="static-group" ng-model="$ctrl.model.Dynamic" ng-value="false" ng-checked="!$ctrl.model.Dynamic" />
           <label for="static-group">
             <div class="boxselector_header vertical-center">
-              <pr-icon icon="'list'" feather="true"></pr-icon>
+              <pr-icon icon="'list'"></pr-icon>
               Static
             </div>
             <p>Manually select Edge environments</p>
@@ -43,7 +41,7 @@
           <input type="radio" id="dynamic-group" ng-model="$ctrl.model.Dynamic" ng-value="true" ng-checked="$ctrl.model.Dynamic" />
           <label for="dynamic-group">
             <div class="boxselector_header vertical-center">
-              <pr-icon icon="'tag'" feather="true"></pr-icon>
+              <pr-icon icon="'tag'"></pr-icon>
               Dynamic
             </div>
             <p>Automatically associate environments via tags</p>
@@ -87,7 +85,7 @@
             <input type="radio" id="or-selector" ng-model="$ctrl.model.PartialMatch" ng-value="true" ng-checked="$ctrl.model.PartialMatch" />
             <label for="or-selector">
               <div class="boxselector_header vertical-center">
-                <pr-icon icon="'tag'" feather="true"></pr-icon>
+                <pr-icon icon="'tag'"></pr-icon>
                 Partial match
               </div>
               <p>Associate any environment matching at least one of the selected tags</p>
@@ -97,7 +95,7 @@
             <input type="radio" id="and-selector" ng-model="$ctrl.model.PartialMatch" ng-value="false" ng-checked="!$ctrl.model.PartialMatch" />
             <label for="and-selector">
               <div class="boxselector_header vertical-center">
-                <pr-icon icon="'tag'" feather="true"></pr-icon>
+                <pr-icon icon="'tag'"></pr-icon>
                 Full match
               </div>
               <p>Associate any environment matching all of the selected tags</p>

app/edge/components/groups-datatable/groupsDatatable.html

@@ -2,9 +2,9 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle vertical-center"> <pr-icon icon="'grid'" feather="true"></pr-icon> Edge Groups </div>
+        <div class="toolBarTitle vertical-center"> <pr-icon icon="'layout-grid'"></pr-icon> Edge Groups </div>
         <div class="searchBar vertical-center leading-none">
-          <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
+          <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
           <input
             type="text"
             class="searchInput"
@@ -23,10 +23,10 @@
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
             data-cy="edgeGroup-removeEdgeGroupButton"
           >
-            <pr-icon icon="'trash-2'" feather="true"></pr-icon> Remove
+            <pr-icon icon="'trash-2'"></pr-icon> Remove
           </button>
           <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.groups.new" data-cy="edgeGroup-addEdgeGroupButton">
-            <pr-icon icon="'plus'" feather="true"></pr-icon> Add Edge group
+            <pr-icon icon="'plus'"></pr-icon> Add Edge group
           </button>
         </div>
       </div>

app/edge/views/edge-groups/edgeGroupsView/edgeGroupsView.html

@@ -2,6 +2,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <edge-groups-datatable title-icon="fa-object-group" table-key="EdgeGroups" order-by="Name" dataset="$ctrl.items" remove-action="$ctrl.removeAction"></edge-groups-datatable>
+    <edge-groups-datatable title-icon="dice-4" table-key="EdgeGroups" order-by="Name" dataset="$ctrl.items" remove-action="$ctrl.removeAction"></edge-groups-datatable>
   </div>
 </div>

app/edge/views/edge-jobs/edgeJob/edgeJob.html

@@ -7,7 +7,7 @@
         <uib-tabset active="$ctrl.state.activeTab">
           <uib-tab index="0" select="$ctrl.showEditor()">
             <uib-tab-heading>
-              <span><pr-icon icon="'tool'" feather="true"></pr-icon></span> Configuration
+              <span><pr-icon icon="'wrench'"></pr-icon></span> Configuration
             </uib-tab-heading>
 
             <edge-job-form
@@ -25,7 +25,7 @@
 
           <uib-tab index="1">
             <uib-tab-heading>
-              <span><pr-icon icon="'list'" feather="true"></pr-icon></span> Results
+              <span><pr-icon icon="'list'"></pr-icon></span> Results
             </uib-tab-heading>
 
             <edge-job-results-datatable

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html

@@ -23,7 +23,7 @@
               <div class="help-block" ng-show="$ctrl.form.$invalid">
                 <div class="small text-warning">
                   <div ng-messages="$ctrl.form.$error">
-                    <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Name is required. </p>
+                    <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Name is required. </p>
                   </div>
                 </div>
               </div>
@@ -50,7 +50,7 @@
           <div class="form-group">
             <div class="col-sm-12">
               <div class="small text-muted space-right" ng-if="$ctrl.formValues.DeploymentType === 0 && $ctrl.hasKubeEndpoint()">
-                <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
+                <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
                 Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that not all
                 the Compose format options are supported by Kompose at the moment.
               </div>

app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackView.html

@@ -7,7 +7,7 @@
         <uib-tabset active="$ctrl.state.activeTab" justified="true" type="pills">
           <uib-tab index="0" classes="btn-sm">
             <uib-tab-heading>
-              <span><pr-icon icon="'layers'" feather="true"></pr-icon></span> Stack
+              <span><pr-icon icon="'layers'"></pr-icon></span> Stack
             </uib-tab-heading>
 
             <div style="padding: 20px">
@@ -22,7 +22,7 @@
           </uib-tab>
           <uib-tab index="1" classes="btn-sm">
             <uib-tab-heading>
-              <span><pr-icon icon="'hard-drive'" feather="true"></pr-icon></span> Environments
+              <span><pr-icon icon="'hard-drive'"></pr-icon></span> Environments
             </uib-tab-heading>
 
             <div style="margin-top: 25px">