@rh-support/troubleshoot 2.7.1 → 2.7.10

package/lib/esm/components/CaseManagement/OpenShiftClusterId.js

@@ -18,6 +18,7 @@ import { useLocation } from 'react-router-dom';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { ClusterRecommendationsContext, ClusterRecommendationsDispatchContext, } from '../../context/ClusterRecommendationsContext';
 import { RouteContext } from '../../context/RouteContext';
+import { SESSION_NO_CLUSTER_REASON_LENGTH_LIMIT } from '../../reducers/CaseConstNTypes';
 import { getUpdatedDescription } from '../../reducers/CaseHelpers';
 import { setCaseDetails, setCaseState } from '../../reducers/CaseReducer';
 import { fetchClusterRecommendations } from '../../reducers/ClusterRecommendationsReducer';
@@ -29,7 +30,7 @@ export const v3Tov4TransitionLink = () => (React.createElement("a", { className:
     React.createElement(Trans, null, "How to transition from v3 to v4?")));
 export const discoverV4ClusterIdLink = () => (React.createElement("a", { className: "show-target", href: "/solutions/4505861", target: "_blank", rel: "noopener noreferrer" }, "How do I determine my OpenShift 4.x Cluster ID?"));
 export const discoverV4ClusterIdLinkError = () => (React.createElement(React.Fragment, null,
-    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
+    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-u-mr-sm" }),
     React.createElement(Trans, { i18nKey: 'v4ClusterRequiredField' },
         "Cluster ID is required.",
         React.createElement("div", null,
@@ -74,7 +75,7 @@ export function OpenShiftClusterId(props) {
             noClusterIdReasonExplanation: '',
             noClusterIdReason: '',
         });
-        setCaseState(caseDispatch, { v3ClusterName: '' });
+        setCaseState(caseDispatch, { v3ClusterName: '', openShiftClusterSupportLevel: '' });
     };
     const clusterStateReset = () => {
         setSelectedReason('');
@@ -89,8 +90,8 @@ export function OpenShiftClusterId(props) {
         if (isEmpty(product))
             return;
         const isClusterVisible = () => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            const hasCluster = yield isClusterIdEnabledForProduct(product, (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult);
+            var _a;
+            const hasCluster = yield isClusterIdEnabledForProduct(product);
             setShowClusterId(hasCluster);
             if (!hasCluster) {
                 resetClusterData();
@@ -116,7 +117,7 @@ export function OpenShiftClusterId(props) {
                     setIsClusterIdInValid(false);
                 }
             }
-            const majorVersion = (_b = getVersion(version)) === null || _b === void 0 ? void 0 : _b.major;
+            const majorVersion = (_a = getVersion(version)) === null || _a === void 0 ? void 0 : _a.major;
             const isOpenShiftV3 = product === 'OpenShift Container Platform' && majorVersion === '3';
             setShowV3TextBox(isOpenShiftV3);
             if (isOpenShiftV3 || noClusterIdReasonExplanation === 'v3-cluster') {
@@ -167,6 +168,7 @@ export function OpenShiftClusterId(props) {
         if (isEmpty(selectedId))
             return;
         resetClusterData();
+        setCaseState(caseDispatch, { openShiftClusterSupportLevel: selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.support_level });
         if (selectedId === 'dont-have-id') {
             setDontKnowSelected(true);
             setSelectedReason(selectedId);
@@ -205,9 +207,9 @@ export function OpenShiftClusterId(props) {
         const infoMessage = v3Selected ? v3Tov4TransitionLink() : discoverV4ClusterIdLink();
         return isNextBtnClickedToShowValidationError && errorMessage ? errorMessage : infoMessage;
     };
-    const onReasonExplanationInputBoxChanged = (noClusterIdReasonExplanation) => {
+    const onReasonExplanationInputBoxChanged = (explanation) => {
         if (noClusterIdReason === 'Other') {
-            setCaseDetails(caseDispatch, { noClusterIdReasonExplanation: noClusterIdReasonExplanation.trim() });
+            setCaseDetails(caseDispatch, { noClusterIdReasonExplanation: explanation });
         }
     };
     const v3ClusterNameInputBoxChanged = (v3Cluster) => {
@@ -222,12 +224,15 @@ export function OpenShiftClusterId(props) {
         setCaseDetails(caseDispatch, { noClusterIdReason: reason });
     };
     const isInVaidNoClusterIdReason = isNextBtnClickedToShowValidationError &&
-        (isEmpty(noClusterIdReason) || (noClusterIdReason === 'Other' && isEmpty(noClusterIdReasonExplanation.trim())));
+        (isEmpty(noClusterIdReason) ||
+            (noClusterIdReason === 'Other' &&
+                (isEmpty(noClusterIdReasonExplanation.trim()) ||
+                    noClusterIdReasonExplanation.trim().length > SESSION_NO_CLUSTER_REASON_LENGTH_LIMIT)));
     if (!showClusterId)
         return null;
     return (React.createElement("div", { className: `${props.className ? props.className : ''}` },
         !showV3TextBox && (React.createElement(OpenshiftDropdownV4, { openshiftDisplayName: openshiftDisplayName, openshiftClusterIDState: openshiftClusterID || selectedReason, onClusterIdStateUpdate: onClusterIdStateUpdate, isClusterIdInvalid: isNextBtnClickedToShowValidationError &&
-                ((isEmpty(openshiftClusterID) && isEmpty(selectedReason)) || isClusterIdInvalid), clusterIdDropdownFormInstructions: clusterIdDropdownFormInstructions(), onClusterClear: resetClusterData, isV3: product !== 'OpenShift Container Platform' })),
+                ((isEmpty(openshiftClusterID) && isEmpty(selectedReason)) || isClusterIdInvalid), clusterIdDropdownFormInstructions: clusterIdDropdownFormInstructions(), onClusterClear: resetClusterData })),
         noClusterIdReasonExplanation !== 'v3-cluster' && dontKnowSelected && !showV3TextBox && (React.createElement(NoClusterIDReasonSelector, { noClusterIdReasonExplanation: noClusterIdReasonExplanation, noClusterIdReason: noClusterIdReason, onReasonInputBoxChanged: onReasonExplanationInputBoxChanged, onReasonChange: onReasonChange, isInValid: isInVaidNoClusterIdReason, isCustomer: isCustomer })),
         (v3Selected || showV3TextBox) && (React.createElement(OpenShiftV3Inputbox, { v3ClusterName: v3ClusterName, onReasonInputBoxChanged: v3ClusterNameInputBoxChanged, isInValid: isEmpty(v3ClusterName.trim()) && isNextBtnClickedToShowValidationError, v3Selected: v3Selected }))));
 }

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.d.ts

@@ -7,14 +7,11 @@ interface IProps extends IDClassNameProps {
     isClusterIdInvalid: boolean;
     clusterIdDropdownFormInstructions?: JSX.Element;
     onClusterClear: () => void;
-    isV3: boolean;
     isDisabled?: boolean;
     noClusterIdReasonExplanation?: string;
     openshiftDisplayName?: string;
+    setOpenshiftDisplayName?: (val: any) => void;
 }
 declare function OpenshiftDropdownV4(props: IProps): React.JSX.Element;
-declare namespace OpenshiftDropdownV4 {
-    var defaultProps: {};
-}
 export { OpenshiftDropdownV4 };
 //# sourceMappingURL=OpenshiftDropdownV4.d.ts.map

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAI5E,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAIjF,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAuBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAsXzC;kBAtXQ,mBAAmB;;;AAyX5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAgB5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;CAC3C;AAsBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAmfzC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.js

@@ -8,9 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { cloud } from '@cee-eng/hydrajs';
-import { Checkbox, Divider } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import { useLRUCache } from '@rh-support/components';
+import { Button, Divider, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { useLRUCache, useSelectKeyboardNavigator } from '@rh-support/components';
 import debounce from 'lodash/debounce';
 import groupBy from 'lodash/groupBy';
 import isEmpty from 'lodash/isEmpty';
@@ -19,17 +19,12 @@ import { Trans, useTranslation } from 'react-i18next';
 import { getDisplayNameForCluster } from '../../utils/caseOpenshiftClusterIdUtils';
 import { PDFContext } from '../CaseEditView/PDFContainer';
 import CaseOpenShiftPopover from '../CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenShiftPopover';
-const defaultProps = {
-    className: '',
-    id: '',
-    isDisabled: false,
-    openshiftDisplayName: '',
-};
-const createState = (external_cluster_id, display_name, openshift_version) => {
+const createState = (external_cluster_id, display_name, openshift_version, support_level) => {
     return {
         display_name,
         external_cluster_id,
         openshift_version: openshift_version || '',
+        support_level,
         toString: () => display_name || '',
         compareTo: function (value) {
             const displayName = this.toString().toLowerCase();
@@ -41,18 +36,7 @@ const createState = (external_cluster_id, display_name, openshift_version) => {
 function OpenshiftDropdownV4(props) {
     const { t } = useTranslation();
     const PER_PAGE = 200;
-    const [clustersRawResponse, setClustersRawResponse] = useState([]);
-    const abortControllerRef = useRef();
-    const [clustersSelectOptions, setClustersSelectOptions] = useState([]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [validated, setValidated] = useState('default');
-    const [inputVal, setInputVal] = useState('');
-    const [showArchivedClusters, setShowArchivedClusters] = useState(false);
-    const [isFetchingClusters, setIsFetchingClusters] = useState(false);
-    const [totalResultsNo, setTotalResultsNo] = useState(0);
-    const { getFromCache, setInCache } = useLRUCache(50);
-    const { isExportingPDF } = useContext(PDFContext);
-    // gets a cluster id and returns display name
+    const LOAD_MORE_VALUE = 'loader';
     const getDisplayName = (id, noClusterIdReasonExplanation, display_name) => {
         if (isEmpty(id))
             return '';
@@ -65,6 +49,22 @@ function OpenshiftDropdownV4(props) {
             return t('The case is for a v3 cluster');
         return display_name || id;
     };
+    const [clustersRawResponse, setClustersRawResponse] = useState([]);
+    const clustersRawResponseRef = useRef(clustersRawResponse);
+    clustersRawResponseRef.current = clustersRawResponse;
+    const abortControllerRef = useRef();
+    const loadMoreInProgressRef = useRef(false);
+    const [clustersSelectOptions, setClustersSelectOptions] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputVal, setInputVal] = useState(() => getDisplayName(props.openshiftClusterIDState, props.noClusterIdReasonExplanation || '', props.openshiftDisplayName || props.openshiftClusterIDState));
+    const inputValRef = useRef(inputVal);
+    inputValRef.current = inputVal;
+    const [showArchivedClusters, setShowArchivedClusters] = useState(false);
+    const [isFetchingClusters, setIsFetchingClusters] = useState(false);
+    const [totalResultsNo, setTotalResultsNo] = useState(0);
+    const { getFromCache, setInCache } = useLRUCache(50);
+    const textInputRef = useRef();
+    const { isExportingPDF } = useContext(PDFContext);
     const onDropdownClear = () => __awaiter(this, void 0, void 0, function* () {
         setIsOpen(false);
         setInputVal('');
@@ -72,45 +72,83 @@ function OpenshiftDropdownV4(props) {
         const fetchedClusters = yield fetchAccountClusters();
         setClustersRawResponse(fetchedClusters.items);
         setTotalResultsNo(fetchedClusters.total);
-        setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
+        setClustersSelectOptions(getClusterOptions(fetchedClusters.items, fetchedClusters.total));
     });
-    const onToggle = (isOpen) => setIsOpen(isOpen);
-    const onViewMoreClick = () => __awaiter(this, void 0, void 0, function* () {
-        const page = Math.floor(clustersRawResponse.length / PER_PAGE) + 1;
-        const fetchedClusters = yield fetchAccountClusters(inputVal, page);
-        const clusterResponse = [...clustersRawResponse, ...((fetchedClusters === null || fetchedClusters === void 0 ? void 0 : fetchedClusters.items) || [])];
-        setClustersRawResponse(clusterResponse);
-        setTotalResultsNo(fetchedClusters.total);
-        setClustersSelectOptions(getClusterOptions(clusterResponse));
+    const onToggle = () => setIsOpen(!isOpen);
+    const onViewMoreClick = (event) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        (_a = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(event);
+        if (loadMoreInProgressRef.current)
+            return;
+        loadMoreInProgressRef.current = true;
+        try {
+            const currentClusters = clustersRawResponseRef.current;
+            const page = Math.floor(currentClusters.length / PER_PAGE) + 1;
+            const fetchedClusters = yield fetchAccountClusters(inputValRef.current, page);
+            const clusterResponse = [...clustersRawResponseRef.current, ...((fetchedClusters === null || fetchedClusters === void 0 ? void 0 : fetchedClusters.items) || [])];
+            setClustersRawResponse(clusterResponse);
+            setTotalResultsNo(fetchedClusters.total);
+            setClustersSelectOptions(getClusterOptions(clusterResponse, fetchedClusters.total));
+            setIsOpen(true);
+        }
+        finally {
+            loadMoreInProgressRef.current = false;
+        }
     });
     const onSelect = (event, selectedCluster) => __awaiter(this, void 0, void 0, function* () {
-        setInputVal('');
-        if (event.target.tagName !== 'BUTTON') {
-            // checkbox is clicked
+        if (selectedCluster === LOAD_MORE_VALUE) {
+            onViewMoreClick(event);
+            return;
+        }
+        if ((selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.type) === 'checkbox') {
             setShowArchivedClusters(!showArchivedClusters);
-            // reset
             props.onClusterClear();
             setClustersRawResponse([]);
+            setInputVal('');
         }
         else {
             props.onClusterIdStateUpdate(selectedCluster);
+            const displayName = selectedCluster.display_name || selectedCluster.toString();
+            setInputVal(displayName);
             setIsOpen(false);
         }
     });
+    // Define dropdown options for keyboard navigation
+    const dropdownOptions = useMemo(() => [
+        { type: 'checkbox', key: 'show-hide-archived-clusters', label: t('Show archived clusters') },
+        { type: 'option', key: 'dont-have-id', label: t("I don't have my Cluster ID") },
+        { type: 'option', key: 'v3-cluster', label: t('The case is for a v3 cluster') },
+    ], [t]);
+    // Use the keyboard navigation hook
+    const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
+        list: dropdownOptions,
+        isOpen,
+        resetIndexOnClose: true,
+        isDisabled: props.isDisabled,
+        setIsOpen,
+        onSelect: (item) => {
+            if (item.type === 'checkbox') {
+                setShowArchivedClusters(!showArchivedClusters);
+                props.onClusterClear();
+                setClustersRawResponse([]);
+            }
+            else if (item.key === 'dont-have-id') {
+                props.onClusterIdStateUpdate(createState('dont-have-id', t("I don't have my Cluster ID")));
+                setIsOpen(false);
+            }
+            else if (item.key === 'v3-cluster') {
+                props.onClusterIdStateUpdate(createState('v3-cluster', t('The case is for a v3 cluster')));
+                setIsOpen(false);
+            }
+        },
+    });
     const dropdownHeaderOptions = useMemo(() => [
-        React.createElement(SelectOption, { key: 'show-hide-archived-clusters', inputId: "check-box" },
-            React.createElement(Checkbox, { label: t('Show archived clusters'), key: "show-archived-clusters", "aria-label": t('Show archived clusters'), id: "show-archived-clusters", "data-tracking-id": "show-hide-archived-clusters", isChecked: showArchivedClusters, className: "archived-clusters-checkbox" })),
+        React.createElement(SelectOption, { hasCheckbox: true, key: "show-archived-clusters", "aria-label": t('Show archived clusters'), id: "show-archived-clusters", className: "archived-clusters-checkbox", "data-tracking-id": "show-hide-archived-clusters", value: { type: 'checkbox' }, isSelected: showArchivedClusters }, t('Show archived clusters')),
         React.createElement(Divider, { component: "div", key: 'cluster-id-options-divider-e' }),
-        React.createElement(SelectOption, { key: 'dont-have-id', value: createState('dont-have-id', t("I don't have my Cluster ID")), "data-tracking-id": "dont-have-cluster-id" }),
-        ...(props.isV3
-            ? [
-                React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')) }),
-            ]
-            : []),
-    ], 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [showArchivedClusters]);
-    const getClusterOptions = (clusters) => {
+        React.createElement(SelectOption, { key: 'dont-have-id', value: createState('dont-have-id', t("I don't have my Cluster ID")), "data-tracking-id": "dont-have-cluster-id", isFocused: focusedItemIndex === 1 }, t("I don't have my Cluster ID")),
+        React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')), "data-tracking-id": "v3-cluster-case", isFocused: focusedItemIndex === 2 }, t('The case is for a v3 cluster')),
+    ], [showArchivedClusters, focusedItemIndex, t]);
+    const getClusterOptions = (clusters, total = totalResultsNo) => {
         const clustersResponseGrouped = groupBy(clusters, 'console_url') || [];
         const domainNames = Object.keys(clustersResponseGrouped) || [];
         // move clusters with empty console_urls to the end of domains array
@@ -124,13 +162,20 @@ function OpenshiftDropdownV4(props) {
         const clusterOptions = [];
         domainNames.forEach((domain, index) => {
             domain !== '' &&
-                clusterOptions.push(React.createElement(SelectOption, { isDisabled: true, className: "pf-v5-u-font-weight-bold pf-v5-u-color-400", value: createState(domain, domain), key: domain + index }));
+                clusterOptions.push(React.createElement(SelectOption, { isDisabled: true, className: "pf-v6-u-font-weight-bold pf-v6-u-color-400", value: createState(domain, domain), key: domain + index }, domain));
             clustersResponseGrouped[domain] &&
                 clustersResponseGrouped[domain].forEach((cluster, i) => {
-                    clusterOptions.push(React.createElement(SelectOption, { key: cluster.external_cluster_id, value: createState(cluster.external_cluster_id, getDisplayNameForCluster(cluster) || cluster.external_cluster_id, cluster.openshift_version) }));
+                    clusterOptions.push(React.createElement(SelectOption, { key: cluster.external_cluster_id, value: createState(cluster.external_cluster_id, getDisplayNameForCluster(cluster) || cluster.external_cluster_id, cluster === null || cluster === void 0 ? void 0 : cluster.openshift_version, cluster === null || cluster === void 0 ? void 0 : cluster.support_level), isDisabled: (cluster === null || cluster === void 0 ? void 0 : cluster.support_level) === 'Self-Support' }, getDisplayNameForCluster(cluster) || cluster.external_cluster_id));
                 });
             clusterOptions.push(React.createElement(Divider, { component: "div", key: index + domain }));
         });
+        if (isFetchingClusters) {
+            clusterOptions.push(React.createElement(SelectOption, { isLoading: true, disabled: true, key: "clusters-loading" },
+                React.createElement(Spinner, { size: "lg" })));
+        }
+        else if (!isFetchingClusters && clusters.length < total) {
+            clusterOptions.push(React.createElement(SelectOption, { isLoadButton: true, key: "display-additional-results", onClick: onViewMoreClick, value: LOAD_MORE_VALUE }, "Display additional results"));
+        }
         return [
             ...dropdownHeaderOptions,
             ...(clusterOptions.length !== 0 ? [React.createElement(Divider, { component: "div", key: 'cluster-id-options-divider' })] : []),
@@ -145,7 +190,7 @@ function OpenshiftDropdownV4(props) {
         try {
             const clustersResponse = yield cloud.getAccountClustersSubscription({
                 search: `external_cluster_id='${clusterId.trim()}'`,
-                fields: 'external_cluster_id,display_name,status,metrics.openshift_version',
+                fields: 'external_cluster_id,display_name,status,metrics.openshift_version,support_level',
             });
             setIsFetchingClusters(false);
             return (((_a = clustersResponse.items.map((item) => {
@@ -154,6 +199,7 @@ function OpenshiftDropdownV4(props) {
                     display_name: item.display_name,
                     external_cluster_id: item.external_cluster_id,
                     openshift_version: ((_b = (_a = item === null || item === void 0 ? void 0 : item.metrics) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.openshift_version) || '',
+                    support_level: item === null || item === void 0 ? void 0 : item.support_level,
                 });
             })) === null || _a === void 0 ? void 0 : _a[0]) || {});
         }
@@ -171,23 +217,20 @@ function OpenshiftDropdownV4(props) {
             }
             else {
                 if (abortControllerRef.current !== undefined) {
-                    // Cancel the previous request
                     abortControllerRef.current.abort();
                 }
-                // recreate a new AbortController for each call
                 let controller = new AbortController();
                 abortControllerRef.current = controller;
                 const clusterStatus = ` AND status not in ('Deprovisioned'${!showArchivedClusters ? ",'Archived'" : ''})`;
                 const searchPhrase = search
                     ? ` AND (external_cluster_id ILIKE '%${search}%' OR display_name ILIKE '%${search}%' OR console_url ILIKE '%${search}%')`
                     : '';
-                // query language: https://github.com/yaacov/tree-search-language
                 clustersResponse = yield cloud.getAccountClustersSubscription({
                     order: 'display_name asc',
                     page,
                     size: PER_PAGE,
                     search: `external_cluster_id!='' ${clusterStatus} ${searchPhrase}`,
-                    fields: 'external_cluster_id,display_name,status,metrics.openshift_version,console_url',
+                    fields: 'external_cluster_id,display_name,status,metrics.openshift_version,console_url,support_level',
                 }, controller.signal);
                 setInCache(`showArchived=${showArchivedClusters}input=${search}p=${page}`, clustersResponse);
             }
@@ -201,6 +244,7 @@ function OpenshiftDropdownV4(props) {
                     console_url: (item === null || item === void 0 ? void 0 : item.console_url) && (item === null || item === void 0 ? void 0 : item.console_url) !== null
                         ? item.console_url.split('.').slice(4).join('.')
                         : '',
+                    support_level: item === null || item === void 0 ? void 0 : item.support_level,
                 });
             });
             return {
@@ -211,7 +255,6 @@ function OpenshiftDropdownV4(props) {
             };
         }
         catch (e) {
-            // silently fails
             setIsFetchingClusters(false);
             return { items: [], totalResult: 0, page: 1, total: 0 };
         }
@@ -225,17 +268,28 @@ function OpenshiftDropdownV4(props) {
                 props.openshiftClusterIDState !== 'v3-cluster' &&
                 isEmpty(props.openshiftDisplayName)) {
                 const fetchedCluster = yield fetchAClusterIdDetails(props.openshiftClusterIDState);
-                props.onClusterIdStateUpdate(Object.assign(Object.assign({}, fetchedCluster), { display_name: getDisplayNameForCluster(fetchedCluster) }));
+                props.setOpenshiftDisplayName &&
+                    props.setOpenshiftDisplayName(getDisplayNameForCluster(fetchedCluster) || props.openshiftClusterIDState);
             }
         });
         getClusterDetails();
         //  no dependency here as we want to run this once on load
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(() => {
+        if (!isEmpty(props.openshiftClusterIDState)) {
+            const displayName = getDisplayName(props.openshiftClusterIDState, props.noClusterIdReasonExplanation || '', props.openshiftDisplayName || props.openshiftClusterIDState);
+            if (isEmpty(inputVal) || inputVal !== displayName) {
+                setInputVal(displayName);
+            }
+        }
+        else if (!isEmpty(inputVal)) {
+            setInputVal('');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.openshiftClusterIDState, props.openshiftDisplayName, props.noClusterIdReasonExplanation]);
     // need to get clusters when user opens the dropdown
     // as the api response is cached np extra call is made on open/close
-    // added observing props.isV3 because re-render
-    // is needed when user on overview page changing version
     useEffect(() => {
         if (!isOpen)
             return;
@@ -246,7 +300,7 @@ function OpenshiftDropdownV4(props) {
             if (!isUnmounted) {
                 setClustersRawResponse(fetchedClusters.items);
                 setTotalResultsNo(fetchedClusters.total);
-                setClustersSelectOptions(getClusterOptions(fetchedClusters.items) || []);
+                setClustersSelectOptions(getClusterOptions(fetchedClusters.items, fetchedClusters.total) || []);
             }
         });
         fetchClusters();
@@ -254,25 +308,18 @@ function OpenshiftDropdownV4(props) {
             isUnmounted = true;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.isV3, showArchivedClusters, isOpen, inputVal]);
-    useEffect(() => {
-        if (props.isClusterIdInvalid) {
-            setValidated('error');
-        }
-        else {
-            setValidated('default');
-        }
-    }, [props.isClusterIdInvalid]);
-    // when user type or paste a clusterId we land here
-    const onTypeaheadInputChanged = (input) => __awaiter(this, void 0, void 0, function* () {
-        setInputVal(input);
-        const fetchedClusters = yield fetchAccountClusters(input);
+    }, [showArchivedClusters, isOpen, inputVal]);
+    const onTextInputChange = (_event, value) => {
+        setInputVal(value);
+        props.onClusterIdStateUpdate({ external_cluster_id: value });
+        debounceFn(value);
+    };
+    const debounceFn = debounce((value) => __awaiter(this, void 0, void 0, function* () {
+        const fetchedClusters = yield fetchAccountClusters(value);
         setClustersRawResponse(fetchedClusters.items);
         setTotalResultsNo(fetchedClusters.total);
-        setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
-        props.onClusterIdStateUpdate({ external_cluster_id: input });
-    });
-    const debounceFn = debounce(onTypeaheadInputChanged, 500);
+        setClustersSelectOptions(getClusterOptions(fetchedClusters.items, fetchedClusters.total));
+    }), 500);
     const getSelectedItem = () => {
         if (!isEmpty(inputVal)) {
             return createState(props.openshiftClusterIDState, inputVal);
@@ -281,6 +328,12 @@ function OpenshiftDropdownV4(props) {
             return createState(props.openshiftClusterIDState, getDisplayName(props.openshiftClusterIDState, props.noClusterIdReasonExplanation || '', props.openshiftDisplayName || props.openshiftClusterIDState));
         }
     };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggle, onKeyDown: onInputKeyDown, isExpanded: isOpen, isFullWidth: true, isDisabled: props.isDisabled },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: inputVal, onClick: onToggle, onChange: onTextInputChange, onKeyDown: onInputKeyDown, autoComplete: "off", innerRef: textInputRef, placeholder: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), role: "combobox", isExpanded: isOpen, "aria-controls": "openshift-cluster-selector-listbox" }),
+            isFetchingClusters ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Spinner, { size: "md" }))) : (inputVal && (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onDropdownClear, "aria-label": t('Clear input value') })))))));
     const titleId = 'case-details-cluster-nickname-selector';
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `${props.className} form-group` },
@@ -289,14 +342,13 @@ function OpenshiftDropdownV4(props) {
                 React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
                 !isExportingPDF ? React.createElement(CaseOpenShiftPopover, null) : ''),
             React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, isDisabled: props.isDisabled, typeAheadAriaLabel: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, onClear: !isExportingPDF ? onDropdownClear : undefined, selections: getSelectedItem(), isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), hasInlineFilter: false, onTypeaheadInputChanged: debounceFn, onFilter: () => undefined, validated: validated, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", required: true }, (isFetchingClusters && { loadingVariant: 'spinner' }), (!isFetchingClusters &&
-                clustersRawResponse.length < totalResultsNo && {
-                loadingVariant: {
-                    text: 'Display additional results',
-                    onClick: onViewMoreClick,
-                },
-            }), { "data-tracking-id": "openshift-cluster-id", className: "openshift-cluster-id" }), clustersSelectOptions),
+            React.createElement(Select, { id: "openshift-cluster-selector", isOpen: isOpen, selected: getSelectedItem(), onSelect: onSelect, onOpenChange: (nextOpen) => {
+                    if (!nextOpen && loadMoreInProgressRef.current) {
+                        return;
+                    }
+                    setIsOpen(nextOpen);
+                }, toggle: toggle, shouldFocusFirstItemOnOpen: true, isScrollable: true, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", "data-tracking-id": "openshift-cluster-id", className: "openshift-cluster-id" },
+                React.createElement(SelectList, { id: "openshift-cluster-selector-listbox" }, clustersSelectOptions)),
             React.createElement("div", { id: "clusterID-validate-helper", className: `form-instructions ${props.isClusterIdInvalid ? 'form-invalid' : ''}` }, props.clusterIdDropdownFormInstructions))));
 }
-OpenshiftDropdownV4.defaultProps = defaultProps;
 export { OpenshiftDropdownV4 };

package/lib/esm/components/CaseManagement/RHAssociatesSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RHAssociatesSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/RHAssociatesSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBA+M1C;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"RHAssociatesSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/RHAssociatesSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAU5D,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBAqN1C;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/lib/esm/components/CaseManagement/RHAssociatesSelector.js

@@ -23,11 +23,13 @@ import React, { useContext, useRef, useState } from 'react';
 import { Token } from 'react-bootstrap-typeahead';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
+import { useCaseUpdateErrorMessage } from '../../hooks/useCaseUpdateErrorMessage';
 import { addingNotifiedUsers, deleteNotifiedUsers, setNotifiedUser } from '../../reducers/CaseReducer';
 import { PDFContext } from '../CaseEditView/PDFContainer';
 import { ContactSelectorInternal } from '../shared/input/ContactSelectorInternal';
 function RHAssociatesSelector(props) {
     const { t } = useTranslation();
+    const caseUpdateError = useCaseUpdateErrorMessage();
     const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const [isRHAssociatesUpdating, setIsRHAssociatesUpdating] = useState(false);
     const ability = useContext(AbilityContext);
@@ -51,7 +53,7 @@ function RHAssociatesSelector(props) {
         }
         catch (e) {
             setIsRHAssociatesUpdating(false);
-            ToastNotification.addDangerMessage(t(`Red Hat associate failed to update`));
+            caseUpdateError.showFieldError(e, t('Red Hat associate'), () => onRhAssociateAdded(addedUsers));
         }
     });
     const onRhAssociateRemoved = (removedUsers) => __awaiter(this, void 0, void 0, function* () {
@@ -64,7 +66,7 @@ function RHAssociatesSelector(props) {
         }
         catch (e) {
             setIsRHAssociatesUpdating(false);
-            ToastNotification.addDangerMessage(t(`Red Hat associate failed to get removed`));
+            caseUpdateError.showFieldError(e, t('Red Hat associate'), () => onRhAssociateRemoved(removedUsers));
         }
     });
     const onNotifiedUserChange = (selectedContacts_1, ...args_1) => __awaiter(this, [selectedContacts_1, ...args_1], void 0, function* (selectedContacts, throwTrackEventOnAdd = false) {
@@ -110,21 +112,23 @@ function RHAssociatesSelector(props) {
     };
     const canNotifyRHAssociates = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.NOTIFY_RH_ASSOCIATES);
     const toolTipRef = useRef();
+    const contactsToExclude = !isEmpty(selectedOwner.data) ? [{ ssoUsername: selectedOwner.data.ssoUsername }] : [];
     if (!canNotifyRHAssociates)
         return React.createElement(React.Fragment, null);
     return (React.createElement(React.Fragment, null, canNotifyRHAssociates && (React.createElement("div", { className: "form-group" },
         React.createElement("label", { className: "react-typeahead-label-wrapper", htmlFor: "get-support-notifications" },
-            React.createElement(Trans, null, "Red Hat associates"),
-            React.createElement(ContactSelectorInternal, { className: "push-bottom-narrow", selectedContacts: filter(selectedNotificationContacts, (c) => c.isInternal), showSelectedContacts: true, contactsToExclude: !isEmpty(selectedOwner.data) ? [{ ssoUsername: selectedOwner.data.ssoUsername }] : [], id: "open-case-rh-notifications", name: "open-case-rh-notifications", multiple: true, contactListParams: {
+            React.createElement(Trans, null, "Internal Contacts"),
+            React.createElement(ContactSelectorInternal, { className: "push-bottom-narrow", selectedContacts: filter(selectedNotificationContacts, (c) => c.isInternal), showSelectedContacts: true, contactsToExclude: contactsToExclude, disableContactRemoval: contactsToExclude, id: "open-case-rh-notifications", name: "open-case-rh-notifications", multiple: true, contactListParams: {
                     internal: false, // to get non-ldap contacts only
                     isInternalContact: true,
                 }, placeholder: t(`Add an internal associate to watch this case`), onSelect: onNotifiedUserChange, renderToken: renderToken, isUpdating: isRHAssociatesUpdating, "data-tracking-id": "case-contact-select-rh-watcher" })),
-        caseNumber && showAddWatchButton() && !isExportingPDF && (React.createElement(Button, { variant: "secondary", onClick: addCurrentUser, type: "button", "data-tracking-id": "case-add-me-rh-watcher" },
+        caseNumber && showAddWatchButton() && !isExportingPDF && (React.createElement(Button, { className: "add-watcher-button", variant: "secondary", onClick: addCurrentUser, type: "button", "data-tracking-id": "case-add-me-rh-watcher", isDisabled: isRHAssociatesUpdating },
             React.createElement(Trans, null, "Add me as a watcher"))),
-        caseNumber && showRemoveWatchButton() && !isExportingPDF && (React.createElement("div", { ref: toolTipRef, className: "remove-me-as-watcher pf-v5-u-display-inline-block" }, isCurrentUserCaseContact ? (React.createElement(React.Fragment, null,
+        caseNumber && showRemoveWatchButton() && !isExportingPDF && (React.createElement("div", { className: "remove-me-as-watcher pf-v6-u-display-inline-block" }, isCurrentUserCaseContact ? (React.createElement(React.Fragment, null,
             React.createElement(Tooltip, { trigger: 'mouseenter focus', triggerRef: toolTipRef, position: TooltipPosition.top, content: React.createElement(Trans, null, "You are case contact and therefore you cannot be removed as watcher") }),
-            React.createElement(Button, { variant: "tertiary", onClick: removeCurrentUser, type: "button", isDisabled: true, "data-tracking-id": "case-remove-me-rh-watcher-case-contact" },
-                React.createElement(Trans, null, "Remove me as a watcher")))) : (React.createElement(Button, { variant: "secondary", onClick: removeCurrentUser, type: "button", "data-tracking-id": "case-remove-me-rh-watcher" },
+            React.createElement("div", { ref: toolTipRef },
+                React.createElement(Button, { className: "remove-watcher-button", variant: "tertiary", onClick: removeCurrentUser, isDisabled: true, "data-tracking-id": "case-remove-me-rh-watcher-case-contact" },
+                    React.createElement(Trans, null, "Remove me as a watcher"))))) : (React.createElement(Button, { className: "remove-watcher-button", variant: "secondary", onClick: removeCurrentUser, "data-tracking-id": "case-remove-me-rh-watcher", isDisabled: isRHAssociatesUpdating },
             React.createElement(Trans, null, "Remove me as a watcher")))))))));
 }
 export { RHAssociatesSelector };

package/lib/esm/components/CaseManagement/SendNotifications/AddContactToGroupModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddContactToGroupModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddContactToGroupModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAGvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,UAAU,CAAC;IAC9B,eAAe,EAAE,UAAU,CAAC;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBAuDnD"}
+{"version":3,"file":"AddContactToGroupModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddContactToGroupModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAGvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,UAAU,CAAC;IAC9B,eAAe,EAAE,UAAU,CAAC;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBAkDnD"}

package/lib/esm/components/CaseManagement/SendNotifications/AddContactToGroupModal.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
+import { Button, Modal, ModalFooter, ModalVariant, TextInput } from '@patternfly/react-core';
 import { ToastNotification, useFetch } from '@rh-support/components';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -30,16 +30,16 @@ export function AddContactToGroupModal(props) {
     const handleClose = () => {
         props.onClose && props.onClose();
     };
-    return (React.createElement(Modal, { variant: ModalVariant.medium, title: t('Add to a group'), isOpen: true, onClose: handleClose, actions: [
-            React.createElement(Button, { spinnerAriaValueText: isFetching ? t('Adding') : undefined, isLoading: isFetching, key: "confirm", variant: "primary", onClick: onAdd, isDisabled: isFetching },
-                React.createElement(Trans, null, "Add")),
-            React.createElement(Button, { key: "cancel", variant: "link", onClick: handleClose },
-                React.createElement(Trans, null, " Cancel")),
-        ] },
+    return (React.createElement(Modal, { variant: ModalVariant.medium, title: t('Add to a group'), isOpen: true, onClose: handleClose },
         React.createElement("label", { htmlFor: "group-member" },
             React.createElement(Trans, null, "New group member")),
         React.createElement(TextInput, { id: "group-member", isDisabled: true, value: props.selectedContact.ssoUsername }),
         React.createElement("label", { htmlFor: "group-selector" },
             React.createElement(Trans, null, "Group")),
-        React.createElement(TextInput, { id: "group-selector", value: props.selectedCaseGroup.name, isDisabled: true })));
+        React.createElement(TextInput, { id: "group-selector", value: props.selectedCaseGroup.name, isDisabled: true }),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { spinnerAriaValueText: isFetching ? t('Adding') : undefined, isLoading: isFetching, key: "confirm", variant: "primary", onClick: onAdd, isDisabled: isFetching },
+                React.createElement(Trans, null, "Add")),
+            React.createElement(Button, { key: "cancel", variant: "link", onClick: handleClose },
+                React.createElement(Trans, null, " Cancel")))));
 }

package/lib/esm/components/CaseManagement/SendNotifications/AddCustomEmailToAccountModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddCustomEmailToAccountModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddCustomEmailToAccountModal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBAsGpD"}
+{"version":3,"file":"AddCustomEmailToAccountModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddCustomEmailToAccountModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBA+GpD"}