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

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -8,19 +8,19 @@ import {
   Grid,
   GridItem,
   Spinner,
-  Text,
-  TextContent,
-  TextVariants,
+  Content,
+  ContentVariants,
   Title,
   TitleSizes,
+  Label,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 
-import { architectureData, LabelValue } from '../../../common';
+import { architectureData } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { AGENT_LOCATION_LABEL_KEY } from '../common';
 import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -48,9 +48,7 @@ const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning
   const btn = (
     <>
       {title}&nbsp;
-      <Button variant="plain" onClick={onEdit}>
-        <PencilAltIcon />
-      </Button>
+      <Button icon={<PencilAltIcon />} variant="plain" onClick={onEdit} />
     </>
   );
   return noIcon ? (
@@ -66,11 +64,7 @@ const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning
 
 const NotConfigured = () => {
   const { t } = useTranslation();
-  return (
-    <TextContent>
-      <Text component={TextVariants.small}>{t('ai:Not configured')}</Text>
-    </TextContent>
-  );
+  return <Content component={ContentVariants.small}>{t('ai:Not configured')}</Content>;
 };
 
 type EnvironmentDetailsProps = {
@@ -180,7 +174,9 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
               <DescriptionListTerm>{t('ai:Labels')}</DescriptionListTerm>
               <DescriptionListDescription>
                 {Object.keys(infraEnv.metadata?.labels || {}).map((k) => (
-                  <LabelValue key={k} value={`${k}=${infraEnv.metadata?.labels?.[k] || ''}`} />
+                  <Label key={k}>
+                    {k}={infraEnv.metadata?.labels?.[k] || ''}
+                  </Label>
                 ))}
               </DescriptionListDescription>
             </DescriptionListGroup>
@@ -216,7 +212,7 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
                   <DescriptionListDescription>
                     {infraEnv.spec?.proxy?.noProxy
                       ?.split(',')
-                      .map((k) => <LabelValue key={k} value={`${k}`} />) || <NotConfigured />}
+                      .map((k) => <Label key={k}>{k}</Label>) || <NotConfigured />}
                   </DescriptionListDescription>
                 </>
               )}

package/lib/cim/components/InfraEnv/EnvironmentErrors.tsx

@@ -2,14 +2,13 @@ import * as React from 'react';
 import { getFailingResourceConditions } from '../helpers';
 import { InfraEnvK8sResource } from '../../types';
 import { SingleResourceAlerts } from '../common/ResourceAlerts';
-import { Alert, AlertVariant, ModalBoxBody } from '@patternfly/react-core';
+import { Alert, AlertVariant } from '@patternfly/react-core';
 import { getInfraEnvDocs } from '../common/constants';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 export type EnvironmentErrorsProps = {
   infraEnv: InfraEnvK8sResource;
   docVersion: string;
-  inModal?: boolean;
   children?: React.ReactNode;
 };
 
@@ -17,7 +16,6 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
   infraEnv,
   docVersion,
   children,
-  inModal,
 }) => {
   const infraEnvAlerts = getFailingResourceConditions(infraEnv, ['ImageCreated']);
   const { t } = useTranslation();
@@ -26,7 +24,7 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
     return <>{children}</>;
   }
 
-  const errors = (
+  return (
     <>
       {!infraEnv.status && (
         <Alert
@@ -51,6 +49,4 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
       />
     </>
   );
-
-  return inModal ? <ModalBoxBody>{errors}</ModalBoxBody> : errors;
 };

package/lib/cim/components/InfraEnv/InfraEnvAgentTable.tsx

@@ -4,16 +4,18 @@ import { DropdownItem } from '@patternfly/react-core';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  discoveryTypeColumn,
-  agentStatusColumn,
-  clusterColumn,
   useAgentsTable,
   useAgentsFilter,
-  agentHostnameColumn,
   canEditBMH,
   canEditAgent,
   canChangeHostname,
 } from '../Agent/tableUtils';
+import {
+  discoveryTypeColumn,
+  agentStatusColumn,
+  clusterColumn,
+  agentHostnameColumn,
+} from '../Agent/tableColumns';
 import HostsTable, {
   DefaultExpandComponent,
   HostsTableEmptyState,
@@ -25,8 +27,6 @@ import {
   gpusColumn,
   memoryColumn,
   labelsColumn,
-} from '../../../common/components/hosts/tableUtils';
-import {
   DiscoveryTroubleshootingModal,
   MassChangeHostnameModal,
   DeleteHostAction,

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -166,7 +166,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
           <FormGroup
             fieldId="network-type"
             label={t('ai:Network type')}
-            labelIcon={
+            labelHelp={
               <PopoverIcon
                 noVerticalAlign
                 bodyContent={

package/lib/cim/components/InfraEnv/InfraEnvHostsTabAgentsWarning.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { getAgentStatus, getBMHStatus } from '../helpers';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common';

package/lib/cim/components/InfraEnv/InfraTableToolbar.tsx

@@ -150,9 +150,9 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
 
       <ToolbarItem>
         <ToolbarFilter
-          chips={statusFilter}
-          deleteChip={(_, chip) => setStatusFilter(statusFilter?.filter((f) => f !== chip))}
-          deleteChipGroup={() => setStatusFilter([])}
+          labels={statusFilter}
+          deleteLabel={(_, label) => setStatusFilter(statusFilter?.filter((f) => f !== label))}
+          deleteLabelGroup={() => setStatusFilter([])}
           categoryName="Status"
         >
           <Dropdown
@@ -203,9 +203,9 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
 
       <ToolbarItem>
         <ToolbarFilter
-          chips={labelFilter}
-          deleteChip={(_, chip) => setLabelFilter(labelFilter.filter((f) => f !== chip))}
-          deleteChipGroup={() => setLabelFilter([])}
+          labels={labelFilter}
+          deleteLabel={(_, label) => setLabelFilter(labelFilter.filter((f) => f !== label))}
+          deleteLabelGroup={() => setLabelFilter([])}
           categoryName={'Labels'}
         >
           <Dropdown
@@ -226,21 +226,27 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
             )}
           >
             <DropdownGroup label={t('ai:Labels')}>
-              {Object.entries(hostLabels).map(([label, count]) => (
-                <DropdownItem
-                  hasCheckbox
-                  key={`host-label-${label}`}
-                  value={label}
-                  isSelected={labelFilter?.includes(label)}
-                >
-                  <Split hasGutter>
-                    <SplitItem>{label}</SplitItem>
-                    <SplitItem>
-                      <Badge isRead>{count || 0}</Badge>
-                    </SplitItem>
-                  </Split>
+              {Object.keys(hostLabels).length > 0 ? (
+                Object.entries(hostLabels).map(([label, count]) => (
+                  <DropdownItem
+                    hasCheckbox
+                    key={`host-label-${label}`}
+                    value={label}
+                    isSelected={labelFilter?.includes(label)}
+                  >
+                    <Split hasGutter>
+                      <SplitItem>{label}</SplitItem>
+                      <SplitItem>
+                        <Badge isRead>{count || 0}</Badge>
+                      </SplitItem>
+                    </Split>
+                  </DropdownItem>
+                ))
+              ) : (
+                <DropdownItem key="no-labels" isDisabled>
+                  {t('ai:No labels available')}
                 </DropdownItem>
-              ))}
+              )}
             </DropdownGroup>
           </Dropdown>
         </ToolbarFilter>

package/lib/cim/components/InfraEnv/infra-env.css

@@ -1,7 +1,7 @@
 .infra-env__form {
-  padding-right: var(--pf-v5-c-wizard__main-body--PaddingRight);
+  padding-right: var(--pf-v6-c-wizard__main-body--PaddingRight);
 }
 
 .infra-env-hosts-tab-title__icon {
-  margin-left: var(--pf-v5-global--spacer--xs);
+  margin-left: var(--pf-v6-global--spacer--xs);
 }

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -86,7 +86,7 @@ const CpuArchitectureDropdown = ({
             id={fieldId}
             ref={toggleRef}
             onClick={() => setCpuArchOpen(!cpuArchOpen)}
-            className="pf-v5-u-w-100"
+            className="pf-v6-u-w-100"
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>

package/lib/cim/components/common/ResourceAlerts.css

@@ -1,5 +1,5 @@
 .cim-resource-alerts {
-  margin-bottom: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-v6-global--spacer--sm);
 }
 
 .cim-resource-alerts--noul ul {

package/lib/cim/components/common/ResourceAlerts.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  Alert,
-  AlertVariant,
-  TextContent,
-  TextList,
-  TextListItem,
-  TextListItemVariants,
-  TextListVariants,
-} from '@patternfly/react-core';
+import { Alert, AlertVariant, Content, ContentVariants } from '@patternfly/react-core';
 import { StatusCondition } from '../../types';
 
 import './ResourceAlerts.css';
@@ -27,36 +19,34 @@ export const SingleResourceAlerts: React.FC<{
       isInline
       className="cim-resource-alerts cim-resource-alerts--noul"
     >
-      <TextContent>
-        <TextList component={TextListVariants.ul}>
-          {conditions.map((c) => {
-            if (c.message) {
-              const [title, ...messages] = c.message.split(/:|\.,/);
-              return (
-                <React.Fragment key={c.type}>
-                  <TextListItem component={TextListItemVariants.li}>
-                    <strong>{title}</strong>
-                  </TextListItem>
-                  {messages.map((m) => (
-                    <TextListItem key={m} component={TextListItemVariants.li}>
-                      {m}
-                    </TextListItem>
-                  ))}
-                </React.Fragment>
-              );
-            } else {
-              return (
-                <React.Fragment key={c.type}>
-                  <TextListItem component={TextListItemVariants.li}>
-                    <strong>{c.type}</strong>
-                  </TextListItem>
-                  <TextListItem component={TextListItemVariants.li}>{c.reason || ''}</TextListItem>
-                </React.Fragment>
-              );
-            }
-          })}
-        </TextList>
-      </TextContent>
+      <Content component={ContentVariants.ul}>
+        {conditions.map((c) => {
+          if (c.message) {
+            const [title, ...messages] = c.message.split(/:|\.,/);
+            return (
+              <React.Fragment key={c.type}>
+                <Content component={ContentVariants.li} className="pf-v6-u-font-weight-bold">
+                  {title}
+                </Content>
+                {messages.map((m) => (
+                  <Content key={m} component={ContentVariants.li}>
+                    {m}
+                  </Content>
+                ))}
+              </React.Fragment>
+            );
+          } else {
+            return (
+              <React.Fragment key={c.type}>
+                <Content component={ContentVariants.li} className="pf-v6-u-font-weight-bold">
+                  {c.type}
+                </Content>
+                <Content component={ContentVariants.li}>{c.reason || ''}</Content>
+              </React.Fragment>
+            );
+          }
+        })}
+      </Content>
     </Alert>
   );
 };

package/lib/cim/components/helpers/agentStatus.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
 import { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
 import { TFunction } from 'i18next';
@@ -22,6 +22,11 @@ export const bmhStatus = (t: TFunction): HostStatus<string> => ({
     title: t('ai:Provisioning'),
     category: 'Bare Metal Host related',
   },
+  deleting: {
+    key: 'deleting',
+    title: t('ai:Deleting'),
+    category: 'Bare Metal Host related',
+  },
   provisioned: {
     key: 'provisioned',
     title: t('ai:Provisioned'),

package/lib/cim/components/helpers/toAssisted.ts

@@ -156,18 +156,16 @@ export const getAICluster = ({
     name: clusterDeployment.spec?.clusterName,
     baseDnsDomain: clusterDeployment.spec?.baseDomain,
     openshiftVersion: installVersion,
-    apiVips:
-      agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP
-        ? [
-            {
-              ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
-            },
-          ]
-        : [],
-    ingressVips:
-      agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP
-        ? [{ ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP }]
-        : [],
+    apiVips: agentClusterInstall?.spec?.apiVIPs?.length
+      ? (agentClusterInstall?.spec?.apiVIPs || []).map((ip) => ({ ip }))
+      : agentClusterInstall?.spec?.apiVIP
+      ? [{ ip: agentClusterInstall?.spec?.apiVIP }]
+      : [],
+    ingressVips: agentClusterInstall?.spec?.ingressVIPs?.length
+      ? (agentClusterInstall?.spec?.ingressVIPs || []).map((ip) => ({ ip }))
+      : agentClusterInstall?.spec?.ingressVIP
+      ? [{ ip: agentClusterInstall?.spec?.ingressVIP }]
+      : [],
     highAvailabilityMode:
       agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1 ? 'None' : 'Full',
     status,
@@ -178,9 +176,11 @@ export const getAICluster = ({
     sshPublicKey: agentClusterInstall?.spec?.sshPublicKey,
     clusterNetworkHostPrefix:
       agentClusterInstall?.spec?.networking?.clusterNetwork?.[0]?.hostPrefix,
-    clusterNetworkCidr: agentClusterInstall?.spec?.networking?.clusterNetwork?.[0]?.cidr,
-    serviceNetworkCidr: agentClusterInstall?.spec?.networking?.serviceNetwork?.[0],
-    machineNetworkCidr: agentClusterInstall?.spec?.networking?.machineNetwork?.[0]?.cidr,
+    clusterNetworks: agentClusterInstall?.spec?.networking?.clusterNetwork,
+    serviceNetworks: agentClusterInstall?.spec?.networking?.serviceNetwork?.map((cidr) => ({
+      cidr,
+    })),
+    machineNetworks: agentClusterInstall?.spec?.networking?.machineNetwork,
     monitoredOperators: [],
     vipDhcpAllocation: false,
     userManagedNetworking: Boolean(

package/lib/cim/components/modals/AddBmcHostModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import BMCForm from '../Agent/BMCForm';
 import { AddBmcHostModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -20,23 +20,24 @@ const AddBmcHostModal: React.FC<AddBmcHostModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Add BMC host dialog')}
-      title={t('ai:Add host using Baseboard Management Controller (BMC)')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.medium}
-      hasNoBodyWrapper
       id="add-host-modal"
     >
-      <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion} inModal>
-        <ProvisioningConfigErrorAlert error={provisioningConfigError} />
-        <BMCForm
-          onCreateBMH={onCreateBMH}
-          onClose={onClose}
-          hasDHCP={hasDHCP}
-          infraEnv={infraEnv}
-          usedHostnames={usedHostnames}
-        />
-      </EnvironmentErrors>
+      <ModalHeader title={t('ai:Add host using Baseboard Management Controller (BMC)')} />
+      <ModalBody>
+        <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion}>
+          <ProvisioningConfigErrorAlert error={provisioningConfigError} />
+          <BMCForm
+            onCreateBMH={onCreateBMH}
+            onClose={onClose}
+            hasDHCP={hasDHCP}
+            infraEnv={infraEnv}
+            usedHostnames={usedHostnames}
+          />
+        </EnvironmentErrors>
+      </ModalBody>
     </Modal>
   );
 };

package/lib/cim/components/modals/AddBmcHostYamlForm.css

@@ -1,5 +1,5 @@
 .ai-bmc-yaml__error {
   display: block;
-  font-size: var(--pf-v5-global--FontSize--md);
+  font-size: var(--pf-v6-global--FontSize--md);
   color: red;
 }

package/lib/cim/components/modals/AddBmcHostYamlForm.tsx

@@ -7,11 +7,9 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
   EmptyStateVariant,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
   Spinner,
   Stack,
   StackItem,
@@ -129,15 +127,15 @@ const AddBmcHostYamlForm: React.FC<
 
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
-            <EmptyState variant={EmptyStateVariant.lg}>
-              <EmptyStateHeader
-                titleText={<>{t('ai:Upload a YAML file')}</>}
-                icon={<EmptyStateIcon icon={UploadIcon} />}
-                headingLevel="h4"
-              />
+            <EmptyState
+              headingLevel="h4"
+              icon={UploadIcon}
+              titleText={<>{t('ai:Upload a YAML file')}</>}
+              variant={EmptyStateVariant.lg}
+            >
               <EmptyStateBody>
                 <p>
                   {t(
@@ -214,8 +212,8 @@ const AddBmcHostYamlForm: React.FC<
             </StackItem>
           )}
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           onClick={() => {
             void handleSubmit();
@@ -227,7 +225,7 @@ const AddBmcHostYamlForm: React.FC<
         <Button onClick={onClose} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };

package/lib/cim/components/modals/AddBmcHostYamlModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { UploadActionModalProps } from './types';
 import AddBmcHostYamlForm from './AddBmcHostYamlForm';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -18,16 +18,17 @@ const AddBmcHostYamlModal: React.FC<UploadActionModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Add host dialog')}
-      title={t('ai:Add hosts by uploading YAML (BMC)')}
       variant={ModalVariant.medium}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
     >
-      <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion} inModal>
-        <ProvisioningConfigErrorAlert error={provisioningConfigError} />
-        <AddBmcHostYamlForm onClose={onClose} onCreateBmcByYaml={onCreateBmcByYaml} />
-      </EnvironmentErrors>
+      <ModalHeader title={t('ai:Add hosts by uploading YAML (BMC)')} />
+      <ModalBody>
+        <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion}>
+          <ProvisioningConfigErrorAlert error={provisioningConfigError} />
+          <AddBmcHostYamlForm onClose={onClose} onCreateBmcByYaml={onCreateBmcByYaml} />
+        </EnvironmentErrors>
+      </ModalBody>
     </Modal>
   );
 };