@rh-support/troubleshoot 0.2.115 → 0.2.118

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

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { getConfigField, getUrlParsedParams, getVersion, PCM_CONFIG_FIELD_TYPE } from '@rh-support/utils';
+import { getUrlParsedParams, getVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useState } from 'react';
@@ -21,9 +21,9 @@ import { RouteContext } from '../../context/RouteContext';
 import { getUpdatedDescription } from '../../reducers/CaseHelpers';
 import { setCaseDetails, setCaseState } from '../../reducers/CaseReducer';
 import { fetchClusterRecommendations } from '../../reducers/ClusterRecommendationsReducer';
-import { getIsClusterIdInvalid, isClusterIdEnabledForProduct } from '../../utils/caseOpenshiftClusterIdUtils';
+import { getIsClusterIdInvalid, isClusterIdEnabledForProduct, } from '../../utils/caseOpenshiftClusterIdUtils';
 import { NoClusterIDReasonSelector } from './NoClusterIDReasonSelector';
-import { fetchClusterIdDetails, OpenshiftDropdownV4 } from './OpenshiftDropdownV4';
+import { OpenshiftDropdownV4 } from './OpenshiftDropdownV4';
 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?")));
@@ -40,7 +40,7 @@ export const isInvalidErrorMessage = () => (React.createElement(React.Fragment,
     discoverV4ClusterIdLink()));
 export function OpenShiftClusterId() {
     const queryParams = getUrlParsedParams(useLocation().search);
-    const { openshiftClusterID, product, version, issue, environment, periodicityOfIssue, timeFramesAndUrgency, openshiftClusterVersion, noClusterIdReason, noClusterIdReasonExplanation, v3ClusterName, selectedAccountDetails, } = useCaseSelector((state) => ({
+    const { openshiftClusterID, product, version, issue, environment, periodicityOfIssue, timeFramesAndUrgency, noClusterIdReason, noClusterIdReasonExplanation, v3ClusterName, openshiftDisplayName, selectedAccountDetails, } = useCaseSelector((state) => ({
         openshiftClusterID: state.caseDetails.openshiftClusterID,
         product: state.caseDetails.product,
         version: state.caseDetails.version,
@@ -48,17 +48,17 @@ export function OpenShiftClusterId() {
         environment: state.caseDetails.environment,
         periodicityOfIssue: state.caseDetails.periodicityOfIssue,
         timeFramesAndUrgency: state.caseDetails.timeFramesAndUrgency,
-        openshiftClusterVersion: state.caseDetails.openshiftClusterVersion,
         noClusterIdReason: state.caseDetails.noClusterIdReason,
         noClusterIdReasonExplanation: state.caseDetails.noClusterIdReasonExplanation,
         v3ClusterName: state.v3ClusterName,
+        openshiftDisplayName: state.openshiftDisplayName,
         selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const { globalMetadataState: { pcmConfig, allProducts, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { allProducts, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
     const clusterRecommendationsDispatch = useContext(ClusterRecommendationsDispatchContext);
-    const { clusterRecommendationsState: { clusterRecommendations }, } = useContext(ClusterRecommendationsContext);
+    const { clusterRecommendationsState: { clusterRecommendationsCache }, } = useContext(ClusterRecommendationsContext);
     const majorVersion = (version && getVersion(version).major) || '';
     const isOpenShiftV3 = majorVersion === '3';
     const isCustomer = loggedInUserRights.data.isAccountSameAsLoggedInAccount(selectedAccountDetails.data.accountNumber);
@@ -67,11 +67,11 @@ export function OpenShiftClusterId() {
     const [v3Selected, setV3Selected] = useState(false);
     const [dontKnowSelected, setDontKnowSelected] = useState(false);
     const [selectedReason, setSelectedReason] = useState('');
-    const isClusterRecommendationEnabled = getConfigField(pcmConfig.data, 'isClusterRecommendationEnabled', PCM_CONFIG_FIELD_TYPE.FEATURE_FLAG);
     const resetClusterData = () => {
         clusterStateReset();
         setCaseDetails(caseDispatch, {
             openshiftClusterID: '',
+            openshiftClusterVersion: '',
             noClusterIdReasonExplanation: '',
             noClusterIdReason: '',
         });
@@ -82,41 +82,26 @@ export function OpenShiftClusterId() {
         setDontKnowSelected(false);
         setV3Selected(false);
     };
-    const setCusterId = (openshiftClusterID, clusterDetails) => __awaiter(this, void 0, void 0, function* () {
-        setCaseDetails(caseDispatch, {
-            openshiftClusterID,
-            openshiftClusterVersion: '',
-            noClusterIdReason: '',
-            noClusterIdReasonExplanation: '',
-        });
-        setCaseState(caseDispatch, { v3ClusterName: '' });
-        setClusterVersion(openshiftClusterID, clusterDetails);
-    });
-    const setClusterVersion = (openshiftClusterID, clusterDetails) => __awaiter(this, void 0, void 0, function* () {
-        if (!openshiftClusterID || getIsClusterIdInvalid(openshiftClusterID))
-            return;
-        let openshiftClusterVersion;
-        if (clusterDetails &&
-            clusterDetails.external_cluster_id === openshiftClusterID &&
-            clusterDetails.openshift_version) {
-            openshiftClusterVersion = clusterDetails.openshift_version;
-        }
-        else {
-            const clusterDetails = yield fetchClusterIdDetails(openshiftClusterID);
-            openshiftClusterVersion = clusterDetails === null || clusterDetails === void 0 ? void 0 : clusterDetails.openshift_version;
-        }
-        setCaseDetails(caseDispatch, { openshiftClusterVersion });
-    });
+    /**
+     * Hook to show cluster fields and check if cluster id comes from url
+     */
     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);
             setShowClusterId(hasCluster);
-            // we get cluster id from url and validate it
+            // if clusterId is already populated it means it comes from session and
+            // we ignore url clusterId otherwise we get cluster id from url and validate it
             const clusterIdFromUrl = queryParams === null || queryParams === void 0 ? void 0 : queryParams.clusterId;
-            if (hasCluster && clusterIdFromUrl && clusterIdFromUrl !== openshiftClusterID) {
-                setCusterId(clusterIdFromUrl);
+            if (hasCluster &&
+                clusterIdFromUrl &&
+                isEmpty(openshiftClusterID) &&
+                isEmpty(noClusterIdReason) &&
+                isEmpty(noClusterIdReasonExplanation)) {
+                setCaseDetails(caseDispatch, {
+                    openshiftClusterID: clusterIdFromUrl,
+                });
                 const isClusterIdInvalid = getIsClusterIdInvalid(clusterIdFromUrl);
                 if (isClusterIdInvalid) {
                     // if we get invalid id from url we need to add red line to dropdown
@@ -131,22 +116,18 @@ export function OpenShiftClusterId() {
             isClusterVisible();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [product, version, pcmConfig, allProducts.data]);
+    }, [product, version, allProducts.data]);
     // On preview page 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
-     */
+     * Hook to set clusterId fields when comes from session or backward/forward
+     **/
     useEffect(() => {
         const isClusterIdInvalid = getIsClusterIdInvalid(openshiftClusterID);
         setIsClusterIdInValid(isClusterIdInvalid);
-        if (openshiftClusterID && !isClusterIdInvalid && isEmpty(openshiftClusterVersion)) {
-            setClusterVersion(openshiftClusterID);
-        }
         // when user click on back and continue button, need to show v3 text box or reasons dropdown
         if (!isEmpty(v3ClusterName) ||
             (noClusterIdReason === 'Other' && noClusterIdReasonExplanation === 'v3-cluster')) {
@@ -157,11 +138,9 @@ export function OpenShiftClusterId() {
             setDontKnowSelected(true);
             setSelectedReason('dont-have-id');
         }
-        const canFetchClusterRecommendation = isClusterRecommendationEnabled && !isClusterIdInvalid && !isEmpty(openshiftClusterID);
-        // To prevent refetching clusterRecommendations checking for clusterRecommendations data length
+        const canFetchClusterRecommendation = !isClusterIdInvalid && !isEmpty(openshiftClusterID);
         canFetchClusterRecommendation &&
-            !clusterRecommendations.data.length &&
-            fetchClusterRecommendations(clusterRecommendationsDispatch, openshiftClusterID);
+            fetchClusterRecommendations(clusterRecommendationsDispatch, openshiftClusterID, clusterRecommendationsCache);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [noClusterIdReason]);
     const onClusterIdStateUpdate = (selectedCluster) => {
@@ -178,7 +157,7 @@ export function OpenShiftClusterId() {
             setV3Selected(true);
             setSelectedReason(selectedId);
             setCaseDetails(caseDispatch, {
-                openshiftClusterID,
+                openshiftClusterID: '',
                 openshiftClusterVersion: '',
                 noClusterIdReason: 'Other',
                 noClusterIdReasonExplanation: 'v3-cluster',
@@ -186,10 +165,17 @@ export function OpenShiftClusterId() {
             return;
         }
         const isClusterInvalid = getIsClusterIdInvalid(selectedId);
-        const canFetchClusterRecommendation = !isClusterInvalid && isClusterRecommendationEnabled;
         setIsClusterIdInValid(isClusterInvalid);
-        setCusterId(selectedId, selectedCluster);
-        canFetchClusterRecommendation && fetchClusterRecommendations(clusterRecommendationsDispatch, selectedId);
+        setCaseDetails(caseDispatch, {
+            openshiftClusterID: selectedId,
+            openshiftClusterVersion: selectedCluster.openshift_version,
+            noClusterIdReason: '',
+            noClusterIdReasonExplanation: '',
+        });
+        setCaseState(caseDispatch, { v3ClusterName: '', openshiftDisplayName: selectedCluster.display_name });
+        !isClusterInvalid &&
+            !isEmpty(selectedId) &&
+            fetchClusterRecommendations(clusterRecommendationsDispatch, selectedId, clusterRecommendationsCache);
     };
     const clusterIdDropdownFormInstructions = () => {
         const errorMessage = isClusterIdInvalid
@@ -219,7 +205,7 @@ export function OpenShiftClusterId() {
     if (!showClusterId)
         return null;
     return (React.createElement(React.Fragment, null,
-        !isOpenShiftV3 && (React.createElement(OpenshiftDropdownV4, { openshiftClusterIDState: openshiftClusterID || selectedReason, onClusterIdStateUpdate: onClusterIdStateUpdate, isClusterIdInvalid: showValidationErrorAlert &&
+        !isOpenShiftV3 && (React.createElement(OpenshiftDropdownV4, { openshiftDisplayName: openshiftDisplayName, openshiftClusterIDState: openshiftClusterID || selectedReason, onClusterIdStateUpdate: onClusterIdStateUpdate, isClusterIdInvalid: showValidationErrorAlert &&
                 ((isEmpty(openshiftClusterID) && isEmpty(selectedReason)) || isClusterIdInvalid), clusterIdDropdownFormInstructions: clusterIdDropdownFormInstructions(), onClusterClear: resetClusterData, isV4: majorVersion === '4' })),
         noClusterIdReasonExplanation !== 'v3-cluster' && dontKnowSelected && !isOpenShiftV3 && (React.createElement(NoClusterIDReasonSelector, { noClusterIdReasonExplanation: noClusterIdReasonExplanation, noClusterIdReason: noClusterIdReason, onReasonInputBoxChanged: onReasonExplanationInputBoxChanged, onReasonChange: onReasonChange, isInValid: isInVaidNoClusterIdReason, isCustomer: isCustomer })),
         (v3Selected || isOpenShiftV3) && (React.createElement(OpenShiftV3Inputbox, { v3ClusterName: v3ClusterName, onReasonInputBoxChanged: v3ClusterNameInputBoxChanged, isInValid: isEmpty(v3ClusterName.trim()) && showValidationErrorAlert, v3Selected: v3Selected }))));

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

@@ -9,11 +9,11 @@ interface IProps extends IDClassNameProps {
     isV4: boolean;
     isDisabled?: boolean;
     noClusterIdReasonExplanation?: string;
+    openshiftDisplayName?: string;
 }
-declare const fetchClusterIdDetails: (clusterId: string) => Promise<import("@cee-eng/hydrajs/@types/models/cloud").ICluster>;
 declare function OpenshiftDropdownV4(props: IProps): JSX.Element;
 declare namespace OpenshiftDropdownV4 {
     var defaultProps: {};
 }
-export { OpenshiftDropdownV4, fetchClusterIdDetails };
+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,EAAgC,MAAM,sCAAsC,CAAC;AAE1G,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAWjF,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;CACzC;AAQD,QAAA,MAAM,qBAAqB,cAAqB,MAAM,qEASrD,CAAC;AAeF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eAwTzC;kBAxTQ,mBAAmB;;;AA2T5B,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,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;AAG5E,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAcjF,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,eAiXzC;kBAjXQ,mBAAmB;;;AAoX5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -9,34 +9,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { cloud } from '@cee-eng/hydrajs';
 import { Checkbox, Divider, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
-import find from 'lodash/find';
-import findIndex from 'lodash/findIndex';
+import { useLRUCache } from '@rh-support/components';
+import debounce from 'lodash/debounce';
 import groupBy from 'lodash/groupBy';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { getDisplayNameForCluster } from '../../utils/caseOpenshiftClusterIdUtils';
+import { getDisplayNameForCluster, getIsClusterIdInvalid, } from '../../utils/caseOpenshiftClusterIdUtils';
 import CaseOpenShiftPopover from '../CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenShiftPopover';
 const defaultProps = {
     className: '',
     id: '',
     isDisabled: false,
+    openshiftDisplayName: '',
 };
-const fetchClusterIdDetails = (clusterId) => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        const clustersResponse = yield cloud.getAccountClusters({
-            order: 'display_name asc',
-            search: `external_id ILIKE  '%${clusterId}%'`,
-        });
-        const clusterDetails = (clustersResponse.items || []).find((item) => item.external_id === clusterId);
-        return clusterDetails;
-    }
-    catch (e) { }
-});
-const createState = (external_cluster_id, display_name) => {
+const createState = (external_cluster_id, display_name, openshift_version) => {
     return {
         display_name,
         external_cluster_id,
+        openshift_version: openshift_version || '',
         toString: () => display_name || '',
         compareTo: function (value) {
             const displayName = this.toString().toLowerCase();
@@ -47,9 +38,9 @@ const createState = (external_cluster_id, display_name) => {
 };
 function OpenshiftDropdownV4(props) {
     const { t } = useTranslation();
-    const PER_PAGE = 20;
+    const PER_PAGE = 200;
     const [clustersRawResponse, setClustersRawResponse] = useState([]);
-    const abortControllerRef = useRef(undefined);
+    const abortControllerRef = useRef();
     const [clustersSelectOptions, setClustersSelectOptions] = useState([]);
     const [isOpen, setIsOpen] = useState(false);
     const [validated, setValidated] = useState('default');
@@ -57,8 +48,9 @@ function OpenshiftDropdownV4(props) {
     const [showArchivedClusters, setShowArchivedClusters] = useState(false);
     const [isFetchingClusters, setIsFetchingClusters] = useState(false);
     const [totalResultsNo, setTotalResultsNo] = useState(0);
+    const { getFromCache, setInCache } = useLRUCache(25);
     // gets a cluster id and returns display name
-    const getDisplayNameById = (clusters, id, noClusterIdReasonExplanation) => {
+    const getDisplayName = (id, noClusterIdReasonExplanation, display_name) => {
         if (isEmpty(id))
             return '';
         if (id === 'dont-have-id') {
@@ -68,8 +60,7 @@ function OpenshiftDropdownV4(props) {
         }
         if (id === 'v3-cluster')
             return t('The case is for a v3 cluster');
-        const cluster = find(clusters, (o) => o.external_cluster_id === id);
-        return isEmpty(cluster) ? id : getDisplayNameForCluster(cluster);
+        return display_name || id;
     };
     const onDropdownClear = () => __awaiter(this, void 0, void 0, function* () {
         setIsOpen(false);
@@ -103,91 +94,109 @@ function OpenshiftDropdownV4(props) {
             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(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")) }),
+        ...(!props.isV4
+            ? [
+                React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')) }),
+            ]
+            : []),
+    ], 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [showArchivedClusters]);
     const getClusterOptions = (clusters) => {
-        const clustersResponseGrouped = groupBy(clusters, 'dns.base_domain') || [];
+        const clustersResponseGrouped = groupBy(clusters, 'console_url') || [];
         const domainNames = Object.keys(clustersResponseGrouped) || [];
-        // move undefined to the end of domains array
-        const undefinedIndex = domainNames.findIndex((i) => i === 'undefined');
+        // move clusters with empty console_urls to the end of domains array
+        const undefinedIndex = domainNames.findIndex((i) => i === '');
         if (undefinedIndex !== -1 && undefinedIndex !== domainNames.length - 1) {
             domainNames.splice(undefinedIndex, 1);
-            domainNames.push('undefined');
+            domainNames.push('');
         }
         // SelectGroup had a bug when keyboard was used to navigate
         // to show group names used disabled SelectOption, need to be replaced after bug fix
         const clusterOptions = [];
         domainNames.forEach((domain, index) => {
-            domain !== 'undefined' &&
+            domain !== '' &&
                 clusterOptions.push(React.createElement(SelectOption, { isDisabled: true, className: "pf-u-font-weight-bold pf-u-color-400", value: createState(domain, domain), key: domain + index }));
             clustersResponseGrouped[domain] &&
                 clustersResponseGrouped[domain].forEach((cluster, i) => {
-                    clusterOptions.push(React.createElement(SelectOption, { key: cluster.external_cluster_id, value: createState(cluster.external_cluster_id, cluster.display_name) }));
+                    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(Divider, { component: "div", key: index + domain }));
         });
         return [
-            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(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")) }),
-            ...(!props.isV4
-                ? [
-                    React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')) }),
-                ]
-                : []),
+            ...dropdownHeaderOptions,
             ...(clusterOptions.length !== 0 ? [React.createElement(Divider, { component: "div", key: 'cluster-id-options-divider' })] : []),
             ...clusterOptions,
         ];
     };
-    const fetchAccountClusters = (search = '', page = 0) => __awaiter(this, void 0, void 0, function* () {
+    const fetchAClusterIdDetails = (clusterId) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
         setIsFetchingClusters(true);
         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 cloud.getAccountClustersSubscription({
-                order: 'display_name asc',
-                page,
-                size: PER_PAGE,
-                search: `${showArchivedClusters ? '' : "status!='Archived'"} ${search && !showArchivedClusters ? 'AND' : ''} ${search ? `(external_cluster_id ILIKE '%${search}%' OR display_name ILIKE '%${search}%')` : ''}`,
+                search: `external_cluster_id='${clusterId}'`,
                 fields: 'external_cluster_id,display_name,status,metrics.openshift_version',
-            }, controller.signal);
+            });
+            setIsFetchingClusters(false);
+            return (((_a = clustersResponse.items.map((item) => {
+                var _a, _b;
+                return ({
+                    display_name: item.display_name,
+                    external_cluster_id: item.external_cluster_id,
+                    openshift_version: ((_b = (_a = item === null || item === void 0 ? void 0 : item.metrics) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.openshift_version) || '',
+                });
+            })) === null || _a === void 0 ? void 0 : _a[0]) || {});
+        }
+        catch (e) {
+            return {};
+        }
+    });
+    const fetchAccountClusters = (search = '', page = 0) => __awaiter(this, void 0, void 0, function* () {
+        setIsFetchingClusters(true);
+        try {
+            let clustersResponse;
+            if (getFromCache(`showArchived=${showArchivedClusters}input=${search}p=${page}`)) {
+                clustersResponse = getFromCache(`showArchived=${showArchivedClusters}input=${search}p=${page}`);
+            }
+            else {
+                if (abortControllerRef.current !== undefined) {
+                    // Cancel the previous request
+                    abortControllerRef.current.abort();
+                }
+                // recreate a new AbortController for each call
+                let controller = new AbortController();
+                abortControllerRef.current = controller;
+                // query language: https://github.com/yaacov/tree-search-language
+                clustersResponse = yield cloud.getAccountClustersSubscription({
+                    order: 'display_name asc',
+                    page,
+                    size: PER_PAGE,
+                    search: `${showArchivedClusters ? '' : "status!='Archived'"} ${search && !showArchivedClusters ? 'AND' : ''} ${search
+                        ? `(external_cluster_id ILIKE '%${search}%' OR display_name ILIKE '%${search}%' OR console_url ILIKE '%${search}%')`
+                        : ''}`,
+                    fields: 'external_cluster_id,display_name,status,metrics.openshift_version,console_url',
+                }, controller.signal);
+                setInCache(`showArchived=${showArchivedClusters}input=${search}p=${page}`, clustersResponse);
+            }
+            setIsFetchingClusters(false);
             const items = clustersResponse.items
                 .filter((c) => !isEmpty(c.external_cluster_id))
                 .map((item) => {
                 var _a, _b;
                 return ({
-                    display_name: getDisplayNameForCluster(item),
+                    display_name: item.display_name,
                     external_cluster_id: item.external_cluster_id,
                     openshift_version: ((_b = (_a = item === null || item === void 0 ? void 0 : item.metrics) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.openshift_version) || '',
+                    console_url: (item === null || item === void 0 ? void 0 : item.console_url) && (item === null || item === void 0 ? void 0 : item.console_url) !== null
+                        ? item.console_url.split('.').slice(4).join('.')
+                        : '',
                 });
             });
-            try {
-                // old api has dns info
-                // new api doesn't have dns info but we can exclude archived clusters
-                // call old api get all clusters and call new api get limitted number of clusters
-                // then add dns info to the new api response
-                const promiseArray = clustersResponse.items.map((cluster) => cloud.getAccountClusters({
-                    order: 'display_name asc',
-                    search: `external_id='${cluster.external_cluster_id}' OR display_name='${cluster.external_cluster_id}'`,
-                }, controller.signal));
-                const oldApiResponse = yield Promise.allSettled(promiseArray);
-                oldApiResponse.forEach((response) => {
-                    var _a, _b;
-                    if (response.status === 'fulfilled' && ((_b = (_a = response.value) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0].dns)) {
-                        var index = findIndex(items, { external_cluster_id: response.value.items[0].external_id });
-                        items[index] = Object.assign(Object.assign({}, items[index]), { dns: response.value.items[0].dns });
-                    }
-                });
-            }
-            catch (e) {
-                // silently fails
-            }
-            setIsFetchingClusters(false);
             return {
                 items,
                 totalResult: items.length,
@@ -201,17 +210,37 @@ function OpenshiftDropdownV4(props) {
             return { items: [], totalResult: 0, page: 0, total: 0 };
         }
     });
-    // need to get clusters on load
+    // when user visits case detail or clusterId comes from url,
+    // we have clusterId but need to get display name
+    useEffect(() => {
+        const getClusterDetails = () => __awaiter(this, void 0, void 0, function* () {
+            if (props.openshiftClusterIDState &&
+                props.openshiftClusterIDState !== 'dont-have-id' &&
+                props.openshiftClusterIDState !== 'v3-cluster' &&
+                isEmpty(props.openshiftDisplayName)) {
+                const fetchedCluster = yield fetchAClusterIdDetails(props.openshiftClusterIDState);
+                props.onClusterIdStateUpdate(Object.assign(Object.assign({}, fetchedCluster), { display_name: getDisplayNameForCluster(fetchedCluster) }));
+            }
+        });
+        getClusterDetails();
+        //  no dependency here as we want to run this once on load
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // 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.isV4 because re-render
     // is needed when user on overview page changing version
     useEffect(() => {
+        if (!isOpen)
+            return;
         let isUnmounted = false;
         const fetchClusters = () => __awaiter(this, void 0, void 0, function* () {
+            setClustersSelectOptions(getClusterOptions([]));
             const fetchedClusters = yield fetchAccountClusters(inputVal);
             if (!isUnmounted) {
                 setClustersRawResponse(fetchedClusters.items);
                 setTotalResultsNo(fetchedClusters.total);
-                setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
+                setClustersSelectOptions(getClusterOptions(fetchedClusters.items) || []);
             }
         });
         fetchClusters();
@@ -219,7 +248,7 @@ function OpenshiftDropdownV4(props) {
             isUnmounted = true;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.isV4, showArchivedClusters]);
+    }, [props.isV4, showArchivedClusters, isOpen, inputVal]);
     useEffect(() => {
         if (props.isClusterIdInvalid) {
             setValidated('error');
@@ -228,20 +257,29 @@ function OpenshiftDropdownV4(props) {
             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);
-        props.onClusterIdStateUpdate(createState(input, input));
-        const fetchedClusters = yield fetchAccountClusters(input);
-        setClustersRawResponse(fetchedClusters.items);
-        setTotalResultsNo(fetchedClusters.total);
-        setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
+        if (getIsClusterIdInvalid(input)) {
+            const fetchedClusters = yield fetchAccountClusters(input);
+            setClustersRawResponse(fetchedClusters.items);
+            setTotalResultsNo(fetchedClusters.total);
+            setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
+            props.onClusterIdStateUpdate({ external_cluster_id: input });
+        }
+        else {
+            // user paste a valid cluster id
+            const fetchedCluster = yield fetchAClusterIdDetails(input);
+            props.onClusterIdStateUpdate(fetchedCluster);
+        }
     });
+    const debounceFn = debounce(onTypeaheadInputChanged, 1000);
     const getSelectedItem = () => {
         if (!isEmpty(inputVal)) {
             return createState(props.openshiftClusterIDState, inputVal);
         }
         else {
-            return createState(props.openshiftClusterIDState, getDisplayNameById(clustersRawResponse, props.openshiftClusterIDState, props.noClusterIdReasonExplanation));
+            return createState(props.openshiftClusterIDState, getDisplayName(props.openshiftClusterIDState, props.noClusterIdReasonExplanation || '', props.openshiftDisplayName || props.openshiftClusterIDState));
         }
     };
     const titleId = 'case-details-cluster-nickname-selector';
@@ -252,7 +290,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, isDisabled: props.isDisabled, typeAheadAriaLabel: t('Search by Cluster ID and alias 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 and alias 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: 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',
@@ -262,4 +300,4 @@ function OpenshiftDropdownV4(props) {
             React.createElement("div", { id: "clusterID-validate-helper", className: `form-instructions ${props.isClusterIdInvalid ? 'form-invalid' : ''}` }, props.clusterIdDropdownFormInstructions))));
 }
 OpenshiftDropdownV4.defaultProps = defaultProps;
-export { OpenshiftDropdownV4, fetchClusterIdDetails };
+export { OpenshiftDropdownV4 };

package/lib/esm/components/Recommendations/AlertToastWrapper.d.ts

@@ -3,6 +3,7 @@
  */
 import { FC } from 'react';
 interface IProps {
+    submitCaseAndNavigate: (isReSubmitting: boolean) => void;
 }
 declare const AlertToastWrapper: FC<IProps>;
 export default AlertToastWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"AlertToastWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AlertToastWrapper.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC,UAAU,MAAM;CAAG;AAEnB,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAQjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"AlertToastWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AlertToastWrapper.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMlC,UAAU,MAAM;IACZ,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,MAAM,CASjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -3,11 +3,13 @@
  */
 import { AlertGroup } from '@patternfly/react-core';
 import React from 'react';
+import { ResubmitToast } from '../SubmitCase/ResubmitToast';
 import ClusterRecommendationToast from './ClusterRecommendationToast';
 import CriticalSolutionsToast from './CriticalSolutionsToast';
-const AlertToastWrapper = () => {
+const AlertToastWrapper = ({ submitCaseAndNavigate }) => {
     return (React.createElement(AlertGroup, { isToast: true },
         React.createElement(CriticalSolutionsToast, null),
-        React.createElement(ClusterRecommendationToast, null)));
+        React.createElement(ClusterRecommendationToast, null),
+        React.createElement(ResubmitToast, { submitCaseAndNavigate: submitCaseAndNavigate })));
 };
 export default AlertToastWrapper;

package/lib/esm/components/SessionRestore/RestoreLastSessionModal.d.ts

@@ -0,0 +1,9 @@
+import { ISessionItem } from '@cee-eng/hydrajs/@types/api/pcm/troubleshootSession';
+import { FC } from 'react';
+interface IProps {
+    onRestore: (sessionItem: ISessionItem) => Promise<void>;
+    errorSession: ISessionItem;
+}
+export declare const RestoreLastSessionModal: FC<IProps>;
+export {};
+//# sourceMappingURL=RestoreLastSessionModal.d.ts.map

package/lib/esm/components/SessionRestore/RestoreLastSessionModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RestoreLastSessionModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SessionRestore/RestoreLastSessionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAGnF,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMlC,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,YAAY,EAAE,YAAY,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,MAAM,CA0D9C,CAAC"}