@rh-support/troubleshoot 0.2.87 → 0.2.90

package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.js

@@ -64,9 +64,9 @@ export function ReopenCaseModal(props) {
         onDropdownToggle(false);
     };
     const isDescriptionEmpty = isEmpty(reopenDescription === null || reopenDescription === void 0 ? void 0 : reopenDescription.trim());
-    return (React.createElement(Modal, { id: "case-reopen-modal", title: t(`Re-opening case ${props.caseNumber}`), "aria-describedby": "case-reopen-modal", isOpen: true, onClose: props.onClose, showClose: true, actions: [
+    return (React.createElement(Modal, { id: "case-reopen-modal", title: t(`Reopening case ${props.caseNumber}`), "aria-describedby": "case-reopen-modal", isOpen: true, onClose: props.onClose, showClose: true, actions: [
             React.createElement(Button, { key: "submit-description", variant: ButtonVariant.primary, onClick: onSubmit, isLoading: props.isUpdating, isDisabled: isDescriptionEmpty || showValidationError || props.isUpdating, "data-tracking-id": "reopen-case-description-modal-submit" },
-                React.createElement(Trans, null, "Re-open case")),
+                React.createElement(Trans, null, "Reopen case")),
             React.createElement(Button, { key: "close-modal", variant: ButtonVariant.secondary, onClick: props.onClose, isDisabled: props.isUpdating, "data-tracking-id": "reopen-case-description-modal-cancel" },
                 React.createElement(Trans, null, "Cancel")),
         ], variant: ModalVariant.medium },

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAaA,wBAAgB,sBAAsB,gBA8GrC"}
+{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,sBAAsB,gBAkPrC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.js

@@ -7,98 +7,204 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ToastNotification } from '@rh-support/components';
-import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
+import { LoadingIndicator, ToastNotification } from '@rh-support/components';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { getVersion } from '@rh-support/utils';
+import debounce from 'lodash/debounce';
+import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../../context/CaseContext';
-import { updateCaseDetails } from '../../../../../reducers/CaseReducer';
+import { setCaseDetails, updateCaseDetails } from '../../../../../reducers/CaseReducer';
 import { getIsClusterIdInvalid, isClusterIdEnabledForProduct } from '../../../../../utils/caseOpenshiftClusterIdUtils';
-import { CaseOpenshiftDropdownV4, fetchClusterIdDetails } from './CaseOpenshiftDropdownV4';
+import { NoClusterIDReasonSelector } from '../../../../CaseManagement/NoClusterIDReasonSelector';
+import { discoverV4ClusterIdLink, discoverV4ClusterIdLinkError, isInvalidErrorMessage, } from '../../../../CaseManagement/OpenShiftClusterId';
+import { fetchClusterIdDetails, OpenshiftDropdownV4 } from '../../../../CaseManagement/OpenshiftDropdownV4';
 export function CaseOpenshiftClusterId() {
-    const { openshiftClusterID, caseNumber, product } = useCaseSelector((state) => ({
+    const { openshiftClusterID, product, version, caseNumber, openshiftClusterVersion, noClusterIdReason, noClusterIdReasonExplanation, selectedAccountDetails, } = useCaseSelector((state) => ({
         openshiftClusterID: state.caseDetails.openshiftClusterID,
         product: state.caseDetails.product,
+        version: state.caseDetails.version,
         caseNumber: state.caseDetails.caseNumber,
+        openshiftClusterVersion: state.caseDetails.openshiftClusterVersion,
+        noClusterIdReason: state.caseDetails.noClusterIdReason,
+        noClusterIdReasonExplanation: state.caseDetails.noClusterIdReasonExplanation,
+        selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const { t } = useTranslation();
-    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
-    const [isClusterIdUpdating, setIsClusterIdUpdating] = useState(false);
-    const [showSection, setShowSection] = useState(false);
-    const [openshiftClusterIDState, setOpenshiftClusterIDState] = useState(openshiftClusterID);
+    const { globalMetadataState: { pcmConfig, allProducts, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const majorVersion = (version && getVersion(version).major) || '';
+    const isOpenShiftV3 = majorVersion === '3';
+    const isCustomer = loggedInUserRights.data.isAccountSameAsLoggedInAccount(selectedAccountDetails.data.accountNumber);
+    const [showClusterId, setShowClusterId] = useState(false);
     const [isClusterIdInvalid, setIsClusterIdInValid] = useState(false);
+    const [dontKnowSelected, setDontKnowSelected] = useState(false);
+    const [selectedReason, setSelectedReason] = useState('');
     const [isFetchingClusterDetails, setIsFetchingClusterDetails] = useState(false);
-    const canEditCase = useCanEditCase();
-    useEffect(() => {
-        if (openshiftClusterIDState !== openshiftClusterID) {
-            setOpenshiftClusterIDState(openshiftClusterIDState);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [openshiftClusterID]);
-    const clusterIdUpdate = (caseDetails) => __awaiter(this, void 0, void 0, function* () {
-        setIsClusterIdUpdating(true);
-        try {
-            yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
-            setIsClusterIdUpdating(false);
-            ToastNotification.addSuccessMessage(t(`OpenShift Cluster ID has been successfully updated`));
-        }
-        catch (e) {
-            setIsClusterIdUpdating(false);
-            ToastNotification.addDangerMessage(t(`OpenShift Cluster ID failed to updated`));
-        }
-    });
-    const onClusterIdStateUpdate = (openshiftClusterInputIdState) => {
-        setOpenshiftClusterIDState(openshiftClusterInputIdState);
-        const isClusterIdInvalid = getIsClusterIdInvalid(openshiftClusterInputIdState);
-        setIsClusterIdInValid(isClusterIdInvalid);
-    };
-    const onClusterIdStateCancel = () => {
-        setOpenshiftClusterIDState(openshiftClusterID);
-        setIsClusterIdInValid(false);
+    const [localOpenshiftClusterIDState, setLocalOpenshiftClusterIDState] = useState(openshiftClusterID);
+    const [isClusterIdUpdating, setIsClusterIdUpdating] = useState(false);
+    const [isReasonUpdating, setIsReasonUpdating] = useState(false);
+    const { t } = useTranslation();
+    const clusterStateReset = () => {
+        setSelectedReason('');
+        setDontKnowSelected(false);
     };
-    const onClusterIdSave = (selectedCluster) => __awaiter(this, void 0, void 0, function* () {
-        const openshiftClusterInputIdState = selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.external_id;
-        const isClusterIdInvalid = getIsClusterIdInvalid(openshiftClusterInputIdState);
-        setIsClusterIdInValid(isClusterIdInvalid);
-        if (isClusterIdInvalid || openshiftClusterInputIdState === openshiftClusterID)
+    const setClusterVersion = (openshiftClusterID, clusterDetails) => __awaiter(this, void 0, void 0, function* () {
+        if (!openshiftClusterID || getIsClusterIdInvalid(openshiftClusterID))
             return;
-        const caseDetails = { openshiftClusterID: openshiftClusterInputIdState };
-        if (selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.openshift_version) {
-            caseDetails.openshiftClusterVersion = selectedCluster.openshift_version;
+        let openshiftClusterVersion;
+        if (clusterDetails && clusterDetails.external_id === openshiftClusterID && clusterDetails.openshift_version) {
+            openshiftClusterVersion = clusterDetails.openshift_version;
         }
         else {
-            setIsFetchingClusterDetails(true);
-            const clusterDetails = yield fetchClusterIdDetails(openshiftClusterInputIdState);
-            caseDetails.openshiftClusterVersion = (clusterDetails === null || clusterDetails === void 0 ? void 0 : clusterDetails.openshift_version) || '';
-            setIsFetchingClusterDetails(false);
+            const clusterDetails = yield fetchClusterIdDetails(openshiftClusterID);
+            openshiftClusterVersion = clusterDetails === null || clusterDetails === void 0 ? void 0 : clusterDetails.openshift_version;
         }
-        yield clusterIdUpdate(caseDetails);
-        setOpenshiftClusterIDState(openshiftClusterInputIdState);
+        setCaseDetails(caseDispatch, { openshiftClusterVersion });
     });
     useEffect(() => {
         var _a;
         const isClusterVisible = () => __awaiter(this, void 0, void 0, function* () {
             var _b;
             const hasCluster = yield isClusterIdEnabledForProduct(product, (_b = allProducts.data) === null || _b === void 0 ? void 0 : _b.productsResult);
-            setShowSection(hasCluster);
-            if (!hasCluster && openshiftClusterID) {
-                // reset the cluster id if product is changed and it's not visible for a product
-                onClusterIdStateUpdate('');
+            setShowClusterId(hasCluster);
+            // when product changes from a product with cluster to a product without cluster, reset the clusterId
+            const isResetClusterID = (!hasCluster || isOpenShiftV3) && openshiftClusterID;
+            if (isResetClusterID) {
+                const caseDetails = {
+                    openshiftClusterID: '',
+                    noClusterIdReasonExplanation: '',
+                    noClusterIdReason: '',
+                };
+                yield clusterIdUpdate(caseDetails, false);
+                setCaseDetails(caseDispatch, caseDetails);
             }
         });
-        if ((((_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) || []).length > 0) {
+        if ((((_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) || []).length) {
             isClusterVisible();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [product, allProducts.data]);
-    const onClusterIdChange = (selectedCluster) => {
-        if (canEditCase.alert())
+    }, [product, version, pcmConfig, allProducts.data]);
+    // user may change product and version we need to reset internal state
+    // context api state will be reset on parent component each time user changes product and version
+    useEffect(() => {
+        clusterStateReset(); //=>
+    }, [product, version]);
+    /**
+     * Hook to make sure that if cluster id comes from session or someother source
+     * we also fetch the details for the cluster id so that we can have fields like cluster version while creating the case
+     */
+    useEffect(() => {
+        const isClusterIdInvalid = getIsClusterIdInvalid(openshiftClusterID);
+        setIsClusterIdInValid(isClusterIdInvalid);
+        if (openshiftClusterID && !isClusterIdInvalid && isEmpty(openshiftClusterVersion)) {
+            setClusterVersion(openshiftClusterID);
+        }
+        if (!isEmpty(noClusterIdReason)) {
+            setDontKnowSelected(true);
+            setSelectedReason('dont-have-id');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [noClusterIdReason, openshiftClusterID, openshiftClusterVersion]);
+    const clusterIdUpdate = (caseDetails, showToast = true) => __awaiter(this, void 0, void 0, function* () {
+        if (showToast)
+            setIsClusterIdUpdating(true);
+        try {
+            yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
+            if (showToast) {
+                setIsClusterIdUpdating(false);
+                ToastNotification.addSuccessMessage(t(`OpenShift Cluster ID has been successfully updated`));
+            }
+        }
+        catch (e) {
+            if (showToast) {
+                setIsClusterIdUpdating(false);
+                ToastNotification.addDangerMessage(t(`OpenShift Cluster ID failed to updated`));
+            }
+        }
+    });
+    const onClusterIdSave = (selectedCluster) => __awaiter(this, void 0, void 0, function* () {
+        const selectedClusterId = selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.external_id;
+        if (isEmpty(selectedClusterId))
             return;
-        onClusterIdStateUpdate(selectedCluster.external_id);
+        setLocalOpenshiftClusterIDState(selectedClusterId);
+        if (selectedClusterId === 'dont-have-id') {
+            setDontKnowSelected(true);
+            setSelectedReason(selectedClusterId);
+            setIsClusterIdInValid(false);
+        }
+        else {
+            const isClusterIdInvalid = getIsClusterIdInvalid(selectedClusterId);
+            setIsClusterIdInValid(isClusterIdInvalid);
+            if (isClusterIdInvalid || selectedClusterId === openshiftClusterID)
+                return;
+            const caseDetails = {
+                openshiftClusterID: selectedClusterId,
+                noClusterIdReasonExplanation: '',
+                noClusterIdReason: '',
+            };
+            if (selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.openshift_version) {
+                caseDetails.openshiftClusterVersion = selectedCluster.openshift_version;
+            }
+            else {
+                setIsFetchingClusterDetails(true);
+                const clusterDetails = yield fetchClusterIdDetails(selectedClusterId);
+                caseDetails.openshiftClusterVersion = (clusterDetails === null || clusterDetails === void 0 ? void 0 : clusterDetails.openshift_version) || '';
+                setIsFetchingClusterDetails(false);
+            }
+            yield clusterIdUpdate(caseDetails);
+            setDontKnowSelected(false);
+            setSelectedReason('');
+        }
+    });
+    const clusterIdDropdownFormInstructions = () => {
+        const errorMessage = isClusterIdInvalid
+            ? isInvalidErrorMessage()
+            : isEmpty(openshiftClusterID) && isEmpty(selectedReason)
+                ? discoverV4ClusterIdLinkError()
+                : null;
+        const infoMessage = discoverV4ClusterIdLink();
+        return errorMessage ? errorMessage : infoMessage;
     };
-    if (!showSection)
+    const onReasonExplanationInputBoxChanged = (explanationInput) => __awaiter(this, void 0, void 0, function* () {
+        explanationInput = (explanationInput || '').trim();
+        if (explanationInput) {
+            const caseDetails = {
+                noClusterIdReason: 'Other',
+                openshiftClusterID: '',
+                noClusterIdReasonExplanation: explanationInput,
+            };
+            try {
+                setCaseDetails(caseDispatch, { noClusterIdReasonExplanation: explanationInput });
+                yield clusterIdUpdate(caseDetails);
+            }
+            catch (e) {
+                setCaseDetails(caseDispatch, { noClusterIdReasonExplanation });
+            }
+        }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debounceFn = useCallback(debounce(onReasonExplanationInputBoxChanged, 1000), []);
+    const onReasonChange = (reason) => __awaiter(this, void 0, void 0, function* () {
+        if (!reason || reason === noClusterIdReason)
+            return;
+        try {
+            setIsReasonUpdating(true);
+            const caseDetails = { openshiftClusterID: '', noClusterIdReason: reason, noClusterIdReasonExplanation: '' };
+            setCaseDetails(caseDispatch, { noClusterIdReason: reason });
+            yield clusterIdUpdate(caseDetails);
+        }
+        catch (e) {
+            setCaseDetails(caseDispatch, { noClusterIdReason });
+        }
+        setIsReasonUpdating(false);
+    });
+    const isInVaidNoClusterIdReason = isEmpty(noClusterIdReason) || (noClusterIdReason === 'Other' && isEmpty(noClusterIdReasonExplanation.trim()));
+    if (!showClusterId || isOpenShiftV3)
         return null;
-    return (React.createElement(CaseOpenshiftDropdownV4, { isClusterIdUpdating: isClusterIdUpdating || isFetchingClusterDetails, originalOpenshiftClusterID: openshiftClusterID, openshiftClusterIDState: openshiftClusterIDState, onClusterIdStateUpdate: onClusterIdChange, onClusterIdSave: onClusterIdSave, onClusterIdClear: onClusterIdSave, onClusterIdCancel: onClusterIdStateCancel, onDropdownOuterClick: onClusterIdStateCancel, isClusterIdInvalid: isClusterIdInvalid, setIsClusterIdInValid: setIsClusterIdInValid }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OpenshiftDropdownV4, { openshiftClusterIDState: localOpenshiftClusterIDState || selectedReason, onClusterIdStateUpdate: onClusterIdSave, isClusterIdInvalid: (isEmpty(localOpenshiftClusterIDState) && isEmpty(selectedReason)) || isClusterIdInvalid, clusterIdDropdownFormInstructions: clusterIdDropdownFormInstructions(), onClusterClear: () => setLocalOpenshiftClusterIDState(''), isV4: true, isDisabled: isClusterIdUpdating || isFetchingClusterDetails }),
+        (dontKnowSelected || noClusterIdReasonExplanation || noClusterIdReason) && (React.createElement(NoClusterIDReasonSelector, { noClusterIdReasonExplanation: noClusterIdReasonExplanation, noClusterIdReason: noClusterIdReason, onReasonInputBoxChanged: debounceFn, onReasonChange: onReasonChange, isInValid: isInVaidNoClusterIdReason, isCustomer: isCustomer, isDisabled: isReasonUpdating || isFetchingClusterDetails })),
+        React.createElement(LoadingIndicator, { show: isClusterIdUpdating, size: "xs" })));
 }

package/lib/esm/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RMEEscalationList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAqB,MAAM,2CAA2C,CAAC;AAwB/F,UAAU,MAAM;IACZ,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAgMtD"}
+{"version":3,"file":"RMEEscalationList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAqB,MAAM,2CAA2C,CAAC;AAwB/F,UAAU,MAAM;IACZ,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAoMtD"}

package/lib/esm/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.js

@@ -71,6 +71,10 @@ export default function RMEEscalationList(props) {
         }
         catch (e) {
             ToastNotification.addDangerMessage(e);
+            window === null || window === void 0 ? void 0 : window.Raven.captureException(e);
+            window === null || window === void 0 ? void 0 : window.Raven.captureMessage('RME form submit error', {
+                level: 'error',
+            });
         }
         finally {
             escalationUpdateInProgessIds.current = escalationUpdateInProgessIds.current.filter((item) => item !== escalationNum);

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

@@ -5,6 +5,7 @@ interface IProps {
     noClusterIdReason: string;
     isInValid: boolean;
     isCustomer: boolean;
+    isDisabled?: boolean;
 }
 declare const NoClusterIDReasonSelector: (props: IProps) => JSX.Element;
 export { NoClusterIDReasonSelector };

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

@@ -1 +1 @@
-{"version":3,"file":"NoClusterIDReasonSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/NoClusterIDReasonSelector.tsx"],"names":[],"mappings":"AAcA,UAAU,MAAM;IACZ,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB;AA0BD,QAAA,MAAM,yBAAyB,UAAW,MAAM,gBAuI/C,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"NoClusterIDReasonSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/NoClusterIDReasonSelector.tsx"],"names":[],"mappings":"AAcA,UAAU,MAAM;IACZ,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA0BD,QAAA,MAAM,yBAAyB,UAAW,MAAM,gBAsI/C,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

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

@@ -95,7 +95,7 @@ const NoClusterIDReasonSelector = (props) => {
         React.createElement("label", { id: titleId },
             React.createElement(Trans, null, "I don't have my Cluster ID, because:"),
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: onToggle, onSelect: onSelect, onClear: clearSelection, 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: `form-control${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
+        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: onToggle, 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: `form-control${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
         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,

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

@@ -1,3 +1,6 @@
 export declare const v3Tov4TransitionLink: () => JSX.Element;
+export declare const discoverV4ClusterIdLink: () => JSX.Element;
+export declare const discoverV4ClusterIdLinkError: () => JSX.Element;
+export declare const isInvalidErrorMessage: () => JSX.Element;
 export declare function OpenShiftClusterId(): JSX.Element;
 //# sourceMappingURL=OpenShiftClusterId.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,oBAAoB,mBAShC,CAAC;AAqBF,wBAAgB,kBAAkB,gBAsRjC"}
+{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,oBAAoB,mBAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAKxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAIjC,CAAC;AAEF,wBAAgB,kBAAkB,gBAsRjC"}

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

@@ -27,14 +27,14 @@ import { fetchClusterIdDetails, OpenshiftDropdownV4 } from './OpenshiftDropdownV
 import { OpenShiftV3Inputbox } from './OpenShiftV3Inputbox';
 export const v3Tov4TransitionLink = () => (React.createElement("a", { className: "show-target", href: "https://access.redhat.com/documentation/en-us/openshift_container_platform/4.8/html-single/migrating_from_openshift_container_platform_3_to_4/index", target: "_blank", rel: "noopener noreferrer" },
     React.createElement(Trans, null, "How to transition from v3 to v4?")));
-const discoverV4ClusterIdLink = () => (React.createElement("a", { className: "show-target", href: "/solutions/4505861", target: "_blank", rel: "noopener noreferrer" },
+export const discoverV4ClusterIdLink = () => (React.createElement("a", { className: "show-target", href: "/solutions/4505861", target: "_blank", rel: "noopener noreferrer" },
     React.createElement(Trans, null, "How do I determine my OpenShift 4.x Cluster ID?")));
-const discoverV4ClusterIdLinkError = () => (React.createElement(React.Fragment, null,
+export const discoverV4ClusterIdLinkError = () => (React.createElement(React.Fragment, null,
     React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-u-mr-sm" }),
     React.createElement(Trans, null, "Required field."),
     " ",
     discoverV4ClusterIdLink()));
-const isInvalidErrorMessage = () => (React.createElement(React.Fragment, null,
+export const isInvalidErrorMessage = () => (React.createElement(React.Fragment, null,
     React.createElement(Trans, null, "Cluster Id is not valid. "),
     " ",
     discoverV4ClusterIdLink()));

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

@@ -7,6 +7,7 @@ interface IProps extends IDClassNameProps {
     clusterIdDropdownFormInstructions?: JSX.Element;
     onClusterClear: () => void;
     isV4: boolean;
+    isDisabled?: boolean;
 }
 declare const fetchClusterIdDetails: (clusterId: string) => Promise<ICluster>;
 declare function OpenshiftDropdownV4(props: IProps): JSX.Element;

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,EAAsB,QAAQ,EAAqB,MAAM,iBAAiB,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAUjF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;CACjB;AAaD,QAAA,MAAM,qBAAqB,cAAqB,MAAM,sBASrD,CAAC;AAeF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eA6OzC;kBA7OQ,mBAAmB;;;AAgP5B,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,QAAQ,EAAqB,MAAM,iBAAiB,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAUjF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,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;CACxB;AAcD,QAAA,MAAM,qBAAqB,cAAqB,MAAM,sBASrD,CAAC;AAeF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eA6OzC;kBA7OQ,mBAAmB;;;AAgP5B,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,CAAC"}

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

@@ -20,6 +20,7 @@ import CaseOpenShiftPopover from '../CaseEditView/Tabs/CaseDetails/CaseOpenshift
 const defaultProps = {
     className: '',
     id: '',
+    isDisabled: false,
 };
 const fetchClusterIdDetails = (clusterId) => __awaiter(void 0, void 0, void 0, function* () {
     try {
@@ -112,7 +113,6 @@ function OpenshiftDropdownV4(props) {
                 ]
                 : []),
             React.createElement(SelectOption, { key: 'dont-have-id', value: createState('dont-have-id', t("I don't have my Cluster ID")) }),
-            ...(clusterOptions.length !== 0 ? [React.createElement(Divider, { component: "div", key: 'cluster-id-last-divider' })] : []),
         ];
     };
     const fetchAccountClusters = (search = '') => __awaiter(this, void 0, void 0, function* () {
@@ -197,7 +197,7 @@ function OpenshiftDropdownV4(props) {
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"),
                 React.createElement(CaseOpenShiftPopover, null)),
             React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), onToggle: onToggle, onSelect: onSelect, onClear: onDropdownClear, 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: onTypeaheadInputChanged, onFilter: () => undefined, validated: validated, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", required: true }, (isFetchingClusters && { loadingVariant: 'spinner' }), (!isFetchingClusters &&
+            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: onToggle, onSelect: onSelect, onClear: onDropdownClear, 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: onTypeaheadInputChanged, onFilter: () => undefined, validated: validated, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", required: true }, (isFetchingClusters && { loadingVariant: 'spinner' }), (!isFetchingClusters &&
                 PER_PAGE <= clustersRawResponse.length && {
                 loadingVariant: {
                     text: 'Display additional results',

package/lib/esm/components/Recommendations/ClusterRecommendationItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClusterRecommendationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationItems.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AAe5F,UAAU,MAAM;IACZ,sBAAsB,EAAE,sBAAsB,EAAE,CAAC;CACpD;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,eA8FvD"}
+{"version":3,"file":"ClusterRecommendationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationItems.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AAe5F,UAAU,MAAM;IACZ,sBAAsB,EAAE,sBAAsB,EAAE,CAAC;CACpD;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,eAiGvD"}

package/lib/esm/components/Recommendations/ClusterRecommendationItems.js

@@ -33,7 +33,7 @@ export function ClusterRecommendationItems(props) {
             React.createElement("h3", null, rule.description)),
         React.createElement("pfe-accordion-panel", null,
             React.createElement("p", null,
-                React.createElement(Label, { color: riskLabels[rule.total_risk].color },
+                React.createElement(Label, { icon: riskLabels[rule.total_risk].icon, className: riskLabels[rule.total_risk].className },
                     React.createElement(Trans, null, riskLabels[rule.total_risk].label))),
             React.createElement("p", null, rule.details || ''),
             rule.reason && (React.createElement(React.Fragment, null,

package/lib/esm/components/shared/Constants.d.ts

@@ -52,20 +52,24 @@ export declare const markdownInlineFileSelectEvent = "PCM-Next > Markdown-toolba
 export declare const markdownFilePasteEvent = "PCM-Next > Markdown-toolbar-file-paste";
 export declare const riskLabels: {
     1: {
+        icon: JSX.Element;
         label: string;
-        color: string;
+        className: string;
     };
     2: {
+        icon: JSX.Element;
         label: string;
-        color: string;
+        className: string;
     };
     3: {
+        icon: JSX.Element;
         label: string;
-        color: string;
+        className: string;
     };
     4: {
+        icon: JSX.Element;
         label: string;
-        color: string;
+        className: string;
     };
 };
 //# sourceMappingURL=Constants.d.ts.map

package/lib/esm/components/shared/Constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Constants.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/Constants.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBA+BE;AAEF;;GAEG;AACH,oBAAY,iBAAiB;IACzB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,IAAI,cAAc;IAClB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,sBAAsB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,kBAAkB,yBAAyB;CAC9C;AAED,eAAO,MAAM,8BAA8B,oDAAoD,CAAC;AAEhG,eAAO,MAAM,oCAAoC,wDAAwD,CAAC;AAC1G,eAAO,MAAM,6BAA6B,4CAA4C,CAAC;AACvF,eAAO,MAAM,sBAAsB,2CAA2C,CAAC;AAE/E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;CAKtB,CAAC"}
+{"version":3,"file":"Constants.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/Constants.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBA+BE;AAEF;;GAEG;AACH,oBAAY,iBAAiB;IACzB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,IAAI,cAAc;IAClB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,sBAAsB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,kBAAkB,yBAAyB;CAC9C;AAED,eAAO,MAAM,8BAA8B,oDAAoD,CAAC;AAEhG,eAAO,MAAM,oCAAoC,wDAAwD,CAAC;AAC1G,eAAO,MAAM,6BAA6B,4CAA4C,CAAC;AACvF,eAAO,MAAM,sBAAsB,2CAA2C,CAAC;AAE/E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;CAKtB,CAAC"}

package/lib/esm/components/shared/Constants.js

@@ -1,3 +1,8 @@
+import AngleDoubleDownIcon from '@patternfly/react-icons/dist/js/icons/angle-double-down-icon';
+import AngleDoubleUpIcon from '@patternfly/react-icons/dist/js/icons/angle-double-up-icon';
+import CriticalRiskIcon from '@patternfly/react-icons/dist/js/icons/critical-risk-icon';
+import EqualsIcon from '@patternfly/react-icons/dist/js/icons/equals-icon';
+import React from 'react';
 export default {
     languagesMap: {
         en: 'English',
@@ -51,8 +56,8 @@ export const recsViewedFromNoAttachmentModalEvent = 'PCM-Next > No-Attachment-mo
 export const markdownInlineFileSelectEvent = 'PCM-Next > Markdown-toolbar-file-select';
 export const markdownFilePasteEvent = 'PCM-Next > Markdown-toolbar-file-paste';
 export const riskLabels = {
-    1: { label: 'Low', color: 'blue' },
-    2: { label: 'Moderate', color: 'orange' },
-    3: { label: 'Important', color: 'red' },
-    4: { label: 'Critical', color: 'red' },
+    1: { icon: React.createElement(AngleDoubleDownIcon, null), label: 'Low', className: 'risk-label-low' },
+    2: { icon: React.createElement(EqualsIcon, null), label: 'Moderate', className: 'risk-label-moderate' },
+    3: { icon: React.createElement(AngleDoubleUpIcon, null), label: 'Important', className: 'risk-label-important' },
+    4: { icon: React.createElement(CriticalRiskIcon, null), label: 'Critical', className: 'risk-label-critical' },
 };

package/lib/esm/reducers/CaseReducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseReducer.d.ts","sourceRoot":"","sources":["../../../src/reducers/CaseReducer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CaseReducer.d.ts","sourceRoot":"","sources":["../../../src/reducers/CaseReducer.ts"],"names":[],"mappings":"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"}

package/lib/esm/reducers/CaseReducer.js

@@ -501,6 +501,8 @@ export const fetchCaseDetails = (dispatch, caseNumber, loggedInUserRights, refre
             secondCaseInactivityWarningSentAt: (data === null || data === void 0 ? void 0 : data.secondCaseInactivityWarningSentAt) || undefined,
             groupName: data.groupName || '',
             remoteSessionTermsAcked: (_h = data.remoteSessionTermsAcked) !== null && _h !== void 0 ? _h : false,
+            noClusterIdReason: data.noClusterIdReason || '',
+            noClusterIdReasonExplanation: data.noClusterIdReasonExplanation || '',
         };
         caseDetails.chats = data === null || data === void 0 ? void 0 : data.chats;
         caseDetails.comments = data === null || data === void 0 ? void 0 : data.comments;

package/lib/esm/scss/_main.scss

@@ -935,3 +935,16 @@ div.pf-c-alert.ea-rule-alert > div.pf-c-alert__description > p {
 .anchor-tag-link-td-none {
     text-decoration: none;
 }
+
+.risk-label-low {
+    background-color: var(--pf-global--palette--blue-300);
+}
+.risk-label-moderate {
+    background-color: var(--pf-global--palette--gold-400);
+}
+.risk-label-important {
+    background-color: var(--pf-global--palette--orange-300);
+}
+.risk-label-critical {
+    background-color: var(--pf-global--palette--red-200);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "0.2.87",
+    "version": "0.2.90",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -28,11 +28,11 @@
     "peerDependencies": {
         "@cee-eng/hydrajs": "4.7.22",
         "@cee-eng/ui-toolkit": "1.1.6",
-        "@patternfly/patternfly": "4.176.2",
+        "@patternfly/patternfly": "4.185.1",
         "@patternfly/pfe-accordion": "1.12.3",
         "@patternfly/pfe-collapse": "1.12.3",
         "@patternfly/pfe-tabs": "1.12.3",
-        "@patternfly/react-core": "4.194.0",
+        "@patternfly/react-core": "4.202.16",
         "@rh-support/api": "0.3.9",
         "@rh-support/components": "^0.1.3",
         "@rh-support/react-context": "^0.1.3",
@@ -65,17 +65,17 @@
     "dependencies": {
         "@cee-eng/hydrajs": "4.7.22",
         "@cee-eng/ui-toolkit": "1.1.6",
-        "@patternfly/patternfly": "4.176.2",
+        "@patternfly/patternfly": "4.185.1",
         "@patternfly/pfe-accordion": "1.12.3",
         "@patternfly/pfe-collapse": "1.12.3",
         "@patternfly/pfe-icon": "^1.12.3",
         "@patternfly/pfe-tabs": "1.12.3",
-        "@patternfly/react-core": "4.194.0",
+        "@patternfly/react-core": "4.202.16",
         "@progress/kendo-drawing": "^1.6.0",
         "@progress/kendo-react-pdf": "^3.12.0",
         "@rh-support/api": "0.3.13",
-        "@rh-support/components": "1.1.55",
-        "@rh-support/react-context": "0.2.55",
+        "@rh-support/components": "1.1.56",
+        "@rh-support/react-context": "0.2.56",
         "@rh-support/types": "0.2.0",
         "@rh-support/user-permissions": "0.2.44",
         "@rh-support/utils": "0.2.33",
@@ -143,5 +143,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "a3df00d1fcf2e999400a0b17f5ac00f2a32d878d"
+    "gitHead": "8a76fae83bb7941c95d0d7cc8c88ec846fbd3b20"
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftDropdownV4.d.ts

@@ -1,22 +0,0 @@
-import { ICluster } from '@rh-support/api';
-import { IDClassNameProps } from '@rh-support/types/shared';
-interface IProps extends IDClassNameProps {
-    openshiftClusterIDState: string;
-    onClusterIdStateUpdate: (cluster: Partial<ICluster>) => void;
-    isClusterIdInvalid: boolean;
-    setIsClusterIdInValid: (flag: boolean) => void;
-    isClusterIdUpdating?: boolean;
-    originalOpenshiftClusterID?: string;
-    onClusterIdSave?: (cluster: Partial<ICluster>) => void;
-    onClusterIdCancel?: (cluster: Partial<ICluster>) => void;
-    onClusterIdClear?: (cluster: Partial<ICluster>) => void;
-    onDropdownOuterClick?: (cluster: Partial<ICluster>) => void;
-    formInstructions?: JSX.Element;
-}
-declare const fetchClusterIdDetails: (clusterId: string) => Promise<ICluster>;
-declare function CaseOpenshiftDropdownV4(props: IProps): JSX.Element;
-declare namespace CaseOpenshiftDropdownV4 {
-    var defaultProps: {};
-}
-export { CaseOpenshiftDropdownV4, fetchClusterIdDetails };
-//# sourceMappingURL=CaseOpenshiftDropdownV4.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftDropdownV4.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CaseOpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftDropdownV4.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,QAAQ,EAAqB,MAAM,iBAAiB,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,0BAA0B,CAAC;AAa/E,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC7D,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACvD,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACxD,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAClC;AAeD,QAAA,MAAM,qBAAqB,cAAqB,MAAM,sBASrD,CAAC;AAEF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAyS7C;kBAzSQ,uBAAuB;;;AA4ShC,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftDropdownV4.js

@@ -1,228 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { getAccountClusters } from '@rh-support/api';
-import { AsyncDropDownList, InlineEdit, LoadingIndicator, useFetch } from '@rh-support/components';
-import { toOption, toOptions } from '@rh-support/utils';
-import groupBy from 'lodash/groupBy';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { getDisplayNameById, getDisplayNameForCluster, invalidGuidHelperText, } from '../../../../../utils/caseOpenshiftClusterIdUtils';
-import CaseOpenShiftPopover from './CaseOpenShiftPopover';
-const defaultProps = {
-    originalOpenshiftClusterID: '',
-    isClusterIdUpdating: false,
-    className: '',
-    id: '',
-};
-const fetchClusterIdDetails = (clusterId) => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        const clustersResponse = yield getAccountClusters({
-            order: 'display_name asc',
-            search: `external_id ILIKE '%${clusterId}%'`,
-        });
-        const clusterDetails = (clustersResponse.items || []).find((item) => item.external_id === clusterId);
-        return clusterDetails;
-    }
-    catch (e) { }
-});
-function CaseOpenshiftDropdownV4(props) {
-    const { t } = useTranslation();
-    const inputRef = useRef(undefined);
-    const PER_PAGE = 200;
-    const { request: getAccountClustersRequest, isFetching: isFetchingClusters } = useFetch(getAccountClusters, {
-        propgateErrors: true,
-    });
-    const [clusters, setClusters] = useState([]);
-    const [clustersRawResponse, setClustersRawResponse] = useState([]);
-    const [showClusterIdInputBox, setShowClusterIdInputBox] = useState(false);
-    const [haveClusterFromApi, setHaveClusterFromApi] = useState(false);
-    const abortControllerRef = useRef(undefined);
-    const getClusterObj = (clusterId) => {
-        const selectedCluster = clustersRawResponse.find((item) => item.external_id === clusterId) || {};
-        return Object.assign({ external_id: clusterId }, selectedCluster);
-    };
-    const onInlineEditSave = () => __awaiter(this, void 0, void 0, function* () {
-        haveClusterFromApi && setShowClusterIdInputBox(false);
-        props.onClusterIdSave
-            ? yield props.onClusterIdSave(getClusterObj(props.openshiftClusterIDState))
-            : props.onClusterIdStateUpdate(getClusterObj(props.openshiftClusterIDState));
-    });
-    const onInlineEditCancel = () => {
-        props.onClusterIdCancel
-            ? props.onClusterIdCancel(getClusterObj(props.originalOpenshiftClusterID))
-            : props.onClusterIdStateUpdate(getClusterObj(props.originalOpenshiftClusterID));
-        haveClusterFromApi && setShowClusterIdInputBox(false);
-    };
-    const onInlineEditInputChange = (e) => {
-        props.onClusterIdStateUpdate(getClusterObj(e.target.value));
-    };
-    const onDropdownClear = () => __awaiter(this, void 0, void 0, function* () {
-        props.onClusterIdClear
-            ? yield props.onClusterIdClear(getClusterObj(''))
-            : props.onClusterIdStateUpdate(getClusterObj(''));
-    });
-    const onDropdownOuterClick = () => {
-        props.onDropdownOuterClick
-            ? props.onDropdownOuterClick(getClusterObj(props.openshiftClusterIDState))
-            : props.onClusterIdStateUpdate(getClusterObj(props.openshiftClusterIDState));
-        setShowClusterIdInputBox(false);
-    };
-    const onDropdownClusterChange = (selectedCluster) => __awaiter(this, void 0, void 0, function* () {
-        if (selectedCluster.label === 'Not Listed') {
-            notListed();
-            return;
-        }
-        const openshiftClusterID = selectedCluster.value.external_id;
-        props.onClusterIdSave
-            ? props.onClusterIdSave(getClusterObj(openshiftClusterID))
-            : props.onClusterIdStateUpdate(getClusterObj(openshiftClusterID));
-    });
-    const notListed = () => {
-        setShowClusterIdInputBox(true);
-        window.setTimeout(() => {
-            var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, 100);
-    };
-    const getClusterOptions = () => {
-        const clusterOptions = [];
-        const clustersResponseGrouped = groupBy(clusters, 'dns.base_domain');
-        const domainNames = Object.keys(clustersResponseGrouped);
-        // move undefined to the end of domains array
-        const undefinedIndex = domainNames.findIndex((i) => i === 'undefined');
-        if (undefinedIndex !== -1 && undefinedIndex !== domainNames.length - 1) {
-            domainNames.splice(undefinedIndex, 1);
-            domainNames.push('undefined');
-        }
-        for (let i = 0, max = domainNames.length; i < max; i++) {
-            // add domain name
-            clusterOptions.push({
-                children: (React.createElement(React.Fragment, null,
-                    i !== 0 && React.createElement("div", { className: "pf-c-divider", role: "separator" }),
-                    domainNames[i] !== 'undefined' && (React.createElement("div", { className: "pf-u-font-weight-bold pf-u-ml-md pf-u-color-400 pf-u-mt-sm", "aria-hidden": "true" }, domainNames[i])))),
-                isNonActionable: true,
-                isNotSelectable: true,
-                display_name: domainNames[i],
-            });
-            // add clusters under the domain name
-            clustersResponseGrouped[domainNames[i]].forEach((item) => {
-                clusterOptions.push({
-                    display_name: item.display_name,
-                    external_id: item.external_id,
-                });
-            });
-        }
-        return [
-            {
-                children: (React.createElement("button", { className: "cta-link" },
-                    React.createElement(Trans, null, "Cluster is not listed"))),
-                isNotSearchable: true,
-                display_name: 'Not Listed',
-            },
-            ...clusterOptions,
-        ];
-    };
-    const fetchAccountClusters = (search = '', finalResult = PER_PAGE) => __awaiter(this, void 0, void 0, function* () {
-        const page = finalResult / PER_PAGE;
-        try {
-            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;
-            // query language: https://github.com/yaacov/tree-search-language
-            const clustersResponse = yield getAccountClustersRequest({
-                order: 'display_name asc',
-                page,
-                size: PER_PAGE,
-                search: `external_id ILIKE '%${search}%' OR display_name ILIKE '%${search}%' OR dns.base_domain ILIKE '%${search}%'`,
-            }, controller.signal);
-            const items = clustersResponse.items.map((item) => ({
-                display_name: getDisplayNameForCluster(item),
-                external_id: item.external_id,
-                dns: item.dns,
-            }));
-            setClustersRawResponse(clustersResponse.items);
-            return {
-                items,
-                totalResult: clustersResponse.total,
-                page: clustersResponse.page,
-            };
-        }
-        catch (e) {
-            // silently fails
-            setClustersRawResponse([]);
-            return { items: [], totalResult: 0, page: 0 };
-        }
-    });
-    const onPaginate = (shownResults, inputVal) => __awaiter(this, void 0, void 0, function* () {
-        const fetchedClusters = yield fetchAccountClusters(inputVal, shownResults);
-        setClusters([...clusters, ...fetchedClusters.items]);
-    });
-    useEffect(() => {
-        let isUnmounted = false;
-        const fetchClusters = () => __awaiter(this, void 0, void 0, function* () {
-            const fetchedClusters = yield fetchAccountClusters();
-            const totalResult = fetchedClusters.totalResult;
-            if (!isUnmounted) {
-                if (totalResult === 0) {
-                    setShowClusterIdInputBox(true);
-                }
-                else {
-                    setClusters(fetchedClusters.items);
-                    setHaveClusterFromApi(true);
-                }
-            }
-        });
-        fetchClusters();
-        return () => {
-            isUnmounted = true;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const memoizedSelectedItem = useMemo(() => {
-        return toOption({
-            display_name: getDisplayNameById(clusters, props.openshiftClusterIDState),
-            external_id: props.openshiftClusterIDState,
-        }, { labelKey: 'display_name' });
-    }, [props.openshiftClusterIDState, clusters]);
-    const onSearch = (inputValue) => __awaiter(this, void 0, void 0, function* () {
-        props.onClusterIdStateUpdate(inputValue);
-        setClusters([]);
-        const fetchedClusters = yield fetchAccountClusters(inputValue);
-        setClusters([...fetchedClusters.items]);
-    });
-    return (React.createElement("div", { className: `${props.className} form-group` },
-        (haveClusterFromApi || isFetchingClusters) && (React.createElement("label", { htmlFor: "case-details-cluster-nickname-selector" },
-            React.createElement(Trans, null, "OpenShift Cluster ID"),
-            React.createElement(CaseOpenShiftPopover, null))),
-        !showClusterIdInputBox && (React.createElement(AsyncDropDownList, { placeholder: 'Search by Cluster ID, alias, and domain or manually enter your Cluster ID', id: "case-details-cluster-nickname-selector", selectedItem: memoizedSelectedItem, list: toOptions(getClusterOptions(), {
-                labelKey: 'display_name',
-                childrenKey: 'children',
-                nonSearchableItemKey: 'isNotSearchable',
-                nonActionableItemKey: 'isNonActionable',
-                nonSelectableItemKey: 'isNotSelectable',
-            }), title: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), onOuterClick: onDropdownOuterClick, onChange: onDropdownClusterChange, delay: 200, useCache: true, isLoadingList: isFetchingClusters || props.isClusterIdUpdating, paginate: true, onPaginate: onPaginate, maxResults: PER_PAGE, emptyListLabel: t('No results found'), onClearSelection: onDropdownClear, disabled: props.isClusterIdUpdating, onSearch: onSearch, isInValid: props.isClusterIdInvalid })),
-        showClusterIdInputBox && (React.createElement(InlineEdit, { labelProps: { htmlFor: 'case-details-openshift-cluster-id' }, labelContent: React.createElement(React.Fragment, null,
-                React.createElement(Trans, null, "OpenShift Cluster ID"),
-                React.createElement(CaseOpenShiftPopover, null)), allowInlineEdit: true, content: props.openshiftClusterIDState, onSave: onInlineEditSave, onCancel: onInlineEditCancel, saveDisabled: props.isClusterIdUpdating ||
-                props.isClusterIdInvalid ||
-                props.openshiftClusterIDState === props.originalOpenshiftClusterID ||
-                props.openshiftClusterIDState === '', initialIsEditing: true, hideLabel: haveClusterFromApi, collapseOnBlur: false, saveOnBlur: false, loadingIndicator: props.isClusterIdUpdating ? React.createElement(LoadingIndicator, { isInline: true }) : null },
-            React.createElement("input", { ref: inputRef, type: "text", id: "case-details-openshift-cluster-id", className: `form-control${props.isClusterIdInvalid ? ' form-invalid' : ''}`, "aria-invalid": props.isClusterIdInvalid, name: "case-details-openshift-cluster-id", placeholder: "Example (d3aa88e2-c754-41e0-8ba6-4198a34aa0a2)", value: props.openshiftClusterIDState, onChange: onInlineEditInputChange, disabled: props.isClusterIdUpdating, title: props.isClusterIdInvalid ? t(invalidGuidHelperText) : '', "data-tracking-id": "case-details-openshift-cluster-id" }),
-            props.formInstructions
-                ? props.formInstructions
-                : props.isClusterIdInvalid && React.createElement("p", { className: "form-instructions" }, t(invalidGuidHelperText)))),
-        !showClusterIdInputBox && haveClusterFromApi && props.formInstructions));
-}
-CaseOpenshiftDropdownV4.defaultProps = defaultProps;
-export { CaseOpenshiftDropdownV4, fetchClusterIdDetails };