@rh-support/manage 2.1.27 → 2.1.30

package/lib/esm/components/TopContentManagement/TopContentProductVersionSelector.js

@@ -1,5 +1,5 @@
 import { products as productsApi } from '@cee-eng/hydrajs';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { useFetch } from '@rh-support/components';
 import { getUniqueSortedVersions, getVersion } from '@rh-support/utils';
@@ -81,9 +81,9 @@ function TopContentProductVersionSelector(props) {
         setSelected(undefined);
     };
     const getProductOptions = (options) => {
-        return options.map((product, id) => (React.createElement(SelectOption, { key: id, value: product, className: "pf-c-select__menu-wrapper" },
-            React.createElement("div", { className: "pf-c-select__menu-item-main" }, product.name),
-            selected && product.name === selected.name && (React.createElement("span", { className: "pf-c-select__menu-item-icon" },
+        return options.map((product, id) => (React.createElement(SelectOption, { key: id, value: product, className: "pf-v5-c-select__menu-wrapper" },
+            React.createElement("div", { className: "pf-v5-c-select__menu-item-main" }, product.name),
+            selected && product.name === selected.name && (React.createElement("span", { className: "pf-v5-c-select__menu-item-icon" },
                 React.createElement(CheckIcon, { "aria-hidden": true }))))));
     };
     const onProductFilter = (_, value) => {
@@ -114,11 +114,11 @@ function TopContentProductVersionSelector(props) {
         React.createElement("div", { className: "toolbar-left" },
             React.createElement("label", { htmlFor: 'tc-product-selector-dropdown-toggle' },
                 React.createElement(Trans, null, "Product")),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: onProductToggle, selections: selected, isOpen: isProductOpen, onSelect: onProductSelect, onClear: onProductClear, placeholderText: t('Select a product') }, (isLoadingProducts && { loadingVariant: 'spinner' }), { onFilter: onProductFilter, isDisabled: isLoadingProducts, id: productLabelId, "data-tracking-id": productLabelId, "aria-label": t(productLabelId) }), getProductOptions(productOptions))),
+            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: (_event, isExpanded) => onProductToggle(isExpanded), selections: selected, isOpen: isProductOpen, onSelect: onProductSelect, onClear: onProductClear, placeholderText: t('Select a product') }, (isLoadingProducts && { loadingVariant: 'spinner' }), { onFilter: onProductFilter, isDisabled: isLoadingProducts, id: productLabelId, "data-tracking-id": productLabelId, "aria-label": t(productLabelId) }), getProductOptions(productOptions))),
         React.createElement("div", { className: "toolbar-right" },
             React.createElement("label", { htmlFor: "version-selector-dropdown-toggle" },
                 React.createElement(Trans, null, "Version")),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.single, onToggle: onVersionToggle, onSelect: onVersionSelect, selections: selectedVersion, isOpen: isVersionOpen, placeholderText: t('Select a version'), isDisabled: isEmpty(versions === null || versions === void 0 ? void 0 : versions.items) }, (isLoadingVersions && { loadingVariant: 'spinner' }), { id: versionLabelId, "data-tracking-id": versionLabelId, "aria-label": t(versionLabelId) }), ((versions === null || versions === void 0 ? void 0 : versions.items) || []).map((version, id) => (React.createElement(SelectOption, { key: id, value: version }, version)))))));
+            React.createElement(Select, Object.assign({ variant: SelectVariant.single, onToggle: (_event, isExpanded) => onVersionToggle(isExpanded), onSelect: onVersionSelect, selections: selectedVersion, isOpen: isVersionOpen, placeholderText: t('Select a version'), isDisabled: isEmpty(versions === null || versions === void 0 ? void 0 : versions.items) }, (isLoadingVersions && { loadingVariant: 'spinner' }), { id: versionLabelId, "data-tracking-id": versionLabelId, "aria-label": t(versionLabelId) }), ((versions === null || versions === void 0 ? void 0 : versions.items) || []).map((version, id) => (React.createElement(SelectOption, { key: id, value: version }, version)))))));
 }
 TopContentProductVersionSelector.defaultProps = defaultProps;
 export { TopContentProductVersionSelector };

package/lib/esm/scss/_main.scss

@@ -8,15 +8,11 @@
     }
 }
 
-.pf-c-accordion .pf-m-expanded ul {
-    list-style-type: disc;
-}
-
-.pf-c-accordion .pf-c-accordion-footer {
+.pf-v5-c-accordion .pf-v5-c-accordion-footer {
     padding: 16px 32px;
 }
 
-.pf-c-accordion .pf-c-accordion__expanded-content-body {
+.pf-v5-c-accordion .pf-v5-c-accordion__expanded-content-body {
     .edit-solution {
         margin-bottom: 2rem;
     }
@@ -29,33 +25,12 @@
             flex-direction: row;
         }
 
-        button {
-            margin-left: 1rem;
-        }
-
         &.add-new-category {
             margin-bottom: 2rem;
         }
     }
 }
 
-.pf-c-accordion .pf-c-accordion__expanded-content-body .pf-c-accordion__expanded-content-footer {
-    display: flex;
-    flex-direction: row;
-
-    .content-actions {
-        margin-left: auto;
-
-        & > * {
-            margin-right: 0.5rem;
-        }
-
-        & > *:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
 .manage {
     header {
         margin-bottom: 1.3rem;
@@ -175,8 +150,8 @@
             border-top: none;
         }
 
-        .pf-c-table__action {
-            .pf-c-dropdown__menu button.pf-m-disabled:hover {
+        .pf-v5-c-table__action {
+            .pf-v5-c-dropdown__menu button.pf-m-disabled:hover {
                 cursor: not-allowed;
             }
         }
@@ -186,14 +161,14 @@
             padding: 0.5rem 1.2rem;
             background-color: #f0f0f0;
 
-            .pf-c-pagination {
+            .pf-v5-c-pagination {
                 padding: 0;
                 background-color: transparent;
 
-                .pf-c-pagination__nav {
+                .pf-v5-c-pagination__nav {
                     align-items: baseline;
 
-                    .pf-c-pagination__nav-page-select {
+                    .pf-v5-c-pagination__nav-page-select {
                         display: flex;
                         align-items: baseline;
                     }
@@ -221,27 +196,27 @@
         border-top: none;
     }
     .top-content-needs-attention {
-        color: var(--pf-global--danger-color--100);
+        color: var(--pf-v5-global--danger-color--100);
     }
     .top-content-tooltip {
-        color: var(--pf-global--danger-color--100);
+        color: var(--pf-v5-global--danger-color--100);
         padding: 2px;
     }
 }
 
 // specific overrides under manage because of a different implementation
-.pf-c-select {
-    .pf-c-select__toggle-wrapper > form:first-child {
+.pf-v5-c-select {
+    .pf-v5-c-select__toggle-wrapper > form:first-child {
         width: 100%;
     }
 
-    .pf-c-select__toggle-wrapper {
-        .pf-c-select__toggle-icon {
+    .pf-v5-c-select__toggle-wrapper {
+        .pf-v5-c-select__toggle-icon {
             margin-left: 4px;
             margin-right: 0;
         }
 
-        .pf-c-select__toggle-typeahead {
+        .pf-v5-c-select__toggle-typeahead {
             border-left: none;
             border-right: none;
         }
@@ -252,7 +227,7 @@
     }
 }
 
-.pf-c-button {
+.pf-v5-c-button {
     font-size: 14px;
 }
 
@@ -275,12 +250,12 @@
     width: -webkit-fill-available;
 }
 
-.pf-c-table__action li:hover button:not(.pf-m-disabled) {
+.pf-v5-c-table__action li:hover button:not(.pf-m-disabled) {
     color: #06c;
 }
 
-.pf-c-table__action li:nth-child(2) button:hover,
-.pf-c-table__action li:nth-child(3) button:hover {
+.pf-v5-c-table__action li:nth-child(2) button:hover,
+.pf-v5-c-table__action li:nth-child(3) button:hover {
     color: #a30000;
 }
 
@@ -319,3 +294,10 @@ svg.hostnameSpinner {
 #requests-detached-toggle-content thead {
     display: none;
 }
+
+.top-content-single-item-footer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}

package/lib/esm/scss/_pf4-overrides.scss

@@ -1,85 +1,82 @@
 // Patternfly overrides
 
-div#top-content-performance-metric.pf-c-modal-box {
-    .pf-c-modal-box__body {
-        .pf-c-title {
+div#top-content-performance-metric.pf-v5-c-modal-box {
+    .pf-v5-c-modal-box__body {
+        .pf-v5-c-title {
             margin-bottom: unset;
         }
         .top-content-tooltip-view-metric-label {
-            color: var(--pf-global--primary-color--100);
+            color: var(--pf-v5-global--primary-color--100);
         }
-        .pf-c-panel__main-body {
-            padding: var(--pf-global--spacer--md);
-        }
-        .pf-c-toggle-group__button {
+        .pf-v5-c-toggle-group__button {
             /* Somehow below style is getting added by Patternfly which is overriding default button padding  
-            * [class*="pf-c-"], [class*="pf-c-"]::before, [class*="pf-c-"]::after {
+            * [class*="pf-v5-c-"], [class*="pf-v5-c-"]::before, [class*="pf-v5-c-"]::after {
                 padding: 0;
                 margin: 0;
                 background-color: transparent;
             */
-            padding: var(--pf-c-toggle-group__button--PaddingTop) var(--pf-c-toggle-group__button--PaddingRight)
-                var(--pf-c-toggle-group__button--PaddingBottom) var(--pf-c-toggle-group__button--PaddingLeft);
+            padding: var(--pf-v5-c-toggle-group__button--PaddingTop) var(--pf-v5-c-toggle-group__button--PaddingRight)
+                var(--pf-v5-c-toggle-group__button--PaddingBottom) var(--pf-v5-c-toggle-group__button--PaddingLeft);
         }
     }
 }
 
-div#top-content-category-limit-guidelines.pf-c-modal-box {
-    .pf-c-modal-box__body {
-        .pf-c-title {
+div#top-content-category-limit-guidelines.pf-v5-c-modal-box {
+    .pf-v5-c-modal-box__body {
+        .pf-v5-c-title {
             margin-bottom: unset;
         }
     }
 }
 
-div#top-content-major-version-performance-metric.pf-c-modal-box {
-    .pf-c-modal-box__body {
+div#top-content-major-version-performance-metric.pf-v5-c-modal-box {
+    .pf-v5-c-modal-box__body {
         overflow-x: unset;
         overflow-y: unset;
-        .pf-c-title {
+        .pf-v5-c-title {
             margin-bottom: unset;
         }
-        .pf-c-toggle-group__button {
+        .pf-v5-c-toggle-group__button {
             /* Somehow below style is getting added by Patternfly which is overriding default button padding  
-            * [class*="pf-c-"], [class*="pf-c-"]::before, [class*="pf-c-"]::after {
+            * [class*="pf-v5-c-"], [class*="pf-v5-c-"]::before, [class*="pf-v5-c-"]::after {
                 padding: 0;
                 margin: 0;
                 background-color: transparent;
             */
-            padding: var(--pf-c-toggle-group__button--PaddingTop) var(--pf-c-toggle-group__button--PaddingRight)
-                var(--pf-c-toggle-group__button--PaddingBottom) var(--pf-c-toggle-group__button--PaddingLeft);
+            padding: var(--pf-v5-c-toggle-group__button--PaddingTop) var(--pf-v5-c-toggle-group__button--PaddingRight)
+                var(--pf-v5-c-toggle-group__button--PaddingBottom) var(--pf-v5-c-toggle-group__button--PaddingLeft);
         }
         .sticky-header {
             position: sticky;
             top: 0;
-            background: var(--pf-c-modal-box--BackgroundColor);
-            z-index: 89; // As .pf-c-toggle-group__button is having z-index: var(--pf-c-toggle-group__button--ZIndex)
-            padding-bottom: var(--pf-global--spacer--sm);
+            background: var(--pf-v5-c-modal-box--BackgroundColor);
+            z-index: 89; // As .pf-v5-c-toggle-group__button is having z-index: var(--pf-v5-c-toggle-group__button--ZIndex)
+            padding-bottom: var(--pf-v5-global--spacer--sm);
         }
         .content {
             height: 30vh;
             overflow: auto;
         }
         .panel-body {
-            padding: var(--pf-global--spacer--md);
+            padding: var(--pf-v5-global--spacer--md);
         }
     }
 }
 
 // Overrides performance metrics modal font weight
 div.performance-metrics-modal {
-    div.pf-c-modal-box__body {
+    div.pf-v5-c-modal-box__body {
         div.sticky-header {
-            div.pf-l-flex.pf-m-justify-content-space-between {
+            div.pf-v5-l-flex.pf-m-justify-content-space-between {
                 // For versions dropdown
-                div.pf-u-w-50.pf-u-pr-md {
-                    div.pf-u-font-weight-bold {
+                div.pf-v5-u-w-50.pf-v5-u-pr-md {
+                    div.pf-v5-u-font-weight-bold {
                         font-weight: 600 !important;
                     }
                 }
                 // For categories dropdown
-                div.pf-u-w-50.pf-u-pl-md {
-                    div.pf-u-font-weight-bold {
+                div.pf-v5-u-w-50.pf-v5-u-pl-md {
+                    div.pf-v5-u-font-weight-bold {
                         font-weight: 600 !important;
                     }
                 }
@@ -88,13 +85,13 @@ div.performance-metrics-modal {
 
         // To override font weight on the accordion text in performance metrics modal - PCM-11644
         div.content {
-            div.pf-c-panel.pf-m-bordered {
-                div.pf-c-panel__main {
-                    div.pf-c-panel__main-body {
-                        dl.pf-c-accordion.pf-m-bordered {
+            div.pf-v5-c-panel.pf-m-bordered {
+                div.pf-v5-c-panel__main {
+                    div.pf-v5-c-panel__main-body {
+                        dl.pf-v5-c-accordion.pf-m-bordered {
                             dt {
                                 button {
-                                    span.pf-c-accordion__toggle-text {
+                                    span.pf-v5-c-accordion__toggle-text {
                                         span {
                                             font-weight: 500 !important;
                                         }
@@ -110,23 +107,28 @@ div.performance-metrics-modal {
 }
 
 #top-content-suggestion {
-    .pf-c-expandable-section__content {
+    .pf-v5-c-expandable-section__content {
         border: unset;
     }
     .card-hint {
-        background-color: var(--pf-global--BackgroundColor--200);
+        background-color: var(--pf-v5-global--BackgroundColor--200);
     }
     .card-body {
-        padding: var(--pf-global--spacer--md);
+        padding: var(--pf-v5-global--spacer--md);
     }
     .hint-title {
-        color: var(--pf-global--primary-color--100);
+        color: var(--pf-v5-global--primary-color--100);
     }
     .accordion_title {
-        color: var(--pf-global--Color--100);
+        color: var(--pf-v5-global--Color--100);
+        margin: 0;
     }
 }
 
 .top-content-panel {
     z-index: 9;
 }
+
+.pf-v5-c-accordion__expandable-content {
+    margin: 0;
+}

package/lib/esm/scss/index.scss

@@ -19,11 +19,11 @@
             }
         }
     }
-    .pf-c-popover {
-        .pf-c-popover__content {
-            .pf-c-popover__body {
+    .pf-v5-c-popover {
+        .pf-v5-c-popover__content {
+            .pf-v5-c-popover__body {
                 .top-content-tooltip-view-metric-label {
-                    color: var(--pf-global--primary-color--100);
+                    color: var(--pf-v5-global--primary-color--100);
                 }
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "2.1.27",
+    "version": "2.1.30",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "homepage": "",
@@ -46,13 +46,13 @@
         "prepublishOnly": "npm run build"
     },
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.16.21",
-        "@patternfly/patternfly": "4.196.7",
+        "@cee-eng/hydrajs": "4.16.33",
+        "@patternfly/patternfly": "5.1.0",
         "@patternfly/pfe-accordion": "1.12.3",
         "@patternfly/pfe-collapse": "1.12.3",
         "@patternfly/pfe-tabs": "1.12.3",
-        "@patternfly/react-core": "4.264.0",
-        "@patternfly/react-table": "4.111.33",
+        "@patternfly/react-core": "5.1.1",
+        "@patternfly/react-table": "5.1.1",
         "i18next": ">=17.0.1",
         "lodash": ">=4.17.15",
         "react": "17.0.2",
@@ -77,19 +77,19 @@
         "typescript": "4.3.5"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.16.21",
-        "@patternfly/patternfly": "4.196.7",
+        "@cee-eng/hydrajs": "4.16.33",
+        "@patternfly/patternfly": "5.1.0",
         "@patternfly/pfe-accordion": "1.12.3",
         "@patternfly/pfe-collapse": "1.12.3",
         "@patternfly/pfe-tabs": "1.12.3",
-        "@patternfly/react-core": "4.264.0",
-        "@patternfly/react-table": "4.111.33",
-        "@rh-support/components": "2.1.22",
-        "@rh-support/configs": "2.0.9",
-        "@rh-support/react-context": "2.1.24",
+        "@patternfly/react-core": "5.1.1",
+        "@patternfly/react-table": "5.1.1",
+        "@rh-support/components": "2.1.25",
+        "@rh-support/configs": "2.0.10",
+        "@rh-support/react-context": "2.1.27",
         "@rh-support/types": "2.0.2",
-        "@rh-support/user-permissions": "2.1.16",
-        "@rh-support/utils": "2.1.10",
+        "@rh-support/user-permissions": "2.1.18",
+        "@rh-support/utils": "2.1.11",
         "@types/react-beautiful-dnd": "^13.0.0",
         "i18next": ">=17.0.1",
         "lodash": ">=4.17.15",
@@ -103,5 +103,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "30819e27405b4d667e866752d5ed11d31f527c11"
+    "gitHead": "e67736e7b8a06c4617cc8e49a905ba7819e5ae63"
 }