@rh-support/manage 2.5.31 → 2.5.33

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

@@ -1,10 +1,10 @@
 import { products as productsApi } from '@cee-eng/hydrajs';
-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 { MenuToggle, Select, SelectOption, TextInputGroup, TextInputGroupMain, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import { SingleSelectDropdown, useFetch } from '@rh-support/components';
 import { getUniqueSortedVersions, getVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useTopContentDispatchContext } from '../../context/TopContentProvider';
 import { setIsAddingCategory } from '../../reducers/TopContentReducer';
@@ -41,10 +41,14 @@ function TopContentProductVersionSelector(props) {
     const { request: getProducts, isFetching: isLoadingProducts, data: products, } = useFetch(productsApi.getProducts, {
         initialData: [],
     });
-    const { request: getProductVersions, isFetching: isLoadingVersions, data: versions, } = useFetch(productsApi.getProductVersions, { initialData: [], postProcessor: postVersionsProcessor });
+    const { request: getProductVersions, data: versions } = useFetch(productsApi.getProductVersions, {
+        initialData: [],
+        postProcessor: postVersionsProcessor,
+    });
     const [isProductOpen, setIsProductOpen] = useState(false);
-    const [isVersionOpen, setIsVersionOpen] = useState(false);
     const [selected, setSelected] = useState(undefined);
+    const [input, setInput] = useState('');
+    const textInputRef = useRef();
     const { selectedVersion } = props;
     const topContentDispatch = useTopContentDispatchContext();
     const productOptions = products === null || products === void 0 ? void 0 : products.map((p, id) => (Object.assign(Object.assign({}, p), { toString: function () {
@@ -79,46 +83,71 @@ function TopContentProductVersionSelector(props) {
     const onProductClear = () => {
         onProductChange({ name: '', id: '' });
         setSelected(undefined);
+        setInput('');
     };
-    const getProductOptions = (options) => {
-        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) => {
-        if (!value)
-            return getProductOptions(productOptions);
-        const input = new RegExp(value, 'i');
-        const newOptions = productOptions === null || productOptions === void 0 ? void 0 : productOptions.filter((p) => input.test(p.name));
-        return getProductOptions(newOptions);
+    const getProductOptions = (options, filterValue = '') => {
+        const filteredOptions = filterValue && filterValue !== (selected === null || selected === void 0 ? void 0 : selected.name)
+            ? options.filter((p) => new RegExp(filterValue, 'i').test(p.name))
+            : options;
+        if (filteredOptions.length === 0) {
+            return React.createElement(SelectOption, { key: "no-results" }, t('No results found'));
+        }
+        return filteredOptions.map((product, id) => (React.createElement(SelectOption, { key: id, value: product, className: "pf-v6-c-select__menu-wrapper", onMouseDown: (e) => onProductSelect(e, product), isSelected: (selected === null || selected === void 0 ? void 0 : selected.name) === product.name },
+            React.createElement("span", null, product.name))));
     };
-    const onProductToggle = (isExpanded) => {
-        setIsProductOpen(isExpanded);
+    const onToggleClick = (e) => {
+        var _a;
+        e.stopPropagation();
+        setIsProductOpen((prev) => !prev);
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const onProductSelect = (event, selection, isPlaceholder) => {
+    const onProductSelect = (e, selection) => {
+        e.preventDefault();
         onProductChange(selection);
         setSelected(selection);
-        onProductToggle(false);
+        setInput(selection.name);
+        setIsProductOpen(false);
     };
-    const onVersionToggle = (isExpanded) => {
-        setIsVersionOpen(isExpanded);
+    const onChange = (e) => {
+        setInput(e.target.value);
+        return [];
     };
-    const onVersionSelect = (e, selection, isPlaceholder) => {
-        onVersionChange(selection);
-        onVersionToggle(false);
+    const onVersionSelect = (selection) => {
+        onVersionChange(selection.value);
     };
     const productLabelId = 'tc-product-dropdown-selector';
     const versionLabelId = 'version-dropdown-selector';
+    const getSelectedDropdownOption = {
+        label: selectedVersion,
+        value: selectedVersion,
+    };
+    const getVersionOptions = (options) => {
+        return options.map((version) => ({
+            label: version,
+            value: version,
+        }));
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isProductOpen, isFullWidth: true, isDisabled: isLoadingProducts, onBlur: () => {
+            setIsProductOpen(false);
+            if (!productOptions.some((p) => p.name.toLowerCase() === input.toLowerCase())) {
+                setInput(selected || '');
+            }
+        } },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: input, onClick: onToggleClick, onChange: onChange, autoComplete: "off", innerRef: textInputRef, placeholder: t('Select a product'), role: "combobox", isExpanded: isProductOpen })),
+        !isEmpty(selected) && (React.createElement(TimesCircleIcon, { "aria-hidden": true, onClick: (e) => {
+                e.stopPropagation();
+                onProductClear();
+            }, className: "pf-v6-u-cursor-pointer pf-v6-u-mt-sm pf-v6-u-ml-sm" }))));
     return (React.createElement("div", { className: "toolbar" },
         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: (_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(Select, Object.assign({ toggle: toggle, selected: selected, isOpen: isProductOpen, onSelect: onProductSelect }, (isLoadingProducts && { loadingVariant: 'spinner' }), { id: productLabelId, "data-tracking-id": productLabelId, "aria-label": t(productLabelId) }), getProductOptions(productOptions, input))),
         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: (_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)))))));
+            React.createElement(SingleSelectDropdown, { placeholder: t('Select a version'), dataTrackingId: "case-details-status-selector", options: getVersionOptions((versions === null || versions === void 0 ? void 0 : versions.items) || []), selected: getSelectedDropdownOption, isDisabled: isEmpty(versions === null || versions === void 0 ? void 0 : versions.items), id: versionLabelId, "data-tracking-id": versionLabelId, onSelect: onVersionSelect, "aria-label": t(versionLabelId) }))));
 }
 TopContentProductVersionSelector.defaultProps = defaultProps;
 export { TopContentProductVersionSelector };

package/lib/esm/scss/_main.scss

@@ -8,11 +8,11 @@
     }
 }
 
-.pf-v5-c-accordion .pf-v5-c-accordion-footer {
+.pf-v6-c-accordion .pf-v6-c-accordion-footer {
     padding: 16px 32px;
 }
 
-.pf-v5-c-accordion .pf-v5-c-accordion__expanded-content-body {
+.pf-v6-c-accordion .pf-v6-c-accordion__expanded-content-body {
     .edit-solution {
         margin-bottom: 2rem;
     }
@@ -157,8 +157,8 @@
             border-top: none;
         }
 
-        .pf-v5-c-table__action {
-            .pf-v5-c-dropdown__menu button.pf-m-disabled:hover {
+        .pf-v6-c-table__action {
+            .pf-v6-c-dropdown__menu button.pf-m-disabled:hover {
                 cursor: not-allowed;
             }
         }
@@ -168,14 +168,14 @@
             padding: 0.5rem 1.2rem;
             background-color: #f0f0f0;
 
-            .pf-v5-c-pagination {
+            .pf-v6-c-pagination {
                 padding: 0;
                 background-color: transparent;
 
-                .pf-v5-c-pagination__nav {
+                .pf-v6-c-pagination__nav {
                     align-items: baseline;
 
-                    .pf-v5-c-pagination__nav-page-select {
+                    .pf-v6-c-pagination__nav-page-select {
                         display: flex;
                         align-items: baseline;
                     }
@@ -183,7 +183,7 @@
             }
         }
     }
-    .pf-v5-c-tabs__item {
+    .pf-v6-c-tabs__item {
         white-space: nowrap;
         a {
             color: gray;
@@ -193,7 +193,7 @@
         }
     }
 
-    .pf-v5-c-tabs__item.pf-m-current {
+    .pf-v6-c-tabs__item.pf-m-current {
         background-color: white;
         min-width: 200px;
         a {
@@ -201,7 +201,7 @@
         }
     }
 
-    .pf-v5-c-tab-content {
+    .pf-v6-c-tab-content {
         flex: 1;
     }
 }
@@ -255,18 +255,18 @@
 }
 
 // specific overrides under manage because of a different implementation
-.pf-v5-c-select {
-    .pf-v5-c-select__toggle-wrapper > form:first-child {
+.pf-v6-c-select {
+    .pf-v6-c-select__toggle-wrapper > form:first-child {
         width: 100%;
     }
 
-    .pf-v5-c-select__toggle-wrapper {
-        .pf-v5-c-select__toggle-icon {
+    .pf-v6-c-select__toggle-wrapper {
+        .pf-v6-c-select__toggle-icon {
             margin-left: 4px;
             margin-right: 0;
         }
 
-        .pf-v5-c-select__toggle-typeahead {
+        .pf-v6-c-select__toggle-typeahead {
             border-left: none;
             border-right: none;
         }
@@ -277,7 +277,11 @@
     }
 }
 
-.pf-v5-c-button {
+.permissions-select {
+    max-width: 80%;
+}
+
+.pf-v6-c-button {
     font-size: 14px;
 }
 
@@ -300,12 +304,12 @@
     width: -webkit-fill-available;
 }
 
-.pf-v5-c-table__action li:hover button:not(.pf-m-disabled) {
+.pf-v6-c-table__action li:hover button:not(.pf-m-disabled) {
     color: #06c;
 }
 
-.pf-v5-c-table__action li:nth-child(2) button:hover,
-.pf-v5-c-table__action li:nth-child(3) button:hover {
+.pf-v6-c-table__action li:nth-child(2) button:hover,
+.pf-v6-c-table__action li:nth-child(3) button:hover {
     color: #a30000;
 }
 

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

@@ -1,82 +1,86 @@
 // Patternfly overrides
 
-div#top-content-performance-metric.pf-v5-c-modal-box {
-    .pf-v5-c-modal-box__body {
-        .pf-v5-c-title {
+div#top-content-performance-metric.pf-v6-c-modal-box {
+    .pf-v6-c-modal-box__body {
+        .pf-v6-c-title {
             margin-bottom: unset;
         }
         .top-content-tooltip-view-metric-label {
             color: var(--pf-v5-global--primary-color--100);
         }
-        .pf-v5-c-toggle-group__button {
+        .pf-v6-c-toggle-group__button {
             /* Somehow below style is getting added by Patternfly which is overriding default button padding  
-            * [class*="pf-v5-c-"], [class*="pf-v5-c-"]::before, [class*="pf-v5-c-"]::after {
+            * [class*="pf-v6-c-"], [class*="pf-v6-c-"]::before, [class*="pf-v6-c-"]::after {
                 padding: 0;
                 margin: 0;
                 background-color: transparent;
             */
-            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);
+            padding: var(--pf-v6-c-toggle-group__button--PaddingBlockStart)
+                var(--pf-v6-c-toggle-group__button--PaddingInlineEnd)
+                var(--pf-v6-c-toggle-group__button--PaddingBlockEnd)
+                var(--pf-v6-c-toggle-group__button--PaddingInlineStart);
         }
     }
 }
 
-div#top-content-category-limit-guidelines.pf-v5-c-modal-box {
-    .pf-v5-c-modal-box__body {
-        .pf-v5-c-title {
+div#top-content-category-limit-guidelines.pf-v6-c-modal-box {
+    .pf-v6-c-modal-box__body {
+        .pf-v6-c-title {
             margin-bottom: unset;
         }
     }
 }
 
-div#top-content-major-version-performance-metric.pf-v5-c-modal-box {
-    .pf-v5-c-modal-box__body {
+div#top-content-major-version-performance-metric.pf-v6-c-modal-box {
+    .pf-v6-c-modal-box__body {
         overflow-x: unset;
         overflow-y: unset;
-        .pf-v5-c-title {
+        .pf-v6-c-title {
             margin-bottom: unset;
         }
-        .pf-v5-c-toggle-group__button {
+        .pf-v6-c-toggle-group__button {
             /* Somehow below style is getting added by Patternfly which is overriding default button padding  
-            * [class*="pf-v5-c-"], [class*="pf-v5-c-"]::before, [class*="pf-v5-c-"]::after {
+            * [class*="pf-v6-c-"], [class*="pf-v6-c-"]::before, [class*="pf-v6-c-"]::after {
                 padding: 0;
                 margin: 0;
                 background-color: transparent;
             */
-            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);
+            padding: var(--pf-v6-c-toggle-group__button--PaddingBlockStart)
+                var(--pf-v6-c-toggle-group__button--PaddingInlineEnd)
+                var(--pf-v6-c-toggle-group__button--PaddingBlockEnd)
+                var(--pf-v6-c-toggle-group__button--PaddingInlineStart);
         }
         .sticky-header {
             position: sticky;
             top: 0;
-            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);
+            background: var(--pf-v6-c-modal-box--BackgroundColor);
+            z-index: 89; // As .pf-v6-c-toggle-group__button is having z-index: var(--pf-v6-c-toggle-group__button--ZIndex)
+            padding-bottom: var(--pf-t--global--spacer--sm);
         }
         .content {
             height: 30vh;
             overflow: auto;
         }
         .panel-body {
-            padding: var(--pf-v5-global--spacer--md);
+            padding: var(--pf-t--global--spacer--md);
         }
     }
 }
 
 // Overrides performance metrics modal font weight
 div.performance-metrics-modal {
-    div.pf-v5-c-modal-box__body {
+    div.pf-v6-c-modal-box__body {
         div.sticky-header {
-            div.pf-v5-l-flex.pf-m-justify-content-space-between {
+            div.pf-v6-l-flex.pf-m-justify-content-space-between {
                 // For versions dropdown
-                div.pf-v5-u-w-50.pf-v5-u-pr-md {
-                    div.pf-v5-u-font-weight-bold {
+                div.pf-v6-u-w-50.pf-v6-u-pr-md {
+                    div.pf-v6-u-font-weight-bold {
                         font-weight: 600 !important;
                     }
                 }
                 // For categories dropdown
-                div.pf-v5-u-w-50.pf-v5-u-pl-md {
-                    div.pf-v5-u-font-weight-bold {
+                div.pf-v6-u-w-50.pf-v6-u-pl-md {
+                    div.pf-v6-u-font-weight-bold {
                         font-weight: 600 !important;
                     }
                 }
@@ -85,13 +89,13 @@ div.performance-metrics-modal {
 
         // To override font weight on the accordion text in performance metrics modal - PCM-11644
         div.content {
-            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 {
+            div.pf-v6-c-panel.pf-m-bordered {
+                div.pf-v6-c-panel__main {
+                    div.pf-v6-c-panel__main-body {
+                        dl.pf-v6-c-accordion.pf-m-bordered {
                             dt {
                                 button {
-                                    span.pf-v5-c-accordion__toggle-text {
+                                    span.pf-v6-c-accordion__toggle-text {
                                         span {
                                             font-weight: 500 !important;
                                         }
@@ -107,14 +111,14 @@ div.performance-metrics-modal {
 }
 
 #top-content-suggestion {
-    .pf-v5-c-expandable-section__content {
+    .pf-v6-c-expandable-section__content {
         border: unset;
     }
     .card-hint {
         background-color: var(--pf-v5-global--BackgroundColor--200);
     }
     .card-body {
-        padding: var(--pf-v5-global--spacer--md);
+        padding: var(--pf-t--global--spacer--md);
     }
     .hint-title {
         color: var(--pf-v5-global--primary-color--100);
@@ -129,53 +133,53 @@ div.performance-metrics-modal {
     z-index: 9;
 }
 
-.pf-v5-c-accordion__expandable-content {
+.pf-v6-c-accordion__expandable-content {
     margin: 0;
 }
 
-div.pf-v5-c-pagination__nav-page-select {
-    span.pf-v5-c-form-control {
+div.pf-v6-c-pagination__nav-page-select {
+    span.pf-v6-c-form-control {
         background-color: white;
     }
 }
 
-.pf-v5-c-select__menu {
+.pf-v6-c-select__menu {
     padding: 0;
 }
 
-.pf-v5-c-form-control.pf-m-disabled {
+.pf-v6-c-form-control.pf-m-disabled {
     background-color: #e0e0e0;
     border-bottom: 1px solid black;
 }
 
-.pf-v5-c-form-control.pf-m-disabled.issue-title-disabled {
+.pf-v6-c-form-control.pf-m-disabled.issue-title-disabled {
     border: none !important;
 }
 
-.pf-v5-c-chip {
+.pf-v6-c-chip {
     .pf-v5-svg {
         font-size: 12px;
     }
 }
 
-.pf-v5-c-switch__label {
+.pf-v6-c-switch__label {
     color: black !important;
     font-size: 16px;
     font-weight: 400;
     outline: none !important;
 }
 
-.pf-v5-c-menu__content {
+.pf-v6-c-menu__content {
     width: 100%;
 }
 
-.pf-v5-c-accordion .pf-v5-c-accordion__toggle {
+.pf-v6-c-accordion .pf-v6-c-accordion__toggle {
     padding: 1rem !important;
 }
 
-.pf-v5-c-chip-group__list {
+.pf-v6-c-chip-group__list {
     padding: 0;
-    .pf-v5-c-chip-group__list-item {
+    .pf-v6-c-chip-group__list-item {
         margin: 0;
     }
 }

package/lib/esm/scss/index.scss

@@ -13,15 +13,15 @@
             min-width: 0;
             background-color: #ededed;
 
-            & > section.pf-v5-c-tab-content {
+            & > section.pf-v6-c-tab-content {
                 padding: 3rem;
                 background-color: #fff;
             }
         }
     }
-    .pf-v5-c-popover {
-        .pf-v5-c-popover__content {
-            .pf-v5-c-popover__body {
+    .pf-v6-c-popover {
+        .pf-v6-c-popover__content {
+            .pf-v6-c-popover__body {
                 .top-content-tooltip-view-metric-label {
                     color: var(--pf-v5-global--primary-color--100);
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "2.5.31",
+    "version": "2.5.33",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "license": "ISC",
@@ -46,9 +46,9 @@
     },
     "peerDependencies": {
         "@cee-eng/hydrajs": "4.18.57",
-        "@patternfly/patternfly": "5.4.2",
-        "@patternfly/react-core": "5.4.2",
-        "@patternfly/react-table": "5.4.2",
+        "@patternfly/patternfly": "6.2.1",
+        "@patternfly/react-core": "6.2.1",
+        "@patternfly/react-table": "6.2.1",
         "lodash": ">=4.17.15",
         "mark.js": "^8.11.1",
         "react": "18.2.0",
@@ -76,15 +76,15 @@
     },
     "dependencies": {
         "@cee-eng/hydrajs": "4.18.57",
-        "@patternfly/patternfly": "5.4.2",
-        "@patternfly/react-core": "5.4.2",
-        "@patternfly/react-table": "5.4.2",
-        "@rh-support/components": "2.5.25",
+        "@patternfly/patternfly": "6.2.1",
+        "@patternfly/react-core": "6.2.1",
+        "@patternfly/react-table": "6.2.1",
+        "@rh-support/components": "2.5.27",
         "@rh-support/configs": "2.0.21",
-        "@rh-support/react-context": "2.5.27",
+        "@rh-support/react-context": "2.5.29",
         "@rh-support/types": "2.0.5",
-        "@rh-support/user-permissions": "2.5.17",
-        "@rh-support/utils": "2.5.16",
+        "@rh-support/user-permissions": "2.5.18",
+        "@rh-support/utils": "2.5.17",
         "@types/react-beautiful-dnd": "^13.0.0",
         "i18next": "^23.15.0",
         "lodash": ">=4.17.15",
@@ -103,5 +103,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "1784fd712681254600c3586c364804051ddfd8a7"
+    "gitHead": "3f2c96a3a976d37cffe4052f7c7bfefbf1018949"
 }