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

* Replace font awesome icons where possible * Implement small updates

Icon: Replace font awesome icons where possible (#28757)
* Replace font awesome icons where possible * Implement small updates
0f7a4701 · Ivana Huckova · GitHub · 45a34a30 · 0f7a4701 · 0f7a4701
Commit 0f7a4701 authored Nov 04, 2020 by Ivana Huckova Committed by GitHub Nov 04, 2020
21 changed files
--- 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

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

--- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
+++ b/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>
 );
--- 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>;

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

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

--- a/public/app/features/admin/UserSyncInfo.tsx
+++ b/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" />

--- a/public/app/features/admin/ldap/LdapSyncInfo.tsx
+++ b/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">

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

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

--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/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" />

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

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

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

--- 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
+        <Component
-          className="fa-spin"
+          inline={true}
-          name="fa fa-spinner"
        />
        Fetching

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

--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
 import React from 'react';
 import classNames from 'classnames';
-import { css } from 'emotion';
+import { Tooltip, Icon } from '@grafana/ui';
-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;
-    `,
-  };
-});
 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>
  );

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

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

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

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