From 0f7a470138706b0c9d642bc9b084b20d6a98d7c5 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 4 Nov 2020 13:34:40 +0100
Subject: [PATCH] Icon: Replace font awesome icons where possible (#28757)

* Replace font awesome icons where possible

* Implement small updates
---
 docs/sources/explore/index.md                 |  2 +-
 .../grafana-ui/src/components/Input/Input.tsx |  4 +--
 .../LoadingPlaceholder/LoadingPlaceholder.tsx |  4 +--
 .../src/components/Select/SelectBase.tsx      |  3 ++-
 public/app/core/angular_wrappers.ts           |  3 ++-
 .../PermissionList/PermissionList.tsx         |  1 -
 public/app/features/admin/UserSyncInfo.tsx    |  4 +--
 .../app/features/admin/ldap/LdapSyncInfo.tsx  |  4 +--
 .../components/DashboardRow/DashboardRow.tsx  |  2 +-
 .../components/Inspector/InspectDataTab.tsx   |  4 +--
 .../components/ShareModal/ShareSnapshot.tsx   |  4 +--
 .../VersionHistory/HistoryListCtrl.ts         |  2 +-
 .../components/VersionHistory/template.html   |  9 ++++---
 .../dashboard/containers/DashboardPage.tsx    |  4 +--
 .../__snapshots__/DashboardPage.test.tsx.snap |  5 ++--
 public/app/features/explore/RunButton.tsx     |  2 +-
 .../app/features/explore/TimeSyncButton.tsx   | 26 ++-----------------
 .../pickers/shared/VariableOptions.tsx        |  2 +-
 .../cloudwatch/components/CloudWatchLink.tsx  |  3 ++-
 .../plugins/panel/annolist/AnnoListPanel.tsx  |  2 +-
 public/test/mocks/common.ts                   |  2 +-
 21 files changed, 37 insertions(+), 55 deletions(-)

diff --git a/docs/sources/explore/index.md b/docs/sources/explore/index.md
index 59c35daa1ec..982f10e485f 100644
--- a/docs/sources/explore/index.md
+++ b/docs/sources/explore/index.md
@@ -145,7 +145,7 @@ Suggestions can appear under the query field - click on them to update your quer
 
 ### Table filters
 
-Click on the filter button <span title="Filter for label" class="logs-label__icon fa fa-search-plus"></span> in a labels column in the Table panel to add filters to the query expression. This works with multiple queries too - the filter will be added for all the queries.
+Click on the filter button in the "label" column of a Table panel to add filters to the query expression. You can add filters for multiple queries as well - the filter is added for all the queries.
 
 ## Logs integration
 
diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index 8e94f06f5c6..3b01374215e 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -3,7 +3,7 @@ import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
 import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';
 import { stylesFactory, useTheme } from '../../themes';
-import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
 import { useClientRect } from '../../utils/useClientRect';
 
 export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'size'> {
@@ -249,7 +249,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
 
         {(suffix || loading) && (
           <div className={styles.suffix} ref={suffixRef}>
-            {loading && <Icon name="fa fa-spinner" className={cx('fa-spin', styles.loadingIndicator)} />}
+            {loading && <Spinner className={styles.loadingIndicator} inline={true} />}
             {suffix}
           </div>
         )}
diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
index 3194ff3ebb9..4f2db5cd539 100644
--- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
+++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
@@ -1,5 +1,5 @@
 import React, { SFC } from 'react';
-import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
 
 interface LoadingPlaceholderProps {
   text: string;
@@ -7,6 +7,6 @@ interface LoadingPlaceholderProps {
 
 export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
   <div className="gf-form-group">
-    {text} <Icon name="fa fa-spinner" className="fa-spin" />
+    {text} <Spinner inline={true} />
   </div>
 );
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 5a90fcf31cc..28547cee6ba 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -9,6 +9,7 @@ import { default as ReactAsyncSelect } from '@torkelo/react-select/async';
 import { default as AsyncCreatable } from '@torkelo/react-select/async-creatable';
 
 import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
 import { css, cx } from 'emotion';
 import resetSelectStyles from './resetSelectStyles';
 import { SelectMenu, SelectMenuOptions } from './SelectMenu';
@@ -294,7 +295,7 @@ export function SelectBase<T>({
             );
           },
           LoadingIndicator: (props: any) => {
-            return <Icon className="fa-spin" name="fa fa-spinner" />;
+            return <Spinner inline={true} />;
           },
           LoadingMessage: (props: any) => {
             return <div className={styles.loadingMessage}>{loadingMessage}</div>;
diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 013634a3abf..2a596be7cc4 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -14,6 +14,7 @@ import {
   DataSourceHttpSettings,
   GraphContextMenu,
   Icon,
+  Spinner,
   LegacyForms,
   SeriesColorPickerPopoverWithTheme,
   UnitPicker,
@@ -36,12 +37,12 @@ const { SecretFormField } = LegacyForms;
 export function registerAngularDirectives() {
   react2AngularDirective('footer', Footer, []);
   react2AngularDirective('icon', Icon, [
-    'color',
     'name',
     'size',
     'type',
     ['onClick', { watchDepth: 'reference', wrapApply: true }],
   ]);
+  react2AngularDirective('spinner', Spinner, ['inline']);
   react2AngularDirective('helpModal', HelpModal, []);
   react2AngularDirective('sidemenu', SideMenu, []);
   react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']);
diff --git a/public/app/core/components/PermissionList/PermissionList.tsx b/public/app/core/components/PermissionList/PermissionList.tsx
index 772baa0c274..043edc4bd27 100644
--- a/public/app/core/components/PermissionList/PermissionList.tsx
+++ b/public/app/core/components/PermissionList/PermissionList.tsx
@@ -24,7 +24,6 @@ class PermissionList extends PureComponent<Props> {
             item={{
               name: 'Admin',
               permission: 4,
-              icon: 'fa fa-fw fa-street-view',
             }}
           />
           {items.map((item, idx) => {
diff --git a/public/app/features/admin/UserSyncInfo.tsx b/public/app/features/admin/UserSyncInfo.tsx
index 5d76bf5c120..9e53df0b952 100644
--- a/public/app/features/admin/UserSyncInfo.tsx
+++ b/public/app/features/admin/UserSyncInfo.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { dateTimeFormat } from '@grafana/data';
 import { LdapUserSyncInfo } from 'app/types';
-import { Icon } from '@grafana/ui';
+import { Spinner } from '@grafana/ui';
 
 interface Props {
   disableSync: boolean;
@@ -45,7 +45,7 @@ export class UserSyncInfo extends PureComponent<Props, State> {
       <>
         <button className={`btn btn-secondary pull-right`} onClick={this.onSyncClick} disabled={isDisabled}>
           <span className="btn-title">Sync user</span>
-          {isSyncing && <Icon name="fa fa-spinner" className="fa-fw fa-spin run-icon" />}
+          {isSyncing && <Spinner inline={true} />}
         </button>
 
         <div className="clearfix" />
diff --git a/public/app/features/admin/ldap/LdapSyncInfo.tsx b/public/app/features/admin/ldap/LdapSyncInfo.tsx
index 39e256fcceb..aaef28e1288 100644
--- a/public/app/features/admin/ldap/LdapSyncInfo.tsx
+++ b/public/app/features/admin/ldap/LdapSyncInfo.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { dateTimeFormat } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Spinner } from '@grafana/ui';
 import { SyncInfo } from 'app/types';
 
 interface Props {
@@ -35,7 +35,7 @@ export class LdapSyncInfo extends PureComponent<Props, State> {
           LDAP Synchronisation
           <button className={`btn btn-secondary pull-right`} onClick={this.handleSyncClick} hidden={true}>
             <span className="btn-title">Bulk-sync now</span>
-            {isSyncing && <Icon name="fa fa-spinner" className="fa-fw fa-spin run-icon" />}
+            {isSyncing && <Spinner inline={true} />}
           </button>
         </h3>
         <div className="gf-form-group">
diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
index 1ed2f8254e3..7ec347d7415 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
@@ -53,7 +53,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
       title: 'Delete Row',
       text: 'Are you sure you want to remove this row and all its panels?',
       altActionText: 'Delete row only',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       onConfirm: () => {
         this.props.dashboard.removeRow(this.props.panel, true);
       },
diff --git a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
index 00278f62362..7156006f499 100644
--- a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
@@ -11,7 +11,7 @@ import {
   toCSV,
   transformDataFrame,
 } from '@grafana/data';
-import { Button, Container, Field, HorizontalGroup, Icon, Select, Switch, Table, VerticalGroup } from '@grafana/ui';
+import { Button, Container, Field, HorizontalGroup, Spinner, Select, Switch, Table, VerticalGroup } from '@grafana/ui';
 import { CSVConfig } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
@@ -261,7 +261,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
     if (isLoading) {
       return (
         <div>
-          Loading <Icon name="fa fa-spinner" className="fa-spin" size="lg" />
+          <Spinner inline={true} /> Loading
         </div>
       );
     }
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
index 282d0d3635e..d9a67e30b67 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Button, ClipboardButton, Icon, LegacyForms, LinkButton } from '@grafana/ui';
+import { Button, ClipboardButton, Icon, Spinner, LegacyForms, LinkButton } from '@grafana/ui';
 import { AppEvents, SelectableValue } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
@@ -306,7 +306,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
         <div className="share-modal-header">
           {isLoading ? (
             <div className="share-modal-big-icon">
-              <Icon name="fa fa-spinner" className="fa-spin" />
+              <Spinner inline={true} />
             </div>
           ) : (
             <Icon name="camera" className="share-modal-big-icon" size="xxl" />
diff --git a/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts b/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts
index e9b461f4edd..c459734014f 100644
--- a/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts
+++ b/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts
@@ -176,7 +176,7 @@ export class HistoryListCtrl {
       title: 'Restore version',
       text: '',
       text2: `Are you sure you want to restore the dashboard to version ${version}? All unsaved changes will be lost.`,
-      icon: 'fa-history',
+      icon: 'history',
       yesText: `Yes, restore to version ${version}`,
       onConfirm: this.restoreConfirm.bind(this, version),
     });
diff --git a/public/app/features/dashboard/components/VersionHistory/template.html b/public/app/features/dashboard/components/VersionHistory/template.html
index 768367787ef..ac42c42c890 100644
--- a/public/app/features/dashboard/components/VersionHistory/template.html
+++ b/public/app/features/dashboard/components/VersionHistory/template.html
@@ -10,7 +10,8 @@
 
 <div ng-if="ctrl.mode === 'list'">
   <div ng-if="ctrl.loading">
-    <icon name="'fa fa-spinner'" class="fa-spin"></icon>
+  <spinner inline="true" />
+  </spinner>
     <em>Fetching history list&hellip;</em>
   </div>
 
@@ -63,7 +64,8 @@
       </table>
 
       <div ng-if="ctrl.appending">
-        <icon name="'fa fa-spinner'" class="fa-spin"></icon>
+        <spinner inline="true" />
+        </spinner>
         <em>Fetching more entries&hellip;</em>
       </div>
 
@@ -97,7 +99,8 @@
 
 <div ng-if="ctrl.mode === 'compare'">
   <div ng-if="ctrl.loading">
-    <icon name="'fa fa-spinner'" class="fa-spin"></icon>
+    <spinner inline="true" />
+    </spinner>
     <em>Fetching changes&hellip;</em>
   </div>
 
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index f7bd7a0c62f..726a4761354 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -13,7 +13,7 @@ import { DashboardGrid } from '../dashgrid/DashboardGrid';
 import { DashNav } from '../components/DashNav';
 import { DashboardSettings } from '../components/DashboardSettings';
 import { PanelEditor } from '../components/PanelEditor/PanelEditor';
-import { Alert, Button, CustomScrollbar, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui';
+import { Alert, Button, CustomScrollbar, HorizontalGroup, Spinner, VerticalGroup } from '@grafana/ui';
 // Redux
 import { initDashboard } from '../state/initDashboard';
 import { notifyApp, updateLocation } from 'app/core/actions';
@@ -235,7 +235,7 @@ export class DashboardPage extends PureComponent<Props, State> {
         <div className="dashboard-loading__text">
           <VerticalGroup spacing="md">
             <HorizontalGroup align="center" justify="center" spacing="xs">
-              <Icon name="fa fa-spinner" className="fa-spin" /> {this.props.initPhase}
+              <Spinner inline={true} /> {this.props.initPhase}
             </HorizontalGroup>{' '}
             <HorizontalGroup align="center" justify="center">
               <Button variant="secondary" size="md" icon="repeat" onClick={this.cancelVariables}>
diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
index 46207e3a72a..e5871f79670 100644
--- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
+++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
@@ -332,9 +332,8 @@ exports[`DashboardPage Dashboard is fetching slowly Should render slow init stat
         justify="center"
         spacing="xs"
       >
-        <Icon
-          className="fa-spin"
-          name="fa fa-spinner"
+        <Component
+          inline={true}
         />
          
         Fetching
diff --git a/public/app/features/explore/RunButton.tsx b/public/app/features/explore/RunButton.tsx
index ab4f7634f6c..b70d2d09985 100644
--- a/public/app/features/explore/RunButton.tsx
+++ b/public/app/features/explore/RunButton.tsx
@@ -46,7 +46,7 @@ export function RunButton(props: Props) {
         'btn--radius-right-0': showDropdown,
       })}
       icon={loading ? 'fa fa-spinner' : 'sync'}
-      iconClassName={loading ? ' fa-spin run-icon' : undefined}
+      iconClassName={loading ? ' fa-spin' : undefined}
       aria-label={selectors.pages.Explore.General.runButton}
     />
   );
diff --git a/public/app/features/explore/TimeSyncButton.tsx b/public/app/features/explore/TimeSyncButton.tsx
index 86061fad1ff..88e63456942 100644
--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -1,26 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { css } from 'emotion';
-
-import { Tooltip, useTheme, stylesFactory, Icon } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
-
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    noRightBorderStyle: css`
-      label: noRightBorderStyle;
-      border-right: 0;
-    `,
-    /*
-     * Required top-padding, otherwise is fa-link icon in active state
-     * cut off on top due to fontAwesome icon position
-     */
-    topPadding: css`
-      label: topPadding;
-      padding-top: 1px;
-    `,
-  };
-});
+import { Tooltip, Icon } from '@grafana/ui';
 
 interface TimeSyncButtonProps {
   isSynced: boolean;
@@ -29,8 +9,6 @@ interface TimeSyncButtonProps {
 
 export function TimeSyncButton(props: TimeSyncButtonProps) {
   const { onClick, isSynced } = props;
-  const theme = useTheme();
-  const styles = getStyles(theme);
 
   const syncTimesTooltip = () => {
     const { isSynced } = props;
@@ -47,7 +25,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
         aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
         onClick={() => onClick()}
       >
-        <Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} size="lg" />
+        <Icon name="link" className={isSynced ? 'icon-brand-gradient' : ''} size="lg" />
       </button>
     </Tooltip>
   );
diff --git a/public/app/features/variables/pickers/shared/VariableOptions.tsx b/public/app/features/variables/pickers/shared/VariableOptions.tsx
index 4c601148b13..3171ab5d1a5 100644
--- a/public/app/features/variables/pickers/shared/VariableOptions.tsx
+++ b/public/app/features/variables/pickers/shared/VariableOptions.tsx
@@ -78,7 +78,7 @@ export class VariableOptions extends PureComponent<Props> {
         className={`${tag.selected ? 'variable-option-tag pointer selected' : 'variable-option-tag pointer'}`}
         onClick={this.onToggleTag(tag)}
       >
-        <span className="fa fa-fw variable-option-icon"></span>
+        <span className="variable-option-icon"></span>
         <span className="label-tag" style={{ backgroundColor: color, borderColor }}>
           {tag.text}&nbsp;&nbsp;
           <Icon name="tag-alt" />
diff --git a/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx b/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx
index 20afa8f0ac5..768e7c806cb 100644
--- a/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 
 import { CloudWatchLogsQuery } from '../types';
 import { PanelData } from '@grafana/data';
+import { Icon } from '@grafana/ui';
 import { encodeUrl, AwsUrl } from '../aws_url';
 import { CloudWatchDatasource } from '../datasource';
 
@@ -58,7 +59,7 @@ export default class CloudWatchLink extends Component<Props, State> {
     const { href } = this.state;
     return (
       <a href={href} target="_blank" rel="noopener">
-        <i className="fa fa-share-square-o" /> CloudWatch Logs Insights
+        <Icon name="share-alt" /> CloudWatch Logs Insights
       </a>
     );
   }
diff --git a/public/app/plugins/panel/annolist/AnnoListPanel.tsx b/public/app/plugins/panel/annolist/AnnoListPanel.tsx
index 63342c6b4aa..631b4295610 100644
--- a/public/app/plugins/panel/annolist/AnnoListPanel.tsx
+++ b/public/app/plugins/panel/annolist/AnnoListPanel.tsx
@@ -266,7 +266,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
     // Previously we showed inidication that it covered all time
     // { timeInfo && (
     //   <span className="panel-time-info">
-    //     <i className="fa fa-clock-o" /> {timeInfo}
+    //     <Icon name="clock-nine" /> {timeInfo}
     //   </span>
     // )}
 
diff --git a/public/test/mocks/common.ts b/public/test/mocks/common.ts
index a660ea11b08..9eee9d09d3e 100644
--- a/public/test/mocks/common.ts
+++ b/public/test/mocks/common.ts
@@ -24,7 +24,7 @@ export function createNavModel(title: string, ...tabs: string[]): NavModel {
   const node: NavModelItem = {
     id: title,
     text: title,
-    icon: 'fa fa-fw fa-warning',
+    icon: 'exclamation-triangle',
     subTitle: 'subTitle',
     url: title,
     children: [],