@openshift-assisted/ui-lib 2.16.5-cim → 2.17.1-cim

package/lib/common/components/ui/ConfirmationModal.tsx

@@ -1,10 +1,19 @@
 import * as React from 'react';
-import { Modal, Button, ModalVariant, ButtonProps, ModalProps } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonProps,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalHeaderProps,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ConfirmationModalProps = {
   title: string;
-  titleIconVariant?: ModalProps['titleIconVariant'];
+  titleIconVariant?: ModalHeaderProps['titleIconVariant'];
   content: React.ReactNode;
   confirmationButtonVariant?: ButtonProps['variant'];
   confirmationButtonText?: string;
@@ -23,13 +32,10 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <Modal
-      title={title}
-      titleIconVariant={titleIconVariant}
-      isOpen={true}
-      onClose={onClose}
-      variant={ModalVariant.small}
-      actions={[
+    <Modal isOpen={true} onClose={onClose} variant={ModalVariant.small}>
+      <ModalHeader title={title} titleIconVariant={titleIconVariant} />
+      <ModalBody>{content}</ModalBody>
+      <ModalFooter>
         <Button
           data-testid="confirm-modal-submit"
           key="confirm"
@@ -37,13 +43,11 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           onClick={onConfirm}
         >
           {confirmationButtonText}
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose}>
           {t('ai:Cancel')}
-        </Button>,
-      ]}
-    >
-      {content}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/ui/CustomToolbarFilter.tsx

@@ -2,15 +2,16 @@
 // Once this issues is addressed in PatternFly, this component should be removed.
 
 import {
-  Chip,
-  ChipGroup,
+  Label,
+  LabelGroup,
   PickOptional,
-  ToolbarChip,
+  ToolbarLabel,
   ToolbarContentContext,
   ToolbarContext,
   ToolbarFilterProps,
   ToolbarItem,
 } from '@patternfly/react-core';
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -23,7 +24,7 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarFilterProps> = {
-    chips: [] as (string | ToolbarChip)[],
+    labels: [] as (string | ToolbarLabel)[],
     showToolbarItem: true,
   };
 
@@ -35,70 +36,78 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
   }
 
   componentDidMount() {
-    const { categoryName, chips } = this.props;
+    const { categoryName, labels } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      chips ? chips.length : 0,
+      labels ? labels.length : 0,
     );
     this.setState({ isMounted: true });
   }
 
   componentDidUpdate() {
-    const { categoryName, chips } = this.props;
+    const { categoryName, labels } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      chips ? chips.length : 0,
+      labels ? labels.length : 0,
     );
   }
 
   render() {
     const {
       children,
-      chips,
-      deleteChipGroup,
-      deleteChip,
-      chipGroupExpandedText,
-      chipGroupCollapsedText,
+      labels,
+      deleteLabelGroup,
+      deleteLabel,
+      labelGroupExpandedText,
+      labelGroupCollapsedText,
       categoryName,
       showToolbarItem,
       isExpanded,
-      expandableChipContainerRef,
+      expandableLabelContainerRef,
       ...props
     } = this.props;
-    const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
+    const { isExpanded: managedIsExpanded, labelGroupContentRef } = this.context;
     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
     const categoryKey =
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString();
 
-    const chipGroup =
-      chips !== undefined && chips.length ? (
-        <ToolbarItem variant="chip-group">
-          <ChipGroup
+    const labelGroup =
+      labels !== undefined && labels.length ? (
+        <ToolbarItem variant="label-group">
+          <LabelGroup
             key={categoryKey}
             categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
-            isClosable={deleteChipGroup !== undefined}
-            onClick={() => deleteChipGroup && deleteChipGroup(categoryName)}
-            collapsedText={chipGroupCollapsedText}
-            expandedText={chipGroupExpandedText}
+            isClosable={deleteLabelGroup !== undefined}
+            onClick={() => deleteLabelGroup && deleteLabelGroup(categoryName)}
+            collapsedText={labelGroupCollapsedText}
+            expandedText={labelGroupExpandedText}
           >
-            {chips.map((chip) =>
-              typeof chip === 'string' ? (
-                <Chip key={chip} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
-                  {chip}
-                </Chip>
+            {labels.map((label) =>
+              typeof label === 'string' ? (
+                <Label
+                  variant="outline"
+                  key={label}
+                  onClose={() => deleteLabel && deleteLabel(categoryKey, label)}
+                >
+                  {label}
+                </Label>
               ) : (
-                <Chip key={chip.key} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
-                  {chip.node}
-                </Chip>
+                <Label
+                  variant="outline"
+                  key={label.key}
+                  onClose={() => deleteLabel && deleteLabel(categoryKey, label)}
+                >
+                  {label.node}
+                </Label>
               ),
             )}
-          </ChipGroup>
+          </LabelGroup>
         </ToolbarItem>
       ) : null;
 
@@ -106,24 +115,24 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {chipGroupContentRef &&
-            chipGroupContentRef.current !== null &&
-            chipGroupContentRef.current.firstElementChild !== null &&
-            ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
+          {labelGroupContentRef &&
+            labelGroupContentRef.current !== null &&
+            labelGroupContentRef.current.firstElementChild !== null &&
+            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
         </React.Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
-        {({ chipContainerRef }) => (
+        {({ labelContainerRef }) => (
           <React.Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-            {chipContainerRef.current &&
-              ReactDOM.createPortal(chipGroup, chipContainerRef.current as Element)}
-            {expandableChipContainerRef &&
-              expandableChipContainerRef.current &&
-              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
+            {labelContainerRef.current &&
+              ReactDOM.createPortal(labelGroup, labelContainerRef.current as Element)}
+            {expandableLabelContainerRef &&
+              expandableLabelContainerRef.current &&
+              ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
           </React.Fragment>
         )}
       </ToolbarContentContext.Consumer>

package/lib/common/components/ui/DetailList.css

@@ -3,10 +3,10 @@
 }
 
 .detail-list dd {
-  margin-bottom: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-v6-global--spacer--sm);
 }
 
 .detail-list ul ul,
 .detail-list ul li {
-  margin-top: var(--pf-v5-c-content--dt--sm--MarginTop);
+  margin-top: var(--pf-v6-c-content--dt--sm--MarginTop);
 }

package/lib/common/components/ui/DetailList.tsx

@@ -1,13 +1,5 @@
 import React, { ReactChild, ReactNode } from 'react';
-import {
-  TextContent,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants,
-  Text,
-  TextProps,
-} from '@patternfly/react-core';
+import { Content, ContentVariants, ContentProps } from '@patternfly/react-core';
 import { WithTestID } from '../../types';
 
 import './DetailList.css';
@@ -16,7 +8,7 @@ import { RenderIf } from './RenderIf';
 export type DetailListProps = {
   children: ReactChild | (ReactChild | undefined)[];
   title?: string;
-  titleComponent?: TextProps['component'];
+  titleComponent?: ContentProps['component'];
 };
 
 export type DetailItemList = {
@@ -37,12 +29,12 @@ export const DetailList: React.FC<DetailListProps> = ({
   title,
   titleComponent = 'h2',
 }) => (
-  <TextContent>
-    {title && <Text component={titleComponent}>{title}</Text>}
-    <TextList component={TextListVariants.dl} className="detail-list">
+  <Content>
+    {title && <Content component={titleComponent}>{title}</Content>}
+    <Content component={ContentVariants.dl} className="detail-list">
       {children}
-    </TextList>
-  </TextContent>
+    </Content>
+  </Content>
 );
 
 const hasDetailItemList = (data: DetailItemProps['value']): data is DetailItemList => {
@@ -60,42 +52,42 @@ export const DetailItem: React.FC<DetailItemProps & WithTestID> = ({
   isHidden ? null : (
     <>
       <RenderIf condition={title !== undefined}>
-        <TextListItem
-          component={TextListItemVariants.dt}
+        <Content
+          component={ContentVariants.dt}
           id={idPrefix ? `${idPrefix}-title` : undefined}
           data-testid={testId ? `${testId}-title` : undefined}
         >
           {title}
-        </TextListItem>
+        </Content>
       </RenderIf>
-      <TextListItem
-        component={TextListItemVariants.dd}
+      <Content
+        component={ContentVariants.dd}
         id={idPrefix ? `${idPrefix}-value` : undefined}
         data-testid={testId ? `${testId}-value` : undefined}
         className={classNameValue}
       >
         {hasDetailItemList(value) ? (
-          <TextList component={TextListVariants.dl}>
+          <Content component={ContentVariants.dl}>
             {value.map((item, idx) => [
-              <TextListItem
+              <Content
                 data-testid={testId ? `${testId}-title-${idx}` : undefined}
                 key={item.title}
-                component={TextListItemVariants.dt}
+                component={ContentVariants.dt}
               >
                 {item.title}
-              </TextListItem>,
-              <TextListItem
+              </Content>,
+              <Content
                 data-testid={testId ? `${testId}-value-${idx}` : undefined}
                 key={`dd-${item.title}`}
-                component={TextListItemVariants.dd}
+                component={ContentVariants.dd}
               >
                 {item.value}
-              </TextListItem>,
+              </Content>,
             ])}
-          </TextList>
+          </Content>
         ) : (
           value
         )}
-      </TextListItem>
+      </Content>
     </>
   );

package/lib/common/components/ui/EventsList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Label } from '@patternfly/react-core';
+import { Button, ButtonVariant, Content, Label } from '@patternfly/react-core';
 import { Table, TableText, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -71,7 +71,9 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
       {
         title: (
           <TableText wrapModifier="fitContent" cellPadding={0}>
-            <strong>{getHumanizedDateTime(event.eventTime)}</strong>
+            <Content className="pf-v6-u-font-weight-bold">
+              {getHumanizedDateTime(event.eventTime)}
+            </Content>
           </TableText>
         ),
       },

package/lib/common/components/ui/ExternalLink.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import { Text } from '@patternfly/react-core';
+import { Content } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 interface ExternalLinkProps {
@@ -16,9 +16,15 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({ href, onClick, children })
   };
 
   return (
-    <Text component="a" href={href} onClick={handleClick} target="_blank" rel="noopener noreferrer">
+    <Content
+      component="a"
+      href={href}
+      onClick={handleClick}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {children ? children : href} <ExternalLinkAltIcon color="rgb(0, 123, 186)" />
-    </Text>
+    </Content>
   );
 };
 export default ExternalLink;

package/lib/common/components/ui/GridGap.tsx

@@ -4,6 +4,6 @@ import React from 'react';
  * This component allows to maintain grid gap behaviour of PF Form by wrapping
  * FormGroup components which are inside of Grid
  */
-const GridGap: React.FC = (props) => <div {...props} className="pf-v5-c-form" />;
+const GridGap: React.FC = (props) => <div {...props} className="pf-v6-c-form" />;
 
 export default GridGap;

package/lib/common/components/ui/NoPermissionsError.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, Title } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_disabled_color_100 as iconColor } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
 
 const NoPermissionsError = () => (
-  <EmptyState id="not-found">
+  <EmptyState id="not-found" icon={ExclamationTriangleIcon}>
     <EmptyStateBody>
-      <EmptyStateIcon icon={ExclamationTriangleIcon} color={iconColor.value} />
       <Title headingLevel="h2">Access permissions needed</Title>
       <EmptyStateBody>
         To create a cluster using the Assisted Installer, ask your organization administrator to

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -107,7 +107,10 @@ export const OpenShiftVersionDropdown = ({
         <Button
           variant="link"
           isInline
-          onClick={() => showOpenshiftVersionModal()}
+          onClick={() => {
+            setOpen(false);
+            showOpenshiftVersionModal();
+          }}
           id="show-all-versions"
         >
           {t('ai:Show all available versions')}
@@ -132,11 +135,13 @@ export const OpenShiftVersionDropdown = ({
   const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
       ref={toggleRef}
       isFullWidth
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
+      data-testid="openshift-version-dropdown-toggle"
     >
       {current || t('ai:OpenShift version')}
     </MenuToggle>
@@ -166,16 +171,20 @@ export const OpenShiftVersionDropdown = ({
       {helperText && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem variant="default">{helperText}</HelperTextItem>
+            <HelperTextItem variant="default" data-testid="openshift-version-dropdown-helper-text">
+              {helperText}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}
       {showReleasesLink && (
-        <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
-          <span data-ouia-id="openshift-releases-link">
-            {t('ai:Learn more about OpenShift releases')}
-          </span>
-        </ExternalLink>
+        <div className="pf-v6-u-mt-sm">
+          <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
+            <span data-ouia-id="openshift-releases-link">
+              {t('ai:Learn more about OpenShift releases')}
+            </span>
+          </ExternalLink>
+        </div>
       )}
     </FormGroup>
   );

package/lib/common/components/ui/OpenShiftVersionModal.css

@@ -2,6 +2,6 @@
   height: 44vh;
   display: flex;
 }
-#customOpenshiftSelect .pf-v5-c-menu__content {
+#customOpenshiftSelect .pf-v6-c-menu__content {
   max-height: 22vh;
 }

package/lib/common/components/ui/OpenShiftVersionModal.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Button, ButtonVariant, FormGroup, Modal, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
 import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useFormikContext } from 'formik';
@@ -26,32 +35,34 @@ export const OpenShiftVersionModal = ({
 
   return (
     <Modal
-      title="Available OpenShift Versions"
       id="available-openshift-versions-modal"
       isOpen
-      actions={[
+      onClose={() => setOpenshiftVersionModalOpen(false)}
+      variant={ModalVariant.small}
+    >
+      <ModalHeader title="Available OpenShift Versions" />
+      <ModalBody>
+        <FormGroup
+          id={`form-control__customOpenshiftSelect`}
+          fieldId={'customOpenshiftSelect'}
+          label={'OpenShift version'}
+          isRequired
+        >
+          <OpenShiftSelectWithSearch versions={allVersions} getHelperText={getHelperText} />
+        </FormGroup>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="select-custom-ocp"
           variant={ButtonVariant.primary}
           onClick={() => setOpenshiftVersionModalOpen(false)}
         >
           Select
-        </Button>,
+        </Button>
         <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onCancel}>
           Cancel
-        </Button>,
-      ]}
-      onClose={onCancel}
-      variant={ModalVariant.small}
-    >
-      <FormGroup
-        id={`form-control__customOpenshiftSelect`}
-        fieldId={'customOpenshiftSelect'}
-        label={'OpenShift version'}
-        isRequired
-      >
-        <OpenShiftSelectWithSearch versions={allVersions} getHelperText={getHelperText} />
-      </FormGroup>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/ui/PopoverIcon.tsx

@@ -27,17 +27,18 @@ const PopoverIcon: React.FC<PopoverIconProps> = ({
 }) => (
   <Popover {...props}>
     <Button
+      icon={
+        <Icon isInline={noVerticalAlign}>
+          <IconComponent />
+        </Icon>
+      }
       component={component}
       variant={variant}
       onClick={(e) => e.preventDefault()}
-      className={classNames('pf-v5-c-form__group-label-help', 'pf-v5-u-p-0', buttonClassName)}
+      className={classNames('pf-v6-c-form__group-label-help', 'pf-v6-u-p-0', buttonClassName)}
       ouiaId={buttonOuiaId}
       style={buttonStyle}
-    >
-      <Icon isInline={noVerticalAlign}>
-        <IconComponent />
-      </Icon>
-    </Button>
+    />
   </Popover>
 );
 

package/lib/common/components/ui/PreviewBadge.tsx

@@ -21,7 +21,7 @@ export type PreviewBadgeProps = {
 
 export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   position = PreviewBadgePosition.inline,
-  className = 'pf-v5-u-ml-md',
+  className = 'pf-v6-u-ml-md',
   text,
   popoverContent,
   externalLink,
@@ -31,15 +31,15 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   const { t } = useTranslation();
   switch (position) {
     case PreviewBadgePosition.inlineRight:
-      clsName += ' pf-v5-u-float-right';
+      clsName += ' pf-v6-u-float-right';
       break;
     case PreviewBadgePosition.inline:
-      clsName += ' pf-v5-u-display-inline';
+      clsName += ' pf-v6-u-display-inline';
       break;
   }
   const bodyContent = (
     <>
-      <div style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>{popoverContent}</div>
+      <div style={{ marginBottom: 'var(--pf-t--global--spacer--sm)' }}>{popoverContent}</div>
       {externalLink && (
         <>
           <ExternalLink href={externalLink}>{t('ai:Learn more')}</ExternalLink>
@@ -53,7 +53,7 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
         <Label
           style={{ cursor: 'pointer' }}
           color="orange"
-          icon={<InfoCircleIcon color="var(--pf-v5-c-label__content--Color)" />}
+          icon={<InfoCircleIcon />}
           className={clsName}
           {...(testId ? { 'data-testid': testId } : {})}
         >

package/lib/common/components/ui/PrismCode.css

@@ -1,4 +1,4 @@
 pre.prism-code {
-  padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
+  padding: var(--pf-v6-global--spacer--sm) var(--pf-v6-global--spacer--md);
   overflow-x: auto;
 }