Migrate icons to PF4 components and upgrade Font Awesome

frontend/__tests__/components/operator-lifecycle-manager/descriptors/status/phase.spec.tsx

@@ -15,7 +15,7 @@ describe(Phase.displayName, () => {
     wrapper.setProps({status});
 
     expect(wrapper.find('.co-error').exists()).toBe(true);
-    expect(wrapper.find('.fa.fa-ban').exists()).toBe(true);
+    expect(wrapper.find('[data-test-id="ban-icon"]').exists()).toBe(true);
   });
 
   it('renders status text', () => {
@@ -24,6 +24,6 @@ describe(Phase.displayName, () => {
 
     expect(wrapper.find('.co-error').exists()).toBe(false);
     expect(wrapper.text()).toContain(status);
-    expect(wrapper.find('.fa.fa-ban').exists()).toBe(false);
+    expect(wrapper.find('[data-test-id="ban-icon"]').exists()).toBe(false);
   });
 });

frontend/__tests__/components/resource-quota.spec.tsx

@@ -7,37 +7,37 @@ describe(ResourceQuotaTableRow.displayName, () => {
 
   it('renders usageIconClass with empty UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={0} />);
-    expect(wrapper.find('i').hasClass('co-resource-quota-empty')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-empty')).toBe(true);
   });
 
   it('renders usageIconClass with almost empty UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={1} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-empty')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-empty')).toBe(true);
   });
 
   it('renders usageIconClass with almost empty UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={49} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-empty')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-empty')).toBe(true);
   });
 
   it('renders usageIconClass with almost full UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={50} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-full')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-full')).toBe(true);
   });
 
   it('renders usageIconClass with almost full UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={99} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-full')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-full')).toBe(true);
   });
 
   it('renders usageIconClass with full UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={100} />);
-    expect(wrapper.find('i').hasClass('pficon pficon-resources-full')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-full')).toBe(true);
   });
 
   it('renders usageIconClass with warning UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={101} />);
-    expect(wrapper.find('i').hasClass('pficon-warning-triangle-o')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-exceeded')).toBe(true);
   });
 });
 

frontend/__tests__/components/utils/download-button.spec.tsx

@@ -32,7 +32,7 @@ describe(DownloadButton.displayName, () => {
 
   it('renders "Downloading..." if download is in flight', (done) => {
     spyAndExpect(spyOn(coFetch, 'coFetch'))(Promise.resolve()).then(() => {
-      expect(wrapper.find('button').text().trim()).toEqual('Downloading...');
+      expect(wrapper.find('button').text().trim()).toContain('Downloading...');
       done();
     });
 

frontend/integration-tests/views/monitoring.view.ts

@@ -14,7 +14,7 @@ export const detailsHeadingRuleIcon = $('.co-m-nav-title .co-m-resource-alertrul
 export const detailsHeadingSilenceIcon = $('.co-m-nav-title .co-m-resource-silence');
 export const detailsSubHeadings = $$('.co-m-pane__body h2');
 export const labels = $$('.co-m-label');
-export const expiredSilenceIcon = $('.co-m-pane__details .fa-ban');
+export const expiredSilenceIcon = $('.co-m-pane__details [data-test-id="ban-icon"]');
 export const ruleLink = $('.co-m-pane__details .co-resource-item__resource-name');
 export const silenceComment = $$('.co-m-pane__details dd').get(-2);
 export const firstAlertsListLink = $$('.co-resource-list__item a.co-resource-item').first();

frontend/package.json

@@ -67,6 +67,7 @@
     ]
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.9.0",
     "@patternfly/patternfly": "2.17.2",
     "@patternfly/react-charts": "4.4.16",
     "@patternfly/react-core": "3.67.4",
@@ -80,7 +81,6 @@
     "core-js": "2.x",
     "d3": "^5.9.2",
     "file-saver": "1.3.x",
-    "font-awesome": "4.7.x",
     "formik": "2.0.1-rc.1",
     "fuzzysearch": "1.0.x",
     "history": "4.x",

frontend/packages/dev-console/src/components/formik-fields/InputSearchField.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useField } from 'formik';
 import { ControlLabel, FormControl, FormGroup, HelpBlock, InputGroup } from 'patternfly-react';
+import { SearchIcon } from '@patternfly/react-icons';
+
 import { SearchInputFieldProps } from './field-types';
 import { getValidationState } from './field-utils';
 
@@ -35,7 +37,7 @@ const InputSearchField: React.FC<SearchInputFieldProps> = ({
             onClick={() => onSearch(field.value)}
             disabled={!field.value}
           >
-            <i className="fa fa-search" aria-hidden="true" />
+            <SearchIcon />
             <span className="sr-only">Find</span>
           </button>
         </span>

frontend/packages/dev-console/src/components/import/image-search/SearchResults.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { CubeIcon } from '@patternfly/react-icons';
 
 import { Timestamp, units } from '@console/internal/components/utils';
 import { Alert } from '@patternfly/react-core';
@@ -38,11 +39,7 @@ const SearchResults: React.FC = () => {
         )}
         <div className="row">
           <div className="col-sm-3 col-md-2 hidden-xs text-right h2">
-            <span
-              className="fa fa-cube text-muted"
-              style={{ fontSize: '100px' }}
-              aria-hidden="true"
-            />
+            <CubeIcon className="text-muted" style={{ fontSize: '100px' }} />
           </div>
           <div className="col-sm-9 col-md-10">
             <h2 className="co-image-name-results__heading co-break-word">

frontend/packages/dev-console/src/components/import/image-search/SearchStatus.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 
-import { Loading } from '@console/internal/components/utils';
+import { Loading, RedExclamationCircleIcon } from '@console/internal/components/utils';
 import { useFormikContext, FormikValues } from 'formik';
 
 const SearchStatus: React.FC = () => {
@@ -20,8 +20,7 @@ const SearchStatus: React.FC = () => {
         {!values.isSearchingForImage && isiError && (
           <React.Fragment>
             <h2 className="h3 co-image-name-results__loading-heading">
-              <i className="pficon pficon-error-circle-o" aria-hidden="true" /> Could not load image
-              metadata.
+              <RedExclamationCircleIcon /> Could not load image metadata.
             </h2>
             <p className="co-image-name-results__loading-error">{isiError}</p>
           </React.Fragment>

frontend/packages/dev-console/src/components/topology/TopologySideBar.scss

@@ -3,14 +3,11 @@
     padding: 0 5px;
 
     .close {
+      font-size: 16px;
       // adjustments to increase click target and default color contrast because it's on a grey background
       opacity: 0.3;
       padding: 10px 15px;
     }
-
-    .pficon-close {
-      font-size: 16px;
-    }
   }
 
   &__overlay {

frontend/packages/kubevirt-plugin/src/components/modals/modal-resource-launcher.tsx

@@ -12,6 +12,7 @@ import {
   Box,
   FirehoseResource,
   FirehoseResult,
+  RedExclamationCircleIcon,
 } from '@console/internal/components/utils';
 import { ModalErrorContent } from '@console/internal/components/modals/error-modal';
 import { createModal, GetModalContainer } from '@console/internal/components/factory';
@@ -21,7 +22,7 @@ const NotFound: React.FC<NotFoundProps> = ({ message }) => (
     <MsgBox title="Not Found" detail="Requested resource not found." />
     {_.isString(message) && (
       <div className="alert alert-danger text-left">
-        <span className="pficon pficon-error-circle-o" />
+        <RedExclamationCircleIcon />
         {message}
       </div>
     )}

frontend/public/components/_build-pipeline.scss

@@ -5,7 +5,7 @@ $pipeline-font-base: 13px;
 $pipeline-in-progress-color: $color-pf-blue-400;
 $pipeline-new-color: $color-pf-blue-100;
 $pipeline-pending-color: $color-pf-black-300;
-$pipeline-success-color: $color-pf-green-400;
+$pipeline-success-color: $pf-color-light-green-400;
 $pipeline-require-attention-color: $color-pf-gold-400;
 $pipeline-circle-animation-time: 0.35s;
 $pipeline-circle-diameter: 18px;
@@ -148,12 +148,6 @@ $pipelineStageScreenSize: (
   }
 }
 
-.build-pipeline__status-icon--complete {
-  color: $pipeline-success-color;
-}
-.build-pipeline__status-icon--failed{
-  color: $pipeline-failed-color;
-}
 .build-pipeline__status-icon--cancelled{
   color: $pipeline-aborted-color;
 }
@@ -274,10 +268,10 @@ $pipelineStageStatus: (
   transform: rotate(-90deg);
   width: $pipeline-circle-diameter;
   &:after {
+    @include font-awesome-free-solid;
     animation: pipeline-stage-fadeIcon $pipeline-icon-animation-time ($pipeline-line-grow-animation-time + $pipeline-semi-circle-animation-time + ($pipeline-inner-circle-animation-time * 2)) linear forwards;
     color: $pipeline-inner-circle-color;
-    font-family: 'FontAwesome';
-    font-size: 12px;
+    font-size: 10px;
     left: 50%;
     opacity: 0;
     position: absolute;

frontend/public/components/_icon-and-text.scss

@@ -4,8 +4,5 @@
 }
 
 .co-icon-and-text__icon {
-  flex: 0 0 auto;
   margin-right: 5px;
-  position: relative;
-  top: 0.125em;
 }

frontend/public/components/_image-stream.scss

@@ -20,7 +20,7 @@
 .co-images-stream-tag-timeline__circle-icon,
 .co-images-stream-tag-timeline__square-icon {
   color: $color-pf-black-300;
-  left: 10px;
+  left: 8px;
   position: relative;
 }
 
@@ -46,7 +46,7 @@
   border: 2px solid $color-pf-black-300;
   left: 14px;
   position: relative;
-} 
+}
 
 .co-images-stream-tag-timeline__timestamp {
   margin-left: 35px;

frontend/public/components/_quota.scss

@@ -9,10 +9,6 @@
   font-weight: 300;
 }
 
-.co-resource-quota-empty {
-  font-size: ($font-size-base + 1);
-}
-
 .co-resource-quota-gauge-chart {
   min-width: 170px;
 }

frontend/public/components/_toggle-play.scss

@@ -9,11 +9,13 @@
 
   // play icon
   &.co-toggle-play--inactive:before {
-    content: $fa-var-play;
+    @include font-awesome-free-solid;
+    content: fa-content($fa-var-play);
   }
   // pause icon
   &.co-toggle-play--active:before {
-    content: $fa-var-pause;
+    @include font-awesome-free-solid;
+    content: fa-content($fa-var-pause);
   }
 
   &.co-toggle-play--active {

frontend/public/components/build-pipeline.tsx

@@ -1,7 +1,18 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import * as _ from 'lodash-es';
-import { resourcePath, ExternalLink } from './utils';
+import {
+  BanIcon,
+  PendingIcon,
+  SyncAltIcon,
+} from '@patternfly/react-icons';
+
+import {
+  resourcePath,
+  ExternalLink,
+  GreenCheckCircleIcon,
+  RedExclamationCircleIcon,
+} from './utils';
 import { fromNow } from './utils/datetime';
 import { K8sResourceKind } from '../module/k8s';
 import { getBuildNumber } from '../module/k8s/builds';
@@ -24,16 +35,16 @@ const BuildSummaryStatusIcon: React.SFC<BuildSummaryStatusIconProps> = ({ status
   const statusClass = _.lowerCase(status);
   const icon = ({
     new: '',
-    pending: 'pficon pficon-pending',
-    running: 'fa fa-refresh fa-fw',
-    complete: 'pficon pficon-ok',
-    failed: 'pficon pficon-error-circle-o',
-    cancelled: 'fa fa-ban',
+    pending: <PendingIcon />,
+    running: <SyncAltIcon className="fa-spin" />,
+    complete: <GreenCheckCircleIcon />,
+    failed: <RedExclamationCircleIcon />,
+    cancelled: <BanIcon />,
   })[statusClass];
 
   return icon
     ? <span className={`build-pipeline__status-icon build-pipeline__status-icon--${statusClass}`}>
-      <span className={icon} aria-hidden="true"></span>
+      {icon}
     </span>
     : null;
 };

frontend/public/components/catalog/_catalog.scss

@@ -217,10 +217,6 @@ $co-modal-ignore-warning-icon-width: 30px;
   &__link {
     display: block;
     margin: 10px 0;
-    .fa {
-      font-size: inherit !important;
-      margin-left: 5px;
-    }
   }
 }
 

frontend/public/components/chargeback.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
 import { connectToFlags, flagPending } from '../reducers/features';
 import { FLAGS } from '../const';
 import { Conditions } from './conditions';
@@ -345,7 +347,7 @@ const ReportsPage_: React.SFC<ReportsPageProps> = props => {
         Chargeback is an alpha feature.
       </p>
       <a href="https://coreos.com/tectonic/docs/latest/reports/install-chargeback.html" target="_blank" rel="noopener noreferrer">
-        <button className="btn btn-info">Installing Chargeback Report <i className="fa fa-external-link" /></button>
+        <button className="btn btn-info">Installing Chargeback Report <ExternalLinkAltIcon /></button>
       </a>
     </div>
     <ListPage {...props} canCreate kind={ReportReference} ListComponent={ReportsList} mock title="Chargeback Reporting" />

frontend/public/components/cluster-settings/cluster-operator.tsx

@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { Alert } from '@patternfly/react-core';
+import { SyncAltIcon, UnknownIcon } from '@patternfly/react-icons';
 
 import { ClusterOperatorModel } from '../../models';
 import {
@@ -30,26 +31,28 @@ import {
 import {
   navFactory,
   EmptyBox,
+  GreenCheckCircleIcon,
   Kebab,
   ResourceLink,
   ResourceSummary,
   SectionHeading,
+  YellowExclamationTriangleIcon,
 } from '../utils';
 
 export const clusterOperatorReference: K8sResourceKindReference = referenceForModel(ClusterOperatorModel);
 
-const getIconClass = (status: OperatorStatus) => {
+const getIcon = (status: OperatorStatus) => {
   return {
-    [OperatorStatus.Available]: 'pficon pficon-ok text-success',
-    [OperatorStatus.Updating]: 'fa fa-refresh',
-    [OperatorStatus.Degraded]: 'pficon pficon-warning-triangle-o text-warning',
-    [OperatorStatus.Unknown]: 'pficon pficon-unknown',
+    [OperatorStatus.Available]: <GreenCheckCircleIcon />,
+    [OperatorStatus.Updating]: <SyncAltIcon />,
+    [OperatorStatus.Degraded]: <YellowExclamationTriangleIcon />,
+    [OperatorStatus.Unknown]: <UnknownIcon />,
   }[status];
 };
 
 const OperatorStatusIconAndLabel: React.SFC<OperatorStatusIconAndLabelProps> = ({status}) => {
-  const iconClass = getIconClass(status);
-  return <React.Fragment><i className={iconClass} aria-hidden="true" /> {status}</React.Fragment>;
+  const icon = getIcon(status);
+  return <React.Fragment>{icon} {status}</React.Fragment>;
 };
 
 const tableColumnClasses = [