@openshift-assisted/ui-lib 2.41.2 → 2.42.1

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

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import {
   Disk,
   DiskRole as DiskRoleValue,
@@ -83,7 +88,7 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   ];
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>) => {
       const asyncFunc = async () => {
         if (event?.currentTarget.id) {
           setDisabled(true);
@@ -98,28 +103,29 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   );
 
   const currentRoleLabel = getCurrentDiskRoleLabel(disk, installationDiskId, t);
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        className="pf-v5-c-button pf-m-link pf-m-inline"
-      >
-        {currentRoleLabel}
-      </DropdownToggle>
-    ),
-    [setOpen, currentRoleLabel, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      variant="plainText"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+    >
+      {currentRoleLabel}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
+      onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
       toggle={toggle}
       isOpen={isOpen}
       isPlain
-    />
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ChangeHostnameActionProps = {

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

@@ -11,14 +11,13 @@ import {
   ToolbarItem,
   ToolbarProps,
   Tooltip,
-} from '@patternfly/react-core';
-import {
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+  MenuToggleCheckbox,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 import './TableToolbar.css';
@@ -52,6 +51,8 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   const [selectOpen, setSelectOpen] = React.useState(false);
   const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]);
   const onActionsToggle = React.useCallback(() => setActionsOpen(!actionsOpen), [actionsOpen]);
+  const onSelectAll = () => setSelectedIDs(itemIDs);
+  const onSelectNone = () => setSelectedIDs([]);
 
   React.useEffect(() => {
     if (!selectedIDs.every((id) => itemIDs.includes(id))) {
@@ -72,57 +73,62 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   const actionsDropdown = (
     <Dropdown
       onSelect={onActionsToggle}
-      toggle={
-        <DropdownToggle
-          onToggle={onActionsToggle}
-          toggleIndicator={CaretDownIcon}
-          isDisabled={isDisabled}
-        >
+      onOpenChange={onActionsToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} isFullWidth onClick={onActionsToggle} isExpanded={actionsOpen}>
           {t('ai:Actions')}
-        </DropdownToggle>
-      }
+        </MenuToggle>
+      )}
       isOpen={actionsOpen}
-      dropdownItems={actions}
-    />
+    >
+      {actions}
+    </Dropdown>
+  );
+
+  const SelectDropdown = (
+    <Dropdown
+      onSelect={onSelectToggle}
+      onOpenChange={onSelectToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          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>,
+            ],
+          }}
+        />
+      )}
+      isOpen={selectOpen}
+    >
+      <DropdownList>
+        <DropdownItem id={'select-all'} key="select-all" onClick={onSelectAll}>
+          {t('ai:Select all')}
+        </DropdownItem>
+        <DropdownItem id={'select-none'} key="select-none" onClick={onSelectNone}>
+          {t('ai:Select none')}
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
 
-  const onSelectAll = () => setSelectedIDs(itemIDs);
-  const onSelectNone = () => setSelectedIDs([]);
   return (
     <Split hasGutter>
       <SplitItem isFilled>
         <Toolbar className="table-toolbar" clearAllFilters={clearAllFilters}>
           <ToolbarContent className="table-toolbar__content">
-            <ToolbarItem>
-              <Dropdown
-                onSelect={onSelectToggle}
-                toggle={
-                  <DropdownToggle
-                    splitButtonItems={[
-                      <DropdownToggleCheckbox
-                        id="select-checkbox"
-                        key="select-checkbox"
-                        aria-label={t('ai:Select all')}
-                        onChange={(_event, checked) => (checked ? onSelectAll() : onSelectNone())}
-                        isChecked={isChecked}
-                      >
-                        {selectedIDs.length} {t('ai:selected')}
-                      </DropdownToggleCheckbox>,
-                    ]}
-                    onToggle={onSelectToggle}
-                  />
-                }
-                isOpen={selectOpen}
-                dropdownItems={[
-                  <DropdownItem key="select-all" onClick={onSelectAll}>
-                    {t('ai:Select all')}
-                  </DropdownItem>,
-                  <DropdownItem key="select-none" onClick={onSelectNone}>
-                    {t('ai:Select none')}
-                  </DropdownItem>,
-                ]}
-              />
-            </ToolbarItem>
+            <ToolbarItem>{SelectDropdown}</ToolbarItem>
             {children}
             <ToolbarItem>
               {isDisabled ? (

package/lib/common/components/newFeatureSupportLevels/types.ts

@@ -19,6 +19,7 @@ export type GetFeatureDisabledReason = (
   supportLevelData?: NewFeatureSupportLevelMap,
   cpuArchitecture?: SupportedCpuArchitecture,
   platformType?: PlatformType,
+  title?: string,
 ) => string | undefined;
 
 export type GetFeatureSupportLevel = (

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

@@ -0,0 +1,58 @@
+export const DESCRIPTION_MTV =
+  'This Toolkit (MTV) enables you to migrate virtual machines from VMware vSphere, Red Hat Virtualization, or OpenStack to OpenShift Virtualization running on Red Hat OpenShift.';
+
+export const DESCRIPTION_AMD_GPU =
+  'Automate the management of AMD software components needed to provision and monitor GPUs.';
+
+export const DESCRIPTION_LSO = 'Allows provisioning of persistent storage by using local volumes.';
+
+export const DESCRIPTION_AUTHORINO =
+  'Lightweight external authorization service for tailor-made Zero Trust API security.';
+
+export const DESCRIPTION_CNV = 'Run virtual machines alongside containers on one platform.';
+
+export const DESCRIPTION_FENCE_AGENTS_REMEDIATION =
+  'Externally fences failed nodes using power controllers.';
+
+export const DESCRIPTION_KMM = 'Management of kernel modules.';
+
+export const DESCRIPTION_KUBE_DESCHEDULER =
+  'Evicts pods to reschedule them onto more suitable nodes.';
+
+export const DESCRIPTION_MCE = 'Create, import, and manage multiple clusters from this cluster.';
+
+export const DESCRIPTION_NMSTATE =
+  'Provides users with functionality to configure various network interface types, DNS, and routing on cluster nodes.';
+
+export const DESCRIPTION_NODE_FEATURE_DISCOVERY =
+  'Manage the detection of hardware features and configuration by labeling nodes with hardware-specific information.';
+
+export const DESCRIPTION_NODE_HEALTHCHECK = 'Identify Unhealthy Nodes.';
+
+export const DESCRIPTION_NODE_MAINTENANCE = 'Place nodes in maintenance mode.';
+
+export const DESCRIPTION_NVIDIA_GPU =
+  'Automate the management of NVIDIA software components needed to provision and monitor GPUs.';
+
+export const DESCRIPTION_ODF = 'Persistent software-defined storage for hybrid applications.';
+
+export const DESCRIPTION_OPENSHIFT_AI =
+  'Train, serve, monitor and manage AI/ML models and applications.';
+
+export const DESCRIPTION_OSC =
+  'OpenShift sandboxed containers support for OpenShift Container Platform provides users with built-in support for running Kata Containers as an additional optional runtime. It provides an additional virtualization machine(VM) isolation layer for pods.';
+
+export const DESCRIPTION_PIPELINES =
+  'Cloud-native continuous integration and delivery (CI/CD) solution for building pipelines using Tekton.';
+
+export const DESCRIPTION_SELF_NODE_REMEDIATION =
+  'Allows nodes to reboot themselves when they become unhealthy.';
+
+export const DESCRIPTION_SERVERLESS =
+  'Deploy workflow applications based on the CNCF Serverless Workflow specification.';
+
+export const DESCRIPTION_SERVICEMESH =
+  'Platform that provides behavioral insight and operational control over a service mesh.';
+
+export const DESCRIPTION_LVM =
+  'Storage virtualization that offers a more flexible approach for disk space management.';