@openshift-assisted/ui-lib 2.46.1 → 2.46.3

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

@@ -1,6 +1,14 @@
 import React from 'react';
-import { Button, ButtonVariant, Spinner, Title } from '@patternfly/react-core';
-import { Modal, ModalVariant, ModalBoxBody } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+  Spinner,
+} from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { t_global_icon_color_status_warning_default as globalIconColorWarning } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { ToolbarButton } from './Toolbar';
@@ -82,30 +90,21 @@ export const EventsModal = ({
 
   return (
     <Modal
-      header={
-        <Title headingLevel={'h1'}>
-          {title} {isLoading && <Spinner size="lg" data-testid="events-modal-spinner" />}
-        </Title>
-      }
       isOpen={isOpen}
       aria-label={t('ai:Displays events')}
-      hasNoBodyWrapper
-      actions={[
-        <Button
-          key="close"
-          variant={ButtonVariant.primary}
-          onClick={onClose}
-          data-testid="close-events-modal"
-        >
-          {t('ai:Close')}
-        </Button>,
-      ]}
       onClose={onClose}
       variant={ModalVariant.large}
       className="events-modal"
       id={'events-modal'}
     >
-      <ModalBoxBody className="events-modal__body">
+      <ModalHeader
+        title={
+          <>
+            {title} {isLoading && <Spinner size="lg" data-testid="events-modal-spinner" />}
+          </>
+        }
+      />
+      <ModalBody className="events-modal__body">
         {fallbackEventsURL ? (
           <ErrorState
             title={t('ai:Could not load events')}
@@ -123,7 +122,17 @@ export const EventsModal = ({
         ) : (
           <EventListFetch className="events-modal__event-list" setLoading={setLoading} {...rest} />
         )}
-      </ModalBoxBody>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          key="close"
+          variant={ButtonVariant.primary}
+          onClick={onClose}
+          data-testid="close-events-modal"
+        >
+          {t('ai:Close')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/ui/formik/AlertFormikError.tsx

@@ -14,16 +14,14 @@ export const AlertFormikError = ({ status, onClose }: AlertFormikErrorProps) =>
   const actionClose = onClose ? <AlertActionCloseButton onClose={onClose} /> : undefined;
 
   return (
-    <>
-      <Alert
-        variant={AlertVariant.danger}
-        title={status.error.title}
-        isInline
-        actionClose={actionClose}
-      >
-        {status.error.message}
-      </Alert>
-    </>
+    <Alert
+      variant={AlertVariant.danger}
+      title={status.error.title}
+      isInline
+      actionClose={actionClose}
+    >
+      {status.error.message}
+    </Alert>
   );
 };
 

package/lib/common/components/ui/formik/RichInputField.css

@@ -2,13 +2,6 @@
   padding-top: var(--pf-v6-c-helper-text--Gap);
 }
 
-.rich-input__group {
-  border-color: var(--pf-v6-global--BorderColor--300) var(--pf-v6-global--BorderColor--300)
-    var(--pf-v6-global--BorderColor--200) var(--pf-v6-global--BorderColor--300);
-  border-width: 1px;
-  border-style: solid;
-}
-
 .rich-input__group--invalid {
   border-bottom-color: var(--pf-v6-global--danger-color--100);
 }

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -14,6 +14,7 @@ import {
   InputGroupItem,
   FormHelperText,
   HelperText,
+  ButtonVariant,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
@@ -170,7 +171,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                     <InfoCircleIcon color={blueInfoColor.value} />
                   )
                 }
-                variant="plain"
+                variant={ButtonVariant.control}
                 aria-label="Validation"
               />
             </Popover>

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -61,13 +61,22 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
         <FormHelperText>
           <HelperText>
             <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              variant={'default'}
+              id={`${fieldId}-helper`}
               data-testid={`input-textarea-${fieldId}-helper-text`}
             >
-              {errorMessage ? errorMessage : helperText}
+              {helperText}
             </HelperTextItem>
+            {errorMessage && (
+              <HelperTextItem
+                icon={<ExclamationCircleIcon />}
+                variant={'error'}
+                id={`${fieldId}-helper-error`}
+                data-testid={`input-textarea-${fieldId}-helper-text`}
+              >
+                {errorMessage}
+              </HelperTextItem>
+            )}
           </HelperText>
         </FormHelperText>
       )}

package/lib/ocm/components/AddHosts/InventoryAddHost.tsx

@@ -17,14 +17,12 @@ const InventoryAddHosts = ({ cluster }: { cluster?: Cluster }) => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <Content>
+        <Day2WizardContextProvider>
           <Content component="p">
-            <Day2WizardContextProvider>
-              <Day2DiscoveryImageModalButton cluster={cluster} />
-              <Day2Wizard />
-            </Day2WizardContextProvider>
+            <Day2DiscoveryImageModalButton cluster={cluster} />
           </Content>
-        </Content>
+          <Day2Wizard />
+        </Day2WizardContextProvider>
       </StackItem>
       <StackItem>
         <InformationAndAlerts cluster={cluster} />

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIpHostConfigurations.tsx

@@ -23,11 +23,7 @@ const Day2HostStaticIpConfigurations = ({ isDisabled }: { isDisabled: boolean })
 
   return (
     <FormGroup
-      label={
-        <Content>
-          <Content component={ContentVariants.h4}>Hosts' network configuration</Content>
-        </Content>
-      }
+      label={<Content component={ContentVariants.h4}>Hosts' network configuration</Content>}
       fieldId={getFieldId(GROUP_NAME, 'radio')}
       isInline
       onChange={onChangeNetworkType}

package/lib/ocm/components/AddHosts/day2Wizard/Day2Wizard.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
-import { WizardHeader } from '@patternfly/react-core';
+import { Modal, ModalVariant, WizardHeader } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { ClusterWizardStep } from '../../../../common';
 import { useModalDialogsContext } from '../../hosts/ModalDialogsContext';
@@ -40,8 +39,7 @@ const Day2Wizard = () => {
       aria-label={'Day 2 Wizard'}
       isOpen={isOpen}
       variant={ModalVariant.large}
-      showClose={false}
-      hasNoBodyWrapper
+      onClose={undefined}
       id="generate-discovery-iso-modal"
     >
       <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>

package/lib/ocm/components/clusterConfiguration/DiscoveryImageModal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Button, ButtonVariant, Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
 import {
   AI_CISCO_INTERSIGHT_TAG,
@@ -105,17 +104,17 @@ export const DiscoveryImageModal = () => {
   return (
     <Modal
       aria-label="Add hosts dialog"
-      title={
-        <span data-testid="discovery-modal-title">{`Add ${pluralize(+isSNOCluster, 'host')}`}</span>
-      }
       isOpen={isOpen}
       onClose={close}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="generate-discovery-iso-modal"
-      tabIndex={0}
       ouiaId="discovery-image-modal"
+      tabIndex={0}
     >
+      <ModalHeader
+        data-testid="discovery-modal-title"
+        title={`Add ${pluralize(+isSNOCluster, 'host')}`}
+      />
       {(isoDownloadError || ipxeDownloadError) && <ErrorState />}
       {isoDownloadUrl ? (
         <DownloadIso

package/lib/ocm/components/clusterConfiguration/HostInventory.tsx

@@ -37,14 +37,12 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
       </StackItem>
       <StackItem data-testid="discovery-image-modal-section">
         {!isViewerMode && !isSingleClusterFeatureEnabled && (
-          <Content>
-            <Content component="p">
-              <DiscoveryImageModalButton
-                ButtonComponent={Button}
-                cluster={cluster}
-                idPrefix="host-inventory"
-              />
-            </Content>
+          <Content component="p">
+            <DiscoveryImageModalButton
+              ButtonComponent={Button}
+              cluster={cluster}
+              idPrefix="host-inventory"
+            />
           </Content>
         )}
       </StackItem>
@@ -77,9 +75,7 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
         <InformationAndAlerts cluster={cluster} />
       </StackItem>
       <StackItem data-testid="host-inventory-title">
-        <Content>
-          <Content component="h3">Host Inventory</Content>
-        </Content>
+        <Content component="h3">Host Inventory</Content>
       </StackItem>
       <StackItem data-testid="hosts-discovery-table-wrapper">
         <HostsDiscoveryTable cluster={cluster} />

package/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -1,7 +1,17 @@
 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,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
 import { Formik, FormikHelpers } from 'formik';
 import {
   HostStaticNetworkConfig,
@@ -133,7 +143,7 @@ export const OcmDiscoveryImageConfigForm = ({
       {({ submitForm, isSubmitting, status, setStatus }) => {
         return (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <Alert variant={AlertVariant.info} isInline title={alertDiscoveryText} />
@@ -158,32 +168,40 @@ export const OcmDiscoveryImageConfigForm = ({
                   </Form>
                 </StackItem>
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Stack hasGutter style={{ width: '100%' }}>
+                {(status as StatusErrorType)?.error && (
+                  <StackItem>
+                    <AlertFormikError
+                      status={status as StatusErrorType}
+                      onClose={() => setStatus(undefined)}
+                    />
+                  </StackItem>
+                )}
                 <StackItem>
-                  <AlertFormikError
-                    status={status as StatusErrorType}
-                    onClose={() => setStatus(undefined)}
-                  />
-                </StackItem>
-                <StackItem>
-                  <Button
-                    onClick={() => {
-                      void submitForm();
-                    }}
-                    isDisabled={isSubmitting}
-                    isLoading={isSubmitting}
-                    data-testid="generate-discovery-iso-button"
-                  >
-                    {isSubmitting ? t('ai:Generating') : buttonText}
-                  </Button>
-                  <Button key="cancel" variant="link" onClick={onCancel}>
-                    {t('ai:Cancel')}
-                  </Button>
+                  <Flex>
+                    <FlexItem>
+                      <Button
+                        onClick={() => {
+                          void submitForm();
+                        }}
+                        isDisabled={isSubmitting}
+                        isLoading={isSubmitting}
+                        data-testid="generate-discovery-iso-button"
+                      >
+                        {isSubmitting ? t('ai:Generating') : buttonText}
+                      </Button>
+                    </FlexItem>
+                    <FlexItem>
+                      <Button key="cancel" variant="link" onClick={onCancel}>
+                        {t('ai:Cancel')}
+                      </Button>
+                    </FlexItem>
+                  </Flex>
                 </StackItem>
               </Stack>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         );
       }}

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/DeleteCustomManifestModal.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const DeleteCustomManifestModal = ({
   isOpen,
@@ -11,28 +18,27 @@ const DeleteCustomManifestModal = ({
   onClose: () => void;
   onDelete: () => void;
 }) => (
-  <Modal
-    title={'Remove custom manifests'}
-    isOpen={isOpen}
-    onClose={onClose}
-    variant={ModalVariant.small}
-    actions={[
+  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
+    <ModalHeader title={'Remove custom manifests'} />
+    <ModalBody>
+      <Content>
+        All the data entered for custom manifests will be lost and there will not be any custom
+        manifests included in the installation.
+      </Content>
+    </ModalBody>
+    <ModalFooter>
       <Button
         data-testid="delete-manifest-submit"
         key="confirm"
         variant="danger"
         onClick={onDelete}
       >
-        {'Remove'}{' '}
-      </Button>,
+        Remove
+      </Button>
       <Button key="cancel" variant="link" onClick={onClose}>
         Cancel
-      </Button>,
-    ]}
-  >
-    {
-      'All the data entered for custom manifests will be lost and there will not be any custom manifests included in the installation.'
-    }
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

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

@@ -61,15 +61,15 @@ const AdvancedNetworkFields = () => {
   );
 
   return (
-    <Grid hasGutter className="pf-v6-u-ml-lg">
+    <Grid className="pf-v6-u-ml-lg">
       <FieldArray name="clusterNetworks">
         {() => (
           <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.clusterNetworks?.map((_, index) => {
               const networkSuffix = getNetworkLabelSuffix(index, isDualStack);
               return (
-                <Grid hasGutter key={index}>
-                  <GridItem className={'network-field-group pf-v6-u-pb-md'}>
+                <Grid key={index} className="pf-v6-u-pb-md">
+                  <GridItem className={'network-field-group'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
@@ -85,7 +85,7 @@ const AdvancedNetworkFields = () => {
                       labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
                     />
                   </GridItem>
-                  <GridItem className={'network-field-group pf-v6-u-pb-md'}>
+                  <GridItem className={'network-field-group'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
@@ -123,7 +123,7 @@ const AdvancedNetworkFields = () => {
         {() => (
           <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.serviceNetworks?.map((_, index) => (
-              <GridItem key={index} className={'network-field-group pf-v6-u-pb-md'}>
+              <GridItem key={index} className={'network-field-group'}>
                 <OcmInputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={

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

@@ -79,6 +79,7 @@ export const AvailableSubnetsControl = ({
                       name={`machineNetworks.${index}.cidr`}
                       machineSubnets={machineSubnets}
                       isDisabled={isDisabled}
+                      data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
                     />
                   </StackItem>
                 );
@@ -89,6 +90,7 @@ export const AvailableSubnetsControl = ({
                   name={`machineNetworks.0.cidr`}
                   machineSubnets={IPv4Subnets}
                   isDisabled={isDisabled}
+                  data-testid={'subnets-dropdown-toggle-ipv4'}
                 />
               </StackItem>
             )}

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

@@ -153,9 +153,7 @@ const NetworkConfigurationForm: React.FC<{
             </Grid>
           </GridItem>
           <GridItem>
-            <Content>
-              <Content component="h2">Host inventory</Content>
-            </Content>
+            <Content component="h2">Host inventory</Content>
             <NetworkConfigurationTable cluster={cluster} />
           </GridItem>
         </Grid>

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

@@ -1,5 +1,11 @@
 import React from 'react';
-import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleProps,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
 
@@ -32,7 +38,12 @@ const noSubnetAvailableOption = {
   id: 'form-input-hostSubnet-field-option-no-subnet-available',
 };
 
-export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDropdownProps) => {
+export const SubnetsDropdown = ({
+  name,
+  machineSubnets,
+  isDisabled,
+  ...props
+}: SubnetsDropdownProps & MenuToggleProps) => {
   const [field, , { setValue }] = useField(name);
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
@@ -79,7 +90,7 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
       id={fieldId}
       className="pf-v6-u-w-100"
       style={{ minWidth: '100%' }}
-      data-testid="subnets-dropdown-toggle"
+      {...props}
     >
       {currentDisplayValue}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx

@@ -41,9 +41,7 @@ const HostSummary: React.FC<HostSummaryProps> = ({
       <StackItem data-testid={`collapsed-host-${hostIdx}`}>
         <Flex>
           <FlexItem>
-            <Content>
-              <Content component={ContentVariants.small}>{title}</Content>
-            </Content>
+            <Content component={ContentVariants.small}>{title}</Content>
           </FlexItem>
           {hasError && (
             <Label

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsConfirmationModal.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react';
-import { Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 
 import { useTranslation } from '../../../../../../common/hooks/use-translation-wrapper';
 
@@ -16,27 +24,25 @@ const BondDeleteModalModal = ({ isOpen, onConfirm, onCancel }: BondDeleteModalMo
   return (
     <Modal
       aria-label={t('ai:Remove bond dialog')}
-      title={t('ai:Remove bond?')}
       isOpen={isOpen}
       onClose={onCancel}
-      hasNoBodyWrapper
       id="remove-bond-modal"
       variant="medium"
-      titleIconVariant="warning"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Remove bond?')} titleIconVariant="warning" />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{t('ai:The bond associated with the host will be removed.')}</StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button onClick={onConfirm} variant={ButtonVariant.danger}>
           {t('ai:Remove bond')}
         </Button>
         <Button onClick={onCancel} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -150,9 +150,7 @@ export const FormViewHostsFields: React.FC<{ protocolType: StaticProtocolType }>
   const ExpandedHostComponent = getExpandedHostComponent(protocolType);
   return (
     <>
-      <Content>
-        <Content component={ContentVariants.h3}>Host specific configurations</Content>
-      </Content>
+      <Content component={ContentVariants.h3}>Host specific configurations</Content>
       <StaticIpHostsArray<FormViewHost>
         CollapsedHostComponent={CollapsedHostComponent}
         ExpandedHostComponent={ExpandedHostComponent}

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Content, ContentVariants, Alert, AlertVariant, Grid } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
 import { StaticIpInfo, StaticIpView } from '../data/dataTypes';
 import StaticIpViewRadioGroup from './StaticIpViewRadioGroup';
 import { getStaticIpInfo } from '../data/fromInfraEnv';
@@ -77,13 +84,13 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
   }
   return (
     <Grid hasGutter>
-      <Content>
+      <GridItem>
         <Content component={ContentVariants.h2}>Static network configurations</Content>
         <Content component={ContentVariants.small}>
           Network configuration can be done using either the form view or YAML view. Configurations
           done in this step are for discovering hosts.
         </Content>
-      </Content>
+      </GridItem>
 
       {clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' && (
         <StaticIpViewRadioGroup

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx

@@ -83,14 +83,12 @@ export const YamlViewFields = () => {
   const emptyHostData = getEmptyYamlHost();
   return (
     <Grid hasGutter>
-      <Content>
-        <Content component={ContentVariants.small}>
-          Upload, drag and drop, or copy and paste a YAML file that contains NMState into the editor
-          for network configurations. Each host also needs the MAC to interface name mapping.{' '}
-          <a href={NMSTATE_EXAMPLES_LINK} target="_blank" rel="noopener noreferrer">
-            Learn more about NMState <ExternalLinkAltIcon />
-          </a>
-        </Content>
+      <Content component={ContentVariants.small}>
+        Upload, drag and drop, or copy and paste a YAML file that contains NMState into the editor
+        for network configurations. Each host also needs the MAC to interface name mapping.{' '}
+        <a href={NMSTATE_EXAMPLES_LINK} target="_blank" rel="noopener noreferrer">
+          Learn more about NMState <ExternalLinkAltIcon />
+        </a>
       </Content>
 
       <StaticIpHostsArray<HostStaticNetworkConfig>