@rh-support/troubleshoot 2.7.1 → 2.32.2-prodBackup

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

@@ -1,94 +1,65 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { LoadingIndicator } from '@rh-support/components';
+import { LoadingIndicator, SingleSelectDropdown } from '@rh-support/components';
 import { fetchNoClusterIdReasonsMetadata, GlobalMetadataStateContext, useGlobalDispatchContext, } from '@rh-support/react-context';
 import { haventLoadedMetadata } from '@rh-support/utils';
 import filter from 'lodash/filter';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import map from 'lodash/map';
+import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PDFContext } from '../CaseEditView/PDFContainer';
-const createState = (display_value, display_name) => {
-    return {
-        display_name,
-        display_value,
-        toString: () => display_name || '',
-        compareTo: function (value) {
-            const displayName = this.toString().toLowerCase();
-            const val = (value || '').toString().toLowerCase();
-            return displayName.includes(val);
-        },
-    };
-};
 const NoClusterIDReasonSelector = (props) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const [validated, setValidated] = useState('default');
-    const [inputVal, setInputVal] = useState('');
     const [notRegistered, setNotRegistered] = useState(false);
+    const [inputValue, setInputValue] = useState(props.noClusterIdReasonExplanation || '');
     const globalDispatch = useGlobalDispatchContext();
     const { globalMetadataState: { caseNoClusterIdReasons }, } = useContext(GlobalMetadataStateContext);
     const { isExportingPDF } = useContext(PDFContext);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
     const caseNoClusterIdReasonsList = props.isCustomer
         ? filter(caseNoClusterIdReasons.data, (item) => item !==
             'I am opening a case on behalf of the customer and cannot provide their Cluster ID at this time')
         : caseNoClusterIdReasons.data;
-    const selectRef = useRef(undefined);
-    const onSelect = (event, selection) => {
+    const clearSelection = () => {
+        setNotRegistered(false);
+        setInputValue('');
+        props.onReasonInputBoxChanged('');
+        props.onReasonChange('');
+    };
+    const handleReasonChange = (option) => {
         clearSelection();
-        const selected = selection.display_value;
+        const selected = option.value;
         props.onReasonChange(selected);
-        if (selected === 'Other') {
-            window.setTimeout(() => {
-                var _a;
-                (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.inputRef.current.focus();
-            }, 100);
-        }
         if (selected === 'My cluster is disconnected and / or has not been registered') {
             setNotRegistered(true);
         }
     };
-    const clearSelection = () => {
-        setIsOpen(false);
-        setNotRegistered(false);
-        setInputVal('');
-        props.onReasonInputBoxChanged('');
-        props.onReasonChange('');
+    const handleInputChange = (_event, value) => {
+        setInputValue(value);
+        props.onReasonInputBoxChanged(value);
     };
-    const getSelectedItem = () => {
+    const getDropdownOptions = () => {
+        return map(caseNoClusterIdReasonsList || [], (option) => ({
+            label: t(option),
+            value: option,
+        }));
+    };
+    const getSelectedOption = () => {
         if (props.noClusterIdReason) {
-            if (props.noClusterIdReason === 'Other' || props.noClusterIdReasonExplanation) {
-                return createState(inputVal || props.noClusterIdReasonExplanation, inputVal || props.noClusterIdReasonExplanation);
-            }
-            else {
-                return createState(props.noClusterIdReason, t(props.noClusterIdReason));
-            }
-        }
-        else if (props.noClusterIdReasonExplanation) {
-            return createState(props.noClusterIdReasonExplanation, props.noClusterIdReasonExplanation);
+            return {
+                label: t(props.noClusterIdReason),
+                value: props.noClusterIdReason,
+            };
         }
-    };
-    const onTypeaheadInputChanged = (input) => {
-        setIsOpen(false);
-        setInputVal(input);
-        props.onReasonInputBoxChanged(input);
+        return {
+            label: '',
+            value: '',
+        };
     };
     useEffect(() => {
         if (haventLoadedMetadata(caseNoClusterIdReasons)) {
             fetchNoClusterIdReasonsMetadata(globalDispatch);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [caseNoClusterIdReasons]);
-    useEffect(() => {
-        if (props.isInValid) {
-            setValidated('error');
-        }
-        else {
-            setValidated('default');
-        }
-    }, [props.isInValid]);
+    }, [caseNoClusterIdReasons, globalDispatch]);
     const titleId = 'Reason-name-select';
     const registerMyClusterID = () => (React.createElement("a", { className: `show-target ${isExportingPDF ? 'hide-in-pdf' : ''}`, href: "https://console.redhat.com/openshift/register ", target: "_blank", rel: "noopener noreferrer" },
         React.createElement(Trans, null, "Register my Cluster ID")));
@@ -98,11 +69,16 @@ const NoClusterIDReasonSelector = (props) => {
             React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true },
                 ' ',
                 "*")),
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, selections: getSelectedItem(), isOpen: isOpen, placeholderText: t('Select an option or briefly describe your reason'), noValidate: props.isInValid, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper", validated: validated, className: `${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged, "data-tracking-id": "no-openshift-cluster-id-reason" }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
+        React.createElement("div", { className: "no-cluster-id-reason-container" },
+            React.createElement("div", { className: props.noClusterIdReason === 'Other' ? 'd-none' : '' },
+                React.createElement(SingleSelectDropdown, { placeholder: t('Select an option or briefly describe your reason'), dataTrackingId: "no-openshift-cluster-id-reason", options: getDropdownOptions(), selected: getSelectedOption(), isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, isLoading: caseNoClusterIdReasons.isFetching, isInvalid: props.isInValid, onSelect: handleReasonChange, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper" })),
+            props.noClusterIdReason === 'Other' && (React.createElement("div", { className: "text-input-wrapper" },
+                React.createElement(TextInputGroup, null,
+                    React.createElement(TextInputGroupMain, { value: inputValue, onChange: handleInputChange, placeholder: t('Briefly describe your reason'), "aria-label": t('Other reason description') }))))),
         React.createElement(LoadingIndicator, { show: caseNoClusterIdReasons.isFetching, size: "xs" }),
         React.createElement("p", { id: "validate-reason-helper", className: `form-instructions ${props.isInValid ? 'form-invalid' : ''}` },
             React.createElement(React.Fragment, null,
-                props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
+                props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-u-mr-sm" }),
                 ' ',
                 notRegistered ? (registerMyClusterID()) : (React.createElement(Trans, null, "Describing your reason can help us better understand and support your issue."))))));
 };

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

@@ -29,7 +29,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,

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

@@ -13,8 +13,5 @@ interface IProps extends IDClassNameProps {
     openshiftDisplayName?: string;
 }
 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,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAgBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAmdzC;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,12 +19,6 @@ 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) => {
     return {
         display_name,
@@ -45,12 +39,12 @@ function OpenshiftDropdownV4(props) {
     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 textInputRef = useRef();
     const { isExportingPDF } = useContext(PDFContext);
     // gets a cluster id and returns display name
     const getDisplayName = (id, noClusterIdReasonExplanation, display_name) => {
@@ -74,7 +68,7 @@ function OpenshiftDropdownV4(props) {
         setTotalResultsNo(fetchedClusters.total);
         setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
     });
-    const onToggle = (isOpen) => setIsOpen(isOpen);
+    const onToggle = () => 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);
@@ -84,32 +78,60 @@ function OpenshiftDropdownV4(props) {
         setClustersSelectOptions(getClusterOptions(clusterResponse));
     });
     const onSelect = (event, selectedCluster) => __awaiter(this, void 0, void 0, function* () {
-        setInputVal('');
-        if (event.target.tagName !== 'BUTTON') {
-            // checkbox is clicked
+        if (selectedCluster.type === 'checkbox') {
             setShowArchivedClusters(!showArchivedClusters);
-            // reset
             props.onClusterClear();
             setClustersRawResponse([]);
+            setInputVal('');
         }
-        else {
+        else if (selectedCluster !== 'loader') {
             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") },
+        ...(props.isV3 ? [{ type: 'option', key: 'v3-cluster', label: t('The case is for a v3 cluster') }] : []),
+    ], [props.isV3, 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" }),
+        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 }, "I don't have my Cluster ID"),
         ...(props.isV3
             ? [
-                React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')) }),
+                React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')), isFocused: focusedItemIndex === 2 }),
             ]
             : []),
     ], 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [showArchivedClusters]);
+    [showArchivedClusters, focusedItemIndex]);
     const getClusterOptions = (clusters) => {
         const clustersResponseGrouped = groupBy(clusters, 'console_url') || [];
         const domainNames = Object.keys(clustersResponseGrouped) || [];
@@ -124,13 +146,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.openshift_version) }, 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 },
+                React.createElement(Spinner, { size: "lg" })));
+        }
+        else if (!isFetchingClusters && clustersRawResponse.length < totalResultsNo) {
+            clusterOptions.push(React.createElement(SelectOption, { isLoadButton: true, onClick: onViewMoreClick, value: "loader" }, "Display additional results"));
+        }
         return [
             ...dropdownHeaderOptions,
             ...(clusterOptions.length !== 0 ? [React.createElement(Divider, { component: "div", key: 'cluster-id-options-divider' })] : []),
@@ -232,6 +261,18 @@ function OpenshiftDropdownV4(props) {
         //  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
@@ -255,24 +296,17 @@ function OpenshiftDropdownV4(props) {
         };
         // 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);
+    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);
+    }), 500);
     const getSelectedItem = () => {
         if (!isEmpty(inputVal)) {
             return createState(props.openshiftClusterIDState, inputVal);
@@ -281,6 +315,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 +329,8 @@ 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: (isOpen) => setIsOpen(isOpen), 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;AAS5D,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBAoN1C;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

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

@@ -110,21 +110,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"}

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

@@ -8,11 +8,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { customEmail } from '@cee-eng/hydrajs';
-import { Button, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, TextInput, ValidatedOptions, } from '@patternfly/react-core';
+import { Button, ButtonVariant, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, TextInput, ValidatedOptions, } from '@patternfly/react-core';
 import { ToastNotification, useFetch } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import React, { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 export function AddCustomEmailToAccount(props) {
     const { t } = useTranslation();
     const { request, isFetching } = useFetch(customEmail.addCustomEmailToAccount, { propgateErrors: true });
@@ -45,23 +45,21 @@ export function AddCustomEmailToAccount(props) {
         : isEmpty(firstName.trim())
             ? ValidatedOptions.error
             : ValidatedOptions.default;
-    return (React.createElement(Modal, { variant: ModalVariant.medium, title: t('Add a notification email to your account'), isOpen: true, onClose: handleClose, onEscapePress: handleClose, actions: [
-            React.createElement(Button, { spinnerAriaValueText: isFetching ? t('Adding') : undefined, isLoading: isFetching, key: "confirm", variant: "primary", onClick: onAdd, isDisabled: isFetching || (isSaveButtonClicked && isEmpty(firstName.trim())) },
-                React.createElement(Trans, null, "Add to account")),
-            React.createElement(Button, { key: "cancel", variant: "link", onClick: handleClose, isDisabled: isFetching },
-                React.createElement(Trans, null, "Cancel")),
-        ] },
-        React.createElement("p", { className: "pf-v5-u-mb-lg" },
-            React.createElement(Trans, null, "Note: This email will be added at an account level, not a case level.")),
-        React.createElement(Form, null,
-            React.createElement(FormGroup, { label: t('New email address'), fieldId: "custom-email-address", isRequired: true },
-                React.createElement(TextInput, { id: "custom-email", isDisabled: true, value: props.customEmailAddress, isRequired: true })),
-            React.createElement(FormGroup, { label: t('First name'), fieldId: "custom-email-firstName", isRequired: true },
-                firstNameValidated === 'error' && (React.createElement(FormHelperText, null,
-                    React.createElement(HelperText, null,
-                        React.createElement(HelperTextItem, { variant: "error" },
-                            React.createElement(Trans, null, "First name cannot be empty"))))),
-                React.createElement(TextInput, { id: "custom-email-firstName", value: firstName, isRequired: true, type: "text", validated: firstNameValidated, onChange: (_event, firstName) => onFirstNameChange(firstName), "aria-label": t('First name'), placeholder: t('First name'), maxLength: 254 })),
-            React.createElement(FormGroup, { label: t('Last name'), fieldId: "custom-email-lastName", className: "pf-v5-u-mb-md" },
-                React.createElement(TextInput, { id: "custom-email-lastName", value: lastName, type: "text", onChange: (_event, lastName) => onLastNameChange(lastName), "aria-label": t('Last name'), placeholder: t('Last name'), maxLength: 254 })))));
+    return (React.createElement(Modal, { isOpen: true, onClose: handleClose, variant: ModalVariant.medium, "aria-labelledby": "add-email-modal-title", "aria-describedby": "add-email-modal-body" },
+        React.createElement(ModalHeader, { title: t('Add a notification email to your account'), labelId: "add-email-modal-title" }),
+        React.createElement(ModalBody, { id: "add-email-modal-body" },
+            React.createElement("p", { className: "pf-v6-u-mb-md" }, t('Note: This email will be added at an account level, not a case level.')),
+            React.createElement(Form, null,
+                React.createElement(FormGroup, { label: t('New email address'), fieldId: "custom-email-address", isRequired: true },
+                    React.createElement(TextInput, { id: "custom-email", isDisabled: true, value: props.customEmailAddress, isRequired: true, "aria-label": t('New email address') })),
+                React.createElement(FormGroup, { label: t('First name'), fieldId: "custom-email-firstName", isRequired: true },
+                    React.createElement(TextInput, { id: "custom-email-firstName", value: firstName, isRequired: true, type: "text", validated: firstNameValidated, onChange: (_event, firstName) => onFirstNameChange(firstName), "aria-label": t('First name'), placeholder: t('First name'), maxLength: 254 }),
+                    firstNameValidated === ValidatedOptions.error && (React.createElement(FormHelperText, null,
+                        React.createElement(HelperText, null,
+                            React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('First name cannot be empty')))))),
+                React.createElement(FormGroup, { label: t('Last name'), fieldId: "custom-email-lastName" },
+                    React.createElement(TextInput, { id: "custom-email-lastName", value: lastName, type: "text", onChange: (_event, lastName) => onLastNameChange(lastName), "aria-label": t('Last name'), placeholder: t('Last name'), maxLength: 254 })))),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "confirm", variant: ButtonVariant.primary, onClick: onAdd, isDisabled: isFetching || (isSaveButtonClicked && isEmpty(firstName.trim())), spinnerAriaValueText: isFetching ? t('Loading') : undefined, isLoading: isFetching }, t('Add to account')),
+            React.createElement(Button, { key: "cancel", variant: ButtonVariant.link, onClick: handleClose, isDisabled: isFetching }, t('Cancel')))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseContactSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/CaseContactSelector.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAgBvE,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBA4czC;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CaseContactSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/CaseContactSelector.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAgBvE,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAsdzC;AAED,eAAe,mBAAmB,CAAC"}