@rh-support/troubleshoot 0.2.108 → 0.2.113

package/README.md

@@ -19,5 +19,3 @@ export function TroubleshootApp(routeProps: RouteComponentProps<{}>) {
         </RootTroubleshootProvider>);
 }
 ```
-
-.

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":"AAuBA,wBAAgB,sBAAsB,gBAqRrC"}
+{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,sBAAsB,gBA4RrC"}

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

@@ -55,7 +55,9 @@ export function CaseOpenshiftClusterId() {
         if (!openshiftClusterID || getIsClusterIdInvalid(openshiftClusterID))
             return;
         let openshiftClusterVersion;
-        if (clusterDetails && clusterDetails.external_id === openshiftClusterID && clusterDetails.openshift_version) {
+        if (clusterDetails &&
+            clusterDetails.external_cluster_id === openshiftClusterID &&
+            clusterDetails.openshift_version) {
             openshiftClusterVersion = clusterDetails.openshift_version;
         }
         else {
@@ -128,7 +130,7 @@ export function CaseOpenshiftClusterId() {
         }
     });
     const onClusterIdSave = (selectedCluster) => __awaiter(this, void 0, void 0, function* () {
-        const selectedClusterId = selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.external_id;
+        const selectedClusterId = selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.external_cluster_id;
         if (isEmpty(selectedClusterId))
             return;
         setLocalOpenshiftClusterIDState(selectedClusterId);

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

@@ -1 +1 @@
-{"version":3,"file":"ProductVersion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/ProductVersion.tsx"],"names":[],"mappings":"AAsBA,UAAU,MAAM;IACZ,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACvC;AAYD,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eAkOrC;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ProductVersion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/ProductVersion.tsx"],"names":[],"mappings":"AAsBA,UAAU,MAAM;IACZ,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACvC;AAYD,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eA0PrC;AAED,eAAe,eAAe,CAAC"}

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

@@ -16,7 +16,7 @@ import findIndex from 'lodash/findIndex';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import uniq from 'lodash/uniq';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { getVersionsDetails, updateCaseDetails } from '../../../../reducers/CaseReducer';
@@ -33,19 +33,29 @@ function ProductNVersion(props) {
     const [versions, setVersions] = useState([]);
     const [isProductUpdating, setIsProductUpdating] = useState(false);
     const [isVersionUpdating, setIsVersionUpdating] = useState(false);
-    const { product, version, caseNumber, contactSSOName } = useCaseSelector((state) => ({
+    const { product, version, caseNumber, contactSSOName, versionsDetails } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
         contactSSOName: state.caseDetails.contactSSOName,
         caseNumber: state.caseDetails.caseNumber,
+        versionsDetails: state.versionsDetails,
     }), isEqual);
+    const productVenisons = useMemo(() => versionsDetails.data.map(({ name }) => name), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [product, versionsDetails.data]);
     const caseDispatch = useCaseDispatch();
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
     const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
+    const productSEVersions = useMemo(() => getVersions(allProducts.data.productsResult, product), [allProducts.data.productsResult, product]);
     const [isProductInValid, setIsProductInValid] = useState(false);
     const [selectedProductLocal, setSelectedProductLocal] = useState(product);
     const [selectedVersionLocal, setSelectedVersionLocal] = useState(version);
     const canEditCase = useCanEditCase();
+    useEffect(() => {
+        setVersions(productVenisons);
+        if ((productVenisons === null || productVenisons === void 0 ? void 0 : productVenisons.length) && !selectedVersionLocal)
+            setSelectedVersionLocal(productVenisons[0]);
+    }, [productVenisons, selectedVersionLocal]);
     /**
      * Sync local version from global state if they change from someplace else
      */
@@ -53,17 +63,20 @@ function ProductNVersion(props) {
         setSelectedVersionLocal(version);
     }, [version]);
     useEffect(() => {
+        var _a;
         if (haventLoadedMetadata(allProducts, (data) => isEmpty(data.productsResult))) {
             fetchProducts(dispatchToGlobalMetadataReducer, contactSSOName);
         }
-        if (allProducts.data && allProducts.data.productsResult.length !== 0) {
-            const versions = getVersions(allProducts.data.productsResult, product);
+        if (allProducts.data && ((_a = allProducts.data.productsResult) === null || _a === void 0 ? void 0 : _a.length) !== 0) {
+            const productSEVersions = getVersions(allProducts.data.productsResult, product);
+            const versions = (productSEVersions === null || productSEVersions === void 0 ? void 0 : productSEVersions.length) ? productSEVersions : productVenisons;
             setVersions(versions);
         }
         setSelectedProductLocal(product);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [allProducts, product, dispatchToGlobalMetadataReducer, contactSSOName]);
     const onProductChange = (option) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c;
         if (canEditCase.alert())
             return;
         validateProduct(option);
@@ -72,8 +85,8 @@ function ProductNVersion(props) {
         if (!option.value.product) {
             return;
         }
-        const hasSingleVersion = option.value.versions.length < 2;
-        setVersions(option.value.versions);
+        const hasSingleVersion = ((_b = (_a = option === null || option === void 0 ? void 0 : option.value) === null || _a === void 0 ? void 0 : _a.versions) === null || _b === void 0 ? void 0 : _b.length) < 2;
+        setVersions((_c = option === null || option === void 0 ? void 0 : option.value) === null || _c === void 0 ? void 0 : _c.versions);
         if (hasSingleVersion) {
             setIsProductUpdating(true);
             setIsVersionUpdating(true);
@@ -95,6 +108,14 @@ function ProductNVersion(props) {
                 ToastNotification.addDangerMessage(t(`Product and Version failed to update`));
             }
         }
+        else {
+            setIsVersionUpdating(true);
+            try {
+                yield getVersionsDetails(caseDispatch, option.value.product);
+            }
+            catch (e) { }
+            setIsVersionUpdating(false);
+        }
     });
     let previousProduct = usePrevious(selectedProductLocal);
     const onVersionChange = (option) => __awaiter(this, void 0, void 0, function* () {
@@ -161,7 +182,7 @@ function ProductNVersion(props) {
     }, [caseDispatch, product]);
     return (React.createElement(React.Fragment, null,
         React.createElement(AlertMessage, { show: !allProducts.isFetching && allProducts.isError, title: t('There was an error loading products.'), variant: AlertType.DANGER }),
-        isEmpty(selectedVersionLocal) && !(versions.length < 2) && (React.createElement(Alert, { isInline: true, className: "pf-u-mb-md", variant: AlertVariant.danger, title: React.createElement(Trans, null, "Please clear the errors to change the product on your case") })),
+        isEmpty(selectedVersionLocal) && !((selectedVersionLocal === null || selectedVersionLocal === void 0 ? void 0 : selectedVersionLocal.length) < 2) && (React.createElement(Alert, { isInline: true, className: "pf-u-mb-md", variant: AlertVariant.danger, title: React.createElement(Trans, null, "Please clear the errors to change the product on your case") })),
         React.createElement(React.Fragment, null,
             React.createElement("div", { className: "form-group all-product-selector-dropdown" },
                 React.createElement("div", { className: "product-selector-wrapper" },
@@ -169,7 +190,7 @@ function ProductNVersion(props) {
                         React.createElement(Trans, null, "Product")),
                     React.createElement(Dropdown, { className: "open-case-product", placeholder: t('Select a product'), id: "case-details-product-selector", selectedItem: toOption({
                             product: selectedProductLocal,
-                            versions: getVersions(allProducts.data.productsResult, product),
+                            versions: (productSEVersions === null || productSEVersions === void 0 ? void 0 : productSEVersions.length) ? productSEVersions : productVenisons,
                             featuredVersion: '',
                             selectedVersion: selectedVersionLocal,
                             isTopProduct: checkIsTopProduct(allProducts.data.productsResult, product),
@@ -179,7 +200,7 @@ function ProductNVersion(props) {
                     React.createElement("label", { htmlFor: "version-dropdown" },
                         React.createElement(Trans, null, "Version")),
                     React.createElement(Dropdown, { className: "open-case-version", id: "version-dropdown", selectedItem: toOption(selectedVersionLocal), list: toOptions(uniq(versions)), title: t(`Select a version`), isInValid: isEmpty(selectedVersionLocal), disabled: isVersionUpdating ||
-                            versions.length < 2 ||
+                            (selectedVersionLocal === null || selectedVersionLocal === void 0 ? void 0 : selectedVersionLocal.length) < 2 ||
                             (allProducts.isFetching && !allProducts.isError), onChange: onVersionChange, isLoadingList: isVersionUpdating, "data-tracking-id": "case-details-version-selector" }))))));
 }
 export default ProductNVersion;

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

@@ -1 +1 @@
-{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AAyBA,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,eAuRhC"}
+{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AAyBA,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,eA4RhC"}

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

@@ -46,6 +46,9 @@ export function Cep(props) {
     useEffect(() => {
         setCepDetailsLocal(cepDetails);
     }, [cepDetails]);
+    const clearCepForm = () => {
+        setCepDetailsLocal(cepDetails);
+    };
     const onCepChange = (e) => __awaiter(this, void 0, void 0, function* () {
         if (canEditCase.alert())
             return;
@@ -61,6 +64,7 @@ export function Cep(props) {
                     description: t('Are you sure?'),
                 });
                 cepUpdate({ cep: false });
+                clearCepForm();
             }
             else {
                 setCaseDetails(caseDispatch, { cep: false });
@@ -153,13 +157,13 @@ export function Cep(props) {
                         React.createElement(Trans, null, "Contact information"),
                         "\u00A0",
                         React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-                    React.createElement(TextAreaResizable, { id: "cep-contactInformation", className: `form-control`, "aria-required": true, required: true, maxLength: 2000, name: "cep-contactInformation", value: cepDetailsLocal.contactInformation, onChange: onCepContactInformationsChange, "aria-label": "auto resizing text area example", isSpaceAllowed: false, autoResize: true }),
+                    React.createElement(TextAreaResizable, { id: "cep-contactInformation", className: `form-control`, "aria-required": true, isRequired: true, maxLength: 2000, name: "cep-contactInformation", value: cepDetailsLocal.contactInformation, onChange: onCepContactInformationsChange, "aria-label": "auto resizing text area example", isSpaceAllowed: false, autoResize: true }),
                     React.createElement("p", { className: "form-instructions" },
                         React.createElement(Trans, null, "Please provide phone number, chat ID or email."))),
                 React.createElement("div", { className: "form-group" },
                     React.createElement("label", { htmlFor: "cep-notes" },
                         React.createElement(Trans, null, "Notes")),
-                    React.createElement(TextAreaResizable, { id: "cep-notes", className: `form-control`, "aria-required": true, required: true, maxLength: 2000, name: "cep-notese", value: cepDetailsLocal.notes, onChange: onCepNotesChange, isSpaceAllowed: false, autoResize: true }),
+                    React.createElement(TextAreaResizable, { id: "cep-notes", className: `form-control`, "aria-required": false, isRequired: false, maxLength: 2000, name: "cep-notese", value: cepDetailsLocal.notes, onChange: onCepNotesChange, isSpaceAllowed: false, autoResize: true }),
                     React.createElement("p", { className: "form-instructions" },
                         React.createElement(Trans, null, "Provide any pertinent information that Red Hat Support should be aware of that's not already captured in the issue statement or comments.")))))));
 }

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;AAEF,eAAO,MAAM,uBAAuB,mBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAKxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAIjC,CAAC;AAEF,wBAAgB,kBAAkB,gBA6RjC"}
+{"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,gBAoSjC"}

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

@@ -96,7 +96,9 @@ export function OpenShiftClusterId() {
         if (!openshiftClusterID || getIsClusterIdInvalid(openshiftClusterID))
             return;
         let openshiftClusterVersion;
-        if (clusterDetails && clusterDetails.external_id === openshiftClusterID && clusterDetails.openshift_version) {
+        if (clusterDetails &&
+            clusterDetails.external_cluster_id === openshiftClusterID &&
+            clusterDetails.openshift_version) {
             openshiftClusterVersion = clusterDetails.openshift_version;
         }
         else {
@@ -163,7 +165,7 @@ export function OpenShiftClusterId() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [noClusterIdReason]);
     const onClusterIdStateUpdate = (selectedCluster) => {
-        const selectedId = selectedCluster.external_id;
+        const selectedId = selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.external_cluster_id;
         if (isEmpty(selectedId))
             return;
         resetClusterData();

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

@@ -1,8 +1,8 @@
-import { ICluster } from '@rh-support/api';
+import { IClusterSubscription } from '@cee-eng/hydrajs/@types/models/cloud';
 import { IDClassNameProps } from '@rh-support/types/shared';
 interface IProps extends IDClassNameProps {
     openshiftClusterIDState: string;
-    onClusterIdStateUpdate: (cluster: Partial<ICluster>, value?: string) => void;
+    onClusterIdStateUpdate: (cluster: Partial<IClusterSubscription>, value?: string) => void;
     isClusterIdInvalid: boolean;
     clusterIdDropdownFormInstructions?: JSX.Element;
     onClusterClear: () => void;
@@ -10,7 +10,7 @@ interface IProps extends IDClassNameProps {
     isDisabled?: boolean;
     noClusterIdReasonExplanation?: string;
 }
-declare const fetchClusterIdDetails: (clusterId: string) => Promise<ICluster>;
+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: {};

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;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACzC;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"}
+{"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"}

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

@@ -7,10 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Divider, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
-import { getAccountClusters } from '@rh-support/api';
-import { useFetch } from '@rh-support/components';
+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 groupBy from 'lodash/groupBy';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useRef, useState } from 'react';
@@ -24,19 +24,19 @@ const defaultProps = {
 };
 const fetchClusterIdDetails = (clusterId) => __awaiter(void 0, void 0, void 0, function* () {
     try {
-        const clustersResponse = yield getAccountClusters({
+        const clustersResponse = yield cloud.getAccountClusters({
             order: 'display_name asc',
-            search: `external_id ILIKE '%${clusterId}%'`,
+            search: `external_id ILIKE  '%${clusterId}%'`,
         });
         const clusterDetails = (clustersResponse.items || []).find((item) => item.external_id === clusterId);
         return clusterDetails;
     }
     catch (e) { }
 });
-const createState = (external_id, display_name) => {
+const createState = (external_cluster_id, display_name) => {
     return {
         display_name,
-        external_id,
+        external_cluster_id,
         toString: () => display_name || '',
         compareTo: function (value) {
             const displayName = this.toString().toLowerCase();
@@ -47,47 +47,65 @@ const createState = (external_id, display_name) => {
 };
 function OpenshiftDropdownV4(props) {
     const { t } = useTranslation();
-    const PER_PAGE = 200;
-    const { request: getAccountClustersRequest, isFetching: isFetchingClusters } = useFetch(getAccountClusters, {
-        propgateErrors: true,
-    });
+    const PER_PAGE = 20;
     const [clustersRawResponse, setClustersRawResponse] = useState([]);
     const abortControllerRef = useRef(undefined);
     const [clustersSelectOptions, setClustersSelectOptions] = useState([]);
     const [isOpen, setIsOpen] = useState(false);
     const [validated, setValidated] = useState('default');
     const [inputVal, setInputVal] = useState('');
+    const [showArchivedClusters, setShowArchivedClusters] = useState(false);
+    const [isFetchingClusters, setIsFetchingClusters] = useState(false);
+    const [totalResultsNo, setTotalResultsNo] = useState(0);
     // gets a cluster id and returns display name
-    const getDisplayNameById = (clusters, id) => {
+    const getDisplayNameById = (clusters, id, noClusterIdReasonExplanation) => {
         if (isEmpty(id))
             return '';
-        if (id === 'dont-have-id')
-            return t("I don't have my Cluster ID");
+        if (id === 'dont-have-id') {
+            return noClusterIdReasonExplanation === 'v3-cluster'
+                ? t('The case is for a v3 cluster')
+                : t("I don't have my Cluster ID");
+        }
         if (id === 'v3-cluster')
             return t('The case is for a v3 cluster');
-        const cluster = find(clusters, (o) => o.external_id === id);
+        const cluster = find(clusters, (o) => o.external_cluster_id === id);
         return isEmpty(cluster) ? id : getDisplayNameForCluster(cluster);
     };
     const onDropdownClear = () => __awaiter(this, void 0, void 0, function* () {
         setIsOpen(false);
         setInputVal('');
         props.onClusterClear();
+        const fetchedClusters = yield fetchAccountClusters();
+        setClustersRawResponse(fetchedClusters.items);
+        setTotalResultsNo(fetchedClusters.total);
+        setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
     });
     const onToggle = (isOpen) => setIsOpen(isOpen);
     const onViewMoreClick = () => __awaiter(this, void 0, void 0, function* () {
-        const fetchedClusters = yield fetchAccountClusters();
-        const clusterResponse = [...clustersRawResponse, ...fetchedClusters.items];
+        const page = Math.floor(clustersRawResponse.length / PER_PAGE) + 1;
+        const fetchedClusters = yield fetchAccountClusters(inputVal, page);
+        const clusterResponse = [...clustersRawResponse, ...((fetchedClusters === null || fetchedClusters === void 0 ? void 0 : fetchedClusters.items) || [])];
         setClustersRawResponse(clusterResponse);
+        setTotalResultsNo(fetchedClusters.total);
         setClustersSelectOptions(getClusterOptions(clusterResponse));
     });
     const onSelect = (event, selectedCluster) => __awaiter(this, void 0, void 0, function* () {
         setInputVal('');
-        props.onClusterIdStateUpdate(selectedCluster);
-        setIsOpen(false);
+        if (event.target.tagName !== 'BUTTON') {
+            // checkbox is clicked
+            setShowArchivedClusters(!showArchivedClusters);
+            // reset
+            props.onClusterClear();
+            setClustersRawResponse([]);
+        }
+        else {
+            props.onClusterIdStateUpdate(selectedCluster);
+            setIsOpen(false);
+        }
     });
     const getClusterOptions = (clusters) => {
         const clustersResponseGrouped = groupBy(clusters, 'dns.base_domain') || [];
-        const domainNames = Object.keys(clustersResponseGrouped);
+        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) {
@@ -100,23 +118,28 @@ function OpenshiftDropdownV4(props) {
         domainNames.forEach((domain, index) => {
             domain !== 'undefined' &&
                 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].forEach((cluster, i) => {
-                clusterOptions.push(React.createElement(SelectOption, { key: i + cluster.external_id, value: createState(cluster.external_id, cluster.display_name) }));
-            });
+            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(Divider, { component: "div", key: index + domain }));
         });
         return [
-            ...clusterOptions,
+            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')) }),
                 ]
                 : []),
-            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-options-divider' })] : []),
+            ...clusterOptions,
         ];
     };
-    const fetchAccountClusters = (search = '') => __awaiter(this, void 0, void 0, function* () {
-        const page = Math.floor(clustersRawResponse.length / PER_PAGE) + 1;
+    const fetchAccountClusters = (search = '', page = 0) => __awaiter(this, void 0, void 0, function* () {
+        setIsFetchingClusters(true);
         try {
             if (abortControllerRef.current !== undefined) {
                 // Cancel the previous request
@@ -126,26 +149,56 @@ function OpenshiftDropdownV4(props) {
             let controller = new AbortController();
             abortControllerRef.current = controller;
             // query language: https://github.com/yaacov/tree-search-language
-            const clustersResponse = yield getAccountClustersRequest({
+            const clustersResponse = yield cloud.getAccountClustersSubscription({
                 order: 'display_name asc',
                 page,
                 size: PER_PAGE,
-                search: `external_id ILIKE '%${search}%' OR display_name ILIKE '%${search}%' OR dns.base_domain ILIKE '%${search}%'`,
+                search: `${showArchivedClusters ? '' : "status!='Archived'"} ${search && !showArchivedClusters ? 'AND' : ''} ${search ? `(external_cluster_id ILIKE '%${search}%' OR display_name ILIKE '%${search}%')` : ''}`,
+                fields: 'external_cluster_id,display_name,status,metrics.openshift_version',
             }, controller.signal);
-            const items = clustersResponse.items.map((item) => ({
-                display_name: getDisplayNameForCluster(item),
-                external_id: item.external_id,
-                dns: item.dns,
-            }));
+            const items = clustersResponse.items
+                .filter((c) => !isEmpty(c.external_cluster_id))
+                .map((item) => {
+                var _a, _b;
+                return ({
+                    display_name: getDisplayNameForCluster(item),
+                    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) || '',
+                });
+            });
+            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: clustersResponse.total,
-                page: clustersResponse.page,
+                totalResult: items.length,
+                page,
+                total: clustersResponse.total,
             };
         }
         catch (e) {
             // silently fails
-            return { items: [], totalResult: 0, page: 0 };
+            setIsFetchingClusters(false);
+            return { items: [], totalResult: 0, page: 0, total: 0 };
         }
     });
     // need to get clusters on load
@@ -154,10 +207,11 @@ function OpenshiftDropdownV4(props) {
     useEffect(() => {
         let isUnmounted = false;
         const fetchClusters = () => __awaiter(this, void 0, void 0, function* () {
-            const fetchedClusters = yield fetchAccountClusters();
+            const fetchedClusters = yield fetchAccountClusters(inputVal);
             if (!isUnmounted) {
-                setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
                 setClustersRawResponse(fetchedClusters.items);
+                setTotalResultsNo(fetchedClusters.total);
+                setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
             }
         });
         fetchClusters();
@@ -165,7 +219,7 @@ function OpenshiftDropdownV4(props) {
             isUnmounted = true;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.isV4]);
+    }, [props.isV4, showArchivedClusters]);
     useEffect(() => {
         if (props.isClusterIdInvalid) {
             setValidated('error');
@@ -178,15 +232,16 @@ function OpenshiftDropdownV4(props) {
         setInputVal(input);
         props.onClusterIdStateUpdate(createState(input, input));
         const fetchedClusters = yield fetchAccountClusters(input);
-        setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
         setClustersRawResponse(fetchedClusters.items);
+        setTotalResultsNo(fetchedClusters.total);
+        setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
     });
     const getSelectedItem = () => {
         if (!isEmpty(inputVal)) {
             return createState(props.openshiftClusterIDState, inputVal);
         }
         else {
-            return createState(props.openshiftClusterIDState, getDisplayNameById(clustersRawResponse, props.openshiftClusterIDState));
+            return createState(props.openshiftClusterIDState, getDisplayNameById(clustersRawResponse, props.openshiftClusterIDState, props.noClusterIdReasonExplanation));
         }
     };
     const titleId = 'case-details-cluster-nickname-selector';
@@ -197,8 +252,8 @@ 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, 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 && {
+            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 &&
+                clustersRawResponse.length < totalResultsNo && {
                 loadingVariant: {
                     text: 'Display additional results',
                     onClick: onViewMoreClick,

package/lib/esm/css/case.css

@@ -31,6 +31,10 @@ button,
     font-size: 14px;
 }
 
+.archived-clusters-checkbox {
+    grid-gap: 0px;
+}
+
 .case-details-tabs .case-details-tabs-content {
     background-color: #f0f0f0;
     margin-left: -1.8rem;

package/lib/esm/utils/caseOpenshiftClusterIdUtils.d.ts

@@ -1,7 +1,7 @@
+import { IClusterSubscriptionExtended } from '@cee-eng/hydrajs/@types/models/cloud';
 import { ISEProduct } from '@cee-eng/hydrajs/@types/models/product';
-import { ICluster } from '@rh-support/api';
-export declare const getDisplayNameById: (clusters: Partial<ICluster>[], id: string) => string;
-export declare const getDisplayNameForCluster: (cluster: Partial<ICluster>) => string;
+export declare const getDisplayNameById: (clusters: Partial<IClusterSubscriptionExtended>[], id: string) => string;
+export declare const getDisplayNameForCluster: (cluster: Partial<IClusterSubscriptionExtended>) => string;
 export declare const invalidGuidHelperText = "Please enter a valid Cluster ID (For example: d3aa88e2-c754-41e0-8ba6-4198a34aa0a2)";
 export declare const isClusterIdEnabledForProduct: (selectedProduct: string, allProducts: Partial<ISEProduct>[]) => boolean;
 export declare const isOpenShiftV3Product: (product: string, pcmConfig: any) => boolean;

package/lib/esm/utils/caseOpenshiftClusterIdUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"caseOpenshiftClusterIdUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/caseOpenshiftClusterIdUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAM3C,eAAO,MAAM,kBAAkB,aAAc,QAAQ,QAAQ,CAAC,EAAE,MAAM,MAAM,WAI3E,CAAC;AAEF,eAAO,MAAM,wBAAwB,YAAa,QAAQ,QAAQ,CAAC,WAIlE,CAAC;AAEF,eAAO,MAAM,qBAAqB,wFACuD,CAAC;AAE1F,eAAO,MAAM,4BAA4B,oBAAqB,MAAM,eAAe,QAAQ,UAAU,CAAC,EAAE,YAIvG,CAAC;AAEF,eAAO,MAAM,oBAAoB,YAAa,MAAM,4BAenD,CAAC;AAEF,eAAO,MAAM,qBAAqB,sCACkC,CAAC"}
+{"version":3,"file":"caseOpenshiftClusterIdUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/caseOpenshiftClusterIdUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAMpE,eAAO,MAAM,kBAAkB,aAAc,QAAQ,4BAA4B,CAAC,EAAE,MAAM,MAAM,WAI/F,CAAC;AAEF,eAAO,MAAM,wBAAwB,YAAa,QAAQ,4BAA4B,CAAC,WAKtF,CAAC;AAEF,eAAO,MAAM,qBAAqB,wFACuD,CAAC;AAE1F,eAAO,MAAM,4BAA4B,oBAAqB,MAAM,eAAe,QAAQ,UAAU,CAAC,EAAE,YAIvG,CAAC;AAEF,eAAO,MAAM,oBAAoB,YAAa,MAAM,4BAenD,CAAC;AAEF,eAAO,MAAM,qBAAqB,sCACkC,CAAC"}

package/lib/esm/utils/caseOpenshiftClusterIdUtils.js

@@ -5,15 +5,16 @@ import isEmpty from 'lodash/isEmpty';
 export const getDisplayNameById = (clusters, id) => {
     if (isEmpty(id))
         return '';
-    const cluster = find(clusters, (o) => o.external_id === id);
+    const cluster = find(clusters, (o) => o.external_cluster_id === id);
     return isEmpty(cluster) ? `${id}` : cluster.display_name;
 };
 export const getDisplayNameForCluster = (cluster) => {
     if (isEmpty(cluster))
         return '';
-    if (isEmpty(cluster.display_name) || cluster.display_name === cluster.external_id)
-        return `${cluster.external_id}`;
-    return `${cluster.external_id} <${cluster.display_name}>`;
+    const clusterId = (cluster === null || cluster === void 0 ? void 0 : cluster.external_cluster_id) || cluster.external_id;
+    if (isEmpty(cluster.display_name) || cluster.display_name === clusterId)
+        return clusterId;
+    return `${clusterId} <${cluster.display_name}>`;
 };
 export const invalidGuidHelperText = 'Please enter a valid Cluster ID (For example: d3aa88e2-c754-41e0-8ba6-4198a34aa0a2)';
 export const isClusterIdEnabledForProduct = (selectedProduct, allProducts) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "0.2.108",
+    "version": "0.2.113",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -26,7 +26,7 @@
         "lib/**/*"
     ],
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.10.0",
+        "@cee-eng/hydrajs": "4.10.2",
         "@cee-eng/ui-toolkit": "1.1.6",
         "@patternfly/patternfly": "4.185.1",
         "@patternfly/pfe-accordion": "1.12.3",
@@ -63,7 +63,7 @@
         "react-virtualized": "^9.21.2"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.10.0",
+        "@cee-eng/hydrajs": "4.10.2",
         "@cee-eng/ui-toolkit": "1.1.6",
         "@patternfly/patternfly": "4.185.1",
         "@patternfly/pfe-accordion": "1.12.3",
@@ -73,12 +73,12 @@
         "@patternfly/react-core": "4.202.16",
         "@progress/kendo-drawing": "^1.6.0",
         "@progress/kendo-react-pdf": "^3.12.0",
-        "@rh-support/api": "0.3.18",
-        "@rh-support/components": "1.1.62",
-        "@rh-support/react-context": "0.2.64",
-        "@rh-support/types": "0.3.0",
-        "@rh-support/user-permissions": "0.2.50",
-        "@rh-support/utils": "0.2.39",
+        "@rh-support/api": "0.3.21",
+        "@rh-support/components": "1.1.68",
+        "@rh-support/react-context": "0.2.72",
+        "@rh-support/types": "0.2.0",
+        "@rh-support/user-permissions": "0.2.57",
+        "@rh-support/utils": "0.2.43",
         "@types/react-redux": "^7.1.12",
         "@types/redux": "^3.6.0",
         "@webcomponents/webcomponentsjs": "^2.2.10",
@@ -143,5 +143,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "d079ee3127aa11ae00fa9febdf6519e9005140df"
+    "gitHead": "6bbb463984ea647a4be39bc7dd259dc3d8ecbf8d"
 }