@openshift-assisted/ui-lib 2.46.2 → 2.47.0

package/lib/common/components/clusterConfiguration/DiscoveryImageConfigForm.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import * as Yup from 'yup';
-import { Button, Form, AlertVariant, Alert, Stack, StackItem } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Form,
+  AlertVariant,
+  Alert,
+  Stack,
+  StackItem,
+  ModalBody,
+  ModalFooter,
+} from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { Formik, FormikHelpers } from 'formik';
 import {
@@ -106,7 +114,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
       {({ submitForm, isSubmitting, status }) => {
         return (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 {hasDHCP === false && (
                   <StackItem>
@@ -131,8 +139,8 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
                   </Form>
                 </StackItem>
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -148,7 +156,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
               <Button key="cancel" variant="link" onClick={onCancel}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         );
       }}

package/lib/common/components/clusterConfiguration/DiscoveryInstructions.tsx

@@ -14,7 +14,7 @@ const DiscoveryInstructions = ({
 }: DiscoveryInstructionsProps) => {
   const { t } = useTranslation();
   return (
-    <Content>
+    <>
       <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
       <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
         <Content component="li" hidden={!showAllInstructions}>
@@ -42,7 +42,7 @@ const DiscoveryInstructions = ({
           )}
         </Content>
       </Content>
-    </Content>
+    </>
   );
 };
 

package/lib/common/components/clusterConfiguration/DiscoveryIpxeInstructions.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 const DiscoveryIpxeInstructions = () => {
   const { t } = useTranslation();
   return (
-    <Content>
+    <>
       <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
       <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
         <Content component="li">{t('ai:Download the example iPXE script file')}</Content>
@@ -19,7 +19,7 @@ const DiscoveryIpxeInstructions = () => {
         </Content>
         <Content component="li">{t('ai:Set all the hosts to boot using iPXE script file')}</Content>
       </Content>
-    </Content>
+    </>
   );
 };
 

package/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx

@@ -9,8 +9,12 @@ import {
   OrderType,
   HelperText,
   HelperTextItem,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
 } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -219,24 +223,23 @@ export const DiscoveryTroubleshootingModal = ({
   setDiscoveryHintModalOpen,
   isOpen,
 }: DiscoveryTroubleshootingModalProps) => {
+  const { t } = useTranslation();
   const onClose = React.useCallback(
     () => setDiscoveryHintModalOpen(false),
     [setDiscoveryHintModalOpen],
   );
-  const { t } = useTranslation();
+
   return (
-    <Modal
-      title={t('ai:Hosts not showing up troubleshooter')}
-      isOpen={isOpen}
-      actions={[
+    <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.large}>
+      <ModalHeader title={t('ai:Hosts not showing up troubleshooter')} />
+      <ModalBody>
+        <DiscoveryTroubleshootingModalContent />
+      </ModalBody>
+      <ModalFooter>
         <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
           {t('ai:Close')}
-        </Button>,
-      ]}
-      onClose={onClose}
-      variant={ModalVariant.large}
-    >
-      <DiscoveryTroubleshootingModalContent />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionMode.tsx

@@ -116,9 +116,7 @@ export const DiskEncryptionMode = ({
         <Stack>
           &nbsp;
           <StackItem>
-            <Content>
-              <Content component={ContentVariants.h6}>{t('ai:Tang servers')}</Content>
-            </Content>
+            <Content component={ContentVariants.h6}>{t('ai:Tang servers')}</Content>
           </StackItem>
           &nbsp;
           <TangServers isDisabled={isDisabled} tooltipProps={tooltipProps} />

package/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx

@@ -6,10 +6,11 @@ import {
   ButtonVariant,
   ClipboardCopy,
   clipboardCopyFunc,
+  ModalBody,
+  ModalFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { DetailItem, DetailList } from '../ui';
 import DiscoveryIpxeInstructions from './DiscoveryIpxeInstructions';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -32,7 +33,7 @@ const DownloadIpxeScript = ({
   const { t } = useTranslation();
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -73,8 +74,8 @@ const DownloadIpxeScript = ({
             </DetailList>
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           variant={ButtonVariant.primary}
           onClick={() => downloadUrl && saveAs(downloadUrl)}
@@ -91,7 +92,7 @@ const DownloadIpxeScript = ({
         <Button variant={ButtonVariant.link} onClick={onClose} data-testid="edit-ipxe-btn">
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };

package/lib/common/components/clusterConfiguration/DownloadIso.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { saveAs } from 'file-saver';
 import {
   Alert,
   Button,
   ButtonVariant,
   ClipboardCopy,
   clipboardCopyFunc,
+  ModalBody,
+  ModalFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { DetailItem, DetailList } from '../ui';
 import DiscoveryInstructions from './DiscoveryInstructions';
 import { StaticIPInfo } from './DiscoveryImageConfigForm';
@@ -48,7 +48,7 @@ const DownloadIso = ({
 
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -103,6 +103,8 @@ const DownloadIso = ({
                 }
               />
             </DetailList>
+          </StackItem>
+          <StackItem>
             <Alert
               variant="info"
               isInline
@@ -112,13 +114,17 @@ const DownloadIso = ({
             />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           variant={ButtonVariant.primary}
-          onClick={() => downloadUrl && saveAs(downloadUrl)}
           data-testid="download-iso-btn"
           isDisabled={!downloadUrl}
+          component={'a'}
+          target="_blank"
+          href={downloadUrl}
+          download
+          rel="noopener noreferrer"
         >
           {t('ai:Download Discovery ISO')}
         </Button>
@@ -130,7 +136,7 @@ const DownloadIso = ({
             {t('ai:Edit ISO configuration')}
           </Button>
         )}
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };

package/lib/common/components/clusterConfiguration/DownloadIsoModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import DownloadIso, { DownloadISOProps } from './DownloadIso';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 
 type DownloadIsoModalProps = DownloadISOProps & {
   isOpen: boolean;
@@ -12,13 +12,12 @@ const DownloadIsoModal: React.FC<DownloadIsoModalProps> = ({ isOpen, ...props })
   return (
     <Modal
       aria-label={t('ai:Download host discovery ISO dialog')}
-      title={t('ai:Add host')}
       isOpen={isOpen}
       onClose={props.onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="download-discovery-iso-modal"
     >
+      <ModalHeader title={t('ai:Add host')} />
       <DownloadIso {...props} />
     </Modal>
   );

package/lib/{ocm → common}/components/clusterConfiguration/OcmTNADisclaimer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, AlertVariant, List, ListItem } from '@patternfly/react-core';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 const OcmTNADisclaimer = () => {
   const { t } = useTranslation();

package/lib/common/components/clusterConfiguration/utils.test.ts

@@ -0,0 +1,275 @@
+import { test, describe, expect } from 'vitest';
+import { isDualStack } from './utils';
+import {
+  MachineNetwork,
+  ClusterNetwork,
+  ServiceNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
+
+describe('isDualStack', () => {
+  const createMachineNetwork = (cidr: string): MachineNetwork => ({ cidr, clusterId: 'test' });
+  const createClusterNetwork = (cidr: string, hostPrefix: number): ClusterNetwork => ({
+    cidr,
+    hostPrefix,
+    clusterId: 'test',
+  });
+  const createServiceNetwork = (cidr: string): ServiceNetwork => ({ cidr, clusterId: 'test' });
+
+  describe('OCP < 4.12 (legacy behavior)', () => {
+    test('returns true for valid dual stack with IPv4 primary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false for IPv6 primary in OCP < 4.12', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for single stack', () => {
+      const result = isDualStack({
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for empty networks', () => {
+      const result = isDualStack({
+        machineNetworks: [],
+        clusterNetworks: [],
+        serviceNetworks: [],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('OCP >= 4.12 (new behavior)', () => {
+    test('returns true for IPv4 primary and IPv6 secondary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns true for IPv6 primary and IPv4 secondary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false for IPv6 primary and IPv6 secondary (not dual-stack)', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('2001:db9::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('fd02::/48', 64),
+        ],
+        serviceNetworks: [createServiceNetwork('fd03::/112'), createServiceNetwork('fd04::/112')],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for IPv4 primary and IPv4 secondary (not dual-stack)', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('10.0.0.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('172.16.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('172.31.0.0/16'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for single stack', () => {
+      const result = isDualStack({
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false if any network type is not dual stack', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)], // Single stack
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('no version specified (defaults to legacy behavior)', () => {
+    test('returns true for IPv4 primary and IPv6 secondary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false for IPv6 primary when no version specified', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles undefined networks', () => {
+      const result = isDualStack({
+        machineNetworks: undefined,
+        clusterNetworks: undefined,
+        serviceNetworks: undefined,
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('handles networks with empty CIDRs', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          { cidr: '', clusterId: 'test' },
+          { cidr: '', clusterId: 'test' },
+        ],
+        clusterNetworks: [
+          { cidr: '', hostPrefix: 23, clusterId: 'test' },
+          { cidr: '', hostPrefix: 64, clusterId: 'test' },
+        ],
+        serviceNetworks: [
+          { cidr: '', clusterId: 'test' },
+          { cidr: '', clusterId: 'test' },
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('handles invalid CIDRs', () => {
+      const result = isDualStack({
+        machineNetworks: [createMachineNetwork('invalid'), createMachineNetwork('also-invalid')],
+        clusterNetworks: [
+          createClusterNetwork('invalid', 23),
+          createClusterNetwork('also-invalid', 64),
+        ],
+        serviceNetworks: [createServiceNetwork('invalid'), createServiceNetwork('also-invalid')],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+});

package/lib/common/components/clusterConfiguration/utils.ts

@@ -10,6 +10,7 @@ import {
   ServiceNetwork,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NO_SUBNET_SET } from '../../config';
+import { isMajorMinorVersionEqualOrGreater } from '../../utils';
 import {
   selectClusterNetworkCIDR,
   selectClusterNetworkHostPrefix,
@@ -179,20 +180,38 @@ export const canBeDualStack = (subnets: HostSubnets) =>
 
 const areNetworksDualStack = (
   networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
-) =>
-  networks &&
-  networks.length > 1 &&
-  Address4.isValid(networks[0].cidr || '') &&
-  Address6.isValid(networks[1].cidr || '');
+  openshiftVersion?: string,
+) => {
+  if (!networks || networks.length < 2) {
+    return false;
+  }
+
+  const firstCidr = networks[0].cidr || '';
+  const secondCidr = networks[1].cidr || '';
+
+  // For OCP >= 4.12, allow either IPv4 or IPv6 as primary, with opposite as secondary
+  if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
+    return (
+      (Address4.isValid(firstCidr) && Address6.isValid(secondCidr)) ||
+      (Address6.isValid(firstCidr) && Address4.isValid(secondCidr))
+    );
+  }
+
+  // For older versions, require IPv4 as primary and IPv6 as secondary
+  return Address4.isValid(firstCidr) && Address6.isValid(secondCidr);
+};
 
 export const isDualStack = ({
   machineNetworks,
   clusterNetworks,
   serviceNetworks,
-}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks'>) =>
-  areNetworksDualStack(machineNetworks) &&
-  areNetworksDualStack(clusterNetworks) &&
-  areNetworksDualStack(serviceNetworks);
+  openshiftVersion,
+}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks'> & {
+  openshiftVersion?: string;
+}) =>
+  areNetworksDualStack(machineNetworks, openshiftVersion) &&
+  areNetworksDualStack(clusterNetworks, openshiftVersion) &&
+  areNetworksDualStack(serviceNetworks, openshiftVersion);
 
 export const isSubnetInIPv6 = ({
   clusterNetworkCidr,

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -1,6 +1,15 @@
 import React from 'react';
-import { Button, ButtonVariant, Content, ExpandableSection } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  ExpandableSection,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
 import { ToolbarButton } from '../ui/Toolbar';
@@ -174,14 +183,12 @@ export const ConsoleModal: React.FC<ConsoleModalProps> = ({
     </Button>,
   ];
   return (
-    <Modal
-      title={t('ai:OpenShift Web Console troubleshooting')}
-      isOpen={isOpen}
-      onClose={closeModal}
-      actions={actions}
-      variant={ModalVariant.large}
-    >
-      <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
+    <Modal isOpen={isOpen} onClose={closeModal} variant={ModalVariant.large}>
+      <ModalHeader title={t('ai:OpenShift Web Console troubleshooting')} />
+      <ModalBody>
+        <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
+      </ModalBody>
+      <ModalFooter>{actions}</ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/clusterDetail/FinalizingProgress.tsx

@@ -87,12 +87,10 @@ export const FinalizingProgress: React.FC<FinalizingProgressProps> = ({
               zIndex={300} // set the zIndex below Cluster Events Modal
               headerContent={<>{t('ai:Initialization')}</>}
               bodyContent={
-                <Content>
-                  <Content component="p">
-                    {t(
-                      'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
-                    )}
-                  </Content>
+                <Content component="p">
+                  {t(
+                    'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
+                  )}
                 </Content>
               }
               footerContent={