@rh-support/manage 0.2.95 → 0.2.98

package/lib/esm/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookmarkAccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAQtD,UAAU,MAAM;IACZ,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,eA2NpD;yBA3Ne,uBAAuB"}
+{"version":3,"file":"BookmarkAccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAUtD,UAAU,MAAM;IACZ,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAwPpD;yBAxPe,uBAAuB"}

package/lib/esm/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.js

@@ -8,20 +8,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts } from '@cee-eng/hydrajs';
-import { Label, Tooltip } from '@patternfly/react-core';
+import { Chip, ChipGroup, Label, Select, SelectOption, SelectVariant, Tooltip } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import assign from 'lodash/assign';
 import compact from 'lodash/compact';
+import debounce from 'lodash/debounce';
+import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
+import remove from 'lodash/remove';
 import React, { useEffect, useRef, useState } from 'react';
-import { AsyncTypeahead, Highlighter, Token } from 'react-bootstrap-typeahead';
 import { Trans, useTranslation } from 'react-i18next';
 export function BookmarkAccountSelector(props) {
     const [options, setOptions] = useState([]);
     const [isSearching, setIsSearching] = useState(false);
     const abortControllerRef = useRef(undefined);
-    const typeaheadRef = useRef(null);
     const { t } = useTranslation();
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const onToggle = (isOpen) => setIsOpen(isOpen);
+    const clearSelection = () => {
+        setIsOpen(false);
+        setSelected([]);
+        props.onBookMarkAccountSelected([]);
+    };
     const fetchAccounts = (query) => __awaiter(this, void 0, void 0, function* () {
         if (query == null)
             return;
@@ -69,20 +78,23 @@ export function BookmarkAccountSelector(props) {
             }
         }
     });
-    const clear = () => {
-        typeaheadRef.current.clear();
-    };
-    // this ref is used to call clear() outside component
-    props.clearRef.current = clear;
-    const handleChange = (selected) => {
-        const selectedObj = selected.map((bookmark) => (Object.assign(Object.assign({}, bookmark), { bookmarkId: bookmark.bookmarkId || undefined, rootBookmarkId: bookmark.rootBookmarkId || undefined })));
-        props.onBookMarkAccountSelected(selectedObj);
+    const onTypeaheadInputChanged = (input) => __awaiter(this, void 0, void 0, function* () {
+        yield fetchAccounts(input);
+    });
+    // this ref is used to call clearSelection() outside component
+    props.clearRef.current = clearSelection;
+    const debounceFn = debounce(onTypeaheadInputChanged, 500);
+    const onSelect = (event, currentSelected) => {
+        const alreadySelected = find(selected, (account) => account.accountNumber === currentSelected.accountNumber);
+        if (alreadySelected)
+            return;
+        const selectedAccounts = [
+            ...selected,
+            Object.assign(Object.assign({}, currentSelected), { bookmarkId: currentSelected.bookmarkId || undefined, rootBookmarkId: currentSelected.rootBookmarkId || undefined }),
+        ];
+        setSelected(selectedAccounts);
+        props.onBookMarkAccountSelected(selectedAccounts);
     };
-    const getLabels = (account) => account.accountNumber
-        ? account.name
-            ? `${account.name} (${account.accountNumber})`
-            : account.accountNumber
-        : '';
     const duplicateAccounts = (props.selectedGroup &&
         props.addMode &&
         props.bookmarkedGroupAccounts
@@ -91,6 +103,21 @@ export function BookmarkAccountSelector(props) {
         })
             .map((a) => a.accountNumber)) ||
         [];
+    const removeAccountChip = (e, removedAccount) => {
+        const updatedSelectedAccounts = remove(selected, (account) => account.accountNumber !== removedAccount.accountNumber);
+        setSelected(updatedSelectedAccounts);
+        props.onBookMarkAccountSelected(updatedSelectedAccounts);
+    };
+    const chipGroupComponent = () => {
+        return (React.createElement(ChipGroup, { numChips: 2 }, (selected || []).map((currentChip) => (React.createElement(Chip, { key: currentChip.accountNumber, onClick: (event) => removeAccountChip(event, currentChip), isOverflowChip: false },
+            currentChip.name,
+            " (",
+            currentChip.accountNumber,
+            ")")))));
+    };
+    useEffect(() => {
+        setSelected(props.defaultSelected || []);
+    }, [props.defaultSelected]);
     // when a group is added or removed from account we need to update dropdown
     // options to show correct group
     useEffect(() => {
@@ -109,18 +136,23 @@ export function BookmarkAccountSelector(props) {
         setOptions(newOptions);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.bookmarkedGroupAccounts]);
+    const titleId = 'multi-typeahead-bookmark-chip-group-props-id';
     return (React.createElement(React.Fragment, null,
-        React.createElement(AsyncTypeahead, { defaultSelected: props.defaultSelected || [], clearButton: true, positionFixed: true, "data-tracking-id": props.labelId, id: props.labelId, isLoading: isSearching, labelKey: getLabels, minLength: 0, onSearch: fetchAccounts, options: options, delay: 0, placeholder: t('Search for account names or numbers'), multiple: true, isInvalid: props.isInValid, disabled: props.isDisabled || false, renderMenuItemChildren: (account, props) => (React.createElement("div", null,
-                React.createElement(Highlighter, { key: account.bookmarkId, search: props.text }, getLabels(account)),
+        React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
+        React.createElement(Select, Object.assign({ chipGroupComponent: chipGroupComponent(), variant: SelectVariant.typeaheadMulti, typeAheadAriaLabel: t('Search for account names or numbers'), onToggle: onToggle, onSelect: onSelect, onClear: clearSelection, "data-tracking-id": props.labelId, selections: selected, isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Search for account names or numbers'), hasInlineFilter: false, onTypeaheadInputChanged: debounceFn, onFilter: () => undefined, "aria-describedby": "clusterID-validate-helper" }, (isSearching && { loadingVariant: 'spinner' })), options.map((account, index) => (React.createElement(SelectOption, { value: account, key: index },
+            React.createElement("div", null,
+                React.createElement("div", { className: "pf-u-color-100 pf-u-font-size-sm" },
+                    account.name,
+                    " (",
+                    account.accountNumber,
+                    ")"),
                 React.createElement("div", null, account.bookmarkGroupName.length === 0 ? (React.createElement("span", { className: "pf-u-color-400" },
                     React.createElement(Trans, null, "This account has not been bookmarked."))) : account.bookmarkGroupName.length > 2 ? (React.createElement("div", null,
                     React.createElement(Tooltip, { isContentLeftAligned: true, content: account.bookmarkGroupName.map((group) => (React.createElement("div", null, group))) },
                         React.createElement(Label, { color: "purple", icon: React.createElement(InfoCircleIcon, null), key: `${account.accountNumber}${account.bookmarkGroupName}` },
                             "Bookmarked ",
                             account.bookmarkGroupName.length,
-                            " times")))) : (account.bookmarkGroupName.map((group) => !isEmpty(group) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${group}` }, group))))))), renderToken: (option, { onRemove }, index) => (React.createElement(Token, { key: index, onRemove: onRemove, option: option, style: duplicateAccounts.includes(option.accountNumber)
-                    ? { backgroundColor: '#fdf7e7', color: '#795600' }
-                    : {} }, getLabels(option))), useCache: false, onChange: handleChange, ref: typeaheadRef }),
+                            " times")))) : (account.bookmarkGroupName.map((group) => !isEmpty(group) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${group}` }, group)))))))))),
         props.isInValid && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, "Select one or more accounts to bookmark"))),
         duplicateAccounts.length !== 0 && (React.createElement("p", { className: "form-instructions" },

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseCreate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesCaseCreate.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseCreate.tsx"],"names":[],"mappings":"AAaA,UAAU,MAAM;CAAG;AACnB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,eA0HlD"}
+{"version":3,"file":"PreferencesCaseCreate.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseCreate.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;CAAG;AACnB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,eAgIlD"}

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseCreate.js

@@ -9,7 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Card, CardBody, CardHeader, SelectOption } from '@patternfly/react-core';
 import { languageConst, ToastNotification } from '@rh-support/components';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { fetchCaseGroupsForSSO, GlobalMetadataDispatchContext, GlobalMetadataStateContext, } from '@rh-support/react-context';
+import { haventLoadedMetadata } from '@rh-support/utils';
 import { invert } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useState } from 'react';
@@ -18,7 +19,8 @@ import { useUserPreferences } from '../../../hooks/useUserPreferences';
 import { PreferenceSelect } from '../components/PreferenceSelect';
 export function PreferencesCaseCreate(props) {
     const { t } = useTranslation();
-    const { globalMetadataState: { caseGroups }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { caseGroups, loggedInUserJwtToken }, } = useContext(GlobalMetadataStateContext);
+    const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
     const [originalPreferredLanguage, setOriginalPreferredLanguage] = useState('');
     const [originalDefaultGroup, setOriginalDefaultGroup] = useState('');
     const [groupDictionary, setGroupDictionary] = useState({});
@@ -37,24 +39,6 @@ export function PreferencesCaseCreate(props) {
         const selectionKey = invert(groupDictionary)[selection];
         yield updateDefaultGroup(selectionKey);
     });
-    const userOriginalPreferredLanguage = () => __awaiter(this, void 0, void 0, function* () {
-        try {
-            const retrievedLanguage = yield getPreferredLanguage();
-            setOriginalPreferredLanguage(languageConst[retrievedLanguage]);
-        }
-        catch (_a) {
-            ToastNotification.addWarningMessage(t('Failed to fetch original preference'));
-        }
-    });
-    const userOriginalDefaultGroup = () => __awaiter(this, void 0, void 0, function* () {
-        try {
-            const retrievedGroupId = yield getDefaultGroup();
-            setOriginalDefaultGroup(groupDictionary[retrievedGroupId]);
-        }
-        catch (_b) {
-            ToastNotification.addWarningMessage(t('Failed to fetch original preference'));
-        }
-    });
     const createCaseGroupStruct = (caseGroups) => {
         const defaultGroupDictionary = {};
         for (let i = 0; i < caseGroups.data.length; i++) {
@@ -62,26 +46,50 @@ export function PreferencesCaseCreate(props) {
         }
         return defaultGroupDictionary;
     };
-    const refreshParsedGroups = () => {
-        var _a;
-        if (!isEmpty(caseGroups) && ((_a = caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            let updatedDictionary = createCaseGroupStruct(caseGroups);
-            setGroupDictionary(updatedDictionary);
-            const parsedDefaultGroupNames = [];
-            for (let groupId in updatedDictionary) {
-                parsedDefaultGroupNames.push(updatedDictionary[groupId]);
-            }
-            setUserDefaultGroupList(parsedDefaultGroupNames);
-        }
-    };
+    //use effect to retrieve original pref values.
     useEffect(() => {
+        const userOriginalPreferredLanguage = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const retrievedLanguage = yield getPreferredLanguage();
+                setOriginalPreferredLanguage(languageConst[retrievedLanguage]);
+            }
+            catch (_a) {
+                ToastNotification.addWarningMessage(t('Failed to fetch original preference'));
+            }
+        });
+        const userOriginalDefaultGroup = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const retrievedGroupId = yield getDefaultGroup();
+                setOriginalDefaultGroup(groupDictionary[retrievedGroupId]);
+            }
+            catch (_b) {
+                ToastNotification.addWarningMessage(t('Failed to fetch original preference'));
+            }
+        });
         userOriginalPreferredLanguage();
         userOriginalDefaultGroup();
-    });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // used to build the groups object
     useEffect(() => {
+        const refreshParsedGroups = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (haventLoadedMetadata(caseGroups, (data) => data === undefined)) {
+                yield fetchCaseGroupsForSSO(dispatchToGlobalMetadataReducer, loggedInUserJwtToken.username);
+            }
+            if (!isEmpty(caseGroups) && ((_a = caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                let updatedDictionary = createCaseGroupStruct(caseGroups);
+                setGroupDictionary(updatedDictionary);
+                const parsedDefaultGroupNames = [];
+                for (let groupId in updatedDictionary) {
+                    parsedDefaultGroupNames.push(updatedDictionary[groupId]);
+                }
+                setUserDefaultGroupList(parsedDefaultGroupNames);
+            }
+        });
         refreshParsedGroups();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [caseGroups]);
+    }, [caseGroups, dispatchToGlobalMetadataReducer, loggedInUserJwtToken]);
     return (React.createElement(Card, { className: "preference-card" },
         React.createElement(CardHeader, null,
             React.createElement("h3", null,

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesCaseView.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseView.tsx"],"names":[],"mappings":"AAcA,UAAU,MAAM;CAAG;AAEnB,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,eAgKhD"}
+{"version":3,"file":"PreferencesCaseView.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseView.tsx"],"names":[],"mappings":"AAcA,UAAU,MAAM;CAAG;AAEnB,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,eAiKhD"}

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseView.js

@@ -83,7 +83,7 @@ export function PreferencesCaseView(props) {
     });
     const titleId = 'default-comment-preference-select';
     const canUseHostName = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.HOSTNAME);
-    const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { loggedInUsersAccount, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const { request: fetchHostnameDefault } = useFetch(accounts.getIsSharingHostname);
     const accountNumber = loggedInUsersAccount.data.accountNumber;
     const { request: updateShareHostnames } = useFetch(accounts.updateIsSharingHostname);
@@ -92,14 +92,15 @@ export function PreferencesCaseView(props) {
             return __awaiter(this, void 0, void 0, function* () {
                 try {
                     const fetchedHostnameStatus = yield fetchHostnameDefault(accountNumber);
-                    setIsSharingHostNames(fetchedHostnameStatus.shareHostnameWithRHT);
+                    (fetchedHostnameStatus === null || fetchedHostnameStatus === void 0 ? void 0 : fetchedHostnameStatus.shareHostnameWithRHT) &&
+                        setIsSharingHostNames(fetchedHostnameStatus.shareHostnameWithRHT);
                 }
                 catch (error) {
                     console.log(error);
                 }
             });
         }
-        userOriginalHostnameValue();
+        !loggedInUserRights.data.isInternal && userOriginalHostnameValue();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const onShareHostNamesSwitch = () => __awaiter(this, void 0, void 0, function* () {

package/lib/esm/scss/_main.scss

@@ -113,14 +113,14 @@
             align-items: flex-start;
 
             .toolbar-left {
-                flex: 0 1 50%;
-                width: 50%;
+                flex: 0 1 70%;
+                width: 70%;
                 margin-bottom: 0;
             }
 
             .toolbar-right {
-                flex: 1 1 35%;
-                max-width: 35%;
+                flex: 1 1 28%;
+                max-width: 28%;
                 margin-left: auto;
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "0.2.95",
+    "version": "0.2.98",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "homepage": "",
@@ -78,7 +78,6 @@
         "@types/i18next": "^12.1.0",
         "@types/lodash": "^4.14.136",
         "@types/react": "^17.0.14",
-        "@types/react-bootstrap-typeahead": "^5.1.3",
         "@types/react-dom": "^17.0.9",
         "@types/react-i18next": "^8.1.0",
         "@types/react-router-dom": "^5.1.2",
@@ -97,9 +96,9 @@
         "@patternfly/react-core": "4.202.16",
         "@patternfly/react-table": "4.71.16",
         "@rh-support/api": "0.3.24",
-        "@rh-support/components": "1.1.76",
+        "@rh-support/components": "1.1.79",
         "@rh-support/configs": "0.2.5",
-        "@rh-support/react-context": "0.2.82",
+        "@rh-support/react-context": "0.2.85",
         "@rh-support/types": "0.2.0",
         "@rh-support/user-permissions": "0.2.63",
         "@rh-support/utils": "0.2.46",
@@ -108,10 +107,9 @@
         "lodash": ">=4.17.15",
         "react": "17.0.2",
         "react-beautiful-dnd": "^13.0.0",
-        "react-bootstrap-typeahead": "^5.1.4",
         "react-dom": "17.0.2",
         "react-i18next": ">=10.11.0",
         "react-router-dom": ">=5.1.2"
     },
-    "gitHead": "1359173d6efb7ece2bd1d0760c001e053bc29893"
+    "gitHead": "acb137236b62e31aba70cda91755b3b94f0cb7da"
 }