@rh-support/troubleshoot 2.4.10-beta.7 → 2.5.0

package/lib/esm/components/CaseEditView/Tabs/RelatedTasks/RelatedTasks.js

@@ -0,0 +1,118 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Badge, EmptyState, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, Pagination, SearchInput, ToggleGroup, ToggleGroupItem, } from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/js/icons/cubes-icon';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import isEqual from 'lodash/isEqual';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCaseSelector } from '../../../../context/CaseContext';
+const columnNames = {
+    id: 'Task ID',
+    type: 'Type',
+    status: 'Status',
+    title: 'Summary',
+};
+const RelatedTasks = () => {
+    const [activeToggleKey, setActiveToggleKey] = useState('all');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemsPerPage, setItemsPerPage] = useState(10);
+    const [searchQuery, setSearchQuery] = useState('');
+    const { caseNumber, bugzillaFetch, externalTrackers } = useCaseSelector((state) => ({
+        caseNumber: state.caseDetails.caseNumber,
+        bugzillaFetch: state.caseDetails.bugzillas,
+        externalTrackers: state.caseDetails.externalTrackers,
+    }), isEqual);
+    const [bugzillaData, setBugzillaData] = useState([]);
+    const [jiraData, setJiraData] = useState([]);
+    const { t } = useTranslation();
+    // reset pagination when searching for edge case
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchQuery, activeToggleKey]);
+    useEffect(() => {
+        const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const bugzillaTransformed = bugzillaFetch.map((bugzilla) => ({
+                    id: bugzilla.bugzillaNumber,
+                    type: 'Bugzilla',
+                    link: bugzilla.bugzillaLink || '',
+                    status: bugzilla.status || 'N/A',
+                    title: bugzilla.summary || 'N/A',
+                    date: new Date(bugzilla.linkedAt),
+                }));
+                setBugzillaData(bugzillaTransformed);
+                const jiraResults = externalTrackers;
+                const jiraTransformed = jiraResults.map((jira) => ({
+                    id: jira.resourceKey,
+                    type: 'Jira',
+                    link: jira.resourceURL || '',
+                    status: jira.status || 'N/A',
+                    title: jira.title || 'N/A',
+                    date: new Date(jira.createdAt),
+                }));
+                setJiraData(jiraTransformed);
+            }
+            catch (error) {
+                console.log(error);
+            }
+        });
+        fetchData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [bugzillaFetch, caseNumber, externalTrackers]);
+    const combinedData = [...bugzillaData, ...jiraData].sort((a, b) => b.date.getTime() - a.date.getTime());
+    const filteredData = combinedData.filter((item) => {
+        const lowercasedQuery = searchQuery.toLowerCase();
+        if (searchQuery &&
+            !item.title.toLowerCase().includes(lowercasedQuery) &&
+            !item.id.toString().toLowerCase().includes(lowercasedQuery)) {
+            return false;
+        }
+        if (activeToggleKey === 'all')
+            return true;
+        if (activeToggleKey === 'bugzilla')
+            return item.type === 'Bugzilla';
+        if (activeToggleKey === 'jira')
+            return item.type === 'Jira';
+        return true;
+    });
+    //pagination
+    const startIdx = (currentPage - 1) * itemsPerPage;
+    const endIdx = startIdx + itemsPerPage;
+    const displayData = filteredData.slice(startIdx, endIdx);
+    return (React.createElement("section", { className: "card card-white" },
+        (activeToggleKey === 'all' && (bugzillaData.length > 0 || jiraData.length > 0)) ||
+            (activeToggleKey === 'bugzilla' && bugzillaData.length > 0) ||
+            (activeToggleKey === 'jira' && jiraData.length > 0) ? (React.createElement("div", { className: "related-tasks-search-input-container", id: "related-tasks-search-container" },
+            React.createElement(SearchInput, { className: "related-tasks-search-input", placeholder: t('Search by Task ID or Summary'), value: searchQuery, onChange: (event) => setSearchQuery(event.currentTarget.value), onClear: () => setSearchQuery('') }))) : null,
+        React.createElement(ToggleGroup, { "aria-label": "Toggle Group" },
+            React.createElement(ToggleGroupItem, { text: t('All'), isSelected: activeToggleKey === 'all', onChange: () => setActiveToggleKey('all'), "data-tracking-id": 'related-tasks-all' }),
+            React.createElement(ToggleGroupItem, { text: t('Bugzilla'), isSelected: activeToggleKey === 'bugzilla', onChange: () => setActiveToggleKey('bugzilla'), "data-tracking-id": 'related-tasks-bugzilla' }),
+            React.createElement(ToggleGroupItem, { text: t('Jira'), isSelected: activeToggleKey === 'jira', onChange: () => setActiveToggleKey('jira'), "data-tracking-id": 'related-tasks-jira' })),
+        filteredData.length > 0 ? (React.createElement(React.Fragment, null,
+            React.createElement(Table, { "aria-label": "Issue Table" },
+                React.createElement(Thead, null,
+                    React.createElement(Tr, null,
+                        React.createElement(Th, null, columnNames.id),
+                        React.createElement(Th, null, columnNames.type),
+                        React.createElement(Th, null, columnNames.status),
+                        React.createElement(Th, null, columnNames.title))),
+                React.createElement(Tbody, null, displayData.map((item) => (React.createElement(Tr, { key: item.id },
+                    React.createElement(Td, { dataLabel: columnNames.id }, item.link ? (React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", "data-tracking-id": "related-tasks-issue-link" }, item.id)) : (item.id)),
+                    React.createElement(Td, { dataLabel: columnNames.type }, item.type),
+                    React.createElement(Td, { dataLabel: columnNames.status },
+                        React.createElement(Badge, { isRead: true }, item.status)),
+                    React.createElement(Td, { dataLabel: columnNames.title }, item.title)))))),
+            React.createElement("div", { className: "push-top" },
+                React.createElement(Pagination, { itemCount: filteredData.length, perPage: itemsPerPage, page: currentPage, onSetPage: (_, page) => setCurrentPage(page), onPerPageSelect: (_, perPage) => setItemsPerPage(perPage) })))) : (React.createElement("div", null,
+            React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+                React.createElement(EmptyStateHeader, { titleText: t("There aren't any related tasks."), headingLevel: "h4", icon: React.createElement(EmptyStateIcon, { icon: CubesIcon }) }))))));
+};
+export default RelatedTasks;

package/lib/esm/components/CaseEditView/index.d.ts

@@ -1,30 +1,24 @@
 import '../../css/app.css';
 import '../../css/case.css';
-import { IPfeCollapse } from '@rh-support/types/pfe/pfe-collapse';
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 declare global {
     interface Window {
         sessionjs: any;
         MSInputMethodContext: any;
-        chrometwo_require: (component: string[], callback: (...params: any[]) => any) => any;
         portal: any;
         Raven: any;
-        chrometwo_ready: any;
         seVersionInfo: {
             packageVersion: string;
             hydrajs: string;
         };
     }
-    namespace JSX {
-        interface IntrinsicElements extends IPfeCollapse {
-        }
-    }
     interface Document {
         documentMode: any;
     }
 }
 interface IProps {
 }
-export declare function CaseApp(routeProps: RouteComponentProps<IProps>): JSX.Element;
+export declare function CaseApp(routeProps: RouteComponentProps<IProps>): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/esm/components/CaseEditView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAI5B,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,OAAA,KAAK,GAAG,KAAK,GAAG,CAAC;QAC9E,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,eAAe,EAAE,GAAG,CAAC;QACrB,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,GAAG,CAAC;QACV,UAAU,iBAAkB,SAAQ,YAAY;SAAG;KACtD;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAED,UAAU,MAAM;CAAG;AASnB,wBAAgB,OAAO,CAAC,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC,eAkB9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAG5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAUvD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAED,UAAU,MAAM;CAAG;AAEnB,wBAAgB,OAAO,CAAC,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC,qBAoB9D"}

package/lib/esm/components/CaseEditView/index.js

@@ -1,27 +1,22 @@
 import '../../css/app.css';
 import '../../css/case.css';
 import { ConfirmationServiceProvider, ErrorBoundary } from '@rh-support/components';
-import { CustomElements, requireCustomElement } from '@rh-support/utils';
 import React from 'react';
 import { CaseContextProvider } from '../../context/CaseContext';
 import { CaseDetailsPageContextProvider } from '../../context/CaseDetailsPageContext';
 import { CaseDiscussionTabContextProvider } from '../../context/CaseDiscussionTabContext';
+import { CaseOverviewContextProvider } from '../../context/CaseOverviewContext';
 import { RecommendationContextProvider } from '../../context/RecommendationContext';
 import Case from './Case';
 import { PDFContainer } from './PDFContainer';
-requireCustomElement([
-    {
-        element: CustomElements.pfeCollapse,
-        requireCb: () => require('@patternfly/pfe-collapse'),
-    },
-]);
 export function CaseApp(routeProps) {
     return (React.createElement(ErrorBoundary, { isPageLevelError: true },
         React.createElement(CaseContextProvider, null,
-            React.createElement(RecommendationContextProvider, null,
-                React.createElement(CaseDetailsPageContextProvider, null,
-                    React.createElement(CaseDiscussionTabContextProvider, null,
-                        React.createElement(ConfirmationServiceProvider, null,
-                            React.createElement(PDFContainer, null,
-                                React.createElement(Case, { routeProps: routeProps })))))))));
+            React.createElement(CaseOverviewContextProvider, null,
+                React.createElement(RecommendationContextProvider, null,
+                    React.createElement(CaseDetailsPageContextProvider, null,
+                        React.createElement(CaseDiscussionTabContextProvider, null,
+                            React.createElement(ConfirmationServiceProvider, null,
+                                React.createElement(PDFContainer, null,
+                                    React.createElement(Case, { routeProps: routeProps }))))))))));
 }

package/lib/esm/components/CaseInformation/CaseGroup.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 interface IProps {
     init?: boolean;
 }
-declare function CaseGroup(props: IProps): JSX.Element;
+declare function CaseGroup(props: IProps): React.JSX.Element;
 export default CaseGroup;
 //# sourceMappingURL=CaseGroup.d.ts.map

package/lib/esm/components/CaseInformation/CaseGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseGroup.tsx"],"names":[],"mappings":"AAoBA,UAAU,MAAM;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAWD,iBAAS,SAAS,CAAC,KAAK,EAAE,MAAM,eAyP/B;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CaseGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseGroup.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAW5E,UAAU,MAAM;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAWD,iBAAS,SAAS,CAAC,KAAK,EAAE,MAAM,qBAwU/B;AAED,eAAe,SAAS,CAAC"}

package/lib/esm/components/CaseInformation/CaseGroup.js

@@ -7,13 +7,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Dropdown, ToastNotification, ValueChangedIcon } from '@rh-support/components';
+import { Button, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { ToastNotification, useSelectKeyboardNavigator, ValueChangedIcon } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
-import { toOption, toOptions } from '@rh-support/utils';
+import { toOption } from '@rh-support/utils';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
@@ -33,7 +35,7 @@ const emptyCaseGroup = {
 function CaseGroup(props) {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { groupNumber, caseNumber, accountNumber, selectedAccountDetails, ownersCaseGroups, groupName, isCaseOwnerUpdating, } = useCaseSelector((state) => ({
+    const { groupNumber, caseNumber, accountNumber, selectedAccountDetails, ownersCaseGroups, groupName, isCaseOwnerUpdating, contactSSOName, } = useCaseSelector((state) => ({
         caseNumber: state.caseDetails.caseNumber,
         groupNumber: state.caseDetails.groupNumber,
         accountNumber: state.caseDetails.accountNumberRef,
@@ -41,6 +43,7 @@ function CaseGroup(props) {
         selectedAccountDetails: state.selectedAccountDetails,
         groupName: state.caseDetails.groupName,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
+        contactSSOName: state.caseDetails.contactSSOName,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
     const { isExportingPDF } = useContext(PDFContext);
@@ -50,14 +53,18 @@ function CaseGroup(props) {
     const [isCaseGroupInvalid, setCaseGroupInvalid] = useState(false);
     const [isSelectedUngroupedInvalid, setIsSelectedUngroupedInvalid] = useState(false);
     const [isCaseGroupUpdating, setCaseGroupUpdating] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const textInputRef = useRef();
     const canEditCase = useCanEditCase();
-    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { loggedInUserRights, loggedInUser }, } = useContext(GlobalMetadataStateContext);
     // value changed logic to show a non local group change
     const [localGroupChange, setLocalGroupChange] = useState(false);
     const afterGroupLocalChange = () => setLocalGroupChange(false);
     const groupComparator = (value, pvalue) => value && pvalue && !isEmpty(value.groupNum) && !isEmpty(pvalue.groupNum) && value.groupNum !== pvalue.groupNum;
     const isInvalidateCaseGroup = (selectedItem) => {
-        const isInValidGroup = isEmpty(selectedItem) || !selectedItem.label;
+        const isInValidGroup = isEmpty(selectedItem) || !selectedItem.name;
         setCaseGroupInvalid(isInValidGroup);
         return isInValidGroup;
     };
@@ -77,28 +84,30 @@ function CaseGroup(props) {
         }
     });
     const onCaseGroupChange = (selection) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
-        if (!isInvalidateCaseGroup(selection) && selection.value.groupNum !== groupNumber) {
+        if (!isInvalidateCaseGroup(selection) && selection.groupNum !== groupNumber) {
             const caseDetails = {
-                groupNumber: selection.value.groupNum,
-                groupName: ((_a = selection.value) === null || _a === void 0 ? void 0 : _a.name) || '',
+                groupNumber: selection.groupNum,
+                groupName: selection.name || '',
             };
+            setIsOpen(false);
             if (!isEmpty(caseNumber)) {
                 yield onCaseGroupUpdate(caseDetails);
-                setIsSelectedUngroupedInvalid(isGroupMandatory && (!selection.value.groupNum || selection.value.groupNum === '-1'));
+                setIsSelectedUngroupedInvalid(isGroupMandatory && (!selection.groupNum || selection.groupNum === '-1'));
             }
             else {
                 setCaseDetails(caseDispatch, caseDetails);
                 setSelectedCaseGroupUsers(caseDispatch, accountNumber, caseDetails.groupNumber, loggedInUserRights.data);
             }
             setSelectedCaseGroup({
-                name: ((_b = selection.value) === null || _b === void 0 ? void 0 : _b.name) || '',
-                groupNum: selection.value.groupNum,
+                name: selection.name || '',
+                groupNum: selection.groupNum,
                 defaultMembers: [],
                 isDefault: false,
                 isPrivate: false,
                 members: [],
             });
+            setInputValue(selection.name);
+            setSelected(selection.name);
             setLocalGroupChange(true);
         }
     });
@@ -106,20 +115,19 @@ function CaseGroup(props) {
         const list = ownersCaseGroups.data;
         if (!list)
             return [];
+        const options = !isEmpty(inputValue)
+            ? list.filter((v) => v.name.toLowerCase().includes((inputValue || '').toLowerCase()))
+            : list;
         if (isGroupMandatory) {
             // having group selected for case is mandatory, make 'UnGrouped Case' option disabled
-            const listItems = list.map((item) => (Object.assign(Object.assign({}, item), { disabled: item.groupNum === '-1' })));
+            const listItems = options.map((item) => (Object.assign(Object.assign({}, item), { disabled: item.groupNum === '-1' })));
             // As group is mandatory, 'UnGrouped Case' cannot be selected we filter it out
-            return toOptions(listItems.filter((g) => g.groupNum !== '-1'), {
-                labelKey: 'name',
-                disabledKey: 'disabled',
-            });
-        }
-        else {
-            return toOptions(list, { labelKey: 'name' });
+            return listItems.filter((g) => g.groupNum !== '-1');
         }
+        else
+            return options;
     };
-    const onOuterClickGroupCheck = (selectedItem) => {
+    const onOuterClickGroupCheck = (event, selectedItem) => {
         isInvalidateCaseGroup(selectedItem);
     };
     useEffect(() => {
@@ -138,6 +146,8 @@ function CaseGroup(props) {
                     isPrivate: false,
                     members: [],
                 });
+                setInputValue(groupName);
+                setSelected(groupName);
             }
             return;
         }
@@ -149,6 +159,8 @@ function CaseGroup(props) {
             else {
                 setSelectedCaseGroup(selectedGroup);
             }
+            setInputValue(selectedGroup.name);
+            setSelected(selectedGroup.name);
         }
         else {
             setCaseGroupInvalid(true);
@@ -156,9 +168,14 @@ function CaseGroup(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ownersCaseGroups, caseNumber, isGroupMandatory]);
     const onCaseGroupClear = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
         try {
             yield onCaseGroupChange(toOption(emptyCaseGroup));
             setSelectedCaseGroup(emptyCaseGroup);
+            setInputValue('');
+            setSelected('');
+            (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            setIsOpen(false);
         }
         catch (error) {
             console.log(error);
@@ -166,15 +183,44 @@ function CaseGroup(props) {
     });
     const showHelperText = !isSelectedUngroupedInvalid || (!isCaseGroupInvalid && !isGroupMandatory);
     const showEmptyValidationError = !caseNumber && isNextBtnClickedToShowValidationError && isCaseGroupInvalid;
+    const canNotChangeGroup = () => !loggedInUserRights.data.isInternal() &&
+        !loggedInUser.data.isOrgAdmin &&
+        loggedInUser.data.ssoUsername !== contactSSOName &&
+        !loggedInUserRights.data.isPartner();
+    const onToggleClick = () => {
+        var _a;
+        setIsOpen((prev) => !prev);
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
+        list: computeDropdownList(),
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        onSelect: onCaseGroupChange,
+    });
+    const onInputQueryChange = (_v, query) => {
+        setInputValue(query);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isDisabled: ownersCaseGroups.isError ||
+            ownersCaseGroups.isFetching ||
+            isCaseGroupUpdating ||
+            isCaseOwnerUpdating ||
+            canNotChangeGroup(), status: ownersCaseGroups.isError || showEmptyValidationError || (caseNumber && isSelectedUngroupedInvalid)
+            ? 'danger'
+            : undefined, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: inputValue, onClick: onToggleClick, onChange: onInputQueryChange, onKeyDown: onInputKeyDown, autoComplete: "off", innerRef: textInputRef, placeholder: t(`Select a group`), role: "combobox", isExpanded: isOpen, "aria-controls": "select-typeahead-listbox" }),
+            !isCaseOwnerUpdating && (ownersCaseGroups.isFetching || isCaseGroupUpdating) ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Spinner, { size: "md" }))) : (React.createElement(TextInputGroupUtilities, Object.assign({}, (!inputValue ? { style: { display: 'none' } } : {})),
+                React.createElement(Button, { variant: "plain", onClick: onCaseGroupClear, "aria-label": "Clear input value" },
+                    React.createElement(TimesIcon, { "aria-hidden": true })))))));
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", { htmlFor: "get-support-group" },
             React.createElement(Trans, null, "Group"),
             React.createElement(ValueChangedIcon, { afterLocalChange: afterGroupLocalChange, comparator: groupComparator, isLocalChange: localGroupChange, value: selectedCaseGroup, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.group, (v) => v.name) }),
             isGroupMandatory && !isExportingPDF && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))),
-        React.createElement(Dropdown, { id: "get-support-group", searchable: (ownersCaseGroups.data || []).length > 10, onClearSelection: onCaseGroupClear, name: "get-support-group", placeholder: t(`Select a group`), title: t(`Select a group`), list: computeDropdownList(), selectedItem: toOption(selectedCaseGroup, { labelKey: 'name' }), disabled: ownersCaseGroups.isError ||
-                ownersCaseGroups.isFetching ||
-                isCaseGroupUpdating ||
-                isCaseOwnerUpdating, isLoadingList: !isCaseOwnerUpdating && (ownersCaseGroups.isFetching || isCaseGroupUpdating), onChange: onCaseGroupChange, isInValid: ownersCaseGroups.isError || showEmptyValidationError || (caseNumber && isSelectedUngroupedInvalid), required: isGroupMandatory, onOuterClick: onOuterClickGroupCheck, "data-tracking-id": "get-support-group", isExportingPDF: isExportingPDF }),
+        React.createElement(Select, { id: "get-support-group", "data-tracking-id": "get-support-group", isOpen: isOpen, selected: selected, onSelect: (event, val) => onCaseGroupChange(val), onOpenChange: () => setIsOpen(false), toggle: toggle, shouldFocusFirstItemOnOpen: false, onBlur: () => onOuterClickGroupCheck, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, null, computeDropdownList().map((option, index) => (React.createElement(SelectOption, { key: option.name, isFocused: focusedItemIndex === index, value: option }, option.name))))),
         caseNumber && isSelectedUngroupedInvalid && !isExportingPDF && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, "'Ungrouped Case' cannot be selected. Please select a group."))),
         showEmptyValidationError && isGroupMandatory && !isExportingPDF && (React.createElement("p", { className: "form-instructions form-invalid" },

package/lib/esm/components/CaseInformation/CaseInformation.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 interface IProps {
     routeProps: RouteComponentProps;
 }
-export default function CaseInformation(props: IProps): JSX.Element;
+export default function CaseInformation(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseInformation.d.ts.map

package/lib/esm/components/CaseInformation/CaseInformation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eA8GpD"}
+{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiHpD"}

package/lib/esm/components/CaseInformation/CaseInformation.js

@@ -10,7 +10,6 @@ import { OpenShiftClusterId } from '../CaseManagement/OpenShiftClusterId';
 import { Hostname } from '../ImproveCase/Hostname';
 import KtQuestions from '../ImproveCase/KtQuestions';
 import ClusterRecommendations from '../Recommendations/ClusterRecommendations';
-import Description from './Description';
 export default function CaseInformation(props) {
     const { t } = useTranslation();
     const { globalMetadataState: { allCaseTypes, allCaseSeverities, caseLanguages, loggedInUser, loggedInUserJwtToken, loggedInUsersAccount, }, } = useContext(GlobalMetadataStateContext);
@@ -60,14 +59,14 @@ export default function CaseInformation(props) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.createElement(LoadingIndicator, { show: isMetadataLoading(), size: "lg" }),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError() }),
-        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-u-mt-lg" },
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError() }),
+        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-v5-u-mt-lg" },
             React.createElement(Trans, { i18nKey: "i18ManageCaseContactCustomerService" },
                 "You need additional access to manage cases.\u00A0 Please contact",
                 ' ',
                 React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
                 " for assistance.")),
-        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-u-mt-lg", isInline: true },
+        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", isInline: true },
             React.createElement(Trans, { i18nKey: "i18ValidEntitlementContactCustomerService" },
                 "You need a valid entitlement to create a case.\u00A0 Please contact",
                 ' ',
@@ -81,6 +80,5 @@ export default function CaseInformation(props) {
                 React.createElement(Hostname, null),
                 React.createElement(OpenShiftClusterId, null),
                 React.createElement(ClusterRecommendations, { className: "push-bottom" }),
-                React.createElement(Description, { inlineEditable: false }),
                 React.createElement(KtQuestions, null))))));
 }

package/lib/esm/components/CaseInformation/CaseType.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 interface IProps {
     hideIdea?: boolean;
 }
-export default function CaseType(props: IProps): JSX.Element;
+export default function CaseType(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseType.d.ts.map

package/lib/esm/components/CaseInformation/CaseType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseType.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseType.tsx"],"names":[],"mappings":"AAmBA,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,MAAM,eAoE7C"}
+{"version":3,"file":"CaseType.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseType.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAoE7C"}

package/lib/esm/components/CaseInformation/ContactPhoneNumber.d.ts

@@ -1,2 +1,3 @@
-export declare function ContactPhoneNumber(): JSX.Element;
+import React from 'react';
+export declare function ContactPhoneNumber(): React.JSX.Element;
 //# sourceMappingURL=ContactPhoneNumber.d.ts.map

package/lib/esm/components/CaseInformation/ContactPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,kBAAkB,gBA4JjC"}
+{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAiB/D,wBAAgB,kBAAkB,sBAsVjC"}