From 9dc6aa81cba89d298c8020fb8765aa80ae017b53 Mon Sep 17 00:00:00 2001
From: andres-portainer <91705312+andres-portainer@users.noreply.github.com>
Date: Mon, 1 Aug 2022 18:24:05 -0300
Subject: [PATCH] feat(ui): renovate the edge group creation page EE-3527
 (#7191)

---
 app/edge/components/group-form/groupForm.html | 33 ++++++++++++-------
 .../groupAssociationTable.html                |  2 +-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/app/edge/components/group-form/groupForm.html b/app/edge/components/group-form/groupForm.html
index 463945a82..052aa9f2a 100644
--- a/app/edge/components/group-form/groupForm.html
+++ b/app/edge/components/group-form/groupForm.html
@@ -1,28 +1,37 @@
 <form class="form-horizontal" name="EdgeGroupForm" ng-submit="$ctrl.formAction()">
   <div class="form-group">
-    <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left"> Name </label>
+    <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left required"> Name </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="group_name" name="group_name" ng-model="$ctrl.model.Name" required auto-focus data-cy="edgeGroupCreate-groupNameInput" />
+      <input
+        type="text"
+        class="form-control"
+        id="group_name"
+        name="group_name"
+        ng-model="$ctrl.model.Name"
+        required
+        auto-focus
+        data-cy="edgeGroupCreate-groupNameInput"
+        placeholder="e.g. mystack"
+      />
     </div>
   </div>
   <div class="form-group" ng-show="EdgeGroupForm.group_name.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="EdgeGroupForm.group_name.$error">
-        <p ng-message="required">
-          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-          This field is required.
+        <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>
       </div>
     </div>
   </div>
 
   <div class="col-sm-12 form-section-title"> Group type </div>
-  <div class="form-group col-sm-12">
+  <div class="col-sm-12 !px-0">
     <div class="boxselector_wrapper">
       <div class="boxselector">
         <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">
+          <div class="boxselector_header vertical-center">
             <pr-icon icon="'list'" feather="true"></pr-icon>
             Static
           </div>
@@ -32,8 +41,8 @@
       <div class="boxselector">
         <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">
-            <i class="fa fa-tags" aria-hidden="true" style="margin-right: 2px"></i>
+          <div class="boxselector_header vertical-center">
+            <pr-icon icon="'tag'" feather="true" className="'feather'"></pr-icon>
             Dynamic
           </div>
           <p>Automatically associate environments via tags</p>
@@ -74,7 +83,7 @@
         <div class="boxselector">
           <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">
+            <div class="boxselector_header vertical-center">
               <pr-icon icon="'tag'" feather="true"></pr-icon>
               Partial match
             </div>
@@ -84,8 +93,8 @@
         <div class="boxselector">
           <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">
-              <i class="fa fa-tag" aria-hidden="true" style="margin-right: 2px"></i>
+            <div class="boxselector_header vertical-center">
+              <pr-icon icon="'tag'" feather="true" className="'feather'"></pr-icon>
               Full match
             </div>
             <p>Associate any environment matching all of the selected tags</p>
diff --git a/app/portainer/components/group-association-table/groupAssociationTable.html b/app/portainer/components/group-association-table/groupAssociationTable.html
index f4a4f1e59..b5a3cb641 100644
--- a/app/portainer/components/group-association-table/groupAssociationTable.html
+++ b/app/portainer/components/group-association-table/groupAssociationTable.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <table class="table table-hover" data-cy="{{ $ctrl.cyValue }}">
     <div class="col-sm-12">
-      <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+      <span><pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon></span>
       <input
         type="text"
         class="searchInput"