Icon: Replace font awesome icons where possible (#28757)

* Replace font awesome icons where possible

* Implement small updates

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
 

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>
         )}

packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx

 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>
 );

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>;

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']);

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) => {

public/app/features/admin/UserSyncInfo.tsx

 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" />

public/app/features/admin/ldap/LdapSyncInfo.tsx

 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">

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);
       },

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>
       );
     }

public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx

 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" />

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),
     });

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>
 

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}>

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

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}
     />
   );

public/app/features/explore/TimeSyncButton.tsx

 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>
   );

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" />

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>
     );
   }

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>
     // )}
 

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: [],