diff --git a/frontend/awx/views/schedules/components/RulesList.tsx b/frontend/awx/views/schedules/components/RulesList.tsx index d0c4f32228..39ba85b67f 100644 --- a/frontend/awx/views/schedules/components/RulesList.tsx +++ b/frontend/awx/views/schedules/components/RulesList.tsx @@ -12,10 +12,11 @@ import { getDocsBaseUrl } from '../../../common/util/getDocsBaseUrl'; import { useRuleRowActions } from '../hooks/useRuleRowActions'; import { RuleListItemType } from '../types'; import { PlusCircleIcon } from '@patternfly/react-icons'; -import { Label, LabelGroup } from '@patternfly/react-core'; +import { Label } from '@patternfly/react-core'; import { formatDateString } from '../../../../../framework/utils/dateTimeHelpers'; import { awxAPI } from '../../../common/api/awx-utils'; import { postRequest } from '../../../../common/crud/Data'; +import { LabelGroupWrapper } from '../../../../common/label-group-wrapper'; export function RulesList(props: { setIsOpen?: (isOpen: boolean | number) => void; @@ -64,13 +65,13 @@ export function RulesList(props: { occurrences.map(({ id, local }) => { if (id === item.id) { labels = ( - + {local.map((dateTimeString) => ( ))} - + ); } }); diff --git a/frontend/common/label-group-wrapper.tsx b/frontend/common/label-group-wrapper.tsx new file mode 100644 index 0000000000..e37c54af8e --- /dev/null +++ b/frontend/common/label-group-wrapper.tsx @@ -0,0 +1,25 @@ +import { LabelGroup as PFLabelGroup } from '@patternfly/react-core'; + +type LabelGroupWrapperState = { + headingRef: { current: { offsetWidth: number; scrollWidth: number } }; +}; + +// fix button without type when rendering "show more" in forms +export class LabelGroupWrapper extends PFLabelGroup { + // @ts-expect-error Type '(e: React.MouseEvent) => void' is not assignable to type '() => void'. + toggleCollapse = (event: React.MouseEvent) => { + // Label isOverflowLabel renders a button, but not button type=button, breaks forms + event.preventDefault(); + + // original LabelGroup toggleCollapse, as of @patternfly/react-core 5.2.0, w/ ts fix + this.setState((prevState) => { + const obj = this as unknown as LabelGroupWrapperState; + const currentRef = obj.headingRef.current; + + return { + isOpen: !prevState.isOpen, + isTooltipVisible: Boolean(currentRef && currentRef.offsetWidth < currentRef.scrollWidth), + }; + }); + }; +}