@rh-support/troubleshoot 2.7.1 → 2.7.11

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

@@ -3,7 +3,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-c
 import WarningTriangleIcon from '@patternfly/react-icons/dist/js/icons/warning-triangle-icon';
 import { SingleSelectDropdown, ValueChangedIcon } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { autoEnableFtsOnCaseViewEditPage, PreviousCaseTypes, severitySort, showFtsOnCreateCasePage, } from '@rh-support/utils';
+import { getFtsForSeverityChange, PreviousCaseTypes, severitySort, } from '@rh-support/utils';
 import find from 'lodash/find';
 import findLast from 'lodash/findLast';
 import includes from 'lodash/includes';
@@ -27,16 +27,21 @@ const defaultProps = {
 };
 function Severity(props) {
     const { t } = useTranslation();
-    const { product, version, caseNumber, severity, entitlementSla, ownersEntitlements, versionsDetails, caseType } = useCaseSelector((state) => ({
-        product: state.caseDetails.product,
-        version: state.caseDetails.version,
-        caseNumber: state.caseDetails.caseNumber,
-        severity: state.caseDetails.severity,
-        entitlementSla: state.caseDetails.entitlementSla,
-        ownersEntitlements: state.ownersEntitlements,
-        versionsDetails: state.versionsDetails,
-        caseType: state.caseDetails.caseType,
-    }), isEqual);
+    const { product, version, caseNumber, severity, entitlementSla, ownersEntitlements, versionsDetails, caseType, accountHasPremiumSla, hasMultipleSlas, } = useCaseSelector((state) => {
+        var _a, _b;
+        return ({
+            product: state.caseDetails.product,
+            version: state.caseDetails.version,
+            caseNumber: state.caseDetails.caseNumber,
+            severity: state.caseDetails.severity,
+            entitlementSla: state.caseDetails.entitlementSla,
+            ownersEntitlements: state.ownersEntitlements,
+            versionsDetails: state.versionsDetails,
+            caseType: state.caseDetails.caseType,
+            accountHasPremiumSla: state.accountHasPremiumSla,
+            hasMultipleSlas: !!state.productServiceLevel && ((_b = (_a = state.otherServiceLevels) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0,
+        });
+    }, isEqual);
     const { globalMetadataState: { allCaseSeverities, allProducts }, } = useContext(GlobalMetadataStateContext);
     const { isExportingPDF } = useContext(PDFContext);
     const [isSeverityInValid, setIsSeverityInValid] = useState(false);
@@ -46,14 +51,16 @@ function Severity(props) {
     const caseDispatch = useCaseDispatch();
     const isOnCaseDetailsPage = !isEmpty(caseNumber);
     const isIdea = caseType === PreviousCaseTypes.FEATURE_ENHANCEMENT;
+    const ftsCreateOptions = { accountHasPremiumSla, hasMultipleSlas };
     const updateState = (value) => {
         const casePayload = {
             severity: value,
         };
-        // .. change fts on sev change only while creating case or when we change to sev1
-        !isOnCaseDetailsPage && (casePayload.fts = showFtsOnCreateCasePage(entitlementSla, value));
-        isOnCaseDetailsPage && autoEnableFtsOnCaseViewEditPage(entitlementSla, value) && (casePayload.fts = true);
-        casePayload.fts = casePayload.fts && !isIdea;
+        // Always send an explicit fts flag so CasePatch clears 24x7 when leaving severity 1.
+        casePayload.fts = getFtsForSeverityChange(entitlementSla, value, Object.assign({ isCaseEdit: isOnCaseDetailsPage }, ftsCreateOptions));
+        if (isIdea) {
+            casePayload.fts = false;
+        }
         if (isOnCaseDetailsPage) {
             props.onSeverityChange && props.onSeverityChange(casePayload);
         }
@@ -102,8 +109,11 @@ function Severity(props) {
         label: `${severity} - ${getSeverityDescription(severity)}`,
         additionalInfo: getNewSeverityStringDef(severity),
     };
-    const toggleModal = () => {
-        setOpenUpdateSeverityModal((openUpdateSeverityModal) => !openUpdateSeverityModal);
+    const openSeverityModal = () => {
+        setOpenUpdateSeverityModal(true);
+    };
+    const closeSeverityModal = () => {
+        setOpenUpdateSeverityModal(false);
     };
     useEffect(() => {
         var _a, _b, _c;
@@ -160,19 +170,18 @@ function Severity(props) {
                 ' ',
                 React.createElement("a", { href: "/support/policy/severity", target: "_blank" },
                     React.createElement(Trans, null, "Red Hat Support Severity Level Definitions"))), closeBtnAriaLabel: "Close" },
-            React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": t(`Support Severity Level info`) }))),
+            React.createElement(QuestionCircleIcon, { color: "#5e40be", className: "pf-v6-u-ml-xs icon-size cursor-pointer", "aria-label": t(`Support Severity Level info`) }))),
         "\u00A0",
         filteredSeverities.filter((s) => s.disabled).length !== 0 && (React.createElement(Tooltip, { position: TooltipPosition.top, content: React.createElement(Trans, null, "Only the enabled severity levels are supported for selected product and version.") },
             React.createElement(Icon, { size: "sm" },
                 React.createElement(WarningTriangleIcon, { color: "#ec7a08", title: "Support Severity Level warning" })))),
         !props.isDisabled && isOnCaseDetailsPage ? (React.createElement(React.Fragment, null,
-            React.createElement("div", { onClick: toggleModal },
-                React.createElement(SingleSelectDropdown, { dataTrackingId: "get-support-severity", selected: getSelectedDropdownOption, options: getDropdownOptions, onSelect: onSeverityChange, isDisabled: allCaseSeverities.isError ||
-                        props.isDisabled ||
-                        allCaseSeverities.isFetching ||
-                        ownersEntitlements.isFetching ||
-                        versionsDetails.isFetching, isLoading: props.isFetching, placeholder: t(`Select a severity`), isInvalid: allCaseSeverities.isError || isSeverityInValid, isScrollable: true, isModalOpen: openUpdateSeverityModal })),
-            openUpdateSeverityModal && (React.createElement(UpdateSeverityModal, { isDisabled: props.isFetching, isFetching: props.isFetching, show: openUpdateSeverityModal, onClose: toggleModal })))) : (React.createElement("div", null,
+            React.createElement(SingleSelectDropdown, { dataTrackingId: "get-support-severity", selected: getSelectedDropdownOption, options: getDropdownOptions, onSelect: onSeverityChange, isDisabled: allCaseSeverities.isError ||
+                    props.isDisabled ||
+                    allCaseSeverities.isFetching ||
+                    ownersEntitlements.isFetching ||
+                    versionsDetails.isFetching, isLoading: props.isFetching, placeholder: t(`Select a severity`), isInvalid: allCaseSeverities.isError || isSeverityInValid, isScrollable: true, isModalOpen: openUpdateSeverityModal, onMenuToggle: openSeverityModal }),
+            openUpdateSeverityModal && (React.createElement(UpdateSeverityModal, { isDisabled: props.isFetching, isFetching: props.isFetching, show: openUpdateSeverityModal, onClose: closeSeverityModal })))) : (React.createElement("div", null,
             React.createElement(SingleSelectDropdown, { className: "case-creation-severity-select", dataTrackingId: "get-support-severity", selected: getSelectedDropdownOption, options: getDropdownOptions, onSelect: onSeverityChange, isDisabled: allCaseSeverities.isError ||
                     props.isDisabled ||
                     allCaseSeverities.isFetching ||

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

@@ -1 +1 @@
-{"version":3,"file":"SupportLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/SupportLevel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAO5C,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,qBA+HlC;kBA/HQ,YAAY;;;AAiIrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SupportLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/SupportLevel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAO5C,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,qBA4HlC;kBA5HQ,YAAY;;;AA8HrB,eAAe,YAAY,CAAC"}

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

@@ -1,94 +1,86 @@
-import { Popover, PopoverPosition, ValidatedOptions } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Popover, PopoverPosition } from '@patternfly/react-core';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { SingleSelectDropdown } from '@rh-support/components';
 import { PreviousCaseTypes, showFtsOnCaseViewEditPage, showFtsOnCreateCasePage } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { setCaseDetails } from '../../reducers/CaseReducer';
+import { setCaseDetails, setCaseState } from '../../reducers/CaseReducer';
 const defaultProps = {
     id: '',
     className: '',
 };
 function SupportLevel(props) {
-    const { product, caseNumber, severity, entitlementSla, ownersEntitlements, caseType } = useCaseSelector((state) => ({
-        product: state.caseDetails.product,
+    const { caseNumber, severity, entitlementSla, caseType, productServiceLevel, otherServiceLevels, selectedEntitlementId, } = useCaseSelector((state) => ({
         caseNumber: state.caseDetails.caseNumber,
         severity: state.caseDetails.severity,
         entitlementSla: state.caseDetails.entitlementSla,
-        ownersEntitlements: state.ownersEntitlements,
         caseType: state.caseDetails.caseType,
+        productServiceLevel: state.productServiceLevel,
+        otherServiceLevels: state.otherServiceLevels,
+        selectedEntitlementId: state.selectedEntitlementId,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
     const { t } = useTranslation();
     const [isSupportLevelInValid, setIsSupportLevelInValid] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
     const isIdea = caseType === PreviousCaseTypes.FEATURE_ENHANCEMENT;
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
+    const allSlaOptions = [...(productServiceLevel ? [productServiceLevel] : []), ...(otherServiceLevels !== null && otherServiceLevels !== void 0 ? otherServiceLevels : [])].sort((a, b) => b.priority - a.priority);
+    const hasMultipleSlas = allSlaOptions.length > 1;
     const onCaseDetailsChange = (caseDetails) => {
         setCaseDetails(caseDispatch, caseDetails);
     };
-    const onEntitlementChange = (event, selected) => {
-        setIsOpen(false);
-        const casePayload = { entitlementSla: selected };
+    const onEntitlementChange = (selectedOption) => {
+        const entitlementId = selectedOption.value;
+        const matchedSla = allSlaOptions.find((sla) => sla.entitlementId === entitlementId);
+        const slaLabel = (matchedSla === null || matchedSla === void 0 ? void 0 : matchedSla.serviceLevelLabel) || '';
+        const casePayload = { entitlementSla: slaLabel };
         casePayload.fts = caseNumber
-            ? showFtsOnCaseViewEditPage(selected, severity)
-            : showFtsOnCreateCasePage(selected, severity);
+            ? showFtsOnCaseViewEditPage(slaLabel, severity)
+            : showFtsOnCreateCasePage(slaLabel, severity);
         casePayload.fts = casePayload.fts && !isIdea;
-        setIsSupportLevelInValid(isEmpty(selected));
+        setIsSupportLevelInValid(isEmpty(entitlementId));
         onCaseDetailsChange(casePayload);
+        setCaseState(caseDispatch, { selectedEntitlementId: entitlementId });
     };
-    const getSlaList = () => {
-        var _a, _b;
-        const entitledProduct = ((_b = (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) !== null && _b !== void 0 ? _b : []).find((entitledProduct) => entitledProduct.product === product);
-        if (entitledProduct && entitledProduct.serviceLevels) {
-            return entitledProduct.serviceLevels.split(';') || [];
-        }
-        else {
-            return ownersEntitlements.data ? ownersEntitlements.data.map((sla) => sla.slaProcessId) : [];
-        }
-    };
-    const getSelectedSla = () => {
-        var _a, _b;
-        const entitledProduct = ((_b = (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) !== null && _b !== void 0 ? _b : []).find((entitledProduct) => entitledProduct.product === product);
-        // if sla is empty then it means either first time this component is rendered or product has changed.
-        if (isEmpty(entitlementSla) && entitledProduct && entitledProduct.preferredServiceLevel) {
-            return entitledProduct.preferredServiceLevel;
-        }
-        else {
-            return isEmpty(entitlementSla) && !isEmpty(ownersEntitlements.data)
-                ? ownersEntitlements.data[0].slaProcessId
-                : entitlementSla;
-        }
-    };
-    const selectedSla = getSelectedSla();
+    const selectedSla = entitlementSla || (productServiceLevel === null || productServiceLevel === void 0 ? void 0 : productServiceLevel.serviceLevelLabel) || '';
+    const currentEntitlementId = selectedEntitlementId || (productServiceLevel === null || productServiceLevel === void 0 ? void 0 : productServiceLevel.entitlementId) || '';
     useEffect(() => {
-        if (!selectedSla || entitlementSla)
+        if (!productServiceLevel)
             return;
-        if (entitlementSla !== selectedSla) {
-            onCaseDetailsChange({ entitlementSla: selectedSla });
+        const validEntitlementIds = new Set([productServiceLevel, ...(otherServiceLevels !== null && otherServiceLevels !== void 0 ? otherServiceLevels : [])]
+            .map((sla) => sla.entitlementId)
+            .filter((id) => !!id));
+        const hasValidSelection = !!selectedEntitlementId && validEntitlementIds.has(selectedEntitlementId);
+        if (!hasValidSelection) {
+            onCaseDetailsChange({ entitlementSla: productServiceLevel.serviceLevelLabel });
+            setCaseState(caseDispatch, { selectedEntitlementId: productServiceLevel.entitlementId });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedSla, entitlementSla]);
+    }, [productServiceLevel, otherServiceLevels, selectedEntitlementId]);
+    const getSelectedOption = () => ({
+        label: selectedSla,
+        value: currentEntitlementId,
+    });
+    const getDropdownOptions = () => allSlaOptions.map((sla) => ({
+        label: sla.serviceLevelLabel,
+        value: sla.entitlementId || sla.serviceLevelLabel,
+    }));
+    if (!hasMultipleSlas)
+        return null;
     return (React.createElement("div", { className: `form-group ${props.className}`, id: `${props.id}` },
         React.createElement("label", { htmlFor: "get-support-supportLevel" },
             React.createElement(Trans, null, "Support level"),
             ' ',
-            !isEmpty(ownersEntitlements.data) && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))),
+            React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
         React.createElement(Popover, { "aria-label": "Support Level info", position: PopoverPosition.top, bodyContent: React.createElement("p", null,
                 React.createElement(Trans, { i18nKey: "i18ProductionSupportServiceLevelAgreement" },
                     "Learn more about our",
                     ' ',
                     React.createElement("a", { href: "/support/offerings/production/sla", target: "_blank" }, "production support service level agreement"))), closeBtnAriaLabel: "Close" },
-            React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": "Support Level Info" })),
-        React.createElement(Select, { variant: SelectVariant.single, "aria-label": t('Select Support Level'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onEntitlementChange, selections: selectedSla, isOpen: isOpen, "aria-labelledby": 'get-support-supportLevel', isDisabled: ownersEntitlements.isError || isEmpty(ownersEntitlements.data), validated: isSupportLevelInValid ? ValidatedOptions.error : ValidatedOptions.default, "data-tracking-id": "get-support-supportLevel" }, getSlaList().map((sla, index) => (React.createElement(SelectOption, { key: index, value: sla })))),
-        isEmpty(ownersEntitlements.data) && (React.createElement("p", { className: "form-instructions" }, ownersEntitlements.isError ? t('Error loading support levels') : t('No active subscriptions')))));
+            React.createElement(QuestionCircleIcon, { color: "#5e40be", className: "pf-v6-u-ml-xs icon-size cursor-pointer", "aria-label": "Support Level Info" })),
+        React.createElement(SingleSelectDropdown, { ariaLabel: t('Select Support Level'), onSelect: onEntitlementChange, selected: getSelectedOption(), options: getDropdownOptions(), isInvalid: isSupportLevelInValid, dataTrackingId: "get-support-supportLevel", placeholder: t('Select Support Level') })));
 }
 SupportLevel.defaultProps = defaultProps;
 export default SupportLevel;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+/** Case creation Labels dropdown — selection is stored and linked after case create. */
+export default function CaseLabelsCreate(): React.JSX.Element;
+//# sourceMappingURL=CaseLabelsCreate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseLabelsCreate.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/CaseLabelsCreate.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAY1F,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,gBAAgB,sBA6NvC"}

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

@@ -0,0 +1,141 @@
+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 { useApolloClient } from '@apollo/client/react';
+import { Label, MenuToggle, Select, SelectList, SelectOption, Spinner, } from '@patternfly/react-core';
+import { CaseLabelLoadErrorModal } from '@rh-support/components';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { fetchAllAccountCaseLabels } from '@rh-support/utils';
+import isEqual from 'lodash/isEqual';
+import unescape from 'lodash/unescape';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
+import { setCaseState } from '../../reducers/CaseReducer';
+const NUM_VISIBLE_LABELS = 3;
+/** Case creation Labels dropdown — selection is stored and linked after case create. */
+export default function CaseLabelsCreate() {
+    var _a, _b, _c;
+    const { t } = useTranslation();
+    const client = useApolloClient();
+    const caseDispatch = useCaseDispatch();
+    const { globalMetadataState: { loggedInUser, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
+    const isOrgAdmin = loggedInUser.data.isOrgAdmin;
+    const { salesforceAccountIdFromSelected, isSelectedAccountFetching, selectedAccountNumber, selectedLabelIds } = useCaseSelector((state) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return ({
+            salesforceAccountIdFromSelected: (_b = (_a = state.selectedAccountDetails) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.salesforceAccountId,
+            isSelectedAccountFetching: (_d = (_c = state.selectedAccountDetails) === null || _c === void 0 ? void 0 : _c.isFetching) !== null && _d !== void 0 ? _d : false,
+            selectedAccountNumber: (_f = (_e = state.selectedAccountDetails) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.accountNumber,
+            selectedLabelIds: (_g = state.selectedLabelIds) !== null && _g !== void 0 ? _g : [],
+        });
+    }, isEqual);
+    const salesforceAccountId = useMemo(() => {
+        var _a, _b;
+        if (salesforceAccountIdFromSelected) {
+            return salesforceAccountIdFromSelected;
+        }
+        const loggedInAccountNumber = (_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.accountNumber;
+        const loggedInSalesforceAccountId = (_b = loggedInUsersAccount.data) === null || _b === void 0 ? void 0 : _b.salesforceAccountId;
+        if (loggedInSalesforceAccountId &&
+            (!selectedAccountNumber || selectedAccountNumber === loggedInAccountNumber)) {
+            return loggedInSalesforceAccountId;
+        }
+        return undefined;
+    }, [
+        salesforceAccountIdFromSelected,
+        (_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.accountNumber,
+        (_b = loggedInUsersAccount.data) === null || _b === void 0 ? void 0 : _b.salesforceAccountId,
+        selectedAccountNumber,
+    ]);
+    const isAccountLoading = isSelectedAccountFetching || loggedInUsersAccount.isFetching;
+    const labelAccountId = salesforceAccountId !== null && salesforceAccountId !== void 0 ? salesforceAccountId : (_c = loggedInUsersAccount.data) === null || _c === void 0 ? void 0 : _c.salesforceAccountId;
+    const [availableLabels, setAvailableLabels] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(undefined);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isErrorModalDismissed, setIsErrorModalDismissed] = useState(false);
+    const updateSelectedLabelIds = (nextIds) => {
+        setCaseState(caseDispatch, { selectedLabelIds: nextIds });
+    };
+    const fetchLabels = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!labelAccountId) {
+            if (isAccountLoading) {
+                setLoading(true);
+                return;
+            }
+            setLoading(false);
+            setAvailableLabels([]);
+            return;
+        }
+        setLoading(true);
+        setError(undefined);
+        try {
+            const labelNodes = yield fetchAllAccountCaseLabels(client, labelAccountId);
+            setAvailableLabels(labelNodes
+                .map((node) => {
+                var _a, _b;
+                return ({
+                    id: node.Id,
+                    name: unescape((_b = (_a = node.Name) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''),
+                });
+            })
+                .filter((label) => label.id && label.name));
+        }
+        catch (e) {
+            setError(e);
+            setAvailableLabels([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }), [client, isAccountLoading, labelAccountId]);
+    useEffect(() => {
+        fetchLabels();
+    }, [fetchLabels]);
+    const handleSelect = (_event, labelId) => {
+        if (!labelId || typeof labelId !== 'string')
+            return;
+        updateSelectedLabelIds(selectedLabelIds.includes(labelId)
+            ? selectedLabelIds.filter((id) => id !== labelId)
+            : [...selectedLabelIds, labelId]);
+    };
+    const handleChipRemove = (labelId) => {
+        updateSelectedLabelIds(selectedLabelIds.filter((id) => id !== labelId));
+    };
+    const selectedLabels = availableLabels.filter((label) => selectedLabelIds.includes(label.id));
+    const haltEvent = (e) => e.stopPropagation();
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: () => setIsOpen((prev) => !prev), isExpanded: isOpen, isDisabled: loading || isAccountLoading || !!error || (!isOrgAdmin && availableLabels.length === 0 && !error), isFullWidth: true, style: { height: '36px' } }, loading || isAccountLoading ? (React.createElement(Spinner, { size: "md" })) : selectedLabels.length > 0 ? (React.createElement("span", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'nowrap' } },
+        selectedLabels.slice(0, NUM_VISIBLE_LABELS).map((label) => (React.createElement(Label, { key: label.id, variant: "outline", onClose: () => handleChipRemove(label.id), closeBtnAriaLabel: t('Remove label {{name}}', { name: label.name }), onClick: haltEvent }, label.name))),
+        selectedLabels.length > NUM_VISIBLE_LABELS && (React.createElement("span", { style: {
+                color: 'var(--pf-t--global--text--color--link--default)',
+                fontSize: '12px',
+                whiteSpace: 'nowrap',
+                cursor: 'pointer',
+            } }, t('{{count}} more', { count: selectedLabels.length - NUM_VISIBLE_LABELS }))))) : availableLabels.length === 0 ? (t('No label assigned')) : (t('Select labels'))));
+    return (React.createElement("div", { className: "form-group" },
+        React.createElement(CaseLabelLoadErrorModal, { isOpen: !!error && !isErrorModalDismissed, onRetry: () => {
+                setIsErrorModalDismissed(false);
+                fetchLabels();
+            }, onClose: () => setIsErrorModalDismissed(true) }),
+        React.createElement("label", { htmlFor: "case-labels-create" },
+            React.createElement(Trans, null, "Labels")),
+        React.createElement(Select, { id: "case-labels-create", "data-tracking-id": "case-labels-create", role: "menu", isOpen: isOpen, onSelect: handleSelect, onOpenChange: () => setIsOpen(false), toggle: toggle, shouldFocusFirstItemOnOpen: false, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, { id: "case-labels-create-listbox" }, availableLabels.map((label) => (React.createElement(SelectOption, { key: label.id, value: label.id, hasCheckbox: true, isSelected: selectedLabelIds.includes(label.id) }, label.name))))),
+        !loading && !isAccountLoading && !error && availableLabels.length === 0 && (React.createElement("p", { className: "form-instructions" }, isOrgAdmin ? (React.createElement(Trans, null,
+            React.createElement("strong", null, "No labels available:"),
+            " You haven't created any labels yet.",
+            ' ',
+            React.createElement(Link, { to: "/manage/case-labels", style: { textDecoration: 'none' }, onClick: () => window.scrollTo(0, 0) }, "Create a label"),
+            ' ',
+            "to start organizing your cases.")) : (React.createElement(Trans, null,
+            React.createElement("strong", null, "No labels available:"),
+            " Your organization admin hasn't created any labels yet. Contact them to add labels before you can select one."))))));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CaseLanguageSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/CaseLanguageSelector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,MAAM;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBAoGzD"}
+{"version":3,"file":"CaseLanguageSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/CaseLanguageSelector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,MAAM,WAAW,MAAM;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBA6FzD"}

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

@@ -1,10 +1,10 @@
-import { ValidatedOptions } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { SingleSelectDropdown } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import map from 'lodash/map';
+import React, { useContext, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { getDescriptionWOQues } from '../../reducers/CaseHelpers';
@@ -21,26 +21,15 @@ export default function CaseLanguageSelector(props) {
         caseLanguage: state.caseDetails.caseLanguage,
         isLoadingLang: state.isLoadingLang,
     }), isEqual);
-    const [isOpen, setIsOpen] = useState(false);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
     const canUseLanguageDetection = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseDetailsFields.CASE_LANGUAGE_DETECTION);
     const caseDispatch = useCaseDispatch();
     const { globalMetadataState: { caseLanguages }, } = useContext(GlobalMetadataStateContext);
     const onCaseDetailsChange = (caseDetails) => {
         setCaseDetails(caseDispatch, caseDetails);
     };
-    const onLanguageChange = (event, selection) => {
-        setIsOpen(false);
-        onCaseDetailsChange({ caseLanguage: selection });
+    const onLanguageChange = (option) => {
+        onCaseDetailsChange({ caseLanguage: option.value });
     };
-    useEffect(() => {
-        if (!caseLanguage) {
-            onCaseDetailsChange({ caseLanguage: caseLanguages.data[1] });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     useEffect(() => {
         if (!props.isManageStep || !isEmpty(caseLanguage) || isLoadingLang || !canUseLanguageDetection)
             return;
@@ -57,12 +46,20 @@ export default function CaseLanguageSelector(props) {
         canUseLanguageDetection,
         props.isManageStep,
     ]);
+    const getLanguageDropdownOptions = map(caseLanguages.data, (language) => ({
+        label: Constants.languagesMap[language] || language,
+        value: language,
+    }));
+    const getSelectedLanguageOption = {
+        label: caseLanguage ? Constants.languagesMap[caseLanguage] || caseLanguage : '',
+        value: caseLanguage || '',
+    };
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", { htmlFor: "get-support-language" },
             React.createElement(Trans, null, "Preferred language"),
             ' ',
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-        React.createElement(Select, { variant: SelectVariant.single, "aria-label": t(`Select a language`), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onLanguageChange, selections: caseLanguage, isOpen: isOpen, "aria-labelledby": 'get-support-language', isDisabled: caseLanguages.isError, validated: caseLanguages.isError ? ValidatedOptions.error : ValidatedOptions.default, "data-tracking-id": "preferred-language-select" }, caseLanguages.data.map((sla, index) => (React.createElement(SelectOption, { value: sla, key: index }, Constants.languagesMap[sla])))),
+        React.createElement(SingleSelectDropdown, { placeholder: t('Select a language'), dataTrackingId: "preferred-language-select", options: getLanguageDropdownOptions, selected: getSelectedLanguageOption, isDisabled: caseLanguages.isError, isInvalid: caseLanguages.isError, onSelect: onLanguageChange }),
         React.createElement("p", { className: "form-instructions" },
             React.createElement(Trans, null, "Select a language for communicating with our support engineers."))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/CaseManagement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,WAAW,MAAM;CAAG;AAC1B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,qBAkCnD"}
+{"version":3,"file":"CaseManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/CaseManagement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,WAAW,MAAM;CAAG;AAC1B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,qBA8CnD"}

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

@@ -1,39 +1,42 @@
 import { Grid, GridItem } from '@patternfly/react-core';
 import React from 'react';
 import { useCaseDispatch } from '../../context/CaseContext';
+import { useShowCaseGroupField } from '../../hooks/useCaseGroupUiState';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 import CaseGroup from '../CaseInformation/CaseGroup';
 import { ContactPhoneNumber } from '../CaseInformation/ContactPhoneNumber';
-import { ContactPhoneNumberAlert } from '../CaseInformation/ContactPhoneNumberAlert';
+// TODO: Re-enable once phone number verification flow is fully supported with GraphQL
+// import { ContactPhoneNumberAlert } from '../CaseInformation/ContactPhoneNumberAlert';
 import Fts from '../CaseInformation/Fts';
 import Severity from '../CaseInformation/Severity';
 import SupportLevel from '../CaseInformation/SupportLevel';
+import CaseLabelsCreate from './CaseLabelsCreate';
 import CaseLanguageSelector from './CaseLanguageSelector';
-import { Cep } from './Cep';
+// import { Cep } from './Cep';
 import OpenReferenceNumber from './OpenReferenceNumber';
 import { RHAssociatesSelector } from './RHAssociatesSelector';
-import CaseContactSelector from './SendNotifications/CaseContactSelector';
 export default function CaseManagement(props) {
     const caseDispatch = useCaseDispatch();
+    const showCaseGroupField = useShowCaseGroupField();
     const onSeverityChange = (payload) => {
         setCaseDetails(caseDispatch, payload);
     };
     return (React.createElement("form", null,
         React.createElement(SupportLevel, null),
         React.createElement(Grid, { hasGutter: true },
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                 React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                 React.createElement(ContactPhoneNumber, null))),
-        React.createElement(ContactPhoneNumberAlert, null),
         React.createElement(Fts, { inlineEditable: false }),
         React.createElement(Grid, { hasGutter: true },
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+            React.createElement(GridItem, { span: 12, xl2: showCaseGroupField ? 6 : 12, className: "pf-v6-u-mb-xs" },
                 React.createElement(CaseLanguageSelector, { isManageStep: true })),
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
-                React.createElement(CaseGroup, { init: true }))),
-        React.createElement(CaseContactSelector, null),
+            showCaseGroupField && (React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
+                React.createElement(CaseGroup, { init: true })))),
+        React.createElement(Grid, { hasGutter: true },
+            React.createElement(GridItem, { span: 12, xl2: 12, className: "pf-v6-u-mb-xs" },
+                React.createElement(CaseLabelsCreate, null))),
         React.createElement(RHAssociatesSelector, null),
-        React.createElement(OpenReferenceNumber, { inlineEditable: false, hideSaveCancel: true }),
-        React.createElement(Cep, null)));
+        React.createElement(OpenReferenceNumber, { inlineEditable: false, hideSaveCancel: true })));
 }

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":"AAuBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,qBAuThC"}
+{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAe/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,qBA4ThC"}