@grafana/ui: Create Icon component and replace part of the icons (#23402)

* Part1: Unicons implementation (#23197)

* Create a new Icon component

* Update icons in main sidebar

* Update icons in Useful links and in react components on  main site

* Update icons in Useful links and in main top navigation

* Adjust sizing

* Update panel navigation and timepicker

* Update icons in Panel menu

* NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179)

* Update icons in add panel widget

* Resolve merge conflict

* Fix part of the test errors and type errors

* Fix storybook errors

* Update getAvailableIcons import in storybook knobs

* Fix import path

* Fix SyntaxError: Cannot use import statement outside a module in test environment error

* Remove dynamic imports

* Remove types as using @ts-ignore

* Update snapshot test

* Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax

* Remove color prop from icon, remove color implemetation in mono icons

* Update navbar styling

* Move toPascalCase to utils/string

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* Resolve type errors resulted from merge

* Part2: Unicons implementation (#23266)

* Create a new Icon component

* Update icons in main sidebar

* Update icons in Useful links and in react components on  main site

* Update icons in Useful links and in main top navigation

* Adjust sizing

* Update panel navigation and timepicker

* Update icons in Panel menu

* Update icons in add panel widget

* Resolve merge conflict

* Fix part of the test errors and type errors

* Fix storybook errors

* Update getAvailableIcons import in storybook knobs

* Fix import path

* Fix SyntaxError: Cannot use import statement outside a module in test environment error

* Remove dynamic imports

* Remove types as using @ts-ignore

* Update snapshot test

* Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax

* Implment icons in Tabs

* Implement icons in search items and  empty  list

* Update buttons

* Update button-related snapshot tests

* Update icons in modals and page headers

* Create anfular wrapper and update all icons on search screen

* Update sizing, remove colors, update snapshot tests

* Remove color prop from icon, remove color implemetation in mono icons

* Remove color props from monochrome icons

* Complete update of icons for search screen

* Update icons for infor tooltips, playlist, permissions

* Support temporarly font awesome icons used in enterprise grafana

* Part1: Unicons implementation (#23197)

* Create a new Icon component

* Update icons in main sidebar

* Update icons in Useful links and in react components on  main site

* Update icons in Useful links and in main top navigation

* Adjust sizing

* Update panel navigation and timepicker

* Update icons in Panel menu

* NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179)

* Update icons in add panel widget

* Resolve merge conflict

* Fix part of the test errors and type errors

* Fix storybook errors

* Update getAvailableIcons import in storybook knobs

* Fix import path

* Fix SyntaxError: Cannot use import statement outside a module in test environment error

* Remove dynamic imports

* Remove types as using @ts-ignore

* Update snapshot test

* Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax

* Remove color prop from icon, remove color implemetation in mono icons

* Update navbar styling

* Move toPascalCase to utils/string

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* Icons update

* Add optional chaining to for isFontAwesome variable

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* Part3:  Unicons implementation (#23356)

* Create a new Icon component

* Update icons in main sidebar

* Update icons in Useful links and in react components on  main site

* Update icons in Useful links and in main top navigation

* Adjust sizing

* Update panel navigation and timepicker

* Update icons in Panel menu

* Update icons in add panel widget

* Resolve merge conflict

* Fix part of the test errors and type errors

* Fix storybook errors

* Update getAvailableIcons import in storybook knobs

* Fix import path

* Fix SyntaxError: Cannot use import statement outside a module in test environment error

* Remove dynamic imports

* Remove types as using @ts-ignore

* Update snapshot test

* Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax

* Implment icons in Tabs

* Implement icons in search items and  empty  list

* Update buttons

* Update button-related snapshot tests

* Update icons in modals and page headers

* Create anfular wrapper and update all icons on search screen

* Update sizing, remove colors, update snapshot tests

* Remove color prop from icon, remove color implemetation in mono icons

* Remove color props from monochrome icons

* Complete update of icons for search screen

* Update icons for infor tooltips, playlist, permissions

* Support temporarly font awesome icons used in enterprise grafana

* Part1: Unicons implementation (#23197)

* Create a new Icon component

* Update icons in main sidebar

* Update icons in Useful links and in react components on  main site

* Update icons in Useful links and in main top navigation

* Adjust sizing

* Update panel navigation and timepicker

* Update icons in Panel menu

* NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179)

* Update icons in add panel widget

* Resolve merge conflict

* Fix part of the test errors and type errors

* Fix storybook errors

* Update getAvailableIcons import in storybook knobs

* Fix import path

* Fix SyntaxError: Cannot use import statement outside a module in test environment error

* Remove dynamic imports

* Remove types as using @ts-ignore

* Update snapshot test

* Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax

* Remove color prop from icon, remove color implemetation in mono icons

* Update navbar styling

* Move toPascalCase to utils/string

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* Update icons in Explore

* Update icons in alerting

* Update + and x buttons

* Update icons in configurations and settings

* Update close icons

* Update icons in rich history

* Update alert messages

* Add optional chaining to for isFontAwesome variable

* Remove icon mock, set up jest.config

* Fix navbar plus icon

* Fir enable-bacground to enableBackgournd

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* Merge remote branch origin master to icons-unicons

* Revert "Merge remote branch origin master to icons-unicons"

This reverts commit 3f25d50a39.

* Size-up dashnav icons

* Fix alerting icons, panel headers, update tests

* Fix typecheck error

* Adjustments - add panel icon, spacing

* Set TerserPlugin sourceMap to false to prevent running out of memory when publishing storybook

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/admin/partials/edit_org.html

@@ -1,46 +1,52 @@
 <page-header model="navModel"></page-header>
 
 <div class="page-container page-body">
-	<h3 class="page-sub-heading">Edit Organization</h3>
+  <h3 class="page-sub-heading">Edit Organization</h3>
 
-	<form name="orgDetailsForm" class="gf-form-group">
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Name</span>
-			<input type="text" required ng-model="org.name" class="gf-form-input max-width-14" >
-		</div>
+  <form name="orgDetailsForm" class="gf-form-group">
+    <div class="gf-form">
+      <span class="gf-form-label width-10">Name</span>
+      <input type="text" required ng-model="org.name" class="gf-form-input max-width-14" />
+    </div>
 
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
-		</div>
-	</form>
+    <div class="gf-form-button-row">
+      <button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
+    </div>
+  </form>
 
-	<h3 class="page-heading">Organization Users</h3>
+  <h3 class="page-heading">Organization Users</h3>
 
-	<table class="filter-table">
-		<tr>
-			<th>Username</th>
-			<th>Email</th>
-			<th>Role</th>
-			<th></th>
-		</tr>
-		<tr ng-repeat="orgUser in orgUsers">
-			<td>{{orgUser.login}}</td>
-			<td>{{orgUser.email}}</td>
-			<td>
+  <table class="filter-table">
+    <tr>
+      <th>Username</th>
+      <th>Email</th>
+      <th>Role</th>
+      <th></th>
+    </tr>
+    <tr ng-repeat="orgUser in orgUsers">
+      <td>{{orgUser.login}}</td>
+      <td>{{orgUser.email}}</td>
+      <td>
         <div class="gf-form">
           <span class="gf-form-select-wrapper">
-              <select type="text" ng-model="orgUser.role" class="gf-form-input max-width-8" ng-options="f for f in ['Viewer', 'Editor', 'Admin']" ng-change="updateOrgUser(orgUser)">
-              </select>
+            <select
+              type="text"
+              ng-model="orgUser.role"
+              class="gf-form-input max-width-8"
+              ng-options="f for f in ['Viewer', 'Editor', 'Admin']"
+              ng-change="updateOrgUser(orgUser)"
+            >
+            </select>
           </span>
         </div>
-			</td>
-			<td style="width: 1%">
-				<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-small">
-					<i class="fa fa-remove"></i>
-				</a>
-			</td>
-		</tr>
-	</table>
+      </td>
+      <td style="width: 1%">
+        <a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-small">
+          <icon name="'times'"></icon>
+        </a>
+      </td>
+    </tr>
+  </table>
 </div>
 
 <footer />

public/app/features/admin/partials/edit_user.html

@@ -108,7 +108,7 @@
         </td>
         <td style="width: 1%">
           <a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
-            <i class="fa fa-remove"></i>
+            <icon name="'times'"></icon>
           </a>
         </td>
       </tr>
@@ -138,7 +138,7 @@
             <td>{{session.browser}} on {{session.os}} {{session.osVersion}}</td>
             <td>
               <button class="btn btn-danger btn-small" ng-click="revokeUserSession(session.id)">
-                <i class="fa fa-power-off"></i>
+                <icon name="'power'" style="margin-top: -2px;"></icon>
               </button>
             </td>
           </tr>
@@ -152,7 +152,6 @@
     </div>
   </div>
 
-
   <h3 class="page-heading">User status</h3>
 
   <div class="gf-form-group">
@@ -177,7 +176,9 @@
       >
         Enable
       </button>
-      <button type="submit" class="btn btn-danger" ng-click="deleteUser(user)" ng-show="!createMode">Delete User</button>
+      <button type="submit" class="btn btn-danger" ng-click="deleteUser(user)" ng-show="!createMode">
+        Delete User
+      </button>
     </div>
   </div>
 </div>

public/app/features/admin/partials/orgs.html

@@ -30,7 +30,7 @@
         </td>
         <td class="text-right">
           <a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
-            <i class="fa fa-remove"></i>
+            <icon name="'times'" size="sm"></icon>
           </a>
         </td>
       </tr>