@rhc-shared-components/packages-table 0.2.5 → 0.3.2

package/CHANGELOG.md

@@ -0,0 +1,79 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.3.0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/packages-table@0.2.5...@rhc-shared-components/packages-table@0.3.0) (2022-08-22)
+
+
+### Features
+
+* added toggle and helpsection prop to package table and vuns summary resp. ([9ca76b5](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/9ca76b5f2622ab3a6502e78ce8140625feb3ef2f))
+
+
+
+
+
+## [0.2.5](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/packages-table@0.2.4...@rhc-shared-components/packages-table@0.2.5) (2022-07-12)
+
+**Note:** Version bump only for package @rhc-shared-components/packages-table
+
+
+
+
+
+## [0.2.4](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/packages-table@0.2.0...@rhc-shared-components/packages-table@0.2.4) (2022-07-12)
+
+
+### Bug Fixes
+
+* fixing bad set state on severity filter of packages table ([e48189f](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/e48189f80ade3ca15340b32d3a8823b25dc64b6d))
+* resetting page number of change of filter in packages table ([3b44111](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/3b441115d2a1dd772df9cc3d1c32235f6dc56340))
+* revert exclude pkg count check and remove console warnings ([0867905](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/08679056d4f38a300624cc61ac1fdbf4a064bd76))
+
+
+
+
+
+## [0.2.3](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/packages-table@0.2.0...@rhc-shared-components/packages-table@0.2.3) (2022-06-16)
+
+
+### Bug Fixes
+
+* fixing bad set state on filterable table>ecoselect ([f7fa11e](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/f7fa11e250243c5341165fe5dd8d93c85ad93e71))
+* revert exclude pkg count check and remove console warnings ([0867905](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/08679056d4f38a300624cc61ac1fdbf4a064bd76))
+
+
+
+
+
+# [0.2.0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/packages-table@0.0.1...@rhc-shared-components/packages-table@0.2.0) (2022-06-14)
+
+
+### Bug Fixes
+
+* replacing old pfe elements with new ones for vulnerability components ([60ca9ff](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/60ca9ffd0faf29dc571999e42e6ca961aee69c3a))
+
+
+### Features
+
+* add new packages table component ([baac2c0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/baac2c056bdb91386884a1a8b8f00e31f7af1a77))
+
+
+
+
+
+# [0.1.0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/packages-table@0.0.1...@rhc-shared-components/packages-table@0.1.0) (2022-06-08)
+
+
+### Features
+
+* add new packages table component ([baac2c0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/baac2c056bdb91386884a1a8b8f00e31f7af1a77))
+
+
+
+
+
+## 0.0.1 (2022-05-04)
+
+**Note:** Version bump only for package @rhc-shared-components/packages-table

package/dist/components/VulnerabilitiesTable.d.ts

@@ -1,6 +1,7 @@
 interface VulnerabilitiesTableProps {
     vulnerabilities: any[];
     isLoading: boolean;
+    hideToggler?: boolean;
 }
-export declare const VulnerabilitiesTable: ({ vulnerabilities, isLoading }: VulnerabilitiesTableProps) => JSX.Element;
+export declare const VulnerabilitiesTable: ({ vulnerabilities, isLoading, hideToggler }: VulnerabilitiesTableProps) => JSX.Element;
 export {};

package/dist/index.d.ts

@@ -7,7 +7,8 @@ export declare const severitySortOrder: {
 interface PackagesTableProps {
     vulnerabilities: any[];
     rpms: any[];
+    hideToggler?: boolean;
     isLoading: boolean;
 }
-export declare const PackagesTable: ({ vulnerabilities, rpms, isLoading }: PackagesTableProps) => JSX.Element;
+export declare const PackagesTable: ({ vulnerabilities, rpms, hideToggler, isLoading }: PackagesTableProps) => JSX.Element;
 export {};

package/dist/index.js

@@ -35,7 +35,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var mergeWith__default = /*#__PURE__*/_interopDefaultLegacy(mergeWith);
 
-var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem; }\n  .vulnerabilities-table .impact-icon.color-critical {\n    color: #a30000; }\n  .vulnerabilities-table .impact-icon.color-important {\n    color: #ec7a08; }\n  .vulnerabilities-table .impact-icon.color-moderate {\n    color: #f5c12e; }\n  .vulnerabilities-table .impact-icon.color-low {\n    color: #777; }\n\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap; }\n\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap; }\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg); }\n  .filterable-table__bottom-pagination[class] {\n    margin-top: 1rem; }\n  .filterable-table .pf-c-toolbar {\n    padding-top: 0; }\n    .filterable-table .pf-c-toolbar__content {\n      --pf-c-toolbar__content--PaddingRight: 0;\n      --pf-c-toolbar__content--PaddingLeft: 0; }\n  .filterable-table .pf-c-input-group__text {\n    --pf-c-input-group__text--PaddingRight: 0; }\n  .filterable-table .pf-c-pagination.pf-m-bottom {\n    --pf-c-pagination--m-bottom--md--PaddingRight: 0; }\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem; }\n\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem; }\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0; }\n";
+var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n  color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n  color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n  color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n  color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n  margin-top: 1rem;\n}\n.filterable-table .pf-c-toolbar {\n  padding-top: 0;\n}\n.filterable-table .pf-c-toolbar__content {\n  --pf-c-toolbar__content--PaddingRight: 0;\n  --pf-c-toolbar__content--PaddingLeft: 0;\n}\n.filterable-table .pf-c-input-group__text {\n  --pf-c-input-group__text--PaddingRight: 0;\n}\n.filterable-table .pf-c-pagination.pf-m-bottom {\n  --pf-c-pagination--m-bottom--md--PaddingRight: 0;\n}\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem;\n}\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem;\n}\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0;\n}";
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -64,7 +64,7 @@ function __rest(s, e) {
   return t;
 }
 
-Promise.resolve().then(function () { return require('./inline-edit-320c12ad.js'); });
+Promise.resolve().then(function () { return require('./inline-edit-e7ffaa36.js'); });
 var inlineStyles = {
   "button": "pf-c-button",
   "inlineEdit": "pf-c-inline-edit",
@@ -118,7 +118,7 @@ function css(...args) {
     return classes.join(' ');
 }
 
-Promise.resolve().then(function () { return require('./table-817f1921.js'); });
+Promise.resolve().then(function () { return require('./table-468a84b2.js'); });
 var styles$1 = {
   "button": "pf-c-button",
   "modifiers": {
@@ -199,7 +199,7 @@ var styles$1 = {
   "themeDark": "pf-theme-dark"
 };
 
-Promise.resolve().then(function () { return require('./table-grid-6f46705c.js'); });
+Promise.resolve().then(function () { return require('./table-grid-f5923ae5.js'); });
 var stylesGrid = {
   "button": "pf-c-button",
   "modifiers": {
@@ -232,7 +232,7 @@ var stylesGrid = {
   "tableToggleIcon": "pf-c-table__toggle-icon"
 };
 
-Promise.resolve().then(function () { return require('./table-tree-view-eec85588.js'); });
+Promise.resolve().then(function () { return require('./table-tree-view-650158c9.js'); });
 var stylesTreeView = {
   "dropdown": "pf-c-dropdown",
   "modifiers": {
@@ -392,7 +392,7 @@ const TrBase = (_a) => {
 const Tr = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
 Tr.displayName = 'Tr';
 
-Promise.resolve().then(function () { return require('./table-scrollable-423d12ef.js'); });
+Promise.resolve().then(function () { return require('./table-scrollable-e0f500ba.js'); });
 var styles = {
   "modifiers": {
     "borderRight": "pf-m-border-right",
@@ -405,42 +405,42 @@ var styles = {
   "tableStickyColumn": "pf-c-table__sticky-column"
 };
 
-var IconSize;
+var IconSize$1;
 (function (IconSize) {
     IconSize["sm"] = "sm";
     IconSize["md"] = "md";
     IconSize["lg"] = "lg";
     IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-const getSize = (size) => {
+})(IconSize$1 || (IconSize$1 = {}));
+const getSize$1 = (size) => {
     switch (size) {
-        case IconSize.sm:
+        case IconSize$1.sm:
             return '1em';
-        case IconSize.md:
+        case IconSize$1.md:
             return '1.5em';
-        case IconSize.lg:
+        case IconSize$1.lg:
             return '2em';
-        case IconSize.xl:
+        case IconSize$1.xl:
             return '3em';
         default:
             return '1em';
     }
 };
-let currentId = 0;
+let currentId$1 = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
+function createIcon$1({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
     var _a;
     return _a = class SVGIcon extends React__namespace.Component {
             constructor() {
                 super(...arguments);
-                this.id = `icon-title-${currentId++}`;
+                this.id = `icon-title-${currentId$1++}`;
             }
             render() {
                 const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
                 const hasTitle = Boolean(title);
-                const heightWidth = getSize(size);
+                const heightWidth = getSize$1(size);
                 const baseAlign = -0.125 * Number.parseFloat(heightWidth);
                 const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
                 const viewBox = [xOffset, yOffset, width, height].join(' ');
@@ -452,7 +452,7 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
         _a.displayName = name,
         _a.defaultProps = {
             color: 'currentColor',
-            size: IconSize.sm,
+            size: IconSize$1.sm,
             noVerticalAlign: false
         },
         _a;
@@ -467,7 +467,7 @@ const HelpIconConfig = {
   xOffset: 0,
 };
 
-const HelpIcon = createIcon(HelpIconConfig);
+const HelpIcon = createIcon$1(HelpIconConfig);
 
 var HelpIcon$1 = HelpIcon;
 
@@ -528,7 +528,7 @@ const LongArrowAltUpIconConfig = {
   xOffset: 0,
 };
 
-const LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
+const LongArrowAltUpIcon = createIcon$1(LongArrowAltUpIconConfig);
 
 var LongArrowAltUpIcon$1 = LongArrowAltUpIcon;
 
@@ -541,7 +541,7 @@ const LongArrowAltDownIconConfig = {
   xOffset: 0,
 };
 
-const LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
+const LongArrowAltDownIcon = createIcon$1(LongArrowAltDownIconConfig);
 
 var LongArrowAltDownIcon$1 = LongArrowAltDownIcon;
 
@@ -554,7 +554,7 @@ const ArrowsAltVIconConfig = {
   xOffset: 0,
 };
 
-const ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
+const ArrowsAltVIcon = createIcon$1(ArrowsAltVIconConfig);
 
 var ArrowsAltVIcon$1 = ArrowsAltVIcon;
 
@@ -589,7 +589,7 @@ const StarIconConfig = {
   xOffset: 0,
 };
 
-const StarIcon = createIcon(StarIconConfig);
+const StarIcon = createIcon$1(StarIconConfig);
 
 var StarIcon$1 = StarIcon;
 
@@ -649,7 +649,7 @@ const SelectColumn = (_a) => {
 };
 SelectColumn.displayName = 'SelectColumn';
 
-Promise.resolve().then(function () { return require('./check-ee7cdde5.js'); });
+Promise.resolve().then(function () { return require('./check-27d5ec91.js'); });
 var checkStyles = {
   "check": "pf-c-check",
   "checkBody": "pf-c-check__body",
@@ -722,7 +722,7 @@ const AngleDownIconConfig = {
   xOffset: 0,
 };
 
-const AngleDownIcon = createIcon(AngleDownIconConfig);
+const AngleDownIcon = createIcon$1(AngleDownIconConfig);
 
 var AngleDownIcon$1 = AngleDownIcon;
 
@@ -1070,7 +1070,7 @@ const GripVerticalIconConfig = {
   xOffset: 0,
 };
 
-const GripVerticalIcon = createIcon(GripVerticalIconConfig);
+const GripVerticalIcon = createIcon$1(GripVerticalIconConfig);
 
 var GripVerticalIcon$1 = GripVerticalIcon;
 
@@ -1098,7 +1098,7 @@ const EllipsisHIconConfig = {
   xOffset: 0,
 };
 
-const EllipsisHIcon = createIcon(EllipsisHIconConfig);
+const EllipsisHIcon = createIcon$1(EllipsisHIconConfig);
 
 var EllipsisHIcon$1 = EllipsisHIcon;
 
@@ -1239,6 +1239,59 @@ const TdBase = (_a) => {
 const Td = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
 Td.displayName = 'Td';
 
+var IconSize;
+(function (IconSize) {
+    IconSize["sm"] = "sm";
+    IconSize["md"] = "md";
+    IconSize["lg"] = "lg";
+    IconSize["xl"] = "xl";
+})(IconSize || (IconSize = {}));
+const getSize = (size) => {
+    switch (size) {
+        case IconSize.sm:
+            return '1em';
+        case IconSize.md:
+            return '1.5em';
+        case IconSize.lg:
+            return '2em';
+        case IconSize.xl:
+            return '3em';
+        default:
+            return '1em';
+    }
+};
+let currentId = 0;
+/**
+ * Factory to create Icon class components for consumers
+ */
+function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
+    var _a;
+    return _a = class SVGIcon extends React__namespace.Component {
+            constructor() {
+                super(...arguments);
+                this.id = `icon-title-${currentId++}`;
+            }
+            render() {
+                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                const hasTitle = Boolean(title);
+                const heightWidth = getSize(size);
+                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
+                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
+                const viewBox = [xOffset, yOffset, width, height].join(' ');
+                return (React__namespace.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                    hasTitle && React__namespace.createElement("title", { id: this.id }, title),
+                    React__namespace.createElement("path", { d: svgPath })));
+            }
+        },
+        _a.displayName = name,
+        _a.defaultProps = {
+            color: 'currentColor',
+            size: IconSize.sm,
+            noVerticalAlign: false
+        },
+        _a;
+}
+
 const SearchIconConfig = {
   name: 'SearchIcon',
   height: 512,
@@ -1588,7 +1641,8 @@ function EcoSelect(_ref) {
     onSelect: onSelect,
     selections: selected,
     isOpen: isOpen,
-    placeholderText: placeholderText
+    placeholderText: placeholderText,
+    className: "pf-select-wrapper"
   }, options.map(function (option) {
     return React__default["default"].createElement(reactCore.SelectOption, {
       key: option,
@@ -1626,7 +1680,8 @@ var ToggleGroup = function ToggleGroup(props) {
 /* eslint-disable camelcase */
 var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
   var vulnerabilities = _ref.vulnerabilities,
-      isLoading = _ref.isLoading;
+      isLoading = _ref.isLoading,
+      hideToggler = _ref.hideToggler;
 
   var getImpact = function getImpact(_ref2) {
     var severity = _ref2.severity;
@@ -1750,7 +1805,7 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
       key: 'vulnerabilities-table__filter-input',
       onChange: onTextInputFilterChange,
       placeholder: 'Filter vulnerabilities'
-    }), React__default["default"].createElement(ToggleGroup, {
+    }), !hideToggler ? React__default["default"].createElement(ToggleGroup, {
       key: 'vulnerabilities-table__toggle-group',
       onChange: onStatusFilterChange,
       "aria-label": 'Vulnerability status filter',
@@ -1764,7 +1819,7 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
         id: 'unfixed',
         text: 'Unfixed'
       }]
-    }), React__default["default"].createElement(EcoSelect, {
+    }) : React__default["default"].createElement(React__default["default"].Fragment, null), React__default["default"].createElement(EcoSelect, {
       key: 'vulnerabilities-table__select',
       onChange: onImpactFilterChange,
       "aria-label": 'Impact filter',
@@ -1801,6 +1856,7 @@ var PackagesTable = function PackagesTable(_ref) {
       vulnerabilities = _ref$vulnerabilities === void 0 ? [] : _ref$vulnerabilities,
       _ref$rpms = _ref.rpms,
       rpms = _ref$rpms === void 0 ? [] : _ref$rpms,
+      hideToggler = _ref.hideToggler,
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
 
@@ -1868,7 +1924,8 @@ var PackagesTable = function PackagesTable(_ref) {
     title: "Vulnerabilities (" + uniqueVulnerabilities.length + ")"
   }, React__namespace.createElement(VulnerabilitiesTable, {
     vulnerabilities: uniqueVulnerabilities,
-    isLoading: isLoading
+    isLoading: isLoading,
+    hideToggler: hideToggler
   })), excludedPackages.length > 0 && React__namespace.createElement(reactCore.Tab, {
     eventKey: 1,
     title: "Excluded Packages (" + excludedPackages.length + ")"

package/dist/index.modern.js

@@ -12,7 +12,7 @@ import { DropdownSeparator } from '@patternfly/react-core/dist/esm/components/Dr
 import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants';
 import { format } from 'date-fns';
 
-var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem; }\n  .vulnerabilities-table .impact-icon.color-critical {\n    color: #a30000; }\n  .vulnerabilities-table .impact-icon.color-important {\n    color: #ec7a08; }\n  .vulnerabilities-table .impact-icon.color-moderate {\n    color: #f5c12e; }\n  .vulnerabilities-table .impact-icon.color-low {\n    color: #777; }\n\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap; }\n\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap; }\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg); }\n  .filterable-table__bottom-pagination[class] {\n    margin-top: 1rem; }\n  .filterable-table .pf-c-toolbar {\n    padding-top: 0; }\n    .filterable-table .pf-c-toolbar__content {\n      --pf-c-toolbar__content--PaddingRight: 0;\n      --pf-c-toolbar__content--PaddingLeft: 0; }\n  .filterable-table .pf-c-input-group__text {\n    --pf-c-input-group__text--PaddingRight: 0; }\n  .filterable-table .pf-c-pagination.pf-m-bottom {\n    --pf-c-pagination--m-bottom--md--PaddingRight: 0; }\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem; }\n\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem; }\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0; }\n";
+var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n  color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n  color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n  color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n  color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n  margin-top: 1rem;\n}\n.filterable-table .pf-c-toolbar {\n  padding-top: 0;\n}\n.filterable-table .pf-c-toolbar__content {\n  --pf-c-toolbar__content--PaddingRight: 0;\n  --pf-c-toolbar__content--PaddingLeft: 0;\n}\n.filterable-table .pf-c-input-group__text {\n  --pf-c-input-group__text--PaddingRight: 0;\n}\n.filterable-table .pf-c-pagination.pf-m-bottom {\n  --pf-c-pagination--m-bottom--md--PaddingRight: 0;\n}\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem;\n}\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem;\n}\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0;\n}";
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -39,7 +39,7 @@ function __rest(s, e) {
   return t;
 }
 
-import('./inline-edit-b186d03c.js');
+import('./inline-edit-5c45ab66.js');
 var inlineStyles = {
   "button": "pf-c-button",
   "inlineEdit": "pf-c-inline-edit",
@@ -93,7 +93,7 @@ function css(...args) {
     return classes.join(' ');
 }
 
-import('./table-ffd0513c.js');
+import('./table-76f2f3f9.js');
 var styles$1 = {
   "button": "pf-c-button",
   "modifiers": {
@@ -174,7 +174,7 @@ var styles$1 = {
   "themeDark": "pf-theme-dark"
 };
 
-import('./table-grid-5d7f8359.js');
+import('./table-grid-06209f24.js');
 var stylesGrid = {
   "button": "pf-c-button",
   "modifiers": {
@@ -207,7 +207,7 @@ var stylesGrid = {
   "tableToggleIcon": "pf-c-table__toggle-icon"
 };
 
-import('./table-tree-view-ee6ac38a.js');
+import('./table-tree-view-121a2cdb.js');
 var stylesTreeView = {
   "dropdown": "pf-c-dropdown",
   "modifiers": {
@@ -367,7 +367,7 @@ const TrBase = (_a) => {
 const Tr = React.forwardRef((props, ref) => (React.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
 Tr.displayName = 'Tr';
 
-import('./table-scrollable-01103545.js');
+import('./table-scrollable-5eeb1c66.js');
 var styles = {
   "modifiers": {
     "borderRight": "pf-m-border-right",
@@ -380,42 +380,42 @@ var styles = {
   "tableStickyColumn": "pf-c-table__sticky-column"
 };
 
-var IconSize;
+var IconSize$1;
 (function (IconSize) {
     IconSize["sm"] = "sm";
     IconSize["md"] = "md";
     IconSize["lg"] = "lg";
     IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-const getSize = (size) => {
+})(IconSize$1 || (IconSize$1 = {}));
+const getSize$1 = (size) => {
     switch (size) {
-        case IconSize.sm:
+        case IconSize$1.sm:
             return '1em';
-        case IconSize.md:
+        case IconSize$1.md:
             return '1.5em';
-        case IconSize.lg:
+        case IconSize$1.lg:
             return '2em';
-        case IconSize.xl:
+        case IconSize$1.xl:
             return '3em';
         default:
             return '1em';
     }
 };
-let currentId = 0;
+let currentId$1 = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
+function createIcon$1({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
     var _a;
     return _a = class SVGIcon extends React.Component {
             constructor() {
                 super(...arguments);
-                this.id = `icon-title-${currentId++}`;
+                this.id = `icon-title-${currentId$1++}`;
             }
             render() {
                 const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
                 const hasTitle = Boolean(title);
-                const heightWidth = getSize(size);
+                const heightWidth = getSize$1(size);
                 const baseAlign = -0.125 * Number.parseFloat(heightWidth);
                 const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
                 const viewBox = [xOffset, yOffset, width, height].join(' ');
@@ -427,7 +427,7 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
         _a.displayName = name,
         _a.defaultProps = {
             color: 'currentColor',
-            size: IconSize.sm,
+            size: IconSize$1.sm,
             noVerticalAlign: false
         },
         _a;
@@ -442,7 +442,7 @@ const HelpIconConfig = {
   xOffset: 0,
 };
 
-const HelpIcon = createIcon(HelpIconConfig);
+const HelpIcon = createIcon$1(HelpIconConfig);
 
 var HelpIcon$1 = HelpIcon;
 
@@ -503,7 +503,7 @@ const LongArrowAltUpIconConfig = {
   xOffset: 0,
 };
 
-const LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
+const LongArrowAltUpIcon = createIcon$1(LongArrowAltUpIconConfig);
 
 var LongArrowAltUpIcon$1 = LongArrowAltUpIcon;
 
@@ -516,7 +516,7 @@ const LongArrowAltDownIconConfig = {
   xOffset: 0,
 };
 
-const LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
+const LongArrowAltDownIcon = createIcon$1(LongArrowAltDownIconConfig);
 
 var LongArrowAltDownIcon$1 = LongArrowAltDownIcon;
 
@@ -529,7 +529,7 @@ const ArrowsAltVIconConfig = {
   xOffset: 0,
 };
 
-const ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
+const ArrowsAltVIcon = createIcon$1(ArrowsAltVIconConfig);
 
 var ArrowsAltVIcon$1 = ArrowsAltVIcon;
 
@@ -564,7 +564,7 @@ const StarIconConfig = {
   xOffset: 0,
 };
 
-const StarIcon = createIcon(StarIconConfig);
+const StarIcon = createIcon$1(StarIconConfig);
 
 var StarIcon$1 = StarIcon;
 
@@ -624,7 +624,7 @@ const SelectColumn = (_a) => {
 };
 SelectColumn.displayName = 'SelectColumn';
 
-import('./check-317f30b2.js');
+import('./check-120c4f98.js');
 var checkStyles = {
   "check": "pf-c-check",
   "checkBody": "pf-c-check__body",
@@ -697,7 +697,7 @@ const AngleDownIconConfig = {
   xOffset: 0,
 };
 
-const AngleDownIcon = createIcon(AngleDownIconConfig);
+const AngleDownIcon = createIcon$1(AngleDownIconConfig);
 
 var AngleDownIcon$1 = AngleDownIcon;
 
@@ -1045,7 +1045,7 @@ const GripVerticalIconConfig = {
   xOffset: 0,
 };
 
-const GripVerticalIcon = createIcon(GripVerticalIconConfig);
+const GripVerticalIcon = createIcon$1(GripVerticalIconConfig);
 
 var GripVerticalIcon$1 = GripVerticalIcon;
 
@@ -1073,7 +1073,7 @@ const EllipsisHIconConfig = {
   xOffset: 0,
 };
 
-const EllipsisHIcon = createIcon(EllipsisHIconConfig);
+const EllipsisHIcon = createIcon$1(EllipsisHIconConfig);
 
 var EllipsisHIcon$1 = EllipsisHIcon;
 
@@ -1214,6 +1214,59 @@ const TdBase = (_a) => {
 const Td = React.forwardRef((props, ref) => (React.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
 Td.displayName = 'Td';
 
+var IconSize;
+(function (IconSize) {
+    IconSize["sm"] = "sm";
+    IconSize["md"] = "md";
+    IconSize["lg"] = "lg";
+    IconSize["xl"] = "xl";
+})(IconSize || (IconSize = {}));
+const getSize = (size) => {
+    switch (size) {
+        case IconSize.sm:
+            return '1em';
+        case IconSize.md:
+            return '1.5em';
+        case IconSize.lg:
+            return '2em';
+        case IconSize.xl:
+            return '3em';
+        default:
+            return '1em';
+    }
+};
+let currentId = 0;
+/**
+ * Factory to create Icon class components for consumers
+ */
+function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
+    var _a;
+    return _a = class SVGIcon extends React.Component {
+            constructor() {
+                super(...arguments);
+                this.id = `icon-title-${currentId++}`;
+            }
+            render() {
+                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                const hasTitle = Boolean(title);
+                const heightWidth = getSize(size);
+                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
+                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
+                const viewBox = [xOffset, yOffset, width, height].join(' ');
+                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                    hasTitle && React.createElement("title", { id: this.id }, title),
+                    React.createElement("path", { d: svgPath })));
+            }
+        },
+        _a.displayName = name,
+        _a.defaultProps = {
+            color: 'currentColor',
+            size: IconSize.sm,
+            noVerticalAlign: false
+        },
+        _a;
+}
+
 const SearchIconConfig = {
   name: 'SearchIcon',
   height: 512,
@@ -1516,7 +1569,8 @@ function EcoSelect({
     onSelect: onSelect,
     selections: selected,
     isOpen: isOpen,
-    placeholderText: placeholderText
+    placeholderText: placeholderText,
+    className: "pf-select-wrapper"
   }, options.map(option => React__default.createElement(SelectOption, {
     key: option,
     value: option
@@ -1548,7 +1602,8 @@ const ToggleGroup = props => {
 /* eslint-disable camelcase */
 const VulnerabilitiesTable = ({
   vulnerabilities,
-  isLoading
+  isLoading,
+  hideToggler
 }) => {
   const getImpact = ({
     severity
@@ -1670,7 +1725,7 @@ const VulnerabilitiesTable = ({
       key: 'vulnerabilities-table__filter-input',
       onChange: onTextInputFilterChange,
       placeholder: 'Filter vulnerabilities'
-    }), React__default.createElement(ToggleGroup, {
+    }), !hideToggler ? React__default.createElement(ToggleGroup, {
       key: 'vulnerabilities-table__toggle-group',
       onChange: onStatusFilterChange,
       "aria-label": 'Vulnerability status filter',
@@ -1684,7 +1739,7 @@ const VulnerabilitiesTable = ({
         id: 'unfixed',
         text: 'Unfixed'
       }]
-    }), React__default.createElement(EcoSelect, {
+    }) : React__default.createElement(React__default.Fragment, null), React__default.createElement(EcoSelect, {
       key: 'vulnerabilities-table__select',
       onChange: onImpactFilterChange,
       "aria-label": 'Impact filter',
@@ -1717,6 +1772,7 @@ const InsertCss = () => {
 const PackagesTable = ({
   vulnerabilities: _vulnerabilities = [],
   rpms: _rpms = [],
+  hideToggler,
   isLoading: _isLoading = false
 }) => {
   const [excludedPackages, setExcludedPackages] = React.useState([]);
@@ -1765,7 +1821,8 @@ const PackagesTable = ({
     title: `Vulnerabilities (${uniqueVulnerabilities.length})`
   }, React.createElement(VulnerabilitiesTable, {
     vulnerabilities: uniqueVulnerabilities,
-    isLoading: _isLoading
+    isLoading: _isLoading,
+    hideToggler: hideToggler
   })), excludedPackages.length > 0 && React.createElement(Tab, {
     eventKey: 1,
     title: `Excluded Packages (${excludedPackages.length})`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/packages-table",
-  "version": "0.2.5",
+  "version": "0.3.2",
   "description": "project description",
   "author": "redhatofficial",
   "license": "MIT",
@@ -54,17 +54,17 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-standard": "^4.0.1",
     "microbundle": "^0.13.3",
-    "node-sass": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
     "rimraf": "^3.0.2",
+    "sass": "^1.57.1",
     "typescript": "^3.7.5"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.101.3",
+    "@patternfly/react-core": "^4.276.6",
     "date-fns": "^2.13.0",
     "formik": "^2.1.4",
     "lodash": "^4.17.21",