@rh-support/manage 1.0.41 → 1.0.43

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNewCategoryDropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAUhG,UAAU,MAAM;IACZ,gBAAgB,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,eAmDnD"}
+{"version":3,"file":"AddNewCategoryDropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAShG,UAAU,MAAM;IACZ,gBAAgB,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,eA4EnD"}

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.js

@@ -1,6 +1,6 @@
-import { Dropdown, ToastNotification } from '@rh-support/components';
-import { toOptions } from '@rh-support/utils';
-import React, { useEffect } from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { ToastNotification } from '@rh-support/components';
+import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
 import { fetchCategories } from '../../../../reducers/TopContentReducer';
@@ -10,11 +10,29 @@ export function AddNewCategoryDropDown(props) {
     const topContentDispatch = useTopContentDispatchContext();
     const allAddedCategories = topContentEditState.map((cat) => cat.categoryName);
     const availableCategories = categories.data.filter((category) => !(allAddedCategories || []).includes(category.categoryName));
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState();
+    const getCategoryOptions = (options) => {
+        return options.map((category, id) => (React.createElement(SelectOption, { key: id, value: category }, category.categoryName)));
+    };
+    const onFilter = (_, value) => {
+        if (!value)
+            return getCategoryOptions(availableCategories);
+        const input = new RegExp(value, 'i');
+        const newOptions = availableCategories.filter((c) => input.test(c.categoryName));
+        return getCategoryOptions(newOptions);
+    };
+    const onToggle = (isExpanded) => {
+        setIsOpen(isExpanded);
+    };
+    const onSelect = (event, selection, isPlaceholder) => {
+        setSelected(selection);
+        props.onCategoryChange(selection);
+        onToggle(false);
+    };
     const onClearCategory = () => {
         props.onCategoryChange(undefined);
-    };
-    const onCategoryChange = (selectedItem) => {
-        props.onCategoryChange(selectedItem.value);
+        setSelected(undefined);
     };
     useEffect(() => {
         try {
@@ -25,8 +43,9 @@ export function AddNewCategoryDropDown(props) {
         }
     }, [topContentDispatch, t]);
     return (React.createElement("div", { className: "form-group add-new-category" },
-        React.createElement(Dropdown, { id: "new-category", name: "new-category", isLoadingList: categories.isFetching, disabled: categories.isFetching || categories.isFetching, required: true, title: t('Select an option or enter a new category'), placeholder: t('Select an option or enter a new category'), list: toOptions(availableCategories, { labelKey: 'categoryName' }), onChange: onCategoryChange, onClearSelection: onClearCategory, searchable: true, label: React.createElement("label", { htmlFor: "new-category" },
-                React.createElement(Trans, null, "Category"),
-                ' ',
-                React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")) })));
+        React.createElement("label", { htmlFor: "new-category" },
+            React.createElement(Trans, null, "Category"),
+            ' ',
+            React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
+        React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: onToggle, isOpen: isOpen, onClear: onClearCategory, onSelect: onSelect, onFilter: onFilter, selections: selected === null || selected === void 0 ? void 0 : selected.categoryName, placeholderText: t('Select an option or enter a new category') }, (categories.isFetching && { loadingVariant: 'spinner' }), { id: "new-category", "data-tracking-id": "new-category" }), getCategoryOptions(availableCategories))));
 }

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestion.js

@@ -18,7 +18,7 @@ export const TopContentSuggestion = () => {
     }, [topContentDispatch, selectedProduct, selectedVersion]);
     if (isEmpty(suggestion.linkedResources))
         return React.createElement(React.Fragment, null);
-    return (React.createElement(Panel, { variant: "raised", className: "pf-u-mx-md pf-u-p-md" },
+    return (React.createElement(Panel, { variant: "raised", className: "pf-u-mx-md pf-u-p-md top-content-panel" },
         React.createElement(PanelMain, null,
             React.createElement(PanelMainBody, null,
                 React.createElement(ExpandableSection, { onToggle: onToggle, isExpanded: isExpanded, toggleContent: React.createElement(Title, { headingLevel: "h6", className: "accordion_title" },

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentSuggestionHintAccept.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAmBrH,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAahE,UAAU,MAAM;IACZ,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,mBAAmB,CAAC;CAClC;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAAC,MAAM,CAmOrD,CAAC"}
+{"version":3,"file":"TopContentSuggestionHintAccept.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAkBrH,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAgBhE,UAAU,MAAM;IACZ,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,mBAAmB,CAAC;CAClC;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAAC,MAAM,CAkPrD,CAAC"}

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.js

@@ -7,18 +7,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ActionGroup, Button, Card, CardBody, Form, FormGroup, Select, SelectOption, SelectVariant, TextInput, Tooltip, ValidatedOptions, } from '@patternfly/react-core';
+import { Button, Card, CardBody, Form, FormGroup, Select, SelectOption, SelectVariant, TextInput, Tooltip, ValidatedOptions, } from '@patternfly/react-core';
 import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
 import { ToastNotification } from '@rh-support/components';
 import { getVersion, isRegularVersion, isValidUrl } from '@rh-support/utils';
-import { isEmpty, isUndefined } from 'lodash';
+import { isEmpty, isUndefined, trim } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { CATEGORY_LIMIT } from '../../../../constants/TopContent';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
+import { flagContentUsage } from '../../../../reducers/TopContentHelpers';
 import { ContentMode, deleteTopContentSuggestion, fetchCategories, saveAddedNewSectionContents, saveAddToTopContent, } from '../../../../reducers/TopContentReducer';
+import CategoryLimit from '../../CategoryLimit/CategoryLimit';
 export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
     const { t } = useTranslation();
-    const { categories, topContentResponse, topContentEditState, selectedProduct, selectedVersion, isCatOnlyForMajorVersion, isAddingCategory, suggestion, } = useTopContentContext();
+    const { categories, topContentResponse, topContentEditState, selectedProduct, selectedVersion, isCatOnlyForMajorVersion, isAddingCategory, suggestion, categoryUsage, } = useTopContentContext();
     const topContentDispatch = useTopContentDispatchContext();
     const [isSelectOpen, setSelectOpen] = useState(false);
     const [selected, setSelected] = useState();
@@ -27,6 +30,7 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
     const [linkToContent, setLinkToContent] = useState('');
     const [isEditClicked, setIsEditClicked] = useState(false);
     const categoryToSave = useMemo(() => topContentEditState.find((category) => category.categoryId === (selected === null || selected === void 0 ? void 0 : selected.id)), [topContentEditState, selected]);
+    const flagContentEditState = useMemo(() => flagContentUsage(topContentEditState, categoryUsage, selectedVersion), [topContentEditState, categoryUsage, selectedVersion]);
     const isMajorVersionOnly = isUndefined(getVersion(selectedVersion).minor);
     const minorSelectedNoMinorContentButAvailableMajorContent = !topContentResponse.isFetching &&
         !isEmpty(topContentResponse.data) &&
@@ -34,6 +38,8 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
         isRegularVersion(selectedVersion) &&
         isCatOnlyForMajorVersion &&
         !isAddingCategory;
+    const isCategoryLimitReached = (minorSelectedNoMinorContentButAvailableMajorContent ? [] : flagContentEditState).length >= CATEGORY_LIMIT.MAX;
+    const isCategoryInList = flagContentEditState.some((c) => c.categoryId === (selected === null || selected === void 0 ? void 0 : selected.id));
     const onToggle = () => {
         setSelectOpen((previousToggleState) => !previousToggleState);
     };
@@ -41,7 +47,11 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
         setSelected(selection);
         onToggle();
     };
-    const isDisabled = isEmpty(linkToContent) || isEmpty(resourceTitle) || isUndefined(selected) || !isValidUrl(linkToContent);
+    const isDisabled = isEmpty(linkToContent) ||
+        isEmpty(trim(resourceTitle)) ||
+        isUndefined(selected) ||
+        !isValidUrl(linkToContent) ||
+        (isCategoryLimitReached && !isCategoryInList);
     const addContentToCategory = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
             setIsSaving(true);
@@ -105,7 +115,7 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
             ToastNotification.addDangerMessage(t('There was an error loading top content categories'));
         }
     }, [topContentDispatch, t]);
-    return (React.createElement(Card, null,
+    return (React.createElement(Card, { className: "pf-u-m-sm" },
         React.createElement(CardBody, { className: "card-hint" },
             React.createElement(Form, null,
                 isEditClicked ? (React.createElement(React.Fragment, null,
@@ -114,7 +124,7 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
                                 ? ValidatedOptions.error
                                 : ValidatedOptions.default })),
                     React.createElement(FormGroup, { label: t('Headline'), isRequired: true, fieldId: "simple-form-email-01" },
-                        React.createElement(TextInput, { isRequired: true, type: "text", id: "top-content-headline-category", name: "top-content-headline-category", "data-tracking-id": "top-content-headline-category", value: resourceTitle, onChange: setResourceTitle, validated: isEmpty(resourceTitle) ? ValidatedOptions.error : ValidatedOptions.default })))) : (React.createElement("span", null,
+                        React.createElement(TextInput, { isRequired: true, type: "text", id: "top-content-headline-category", name: "top-content-headline-category", "data-tracking-id": "top-content-headline-category", value: resourceTitle, onChange: setResourceTitle, validated: isEmpty(trim(resourceTitle)) ? ValidatedOptions.error : ValidatedOptions.default })))) : (React.createElement("span", null,
                     React.createElement(Button, { variant: "link", isInline: true },
                         React.createElement("u", null,
                             React.createElement("a", { className: "hint-title pf-u-font-size-md", target: "_blank", href: linkToContent, rel: "noreferrer" }, resources.resourceTitle))),
@@ -123,7 +133,8 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
                 React.createElement(FormGroup, { label: t('Category'), isRequired: true, fieldId: "simple-form-email-01" },
                     React.createElement(Select, Object.assign({ variant: SelectVariant.single, id: "category-selection", name: "category-selection", "data-testid": "category-selection", placeholderText: "Select a category", onToggle: onToggle, isOpen: isSelectOpen, onSelect: onSelect, selections: selected === null || selected === void 0 ? void 0 : selected.categoryName, isDisabled: categories.isError, loadingVariant: 'spinner' }, (categories.isFetching && { loadingVariant: 'spinner' })), categories.data.map((category, id) => (React.createElement(SelectOption, { key: id, value: category },
                         React.createElement("div", null, category.categoryName)))))),
-                React.createElement(ActionGroup, { className: "pf-u-mt-sm" },
+                React.createElement("div", { className: "pf-u-mt-sm" },
+                    isCategoryLimitReached && !isCategoryInList && !isUndefined(selected) && React.createElement(CategoryLimit, null),
                     React.createElement(Button, { variant: "primary", onClick: onSaveContent, isDisabled: isSaving || isDisabled, isLoading: isSaving, "data-tracking-id": "suggested-content-save-button" },
                         React.createElement(Trans, null, "Save")),
                     React.createElement(Button, { variant: "link", onClick: () => onCancel(false) },

package/lib/esm/components/TopContentManagement/TopContentProductVersionSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentProductVersionSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AASrE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,eAAe,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;CACrB;AAQD,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,2BAG1E;AAqBD,iBAAS,gCAAgC,CAAC,KAAK,EAAE,MAAM,eA4HtD;kBA5HQ,gCAAgC;;;AA+HzC,OAAO,EAAE,gCAAgC,EAAE,CAAC"}
+{"version":3,"file":"TopContentProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentProductVersionSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAS5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,eAAe,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;CACrB;AAQD,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,2BAG1E;AAqBD,iBAAS,gCAAgC,CAAC,KAAK,EAAE,MAAM,eAsItD;kBAtIQ,gCAAgC;;;AAyIzC,OAAO,EAAE,gCAAgC,EAAE,CAAC"}

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

@@ -1,6 +1,7 @@
 import { products as productsApi } from '@cee-eng/hydrajs';
-import { Dropdown, useFetch } from '@rh-support/components';
-import { getUniqueSortedVersions, getVersion, toOption, toOptions } from '@rh-support/utils';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { useFetch } from '@rh-support/components';
+import { getUniqueSortedVersions, getVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -40,10 +41,9 @@ function TopContentProductVersionSelector(props) {
         initialData: [],
     });
     const { request: getProductVersions, isFetching: isLoadingVersions, data: versions, } = useFetch(productsApi.getProductVersions, { initialData: [], postProcessor: postVersionsProcessor });
-    const [isProductInValid, setIsProductInValid] = useState(false);
-    const [isVersionInValid, setIsVersionInValid] = useState(false);
-    const [isProductBlured, setIsProductBlured] = useState(false);
-    const [isVersionBlured, setIsVersionBlured] = useState(false);
+    const [isProductOpen, setIsProductOpen] = useState(false);
+    const [isVersionOpen, setIsVersionOpen] = useState(false);
+    const { selectedProduct, selectedVersion } = props;
     const topContentDispatch = useTopContentDispatchContext();
     /**
      * Fetch products on load
@@ -64,48 +64,49 @@ function TopContentProductVersionSelector(props) {
     }, [versions]);
     const onProductChange = (option) => {
         setIsAddingCategory(topContentDispatch, false);
-        props.onProductChange(option.value);
-        validateProduct(option);
-        isProductValid(option) && getProductVersions(option.value.name);
+        props.onProductChange(option);
+        getProductVersions(option.name);
     };
     const onVersionChange = (option) => {
         setIsAddingCategory(topContentDispatch, false);
-        props.onVersionChange(option.value);
-        validateVersion(option);
+        props.onVersionChange(option);
     };
     const onProductClear = () => {
-        onProductChange(toOption({ name: '', id: '' }, { labelKey: 'name' }));
+        onProductChange({ name: '', id: '' });
     };
-    const onProductOuterClick = (selectedItem) => {
-        setIsProductBlured(true);
+    const getProductOptions = (options) => {
+        return options.map((product, id) => (React.createElement(SelectOption, { key: id, value: product }, product.name)));
     };
-    const onVersionOuterClick = (selectedItem) => {
-        setIsVersionBlured(true);
+    const onProductFilter = (_, value) => {
+        if (!value)
+            return getProductOptions(products);
+        const input = new RegExp(value, 'i');
+        const newOptions = products === null || products === void 0 ? void 0 : products.filter((p) => input.test(p.name));
+        return getProductOptions(newOptions);
     };
-    const validateProduct = (selectedItem) => {
-        setIsProductInValid(!selectedItem);
+    const onProductToggle = (isExpanded) => {
+        setIsProductOpen(isExpanded);
     };
-    const isProductValid = (selectedItem) => {
-        return !isEmpty(selectedItem) && !isEmpty(selectedItem.label);
+    const onProductSelect = (event, selection, isPlaceholder) => {
+        onProductChange(selection);
+        onProductToggle(false);
     };
-    const validateVersion = (selectedItem) => {
-        setIsVersionInValid(isEmpty(selectedItem) || isEmpty(selectedItem.label));
+    const onVersionToggle = (isExpanded) => {
+        setIsVersionOpen(isExpanded);
+    };
+    const onVersionSelect = (e, selection, isPlaceholder) => {
+        onVersionChange(selection);
+        onVersionToggle(false);
     };
-    useEffect(() => {
-        setIsProductInValid(false);
-        setIsVersionInValid(false);
-        isProductBlured && setIsProductInValid(isEmpty(props.selectedProduct.name));
-        isVersionBlured && setIsVersionInValid(isEmpty(props.selectedVersion));
-    }, [isProductBlured, isVersionBlured, props.selectedProduct.name, props.selectedVersion]);
     return (React.createElement("div", { className: "toolbar" },
         React.createElement("div", { className: "toolbar-left" },
             React.createElement("label", { htmlFor: 'tc-product-dropdown-downshift-search' },
                 React.createElement(Trans, null, "Product")),
-            React.createElement(Dropdown, { className: `tc-product-dropdown`, placeholder: t('Select a product'), list: products ? toOptions(products, { labelKey: 'name' }) : [], title: `Select a product`, selectedItem: toOption(props.selectedProduct, { labelKey: 'name' }), isInValid: isProductInValid, onChange: onProductChange, onOuterClick: onProductOuterClick, searchable: true, isLoadingList: isLoadingProducts, onClearSelection: onProductClear, id: "tc-product-dropdown-selector", "data-tracking-id": "tc-product-dropdown-selector" })),
+            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: onProductToggle, selections: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.name, isOpen: isProductOpen, onSelect: onProductSelect, onClear: onProductClear, placeholderText: t('Select a product') }, (isLoadingProducts && { loadingVariant: 'spinner' }), { id: "tc-product-dropdown-selector", "data-tracking-id": "tc-product-dropdown-selector", onFilter: onProductFilter, isDisabled: isLoadingProducts }), getProductOptions(products))),
         React.createElement("div", { className: "toolbar-right" },
             React.createElement("label", { htmlFor: "version-selector-dropdown-toggle" },
                 React.createElement(Trans, null, "Version")),
-            React.createElement(Dropdown, { selectedItem: toOption(props.selectedVersion), list: props.selectedProduct ? toOptions(versions === null || versions === void 0 ? void 0 : versions.items) : [], id: "version-selector-dropdown", placeholder: t('Select a version'), isLoadingList: isLoadingVersions, title: `Versions for ${props.selectedProduct.name}`, disabled: isEmpty(versions === null || versions === void 0 ? void 0 : versions.items), isInValid: isVersionInValid, onChange: onVersionChange, onOuterClick: onVersionOuterClick, "data-tracking-id": "version-dropdown-selector" }))));
+            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: "version-dropdown-selector", "data-tracking-id": "version-dropdown-selector" }), ((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

@@ -307,3 +307,11 @@ div.prefhostnameTooltip {
 svg.hostnameSpinner {
     vertical-align: -0.65rem !important;
 }
+
+#version-dropdown-selector {
+    z-index: 9999;
+}
+
+#tc-product-dropdown-selector {
+    z-index: 9999;
+}

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

@@ -126,3 +126,7 @@ div.performance-metrics-modal {
         color: var(--pf-global--Color--100);
     }
 }
+
+.top-content-panel {
+    z-index: 100;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "1.0.41",
+    "version": "1.0.43",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "homepage": "",
@@ -51,7 +51,7 @@
         "not op_mini all"
     ],
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.14.53",
+        "@cee-eng/hydrajs": "4.15.64",
         "@patternfly/patternfly": "4.196.7",
         "@patternfly/pfe-accordion": "1.12.3",
         "@patternfly/pfe-collapse": "1.12.3",
@@ -87,19 +87,19 @@
         "typescript": "4.3.5"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.14.53",
+        "@cee-eng/hydrajs": "4.15.64",
         "@patternfly/patternfly": "4.196.7",
         "@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": "1.2.23",
+        "@rh-support/components": "1.2.25",
         "@rh-support/configs": "1.0.3",
-        "@rh-support/react-context": "1.0.31",
+        "@rh-support/react-context": "1.0.33",
         "@rh-support/types": "0.2.0",
-        "@rh-support/user-permissions": "1.0.13",
-        "@rh-support/utils": "1.0.11",
+        "@rh-support/user-permissions": "1.0.14",
+        "@rh-support/utils": "1.0.12",
         "@types/react-beautiful-dnd": "^13.0.0",
         "i18next": ">=17.0.1",
         "lodash": ">=4.17.15",
@@ -109,5 +109,5 @@
         "react-i18next": ">=10.11.0",
         "react-router-dom": ">=5.1.2"
     },
-    "gitHead": "5a6ac6cd2418495e7fdd0f48cfaa34a7c627635a"
+    "gitHead": "503c03f099f29076c7cbd553e53c6fe74bf2d749"
 }