diff --git a/libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx b/libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx index 7c782b574..7dd5a61bc 100644 --- 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 && ( - + )} @@ -147,9 +146,9 @@ const UpdateStep = ({ currentVersion, catalogItem, isEdit }: UpdateStepProps) => )} {updateVersion?.deprecation && ( - + {updateVersion.deprecation.message} - + )} diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx index 0bf4dfccd..bc3d6e297 100644 --- 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,7 +14,6 @@ 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'; @@ -22,7 +21,7 @@ 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) => {!values.configSchema && ( - @@ -110,9 +108,8 @@ export const DynamicAppForm = ({ schemaErrors, isEdit }: DynamicAppFormProps) => {values.configSchema && values.configureVia === 'form' ? ( - {schemaErrors?.length ? ( - + {schemaErrors.map((e, index) => ( @@ -167,7 +164,7 @@ export const DynamicAppForm = ({ schemaErrors, isEdit }: DynamicAppFormProps) => ))} - + ) : null} diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx index adb071a78..83797d03a 100644 --- 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 ( - + This will deploy the OS {osImageName} for all ({numOfDevices}) devices in the {values.fleet?.metadata.name} fleet. Devices will download and apply the update according to the configured update policies. - + ); } else { if (isOsUpdate(catalogItem, values.version, values.fleet?.metadata.labels, values.fleet?.spec.template.spec)) { return ( - + You are about to update OS {osImageName}. This will update the OS image for all{' '} ({numOfDevices}) devices in the {values.fleet?.metadata.name} fleet. Devices will download and apply the update according to the configured update policies. - + ); } return ( - + You are about to replace OS with {osImageName}. This will update the OS image for all{' '} ({numOfDevices}) devices in the {values.fleet?.metadata.name} fleet. Devices will download and apply the update according to the configured update policies. - + ); } } else if (values.target === 'device') { if (!values.device?.spec?.os?.image) { return ( - + This will deploy the OS {osImageName}. Device will download and apply the update according to the configured update policies. - + ); } else { if (isOsUpdate(catalogItem, values.version, values.device?.metadata.labels, values.device?.spec)) { return ( - + You are about to update OS with {osImageName}. Device will download and apply the update according to the configured update policies. - + ); } return ( - + You are about to replace OS with {osImageName}. Device will download and apply the update according to the configured update policies. - + ); } } @@ -180,9 +179,9 @@ const ReviewStep = ({ error, catalogItem }: ReviewStepProps) => { {error && ( - + {error} - + )} diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx index d3df4ea34..b743197f2 100644 --- 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) => { - + - + )} diff --git a/libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx b/libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx index baaee2832..1e92b4702 100644 --- 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 = ({ {catalogItem.spec.deprecation && ( - + {catalogItem.spec.deprecation.message} - + )} @@ -148,9 +147,9 @@ export const InstallSpec = ({ )} {currentVersion?.deprecation && ( - + {currentVersion.deprecation.message} - + )} diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx index b9037363a..41daffd13 100644 --- 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 = ({ {managedByCatalog && ( - + )} diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx index df8491a0d..6b22c915e 100644 --- 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 ( - + {getErrorMessage(error)} - + ); } 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 index ce0a967d9..d7e9896a0 100644 --- 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 {isDisabled && ( - + {t(`{{ repository }} repository is missing. To re-create the repository`, { repository: `'${ACM_REPO_NAME}'`, })} {', '} - + )} @@ -123,7 +123,7 @@ const DeviceTemplateStep = ({ return ( {isFleet && !isReadOnly && ( - + Add a variable by using {templateOption1} or {templateOption2} and it will be applied based on each device’s details. For example, you could set the following value to apply @@ -133,7 +133,7 @@ const DeviceTemplateStep = ({ {exampleCode} - + )} {catalogOs && ( - + )} diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx index f45581f7f..1e29bed93 100644 --- a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx +++ b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { Alert, Title } from '@patternfly/react-core'; +import { Title } from '@patternfly/react-core'; import { FormikErrors, useFormikContext } from 'formik'; import { useTranslation } from '../../../../hooks/useTranslation'; import UpdateStepUpdatePolicy from '../../../Fleet/CreateFleet/steps/UpdateStepUpdatePolicy'; -import FlightCtlForm from '../../../form/FlightCtlForm'; +import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm'; import { DeviceSpecConfigFormValues } from '../../../../types/deviceSpec'; import { FormGroupWithHelperText } from '../../../common/WithHelperText'; import CheckboxField from '../../../form/CheckboxField'; @@ -35,9 +35,9 @@ const UpdatePolicyStep = ({ isReadOnly }: { isReadOnly?: boolean }) => { ) : ( - + {t('The device will download and apply updates as soon as they are available.')} - + )} ); diff --git a/libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx b/libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx index 56f786355..8503edbad 100644 --- a/libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx +++ b/libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import { useField } from 'formik'; -import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core'; +import { Button, Spinner, Stack, StackItem } from '@patternfly/react-core'; import { RedoIcon } from '@patternfly/react-icons/dist/js/icons/redo-icon'; import debounce from 'lodash/debounce'; import { DeviceList } from '@flightctl/types'; import LabelsField from '../../../form/LabelsField'; +import { FlightCtlFormAlert } from '../../../form/FlightCtlForm'; import { getInvalidKubernetesLabels, hasUniqueLabelKeys } from '../../../form/validations'; import { useTranslation } from '../../../../hooks/useTranslation'; import { useFetch } from '../../../../hooks/useFetch'; @@ -74,7 +75,7 @@ const DeviceLabelSelector = () => { } else if (deviceCountError) { showHelperText = false; message = ( - + {deviceCountError} - + ); } else if (labels.length > 0) { showHelperText = false; message = ( - diff --git a/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx b/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx index f6896bb17..03cd681b2 100644 --- a/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx +++ b/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import { Alert, FormSection } from '@patternfly/react-core'; +import { FormSection } from '@patternfly/react-core'; import { FormikErrors, useFormikContext } from 'formik'; import { useTranslation } from '../../../../hooks/useTranslation'; import LabelWithHelperText from '../../../common/WithHelperText'; import { FleetFormValues } from '../../../../types/deviceSpec'; -import FlightCtlForm from '../../../form/FlightCtlForm'; +import FlightCtlForm, { FlightCtlFormAlert } from '../../../form/FlightCtlForm'; import UpdateStepRolloutPolicy from './UpdateStepRolloutPolicy'; import UpdateStepDisruptionBudget from './UpdateStepDisruptionBudget'; import UpdateStepUpdatePolicy from './UpdateStepUpdatePolicy'; @@ -73,9 +73,9 @@ const UpdatePolicyStep = ({ isReadOnly }: { isReadOnly: boolean }) => { /> ) : ( - + {t('All the devices that are part of this fleet will receive updates as soon as they are available.')} - + )} ); diff --git a/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx b/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx index 79141c717..edf7ef3ab 100644 --- a/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx +++ b/libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - Alert, Button, Flex, FlexItem, @@ -12,6 +11,7 @@ import { SplitItem, } from '@patternfly/react-core'; import { FieldArray, useField, useFormikContext } from 'formik'; +import { FlightCtlFormAlert } from '../../../form/FlightCtlForm'; import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons'; import { BatchForm, BatchLimitType, FleetFormValues } from '../../../../types/deviceSpec'; @@ -120,11 +120,11 @@ const UpdateStepRolloutPolicy = ({ isReadOnly }: { isReadOnly: boolean }) => { return ( <> - + {t('Batches will be applied from first to last.')}
{t('Devices that are not part of any batch will be updated last.')} - + { return ( - + {t( 'The agent is automatically included in this image. This ensures your devices are ready to be managed immediately after they are deployed.', )} - + { if (width < globalWidthBreakpoints.sm) { @@ -39,16 +49,22 @@ const useContainerWidth = () => { return [ref, width] as const; }; +// FlightCtlFormAlerts are displayed as inline by default, and are full width (via CSS styling) +export const FlightCtlFormAlert = ({ className, isInline, ...props }: AlertProps) => ( + +); + const FlightCtlForm = ({ className, children, isResponsive = true, }: React.PropsWithChildren<{ className?: string; isResponsive?: boolean }>) => { const [ref, width] = useContainerWidth(); + const formSpan = isResponsive ? widthToSpan(width) : 12; return ( -
- +
+