@openshift-assisted/ui-lib 2.16.3-cim → 2.16.4-cim

package/lib/common/components/hosts/MassDeleteHostModal.tsx

@@ -3,8 +3,9 @@ import {
   Button,
   ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -58,15 +59,13 @@ const MassDeleteHostModal = ({
   return (
     <Modal
       aria-label={t('ai:Remove hosts dialog')}
-      title={t('ai:Remove hosts?')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-delete-modal"
       variant="medium"
-      titleIconVariant="warning"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Remove hosts?')} titleIconVariant="warning" />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{t('ai:All of the listed hosts will be removed.')}</StackItem>
           <StackItem>{children}</StackItem>
@@ -74,8 +73,8 @@ const MassDeleteHostModal = ({
             <ModalProgress error={error} progress={progress} />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           onClick={() => void onClick()}
           isDisabled={progress !== null}
@@ -86,7 +85,7 @@ const MassDeleteHostModal = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={progress !== null}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/hosts/OcpConsoleNodesSectionLink.tsx

@@ -14,13 +14,14 @@ const OcpConsoleNodesSectionLink: React.FC<{
   }
   return (
     <Button
+      icon={<ExternalLinkAltIcon />}
       variant={ButtonVariant.link}
       onClick={() =>
         window.open(getOcpConsoleNodesPage(ocpConsoleUrl), '_blank', 'noopener noreferrer')
       }
       id={id}
     >
-      {title} <ExternalLinkAltIcon />
+      {title}
     </Button>
   );
 };

package/lib/common/components/hosts/TableToolbar.css

@@ -6,6 +6,6 @@
   padding: 0;
 }
 
-.table-toolbar .pf-v5-c-toolbar__content {
+.table-toolbar .pf-v6-c-toolbar__content {
   padding: 0;
 }

package/lib/common/components/hosts/TableToolbar.tsx

@@ -80,6 +80,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           onClick={onActionsToggle}
           isExpanded={actionsOpen}
           isDisabled={isActionsDisabled}
+          data-testid="actions-dropdown-toggle"
         >
           {t('ai:Actions')}
         </MenuToggle>
@@ -100,20 +101,19 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           isFullWidth
           onClick={onSelectToggle}
           isExpanded={selectOpen}
-          splitButtonOptions={{
-            items: [
-              <MenuToggleCheckbox
-                id="select-checkbox"
-                key="select-checkbox"
-                aria-label="Select all"
-                onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
-                isChecked={isChecked}
-              >
-                {selectedIDs.length} {t('ai:selected')}
-              </MenuToggleCheckbox>,
-            ],
-          }}
-        />
+          data-testid="select-dropdown-toggle"
+        >
+          <MenuToggleCheckbox
+            id="select-checkbox"
+            key="select-checkbox"
+            aria-label="Select all"
+            onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
+            isChecked={isChecked}
+            data-testid="select-checkbox"
+          >
+            {selectedIDs.length} {t('ai:selected')}
+          </MenuToggleCheckbox>
+        </MenuToggle>
       )}
       isOpen={selectOpen}
     >

package/lib/common/components/hosts/VMRebootConfigurationInfo.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Popover,
-  Text,
-  TextContent,
-  TextVariants,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Popover, Content, ContentVariants } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
 import { PrismCode, UiIcon } from '../../../common/components/ui';
@@ -15,18 +8,18 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 export const VMRebootConfigurationContent = () => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component={TextVariants.p}>
+    <Content>
+      <Content component={ContentVariants.p}>
         {t(
           'ai:Your libvirt virtual machines should be configured to restart automatically after a reboot. You can check this by running:',
         )}
-      </Text>
+      </Content>
       <PrismCode code="virsh dumpxml <name> | grep on_reboot" />
-      <Text component={TextVariants.p}>{t('ai:And verify that this is the output:')}</Text>
+      <Content component={ContentVariants.p}>{t('ai:And verify that this is the output:')}</Content>
       <PrismCode code="<on_reboot>restart</on_reboot>" />
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         {t('ai:If not, please start your VMs with the following configuration:')}
-      </Text>
+      </Content>
       <PrismCode code="--events on_reboot=restart" />
       <Trans
         t={t}
@@ -35,10 +28,10 @@ export const VMRebootConfigurationContent = () => {
         values={{ executionCommand: 'virt-install' }}
       />
       <PrismCode code="virt-install --wait -1 <rest of the command>" />
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         {t('ai:Otherwise, the VMs will not be able to reboot during the installation process.')}
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   );
 };
 
@@ -46,7 +39,7 @@ const VMRebootConfigurationInfo = () => {
   const { t } = useTranslation();
 
   return (
-    <Text component="p">
+    <Content component="p">
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
@@ -56,7 +49,7 @@ const VMRebootConfigurationInfo = () => {
           {t('ai:Check your VM reboot configuration')}
         </Button>
       </Popover>
-    </Text>
+    </Content>
   );
 };
 

package/lib/common/components/hosts/status.tsx

@@ -9,9 +9,9 @@ import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progres
 import { LinkIcon } from '@patternfly/react-icons/dist/js/icons/link-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
 import { PlusIcon } from '@patternfly/react-icons/dist/js/icons/plus-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_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 { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from './types';

package/lib/common/components/hosts/tableUtils.tsx

@@ -65,7 +65,6 @@ export const hostnameColumn = (
       title: t('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
-        modifier: 'breakWord',
       },
       sort: true,
     },

package/lib/common/components/operators/operatorDescriptions.tsx

@@ -60,6 +60,12 @@ export const DESCRIPTION_LVM =
 export const DESCRIPTION_CLUSTER_OBSERVABILITY =
   'Provides observability and monitoring capabilities for your OpenShift cluster.';
 
+export const DESCRIPTION_LOKI =
+  'Provides a log aggregation system designed to store and query logs from all applications and infrastructure components.';
+
+export const DESCRIPTION_OPENSHIFT_LOGGING =
+  'Collects, stores, and visualizes logs from OpenShift Container Platform components and applications.';
+
 export const DESCRIPTION_NUMA_RESOURCES =
   'Provides NUMA-aware scheduling to improve workload performance on NUMA systems.';
 

package/lib/common/components/operators/operatorSpecs.tsx

@@ -24,6 +24,8 @@ import {
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_KUBE_DESCHEDULER,
   OPERATOR_NAME_CLUSTER_OBSERVABILITY,
+  OPERATOR_NAME_LOKI,
+  OPERATOR_NAME_OPENSHIFT_LOGGING,
   OPERATOR_NAME_NUMA_RESOURCES,
   OPERATOR_NAME_OADP,
   OPERATOR_NAME_METALLB,
@@ -36,6 +38,7 @@ import {
   getClusterObservabilityLink,
   getKmmDocsLink,
   getKubeDeschedulerLink,
+  getLokiLink,
   getLsoLink,
   getLvmsDocsLink,
   getMceDocsLink,
@@ -45,6 +48,7 @@ import {
   getNumaResourcesLink,
   getNvidiaGpuLink,
   getOadpLink,
+  getOpenShiftLoggingLink,
   MTV_LINK,
   NODE_HEALTHCHECK_LINK,
   NODE_MAINTENANCE_LINK,
@@ -83,6 +87,8 @@ import {
   DESCRIPTION_SERVICEMESH,
   DESCRIPTION_LVM,
   DESCRIPTION_CLUSTER_OBSERVABILITY,
+  DESCRIPTION_LOKI,
+  DESCRIPTION_OPENSHIFT_LOGGING,
   DESCRIPTION_NUMA_RESOURCES,
   DESCRIPTION_OADP,
   DESCRIPTION_METALLB,
@@ -473,9 +479,36 @@ export const getOperatorSpecs = (
             </ExternalLink>
           </>
         ),
-        notStandalone: true,
         supportLevel: getFeatureSupportLevel('CLUSTER_OBSERVABILITY'),
       },
+      {
+        operatorKey: OPERATOR_NAME_LOKI,
+        title: 'Loki Operator',
+        featureId: 'CLUSTER_OBSERVABILITY',
+        descriptionText: DESCRIPTION_LOKI,
+        Description: ({ openshiftVersion, searchTerm }) => (
+          <>
+            <HighlightedText text={DESCRIPTION_LOKI} searchTerm={searchTerm} />{' '}
+            <ExternalLink href={getLokiLink(openshiftVersion)}>Learn more</ExternalLink>
+          </>
+        ),
+        notStandalone: true,
+        supportLevel: getFeatureSupportLevel('LOKI'),
+      },
+      {
+        operatorKey: OPERATOR_NAME_OPENSHIFT_LOGGING,
+        title: 'OpenShift Logging',
+        featureId: 'CLUSTER_OBSERVABILITY',
+        descriptionText: DESCRIPTION_OPENSHIFT_LOGGING,
+        Description: ({ openshiftVersion, searchTerm }) => (
+          <>
+            <HighlightedText text={DESCRIPTION_OPENSHIFT_LOGGING} searchTerm={searchTerm} />{' '}
+            <ExternalLink href={getOpenShiftLoggingLink(openshiftVersion)}>Learn more</ExternalLink>
+          </>
+        ),
+        notStandalone: true,
+        supportLevel: getFeatureSupportLevel('OPENSHIFT_LOGGING'),
+      },
     ],
     [categories[Category.SCHEDULING]]: [
       {

package/lib/common/components/storage/DisksTable.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  TextContent,
-  Text,
-  TextVariants,
-  Popover,
-  Alert,
-  AlertVariant,
-} from '@patternfly/react-core';
+import { Content, ContentVariants, Popover, Alert, AlertVariant } from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Table, Th, Tr, Td } from '@patternfly/react-table';
 import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
 import type { WithTestID } from '../../types/index';
@@ -53,9 +46,7 @@ const diskColumns = (t: TFunction, showFormat: boolean) =>
   ].filter(Boolean) as { title: string | React.ReactNode }[];
 
 const SkipFormattingDisk = () => (
-  <TextContent>
-    <Text component={TextVariants.p}>This bootable disk will skip formatting</Text>
-  </TextContent>
+  <Content component={ContentVariants.p}>This bootable disk will skip formatting</Content>
 );
 
 const getDiskLimitation = (

package/lib/common/components/storage/StorageUtils.tsx

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { TFunction } from 'i18next';
 import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
 import { TableRow } from '../hosts/AITable';
-import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const SkipFormattingDisks = () => (
-  <TextContent>
-    <Text component={TextVariants.p}>Some bootable disks will skip formatting</Text>
-  </TextContent>
+  <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
 );
 
 export const roleColumn = (t: TFunction, schedulableMasters: boolean): TableRow<Host> => {
@@ -76,7 +74,13 @@ export const odfUsageColumn = (excludeMasters: boolean): TableRow<Host> => {
       const isExcluded = excludeMasters && isMaster;
       return {
         title: isExcluded ? (
-          <div style={{ color: 'var(--pf-v5-global--disabled-color--100)' }}>Excluded for ODF</div>
+          <div
+            style={{
+              color: 'var(--pf-t--global--icon--color--disabled)',
+            }}
+          >
+            Excluded for ODF
+          </div>
         ) : (
           'Use ODF'
         ),

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

@@ -5,7 +5,7 @@ import {
   ToolbarItem,
   ToolbarContent,
   ToolbarFilter,
-  ToolbarChip,
+  ToolbarLabel,
   Button,
   ButtonVariant,
   InputGroup,
@@ -83,19 +83,19 @@ export const getInitialClusterEventsFilters = (
   deletedHosts: false,
 });
 
-const mapHostsChips = (
+const mapHostsLabels = (
   t: TFunction,
   filters: ClusterEventsFiltersType,
   hosts: { id: string; hostname?: string }[],
-): ToolbarChip[] => {
-  const chips = [
+): ToolbarLabel[] => {
+  const labels = [
     filters.deletedHosts && { key: DELETED_HOSTS, node: t('ai:Deleted hosts') },
     filters.clusterLevel && { key: CLUSTER_LEVEL, node: t('ai:Cluster-level events') },
     ...(hosts || [])
       .filter((host) => filters.hostIds?.includes(host.id))
-      .map((host): ToolbarChip => ({ key: host.id, node: host.hostname })),
+      .map((host): ToolbarLabel => ({ key: host.id, node: host.hostname })),
   ];
-  return chips.filter(Boolean) as ToolbarChip[];
+  return labels.filter(Boolean) as ToolbarLabel[];
 };
 
 const ClusterEventsToolbar = ({
@@ -178,7 +178,7 @@ const ClusterEventsToolbar = ({
     setTimer(newTimer);
   };
 
-  const onDeleteChipGroup: ToolbarFilterProps['deleteChipGroup'] = (type) => {
+  const onDeleteLabelGroup: ToolbarFilterProps['deleteLabelGroup'] = (type) => {
     if (type === 'Severity') {
       setFilters({
         ...filters,
@@ -209,7 +209,7 @@ const ClusterEventsToolbar = ({
     a.hostname && b.hostname && a.hostname < b.hostname ? -1 : 1,
   );
 
-  const hostChips = mapHostsChips(t, filters, sortedHosts);
+  const hostLabels = mapHostsLabels(t, filters, sortedHosts);
 
   return (
     <Toolbar
@@ -225,11 +225,11 @@ const ClusterEventsToolbar = ({
         {entityKind === 'cluster' && (
           <CustomToolbarFilter
             categoryName="Hosts"
-            chips={hostChips}
-            deleteChip={(_, chip) =>
-              onHostSelect(typeof chip === 'string' ? chip : chip.key, false)
+            labels={hostLabels}
+            deleteLabel={(_, label) =>
+              onHostSelect(typeof label === 'string' ? label : label.key, false)
             }
-            deleteChipGroup={onDeleteChipGroup}
+            deleteLabelGroup={onDeleteLabelGroup}
           >
             <Dropdown
               isOpen={isHostExpanded}
@@ -243,8 +243,8 @@ const ClusterEventsToolbar = ({
                   isFullWidth
                   onClick={onHostToggle}
                   isExpanded={isHostExpanded}
-                  badge={hostChips.length && <Badge isRead>{hostChips.length}</Badge>}
-                  data-testid="cluster-events-hosts-dropdown-button"
+                  badge={hostLabels.length && <Badge isRead>{hostLabels.length}</Badge>}
+                  data-testid="hosts-dropdown-toggle"
                 >
                   <Placeholder text="Hosts" />
                 </MenuToggle>
@@ -290,16 +290,16 @@ const ClusterEventsToolbar = ({
         )}
 
         <ToolbarFilter
-          chips={filters.severities?.map(
-            (severity): ToolbarChip => ({
+          labels={filters.severities?.map(
+            (severity): ToolbarLabel => ({
               key: severity,
               node: capitalize(severity),
             }),
           )}
-          deleteChip={(_, chip) =>
-            onSeveritySelect(typeof chip === 'string' ? chip : chip.key, false)
+          deleteLabel={(_, label) =>
+            onSeveritySelect(typeof label === 'string' ? label : label.key, false)
           }
-          deleteChipGroup={onDeleteChipGroup}
+          deleteLabelGroup={onDeleteLabelGroup}
           categoryName="Severity"
         >
           <Dropdown
@@ -318,7 +318,7 @@ const ClusterEventsToolbar = ({
                 badge={
                   filters.severities?.length && <Badge isRead>{filters.severities.length}</Badge>
                 }
-                data-testid="cluster-events-severity-dropdown-button"
+                data-testid="severity-dropdown-toggle"
               >
                 <Placeholder text="Severity" />
               </MenuToggle>
@@ -355,9 +355,11 @@ const ClusterEventsToolbar = ({
               />
             </InputGroupItem>
             <InputGroupItem>
-              <Button variant={ButtonVariant.control} aria-label="search text button">
-                <SearchIcon />
-              </Button>
+              <Button
+                icon={<SearchIcon />}
+                variant={ButtonVariant.control}
+                aria-label="search text button"
+              />
             </InputGroupItem>
           </InputGroup>
         </ToolbarItem>

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>
   );
 };