@rh-support/manage 2.6.1 → 2.6.11

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

@@ -152,11 +152,9 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
                     catchOnCancel: true,
                     confirmText: t('Yes, I am sure'),
                     confirmButtonVariant: ButtonVariant.danger,
-                    description: (React.createElement(React.Fragment, null,
-                        React.createElement("h2", null,
-                            React.createElement(Trans, null, "Are you sure?")),
-                        React.createElement("p", null,
-                            React.createElement(Trans, null, "You are choosing to remove this account from the selected bookmark.")))),
+                    title: t('Are you sure?'),
+                    description: (React.createElement("p", null,
+                        React.createElement(Trans, null, "You are choosing to remove this account from the selected bookmark."))),
                 });
                 yield apiCalls.removeAccountApiCalls(account);
                 removeGroupedBookmarks(dispatchGlobalContext, bookmarkedGroupAccounts.data, [account.bookmarkId]);
@@ -178,13 +176,11 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
             try {
                 yield confirmation({
                     catchOnCancel: true,
-                    confirmButtonVariant: ButtonVariant.danger,
                     confirmText: t('Yes, I am sure'),
-                    description: (React.createElement(React.Fragment, null,
-                        React.createElement("h2", null,
-                            React.createElement(Trans, null, "Are you sure?")),
-                        React.createElement("p", null,
-                            React.createElement(Trans, null, "Removing this bookmark will permanently delete it from your records.")))),
+                    confirmButtonVariant: ButtonVariant.danger,
+                    title: t('Are you sure?'),
+                    description: (React.createElement("p", null,
+                        React.createElement(Trans, null, "Removing this bookmark will permanently delete it from your records."))),
                 });
                 const rootBookmarIds = uniq(allGroups[group].map((account) => account.rootBookmarkId));
                 const promiseArry = rootBookmarIds.map((id) => __awaiter(this, void 0, void 0, function* () { return yield apiCalls.removeGroupAccount(id); }));
@@ -221,7 +217,7 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
             title: t('Accounts'),
             sortable: false,
             cellWidth: 70,
-            cell: (group) => (React.createElement(LabelGroup, null, allGroups[group].map((account) => (React.createElement(Label, { color: "cyan", onClose: removeBookmarkedAccount(account), key: account.bookmarkId + account.bookmarkGroupName },
+            cell: (group) => (React.createElement(LabelGroup, null, allGroups[group].map((account) => (React.createElement(Label, { color: "teal", onClose: removeBookmarkedAccount(account), key: account.bookmarkId + account.bookmarkGroupName },
                 account.name,
                 "(",
                 account.accountNumber,
@@ -234,11 +230,9 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
             cellWidth: 10,
             cell: (group) => (React.createElement(ActionList, { isIconList: true },
                 React.createElement(ActionListItem, null,
-                    React.createElement(Button, { "aria-label": "edit", variant: "plain", onClick: () => onOpenEditGroupOpenModal(group) },
-                        React.createElement(PencilAltIcon, null))),
+                    React.createElement(Button, { icon: React.createElement(PencilAltIcon, null), "aria-label": "edit", variant: "plain", onClick: () => onOpenEditGroupOpenModal(group) })),
                 React.createElement(ActionListItem, null,
-                    React.createElement(Button, { "aria-label": "delete", variant: "plain", onClick: () => removeGroup(group) },
-                        React.createElement(TrashIcon, null))))),
+                    React.createElement(Button, { icon: React.createElement(TrashIcon, null), "aria-label": "delete", variant: "plain", onClick: () => removeGroup(group) })))),
         },
     ];
     const isValid = () => {
@@ -258,22 +252,21 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
                             React.createElement("a", { href: "https://source.redhat.com/communitiesatredhat/applications/integration-community-of-practice/misplaced/lostnfound/bookmarking", target: "_blank", rel: "noopener noreferrer" },
                                 ' ',
                                 "bookmarks in the customer support tool"))), closeBtnAriaLabel: "Close" },
-                    React.createElement(Button, { variant: "plain", className: "manage-bookmark-info-icon-button", "aria-label": "Cluster Id Info" },
-                        React.createElement(Icon, { size: "md" },
-                            React.createElement(InfoCircleIcon, null))))))),
-        React.createElement("div", { className: "toolbar" },
+                    React.createElement(Button, { icon: React.createElement(Icon, { size: "md" },
+                            React.createElement(InfoCircleIcon, { color: "#5e40be" })), variant: "plain", className: "manage-bookmark-info-icon-button", "aria-label": "Cluster Id Info" }))))),
+        React.createElement("div", { className: "toolbar pf-v6-u-justify-content-space-between" },
             React.createElement("form", { onSubmit: (event) => event.preventDefault(), className: "toolbar-left" },
                 React.createElement("label", { htmlFor: "bookmark-account-selector" },
                     React.createElement(Trans, null, "Search accounts")),
                 React.createElement("span", { className: "bookmark-account" },
                     React.createElement(BookmarkAccountSelector, { clearRef: clearRef, labelId: "bookmark-account-selector", isDisabled: !loggedInUserRights.data.isInternal() || !canBookmarkAccounts, bookmarkedGroupAccounts: bookmarkedGroupAccounts.data, onBookMarkAccountSelected: onBookMarkAccountSelected, addMode: true, isInValid: false })),
-                React.createElement("span", { className: "pf-v5-u-ml-sm" },
+                React.createElement("span", { className: "pf-v6-u-ml-sm" },
                     React.createElement(Button, { variant: ButtonVariant.primary, isInline: true, onClick: onOpenAddBookmarkModal, "data-tracking-id": "bookmark-add-button", isDisabled: isValid() || apiCalls.isAddingBookmark },
                         React.createElement(Trans, null, "Add bookmark")))),
             React.createElement("div", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "search-bookmark-account-selector" },
                     React.createElement(Trans, null, "Filter by")),
-                React.createElement(SearchInput, { className: "pf-v5-u-flex-grow-1 pf-v5-c-search-input pf-v5-u-background-color-100", value: searchString, id: "search-bookmark-account-selector", placeholder: t('Search for a bookmark'), "aria-label": t('Filter by searching for a bookmark'), onChange: (_, val) => setSearchString(val), onClear: () => setSearchString('') }))),
+                React.createElement(SearchInput, { className: "pf-v6-u-flex-grow-1 pf-v6-c-search-input pf-v6-u-background-color-100", value: searchString, id: "search-bookmark-account-selector", placeholder: t('Search for a bookmark'), "aria-label": t('Filter by searching for a bookmark'), onChange: (_, val) => setSearchString(val), onClear: () => setSearchString('') }))),
         React.createElement(AddEditBookmarkModal, { selectedAccounts: isInAddMode ? localSelectedAccounts : editGroupSelectedAccounts, groups: groups, isOpen: isUpdateBookmarkModalOpen, onSave: onAddEditBookmarksSave, onClose: closeAddEditBookmarkModal, onRemove: removeGroup, bookmarkedGroupAccounts: bookmarkedGroupAccounts.data, addMode: isInAddMode, title: isInAddMode ? t('Add a bookmark') : t('Edit bookmark') }),
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading bookmarked accounts list') } },
             React.createElement(ManageTable, { ariaLabel: t('Table to manage bookmarks'), columns: columns, data: groupNames, sortInfo: { column: 'bookmark-group-name', direction: 'asc' }, errorVariant: AlertVariant.warning, isFetching: bookmarkedGroupAccounts.isFetching ||

package/lib/esm/components/ManageCaseLabels/AddEditCaseLabelModal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ICaseLabel } from './types';
+export type SaveCaseLabelResult = {
+    success: boolean;
+    fieldError?: string;
+};
+interface IProps {
+    isOpen: boolean;
+    addMode: boolean;
+    label?: ICaseLabel | null;
+    isSaving?: boolean;
+    onClose: () => void;
+    onSave: (name: string, options?: {
+        keepOpen?: boolean;
+    }) => Promise<SaveCaseLabelResult> | SaveCaseLabelResult;
+}
+export declare function AddEditCaseLabelModal({ isOpen, addMode, label, isSaving, onClose, onSave }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AddEditCaseLabelModal.d.ts.map

package/lib/esm/components/ManageCaseLabels/AddEditCaseLabelModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddEditCaseLabelModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageCaseLabels/AddEditCaseLabelModal.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,MAAM,MAAM,mBAAmB,GAAG;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,GAAG,mBAAmB,CAAC;CAClH;AAED,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,MAAM,qBAkJ1G"}

package/lib/esm/components/ManageCaseLabels/AddEditCaseLabelModal.js

@@ -0,0 +1,97 @@
+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 { Button, ButtonVariant, Flex, FlexItem, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, TextInput, } from '@patternfly/react-core';
+import { CASE_LABEL_NAME_MAX_LENGTH } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+export function AddEditCaseLabelModal({ isOpen, addMode, label, isSaving = false, onClose, onSave }) {
+    const { t } = useTranslation();
+    const [name, setName] = useState('');
+    const [error, setError] = useState('');
+    useEffect(() => {
+        if (isOpen) {
+            setName(addMode ? '' : (label === null || label === void 0 ? void 0 : label.name) || '');
+            setError('');
+        }
+    }, [isOpen, addMode, label]);
+    const isOverMaxLength = name.length > CASE_LABEL_NAME_MAX_LENGTH;
+    const isNameEmpty = isEmpty(name.trim());
+    const canSave = !isNameEmpty && !isOverMaxLength && !isSaving;
+    const resetForm = () => {
+        setName('');
+        setError('');
+    };
+    const handleSave = () => __awaiter(this, void 0, void 0, function* () {
+        if (isNameEmpty) {
+            setError(t('Case label name cannot be empty.'));
+            return;
+        }
+        if (isOverMaxLength) {
+            return;
+        }
+        const result = yield onSave(name.trim(), { keepOpen: false });
+        if (!result.success && result.fieldError) {
+            setError(result.fieldError);
+        }
+    });
+    const handleSaveAndNew = () => __awaiter(this, void 0, void 0, function* () {
+        if (isNameEmpty) {
+            setError(t('Case label name cannot be empty.'));
+            return;
+        }
+        if (isOverMaxLength) {
+            return;
+        }
+        const result = yield onSave(name.trim(), { keepOpen: true });
+        if (result.success) {
+            resetForm();
+            return;
+        }
+        if (result.fieldError) {
+            setError(result.fieldError);
+        }
+    });
+    const handleClose = () => {
+        resetForm();
+        onClose();
+    };
+    return (React.createElement(Modal, { id: "add-edit-case-label-modal", "aria-describedby": "add-edit-case-label-modal", isOpen: isOpen, onClose: handleClose, variant: ModalVariant.small },
+        React.createElement(ModalHeader, null,
+            React.createElement("h2", null, addMode ? t('Create new case label') : t('Rename case label'))),
+        React.createElement(ModalBody, null,
+            React.createElement(FormGroup, { label: t('Case label name'), isRequired: true },
+                React.createElement(TextInput, { isRequired: true, type: "text", id: "case-label-name-input", value: name, onChange: (_, value) => {
+                        setName(value);
+                        if (!isEmpty(error)) {
+                            setError('');
+                        }
+                    }, placeholder: t('Enter a unique case label name'), validated: isOverMaxLength || !isEmpty(error) ? 'error' : 'default', isDisabled: isSaving }),
+                React.createElement(FormHelperText, null,
+                    React.createElement(Flex, { justifyContent: { default: 'justifyContentFlexEnd' } },
+                        React.createElement(FlexItem, null,
+                            React.createElement(HelperText, null,
+                                React.createElement(HelperTextItem, { variant: "default", className: `pf-v6-u-font-size-sm ${isOverMaxLength
+                                        ? 'pf-v6-u-text-color-status-danger'
+                                        : 'pf-v6-u-text-color-subtle'}` }, t('{{count}}/{{max}} characters', {
+                                    count: name.length,
+                                    max: CASE_LABEL_NAME_MAX_LENGTH,
+                                })))))),
+                !isEmpty(error) && (React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: "error" }, error)))))),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "save", variant: ButtonVariant.primary, onClick: handleSave, isDisabled: !canSave, isLoading: isSaving },
+                React.createElement(Trans, null, "Save")),
+            addMode && (React.createElement(Button, { key: "save-and-new", variant: ButtonVariant.secondary, onClick: handleSaveAndNew, isDisabled: !canSave, isLoading: isSaving },
+                React.createElement(Trans, null, "Save & New"))),
+            React.createElement(Button, { key: "cancel", variant: ButtonVariant.link, onClick: handleClose, isDisabled: isSaving },
+                React.createElement(Trans, null, "Cancel")))));
+}

package/lib/esm/components/ManageCaseLabels/ManageCaseLabelsTab.d.ts

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

package/lib/esm/components/ManageCaseLabels/ManageCaseLabelsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageCaseLabelsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageCaseLabels/ManageCaseLabelsTab.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAoC5D,wBAAgB,mBAAmB,sBAwUlC"}

package/lib/esm/components/ManageCaseLabels/ManageCaseLabelsTab.js

@@ -0,0 +1,220 @@
+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 { ActionList, ActionListItem, AlertVariant, Button, ButtonVariant, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, ModalVariant, SearchInput, } from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/js/icons/cubes-icon';
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon';
+import { ErrorBoundary, ToastNotification, useConfirmation } from '@rh-support/components';
+import { useGlobalStateContext } from '@rh-support/react-context';
+import { getStringifiedParams } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+import { useCaseLabels, useCreateCaseLabel, useDeleteCaseLabel, useUpdateCaseLabel, } from '../../hooks/useCaseLabelGraphQL';
+import { ManageTable } from '../ManageTable';
+import { AddEditCaseLabelModal } from './AddEditCaseLabelModal';
+const isDuplicateCaseLabelGraphQLError = (error) => {
+    var _a, _b, _c, _d;
+    if (!error || typeof error !== 'object') {
+        return false;
+    }
+    const apolloError = error;
+    const messages = [
+        ...((_b = (_a = apolloError.graphQLErrors) === null || _a === void 0 ? void 0 : _a.map((graphQLError) => graphQLError.message || '')) !== null && _b !== void 0 ? _b : []),
+        ...((_d = (_c = apolloError.errors) === null || _c === void 0 ? void 0 : _c.map((graphQLError) => graphQLError.message || '')) !== null && _d !== void 0 ? _d : []),
+        apolloError.message || '',
+    ]
+        .join(' ')
+        .toLowerCase();
+    return messages.includes('duplicate value found');
+};
+export function ManageCaseLabelsTab() {
+    var _a;
+    const { t } = useTranslation();
+    const history = useHistory();
+    const confirmation = useConfirmation();
+    const { globalMetadataState: { loggedInUsersAccount, loggedInUserRights }, } = useGlobalStateContext();
+    const accountId = (_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.salesforceAccountId;
+    const canManageCaseLabels = loggedInUserRights.data.isOrgAdmin();
+    const { labels: fetchedLabels, loading: isFetchingLabels, error: labelsError, refetch } = useCaseLabels(accountId);
+    const { createCaseLabel, loading: isCreatingLabel } = useCreateCaseLabel();
+    const { updateCaseLabel, loading: isUpdatingLabel } = useUpdateCaseLabel();
+    const { deleteCaseLabel } = useDeleteCaseLabel();
+    const [labels, setLabels] = useState([]);
+    const [searchString, setSearchString] = useState('');
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isInAddMode, setIsInAddMode] = useState(true);
+    const [selectedLabel, setSelectedLabel] = useState(null);
+    useEffect(() => {
+        setLabels(fetchedLabels);
+    }, [fetchedLabels]);
+    const filteredLabels = useMemo(() => {
+        if (isEmpty(searchString)) {
+            return labels;
+        }
+        return labels.filter((label) => label.name.toLowerCase().includes(searchString.toLowerCase()));
+    }, [labels, searchString]);
+    const hasNoLabels = !isFetchingLabels && !labelsError && labels.length === 0;
+    const onOpenAddModal = () => {
+        setIsInAddMode(true);
+        setSelectedLabel(null);
+        setIsModalOpen(true);
+    };
+    const onOpenEditModal = (label) => {
+        setIsInAddMode(false);
+        setSelectedLabel(label);
+        setIsModalOpen(true);
+    };
+    const closeModal = () => {
+        setIsModalOpen(false);
+        setSelectedLabel(null);
+        setIsInAddMode(true);
+    };
+    const onSaveLabel = (name, options) => __awaiter(this, void 0, void 0, function* () {
+        if (isInAddMode) {
+            if (!accountId) {
+                ToastNotification.addDangerMessage(t('Unable to create case label. Account information is missing.'));
+                return { success: false };
+            }
+            try {
+                yield createCaseLabel(name, accountId);
+                yield refetch();
+                ToastNotification.addSuccessMessage(t('Case label has been successfully created.'));
+                if (!(options === null || options === void 0 ? void 0 : options.keepOpen)) {
+                    closeModal();
+                }
+                return { success: true };
+            }
+            catch (error) {
+                if (isDuplicateCaseLabelGraphQLError(error)) {
+                    return {
+                        success: false,
+                        fieldError: t('Label name already in use. Try a different name.'),
+                    };
+                }
+                ToastNotification.addDangerMessage(t('Case label failed to create.'));
+                return { success: false };
+            }
+        }
+        if (selectedLabel) {
+            try {
+                yield updateCaseLabel(selectedLabel.id, name);
+                yield refetch();
+                ToastNotification.addSuccessMessage(t('Case label has been successfully updated.'));
+                closeModal();
+                return { success: true };
+            }
+            catch (error) {
+                if (isDuplicateCaseLabelGraphQLError(error)) {
+                    return {
+                        success: false,
+                        fieldError: t('Label name already in use. Try a different name.'),
+                    };
+                }
+                ToastNotification.addDangerMessage(t('Case label failed to update.'));
+                return { success: false };
+            }
+        }
+        return { success: false };
+    });
+    const onDeleteLabel = (label) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            yield confirmation({
+                catchOnCancel: true,
+                confirmText: t('Delete label'),
+                confirmButtonVariant: ButtonVariant.danger,
+                cancelText: t('Cancel'),
+                modalVariant: ModalVariant.large,
+                title: t('Delete case label'),
+                description: (React.createElement("div", { className: "case-label-delete-description", style: { display: 'flex', flexDirection: 'column', gap: '1.5rem' } },
+                    React.createElement("div", null, t('Are you sure you want to delete "{{name}}" case label?', { name: label.name })),
+                    React.createElement("div", { style: { whiteSpace: 'nowrap' } },
+                        t('This label is currently assigned to'),
+                        ' ',
+                        React.createElement("strong", null, t('{{count}} cases', { count: label.assignedCaseCount })),
+                        '. ',
+                        t('Deleting it will remove the label from all associated cases.')))),
+            });
+        }
+        catch (_a) {
+            // user cancelled
+            return;
+        }
+        try {
+            yield deleteCaseLabel(label.id);
+            yield refetch();
+            ToastNotification.addSuccessMessage(t('Case label has been successfully removed.'));
+        }
+        catch (_b) {
+            ToastNotification.addDangerMessage(t('Case label failed to remove.'));
+        }
+    });
+    const onViewAssignedCases = (label) => {
+        // Match Case List URL format (SolrQueryBuilder): caseLabel: ("<id>") orderBy lastModifiedDate desc
+        const query = `caseLabel: ("${label.id}") orderBy lastModifiedDate desc`;
+        history.push({
+            pathname: '/case/list',
+            search: getStringifiedParams({
+                query: encodeURIComponent(query),
+                searchType: 'basic',
+            }),
+        });
+    };
+    const columns = [
+        {
+            accessor: (label) => label.name,
+            sortable: false,
+            id: 'case-label-row',
+            title: '',
+            cellWidth: 100,
+            cell: (label) => (React.createElement("div", { className: "case-label-row" },
+                React.createElement("div", { className: "case-label-row__info" },
+                    React.createElement("div", { className: "pf-v6-u-font-weight-bold" }, label.name),
+                    React.createElement("div", { className: "pf-v6-u-color-200 pf-v6-u-font-size-sm" }, t('{{count}} cases assigned', { count: label.assignedCaseCount }))),
+                React.createElement("div", { className: "case-label-row__actions" },
+                    label.assignedCaseCount > 0 && (React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: () => onViewAssignedCases(label), "data-tracking-id": "case-label-view-assigned-cases" },
+                        React.createElement(Trans, null, "View assigned cases"))),
+                    canManageCaseLabels && (React.createElement(ActionList, { isIconList: true },
+                        React.createElement(ActionListItem, null,
+                            React.createElement(Button, { icon: React.createElement(PencilAltIcon, null), "aria-label": t('Edit case label {{name}}', { name: label.name }), variant: "plain", onClick: () => onOpenEditModal(label), "data-tracking-id": "case-label-edit" })),
+                        React.createElement(ActionListItem, null,
+                            React.createElement(Button, { icon: React.createElement(TrashIcon, null), "aria-label": t('Delete case label {{name}}', { name: label.name }), variant: "plain", onClick: () => onDeleteLabel(label), "data-tracking-id": "case-label-delete" }))))))),
+        },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("header", null,
+            React.createElement("h2", null, t('Case labels')),
+            React.createElement("p", null,
+                React.createElement(Trans, null, "Case labels help you organize and categorize cases with custom tags, making them easier to find, filter, and manage."))),
+        React.createElement("div", { className: "toolbar case-labels-toolbar" },
+            React.createElement("div", { className: "toolbar-left" },
+                hasNoLabels ? (React.createElement("span", null,
+                    React.createElement(Trans, null, "Case labels"))) : (React.createElement("label", { htmlFor: "search-case-label-input" },
+                    React.createElement(Trans, null, "Case labels"))),
+                !hasNoLabels && (React.createElement(React.Fragment, null,
+                    React.createElement(SearchInput, { className: "pf-v6-u-flex-grow-1 pf-v6-c-search-input pf-v6-u-background-color-100", value: searchString, id: "search-case-label-input", placeholder: t('Search case label by name.'), "aria-label": t('Search case label by name'), onChange: (_, val) => setSearchString(val), onClear: () => setSearchString('') }),
+                    canManageCaseLabels && (React.createElement("span", { className: "pf-v6-u-ml-sm" },
+                        React.createElement(Button, { variant: ButtonVariant.primary, isInline: true, onClick: onOpenAddModal, "data-tracking-id": "case-label-add-button" },
+                            React.createElement(Trans, null, "Add"))))))),
+            !hasNoLabels && (React.createElement("div", { className: "toolbar-right case-labels-toolbar__loaded pf-v6-u-color-200" }, t('{{loaded}} of {{total}} loaded.', {
+                loaded: filteredLabels.length,
+                total: filteredLabels.length,
+            })))),
+        React.createElement(AddEditCaseLabelModal, { isOpen: isModalOpen, addMode: isInAddMode, label: selectedLabel, isSaving: isCreatingLabel || isUpdatingLabel, onClose: closeModal, onSave: onSaveLabel }),
+        React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading case labels list') } }, hasNoLabels ? (React.createElement("div", { className: "table-wrapper case-labels-empty-state" },
+            React.createElement(EmptyState, { headingLevel: "h2", icon: CubesIcon, titleText: canManageCaseLabels ? t('Create your first case label') : t('No case labels available'), variant: EmptyStateVariant.lg },
+                React.createElement(EmptyStateBody, null, canManageCaseLabels ? (React.createElement(Trans, null, "Case labels help you organize and categorize cases with custom tags, making them easier to find, filter, and manage.")) : (React.createElement(Trans, null, "Your organization admin hasn't created any labels yet. Contact them to add labels for organizing and categorizing cases."))),
+                canManageCaseLabels && (React.createElement(EmptyStateFooter, null,
+                    React.createElement(Button, { variant: ButtonVariant.link, onClick: onOpenAddModal, "data-tracking-id": "case-label-empty-create-button" },
+                        React.createElement(Trans, null, "Create label"))))))) : (React.createElement(ManageTable, { ariaLabel: t('Table to manage case labels'), columns: columns, data: filteredLabels, errorVariant: AlertVariant.warning, isFetching: isFetchingLabels, isError: !!labelsError, errorTitle: t('Case labels error'), errorComponent: React.createElement(Trans, null, "Could not get case labels"), noResultText: canManageCaseLabels
+                ? t('There are no results to display. Try adding a case label or refining your search')
+                : t('There are no results to display. Try refining your search') })))));
+}

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

@@ -0,0 +1,2 @@
+export * from './ManageCaseLabelsTab';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageCaseLabels/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

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

@@ -0,0 +1 @@
+export * from './ManageCaseLabelsTab';

package/lib/esm/components/ManageCaseLabels/types.d.ts

@@ -0,0 +1,6 @@
+export interface ICaseLabel {
+    id: string;
+    name: string;
+    assignedCaseCount: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/esm/components/ManageCaseLabels/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageCaseLabels/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;CAC7B"}

package/lib/esm/components/ManageCaseLabels/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/ManageExpiredContents/ExpiredContentCategory.js

@@ -23,9 +23,9 @@ export default function ExpiredContentCategory({ category, isCategoryExpanded =
         ? category.content.filter((item) => !hasDateExpired(item.expiryDate))
         : category.content;
     const sortedExpiredContents = orderBy(expiredContents, ['expiryDate'], ['desc']);
-    return !isEmpty(sortedExpiredContents) ? (React.createElement(AccordionItem, null,
-        React.createElement(AccordionToggle, { id: category.categoryName, onClick: toggleExpanded, isExpanded: isExpanded },
+    return !isEmpty(sortedExpiredContents) ? (React.createElement(AccordionItem, { isExpanded: isExpanded },
+        React.createElement(AccordionToggle, { id: category.categoryName, onClick: toggleExpanded },
             React.createElement("h3", null, category.categoryName)),
-        React.createElement(AccordionContent, { isHidden: !isExpanded },
-            React.createElement("ul", { className: "list-flat list-flushleft" }, sortedExpiredContents.map((content, i) => (React.createElement(ExpiredContentSingleItem, { key: content.topContentId, content: content, category: category }))))))) : (React.createElement(React.Fragment, null));
+        React.createElement(AccordionContent, null,
+            React.createElement("ul", { className: "list-flat" }, sortedExpiredContents.map((content, i) => (React.createElement(ExpiredContentSingleItem, { key: content.topContentId, content: content, category: category }))))))) : (React.createElement(React.Fragment, null));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentHeader.js

@@ -4,6 +4,6 @@ export default function ExpiredContentHeader() {
     return (React.createElement("header", null,
         React.createElement("h2", null,
             React.createElement(Trans, null, "Expired Content")),
-        React.createElement("p", { className: "pf-v5-u-mt-md pf-v5-u-mb-sm" },
+        React.createElement("p", { className: "pf-v6-u-mt-md pf-v6-u-mb-sm" },
             React.createElement(Trans, null))));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpiredContentManager.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentManager.tsx"],"names":[],"mappings":"AAeA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,qBAAqB,sBAmH5C"}
+{"version":3,"file":"ExpiredContentManager.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentManager.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,qBAAqB,sBAsH5C"}

package/lib/esm/components/ManageExpiredContents/ExpiredContentManager.js

@@ -1,4 +1,4 @@
-import { Accordion, Bullseye, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, Spinner, Switch, } from '@patternfly/react-core';
+import { Accordion, Bullseye, EmptyState, EmptyStateBody, EmptyStateVariant, Spinner, Switch, } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { TagsSelector, TopContentSearch } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
@@ -52,17 +52,17 @@ export default function ExipredContentManager() {
     return (React.createElement(React.Fragment, null,
         React.createElement(ExpiredContentHeader, null),
         React.createElement("div", { className: "toolbar" },
-            React.createElement(TopContentSearch, { dataTrackingId: "expired-content-filter-manage", topContentData: expiredContentEditState, onSearch: onSearch, topContentResultsWrapperRef: expiredContentResultsRef, className: "toolbar-content", isDisabled: expiredContentResponse.isFetching, searchQuery: searchQuery, setSearchQuery: setSearchQuery }),
-            React.createElement("div", { className: "toolbar-content pf-v5-u-ml-md" },
-                React.createElement("label", { htmlFor: 'tag-selector' },
-                    React.createElement(Trans, null, "All tags")),
-                React.createElement(TagsSelector, { tagOptions: availableTags, onChange: onTagFilterChange, selectedTags: filteredTags, disabled: expiredContentResponse.isFetching })),
-            React.createElement("div", { className: "toolbar-content pf-v5-u-mt-md" },
-                React.createElement(Switch, { id: "content-approaching-expiry", label: t('Show approaching expiry'), isChecked: showApprochingExpiry, onChange: handleChange }))),
-        React.createElement("div", { className: "expired-content-manage-wrapper pf-v5-u-pt-md", ref: expiredContentResultsRef }, expiredContentResponse.isFetching ? (React.createElement(Bullseye, null,
+            React.createElement("div", { className: "toolbar-content" },
+                React.createElement(TopContentSearch, { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-row pf-v6-u-flex-fill pf-v6-u-align-items-center", dataTrackingId: "expired-content-filter-manage", topContentData: expiredContentEditState, onSearch: onSearch, topContentResultsWrapperRef: expiredContentResultsRef, isDisabled: expiredContentResponse.isFetching, searchQuery: searchQuery, setSearchQuery: setSearchQuery }),
+                React.createElement(Switch, { id: "content-approaching-expiry", className: "pf-v6-u-mt-sm", label: t('Show approaching expiry'), isChecked: showApprochingExpiry, onChange: handleChange })),
+            React.createElement("div", { className: "toolbar-content" },
+                React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-row pf-v6-u-align-items-center pf-v6-u-justify-content-flex-end" },
+                    React.createElement("label", { htmlFor: 'tag-selector' },
+                        React.createElement(Trans, null, "All tags")),
+                    React.createElement(TagsSelector, { typeahead: true, tagOptions: availableTags, onChange: onTagFilterChange, selectedTags: filteredTags, disabled: expiredContentResponse.isFetching })))),
+        React.createElement("div", { className: "expired-content-manage-wrapper pf-v6-u-p-md", ref: expiredContentResultsRef }, expiredContentResponse.isFetching ? (React.createElement(Bullseye, null,
             React.createElement(EmptyState, { variant: EmptyStateVariant.full },
-                React.createElement(Spinner, { size: "lg" })))) : isEmpty(filteredEC) ? (React.createElement(EmptyState, { variant: EmptyStateVariant.xs },
-            React.createElement(EmptyStateHeader, { titleText: React.createElement(Trans, null, "No contents found"), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }) }),
+                React.createElement(Spinner, { size: "lg" })))) : isEmpty(filteredEC) ? (React.createElement(EmptyState, { icon: SearchIcon, titleText: React.createElement(Trans, null, "No contents found"), variant: EmptyStateVariant.full },
             React.createElement(EmptyStateBody, null,
-                React.createElement(Trans, null, "There are no contents to display")))) : (React.createElement(Accordion, null, filteredEC.map((category, i) => (React.createElement(ExpiredContentCategory, { key: category.id, category: category, isCategoryExpanded: !isEmpty(searchQuery) || !isEmpty(filteredTags) }))))))));
+                React.createElement(Trans, null, "There are no contents to display")))) : (React.createElement(Accordion, { togglePosition: "start" }, filteredEC.map((category, i) => (React.createElement(ExpiredContentCategory, { key: category.id, category: category, isCategoryExpanded: !isEmpty(searchQuery) || !isEmpty(filteredTags) }))))))));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentSingleItem.js

@@ -63,16 +63,16 @@ export default function ExpiredContentSingleItem({ content, category }) {
         expired: formatDate(content.expiryDate),
     });
     return (React.createElement(React.Fragment, null, isPreview ? (React.createElement("li", { className: `push-bottom-narrow` },
-        React.createElement("a", { className: 'pcm-manage-top-content', "data-tracking-id": "pcm-manage-top-content", href: content.contentUrl, target: "_blank", rel: "noopener noreferrer" }, content.contentTitle),
+        React.createElement("a", { className: "pcm-manage-top-content pf-v6-u-mr-sm", "data-tracking-id": "pcm-manage-top-content", href: content.contentUrl, target: "_blank", rel: "noopener noreferrer" }, content.contentTitle),
         React.createElement(Button, { variant: "link", isInline: true, icon: React.createElement(EditAltIcon, null), onClick: editToggle, title: 'Edit', "data-tracking-id": "edit-expired-top-content" }),
         React.createElement("div", null,
             lastModifiedBy,
             " | ",
-            React.createElement("span", { className: "pf-v5-u-danger-color-200" }, expiredText),
+            React.createElement("span", { className: "pf-v6-u-text-color-status-danger" }, expiredText),
             " |",
             ' ',
             content.product,
             " ", (_a = content.majorVersion) !== null && _a !== void 0 ? _a : '',
             content.minorVersion ? `.${content.minorVersion}` : ''),
-        React.createElement("div", null, (_b = content.tags) === null || _b === void 0 ? void 0 : _b.map((tag) => (React.createElement(Label, { isCompact: true, className: "pf-v5-u-mr-xs pf-v5-u-mt-sm", key: tag.id, color: filteredTags.some((t) => t.id === tag.id) ? 'gold' : 'grey' }, tag.tagName)))))) : (React.createElement(ExpiredContentSingleItemView, { category: category, content: content, onCancel: editToggle, onSave: onSave, onDelete: onDelete, isDeleting: isDeleting, isSaving: isSaving }))));
+        React.createElement("div", null, (_b = content.tags) === null || _b === void 0 ? void 0 : _b.map((tag) => (React.createElement(Label, { isCompact: true, className: "pf-v6-u-mr-xs pf-v6-u-mt-sm", key: tag.id, color: filteredTags.some((t) => t.id === tag.id) ? 'yellow' : 'grey' }, tag.tagName)))))) : (React.createElement(ExpiredContentSingleItemView, { category: category, content: content, onCancel: editToggle, onSave: onSave, onDelete: onDelete, isDeleting: isDeleting, isSaving: isSaving }))));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentSingleItemView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpiredContentSingleItemView.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentSingleItemView.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAIjG,UAAU,MAAM;IACZ,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACjD,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,GACb,EAAE,MAAM,qBA4NR"}
+{"version":3,"file":"ExpiredContentSingleItemView.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentSingleItemView.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAIjG,UAAU,MAAM;IACZ,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACjD,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,GACb,EAAE,MAAM,qBAwOR"}