flightctl · celdrake · Jun 12, 2026
diff --git a/libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx b/libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx
@@ -1,5 +1,4 @@
 import {
-  Alert,
   Button,
   Content,
   FormGroup,
@@ -18,7 +17,7 @@ import { CatalogItem, CatalogItemVersion } from '@flightctl/types/alpha';
 import semver from 'semver';
 import ReactMarkdown from 'react-markdown';
 
-import FlightCtlForm from '../../../form/FlightCtlForm';
+import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import FormSelect from '../../../form/FormSelect';
 import { InstallSpecFormik } from '../../InstallWizard/types';
@@ -137,7 +136,7 @@ const UpdateStep = ({ currentVersion, catalogItem, isEdit }: UpdateStepProps) =>
                 <>
                   {values.version === currentVersion.version && (
                     <GridItem>
-                      <Alert isInline variant="info" title={t('No version update will be performed')} />
+                      <FlightCtlFormAlert variant="info" title={t('No version update will be performed')} />
                     </GridItem>
                   )}
                   <GridItem>
@@ -147,9 +146,9 @@ const UpdateStep = ({ currentVersion, catalogItem, isEdit }: UpdateStepProps) =>
               )}
               {updateVersion?.deprecation && (
                 <GridItem>
-                  <Alert isInline variant="warning" title={t('This version is deprecated')}>
+                  <FlightCtlFormAlert variant="warning" title={t('This version is deprecated')}>
                     {updateVersion.deprecation.message}
-                  </Alert>
+                  </FlightCtlFormAlert>
                 </GridItem>
               )}
             </Grid>

diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx
@@ -1,5 +1,5 @@
+import * as React from 'react';
 import {
-  Alert,
   FormGroup,
   Grid,
   GridItem,
@@ -14,15 +14,14 @@ import {
 import { RJSFValidationError } from '@rjsf/utils';
 import { FormikErrors, useFormikContext } from 'formik';
 import type * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
-import * as React from 'react';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
 import DynamicForm, { AssetSelection } from '../../../DynamicForm/DynamicForm';
 import YamlEditorBase from '../../../common/CodeEditor/YamlEditorBase';
 import TextField from '../../../form/TextField';
 import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import RadioField from '../../../form/RadioField';
-import FlightCtlForm from '../../../form/FlightCtlForm';
+import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import { DynamicFormConfigFormik, InstallAppFormik } from '../types';
 
 import './AppConfigStep.css';
@@ -99,9 +98,8 @@ export const DynamicAppForm = ({ schemaErrors, isEdit }: DynamicAppFormProps) =>
       </StackItem>
       {!values.configSchema && (
         <StackItem>
-          <Alert
+          <FlightCtlFormAlert
             variant="info"
-            isInline
             title={t('Form view is disabled for this application because the schema is not available')}
           />
         </StackItem>
@@ -110,9 +108,8 @@ export const DynamicAppForm = ({ schemaErrors, isEdit }: DynamicAppFormProps) =>
         {values.configSchema && values.configureVia === 'form' ? (
           <Stack hasGutter>
             <StackItem>
-              <Alert
+              <FlightCtlFormAlert
                 variant="info"
-                isInline
                 title={t(
                   'Note: Some fields may not be represented in this form view. Please select "YAML view" for full control.',
                 )}
@@ -159,15 +156,15 @@ export const DynamicAppForm = ({ schemaErrors, isEdit }: DynamicAppFormProps) =>
       </StackItem>
       {schemaErrors?.length ? (
         <StackItem>
-          <Alert variant="danger" title={t('Configuration is not valid')} isInline>
+          <FlightCtlFormAlert variant="danger" title={t('Configuration is not valid')}>
             <List>
               {schemaErrors.map((e, index) => (
                 <ListItem key={index}>
                   {e.property}: {e.message}
                 </ListItem>
               ))}
             </List>
-          </Alert>
+          </FlightCtlFormAlert>
         </StackItem>
       ) : null}
     </Stack>

diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx
@@ -1,5 +1,4 @@
 import {
-  Alert,
   Card,
   CardBody,
   CardTitle,
@@ -16,7 +15,7 @@ import * as React from 'react';
 import { CatalogItem, CatalogItemType } from '@flightctl/types/alpha';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
-import FlightCtlForm from '../../../form/FlightCtlForm';
+import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import { InstallAppFormik, InstallOsFormik } from '../types';
 import { OS_ITEM_LABEL_KEY } from '../../const';
 import { getFullContainerURI } from '../../utils';
@@ -56,66 +55,66 @@ const UpdateAlerts = ({ catalogItem }: UpdateAlertsProps) => {
     const numOfDevices = `${values.fleet?.status?.devicesSummary?.total || 0}`;
     if (!values.fleet?.spec.template.spec.os?.image) {
       return (
-        <Alert isInline variant="warning" title={t('Fleet update')}>
+        <FlightCtlFormAlert variant="warning" title={t('Fleet update')}>
           <Trans t={t}>
             This will deploy the OS <strong>{osImageName}</strong> for all <strong>({numOfDevices})</strong> devices in
             the <strong>{values.fleet?.metadata.name}</strong> fleet. Devices will download and apply the update
             according to the configured update policies.
           </Trans>
-        </Alert>
+        </FlightCtlFormAlert>
       );
     } else {
       if (isOsUpdate(catalogItem, values.version, values.fleet?.metadata.labels, values.fleet?.spec.template.spec)) {
         return (
-          <Alert isInline variant="info" title={t('Version update')}>
+          <FlightCtlFormAlert variant="info" title={t('Version update')}>
             <Trans t={t}>
               You are about to update OS <strong>{osImageName}</strong>. This will update the OS image for all{' '}
               <strong>({numOfDevices})</strong> devices in the <strong>{values.fleet?.metadata.name}</strong> fleet.
               Devices will download and apply the update according to the configured update policies.
             </Trans>
-          </Alert>
+          </FlightCtlFormAlert>
         );
       }
 
       return (
-        <Alert isInline variant="warning" title={t('Existing OS image detected')}>
+        <FlightCtlFormAlert variant="warning" title={t('Existing OS image detected')}>
           <Trans t={t}>
             You are about to replace OS with <strong>{osImageName}</strong>. This will update the OS image for all{' '}
             <strong>({numOfDevices})</strong> devices in the <strong>{values.fleet?.metadata.name}</strong> fleet.
             Devices will download and apply the update according to the configured update policies.
           </Trans>
-        </Alert>
+        </FlightCtlFormAlert>
       );
     }
   } else if (values.target === 'device') {
     if (!values.device?.spec?.os?.image) {
       return (
-        <Alert isInline variant="warning" title={t('Device update')}>
+        <FlightCtlFormAlert variant="warning" title={t('Device update')}>
           <Trans t={t}>
             This will deploy the OS <strong>{osImageName}</strong>. Device will download and apply the update according
             to the configured update policies.
           </Trans>
-        </Alert>
+        </FlightCtlFormAlert>
       );
     } else {
       if (isOsUpdate(catalogItem, values.version, values.device?.metadata.labels, values.device?.spec)) {
         return (
-          <Alert isInline variant="info" title={t('Version update')}>
+          <FlightCtlFormAlert variant="info" title={t('Version update')}>
             <Trans t={t}>
               You are about to update OS with <strong>{osImageName}</strong>. Device will download and apply the update
               according to the configured update policies.
             </Trans>
-          </Alert>
+          </FlightCtlFormAlert>
         );
       }
 
       return (
-        <Alert isInline variant="warning" title={t('Existing OS image detected')}>
+        <FlightCtlFormAlert variant="warning" title={t('Existing OS image detected')}>
           <Trans t={t}>
             You are about to replace OS with <strong>{osImageName}</strong>. Device will download and apply the update
             according to the configured update policies.
           </Trans>
-        </Alert>
+        </FlightCtlFormAlert>
       );
     }
   }
@@ -180,9 +179,9 @@ const ReviewStep = ({ error, catalogItem }: ReviewStepProps) => {
         </StackItem>
         {error && (
           <StackItem>
-            <Alert variant="danger" title={t('Failed to deploy')} isInline>
+            <FlightCtlFormAlert variant="danger" title={t('Failed to deploy')}>
               {error}
-            </Alert>
+            </FlightCtlFormAlert>
           </StackItem>
         )}
       </Stack>

diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx
@@ -1,6 +1,5 @@
 import { Device, Fleet } from '@flightctl/types';
 import {
-  Alert,
   Button,
   FormGroup,
   Grid,
@@ -29,7 +28,7 @@ import FleetRow from '../../../Fleet/FleetRow';
 import { useDevicesPaginated } from '../../../Device/DevicesPage/useDevices';
 import { getDeviceTableColumns } from '../../../Device/DevicesPage/EnrolledDevicesTable';
 import EnrolledDeviceTableRow from '../../../Device/DevicesPage/EnrolledDeviceTableRow';
-import FlightCtlForm from '../../../form/FlightCtlForm';
+import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import { InstallAppFormik, InstallOsFormik } from '../types';
 import FormSelect from '../../../form/FormSelect';
 import { getArtifactLabel, getFullArtifactURI } from '../../utils';
@@ -284,9 +283,9 @@ const NewDeviceTarget = ({ catalogItem }: NewDeviceTargetProps) => {
               </Button>
             </GridItem>
             <GridItem>
-              <Alert isInline variant="info" title={t('Learn more about provisioning devices')}>
+              <FlightCtlFormAlert variant="info" title={t('Learn more about provisioning devices')}>
                 <LearnMoreLink link={provisionDeviceLink} />
-              </Alert>
+              </FlightCtlFormAlert>
             </GridItem>
           </>
         )}

diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx
@@ -1,6 +1,5 @@
 import { CatalogItem, CatalogItemArtifactType, CatalogItemVersion } from '@flightctl/types/alpha';
 import {
-  Alert,
   Button,
   Content,
   EmptyState,
@@ -25,7 +24,7 @@ import ReactMarkdown from 'react-markdown';
 import { TFunction } from 'react-i18next';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
-import FlightCtlForm from '../../../form/FlightCtlForm';
+import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import RadioField from '../../../form/RadioField';
 import FormSelect from '../../../form/FormSelect';
 import { PermissionCheck, usePermissionsContext } from '../../../common/PermissionsContext';
@@ -112,9 +111,9 @@ export const InstallSpec = ({
       <Grid hasGutter style={{ alignItems: 'flex-end' }}>
         {catalogItem.spec.deprecation && (
           <GridItem>
-            <Alert isInline variant="warning" title={t('Deprecated')}>
+            <FlightCtlFormAlert variant="warning" title={t('Deprecated')}>
               {catalogItem.spec.deprecation.message}
-            </Alert>
+            </FlightCtlFormAlert>
           </GridItem>
         )}
         <GridItem span={4}>
@@ -148,9 +147,9 @@ export const InstallSpec = ({
         )}
         {currentVersion?.deprecation && (
           <GridItem>
-            <Alert isInline variant="warning" title={t('This version is deprecated')}>
+            <FlightCtlFormAlert variant="warning" title={t('This version is deprecated')}>
               {currentVersion.deprecation.message}
-            </Alert>
+            </FlightCtlFormAlert>
           </GridItem>
         )}
       </Grid>

diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import {
-  Alert,
   Button,
   Content,
   FormGroup,
@@ -25,6 +24,7 @@ import TextField from '../../../form/TextField';
 import FormSelect from '../../../form/FormSelect';
 import RadioField from '../../../form/RadioField';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import { appTypeOptions } from '../../../../utils/apps';
 import ApplicationImageForm from './ApplicationImageForm';
@@ -82,7 +82,7 @@ const ApplicationSection = ({
       <Grid hasGutter>
         {managedByCatalog && (
           <GridItem>
-            <Alert isInline variant="info" title={t('Application is managed by Software Catalog')} />
+            <FlightCtlFormAlert variant="info" title={t('Application is managed by Software Catalog')} />
           </GridItem>
         )}
         <FormGroup label={t('Application type')} isRequired>

diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx
@@ -1,16 +1,6 @@
 import * as React from 'react';
 
-import {
-  Alert,
-  Bullseye,
-  Button,
-  FormGroup,
-  FormSection,
-  Grid,
-  Spinner,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+import { Bullseye, Button, FormGroup, FormSection, Grid, Spinner, Split, SplitItem } from '@patternfly/react-core';
 import { FieldArray, useField, useFormikContext } from 'formik';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
@@ -29,6 +19,7 @@ import ConfigWithRepositoryTemplateForm from './ConfigWithRepositoryTemplateForm
 import ConfigK8sSecretTemplateForm from './ConfigK8sSecretTemplateForm';
 import ConfigInlineTemplateForm from './ConfigInlineTemplateForm';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import { RESOURCE, VERB } from '../../../../types/rbac';
 
 const useValidateOnMount = () => {
@@ -222,9 +213,9 @@ const ConfigurationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
 
   if (error) {
     return (
-      <Alert isInline variant="danger" title={t('Failed to load repositories')}>
+      <FlightCtlFormAlert variant="danger" title={t('Failed to load repositories')}>
         {getErrorMessage(error)}
-      </Alert>
+      </FlightCtlFormAlert>
     );
   } else if (isLoading) {
     return (

diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceTemplateStep.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceTemplateStep.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Alert, CodeBlock, CodeBlockCode, FormGroup, Spinner, Stack, StackItem } from '@patternfly/react-core';
+import { CodeBlock, CodeBlockCode, FormGroup, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import { FormikErrors, useFormikContext } from 'formik';
 import { Trans } from 'react-i18next';
 import { Repository } from '@flightctl/types';
@@ -8,7 +8,7 @@ import { useTranslation } from '../../../../hooks/useTranslation';
 import LabelWithHelperText, { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import LearnMoreLink from '../../../common/LearnMoreLink';
 import TextField from '../../../form/TextField';
-import FlightCtlForm from '../../../form/FlightCtlForm';
+import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm';
 import { DeviceSpecConfigFormValues } from '../../../../types/deviceSpec';
 import ConfigurationTemplates from './ConfigurationTemplates';
 import ApplicationsForm from './ApplicationTemplates';
@@ -91,13 +91,13 @@ const MicroShiftCheckbox = ({ isFleet, isReadOnly }: { isFleet: boolean; isReadO
       </FormGroup>
       {isDisabled && (
         <FormGroup>
-          <Alert variant="warning" title={t('Cannot register MicroShift devices')} isInline>
+          <FlightCtlFormAlert variant="warning" title={t('Cannot register MicroShift devices')}>
             {t(`{{ repository }} repository is missing. To re-create the repository`, {
               repository: `'${ACM_REPO_NAME}'`,
             })}
             {', '}
             <LearnMoreLink link={createAcmRepoLink} text={t('view documentation')} />
-          </Alert>
+          </FlightCtlFormAlert>
         </FormGroup>
       )}
     </>
@@ -123,7 +123,7 @@ const DeviceTemplateStep = ({
   return (
     <FlightCtlForm>
       {isFleet && !isReadOnly && (
-        <Alert isInline variant="info" title={t('Using template variables')} isExpandable>
+        <FlightCtlFormAlert variant="info" title={t('Using template variables')} isExpandable>
           <Trans t={t}>
             Add a variable by using <strong>{templateOption1}</strong> or <strong>{templateOption2}</strong> and it will
             be applied based on each device&rsquo;s details. For example, you could set the following value to apply
@@ -133,7 +133,7 @@ const DeviceTemplateStep = ({
             <CodeBlockCode>{exampleCode}</CodeBlockCode>
           </CodeBlock>
           <LearnMoreLink link={useTemplateVarsLink} />
-        </Alert>
+        </FlightCtlFormAlert>
       )}
       <FormGroupWithHelperText
         label={t('System image')}
@@ -146,7 +146,7 @@ const DeviceTemplateStep = ({
         <Stack hasGutter>
           {catalogOs && (
             <StackItem>
-              <Alert isInline variant="info" title={t('System image is managed by Software Catalog')} />
+              <FlightCtlFormAlert variant="info" title={t('System image is managed by Software Catalog')} />
             </StackItem>
           )}
           <StackItem>