fix(RHICOMPL-880): Set fitContent for columns to not trigger tooltip

Hyperkid123 · Oct 7, 2020 · 1be8c02 · 1be8c02
1 parent 4566598
commit 1be8c02
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/packages/inventory-compliance/src/SystemRulesTable.js b/packages/inventory-compliance/src/SystemRulesTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import propTypes from 'prop-types';
 import { Pagination, PaginationVariant, ToolbarItem } from '@patternfly/react-core';
 import { CheckCircleIcon, ExclamationCircleIcon, AnsibeTowerIcon } from '@patternfly/react-icons';
-import { Table, TableHeader, TableBody, sortable } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, sortable, fitContent } from '@patternfly/react-table';
 import { TableToolbar, PrimaryToolbar } from '@redhat-cloud-services/frontend-components';
 
 import './compliance.scss';
@@ -17,12 +17,16 @@ import ComplianceRemediationButton from './ComplianceRemediationButton';
 export const columns = [
     { title: 'Rule', transforms: [ sortable ] },
     { title: 'Policy', transforms: [ sortable ] },
-    { title: 'Severity', transforms: [ sortable ] },
-    { title: 'Passed', transforms: [ sortable ] },
+    { title: 'Severity', transforms: [ sortable, fitContent ] },
+    { title: 'Passed', transforms: [ sortable, fitContent ] },
     { title: <React.Fragment><AnsibeTowerIcon /> Ansible</React.Fragment>,
-        original: 'Ansible', transforms: [ sortable ] }
+        original: 'Ansible', props: { tooltip: 'Ansible' }, transforms: [ sortable, fitContent ] }
 ];
 
+export const selectColumns = (columnTitles) => (
+    columns.filter((column) => columnTitles.includes(column.original || column.title))
+);
+
 class SystemRulesTable extends React.Component {
     config = buildFilterConfig({
         selectedFilter: this.props.selectedFilter,

diff --git a/packages/inventory-compliance/src/__snapshots__/SystemRulesTable.test.js.snap b/packages/inventory-compliance/src/__snapshots__/SystemRulesTable.test.js.snap
@@ -204,16 +204,21 @@ exports[`SystemRulesTable component should render 1`] = `
           "title": "Severity",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "title": "Passed",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "original": "Ansible",
+          "props": Object {
+            "tooltip": "Ansible",
+          },
           "title": <React.Fragment>
             <AnsibeTowerIcon
               color="currentColor"
@@ -224,6 +229,7 @@ exports[`SystemRulesTable component should render 1`] = `
           </React.Fragment>,
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
       ]
@@ -1058,16 +1064,21 @@ exports[`SystemRulesTable component should render a loading table 1`] = `
         "title": "Severity",
         "transforms": Array [
           [Function],
+          [Function],
         ],
       },
       Object {
         "title": "Passed",
         "transforms": Array [
           [Function],
+          [Function],
         ],
       },
       Object {
         "original": "Ansible",
+        "props": Object {
+          "tooltip": "Ansible",
+        },
         "title": <React.Fragment>
           <AnsibeTowerIcon
             color="currentColor"
@@ -1078,6 +1089,7 @@ exports[`SystemRulesTable component should render a loading table 1`] = `
         </React.Fragment>,
         "transforms": Array [
           [Function],
+          [Function],
         ],
       },
     ]
@@ -1328,16 +1340,21 @@ exports[`SystemRulesTable component should render filtered and search mixed resu
           "title": "Severity",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "title": "Passed",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "original": "Ansible",
+          "props": Object {
+            "tooltip": "Ansible",
+          },
           "title": <React.Fragment>
             <AnsibeTowerIcon
               color="currentColor"
@@ -1348,6 +1365,7 @@ exports[`SystemRulesTable component should render filtered and search mixed resu
           </React.Fragment>,
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
       ]
@@ -1683,16 +1701,21 @@ exports[`SystemRulesTable component should render search results by rule name 1`
           "title": "Severity",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "title": "Passed",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "original": "Ansible",
+          "props": Object {
+            "tooltip": "Ansible",
+          },
           "title": <React.Fragment>
             <AnsibeTowerIcon
               color="currentColor"
@@ -1703,6 +1726,7 @@ exports[`SystemRulesTable component should render search results by rule name 1`
           </React.Fragment>,
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
       ]
@@ -2088,16 +2112,21 @@ exports[`SystemRulesTable component should render search results on any page, re
           "title": "Severity",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "title": "Passed",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "original": "Ansible",
+          "props": Object {
+            "tooltip": "Ansible",
+          },
           "title": <React.Fragment>
             <AnsibeTowerIcon
               color="currentColor"
@@ -2108,6 +2137,7 @@ exports[`SystemRulesTable component should render search results on any page, re
           </React.Fragment>,
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
       ]
@@ -2484,16 +2514,21 @@ exports[`SystemRulesTable component should render sorted rows 1`] = `
           "title": "Severity",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "title": "Passed",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "original": "Ansible",
+          "props": Object {
+            "tooltip": "Ansible",
+          },
           "title": <React.Fragment>
             <AnsibeTowerIcon
               color="currentColor"
@@ -2504,6 +2539,7 @@ exports[`SystemRulesTable component should render sorted rows 1`] = `
           </React.Fragment>,
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
       ]
@@ -3522,16 +3558,21 @@ exports[`SystemRulesTable component should render sorted rows 2`] = `
           "title": "Severity",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "title": "Passed",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "original": "Ansible",
+          "props": Object {
+            "tooltip": "Ansible",
+          },
           "title": <React.Fragment>
             <AnsibeTowerIcon
               color="currentColor"
@@ -3542,6 +3583,7 @@ exports[`SystemRulesTable component should render sorted rows 2`] = `
           </React.Fragment>,
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
       ]
@@ -4496,16 +4538,21 @@ exports[`SystemRulesTable component should render without remediations if prop p
           "title": "Severity",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "title": "Passed",
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
         Object {
           "original": "Ansible",
+          "props": Object {
+            "tooltip": "Ansible",
+          },
           "title": <React.Fragment>
             <AnsibeTowerIcon
               color="currentColor"
@@ -4516,6 +4563,7 @@ exports[`SystemRulesTable component should render without remediations if prop p
           </React.Fragment>,
           "transforms": Array [
             [Function],
+            [Function],
           ],
         },
       ]

diff --git a/packages/inventory-compliance/src/index.js b/packages/inventory-compliance/src/index.js
@@ -1,5 +1,5 @@
 export { default as default } from './Compliance';
-export { default as SystemRulesTable } from './SystemRulesTable';
+export { default as SystemRulesTable, selectColumns as selectRulesTableColumns } from './SystemRulesTable';
 export { default as ComplianceRemediationButton } from './ComplianceRemediationButton';
 export { default as ComplianceEmptyState } from './ComplianceEmptyState';
 export { ChipBuilder, FilterBuilder, FilterConfigBuilder } from './Utilities';