@rh-support/manage 2.4.10-beta.6 → 2.5.1

package/lib/esm/components/ManageTags/TagsManager.js

@@ -0,0 +1,261 @@
+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, Bullseye, Button, ButtonVariant, EmptyState, EmptyStateVariant, Flex, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, Spinner, TextInput, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon';
+import { ErrorBoundary, ToastNotification } from '@rh-support/components';
+import { formatDate } from '@rh-support/utils';
+import { isEmpty, isNull, isUndefined } from 'lodash';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { TagManagementDispatchContext, TagManagementStateContext } from '../../context/TagManagementContextProvider';
+import { createNewTags, deleteTag, fetchTopContentTags, updateTag } from '../../reducers/TagManagmentReducer';
+import { ManageTable } from '../ManageTable';
+export default function TagsManager() {
+    const { t } = useTranslation();
+    const [createTagModalOpen, setCreateTagModalOpen] = useState(false);
+    const [newTagName, setNewTagName] = useState('');
+    const [isCreatingNewTag, setIsCreatingNewTag] = useState(false);
+    const [createTagError, setCreateTagError] = useState('');
+    const [editTagModalOpen, setEditTagModalOpen] = useState(false);
+    const [editTagName, setEditTagName] = useState('');
+    const [isEditingTagName, setisEditingTagName] = useState(false);
+    const [selectedEditTag, setSelectedEditTag] = useState(null);
+    const [editTagError, setEditTagError] = useState('');
+    const [selectedDeleteTag, setSelectedDeleteTag] = useState(null);
+    const [isDeletingTag, setIsDeletingTag] = useState(false);
+    const [deleteTagModalOpen, setDeleteTagModalOpen] = useState(false);
+    const [tagSearchTerm, setTagSearchTerm] = useState('');
+    const { tagResponse, tags } = useContext(TagManagementStateContext);
+    const dispatch = useContext(TagManagementDispatchContext);
+    const tagsByIds = useMemo(() => tags.reduce((acc, t) => (Object.assign(Object.assign({}, acc), { [t.id]: t })), {}), [tags]);
+    const getCreateTagError = (tagName) => {
+        tagName = tagName.trim();
+        if (isEmpty(tagName))
+            return t('Tag name cannot be empty.');
+        const existingTag = tags.find((t) => t.tagName.toLowerCase() === tagName.toLowerCase());
+        if (existingTag)
+            return t('Tag with this name is already present.');
+        return '';
+    };
+    //filtering tags for user search
+    const filteredTagIds = useMemo(() => {
+        if (isEmpty(tagSearchTerm))
+            return tags.map((t) => t.id);
+        const filteredIds = [];
+        tags.forEach((t) => {
+            if (t.tagName.toLowerCase().includes(tagSearchTerm.toLowerCase())) {
+                filteredIds.push(t.id);
+            }
+        });
+        return filteredIds;
+    }, [tagSearchTerm, tags]);
+    const getTopContentTags = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            yield fetchTopContentTags(dispatch);
+        }
+        catch (err) {
+            ToastNotification.addDangerMessage(t('Error loading tag details'));
+        }
+    });
+    useEffect(() => {
+        getTopContentTags();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onCreateNewTag = () => __awaiter(this, void 0, void 0, function* () {
+        const errorMsg = getCreateTagError(newTagName);
+        if (!isEmpty(errorMsg)) {
+            setCreateTagError(errorMsg);
+            return;
+        }
+        try {
+            setIsCreatingNewTag(true);
+            yield createNewTags(dispatch, [{ tagName: newTagName.trim(), isActive: true }]);
+            setTagSearchTerm('');
+            ToastNotification.addSuccessMessage(t('Successfully created tag'));
+        }
+        catch (err) {
+            console.log({ err });
+            ToastNotification.addDangerMessage(t('Error creating tag'));
+        }
+        finally {
+            setIsCreatingNewTag(false);
+            onCancelCreateNewTag();
+        }
+    });
+    const onCancelCreateNewTag = () => {
+        setCreateTagError('');
+        setCreateTagModalOpen(false);
+        setNewTagName('');
+    };
+    const onEditTagClick = (tag) => __awaiter(this, void 0, void 0, function* () {
+        setEditTagName(tag.tagName);
+        setSelectedEditTag(tag);
+        setEditTagModalOpen(true);
+    });
+    const onEditTagConfirm = () => __awaiter(this, void 0, void 0, function* () {
+        const errorMsg = getCreateTagError(editTagName);
+        if (!isEmpty(errorMsg)) {
+            setEditTagError(errorMsg);
+            return;
+        }
+        if (isNull(selectedEditTag) || isUndefined(selectedEditTag))
+            return;
+        try {
+            setisEditingTagName(true);
+            yield updateTag(dispatch, { id: selectedEditTag.id, tagName: editTagName.trim() }, tags);
+            ToastNotification.addSuccessMessage(t('Successfully edited tag'));
+        }
+        catch (err) {
+            console.log(err);
+            ToastNotification.addDangerMessage(t('Error editing tag'));
+        }
+        finally {
+            setisEditingTagName(false);
+            onEditCancel();
+        }
+    });
+    const onEditCancel = () => {
+        setEditTagModalOpen(false);
+        setSelectedEditTag(null);
+        setEditTagName('');
+        setEditTagError('');
+    };
+    const onDeleteTagClick = (tag) => __awaiter(this, void 0, void 0, function* () {
+        setDeleteTagModalOpen(true);
+        setSelectedDeleteTag(tag);
+    });
+    const onDeleteTagConfirm = () => __awaiter(this, void 0, void 0, function* () {
+        if (isNull(selectedDeleteTag) || isUndefined(selectedDeleteTag))
+            return;
+        try {
+            setIsDeletingTag(true);
+            yield deleteTag(dispatch, selectedDeleteTag, { tagResponse, tags });
+            ToastNotification.addSuccessMessage(t('Tag deleted successfully'));
+        }
+        catch (err) {
+            console.log(err);
+            ToastNotification.addDangerMessage(t('Error deleting tag'));
+        }
+        finally {
+            setDeleteTagModalOpen(false);
+            setIsDeletingTag(false);
+            setSelectedDeleteTag(null);
+        }
+    });
+    const onSearchClear = () => {
+        setTagSearchTerm('');
+    };
+    const columns = [
+        {
+            accessor: (id) => tagsByIds[id].tagName,
+            sortable: false,
+            id: 'tagname-manage-table',
+            title: t('Tag'),
+            cellWidth: 20,
+        },
+        {
+            id: 'article-count-for-tags',
+            sortable: false,
+            title: t('No of top contents'),
+            cellWidth: 20,
+            cell: (id) => `${tagsByIds[id].numberOfLinkedContents || 0} articles`,
+        },
+        {
+            id: 'tag-created-by',
+            sortable: false,
+            title: t('Created by'),
+            cellWidth: 30,
+            cell: (id) => tagsByIds[id].createdBy,
+        },
+        {
+            id: 'tag-modified-date',
+            sortable: false,
+            title: t('Modified date'),
+            cellWidth: 20,
+            cell: (id) => formatDate(tagsByIds[id].modifiedDate),
+        },
+        {
+            id: 'tag-manage-actions',
+            title: '',
+            sortable: false,
+            cellWidth: 10,
+            cell: (id) => (React.createElement(ActionList, { isIconList: true },
+                React.createElement(ActionListItem, null,
+                    React.createElement(Button, { variant: "plain", "data-tracking-id": "edit-tag", "aria-label": `edit tag ${tagsByIds[id].tagName}`, onClick: () => onEditTagClick(tagsByIds[id]) },
+                        React.createElement(PencilAltIcon, null))),
+                React.createElement(ActionListItem, null,
+                    React.createElement(Button, { "aria-label": `delete tag ${tagsByIds[id].tagName}`, variant: "plain", "data-tracking-id": "delete-tag", onClick: () => onDeleteTagClick(tagsByIds[id]) },
+                        React.createElement(TrashIcon, null))))),
+        },
+    ];
+    const CreateTagModel = (React.createElement(Modal, { title: t('Create a tag'), onClose: onCancelCreateNewTag, isOpen: createTagModalOpen, actions: [
+            React.createElement(Button, { key: "create-tag", variant: ButtonVariant.primary, onClick: onCreateNewTag, isLoading: isCreatingNewTag, isDisabled: !isEmpty(createTagError) || isCreatingNewTag },
+                React.createElement(Trans, null, "Create")),
+            React.createElement(Button, { key: "cancel-create-tag", variant: ButtonVariant.link, onClick: onCancelCreateNewTag }, "Cancel"),
+        ] },
+        React.createElement(FormGroup, { label: "Tag name", isRequired: true },
+            React.createElement(TextInput, { isRequired: true, type: "text", id: "create-new-tag-text-input", value: newTagName, onChange: (e, v) => {
+                    setNewTagName(v);
+                    setCreateTagError('');
+                }, placeholder: t('Enter a unique name to create a tag'), validated: isEmpty(createTagError) ? 'default' : 'error' }),
+            !isEmpty(createTagError) && (React.createElement(FormHelperText, null,
+                React.createElement(HelperText, null,
+                    React.createElement(HelperTextItem, { variant: "error" }, createTagError)))))));
+    const EditTagModal = (React.createElement(Modal, { title: t('Edit Tag'), isOpen: editTagModalOpen, onClose: onEditCancel, actions: [
+            React.createElement(Button, { key: "edit-tag", variant: ButtonVariant.primary, onClick: onEditTagConfirm, isLoading: isEditingTagName, isDisabled: !isEmpty(editTagError) || isEditingTagName },
+                React.createElement(Trans, null, "Save")),
+            React.createElement(Button, { key: "cancel-edit-tag", variant: ButtonVariant.link, onClick: onEditCancel }, "Cancel"),
+        ] },
+        React.createElement(FormGroup, { label: "Tag name", isRequired: true },
+            React.createElement(TextInput, { isRequired: true, type: "text", id: "edit-tag-text-input", value: editTagName, onChange: (e, v) => {
+                    setEditTagName(v);
+                    setEditTagError('');
+                }, placeholder: t('Enter a unique name for this tag') }),
+            !isEmpty(editTagError) && (React.createElement(FormHelperText, null,
+                React.createElement(HelperText, null,
+                    React.createElement(HelperTextItem, { variant: "error" }, editTagError)))))));
+    const DeleteTagModel = () => (React.createElement(Modal, { title: t('Are you sure?'), isOpen: deleteTagModalOpen, onClose: () => setDeleteTagModalOpen(false), actions: [
+            React.createElement(Button, { key: "delete-tag", variant: ButtonVariant.danger, onClick: onDeleteTagConfirm, isLoading: isDeletingTag, isDisabled: isDeletingTag },
+                React.createElement(Trans, null, "Yes, I am sure")),
+            React.createElement(Button, { key: "cancel-delete-tag", variant: ButtonVariant.link, onClick: () => setDeleteTagModalOpen(false) }, "Cancel"),
+        ] },
+        React.createElement(Trans, null, "Deleting this tag will permanently untag all content associated with it. Are you sure you want to proceed?")));
+    return (React.createElement(React.Fragment, null,
+        CreateTagModel,
+        EditTagModal,
+        React.createElement(DeleteTagModel, null),
+        React.createElement("header", null,
+            React.createElement("h2", null, "Tags"),
+            React.createElement("p", { className: "pf-v5-u-my-sm" },
+                React.createElement(Trans, null, "Add, edit or remove tags and manage tagged top content."))),
+        React.createElement("div", { className: "toolbar" },
+            React.createElement(Flex, { alignItems: { default: 'alignItemsCenter' }, className: "pf-v5-u-w-100" },
+                React.createElement("label", { htmlFor: "tag-search-input" },
+                    React.createElement(Trans, null, "Search Tag")),
+                React.createElement("div", { className: "pf-v5-u-flex-grow-1" },
+                    React.createElement(TextInputGroup, null,
+                        React.createElement(TextInputGroupMain, { type: "text", id: "tag-search-input", placeholder: t('Search for a tag'), icon: React.createElement(SearchIcon, null), value: tagSearchTerm, onChange: (e, v) => setTagSearchTerm(v) }),
+                        !isEmpty(tagSearchTerm) && (React.createElement(TextInputGroupUtilities, null,
+                            React.createElement(Button, { variant: "plain", onClick: onSearchClear, "aria-label": "Clear button and input" },
+                                React.createElement(TimesIcon, null)))))),
+                React.createElement("span", { className: "pf-v5-u-ml-sm" },
+                    React.createElement(Button, { variant: ButtonVariant.primary, isInline: true, onClick: () => {
+                            setCreateTagModalOpen(true);
+                            setNewTagName(tagSearchTerm);
+                        }, "data-tracking-id": "tag-create-button" },
+                        React.createElement(Trans, null, "Create tag"))))),
+        React.createElement("div", { className: "tags-manager-wrapper" },
+            React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading tags list') } }, tagResponse.isFetching ? (React.createElement(Bullseye, null,
+                React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+                    React.createElement(Spinner, { size: "lg" })))) : (React.createElement(ManageTable, { ariaLabel: t('Table to manage tags'), data: filteredTagIds, columns: columns, isError: false, keepPageNumberOnDataChange: true }))))));
+}

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

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

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

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

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

@@ -0,0 +1 @@
+export { TagsManagement } from './TagsManagement';

package/lib/esm/components/NotificationEmails/NotificationEmailsModal.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface IProps {
     isOpen: boolean;
     onClose: () => void;
@@ -8,6 +9,6 @@ interface IProps {
     isAddingNotificationEmail: boolean;
     emailsList: string[];
 }
-export declare const NotificationEmailsModal: (props: IProps) => JSX.Element;
+export declare const NotificationEmailsModal: (props: IProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=NotificationEmailsModal.d.ts.map

package/lib/esm/components/NotificationEmails/NotificationEmailsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationEmailsModal.d.ts","sourceRoot":"","sources":["../../../../src/components/NotificationEmails/NotificationEmailsModal.tsx"],"names":[],"mappings":"AAiBA,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,yBAAyB,EAAE,GAAG,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,yBAAyB,EAAE,OAAO,CAAC;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB,UAAW,MAAM,gBA8LpD,CAAC"}
+{"version":3,"file":"NotificationEmailsModal.d.ts","sourceRoot":"","sources":["../../../../src/components/NotificationEmails/NotificationEmailsModal.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,yBAAyB,EAAE,GAAG,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,yBAAyB,EAAE,OAAO,CAAC;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB,UAAW,MAAM,sBA0NpD,CAAC"}

package/lib/esm/components/NotificationEmails/NotificationEmailsModal.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { customEmail } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Form, FormGroup, Modal, ModalVariant, TextInput, ValidatedOptions, } from '@patternfly/react-core';
+import { Button, ButtonVariant, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, TextInput, ValidatedOptions, } from '@patternfly/react-core';
 import { ToastNotification, useFetch } from '@rh-support/components';
 import { isEmailValid } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
@@ -18,11 +18,13 @@ export const NotificationEmailsModal = (props) => {
     const { t } = useTranslation();
     const [isValidEmail, setIsValidEmail] = useState(true);
     const [isValidFirstName, setIsValidFirstName] = useState(true);
+    const [isValidLastName, setIsValidLastName] = useState(true);
     const [email, setEmail] = useState('');
     const [firstName, setFirstName] = useState('');
     const [lastName, setLastName] = useState('');
     const [saveButtonIsClicked, setSaveButtonIsClicked] = useState(false);
     const [isEmailDuplicate, setIsEmailDuplicate] = useState(false);
+    const [isSpecialCharFirstName, setIsSpecialCharFirstName] = useState(false);
     const { request: updateCustomEmail, isFetching: isUpdating } = useFetch(customEmail.updateCustomEmail, {
         propgateErrors: true,
     });
@@ -33,6 +35,7 @@ export const NotificationEmailsModal = (props) => {
     const resetModal = () => {
         setIsValidEmail(true);
         setIsValidFirstName(true);
+        setIsValidLastName(true);
         setSaveButtonIsClicked(false);
         setIsEmailDuplicate(false);
     };
@@ -45,6 +48,7 @@ export const NotificationEmailsModal = (props) => {
         const isDuplicateEmail = props.isAddingNotificationEmail ? props.emailsList.includes(email) : false;
         setIsValidEmail(isAValidEmail);
         setIsValidFirstName(isAValidFirstName);
+        setIsValidLastName(!checkForSpecialCharacters(lastName));
         props.isAddingNotificationEmail && setIsEmailDuplicate(isDuplicateEmail);
         if (!isAValidEmail || !isAValidFirstName || isDuplicateEmail)
             return;
@@ -87,17 +91,26 @@ export const NotificationEmailsModal = (props) => {
         setEmail(localemail);
     };
     const onFirstNameChange = (firstName) => {
-        saveButtonIsClicked && setIsValidFirstName(!isEmpty(firstName.trim()));
+        const hasSpecialChars = checkForSpecialCharacters(firstName);
+        const isValid = !isEmpty(firstName.trim()) && !hasSpecialChars;
+        setIsValidFirstName(isValid);
+        setIsSpecialCharFirstName(hasSpecialChars);
         setFirstName(firstName);
     };
     const onLastNameChange = (lastName) => {
+        setIsValidLastName(!checkForSpecialCharacters(lastName));
         setLastName(lastName);
     };
+    const checkForSpecialCharacters = (s) => {
+        const specialCharRegex = /[^a-zA-Z0-9\s]/;
+        return specialCharRegex.test(s);
+    };
     return (React.createElement(Modal, { id: "Add-edit-notification-email-modal", className: "pf-modal-overflow-visible", title: t('Edit notification email'), "aria-describedby": "Add-edit-notification-email-modal", isOpen: props.isOpen, onClose: props.onClose, showClose: true, onEscapePress: props.onClose, variant: ModalVariant.medium, actions: [
             React.createElement(Button, { key: "save", variant: ButtonVariant.primary, onClick: save, isDisabled: !isFormDirty() ||
                     isUpdating ||
                     isAdding ||
                     !isValidFirstName ||
+                    !isValidLastName ||
                     !isValidEmail ||
                     isEmailDuplicate, spinnerAriaValueText: isUpdating || isAdding ? t('Adding') : undefined, isLoading: isUpdating || isAdding },
                 React.createElement(Trans, null, "Save")),
@@ -105,10 +118,22 @@ export const NotificationEmailsModal = (props) => {
                 React.createElement(Trans, null, "Cancel")),
         ] },
         React.createElement(Form, null,
-            React.createElement(FormGroup, { label: t('Email address'), isRequired: true, fieldId: "email-notification-first-emailaddress", validated: isValidEmail && !isEmailDuplicate ? ValidatedOptions.default : ValidatedOptions.error, helperTextInvalid: !isValidEmail ? t('Invalid email') : isEmailDuplicate ? t('Duplicate Email') : '' },
-                React.createElement(TextInput, { value: email, className: `form-control${!isValidEmail && isEmailDuplicate ? ' form-invalid' : ''}`, isRequired: true, type: "text", onChange: onEmailChange, "aria-label": t('Email address'), placeholder: t('Email address'), maxLength: 254, validated: isValidEmail && !isEmailDuplicate ? ValidatedOptions.default : ValidatedOptions.error, isDisabled: !props.isAddingNotificationEmail })),
-            React.createElement(FormGroup, { label: t('First name'), isRequired: true, fieldId: "email-notification-first-name", validated: isValidFirstName ? ValidatedOptions.default : ValidatedOptions.error, helperTextInvalid: t('First name cannot be empty') },
-                React.createElement(TextInput, { value: firstName, className: "form-control", isRequired: true, type: "text", onChange: onFirstNameChange, "aria-label": t('First name'), placeholder: t('First name'), maxLength: 254, validated: isValidFirstName ? ValidatedOptions.default : ValidatedOptions.error })),
+            React.createElement(FormGroup, { label: t('Email address'), isRequired: true, fieldId: "email-notification-first-emailaddress" },
+                React.createElement(TextInput, { value: email, isRequired: true, type: "text", onChange: (_event, localemail) => onEmailChange(localemail), "aria-label": t('Email address'), placeholder: t('Email address'), maxLength: 254, validated: isValidEmail && !isEmailDuplicate ? ValidatedOptions.default : ValidatedOptions.error, isDisabled: !props.isAddingNotificationEmail }),
+                !(isValidEmail && !isEmailDuplicate) && (React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, !isValidEmail ? t('Invalid email') : isEmailDuplicate ? t('Duplicate Email') : ''))))),
+            React.createElement(FormGroup, { label: t('First name'), isRequired: true, fieldId: "email-notification-first-name" },
+                React.createElement(TextInput, { value: firstName, isRequired: true, validated: isValidFirstName ? ValidatedOptions.default : ValidatedOptions.error, type: "text", onChange: (_event, firstName) => onFirstNameChange(firstName), "aria-label": t('First name'), placeholder: t('First name'), maxLength: 254 }),
+                !isValidFirstName && (React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, isSpecialCharFirstName
+                            ? t('First name cannot contain special characters')
+                            : t('First name cannot be empty')))))),
             React.createElement(FormGroup, { label: t('Last name'), fieldId: "email-notification-last-name" },
-                React.createElement(TextInput, { value: lastName, className: "form-control", type: "text", onChange: onLastNameChange, "aria-label": t('Last name'), placeholder: t('Last name'), maxLength: 254 })))));
+                React.createElement(TextInput, { value: lastName, type: "text", validated: isValidLastName ? ValidatedOptions.default : ValidatedOptions.error, onChange: (_event, lastName) => onLastNameChange(lastName), "aria-label": t('Last name'), placeholder: t('Last name'), maxLength: 254 }),
+                !isValidLastName && (React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error },
+                            React.createElement(Trans, null, "Last name cannot contain special characters")))))))));
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NotificationEmails/index.tsx"],"names":[],"mappings":"AAkBA,wBAAgB,kBAAkB,gBAmOjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NotificationEmails/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,wBAAgB,kBAAkB,sBAmOjC"}

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

@@ -155,20 +155,20 @@ export function NotificationEmails() {
         setIsAddingNotificationEmail(true);
         editEmail({ firstName: '', lastName: '', email: emailToAdd });
     };
-    return (React.createElement("section", { id: "notification-emails" },
+    return (React.createElement(React.Fragment, null,
         React.createElement("header", null,
             React.createElement("h2", null, t('Notification emails')),
             t('Add, edit or remove emails from your account that were added to receive notifications.')),
         React.createElement("div", { className: "toolbar" },
             React.createElement("div", { className: "toolbar-left" },
                 React.createElement("label", { htmlFor: "notification-emails-input" }, t('Add an Email')),
-                React.createElement(TextInput, { id: "notification-email-input", placeholder: t('Enter a valid email address'), "aria-label": t('Enter a valid email address'), onChange: onEmailInputBoxChange }),
-                React.createElement("span", { className: "pf-u-ml-sm" },
+                React.createElement(TextInput, { id: "notification-email-input", placeholder: t('Enter a valid email address'), "aria-label": t('Enter a valid email address'), onChange: (_event, email) => onEmailInputBoxChange(email) }),
+                React.createElement("span", { className: "pf-v5-u-ml-sm" },
                     React.createElement(Button, { variant: ButtonVariant.primary, isInline: true, onClick: addEmail, "data-tracking-id": "email-address-add-button", isDisabled: isAddButtonDisabled },
                         React.createElement(Trans, null, "Add")))),
             React.createElement("div", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "search-notification-emails-selector" }, t('Filter by')),
-                React.createElement(SearchInput, { className: "pf-u-flex-grow-1 pf-c-search-input pf-u-background-color-100", id: "search-notification-emails-selector", placeholder: t('Search for an existing email'), value: searchString, onChange: onSearchChange, onClear: () => onSearchChange(''), "aria-label": t('Search for an existing email') }))),
+                React.createElement(SearchInput, { className: "pf-v5-u-flex-grow-1 pf-v5-c-search-input pf-v5-u-background-color-100", id: "search-notification-emails-selector", placeholder: t('Search for an existing email'), value: searchString, onChange: (_, value) => onSearchChange(value), onClear: () => onSearchChange(''), "aria-label": t('Search for an existing email') }))),
         React.createElement(ManageTable, { ariaLabel: t('Table to manage Notification emails'), columns: columns, data: emailLists || [], sortInfo: { column: 'first-name', direction: 'asc' }, errorVariant: AlertVariant.warning, isFetching: accountCustomEmails.isFetching, isError: accountCustomEmails.isError, errorTitle: t('Notification emails error'), errorComponent: React.createElement(Trans, null, "Could not get notification emails"), actionResolver: emailLists && emailLists.length !== 0 ? actionResolver : null, keepPageNumberOnDataChange: keepPageNumberOnDataChange }),
         React.createElement(NotificationEmailsModal, { isOpen: isEditModalOpen, onClose: onModalClose, selectedEmailNotification: selectedEmailNotification, onUpdate: onUpdate, onAdd: onAdd, accountNumber: loggedInUserJwtToken.account_number, isAddingNotificationEmail: isAddingNotificationEmail, emailsList: (accountCustomEmails.data || []).map((e) => e.emailAddress) })));
 }

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryLimit.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/CategoryLimit/CategoryLimit.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAK5C,QAAA,MAAM,aAAa,EAAE,EA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CategoryLimit.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/CategoryLimit/CategoryLimit.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAK5C,QAAA,MAAM,aAAa,EAAE,EAgCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimit.js

@@ -1,4 +1,4 @@
-import { Button, Popover } from '@patternfly/react-core';
+import { Button, Icon, Popover } from '@patternfly/react-core';
 import CircleInfo from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
@@ -14,7 +14,8 @@ const CategoryLimit = () => {
                         setModalOpen(true);
                     } }, "Review guidelines."))) },
             React.createElement(Button, { variant: "plain" },
-                React.createElement(CircleInfo, { size: "md" }))),
+                React.createElement(Icon, { size: "md" },
+                    React.createElement(CircleInfo, null)))),
         React.createElement(CategoryLimitGuidelines, { isModalOpen: isModalOpen, onHideModal: onHideModal })));
 };
 export default CategoryLimit;

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimitGuidelines.js

@@ -10,7 +10,7 @@ export const CategoryLimitGuidelines = ({ isModalOpen, onHideModal }) => {
         React.createElement(Title, { headingLevel: "h1", size: TitleSizes['2xl'] },
             React.createElement(Trans, null, " Top content guideline ")),
         React.createElement(Trans, null,
-            React.createElement("p", { className: "pf-u-pt-sm" }, "Guidelines and limitations for top content resources.")),
+            React.createElement("p", { className: "pf-v5-u-pt-sm" }, "Guidelines and limitations for top content resources.")),
         React.createElement(QuestionAnswer, { question: "What is top content?", answer: "Top content is defined as the top resource for given product and version that will provide the most value for our customer and the highest likelihood for case deflection." }),
         React.createElement(QuestionAnswer, { question: "What is not top content", answer: "Resource that are accessible in other parts of the customer journey throughout the Customer Portal. For example, labs are not a top content resource. " }),
         React.createElement(QuestionAnswer, { question: "Category and link restrictions", answer: `we allow for a minimum of ${DIGIT_WORD_MAP[CATEGORY_LIMIT.MIN]} and max ${DIGIT_WORD_MAP[CATEGORY_LIMIT.MAX]} categories, and links within each category.` })));

package/lib/esm/components/TopContentManagement/CategoryLimit/QuestionAnswer.js

@@ -1,7 +1,7 @@
 import { Title } from '@patternfly/react-core';
 import React from 'react';
 import { Trans } from 'react-i18next';
-const QuestionAnswer = ({ question, answer }) => (React.createElement("div", { className: "pf-u-pt-lg" },
+const QuestionAnswer = ({ question, answer }) => (React.createElement("div", { className: "pf-v5-u-pt-lg" },
     React.createElement(Title, { headingLevel: "h6", size: "md" },
         React.createElement(Trans, null,
             " ",

package/lib/esm/components/TopContentManagement/ContentUsage/ContentAccordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/ContentAccordion.tsx"],"names":[],"mappings":"AAUA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAG3E,UAAU,MAAM;IACZ,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAoEvC,CAAC"}
+{"version":3,"file":"ContentAccordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/ContentAccordion.tsx"],"names":[],"mappings":"AAUA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAG3E,UAAU,MAAM;IACZ,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAsEvC,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/ContentAccordion.js

@@ -25,11 +25,11 @@ export const ContentAccordion = ({ contentList, selectedVersion }) => {
                         });
                         return (React.createElement(AccordionItem, { key: topContentId },
                             React.createElement(AccordionToggle, { onClick: onToggle(topContentId), isExpanded: expanded === topContentId, id: contentTitle },
-                                React.createElement("span", { className: isAttentionNeeded ? 'pf-u-danger-color-200' : '' },
+                                React.createElement("span", { className: isAttentionNeeded ? 'pf-v5-u-danger-color-200' : '' },
                                     ' ',
                                     contentTitle)),
                             React.createElement(AccordionContent, { id: contentTitle, isHidden: expanded !== topContentId },
-                                React.createElement("span", { className: "pf-u-font-size-sm" }, lastModifiedBy),
+                                React.createElement("span", { className: "pf-v5-u-font-size-sm" }, lastModifiedBy),
                                 React.createElement("br", null),
                                 React.createElement("br", null),
                                 React.createElement(PerformanceMetricClickCount, { needsAttention: isAttentionNeeded, contentId: topContentId, selectedVersion: selectedVersion }))));

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceMetrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/PerformanceMetrics.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CAC3B;AACD,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAsCzC,CAAC"}
+{"version":3,"file":"PerformanceMetrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/PerformanceMetrics.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CAC3B;AACD,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAwCzC,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetrics.js

@@ -8,8 +8,8 @@ export const PerformanceMetrics = ({ isModalOpen, onHideModal, needsAttention, c
         ] },
         React.createElement(Title, { headingLevel: "h1", size: TitleSizes['2xl'] },
             React.createElement(Trans, null, " Performance metrics ")),
-        React.createElement("p", { className: "pf-u-pb-lg pf-u-pt-sm" }, "Better understand the Performance for the top content resources."),
-        React.createElement("div", { className: "pf-u-pb-xs top-content-tooltip-view-metric-label" }, title),
-        React.createElement("div", { className: "pf-u-pb-lg" }, lastModifiedBy),
+        React.createElement("p", { className: "pf-v5-u-pb-lg pf-v5-u-pt-sm" }, "Better understand the Performance for the top content resources."),
+        React.createElement("div", { className: "pf-v5-u-pb-xs top-content-tooltip-view-metric-label" }, title),
+        React.createElement("div", { className: "pf-v5-u-pb-lg" }, lastModifiedBy),
         React.createElement(PerformanceMetricClickCount, { needsAttention: needsAttention, contentId: contentId, selectedVersion: selectedVersion })));
 };

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.d.ts

@@ -1,4 +1,4 @@
-import { SelectOptionObject } from '@patternfly/react-core';
+import { SelectOptionObject } from '@patternfly/react-core/deprecated';
 import React, { FC } from 'react';
 interface IProps {
     placeholderText: string;

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceMetricsSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,kBAAkB,EAAiB,MAAM,wBAAwB,CAAC;AACjG,OAAO,KAAK,EAAE,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAG5C,UAAU,MAAM;IACZ,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAC3C,KAAK,EAAE,MAAM,GAAG,kBAAkB,EAClC,aAAa,CAAC,EAAE,OAAO,KACtB,IAAI,CAAC;IACV,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,WAAW,EAAE,CAAC,MAAM,KAAA,KAAK,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,MAAM,CAuC/C,CAAC"}
+{"version":3,"file":"PerformanceMetricsSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,kBAAkB,EAAiB,MAAM,mCAAmC,CAAC;AAC5G,OAAO,KAAK,EAAE,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAG5C,UAAU,MAAM;IACZ,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAC3C,KAAK,EAAE,MAAM,GAAG,kBAAkB,EAClC,aAAa,CAAC,EAAE,OAAO,KACtB,IAAI,CAAC;IACV,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,WAAW,EAAE,CAAC,MAAM,KAAA,KAAK,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,MAAM,CAuC/C,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.js

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
 export const PerformanceMetricsSelect = ({ placeholderText, title, onSelectCallback, options, optionValue, isLoading = false, isDisabled, }) => {
@@ -11,10 +11,10 @@ export const PerformanceMetricsSelect = ({ placeholderText, title, onSelectCallb
         setOpen(false);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "pf-u-font-weight-bold" },
+        React.createElement("div", { className: "pf-v5-u-font-weight-bold" },
             React.createElement(Trans, null,
                 " ",
                 title,
                 " ")),
-        React.createElement(Select, { variant: SelectVariant.single, placeholderText: placeholderText, "aria-label": "Select Input with descriptions", onToggle: onToggle, onSelect: onSelect, selections: selected, isOpen: isOpen, isDisabled: isDisabled || isLoading }, options.map((option, index) => (React.createElement(SelectOption, { key: index, value: optionValue(option) }))))));
+        React.createElement(Select, { variant: SelectVariant.single, placeholderText: placeholderText, "aria-label": "Select Input with descriptions", onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, selections: selected, isOpen: isOpen, isDisabled: isDisabled || isLoading }, options.map((option, index) => (React.createElement(SelectOption, { key: index, value: optionValue(option) }))))));
 };

package/lib/esm/components/TopContentManagement/ContentUsage/VersionPerformanceMetrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VersionPerformanceMetrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/VersionPerformanceMetrics.tsx"],"names":[],"mappings":"AAcA,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAUhE,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;CAC3B;AACD,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,MAAM,CAsGhD,CAAC"}
+{"version":3,"file":"VersionPerformanceMetrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/VersionPerformanceMetrics.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAUhE,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;CAC3B;AACD,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,MAAM,CAsGhD,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/VersionPerformanceMetrics.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { pcm } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Flex, FlexItem, Modal, ModalVariant, Title, TitleSizes, } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, FlexItem, Modal, ModalVariant, Title, TitleSizes } from '@patternfly/react-core';
 import { useFetch } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -56,13 +56,13 @@ export const VersionPerformanceMetrics = ({ isModalOpen, onHideModal, selectedVe
         React.createElement("div", { className: "sticky-header" },
             React.createElement(Title, { headingLevel: "h1", size: TitleSizes['2xl'] },
                 React.createElement(Trans, null, " Performance metrics ")),
-            React.createElement("p", { className: "pf-u-pt-sm" },
+            React.createElement("p", { className: "pf-v5-u-pt-sm" },
                 React.createElement(Trans, null, "Better understand the Performance for the top content resources.")),
             React.createElement("br", null),
             React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
-                React.createElement(FlexItem, { className: "pf-u-w-50 pf-u-pr-md", style: { marginRight: 'unset' } },
+                React.createElement(FlexItem, { className: "pf-v5-u-w-50 pf-v5-u-pr-md", style: { marginRight: 'unset' } },
                     React.createElement(PerformanceMetricsSelect, { placeholderText: t(!isEmpty(versionOptions) ? 'Select a version' : 'No versions available'), title: t(`Version using ${selectedVersionProp}`), onSelectCallback: onVersionSelect, options: versionOptions, optionValue: (option) => option, isLoading: isLoading, isDisabled: isEmpty(versionOptions) })),
-                React.createElement(FlexItem, { className: "pf-u-w-50 pf-u-pl-md" },
+                React.createElement(FlexItem, { className: "pf-v5-u-w-50 pf-v5-u-pl-md" },
                     React.createElement(PerformanceMetricsSelect, { placeholderText: t('select a category'), title: t('Categories'), options: flagContentEditState, optionValue: (option) => option.categoryName, onSelectCallback: (e, selectedOption) => setSelectedCategory(selectedOption), isLoading: !selectedVersion || isTopContentLoading })))),
         React.createElement("br", null),
         React.createElement(ContentAccordion, { contentList: selectedContent, selectedVersion: selectedVersion })));

package/lib/esm/components/TopContentManagement/NoTopContentFound.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface IProps {
     version: string;
     product: string;
@@ -6,6 +7,6 @@ interface IProps {
     onVersionChange?: (version: string) => void;
     isContentOnlyForMajorVersion: boolean;
 }
-export declare function NoTopContentFound({ version, product, dataLength, onAddCategory, onVersionChange, isContentOnlyForMajorVersion, }: IProps): JSX.Element;
+export declare function NoTopContentFound({ version, product, dataLength, onAddCategory, onVersionChange, isContentOnlyForMajorVersion, }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=NoTopContentFound.d.ts.map

package/lib/esm/components/TopContentManagement/NoTopContentFound.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoTopContentFound.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/NoTopContentFound.tsx"],"names":[],"mappings":"AAeA,UAAU,MAAM;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CACX,SAAS,EAAE,OAAO,EAClB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,MAAM,EACf,mCAAmC,CAAC,EAAE,OAAO,KAC5C,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4BAA4B,EAAE,OAAO,CAAC;CACzC;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,eAAe,EACf,4BAA4B,GAC/B,EAAE,MAAM,eAyFR"}
+{"version":3,"file":"NoTopContentFound.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/NoTopContentFound.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CACX,SAAS,EAAE,OAAO,EAClB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,MAAM,EACf,mCAAmC,CAAC,EAAE,OAAO,KAC5C,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4BAA4B,EAAE,OAAO,CAAC;CACzC;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,eAAe,EACf,4BAA4B,GAC/B,EAAE,MAAM,qBA8FR"}