@rh-support/manage 2.5.272 → 2.5.276

package/lib/esm/components/Groups/ManageGroupUsers/ManageGroupUsers.js

@@ -7,39 +7,87 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { publicApi } from '@cee-eng/hydrajs';
-import { SearchInput } from '@patternfly/react-core';
-import { ErrorBoundary, ToastNotification, useFetch, usePrevious } from '@rh-support/components';
-import { useGlobalStateContext } from '@rh-support/react-context';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, SearchInput, Tooltip, } from '@patternfly/react-core';
+import { ErrorBoundary, ToastNotification, usePrevious } from '@rh-support/components';
+import { GlobalMetadataReducerConstants, useGlobalDispatchContext, useGlobalStateContext, } from '@rh-support/react-context';
+import { ability, resourceActions, resources } from '@rh-support/user-permissions';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import { useCaseGroupMembers, useDeleteCaseGroupMember } from '../../../hooks/useCaseGroupGraphQL';
 import { ManageTable } from '../../ManageTable/ManageTable';
+import { AddMembersModal } from '../AddMembersModal';
 import { DefaultGroupSwitch } from '../DefualtGroupSwitch';
 import { GroupSelect } from '../GroupSelect';
-import { GroupUserPermissionsSelect } from '../GroupUserPermissionsSelect';
+// TODO: Uncomment when updateUsers is migrated to GraphQL
+// import { GroupUserPermissionsSelect } from '../GroupUserPermissionsSelect';
+const RemoveMemberButton = ({ user, onRemove, isDisabled }) => {
+    const { t } = useTranslation();
+    const button = (React.createElement(Button, { variant: "link", isDanger: true, onClick: () => onRemove(user), isAriaDisabled: user.isOrgAdmin || isDisabled }, t('Remove')));
+    if (user.isOrgAdmin) {
+        return (React.createElement(Tooltip, { content: t('Organization Administrators cannot be removed because they have access to all groups') }, button));
+    }
+    return button;
+};
 export const ManageGroupUsers = () => {
+    var _a, _b;
     const { t } = useTranslation();
     const location = useLocation();
-    const { globalMetadataState: { loggedInUsersAccount }, } = useGlobalStateContext();
+    const { globalMetadataState: { caseGroups, loggedInUsersAccount, loggedInUser }, } = useGlobalStateContext();
+    const dispatchToGlobalMetadataReducer = useGlobalDispatchContext();
     const disableGroupSelect = !loggedInUsersAccount || !loggedInUsersAccount.data || !loggedInUsersAccount.data.accountNumber;
     const [selectedGroup, setSelectedGroup] = useState();
-    const { clearResponse, isFetching, request, data: response, } = useFetch(publicApi.caseGroups.getCaseGroupUsers);
-    const groupUsers = useMemo(() => response || [], [response]);
-    // errors
-    function onPermissionError(error, user) {
-        setData([...data]);
-        const message = t(`Could not change permission for {{user}}: {{error}}`, {
-            user: `${user.firstName} ${user.lastName}`,
-            error: error.message,
-        });
-        ToastNotification.addDangerMessage(message);
-    }
+    const { data: groupUsers, loading: isFetching, fetchMembers, refetch } = useCaseGroupMembers();
+    const defaultCaseGroupId = (_b = (_a = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _a === void 0 ? void 0 : _a.defaultCaseGroup) !== null && _b !== void 0 ? _b : null;
+    const membersWithOrgAdmin = useMemo(() => {
+        var _a, _b, _c, _d;
+        const loggedInContact = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data;
+        const selectedGroupId = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.groupNum;
+        const syncLoggedInUserDefault = (members) => {
+            if (!(loggedInContact === null || loggedInContact === void 0 ? void 0 : loggedInContact.ssoUsername) || !selectedGroupId)
+                return members;
+            return members.map((member) => member.ssoUsername === loggedInContact.ssoUsername
+                ? Object.assign(Object.assign({}, member), { isDefault: defaultCaseGroupId === selectedGroupId }) : member);
+        };
+        const members = syncLoggedInUserDefault(groupUsers || []);
+        const user = loggedInContact;
+        if (!(user === null || user === void 0 ? void 0 : user.isOrgAdmin) || !user.ssoUsername || !selectedGroup)
+            return members;
+        const alreadyPresent = members.some((m) => m.ssoUsername === user.ssoUsername);
+        if (alreadyPresent)
+            return members;
+        const syntheticEntry = {
+            firstName: (_a = user.firstName) !== null && _a !== void 0 ? _a : '',
+            lastName: (_b = user.lastName) !== null && _b !== void 0 ? _b : '',
+            isOrgAdmin: true,
+            access: true,
+            write: false,
+            isDefault: defaultCaseGroupId === selectedGroup.groupNum,
+            ssoUsername: user.ssoUsername,
+            email: (_c = user.email) !== null && _c !== void 0 ? _c : '',
+            contactSfId: (_d = user.id) !== null && _d !== void 0 ? _d : '',
+            memberRecordId: '',
+        };
+        return [...members, syntheticEntry];
+    }, [groupUsers, loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data, selectedGroup, defaultCaseGroupId]);
+    const canManageCaseGroups = ability.can(resourceActions.CREATE, resources.CASE_GROUPS);
+    const [isAddMembersModalOpen, setIsAddMembersModalOpen] = useState(false);
+    const [memberToRemove, setMemberToRemove] = useState(null);
+    const { deleteMember, loading: isDeleting } = useDeleteCaseGroupMember();
+    // TODO: Uncomment when updateUsers is migrated to GraphQL
+    // function onPermissionError(error: Error, user: IGroupUser) {
+    //     setData([...data]);
+    //     const message = t(`Could not change permission for {{user}}: {{error}}`, {
+    //         user: `${user.firstName} ${user.lastName}`,
+    //         error: error.message,
+    //     });
+    //     ToastNotification.addDangerMessage(message);
+    // }
     // set and sort fetched data.
-    const [initialData, setInitialData] = useState(groupUsers);
-    const [data, setData] = useState(groupUsers);
-    useEffect(() => setAllData(response || []), [response]);
+    const [initialData, setInitialData] = useState(membersWithOrgAdmin);
+    const [data, setData] = useState(membersWithOrgAdmin);
+    useEffect(() => setAllData(membersWithOrgAdmin || []), [membersWithOrgAdmin]);
     function setAllData(users) {
         setInitialData(users);
         setData(users);
@@ -58,21 +106,63 @@ export const ManageGroupUsers = () => {
             return tempUser;
         }));
     };
+    const onDefaultToggleSuccess = (user, isChecked) => {
+        var _a;
+        if (user.ssoUsername !== ((_a = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _a === void 0 ? void 0 : _a.ssoUsername) || !selectedGroup)
+            return;
+        const groupId = isChecked ? selectedGroup.groupNum : null;
+        const updatedLoggedInUserData = Object.assign(Object.assign({}, loggedInUser.data), { defaultCaseGroup: groupId });
+        dispatchToGlobalMetadataReducer({
+            type: GlobalMetadataReducerConstants.setLoggedInUser,
+            payload: {
+                loggedInUser: Object.assign(Object.assign({}, loggedInUser), { data: updatedLoggedInUserData }),
+            },
+        });
+        if (caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data) {
+            const updatedGroups = caseGroups.data.map((group) => (Object.assign(Object.assign({}, group), { isDefault: groupId !== null && group.groupNum === groupId })));
+            dispatchToGlobalMetadataReducer({
+                type: GlobalMetadataReducerConstants.setCaseGroups,
+                payload: {
+                    caseGroups: Object.assign(Object.assign({}, caseGroups), { data: updatedGroups }),
+                },
+            });
+        }
+    };
     const onGroupSelect = (group) => __awaiter(void 0, void 0, void 0, function* () {
         setSelectedGroup(group);
         if (group) {
-            request(loggedInUsersAccount.data.accountNumber, group.groupNum);
+            fetchMembers(group.groupNum);
         }
         else {
-            clearResponse();
+            setAllData([]);
         }
     });
-    function onPermissionsChange(user) {
-        const initialUsers = initialData.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
-        const users = data.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
-        setInitialData(initialUsers);
-        setData(users);
-    }
+    const handleRemoveMember = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!(memberToRemove === null || memberToRemove === void 0 ? void 0 : memberToRemove.memberRecordId))
+            return;
+        try {
+            yield deleteMember(memberToRemove.memberRecordId);
+            ToastNotification.addSuccessMessage(t('{{name}} has been removed from the group', {
+                name: `${memberToRemove.firstName} ${memberToRemove.lastName}`,
+            }));
+            refetch();
+        }
+        catch (error) {
+            ToastNotification.addDangerMessage(t('Could not remove member from group: {{message}}', {
+                message: error instanceof Error ? error.message : String(error),
+            }));
+        }
+        finally {
+            setMemberToRemove(null);
+        }
+    });
+    // TODO: Uncomment when updateUsers is migrated to GraphQL
+    // function onPermissionsChange(user: IGroupUser) {
+    //     const initialUsers = initialData.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
+    //     const users = data.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
+    //     setInitialData(initialUsers);
+    //     setData(users);
+    // }
     const columns = [
         {
             accessor: (user) => user.firstName,
@@ -92,16 +182,38 @@ export const ManageGroupUsers = () => {
             id: 'sso-username',
             title: t('Login'),
         },
-        {
-            id: 'permissions',
-            title: t('Permissions'),
-            cell: (user) => user.isOrgAdmin ? (t('Admin/Full access')) : (React.createElement(GroupUserPermissionsSelect, { onChange: onPermissionsChange, account: loggedInUsersAccount.data, group: selectedGroup, users: data, user: user, onError: onPermissionError })),
-        },
-        {
-            id: 'default',
-            title: t('Default group'),
-            cell: (user, index) => (React.createElement(DefaultGroupSwitch, { id: `${index}`, onToggle: onDefaultToggle, group: selectedGroup, user: user })),
-        },
+        // TODO: Uncomment when updateUsers is migrated to GraphQL
+        // {
+        //     id: 'permissions',
+        //     title: t('Permissions'),
+        //     cell: (user) =>
+        //         user.isOrgAdmin ? (
+        //             t('Admin/Full access')
+        //         ) : (
+        //             <GroupUserPermissionsSelect
+        //                 onChange={onPermissionsChange}
+        //                 account={loggedInUsersAccount.data}
+        //                 group={selectedGroup}
+        //                 users={data}
+        //                 user={user}
+        //                 onError={onPermissionError}
+        //             />
+        //         ),
+        // },
+        ...(canManageCaseGroups
+            ? [
+                {
+                    id: 'default',
+                    title: t('Default group'),
+                    cell: (user, index) => (React.createElement(DefaultGroupSwitch, { id: `${index}`, onToggle: onDefaultToggle, onToggleSuccess: onDefaultToggleSuccess, group: selectedGroup, user: user })),
+                },
+                {
+                    id: 'remove',
+                    title: '',
+                    cell: (user) => (React.createElement(RemoveMemberButton, { user: user, onRemove: setMemberToRemove, isDisabled: isDeleting })),
+                },
+            ]
+            : []),
     ];
     // filter out search query.
     const [userSearch, setUserSearch] = useState('');
@@ -121,12 +233,12 @@ export const ManageGroupUsers = () => {
         else {
             setData(initialData);
         }
-    }, [initialData, userSearch, setData, previousUserSearch, groupUsers]);
+    }, [initialData, userSearch, setData, previousUserSearch, membersWithOrgAdmin]);
     useEffect(() => {
         if (location.pathname !== '/manage/groups') {
             return;
         }
-        setAllData(response || []);
+        setAllData(membersWithOrgAdmin || []);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.pathname, loggedInUsersAccount.data]);
     return (React.createElement(React.Fragment, null,
@@ -134,11 +246,20 @@ export const ManageGroupUsers = () => {
             React.createElement("h2", { className: "pf-v6-u-pb-sm" }, t('Groups')),
             React.createElement("p", null, t('To filter cases while searching, add or edit groups.'))),
         React.createElement("div", { className: "toolbar pf-v6-u-justify-content-space-between" },
-            React.createElement(GroupSelect, { isDisabled: isFetching || disableGroupSelect, onSelect: onGroupSelect }),
+            React.createElement(GroupSelect, { isDisabled: isFetching || disableGroupSelect, onSelect: onGroupSelect, onAddMembers: () => setIsAddMembersModalOpen(true) }),
             React.createElement("span", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "account-group-filter" },
                     React.createElement(Trans, null, "Filter by")),
                 React.createElement(SearchInput, { className: "pf-v6-u-flex-grow-1 pf-v6-c-search-input pf-v6-u-background-color-100", id: "account-group-filter", value: userSearch, isDisabled: isFetching || !selectedGroup, onChange: (_, value) => setUserSearch(value), placeholder: t('Search for people in this group'), "aria-label": "Group search input", onClear: () => setUserSearch('') }))),
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading group users list') } },
-            React.createElement(ManageTable, { ariaLabel: t('Table to manage groups'), columns: columns, data: data, sortInfo: { column: 'first-name', direction: 'asc' }, isFetching: isFetching, isError: false }))));
+            React.createElement(ManageTable, { ariaLabel: t('Table to manage groups'), columns: columns, data: data, sortInfo: { column: 'first-name', direction: 'asc' }, isFetching: isFetching, isError: false, pagination: false })),
+        memberToRemove && (React.createElement(Modal, { variant: ModalVariant.small, isOpen: true, onClose: () => setMemberToRemove(null), "aria-label": t('Confirm removal') },
+            React.createElement(ModalHeader, { title: t('Remove member') }),
+            React.createElement(ModalBody, null, t('Are you sure you want to remove {{name}} from this group?', {
+                name: `${memberToRemove.firstName} ${memberToRemove.lastName}`,
+            })),
+            React.createElement(ModalFooter, null,
+                React.createElement(Button, { variant: "danger", onClick: handleRemoveMember, isLoading: isDeleting, isDisabled: isDeleting }, t('Remove')),
+                React.createElement(Button, { variant: "link", onClick: () => setMemberToRemove(null), isDisabled: isDeleting }, t('Cancel'))))),
+        canManageCaseGroups && isAddMembersModalOpen && selectedGroup && (React.createElement(AddMembersModal, { group: selectedGroup, existingMembers: initialData, onSuccess: refetch, onClose: () => setIsAddMembersModalOpen(false) }))));
 };

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"}