From e17e7f8b192dd87a7dc736641290277f4a2a25fc Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Mon, 30 Oct 2023 22:52:51 +0000
Subject: [PATCH 1/4] LabelGroup from patternfly react-core 388ec1200

No-Issue
---
 src/components/index.ts                       |   1 +
 .../patternfly-wrappers/label-group.tsx       | 276 ++++++++++++++++++
 2 files changed, 277 insertions(+)
 create mode 100644 src/components/patternfly-wrappers/label-group.tsx

diff --git a/src/components/index.ts b/src/components/index.ts
index 52c70181e2..d10f478a28 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -73,6 +73,7 @@ export {
 } from './patternfly-wrappers/compound-filter';
 export { CopyURL } from './patternfly-wrappers/copy-url';
 export { FileUpload } from './patternfly-wrappers/fileupload';
+export { LabelGroup } from './patternfly-wrappers/label-group';
 export { LinkTabs } from './patternfly-wrappers/link-tabs';
 export { LoginForm } from './patternfly-wrappers/login-form';
 export { Main } from './patternfly-wrappers/main';
diff --git a/src/components/patternfly-wrappers/label-group.tsx b/src/components/patternfly-wrappers/label-group.tsx
new file mode 100644
index 0000000000..2aa3bd9758
--- /dev/null
+++ b/src/components/patternfly-wrappers/label-group.tsx
@@ -0,0 +1,276 @@
+import {
+  Button,
+  GenerateId,
+  Label,
+  Tooltip,
+  TooltipPosition,
+  fillTemplate,
+} from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import { css } from '@patternfly/react-styles';
+import labelStyles from '@patternfly/react-styles/css/components/Label/label';
+import styles from '@patternfly/react-styles/css/components/LabelGroup/label-group';
+import React from 'react';
+
+export interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {
+  /** Content rendered inside the label group. Should be <Label> elements. */
+  children?: React.ReactNode;
+  /** Additional classes added to the label item */
+  className?: string;
+  /** Flag for having the label group default to expanded */
+  defaultIsOpen?: boolean;
+  /** Customizable "Show Less" text string */
+  expandedText?: string;
+  /** Customizeable template string. Use variable "${remaining}" for the overflow label count. */
+  collapsedText?: string;
+  /** Category name text for the label group category.  If this prop is supplied the label group with have a label and category styling applied */
+  categoryName?: string;
+  /** Aria label for label group that does not have a category name */
+  'aria-label'?: string;
+  /** Set number of labels to show before overflow */
+  numLabels?: number;
+  /** Flag if label group can be closed */
+  isClosable?: boolean;
+  /** Flag indicating the labels in the group are compact */
+  isCompact?: boolean;
+  /** Aria label for close button */
+  closeBtnAriaLabel?: string;
+  /** Function that is called when clicking on the label group close button */
+  onClick?: (event: React.MouseEvent) => void;
+  /** Position of the tooltip which is displayed if the category name text is longer */
+  tooltipPosition?:
+    | TooltipPosition
+    | 'auto'
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end';
+  /** Flag to implement a vertical layout */
+  isVertical?: boolean;
+  /** Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
+  isEditable?: boolean;
+  /** Flag indicating the editable label group should be appended with a textarea. */
+  hasEditableTextArea?: boolean;
+  /** Additional props passed to the editable textarea. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editableTextAreaProps?: any;
+  /** Control for adding new labels */
+  addLabelControl?: React.ReactNode;
+}
+
+interface LabelGroupState {
+  isOpen: boolean;
+  isTooltipVisible: boolean;
+}
+
+export class LabelGroup extends React.Component<
+  LabelGroupProps,
+  LabelGroupState
+> {
+  static displayName = 'LabelGroup';
+  constructor(props: LabelGroupProps) {
+    super(props);
+    this.state = {
+      isOpen: this.props.defaultIsOpen,
+      isTooltipVisible: false,
+    };
+  }
+  private headingRef = React.createRef<HTMLSpanElement>();
+
+  static defaultProps: LabelGroupProps = {
+    expandedText: 'Show Less',
+    collapsedText: '${remaining} more',
+    categoryName: '',
+    defaultIsOpen: false,
+    numLabels: 3,
+    isClosable: false,
+    isCompact: false,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onClick: (_e: React.MouseEvent) => undefined as any,
+    closeBtnAriaLabel: 'Close label group',
+    tooltipPosition: 'top',
+    'aria-label': 'Label group category',
+    isVertical: false,
+    isEditable: false,
+    hasEditableTextArea: false,
+  };
+
+  componentDidMount() {
+    this.setState({
+      isTooltipVisible: Boolean(
+        this.headingRef.current &&
+          this.headingRef.current.offsetWidth <
+            this.headingRef.current.scrollWidth,
+      ),
+    });
+  }
+
+  toggleCollapse = () => {
+    this.setState((prevState) => ({
+      isOpen: !prevState.isOpen,
+      isTooltipVisible: Boolean(
+        this.headingRef.current &&
+          this.headingRef.current.offsetWidth <
+            this.headingRef.current.scrollWidth,
+      ),
+    }));
+  };
+
+  renderLabel(id: string) {
+    const { categoryName, tooltipPosition } = this.props;
+    const { isTooltipVisible } = this.state;
+    return isTooltipVisible ? (
+      <Tooltip position={tooltipPosition} content={categoryName}>
+        <span
+          tabIndex={0}
+          ref={this.headingRef}
+          className={css(styles.labelGroupLabel)}
+        >
+          <span aria-hidden='true' id={id}>
+            {categoryName}
+          </span>
+        </span>
+      </Tooltip>
+    ) : (
+      <span
+        ref={this.headingRef}
+        className={css(styles.labelGroupLabel)}
+        aria-hidden='true'
+        id={id}
+      >
+        {categoryName}
+      </span>
+    );
+  }
+
+  render() {
+    const {
+      categoryName,
+      children,
+      className,
+      isClosable,
+      isCompact,
+      closeBtnAriaLabel,
+      'aria-label': ariaLabel,
+      onClick,
+      numLabels,
+      expandedText,
+      collapsedText,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      defaultIsOpen,
+      tooltipPosition,
+      isVertical,
+      isEditable,
+      hasEditableTextArea,
+      editableTextAreaProps,
+      addLabelControl,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = this.props;
+    const { isOpen } = this.state;
+    const renderedChildren = React.Children.toArray(children);
+    const numChildren = renderedChildren.length;
+    const collapsedTextResult = fillTemplate(collapsedText as string, {
+      remaining: numChildren - numLabels,
+    });
+
+    const renderLabelGroup = (id: string) => {
+      const labelArray = !isOpen
+        ? renderedChildren.slice(0, numLabels)
+        : renderedChildren;
+
+      const content = (
+        <React.Fragment>
+          {categoryName && this.renderLabel(id)}
+          <ul
+            className={css(styles.labelGroupList)}
+            {...(categoryName && { 'aria-labelledby': id })}
+            {...(!categoryName && { 'aria-label': ariaLabel })}
+            role='list'
+            {...rest}
+          >
+            {labelArray.map((child, i) => (
+              <li className={css(styles.labelGroupListItem)} key={i}>
+                {child}
+              </li>
+            ))}
+            {numChildren > numLabels && (
+              <li className={css(styles.labelGroupListItem)}>
+                <Label
+                  isOverflowLabel
+                  onClick={this.toggleCollapse}
+                  className={css(isCompact && labelStyles.modifiers.compact)}
+                >
+                  {isOpen ? expandedText : collapsedTextResult}
+                </Label>
+              </li>
+            )}
+            {addLabelControl && (
+              <li className={css(styles.labelGroupListItem)}>
+                {addLabelControl}
+              </li>
+            )}
+            {isEditable && hasEditableTextArea && (
+              <li
+                className={css(
+                  styles.labelGroupListItem,
+                  styles.modifiers.textarea,
+                )}
+              >
+                <textarea
+                  className={css(styles.labelGroupTextarea)}
+                  rows={1}
+                  tabIndex={0}
+                  {...editableTextAreaProps}
+                />
+              </li>
+            )}
+          </ul>
+        </React.Fragment>
+      );
+
+      const close = (
+        <div className={css(styles.labelGroupClose)}>
+          <Button
+            variant='plain'
+            aria-label={closeBtnAriaLabel}
+            onClick={onClick}
+            id={`remove_group_${id}`}
+            aria-labelledby={`remove_group_${id} ${id}`}
+          >
+            <TimesCircleIcon aria-hidden='true' />
+          </Button>
+        </div>
+      );
+
+      return (
+        <div
+          className={css(
+            styles.labelGroup,
+            className,
+            categoryName && styles.modifiers.category,
+            isVertical && styles.modifiers.vertical,
+            isEditable && styles.modifiers.editable,
+          )}
+        >
+          {<div className={css(styles.labelGroupMain)}>{content}</div>}
+          {isClosable && close}
+        </div>
+      );
+    };
+
+    return numChildren === 0 && addLabelControl === undefined ? null : (
+      <GenerateId>
+        {(randomId) => renderLabelGroup(this.props.id || randomId)}
+      </GenerateId>
+    );
+  }
+}

From f591f3778db542e876bd59b970d9512cf5d300f5 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Mon, 30 Oct 2023 22:53:49 +0000
Subject: [PATCH 2/4] EE fixups

---
 src/components/execution-environment/repository-form.tsx | 6 +++---
 src/components/patternfly-wrappers/label-group.tsx       | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/execution-environment/repository-form.tsx b/src/components/execution-environment/repository-form.tsx
index 459e3a61c5..498af5e536 100644
--- a/src/components/execution-environment/repository-form.tsx
+++ b/src/components/execution-environment/repository-form.tsx
@@ -5,7 +5,6 @@ import {
   FormGroup,
   InputGroup,
   Label,
-  LabelGroup,
   Modal,
   Spinner,
   TextArea,
@@ -23,6 +22,7 @@ import {
   AlertList,
   AlertType,
   HelperText,
+  LabelGroup,
   closeAlertMixin,
 } from 'src/components';
 import {
@@ -388,7 +388,7 @@ export class RepositoryForm extends React.Component<IProps, IState> {
       this.setState({ formErrors: { ...this.state.formErrors, name: null } });
       return;
     } else {
-      const error = t`Container names can only contain alphanumeric characters, ".", "_", "-" and a up to one "/".`;
+      const error = t`Container names can only contain alphanumeric characters, ".", "_", "-" and zero or one "/".`;
       this.setState({ formErrors: { ...this.state.formErrors, name: error } });
     }
   }
@@ -420,7 +420,7 @@ export class RepositoryForm extends React.Component<IProps, IState> {
 
   private addTags(tags, key: 'includeTags' | 'excludeTags') {
     const current = new Set(this.state[key]);
-    tags.split(/\s+|\s*,\s*/).forEach((tag) => current.add(tag));
+    tags.split(/\s+|\s*,\s*/).forEach((tag) => tag && current.add(tag));
 
     this.setState({
       [key]: Array.from(current.values()),
diff --git a/src/components/patternfly-wrappers/label-group.tsx b/src/components/patternfly-wrappers/label-group.tsx
index 2aa3bd9758..e9845c3244 100644
--- a/src/components/patternfly-wrappers/label-group.tsx
+++ b/src/components/patternfly-wrappers/label-group.tsx
@@ -113,7 +113,10 @@ export class LabelGroup extends React.Component<
     });
   }
 
-  toggleCollapse = () => {
+  toggleCollapse = (e) => {
+    // Label isOverflowLabel renders a button, but not button type=button, breaks forms
+    e.preventDefault();
+
     this.setState((prevState) => ({
       isOpen: !prevState.isOpen,
       isTooltipVisible: Boolean(

From 1b3841b307c653e47af807ad9ed9dcaa6b6b755f Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Mon, 30 Oct 2023 23:16:25 +0000
Subject: [PATCH 3/4] LabelGroup - import from patternfly-wrappers, move
 chipGroupProps there

---
 src/components/approval/approval-row.tsx            |  3 +--
 .../collection-list/collection-list-item.tsx        | 10 +++-------
 .../execution-environment/repository-form.tsx       | 13 ++-----------
 .../execution-environment/tag-manifest-modal.tsx    | 11 +++--------
 .../legacy-role-list/legacy-role-item.tsx           |  6 +++---
 src/components/patternfly-wrappers/label-group.tsx  |  4 ++--
 src/components/rbac/permission-chip-selector.tsx    |  4 ++--
 .../repo-selector/multiple-repo-selector.tsx        |  2 +-
 src/components/repositories/pulp-labels.tsx         |  3 ++-
 src/containers/ansible-role/role-detail.tsx         | 11 +++--------
 .../execution_environment_detail_images.tsx         |  8 ++------
 .../execution-environment-manifest.tsx              | 11 +++--------
 src/containers/user-management/user-list.tsx        |  5 ++---
 13 files changed, 29 insertions(+), 62 deletions(-)

diff --git a/src/components/approval/approval-row.tsx b/src/components/approval/approval-row.tsx
index ab289c34ff..0d677c1f80 100644
--- a/src/components/approval/approval-row.tsx
+++ b/src/components/approval/approval-row.tsx
@@ -4,7 +4,6 @@ import {
   ButtonVariant,
   DropdownItem,
   Label,
-  LabelGroup,
   Spinner,
 } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -14,7 +13,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { CollectionAPI, CollectionVersionSearch } from 'src/api';
-import { DateComponent, ListItemActions } from 'src/components';
+import { DateComponent, LabelGroup, ListItemActions } from 'src/components';
 import { IAppContextType } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
 
diff --git a/src/components/collection-list/collection-list-item.tsx b/src/components/collection-list/collection-list-item.tsx
index 8a0bb44103..fcee9d8744 100644
--- a/src/components/collection-list/collection-list-item.tsx
+++ b/src/components/collection-list/collection-list-item.tsx
@@ -7,7 +7,6 @@ import {
   Flex,
   FlexItem,
   Label,
-  LabelGroup,
   Text,
   TextContent,
   TextVariants,
@@ -20,16 +19,13 @@ import {
   CollectionRatings,
   DateComponent,
   DeprecatedTag,
+  LabelGroup,
   Logo,
   Tag,
 } from 'src/components';
 import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
-import {
-  chipGroupProps,
-  convertContentSummaryCounts,
-  namespaceTitle,
-} from 'src/utilities';
+import { convertContentSummaryCounts, namespaceTitle } from 'src/utilities';
 import { SignatureBadge } from '../signing';
 import './list-item.scss';
 
@@ -122,7 +118,7 @@ export const CollectionListItem = ({
         ))}
       </div>
       <div className='hub-entry pf-l-flex pf-m-wrap'>
-        <LabelGroup {...chipGroupProps()}>
+        <LabelGroup>
           {collection_version.tags.map((tag, index) => (
             <Tag key={index}>{tag.name}</Tag>
           ))}
diff --git a/src/components/execution-environment/repository-form.tsx b/src/components/execution-environment/repository-form.tsx
index 498af5e536..0e7d9dbdd4 100644
--- a/src/components/execution-environment/repository-form.tsx
+++ b/src/components/execution-environment/repository-form.tsx
@@ -28,7 +28,6 @@ import {
 import {
   ErrorMessagesType,
   alertErrorsWithoutFields,
-  chipGroupProps,
   errorMessage,
   isFieldValid,
   isFormValid,
@@ -292,11 +291,7 @@ export class RepositoryForm extends React.Component<IProps, IState> {
                 fieldId='currentTag'
                 label={t`Currently included tags`}
               >
-                <LabelGroup
-                  {...chipGroupProps()}
-                  id='remove-tag'
-                  defaultIsOpen={true}
-                >
+                <LabelGroup id='remove-tag' defaultIsOpen={true}>
                   {includeTags.map((tag) => (
                     <Label
                       icon={<TagIcon />}
@@ -339,11 +334,7 @@ export class RepositoryForm extends React.Component<IProps, IState> {
                 fieldId='currentTag'
                 label={t`Currently excluded tags`}
               >
-                <LabelGroup
-                  {...chipGroupProps()}
-                  id='remove-tag'
-                  defaultIsOpen={true}
-                >
+                <LabelGroup id='remove-tag' defaultIsOpen={true}>
                   {excludeTags.map((tag) => (
                     <Label
                       icon={<TagIcon />}
diff --git a/src/components/execution-environment/tag-manifest-modal.tsx b/src/components/execution-environment/tag-manifest-modal.tsx
index ac9a6558a2..97a4a1d07b 100644
--- a/src/components/execution-environment/tag-manifest-modal.tsx
+++ b/src/components/execution-environment/tag-manifest-modal.tsx
@@ -7,7 +7,6 @@ import {
   FormGroup,
   InputGroup,
   Label,
-  LabelGroup,
   Modal,
   Spinner,
   TextInput,
@@ -22,8 +21,8 @@ import {
   PulpStatus,
   TaskAPI,
 } from 'src/api';
-import { AlertType } from 'src/components';
-import { chipGroupProps, parsePulpIDFromURL } from 'src/utilities';
+import { AlertType, LabelGroup } from 'src/components';
+import { parsePulpIDFromURL } from 'src/utilities';
 
 interface IState {
   tagsToAdd: string[];
@@ -188,11 +187,7 @@ export class TagManifestModal extends React.Component<IProps, IState> {
           )}
 
           <FormGroup fieldId='remove-tag' label={t`Current tags`}>
-            <LabelGroup
-              {...chipGroupProps()}
-              id='remove-tag'
-              defaultIsOpen={true}
-            >
+            <LabelGroup id='remove-tag' defaultIsOpen={true}>
               {this.getCurrentTags().map((tag) => (
                 <Label
                   disabled={isSaving}
diff --git a/src/components/legacy-role-list/legacy-role-item.tsx b/src/components/legacy-role-list/legacy-role-item.tsx
index 98eaf28801..fef2526656 100644
--- a/src/components/legacy-role-list/legacy-role-item.tsx
+++ b/src/components/legacy-role-list/legacy-role-item.tsx
@@ -4,7 +4,6 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  LabelGroup,
 } from '@patternfly/react-core';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -12,13 +11,14 @@ import { LegacyRoleDetailType } from 'src/api';
 import {
   DateComponent,
   DownloadCount,
+  LabelGroup,
   Logo,
   ProviderLink,
   RoleRatings,
   Tag,
 } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
-import { chipGroupProps, getProviderInfo } from 'src/utilities';
+import { getProviderInfo } from 'src/utilities';
 import './legacy-role-item.scss';
 
 interface LegacyRoleProps {
@@ -69,7 +69,7 @@ export function LegacyRoleListItem({ role, show_thumbnail }: LegacyRoleProps) {
       </div>
       <div className='hub-entry'>{description}</div>
       <div className='hub-entry'>
-        <LabelGroup {...chipGroupProps()}>
+        <LabelGroup>
           {tags.map((tag, index) => (
             <Tag key={index}>{tag}</Tag>
           ))}
diff --git a/src/components/patternfly-wrappers/label-group.tsx b/src/components/patternfly-wrappers/label-group.tsx
index e9845c3244..b1fc0ec94a 100644
--- a/src/components/patternfly-wrappers/label-group.tsx
+++ b/src/components/patternfly-wrappers/label-group.tsx
@@ -11,6 +11,7 @@ import { css } from '@patternfly/react-styles';
 import labelStyles from '@patternfly/react-styles/css/components/Label/label';
 import styles from '@patternfly/react-styles/css/components/LabelGroup/label-group';
 import React from 'react';
+import { chipGroupProps } from 'src/utilities';
 
 export interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {
   /** Content rendered inside the label group. Should be <Label> elements. */
@@ -86,8 +87,7 @@ export class LabelGroup extends React.Component<
   private headingRef = React.createRef<HTMLSpanElement>();
 
   static defaultProps: LabelGroupProps = {
-    expandedText: 'Show Less',
-    collapsedText: '${remaining} more',
+    ...chipGroupProps(),
     categoryName: '',
     defaultIsOpen: false,
     numLabels: 3,
diff --git a/src/components/rbac/permission-chip-selector.tsx b/src/components/rbac/permission-chip-selector.tsx
index 04de4d0e32..a9b3428d6a 100644
--- a/src/components/rbac/permission-chip-selector.tsx
+++ b/src/components/rbac/permission-chip-selector.tsx
@@ -1,12 +1,12 @@
 import { t } from '@lingui/macro';
 import {
   Label,
-  LabelGroup,
   Select,
   SelectOption,
   SelectVariant,
 } from '@patternfly/react-core';
 import React from 'react';
+import { LabelGroup } from 'src/components';
 import { AppContext } from 'src/loaders/app-context';
 import { chipGroupProps } from 'src/utilities';
 
@@ -50,7 +50,7 @@ export class PermissionChipSelector extends React.Component<IProps, IState> {
       }));
 
       return (
-        <LabelGroup {...chipGroupProps()}>
+        <LabelGroup>
           {items.length ? null : (
             <Label key='placeholder'>{t`No permission`}</Label>
           )}
diff --git a/src/components/repo-selector/multiple-repo-selector.tsx b/src/components/repo-selector/multiple-repo-selector.tsx
index 35bcfa33f3..bf3c84c1c0 100644
--- a/src/components/repo-selector/multiple-repo-selector.tsx
+++ b/src/components/repo-selector/multiple-repo-selector.tsx
@@ -7,7 +7,6 @@ import {
   Flex,
   FlexItem,
   Label,
-  LabelGroup,
   Spinner,
   Toolbar,
   ToolbarGroup,
@@ -20,6 +19,7 @@ import {
   AppliedFilters,
   CheckboxRow,
   CompoundFilter,
+  LabelGroup,
   Pagination,
   RadioRow,
   SortTable,
diff --git a/src/components/repositories/pulp-labels.tsx b/src/components/repositories/pulp-labels.tsx
index 4ac6060370..52810d5c7f 100644
--- a/src/components/repositories/pulp-labels.tsx
+++ b/src/components/repositories/pulp-labels.tsx
@@ -1,6 +1,7 @@
 import { t } from '@lingui/macro';
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
 import React from 'react';
+import { LabelGroup } from 'src/components';
 
 export const PulpLabels = ({ labels }: { labels: Record<string, string> }) => {
   if (!labels || !Object.keys(labels).length) {
diff --git a/src/containers/ansible-role/role-detail.tsx b/src/containers/ansible-role/role-detail.tsx
index ced67b2ea4..79fb2f1b77 100644
--- a/src/containers/ansible-role/role-detail.tsx
+++ b/src/containers/ansible-role/role-detail.tsx
@@ -5,7 +5,6 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  LabelGroup,
   Nav,
   NavItem,
   NavList,
@@ -30,6 +29,7 @@ import {
   ClipboardCopy,
   DateComponent,
   DownloadCount,
+  LabelGroup,
   LoadingPageWithHeader,
   Logo,
   Main,
@@ -39,12 +39,7 @@ import {
 } from 'src/components';
 import { NotFound } from 'src/containers/not-found/not-found';
 import { Paths, formatPath } from 'src/paths';
-import {
-  RouteProps,
-  chipGroupProps,
-  handleHttpError,
-  withRouter,
-} from 'src/utilities';
+import { RouteProps, handleHttpError, withRouter } from 'src/utilities';
 
 interface RoleMeta {
   addAlert: (alert: AlertType) => void;
@@ -305,7 +300,7 @@ class AnsibleRoleDetail extends React.Component<RouteProps, RoleState> {
         </div>
         <div className='hub-entry'>{role.description}</div>
         <div className='hub-entry'>
-          <LabelGroup {...chipGroupProps()}>
+          <LabelGroup>
             {role.summary_fields.tags.map((tag, index) => (
               <Tag key={index}>{tag}</Tag>
             ))}
diff --git a/src/containers/execution-environment-detail/execution_environment_detail_images.tsx b/src/containers/execution-environment-detail/execution_environment_detail_images.tsx
index 4858a4e6de..049cb68c4e 100644
--- a/src/containers/execution-environment-detail/execution_environment_detail_images.tsx
+++ b/src/containers/execution-environment-detail/execution_environment_detail_images.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   Checkbox,
   DropdownItem,
-  LabelGroup,
   Text,
   Toolbar,
   ToolbarContent,
@@ -24,6 +23,7 @@ import {
   DeleteModal,
   EmptyStateFilter,
   EmptyStateNoData,
+  LabelGroup,
   ListItemActions,
   LoadingPageSpinner,
   Pagination,
@@ -37,7 +37,6 @@ import { AppContext } from 'src/loaders/app-context';
 import { Paths, formatEEPath } from 'src/paths';
 import {
   ParamHelper,
-  chipGroupProps,
   errorMessage,
   filterIsSet,
   getContainersURL,
@@ -437,10 +436,7 @@ class ExecutionEnvironmentDetailImages extends React.Component<
             ) : null}
           </td>
           <td>
-            <LabelGroup
-              {...chipGroupProps()}
-              className={'hub-c-label-group-tags-column'}
-            >
+            <LabelGroup className={'hub-c-label-group-tags-column'}>
               {image.tags
                 .sort()
                 .map((tag) =>
diff --git a/src/containers/execution-environment-manifest/execution-environment-manifest.tsx b/src/containers/execution-environment-manifest/execution-environment-manifest.tsx
index e1861f2c2a..130706dff1 100644
--- a/src/containers/execution-environment-manifest/execution-environment-manifest.tsx
+++ b/src/containers/execution-environment-manifest/execution-environment-manifest.tsx
@@ -11,7 +11,6 @@ import {
   DataListItemRow,
   Flex,
   FlexItem,
-  LabelGroup,
   Title,
 } from '@patternfly/react-core';
 import { sum } from 'lodash';
@@ -21,18 +20,14 @@ import { ExecutionEnvironmentAPI } from 'src/api';
 import {
   BaseHeader,
   Breadcrumbs,
+  LabelGroup,
   LoadingPageWithHeader,
   Main,
   ShaLabel,
   TagLabel,
 } from 'src/components';
 import { Paths, formatEEPath, formatPath } from 'src/paths';
-import {
-  RouteProps,
-  chipGroupProps,
-  getHumanSize,
-  withRouter,
-} from 'src/utilities';
+import { RouteProps, getHumanSize, withRouter } from 'src/utilities';
 import { withContainerParamFix } from '../execution-environment-detail/base';
 import './execution-environment-manifest.scss';
 
@@ -136,7 +131,7 @@ class ExecutionEnvironmentManifest extends React.Component<RouteProps, IState> {
             </ClipboardCopyButton>
           </div>
 
-          <LabelGroup {...chipGroupProps()} numLabels={6}>
+          <LabelGroup numLabels={6}>
             {labels.map((label) => (
               <TagLabel tag={label} key={label} />
             ))}
diff --git a/src/containers/user-management/user-list.tsx b/src/containers/user-management/user-list.tsx
index 75bdd6c22b..57245f7738 100644
--- a/src/containers/user-management/user-list.tsx
+++ b/src/containers/user-management/user-list.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   DropdownItem,
   Label,
-  LabelGroup,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -25,6 +24,7 @@ import {
   EmptyStateFilter,
   EmptyStateNoData,
   EmptyStateUnauthorized,
+  LabelGroup,
   ListItemActions,
   LoadingPageSpinner,
   Main,
@@ -37,7 +37,6 @@ import { Paths, formatPath } from 'src/paths';
 import {
   ParamHelper,
   RouteProps,
-  chipGroupProps,
   errorMessage,
   filterIsSet,
   withRouter,
@@ -355,7 +354,7 @@ class UserList extends React.Component<RouteProps, IState> {
         <td>{user.last_name}</td>
         <td>{user.email}</td>
         <td>
-          <LabelGroup {...chipGroupProps()}>
+          <LabelGroup>
             {user.groups.map((g) => (
               <Label key={g.id}>{g.name}</Label>
             ))}

From 72d6bbcce8350b424095cf783afd86d14b327d37 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Mon, 30 Oct 2023 23:30:57 +0000
Subject: [PATCH 4/4] fixup translation - needs to happen later than class
 build time

---
 src/components/patternfly-wrappers/label-group.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/patternfly-wrappers/label-group.tsx b/src/components/patternfly-wrappers/label-group.tsx
index b1fc0ec94a..4684e46f4f 100644
--- a/src/components/patternfly-wrappers/label-group.tsx
+++ b/src/components/patternfly-wrappers/label-group.tsx
@@ -20,10 +20,6 @@ export interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {
   className?: string;
   /** Flag for having the label group default to expanded */
   defaultIsOpen?: boolean;
-  /** Customizable "Show Less" text string */
-  expandedText?: string;
-  /** Customizeable template string. Use variable "${remaining}" for the overflow label count. */
-  collapsedText?: string;
   /** Category name text for the label group category.  If this prop is supplied the label group with have a label and category styling applied */
   categoryName?: string;
   /** Aria label for label group that does not have a category name */
@@ -87,7 +83,6 @@ export class LabelGroup extends React.Component<
   private headingRef = React.createRef<HTMLSpanElement>();
 
   static defaultProps: LabelGroupProps = {
-    ...chipGroupProps(),
     categoryName: '',
     defaultIsOpen: false,
     numLabels: 3,
@@ -165,8 +160,6 @@ export class LabelGroup extends React.Component<
       'aria-label': ariaLabel,
       onClick,
       numLabels,
-      expandedText,
-      collapsedText,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       defaultIsOpen,
       tooltipPosition,
@@ -178,6 +171,8 @@ export class LabelGroup extends React.Component<
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     } = this.props;
+    const { collapsedText, expandedText } = chipGroupProps();
+
     const { isOpen } = this.state;
     const renderedChildren = React.Children.toArray(children);
     const numChildren = renderedChildren.length;