@rh-support/troubleshoot 1.1.8 → 2.0.1

package/lib/esm/components/AccountInfo/AccountSelector.js

@@ -29,7 +29,7 @@ function AccountSelector(props) {
     const canAccessManagedAccounts = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.MANAGED_ACCOUNTS);
     const canBookmarkAccounts = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.BOOKMARK_ACCOUNTS);
     const canUseFindMyAccount = loggedInUserRights.data.isAccountDifferentFromLoggedInAccount(accountNumber);
-    //
+    // Account Change Handler
     const onAccountChange = (account) => {
         if (selectedAccountDetails.data.accountNumber === account.accountNumber)
             return;

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.d.ts

@@ -1,9 +1,6 @@
 import { ISEProduct } from '@cee-eng/hydrajs/@types/models/product';
-import { IApiResponseDetails } from '@rh-support/types/shared';
-import { ITroubleshootProductResponse } from '@rh-support/utils';
 interface IProps {
     products: Partial<ISEProduct>[];
-    allProducts: IApiResponseDetails<ITroubleshootProductResponse>;
     onProductChange: (product: Partial<ISEProduct>) => any;
     selectedProduct: Partial<ISEProduct>;
     onVersionChange: (version: string) => any;

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAC;AAMjE,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,WAAW,EAAE,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC;IACvD,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,wBAAwB,EAAE,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,gBAsHvD,CAAC"}
+{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAOpE,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC;IACvD,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,wBAAwB,EAAE,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,gBA0GvD,CAAC"}

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.js

@@ -1,13 +1,14 @@
 import { Divider, Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core';
-import filter from 'lodash/filter';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 export const NewProductDropdownSelector = (props) => {
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState('');
+    const [selected, setSelected] = useState(undefined);
     const [showValidationLocal, setShowValidationLocal] = useState(props.showValidationErrorAlert);
+    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
     useEffect(() => {
         if (props.selectedProduct) {
             setSelected(props.selectedProduct.name);
@@ -18,39 +19,9 @@ export const NewProductDropdownSelector = (props) => {
         setShowValidationLocal(props.showValidationErrorAlert);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.showValidationErrorAlert]);
-    const renderTopProducts = () => {
-        let topProductArray = [];
-        const entitledTopProducts = filter(props.allProducts.data.topProducts, (p) => p.isEntitledProduct);
-        entitledTopProducts.forEach((topProduct, index) => {
-            let menuItemTopProduct = React.createElement(SelectOption, { key: index, value: topProduct.name });
-            topProductArray.push(menuItemTopProduct);
-        });
-        const slicedTopProductArray = topProductArray.slice(0, 3);
-        return slicedTopProductArray;
+    const createOption = (product, id, type) => {
+        return React.createElement(SelectOption, { key: `${type}-${id}`, value: product.name, className: "pf-c-select__menu-wrapper" });
     };
-    const renderProducts = () => {
-        let productArray = [];
-        props.products.forEach((product, index) => {
-            let selectProductItem = React.createElement(SelectOption, { key: index, value: product.name });
-            productArray.push(selectProductItem);
-        });
-        return productArray;
-    };
-    const renderAllProductsTroubleshoot = () => {
-        let troubleshootProductArray = [];
-        props.allProducts.data.productsResult.forEach((product, index) => {
-            let selectProductItem = React.createElement(SelectOption, { key: index, value: product.name });
-            troubleshootProductArray.push(selectProductItem);
-        });
-        return troubleshootProductArray;
-    };
-    let options = [
-        //Top Products
-        React.createElement(SelectGroup, { label: "Top products", key: "topProducts" }, renderTopProducts()),
-        React.createElement(Divider, { key: "all-product-divider" }),
-        // All Products
-        React.createElement(SelectGroup, { label: "All products", key: "AllProducts" }, props.isCaseCreate ? renderProducts() : renderAllProductsTroubleshoot()),
-    ];
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);
     };
@@ -63,26 +34,41 @@ export const NewProductDropdownSelector = (props) => {
             return foundISEProduct;
         }
     };
-    const onSelect = (event, selection) => {
-        setSelected(selection);
-        let ISESelection = findISEProductObj(selection);
-        props.onProductChange(ISESelection);
-        setIsOpen(false);
+    const getOptions = () => {
+        const topProductOptions = allProducts.data.topProducts
+            .filter((p) => p.isEntitledProduct)
+            .map((p, id) => createOption(p, id, 'topProduct'))
+            .slice(0, 3);
+        const productOptions = props.products.map((p, id) => createOption(p, id, 'product'));
+        const allProductsTroubleshootOptions = allProducts.data.productsResult.map((p, id) => createOption(p, id, 'product'));
+        return [
+            React.createElement(SelectGroup, { label: t('Top products'), key: "topProducts" }),
+            ...topProductOptions,
+            React.createElement(Divider, { key: "all-product-divider" }),
+            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts" }),
+            ...(props.isCaseCreate ? productOptions : allProductsTroubleshootOptions),
+        ];
     };
     const onFilter = (e, textInput) => {
         if (textInput === '') {
-            return options;
+            return getOptions();
         }
         else {
             let finalFilteredProducts = [];
             let filteredProducts = props.products.filter((product) => { var _a; return (_a = product.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textInput.toLowerCase()); });
             filteredProducts.forEach((product, index) => {
-                let selectProductItem = React.createElement(SelectOption, { key: index, value: product.name });
+                let selectProductItem = createOption(product, index, 'product');
                 finalFilteredProducts.push(selectProductItem);
             });
             return finalFilteredProducts;
         }
     };
+    const onSelect = (event, selection) => {
+        setSelected(selection);
+        let ISESelection = findISEProductObj(selection);
+        props.onProductChange(ISESelection);
+        setIsOpen(false);
+    };
     return (React.createElement("div", null,
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search for or select a product'), onToggle: onToggle, onSelect: onSelect, isOpen: isOpen, placeholderText: t('Search for or select a product'), "aria-labelledby": t('Product-selector'), onFilter: onFilter, selections: selected, validated: isEmpty(selected) && showValidationLocal ? 'error' : 'default', "data-tracking-id": "get-support-product-dropdown-selector" }, options)));
+        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search for or select a product'), onToggle: onToggle, onSelect: onSelect, isOpen: isOpen, placeholderText: t('Search for or select a product'), "aria-labelledby": t('Product-selector'), onFilter: onFilter, selections: selected, validated: isEmpty(selected) && showValidationLocal ? 'error' : 'default', "data-tracking-id": "get-support-product-dropdown-selector" }, getOptions())));
 };

package/lib/esm/components/ProductSelector/ProductVersionDropdownSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductVersionDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductVersionDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAiC,MAAM,OAAO,CAAC;AAOtD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC;IACvD,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACnB;AAOD,QAAA,MAAM,8BAA8B,wEAgDlC,CAAC;AAEH,OAAO,EAAE,8BAA8B,EAAE,CAAC"}
+{"version":3,"file":"ProductVersionDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductVersionDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAiC,MAAM,OAAO,CAAC;AAOtD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC;IACvD,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACnB;AAOD,QAAA,MAAM,8BAA8B,wEA2ClC,CAAC;AAEH,OAAO,EAAE,8BAA8B,EAAE,CAAC"}

package/lib/esm/components/ProductSelector/ProductVersionDropdownSelector.js

@@ -1,4 +1,3 @@
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import React, { forwardRef, useContext } from 'react';
 import { Trans } from 'react-i18next';
 import { RouteContext } from '../../context/RouteContext';
@@ -10,7 +9,6 @@ const defaultProps = {
 };
 const ProductVersionDropdownSelector = forwardRef((props, ref) => {
     const { routeState: { isCaseCreate, showValidationErrorAlert }, } = useContext(RouteContext);
-    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "product-selector-wrapper" },
             React.createElement("label", { htmlFor: "product-selector-dropdown-downshift-search", ref: ref },
@@ -18,7 +16,7 @@ const ProductVersionDropdownSelector = forwardRef((props, ref) => {
                     React.createElement(Trans, null, "Product"),
                     ' ',
                     React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))),
-            React.createElement(NewProductDropdownSelector, { products: props.products, allProducts: allProducts, onProductChange: props.onProductChange, selectedProduct: props.selectedProduct, onVersionChange: props.onVersionChange, showValidationErrorAlert: showValidationErrorAlert, isCaseCreate: isCaseCreate })),
+            React.createElement(NewProductDropdownSelector, { products: props.products, onProductChange: props.onProductChange, selectedProduct: props.selectedProduct, onVersionChange: props.onVersionChange, showValidationErrorAlert: showValidationErrorAlert, isCaseCreate: isCaseCreate })),
         React.createElement("div", { className: "version-selector-wrapper" },
             React.createElement("label", { htmlFor: "version-selector-dropdown-toggle" },
                 React.createElement("h3", { className: "subheading subheading-sm" },

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

@@ -1 +1 @@
-{"version":3,"file":"ClusterRecommendationToast.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationToast.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AAMnE,UAAU,MAAM;CAAG;AAEnB,QAAA,MAAM,0BAA0B,EAAE,EAAE,CAAC,MAAM,CAgD1C,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"ClusterRecommendationToast.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationToast.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AAUnE,UAAU,MAAM;CAAG;AAEnB,QAAA,MAAM,0BAA0B,EAAE,EAAE,CAAC,MAAM,CAsD1C,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

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

@@ -1,14 +1,16 @@
-import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { Alert, AlertActionCloseButton, Button } from '@patternfly/react-core';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { isEmpty, isEqual } from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useCaseSelector } from '../../context/CaseContext';
-import { ClusterRecommendationsContext } from '../../context/ClusterRecommendationsContext';
+import { ClusterRecommendationsContext, ClusterRecommendationsDispatchContext, } from '../../context/ClusterRecommendationsContext';
+import { toggleClusterRecommendationModal } from '../../reducers/ClusterRecommendationsReducer';
 import { getIsClusterIdInvalid, isClusterIdEnabledForProduct } from '../../utils/caseOpenshiftClusterIdUtils';
 const ClusterRecommendationToast = () => {
     var _a;
-    const { clusterRecommendationsState: { clusterRecommendations }, } = useContext(ClusterRecommendationsContext);
+    const { clusterRecommendationsState: { clusterRecommendations, isClusterRecommendationsModalOpen }, } = useContext(ClusterRecommendationsContext);
+    const clusterRecommendationsDispatch = useContext(ClusterRecommendationsDispatchContext);
     const [isToastVisible, setToastVisibility] = useState(false);
     const { openshiftClusterID, product } = useCaseSelector((state) => ({
         openshiftClusterID: state.caseDetails.openshiftClusterID,
@@ -31,7 +33,11 @@ const ClusterRecommendationToast = () => {
     const hasCluster = isClusterIdEnabledForProduct(product, (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult);
     if (!isToastVisible || !hasCluster)
         return null;
-    return (React.createElement(Alert, { isLiveRegion: true, variant: "success", title: React.createElement(Trans, null, "Cluster recommendations are ready to view"), "data-tracking-id": "toast-view-cluster-sol", children: React.createElement("p", null,
+    const onViewRecommendations = () => {
+        setToastVisibility(false);
+        toggleClusterRecommendationModal(clusterRecommendationsDispatch, !isClusterRecommendationsModalOpen);
+    };
+    return (React.createElement(Alert, { isLiveRegion: true, variant: "success", title: React.createElement(Trans, null, "Cluster recommendations are ready to view"), "data-tracking-id": "toast-view-cluster-sol", children: React.createElement(Button, { isInline: true, variant: "link", onClick: onViewRecommendations },
             React.createElement(Trans, null, "Troubleshooting specific for your selected cluster.")), actionClose: React.createElement(AlertActionCloseButton, { variantLabel: "success alert", onClose: () => setToastVisibility(false) }) }));
 };
 export default ClusterRecommendationToast;

package/lib/esm/scss/_main.scss

@@ -1418,8 +1418,8 @@ div.support-grid-case-details.support-case {
         -ms-grid-rows: 1fr auto;
         grid-template-rows: 1fr auto;
         grid-template-areas:
-            'main'
-            'nav';
+            'main main'
+            'nav nav';
 
         .grid-main {
             -ms-grid-row: 1;

package/lib/esm/scss/_pf4-overrides.scss

@@ -405,3 +405,7 @@ div#case-reopen-modal.pf-c-modal-box__body {
         }
     }
 }
+
+pfe-accordion {
+    box-shadow: inset 1px 1px 0px #d2d2d2, inset -1px -1px 0px #d2d2d2;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "1.1.8",
+    "version": "2.0.1",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -73,11 +73,11 @@
         "@patternfly/react-core": "4.264.0",
         "@progress/kendo-drawing": "^1.6.0",
         "@progress/kendo-react-pdf": "^3.12.0",
-        "@rh-support/components": "1.3.1",
-        "@rh-support/react-context": "1.1.3",
-        "@rh-support/types": "0.2.1-beta.58",
-        "@rh-support/user-permissions": "1.1.0",
-        "@rh-support/utils": "1.0.10-beta.58",
+        "@rh-support/components": "2.0.1",
+        "@rh-support/react-context": "2.0.1",
+        "@rh-support/types": "2.0.1",
+        "@rh-support/user-permissions": "2.0.1",
+        "@rh-support/utils": "2.0.1",
         "@types/react-redux": "^7.1.12",
         "@types/redux": "^3.6.0",
         "@webcomponents/webcomponentsjs": "^2.2.10",
@@ -145,5 +145,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "f0ba37c79bcb3c80d8da82267ceadd5691b5a809"
+    "gitHead": "98c698c7f5ca8e1ec943598ef96a6fb816babc1e"
 }