@openshift-assisted/ui-lib 2.52.2 → 2.53.1

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { useField, useFormikContext } from 'formik';
 import {
-  Alert,
-  AlertVariant,
   Dropdown,
   DropdownItem,
   FormGroup,
@@ -12,7 +10,7 @@ import {
   StackItem,
   Tooltip,
 } from '@patternfly/react-core';
-import { getFieldId, ExternalLink } from '../../../../common/components/ui';
+import { getFieldId } from '../../../../common/components/ui';
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
@@ -25,7 +23,8 @@ import {
   NETWORK_TYPE_FEATURE_IDS,
   isThirdPartyCNI,
 } from '../../../../common/types/networkType';
-import { RED_HAT_CNI_SUPPORT_MATRIX_LINK } from '../../../../common/config/docs_links';
+import { useTranslation } from '../../../../common/hooks';
+import { ThirdPartyCNIBanner } from '../../../../common';
 
 export interface NetworkTypeDropDownProps {
   isDisabled?: boolean;
@@ -36,6 +35,7 @@ export const NetworkTypeDropDown = ({
   isDisabled = false,
   featureSupportLevelData,
 }: NetworkTypeDropDownProps) => {
+  const { t } = useTranslation();
   const [field, , { setValue }] = useField<string>('networkType');
   const [isOpen, setOpen] = React.useState(false);
   const { values } = useFormikContext<NetworkConfigurationValues>();
@@ -54,9 +54,9 @@ export const NetworkTypeDropDown = ({
     }
   }, [field.value, setValue, featureSupportLevelData, getFeatureDisabledReason]);
 
-  const currentDisplayValue = NETWORK_TYPE_LABELS[field.value];
+  const currentDisplayValue = NETWORK_TYPE_LABELS(t)[field.value];
 
-  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS).map(([value, label]) => {
+  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS(t)).map(([value, label]) => {
     const disabledReason = getFeatureDisabledReason(
       NETWORK_TYPE_FEATURE_IDS[value],
       featureSupportLevelData ?? undefined,
@@ -119,24 +119,7 @@ export const NetworkTypeDropDown = ({
           </Dropdown>
         </FormGroup>
       </StackItem>
-      {showThirdPartyBanner && (
-        <StackItem>
-          <Alert variant={AlertVariant.warning} isInline title="Third-party CNI">
-            <Stack hasGutter>
-              <StackItem>
-                Third-party CNIs require uploading CNI manifests. Please verify you have the
-                required manifests and that the chosen CNI is compatible with your platform and
-                OpenShift version.
-              </StackItem>
-              <StackItem>
-                <ExternalLink href={RED_HAT_CNI_SUPPORT_MATRIX_LINK}>
-                  Red Hat CNI Support Matrix
-                </ExternalLink>
-              </StackItem>
-            </Stack>
-          </Alert>
-        </StackItem>
-      )}
+      {showThirdPartyBanner && <ThirdPartyCNIBanner />}
     </Stack>
   );
 };

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

@@ -11,7 +11,7 @@ import {
   serviceNetworkValidationSchema,
   IPv4ValidationSchema,
   sshPublicKeyValidationSchema,
-  IPV4_STACK,
+  SINGLE_STACK,
   DUAL_STACK,
   vipArrayValidationSchema,
   NETWORK_TYPE_OVN,
@@ -50,7 +50,7 @@ export const getNetworkInitialValues = (
         : 'clusterManaged',
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
     machineNetworks: cluster.machineNetworks || [],
-    stackType: isDualStackType ? DUAL_STACK : IPV4_STACK,
+    stackType: isDualStackType ? DUAL_STACK : SINGLE_STACK,
     clusterNetworks:
       cluster.clusterNetworks ||
       (isDualStackType
@@ -85,7 +85,8 @@ export const getNetworkConfigurationValidationSchema = (
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()
           : machineNetworksValidationSchema.when('stackType', {
-              is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+              is: (stackType: NetworkConfigurationValues['stackType']) =>
+                stackType === SINGLE_STACK,
               then: () => machineNetworksValidationSchema.concat(IPv4ValidationSchema),
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
@@ -95,13 +96,13 @@ export const getNetworkConfigurationValidationSchema = (
                   : Yup.array(),
             }),
       clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === SINGLE_STACK,
         then: (schema) => schema.concat(IPv4ValidationSchema),
         otherwise: (schema) =>
           schema.concat(dualStackValidationSchema('cluster network', t, openshiftVersion)),
       }),
       serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === SINGLE_STACK,
         then: (schema) => schema.concat(IPv4ValidationSchema),
         otherwise: (schema) =>
           schema.concat(dualStackValidationSchema('service network', t, openshiftVersion)),

package/lib/ocm/components/clusterConfiguration/review/ReviewClusterDetailTable.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import { genericTableRowKey, getDefaultCpuArchitecture } from '../../../../common';
-import { getDiskEncryptionEnabledOnStatus } from '../../clusterDetail/ClusterProperties';
+import { getDiskEncryptionEnabledOnStatus } from './utils';
 import OpenShiftVersionDetail from '../../clusterDetail/OpenShiftVersionDetail';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';

package/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -1,8 +1,13 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { genericTableRowKey, isDualStack, NETWORK_TYPE_LABELS } from '../../../../common';
-import { getManagementType, getStackTypeLabel } from '../../clusterDetail/ClusterProperties';
+import {
+  genericTableRowKey,
+  isDualStack,
+  NETWORK_TYPE_LABELS,
+  useTranslation,
+} from '../../../../common';
+import { getManagementType, getStackTypeLabel } from './utils';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 type ReviewTableRowsType = {
@@ -11,6 +16,7 @@ type ReviewTableRowsType = {
 }[];
 
 export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
+  const { t } = useTranslation();
   const rows = React.useMemo(() => {
     const networkRows = [
       {
@@ -197,13 +203,13 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Networking type' },
           {
-            title: cluster.networkType ? NETWORK_TYPE_LABELS[cluster.networkType] : '-',
+            title: cluster.networkType ? NETWORK_TYPE_LABELS(t)[cluster.networkType] : '-',
             props: { 'data-testid': 'networking-type', colSpan: 2 },
           },
         ],
       },
     ] as ReviewTableRowsType;
-  }, [cluster]);
+  }, [cluster, t]);
 
   return (
     <>

package/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx

@@ -19,9 +19,16 @@ import { ReviewCustomManifestsTable } from './ReviewCustomManifestsTable';
 import PlatformIntegrationNote from '../platformIntegration/PlatformIntegrationNote';
 import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { ListManifestsExtended } from '../manifestsConfiguration/data/dataTypes';
+
+const userProvidedManifests = (manifests: ListManifestsExtended | undefined) =>
+  (manifests ?? []).filter((m) => m.manifestSource !== 'system');
 
 export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
   const { customManifests } = useClusterCustomManifests(cluster.id, false);
+  const manifestsForReview = userProvidedManifests(customManifests);
+  const showCustomManifests = manifestsForReview.length > 0;
+
   return (
     <>
       <TableSummaryExpandable title={'Cluster details'} id={'cluster-details-expandable'}>
@@ -57,9 +64,9 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
         <ReviewNetworkingTable cluster={cluster} />
       </TableSummaryExpandable>
 
-      {customManifests && customManifests.length > 0 && (
+      {showCustomManifests && (
         <TableSummaryExpandable title={'Custom manifests'} id={'custom-manifests-expandable'}>
-          <ReviewCustomManifestsTable manifests={customManifests} />
+          <ReviewCustomManifestsTable manifests={manifestsForReview} />
         </TableSummaryExpandable>
       )}
     </>

package/lib/ocm/components/{clusterDetail/ClusterProperties.test.ts → clusterConfiguration/review/utils.test.ts}

@@ -1,5 +1,5 @@
 import { test, describe, expect } from 'vitest';
-import { getStackTypeLabel } from './ClusterProperties';
+import { getStackTypeLabel } from './utils';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 const createCluster = (overrides: Partial<Cluster> = {}): Cluster =>

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { isDualStack } from '../../../../common';
+import { Cluster, DiskEncryption } from '@openshift-assisted/types/assisted-installer-service';
+
+export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
+  userManagedNetworking ? 'User-managed networking' : 'Cluster-managed networking';
+
+export const getStackTypeLabel = (cluster: Cluster): string =>
+  isDualStack(cluster) ? 'Dual-stack' : 'IPv4';
+
+export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
+  let diskEncryptionType = null;
+  switch (diskEncryption) {
+    case undefined:
+    case 'none':
+      break;
+    case 'all':
+      diskEncryptionType = (
+        <>
+          Enabled on control plane nodes
+          <br />
+          Enabled on workers
+        </>
+      );
+      break;
+    case 'masters':
+      diskEncryptionType = <>Enabled on control plane nodes</>;
+      break;
+    case 'workers':
+      diskEncryptionType = <>Enabled on workers</>;
+      break;
+    case 'arbiters':
+      diskEncryptionType = <>Enabled on arbiters</>;
+      break;
+    case 'masters,arbiters':
+      diskEncryptionType = <>Enabled on control plane nodes and arbiters</>;
+      break;
+    case 'masters,workers':
+      diskEncryptionType = <>Enabled on control plane nodes and workers</>;
+      break;
+    case 'arbiters,workers':
+      diskEncryptionType = <>Enabled on arbiters and workers</>;
+      break;
+    case 'masters,arbiters,workers':
+      diskEncryptionType = (
+        <>
+          Enabled on control plane nodes
+          <br />
+          Enabled on arbiters
+          <br />
+          Enabled on workers
+        </>
+      );
+      break;
+    default: {
+      const _exhaustive: never = diskEncryption;
+      return _exhaustive;
+    }
+  }
+  return diskEncryptionType;
+};

package/lib/ocm/components/clusterConfiguration/staticIp/data/formDataToInfraEnvField.ts

@@ -73,6 +73,7 @@ const getNmstateObject = (
       realProtocolConfigs[protocolVersion] = getNmstateProtocolConfig(
         hostIp,
         getPrefixLength(networkWide, protocolVersion),
+        protocolVersion,
       );
       if (networkWide.useVlan && networkWide.vlanId) {
         if (bondType && hasBondsConfigured) {
@@ -94,6 +95,7 @@ const getNmstateObject = (
         [protocolVersion]: getNmstateProtocolConfig(
           DUMMY_NMSTATE_ADDRESSES[protocolVersion].ip,
           DUMMY_NMSTATE_ADDRESSES[protocolVersion].prefixLength,
+          protocolVersion,
         ),
       };
       nicName = getDummyNicName(protocolVersion);

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateTypes.ts

@@ -15,6 +15,7 @@ export type NmstateProtocolConfig = {
   address: NmstateAddress[];
   enabled: boolean;
   dhcp: boolean;
+  autoconf?: boolean;
 };
 
 export type NmstateProtocolConfigs = {

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateYaml.ts

@@ -80,6 +80,7 @@ export const getProtocolType = (comments: string[]): StaticProtocolType | null =
 export const getNmstateProtocolConfig = (
   ipAddress: string,
   prefixLength: number,
+  protocolVersion?: ProtocolVersion,
 ): NmstateProtocolConfig => {
   return {
     address: [
@@ -90,6 +91,7 @@ export const getNmstateProtocolConfig = (
     ],
     enabled: true,
     dhcp: false,
+    ...(protocolVersion === ProtocolVersion.ipv6 && { autoconf: false }),
   };
 };
 

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.tsx

@@ -7,13 +7,15 @@ import {
   RenderIf,
   canOpenConsole,
 } from '../../../common';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 import { canAbortInstallation } from '../clusters/utils';
 import { onFetchEvents } from '../fetching/fetchEvents';
 import ViewClusterEventsButton from '../../../common/components/ui/ViewClusterEventsButton';
-import { LaunchOpenshiftConsoleButton } from '../../../common/components/clusterDetail/ConsoleModal';
+import { ToolbarButton } from '../../../common/components/ui/Toolbar';
 import { Cluster, Credentials } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 import './ClusterDetailsButtonGroup.css';
 
@@ -24,6 +26,30 @@ type ClusterDetailsButtonGroupProps = {
   showKubeConfig?: boolean;
 };
 
+const LaunchOpenshiftConsoleButton: React.FC<{
+  consoleUrl?: string;
+  isDisabled: boolean;
+  id?: string;
+}> = ({ consoleUrl, isDisabled, id }) => {
+  const { t } = useTranslation();
+  return (
+    <ToolbarButton
+      variant={ButtonVariant.primary}
+      component="a"
+      href={consoleUrl}
+      target="_blank"
+      rel="noopener"
+      isDisabled={isDisabled}
+      icon={<ExternalLinkAltIcon />}
+      iconPosition="right"
+      id={id}
+      data-testid={id}
+    >
+      {t('ai:Launch OpenShift Console')}
+    </ToolbarButton>
+  );
+};
+
 const getID = (suffix: string) => `cluster-detail-${suffix}`;
 
 const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
@@ -60,7 +86,6 @@ const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
         <FlexItem>
           <LaunchOpenshiftConsoleButton
             isDisabled={false}
-            cluster={cluster}
             consoleUrl={credentials?.consoleUrl}
             id={getID('button-launch-console')}
           />

package/lib/ocm/components/clusterDetail/index.ts

@@ -2,4 +2,3 @@ export * from './utils';
 export { default as ClusterDetail } from './ClusterDetail';
 export { default as ClusterInstallationProgressCard } from './ClusterInstallationProgressCard';
 export { default as AssistedInstallerDetailCard } from './AssistedInstallerDetailCard';
-export { default as AssistedInstallerExtraDetailCard } from './AssistedInstallerExtraDetailCard';

package/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -123,8 +123,17 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         managedDomains,
         ocpVersions,
         urlSearchParams: search,
+        isSingleClusterFeatureEnabled,
       }),
-    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search],
+    [
+      infraEnv,
+      cluster,
+      pullSecret,
+      managedDomains,
+      ocpVersions,
+      search,
+      isSingleClusterFeatureEnabled,
+    ],
   );
 
   const { t } = useTranslation();

package/lib/ocm/components/clusters/AssistedInstallerHeader.tsx

@@ -8,12 +8,16 @@ import {
 } from '../../../common';
 import { useFeature } from '../../hooks/use-feature';
 
-export const AssistedInstallerHeader = () => {
+type AssistedInstallerHeaderProps = {
+  clusterName?: string;
+};
+
+export const AssistedInstallerHeader = ({ clusterName }: AssistedInstallerHeaderProps) => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   return (
     <>
       <Content component="h1" className="pf-v6-u-display-inline">
-        Install OpenShift with the Assisted Installer
+        {clusterName || 'Install OpenShift with the Assisted Installer'}
       </Content>
       {isSingleClusterFeatureEnabled && <TechnologyPreview />}
       <Split hasGutter>

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -104,7 +104,7 @@ const ClusterPageGeneric = ({
           {showBreadcrumbs && <ClusterBreadcrumbs clusterName={cluster.name} />}
           {showBreadcrumbs && (
             <PageSection hasBodyWrapper={false}>
-              <AssistedInstallerHeader />
+              <AssistedInstallerHeader clusterName={cluster.name} />
             </PageSection>
           )}
 

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -8,7 +8,6 @@ import {
   TextInput,
   ToolbarProps,
   ToolbarFilterProps,
-  TextInputProps,
   ButtonVariant,
   Spinner,
   ToolbarGroup,
@@ -39,7 +38,7 @@ export type ClusterFiltersType = {
 
 type ClustersListToolbarProps = {
   searchString: string;
-  setSearchString: TextInputProps['onChange'];
+  setSearchString: (value: string) => void;
   filters: ClusterFiltersType;
   setFilters: (filters: ClusterFiltersType) => void;
 };
@@ -63,10 +62,9 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     setFilters({
       status: [],
     });
+    setSearchString('');
   };
 
-  const onSearchNameChanged: TextInputProps['onChange'] = setSearchString;
-
   const onSelect = (type: string, isChecked: boolean, value: Cluster['status']) => {
     setFilters({
       ...filters,
@@ -126,7 +124,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
                 id="search-string"
                 type="search"
                 aria-label="string to be searched in cluster names or ids"
-                onChange={onSearchNameChanged}
+                onChange={(_event, value) => setSearchString(value)}
                 value={searchString}
                 placeholder="Filter by Name, ID or Base domain"
                 title="Filter by Name, ID or Base domain"

package/lib/ocm/components/clusters/ClustersTable.tsx

@@ -25,6 +25,7 @@ import {
   ClusterTableRows,
   HumanizedSortable,
   rowSorter,
+  EmptyState,
 } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import DeleteClusterModal from './DeleteClusterModal';
@@ -151,64 +152,73 @@ const ClustersTable = ({ rows, deleteCluster }: ClustersTableProps) => {
     closeModal();
   };
 
+  const hasActiveFilters = searchString.length > 0 || filters.status.length > 0;
+
   return (
     <>
       <ClustersListToolbar
         searchString={searchString}
-        setSearchString={(_event, value) => setSearchString(value)}
+        setSearchString={setSearchString}
         filters={filters}
         setFilters={setFilters}
       />
-      <Table aria-label="Clusters table" data-testid={'clusters-table'}>
-        <Thead>
-          <Tr>
-            {columns.map((col, i) => (
-              <Th
-                key={`col-${i}`}
-                width={col.cellWidth as BaseCellProps['width']}
-                sort={getSortParams(i)}
-              >
-                <TableText>{col.title}</TableText>
-              </Th>
-            ))}
-            <Th key="col-action" />
-          </Tr>
-        </Thead>
-        <Tbody>
-          {sortedRows.map((row, i) => (
-            <Tr {...getRowProps(row.props as ClusterRowDataProps)} key={`row-${i}`}>
-              {row.cells?.map((cell, j) => {
-                const humanized = cell as HumanizedSortable;
-                return (
-                  <Td dataLabel={columns[j].title} key={`cell-${i}-${j}`} {...humanized.props}>
-                    <TableText wrapModifier="breakWord">{humanized?.title}</TableText>
-                  </Td>
-                );
-              })}
-              <Td isActionCell>
-                <ActionsColumn
-                  items={[
-                    {
-                      title: 'Delete',
-                      id: `button-delete-${(row.props as ClusterRowDataProps).name}`,
-                      isDisabled:
-                        getClusterTableStatusCell(row).sortableValue ===
-                        clusterStatusLabels(t).installing,
-                      onClick: () => {
-                        setDeleteClusterID({
-                          id: (row.props as ClusterRowDataProps).id,
-                          name: (row.props as ClusterRowDataProps).name,
-                        });
-                        setDeleteModalOpen(true);
-                      },
-                    },
-                  ]}
-                />
-              </Td>
+      {sortedRows.length === 0 && hasActiveFilters ? (
+        <EmptyState
+          title="No matching clusters"
+          content="No clusters match the current filter criteria. Try adjusting your filters."
+        />
+      ) : (
+        <Table aria-label="Clusters table" data-testid={'clusters-table'}>
+          <Thead>
+            <Tr>
+              {columns.map((col, i) => (
+                <Th
+                  key={`col-${i}`}
+                  width={col.cellWidth as BaseCellProps['width']}
+                  sort={getSortParams(i)}
+                >
+                  <TableText>{col.title}</TableText>
+                </Th>
+              ))}
+              <Th key="col-action" />
             </Tr>
-          ))}
-        </Tbody>
-      </Table>
+          </Thead>
+          <Tbody>
+            {sortedRows.map((row, i) => (
+              <Tr {...getRowProps(row.props as ClusterRowDataProps)} key={`row-${i}`}>
+                {row.cells?.map((cell, j) => {
+                  const humanized = cell as HumanizedSortable;
+                  return (
+                    <Td dataLabel={columns[j].title} key={`cell-${i}-${j}`} {...humanized.props}>
+                      <TableText wrapModifier="breakWord">{humanized?.title}</TableText>
+                    </Td>
+                  );
+                })}
+                <Td isActionCell>
+                  <ActionsColumn
+                    items={[
+                      {
+                        title: 'Delete',
+                        id: `button-delete-${(row.props as ClusterRowDataProps).name}`,
+                        isDisabled:
+                          getClusterTableStatusCell(row).sortableValue ===
+                          clusterStatusLabels(t).installing,
+                        onClick: () => {
+                          setDeleteClusterID({
+                            id: (row.props as ClusterRowDataProps).id,
+                            name: (row.props as ClusterRowDataProps).name,
+                          });
+                          setDeleteModalOpen(true);
+                        },
+                      },
+                    ]}
+                  />
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      )}
       <DeleteClusterModal
         name={deleteClusterID?.name || ''}
         onClose={closeModal}

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -229,7 +229,7 @@ export const getNewFeatureDisabledReason = (
     }
     case 'USER_MANAGED_NETWORKING': {
       if (!isSupported) {
-        return `User-Managed Networking is not supported when using ${
+        return `User-managed networking is not supported when using ${
           platformType ? ExternalPlatformLabels[platformType] : ''
         }`;
       }

package/lib/ocm/hooks/useClusterCustomManifests.ts

@@ -34,12 +34,14 @@ const getManifestsInfo = async (customManifests: ListManifests, clusterId: strin
       );
       const yamlString = await convertBlobToString(yamlContent);
       manifestsExtended.push({
+        ...manifest,
         folder: manifest.folder || 'manifests',
         fileName: manifest.fileName || '',
         yamlContent: yamlString,
       });
     } catch (e) {
       manifestsExtended.push({
+        ...manifest,
         folder: manifest.folder || 'manifests',
         fileName: manifest.fileName || '',
         yamlContent: '',
@@ -65,6 +67,7 @@ const useClusterCustomManifests = (clusterId: Cluster['id'], extendedVersion: bo
           });
         } else {
           const manifestsExtended = data.map((manifest: Manifest) => ({
+            ...manifest,
             folder: manifest.folder || 'manifests',
             fileName: manifest.fileName || '',
             yamlContent: '',