fix(RHICOMPL-880): Update Ansible icon to use patternfly version

packages/inventory-compliance/src/Compliance.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import SystemPolicyCards from './SystemPolicyCards';
-import SystemRulesTable from './SystemRulesTable';
+import SystemRulesTable, { columns } from './SystemRulesTable';
 import ComplianceEmptyState from './ComplianceEmptyState';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost';
 import { Spinner } from '@redhat-cloud-services/frontend-components';
-import { columns } from './defaultColumns';
 import './compliance.scss';
 import { ErrorCard } from './PresentationalComponents';
 import { IntlProvider } from 'react-intl';

packages/inventory-compliance/src/Constants.js

@@ -11,11 +11,6 @@ export const COMPLIANT_COLUMN = 3;
 export const SEVERITY_COLUMN = 2;
 export const POLICY_COLUMN = 1;
 export const TITLE_COLUMN = 0;
-export const ANSIBLE_ICON = <svg version="1.1" id="ansible_icon" width="18px" height="18px" viewBox="0 0 18 18">
-    <path
-        d="M7.965,8.47125 L11.480625,11.25 L9.1575,5.50125 L7.965,8.47125 Z M12.6894375,13.483125 C12.605625,13.483125 12.5263125,13.46625 12.4531875,13.4325 C12.380625,13.39875 12.2900625,13.336875 12.200625,13.258125 L7.56,9.511875 L5.99625,13.415625 L4.6575,13.415625 L8.578125,3.96 C8.634375,3.830625 8.713125,3.735 8.814375,3.6675 C8.915625,3.605625 9.028125,3.571875 9.1575,3.571875 C9.275625,3.571875 9.3825,3.605625 9.48375,3.6675 C9.585,3.729375 9.658125,3.830625 9.703125,3.96 L13.291875,12.571875 C13.314375,12.628125 13.33125,12.684375 13.336875,12.729375 C13.3425,12.774375 13.348125,12.81375 13.348125,12.83625 C13.348125,13.021875 13.28625,13.179375 13.1563125,13.303125 C13.0275,13.426875 12.87,13.483125 12.6894375,13.483125 L12.6894375,13.483125 Z M9,0 C7.756875,0 6.586875,0.23625 5.495625,0.703125 C4.404375,1.17 3.4425,1.81125 2.626875,2.626875 C1.81125,3.4425 1.17,4.39875 0.703125,5.495625 C0.23625,6.5925 0,7.756875 0,9 C0,10.243125 0.23625,11.413125 0.703125,12.504375 C1.17,13.595625 1.81125,14.5575 2.626875,15.3675 C3.4425,16.1825625 4.39875,16.824375 5.49,17.29125 C6.58125,17.758125 7.756875,18 9,18 C10.243125,18 11.413125,17.76375 12.504375,17.296875 C13.595625,16.83 14.5575,16.18875 15.3675,15.373125 C16.1825625,14.5575 16.824375,13.60125 17.29125,12.51 C17.758125,11.41875 18,10.243125 18,9 C18,7.756875 17.76375,6.586875 17.296875,5.495625 C16.83,4.404375 16.18875,3.4425 15.373125,2.6325 C14.5575,1.816875 13.60125,1.175625 12.51,0.70875 C11.41875,0.241875 10.243125,0 9,0 L9,0 Z"
-        className="st0"/>
-</svg>;
 
 const LowSeverityIcon = <svg width="1em" height="1em" viewBox="0 0 18 18" role="img" style={ { verticalAlign: '-0.125em' } } xmlns="http://www.w3.org/2000/svg"><path d="M2 0h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm6.67 10.46a1.67 1.67 0 1 0 0 3.338 1.67 1.67 0 0 0 0-3.338zm-1.586-6l.27 4.935a.435.435 0 0 0 .434.411H9.55c.232 0 .422-.18.435-.411l.27-4.936A.435.435 0 0 0 9.818 4h-2.3c-.25 0-.448.21-.435.46z" fill="#3A9CA6" fillRule="evenodd"/></svg>;
 

packages/inventory-compliance/src/SystemRulesTable.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import { Pagination, PaginationVariant, ToolbarItem } from '@patternfly/react-core';
-import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { CheckCircleIcon, ExclamationCircleIcon, AnsibeTowerIcon } from '@patternfly/react-icons';
+import { Table, TableHeader, TableBody, sortable } from '@patternfly/react-table';
 import { TableToolbar, PrimaryToolbar } from '@redhat-cloud-services/frontend-components';
 
 import './compliance.scss';
@@ -14,6 +14,15 @@ import {
 import { HIGH_SEVERITY, MEDIUM_SEVERITY, LOW_SEVERITY } from './Constants';
 import ComplianceRemediationButton from './ComplianceRemediationButton';
 
+export const columns = [
+    { title: 'Rule', transforms: [ sortable ] },
+    { title: 'Policy', transforms: [ sortable ] },
+    { title: 'Severity', transforms: [ sortable ] },
+    { title: 'Passed', transforms: [ sortable ] },
+    { title: <React.Fragment><AnsibeTowerIcon /> Ansible</React.Fragment>,
+        original: 'Ansible', transforms: [ sortable ] }
+];
+
 class SystemRulesTable extends React.Component {
     config = buildFilterConfig({
         selectedFilter: this.props.selectedFilter,
@@ -388,7 +397,8 @@ SystemRulesTable.defaultProps = {
     selectedFilter: false,
     remediationsEnabled: true,
     tailoringEnabled: false,
-    selectedRefIds: []
+    selectedRefIds: [],
+    columns: columns
 };
 
 export default SystemRulesTable;

packages/inventory-compliance/src/SystemRulesTable.test.js

@@ -5,9 +5,8 @@ import SystemRulesTable from './SystemRulesTable';
 import { SortByDirection } from '@patternfly/react-table';
 import { TITLE_COLUMN } from './Constants';
 import { remediationsResponse, system, profileRules } from './Fixtures';
-import { columns } from './defaultColumns';
+import { columns } from './SystemRulesTable';
 import debounce from 'lodash/debounce';
-import { ANSIBLE_ICON } from './Constants';
 
 jest.mock('lodash/debounce');
 debounce.mockImplementation(fn => fn);
@@ -172,7 +171,7 @@ describe('SystemRulesTable component', () => {
                     columns={ [
                         { title: 'Rule' },
                         { title: 'Severity' },
-                        { title: <React.Fragment>{ ANSIBLE_ICON } Ansible</React.Fragment>, original: 'Ansible' }
+                        { title: 'Ansible' }
                     ] }
                 />
             );
@@ -192,7 +191,7 @@ describe('SystemRulesTable component', () => {
                     columns={ [
                         { title: 'Rule' },
                         { title: 'Severity' },
-                        { title: <React.Fragment>{ ANSIBLE_ICON } Ansible</React.Fragment>, original: 'Ansible' }
+                        { title: 'Ansible' }
                     ] }
                 />
             );