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

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -1,28 +1,12 @@
 import React from 'react';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownGroup,
-  MenuToggle,
-  MenuToggleElement,
-  MenuToggleProps,
-  Divider,
-} from '@patternfly/react-core';
+import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { useField } from 'formik';
-import {
-  getFieldId,
-  HostSubnet,
-  NO_SUBNET_SET,
-  TechnologyPreview,
-  PreviewBadgePosition,
-} from '../../../../common';
-import { Address4, Address6 } from 'ip-address';
+import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
 
 type SubnetsDropdownProps = {
   name: string;
   machineSubnets: HostSubnet[];
   isDisabled: boolean;
-  onAfterSelect?: (selectedValue: string) => void;
 };
 
 const toFormSelectOptions = (subnets: HostSubnet[]) => {
@@ -48,18 +32,12 @@ const noSubnetAvailableOption = {
   id: 'form-input-hostSubnet-field-option-no-subnet-available',
 };
 
-export const SubnetsDropdown = ({
-  name,
-  machineSubnets,
-  isDisabled,
-  onAfterSelect,
-  ...props
-}: SubnetsDropdownProps & MenuToggleProps) => {
+export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDropdownProps) => {
   const [field, , { setValue }] = useField(name);
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue } = React.useMemo(() => {
+  const { itemsSubnets, currentDisplayValue } = React.useMemo(() => {
     const itemsSubnets =
       machineSubnets.length === 0
         ? [noSubnetAvailableOption]
@@ -67,12 +45,7 @@ export const SubnetsDropdown = ({
             toFormSelectOptions(machineSubnets),
           );
 
-    // Separate IPv4 and IPv6 subnets
-    const ipv4Subnets = machineSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
-    const ipv6Subnets = machineSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
-
-    let currentDisplayValue =
-      itemsSubnets.length > 1 ? itemsSubnets[1].label : itemsSubnets[0].label; // The placeholder is the fallback in some cases
+    let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
     if (field.value) {
       const subnetItem = itemsSubnets.find((item) => item.value === field.value);
       if (subnetItem) {
@@ -83,98 +56,30 @@ export const SubnetsDropdown = ({
       currentDisplayValue = itemsSubnets[1].label;
     }
 
-    return { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue: currentDisplayValue };
+    return { itemsSubnets, currentDisplayValue: currentDisplayValue };
   }, [machineSubnets, field.value]);
 
-  const dropdownItems = React.useMemo(() => {
-    if (machineSubnets.length === 0) {
-      return [
-        <DropdownItem
-          key={noSubnetAvailableOption.value}
-          id={noSubnetAvailableOption.value}
-          isDisabled={noSubnetAvailableOption.isDisabled}
-          value={noSubnetAvailableOption.value}
-        >
-          {noSubnetAvailableOption.label}
-        </DropdownItem>,
-      ];
-    }
-
-    const hasIpv4 = ipv4Subnets.length > 0;
-    const hasIpv6 = ipv6Subnets.length > 0;
-
-    // If we have both IPv4 and IPv6, group them
-    if (hasIpv4 && hasIpv6) {
-      const ipv4Items = toFormSelectOptions(ipv4Subnets).map(({ value, label, isDisabled }) => (
-        <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
-          {label}
-        </DropdownItem>
-      ));
-      ipv4Items.push(<Divider key="ipv4-divider" />);
-      const ipv6Items = toFormSelectOptions(ipv6Subnets).map(({ value, label, isDisabled }) => (
-        <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
-          {label}
-        </DropdownItem>
-      ));
-
-      return [
-        <DropdownItem
-          key={makeNoSubnetSelectedOption(machineSubnets.length).value}
-          id={makeNoSubnetSelectedOption(machineSubnets.length).value}
-          isDisabled={makeNoSubnetSelectedOption(machineSubnets.length).isDisabled}
-          value={makeNoSubnetSelectedOption(machineSubnets.length).value}
-        >
-          {makeNoSubnetSelectedOption(machineSubnets.length).label}
-        </DropdownItem>,
-        <DropdownGroup label="IPv4" key="ipv4-group">
-          {ipv4Items}
-        </DropdownGroup>,
-        <DropdownGroup label="IPv6 (Technology Preview)" key="ipv6-group">
-          {ipv6Items}
-        </DropdownGroup>,
-      ];
-    }
-
-    // If only one type, don't group
-    return itemsSubnets.map(({ value, label, isDisabled }) => (
-      <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
-        {label}
-      </DropdownItem>
-    ));
-  }, [machineSubnets, ipv4Subnets, ipv6Subnets, itemsSubnets]);
+  const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
+    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+      {label}
+    </DropdownItem>
+  ));
 
   const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
-    const nextValue = event?.currentTarget.id;
-    setValue(nextValue);
+    setValue(event?.currentTarget.id);
     setOpen(false);
-    if (onAfterSelect && nextValue) {
-      onAfterSelect(nextValue);
-    }
   };
 
-  const currentItem = itemsSubnets.find((i) => i.label === currentDisplayValue);
-  const isPrimaryMachineNetwork = name === 'machineNetworks.0.cidr';
-  const showBadge = Boolean(
-    isPrimaryMachineNetwork && currentItem && Address6.isValid(currentItem.value),
-  );
-
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
+      className="pf-v5-u-w-100"
       id={fieldId}
-      className="pf-v6-u-w-100"
-      style={{ minWidth: '100%' }}
-      {...props}
     >
       {currentDisplayValue}
-      {showBadge && (
-        <span onClick={(e) => e.stopPropagation()}>
-          <TechnologyPreview position={PreviewBadgePosition.inlineRight} />
-        </span>
-      )}
     </MenuToggle>
   );
 
@@ -182,7 +87,7 @@ export const SubnetsDropdown = ({
     <Dropdown
       {...field}
       id={`${fieldId}-dropdown`}
-      onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
+      onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
       toggle={toggle}
       isOpen={isOpen}

package/lib/ocm/components/clusterConfiguration/networkConfiguration/UserManagedNetworkingTextContent.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
+import { ExternalLink } from '../../../../common/components/ui';
+import { getOpenShiftNetworkingDocsLink } from '../../../../common/config/docs_links';
+
+export interface UserManagedNetworkingTextContentProps {
+  shouldDisplayLoadBalancersBullet?: boolean;
+}
+
+export const UserManagedNetworkingTextContent = ({
+  shouldDisplayLoadBalancersBullet = false,
+}: UserManagedNetworkingTextContentProps) => {
+  return (
+    <TextContent>
+      <Text component={'p'}>
+        Please refer to the{' '}
+        <ExternalLink href={getOpenShiftNetworkingDocsLink()}>
+          OpenShift networking documentation
+        </ExternalLink>{' '}
+        to configure your cluster's networking, including:{' '}
+      </Text>
+      <List>
+        <ListItem>DHCP or static IP Addresses</ListItem>
+        {shouldDisplayLoadBalancersBullet && <ListItem>Load balancers</ListItem>}
+        <ListItem>Network ports</ListItem>
+        <ListItem>DNS</ListItem>
+      </List>
+    </TextContent>
+  );
+};

package/lib/ocm/components/clusterConfiguration/networkConfiguration/VirtualIPControlGroup.tsx

@@ -14,9 +14,9 @@ import {
   NetworkConfigurationValues,
   FormikStaticField,
   NETWORK_TYPE_SDN,
-  DUAL_STACK,
   selectMachineNetworkCIDR,
   getVipValidationsById,
+  DUAL_STACK,
   PopoverIcon,
   selectApiVip,
   selectIngressVip,
@@ -25,12 +25,7 @@ import { selectCurrentClusterPermissionsState } from '../../../store/slices/curr
 import { OcmCheckboxField, OcmInputField } from '../../ui/OcmFormFields';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
-import {
-  ApiVip,
-  Cluster,
-  Ip,
-  SupportLevel,
-} from '@openshift-assisted/types/assisted-installer-service';
+import { Cluster, Ip, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {
   id?: string;
@@ -66,7 +61,7 @@ const VipStaticValue = ({
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" id={`${id}-allocating`} data-testid={`vip-static-${id}-value-spinner`} />
+        <Spinner size="md" id={`${id}-allocating`} />
         <i> This IP is being allocated by the DHCP server</i>
       </>
     );
@@ -102,7 +97,6 @@ export const VirtualIPControlGroup = ({
   );
 
   const enableAllocation = values.networkType === NETWORK_TYPE_SDN;
-  const isDualStack = values.stackType === DUAL_STACK;
 
   React.useEffect(() => {
     if (!isViewerMode && !enableAllocation) {
@@ -119,22 +113,11 @@ export const VirtualIPControlGroup = ({
     [cluster.apiVips, cluster.ingressVips, setFieldValue],
   );
 
-  const setVipValueAtIndex = (
-    field: 'apiVips' | 'ingressVips',
-    index: number,
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const fieldArray: ApiVip[] =
-      field === 'apiVips' ? values.apiVips || [] : values.ingressVips || [];
-    const next: ApiVip[] = Array.isArray(fieldArray) ? [...fieldArray] : [];
-    // Ensure array has the desired length
-    while (next.length <= index) {
-      next.push({ ip: '', clusterId: cluster.id });
-    }
-    next[index] = { ip: e.target.value, clusterId: cluster.id };
-    setFieldValue(field, next, true);
+  const setVipValue = (field: string, e: React.ChangeEvent<HTMLInputElement>) => {
+    setFieldValue(field, [{ ip: e.target.value, clusterId: cluster.id }], true);
   };
 
+  const ipFieldsSuffix = values.stackType === DUAL_STACK ? ' (IPv4)' : '';
   return (
     <>
       {!isVipDhcpAllocationDisabled && (
@@ -162,7 +145,7 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>API IP{ipFieldsSuffix}</span> <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="apiVip"
@@ -181,7 +164,8 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>Ingress IP{ipFieldsSuffix}</span>{' '}
+                <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="ingressVip"
@@ -207,72 +191,34 @@ export const VirtualIPControlGroup = ({
                   <OcmInputField
                     label={
                       <>
-                        <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>API IP{ipFieldsSuffix}</span>{' '}
+                        <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     name="apiVips.0.ip"
                     helperText={ipHelperText}
                     isRequired
-                    labelInfo={isDualStack ? 'Primary' : undefined}
                     onChange={(e) =>
-                      setVipValueAtIndex('apiVips', 0, e as React.ChangeEvent<HTMLInputElement>)
+                      setVipValue('apiVips', e as React.ChangeEvent<HTMLInputElement>)
                     }
                   />
                 </StackItem>
-                {isDualStack && (
-                  <StackItem>
-                    <OcmInputField
-                      label={
-                        <>
-                          <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
-                        </>
-                      }
-                      name="apiVips.1.ip"
-                      helperText={ipHelperText}
-                      labelInfo={'Secondary'}
-                      onChange={(e) =>
-                        setVipValueAtIndex('apiVips', 1, e as React.ChangeEvent<HTMLInputElement>)
-                      }
-                    />
-                  </StackItem>
-                )}
                 <StackItem>
                   <OcmInputField
                     name="ingressVips.0.ip"
                     label={
                       <>
-                        <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>Ingress IP{ipFieldsSuffix}</span>{' '}
+                        <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     helperText={ipHelperText}
                     isRequired
-                    labelInfo={isDualStack ? 'Primary' : undefined}
                     onChange={(e) =>
-                      setVipValueAtIndex('ingressVips', 0, e as React.ChangeEvent<HTMLInputElement>)
+                      setVipValue('ingressVips', e as React.ChangeEvent<HTMLInputElement>)
                     }
                   />
                 </StackItem>
-                {isDualStack && (
-                  <StackItem>
-                    <OcmInputField
-                      name="ingressVips.1.ip"
-                      label={
-                        <>
-                          <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
-                        </>
-                      }
-                      helperText={ipHelperText}
-                      labelInfo={'Secondary'}
-                      onChange={(e) =>
-                        setVipValueAtIndex(
-                          'ingressVips',
-                          1,
-                          e as React.ChangeEvent<HTMLInputElement>,
-                        )
-                      }
-                    />
-                  </StackItem>
-                )}
               </Stack>
             )}
           </FieldArray>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -54,25 +54,18 @@ export const getNetworkInitialValues = (
       cluster.clusterNetworks ||
       (isDualStackType
         ? defaultNetworkValues.clusterNetworksDualstack
-        : defaultNetworkValues.clusterNetworksIpv4?.map((network) => ({
-            ...network,
-            clusterId: cluster.id,
-          }))),
+        : defaultNetworkValues.clusterNetworksIpv4),
     serviceNetworks:
       cluster.serviceNetworks ||
       (isDualStackType
         ? defaultNetworkValues.serviceNetworksDualstack
-        : defaultNetworkValues.serviceNetworksIpv4?.map((network) => ({
-            ...network,
-            clusterId: cluster.id,
-          }))),
+        : defaultNetworkValues.serviceNetworksIpv4),
   };
 };
 
 export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
-  openshiftVersion?: string,
 ) =>
   Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
@@ -92,7 +85,7 @@ export const getNetworkConfigurationValidationSchema = (
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
                   ? machineNetworksValidationSchema.concat(
-                      dualStackValidationSchema('machine networks', openshiftVersion),
+                      dualStackValidationSchema('machine networks'),
                     )
                   : Yup.array(),
             }),
@@ -101,9 +94,7 @@ export const getNetworkConfigurationValidationSchema = (
         then: () => clusterNetworksValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
           values.clusterNetworks && values.clusterNetworks?.length >= 2
-            ? clusterNetworksValidationSchema.concat(
-                dualStackValidationSchema('cluster network', openshiftVersion),
-              )
+            ? clusterNetworksValidationSchema.concat(dualStackValidationSchema('cluster network'))
             : Yup.array(),
       }),
       serviceNetworks: serviceNetworkValidationSchema.when('stackType', {
@@ -111,9 +102,7 @@ export const getNetworkConfigurationValidationSchema = (
         then: () => serviceNetworkValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
           values.serviceNetworks && values.serviceNetworks?.length >= 2
-            ? serviceNetworkValidationSchema.concat(
-                dualStackValidationSchema('service network', openshiftVersion),
-              )
+            ? serviceNetworkValidationSchema.concat(dualStackValidationSchema('service network'))
             : Yup.array(),
       }),
     }),

package/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx

@@ -198,7 +198,7 @@ const OperatorCheckbox = ({
         description={
           !!Description && (
             <HelperText>
-              <HelperTextItem data-testid={`operator-checkbox-description-${operatorId}`}>
+              <HelperTextItem variant="indeterminate">
                 <Description openshiftVersion={openshiftVersion} searchTerm={searchTerm} />
               </HelperTextItem>
             </HelperText>

package/lib/ocm/components/clusterConfiguration/operators/bundleSpecs.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
 
 export type BundleSpec = {
+  noSNO?: boolean;
   incompatibleBundles?: string[];
   Description: React.ComponentType;
   docsLink?: string;
@@ -9,6 +10,7 @@ export type BundleSpec = {
 
 export const bundleSpecs: { [key: string]: BundleSpec } = {
   virtualization: {
+    noSNO: true,
     Description: () => (
       <List>
         <ListItem>
@@ -27,6 +29,7 @@ export const bundleSpecs: { [key: string]: BundleSpec } = {
     ),
   },
   'openshift-ai': {
+    noSNO: true,
     incompatibleBundles: [],
     Description: () => (
       <List>

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -40,17 +40,13 @@ export const getNewOperators = (
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);
+  // uncheck unneeded not-standalone dependencies too
   const notStandaloneDeps = dependencies
     .filter((dep) => opSpecs[dep]?.notStandalone)
-    .filter((dep) => {
-      const hasDependency = newOperators.some((op) =>
-        getOperatorDependencies(op, preflightRequirements).includes(dep),
-      );
-      if (!hasDependency) {
-        newOperators.splice(newOperators.indexOf(dep), 1);
-      }
-      return !hasDependency;
-    });
+    .filter((dep) =>
+      // some other operator may still depend on the not-standalone operator
+      newOperators.every((op) => !getOperatorDependencies(op, preflightRequirements).includes(dep)),
+    );
 
   return currentOperators.filter((op) => op !== operatorId && !notStandaloneDeps.includes(op));
 };
@@ -63,7 +59,7 @@ const getBundleOperators = (
   bundle.operators?.forEach((op) => {
     getOperatorDependencies(op, preflightRequirements).forEach((dep) => bundleOperators.add(dep));
   });
-  return Array.from(bundleOperators);
+  return [...bundleOperators];
 };
 
 export const getNewBundleOperators = (
@@ -77,8 +73,7 @@ export const getNewBundleOperators = (
   const newBundleOperators = getBundleOperators(newBundle, preflightRequirements);
 
   if (add) {
-    const combined = [...currentOperators, ...newBundleOperators];
-    return Array.from(new Set(combined));
+    return [...new Set([...currentOperators, ...newBundleOperators])];
   }
 
   const newBundles = currentBundles.filter((b) => b !== newBundle.id);

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -11,9 +11,6 @@ import {
   MenuToggle,
   MenuToggleElement,
   DropdownList,
-  FormHelperText,
-  HelperText,
-  HelperTextItem,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
@@ -22,8 +19,6 @@ import {
   SupportedCpuArchitecture,
   architectureData,
   getFieldId,
-  ExternalLink,
-  VSPHERE_LIMITATIONS_LINK,
 } from '../../../../common';
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
 import { PlatformType, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
@@ -250,59 +245,44 @@ export const ExternalPlatformDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v6-u-w-100"
-      style={{ minWidth: '420px' }}
+      className="pf-v5-u-w-100"
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isDisabled={dropdownIsDisabled}
       isExpanded={isOpen}
-      data-testid="external-platform-dropdown-toggle"
     >
       {externalPlatformTypes[field.value as PlatformType]?.label}
     </MenuToggle>
   );
 
   return (
-    <>
-      <FormGroup
-        id={`form-control__${fieldId}`}
-        fieldId={fieldId}
-        label={'Integrate with external partner platforms'}
+    <FormGroup
+      id={`form-control__${fieldId}`}
+      fieldId={fieldId}
+      label={'Integrate with external partner platforms'}
+    >
+      <Tooltip
+        content={tooltipDropdownDisabled}
+        hidden={!dropdownIsDisabled}
+        position="top"
+        distance={7}
       >
-        <Tooltip
-          content={tooltipDropdownDisabled}
-          hidden={!dropdownIsDisabled}
-          position="top"
-          distance={7}
+        <Dropdown
+          id={`${fieldId}-dropdown`}
+          toggle={toggle}
+          isOpen={isOpen}
+          onOpenChange={() => setOpen(!isOpen)}
+          onSelect={(event) => {
+            const selectedPlatform = event?.currentTarget.id as PlatformType;
+            setValue(selectedPlatform);
+            setOpen(false);
+            onChange(selectedPlatform);
+          }}
+          shouldFocusToggleOnSelect
         >
-          <Dropdown
-            id={`${fieldId}-dropdown`}
-            toggle={toggle}
-            isOpen={isOpen}
-            onOpenChange={() => setOpen(!isOpen)}
-            onSelect={(event) => {
-              const selectedPlatform = event?.currentTarget.id as PlatformType;
-              setValue(selectedPlatform);
-              setOpen(false);
-              onChange(selectedPlatform);
-            }}
-            shouldFocusToggleOnSelect
-          >
-            <DropdownList>{enabledItems}</DropdownList>
-          </Dropdown>
-        </Tooltip>
-      </FormGroup>
-      {field.value === 'vsphere' && (
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem>
-              <ExternalLink href={VSPHERE_LIMITATIONS_LINK}>
-                Learn more about vSphere limitations
-              </ExternalLink>
-            </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
-    </>
+          <DropdownList>{enabledItems}</DropdownList>
+        </Dropdown>
+      </Tooltip>
+    </FormGroup>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css

@@ -8,22 +8,24 @@
   padding-left: 0;
 }
 
-.review-expandable > .pf-v6-c-expandable-section__toggle {
+.review-expandable > .pf-v5-c-expandable-section__toggle {
   margin-right: 0;
   width: 100%;
   display: inline-flex;
 }
 
-.review-expandable .pf-v6-c-expandable-section__toggle-text {
+.review-expandable .pf-v5-c-expandable-section__toggle-text {
   width: 100%;
 }
 
-#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__text,
-.review-expandable > .pf-v6-c-expandable-section__toggle {
+.summary-expandable .pf-v5-c-expandable-section__toggle,
+.review-expandable > .pf-v5-c-expandable-section__toggle {
   color: initial;
   text-align: left;
 }
 
-#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__icon {
+.summary-expandable
+  > .pf-v5-c-expandable-section__toggle
+  > .pf-v5-c-expandable-section__toggle-icon {
   visibility: hidden;
 }