@flightctl/ui-components 1.1.0-rc1 → 1.1.0-rc2

package/src/components/Device/EditDeviceWizard/steps/ApplicationContainerForm.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useField } from 'formik';
+import { useField, useFormikContext } from 'formik';
 import { Button, FormGroup, Grid, Label, LabelGroup, Split, SplitItem, TextInput } from '@patternfly/react-core';
 import { ArrowRightIcon } from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 
@@ -9,22 +9,15 @@ import ErrorHelperText from '../../../form/FieldHelperText';
 import { isDuplicatePortMapping, isValidPortMapping, validatePortNumber } from '../../../form/validations';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { PortMapping, SingleContainerAppForm } from '../../../../types/deviceSpec';
-import ApplicationIntegritySettings from './ApplicationIntegritySettings';
 
 import './ApplicationContainerForm.css';
 
-const ApplicationContainerForm = ({
-  app,
-  index,
-  isReadOnly,
-}: {
-  app: SingleContainerAppForm;
-  index: number;
-  isReadOnly?: boolean;
-}) => {
+const ApplicationContainerForm = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
   const appFieldName = `applications[${index}]`;
-  const [{ value: ports }, , { setValue: setPorts, setTouched }] = useField<PortMapping[]>(`${appFieldName}.ports`);
+  const [{ value: app }] = useField<SingleContainerAppForm>(`${appFieldName}`);
+  const { setFieldValue, setFieldTouched } = useFormikContext();
+  const ports = React.useMemo(() => app.ports || [], [app.ports]);
 
   const [hostPort, setHostPort] = React.useState('');
   const [containerPort, setContainerPort] = React.useState('');
@@ -33,7 +26,7 @@ const ApplicationContainerForm = ({
   const [editingPortIndex, setEditingPortIndex] = React.useState<number | null>(null);
   const [editingPortError, setEditingPortError] = React.useState<string | undefined>(undefined);
 
-  const canAddPorts = !editingPortError && isValidPortMapping(hostPort, containerPort, ports || []) && !isReadOnly;
+  const canAddPorts = !editingPortError && isValidPortMapping(hostPort, containerPort, ports) && !isReadOnly;
 
   const validatePort = (port: string): string | undefined => {
     const error = validatePortNumber(port, t);
@@ -41,7 +34,7 @@ const ApplicationContainerForm = ({
       return error;
     }
     // Check for duplicate if both ports match the number pattern
-    if (isDuplicatePortMapping(port, containerPort, ports || [])) {
+    if (isDuplicatePortMapping(port, containerPort, ports)) {
       return t('This port mapping already exists');
     }
     return undefined;
@@ -51,13 +44,13 @@ const ApplicationContainerForm = ({
   const containerPortError = containerPortTouched ? validatePort(containerPort) : undefined;
 
   const updatePorts = async (newPorts: PortMapping[]) => {
-    await setPorts(newPorts, true);
-    setTouched(true);
+    await setFieldValue(`${appFieldName}.ports`, newPorts, true);
+    setFieldTouched(`${appFieldName}.ports`, true);
   };
 
   const onAddPort = () => {
-    if (isValidPortMapping(hostPort, containerPort, ports || [])) {
-      updatePorts([...(ports || []), { hostPort, containerPort }]);
+    if (isValidPortMapping(hostPort, containerPort, ports)) {
+      updatePorts([...ports, { hostPort, containerPort }]);
       setHostPort('');
       setContainerPort('');
       setHostPortTouched(false);
@@ -68,7 +61,7 @@ const ApplicationContainerForm = ({
   };
 
   const onDeletePort = async (index: number) => {
-    const newPorts = [...(ports || [])];
+    const newPorts = [...ports];
     newPorts.splice(index, 1);
     await updatePorts(newPorts);
     // Clear error state if the deleted port was being edited
@@ -107,7 +100,7 @@ const ApplicationContainerForm = ({
     }
 
     // Check for duplicates, excluding the current port being edited
-    const otherPorts = excludeIndex !== undefined ? (ports || []).filter((_, i) => i !== excludeIndex) : ports || [];
+    const otherPorts = excludeIndex !== undefined ? ports.filter((_, i) => i !== excludeIndex) : ports;
     if (isDuplicatePortMapping(hostPortValue, containerPortValue, otherPorts)) {
       return t('This port mapping already exists');
     }
@@ -127,7 +120,7 @@ const ApplicationContainerForm = ({
       return;
     }
 
-    const newPorts = [...(ports || [])];
+    const newPorts = [...ports];
     newPorts[index] = { hostPort: newHostPort || '', containerPort: newContainerPort || '' };
     await updatePorts(newPorts);
 
@@ -146,7 +139,7 @@ const ApplicationContainerForm = ({
 
   // Clear error state if the editing index becomes invalid (e.g., port was deleted externally)
   React.useEffect(() => {
-    if (editingPortIndex !== null && (!ports || editingPortIndex >= ports.length)) {
+    if (editingPortIndex !== null && editingPortIndex >= ports.length) {
       setEditingPortIndex(null);
       setEditingPortError(undefined);
     }
@@ -164,7 +157,6 @@ const ApplicationContainerForm = ({
       <FormGroupWithHelperText
         label={t('Application name')}
         content={t('If not specified, the image name will be used. Application name must be unique.')}
-        isRequired
       >
         <TextField aria-label={t('Application name')} name={`${appFieldName}.name`} isDisabled={isReadOnly} />
       </FormGroupWithHelperText>
@@ -172,7 +164,6 @@ const ApplicationContainerForm = ({
         <TextField
           aria-label={t('Image')}
           name={`${appFieldName}.image`}
-          value={app.image || ''}
           isDisabled={isReadOnly}
           helperText={t('Provide a valid image reference')}
         />
@@ -271,8 +262,8 @@ const ApplicationContainerForm = ({
           >
             <TextField
               aria-label={t('CPU limit')}
-              name={`${appFieldName}.limits.cpu`}
-              value={app.limits?.cpu || ''}
+              name={`${appFieldName}.cpuLimit`}
+              value={app.cpuLimit || ''}
               placeholder={t('Enter numeric value')}
               isDisabled={isReadOnly}
               helperText={t('Provide a valid CPU value (e.g., "0.4" or "2").')}
@@ -286,8 +277,8 @@ const ApplicationContainerForm = ({
           >
             <TextField
               aria-label={t('Memory limit')}
-              name={`${appFieldName}.limits.memory`}
-              value={app.limits?.memory || ''}
+              name={`${appFieldName}.memoryLimit`}
+              value={app.memoryLimit || ''}
               placeholder={t('Enter numeric value with optional unit')}
               isDisabled={isReadOnly}
               helperText={t('Provide a valid memory value (e.g., "512", "512m", "2g", "1024k").')}
@@ -295,7 +286,6 @@ const ApplicationContainerForm = ({
           </FormGroupWithHelperText>
         </Grid>
       </FormGroup>
-      <ApplicationIntegritySettings index={index} isReadOnly={isReadOnly} />
     </Grid>
   );
 };

package/src/components/Device/EditDeviceWizard/steps/ApplicationHelmForm.tsx

@@ -8,20 +8,13 @@ import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import TextField from '../../../form/TextField';
 import UploadField from '../../../form/UploadField';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { AppSpecType, HelmImageAppForm } from '../../../../types/deviceSpec';
+import { AppSpecType, HelmAppForm } from '../../../../types/deviceSpec';
 
-const ApplicationHelmForm = ({
-  app,
-  index,
-  isReadOnly,
-}: {
-  app: HelmImageAppForm;
-  index: number;
-  isReadOnly?: boolean;
-}) => {
+const ApplicationHelmForm = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
   const appFieldName = `applications[${index}]`;
-  const [{ value: valuesFiles }] = useField<Array<string>>(`${appFieldName}.valuesFiles`);
+  const [{ value: app }] = useField<HelmAppForm>(`${appFieldName}`);
+  const valuesFiles = app.valuesFiles || [];
   const canAddValuesFile = valuesFiles && valuesFiles.every((file) => file && file.trim() !== '');
 
   return (
@@ -48,7 +41,6 @@ const ApplicationHelmForm = ({
         <TextField
           aria-label={t('Image')}
           name={`${appFieldName}.image`}
-          value={app.image || ''}
           isDisabled={isReadOnly}
           helperText={t('Provide a valid image reference')}
         />

package/src/components/Device/EditDeviceWizard/steps/ApplicationImageForm.tsx

@@ -6,17 +6,8 @@ import TextField from '../../../form/TextField';
 import LearnMoreLink from '../../../common/LearnMoreLink';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { useAppLinks } from '../../../../hooks/useAppLinks';
-import { ComposeImageAppForm, QuadletImageAppForm } from '../../../../types/deviceSpec';
 
-const ApplicationImageForm = ({
-  app,
-  index,
-  isReadOnly,
-}: {
-  app: QuadletImageAppForm | ComposeImageAppForm;
-  index: number;
-  isReadOnly?: boolean;
-}) => {
+const ApplicationImageForm = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
   const createAppLink = useAppLinks('createApp');
 
@@ -32,12 +23,7 @@ const ApplicationImageForm = ({
         }
         isRequired
       >
-        <TextField
-          aria-label={t('Image')}
-          name={`applications.${index}.image`}
-          value={app.image || ''}
-          isDisabled={isReadOnly}
-        />
+        <TextField aria-label={t('Image')} name={`applications.${index}.image`} isDisabled={isReadOnly} />
       </FormGroupWithHelperText>
     </Grid>
   );

package/src/components/Device/EditDeviceWizard/steps/ApplicationInlineForm.tsx

@@ -9,12 +9,12 @@ import CheckboxField from '../../../form/CheckboxField';
 import UploadField from '../../../form/UploadField';
 import TextField from '../../../form/TextField';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
-import { ComposeInlineAppForm, QuadletInlineAppForm } from '../../../../types/deviceSpec';
+import { InlineFileForm } from '../../../../types/deviceSpec';
 
 const MAX_INLINE_FILE_SIZE_BYTES = 1024 * 1024;
 
 type InlineApplicationFileFormProps = {
-  file: (QuadletInlineAppForm | ComposeInlineAppForm)['files'][0];
+  file: InlineFileForm;
   fileFieldName: string;
   fileIndex: number;
   isReadOnly?: boolean;
@@ -55,17 +55,18 @@ const InlineApplicationFileForm = ({ file, fileIndex, fileFieldName, isReadOnly
 };
 
 const ApplicationInlineForm = ({
-  app,
+  files,
   index,
   isReadOnly,
 }: {
-  app: QuadletInlineAppForm | ComposeInlineAppForm;
+  files: InlineFileForm[];
   index: number;
   isReadOnly?: boolean;
 }) => {
   const { t } = useTranslation();
 
-  if (isReadOnly && !app.files?.length) {
+  const fileList = files || [];
+  if (isReadOnly && fileList.length === 0) {
     return null;
   }
 
@@ -74,7 +75,7 @@ const ApplicationInlineForm = ({
       <FieldArray name={`applications.${index}.files`}>
         {({ push, remove }) => (
           <>
-            {app.files?.map((file, fileIndex) => {
+            {fileList.map((file, fileIndex) => {
               const fieldName = `applications[${index}].files[${fileIndex}]`;
               return (
                 <Split key={fileIndex} hasGutter>
@@ -86,7 +87,7 @@ const ApplicationInlineForm = ({
                       isReadOnly={isReadOnly}
                     />
                   </SplitItem>
-                  {!isReadOnly && app.files.length > 1 && (
+                  {!isReadOnly && fileList.length > 1 && (
                     <SplitItem>
                       <Button
                         aria-label={t('Delete file')}

package/src/components/Device/EditDeviceWizard/steps/ApplicationIntegritySettings.tsx

@@ -5,7 +5,7 @@ import { Content, FormGroup, FormSection, Switch } from '@patternfly/react-core'
 import { useTranslation } from '../../../../hooks/useTranslation';
 import TextField from '../../../form/TextField';
 import { DefaultHelperText } from '../../../form/FieldHelperText';
-import { RUN_AS_DEFAULT_USER, RUN_AS_ROOT_USER } from '../../../../types/deviceSpec';
+import { RUN_AS_FLIGHTCTL_USER, RUN_AS_ROOT_USER } from '../../../../types/deviceSpec';
 
 type ApplicationIntegritySettingsProps = {
   index: number;
@@ -27,7 +27,7 @@ const ApplicationIntegritySettings = ({ index, isReadOnly }: ApplicationIntegrit
           label={isRootless ? t('System integrity protection enabled') : t('System integrity protection disabled')}
           isChecked={isRootless}
           onChange={async (_, checked) => {
-            await setRunAs(checked ? RUN_AS_DEFAULT_USER : RUN_AS_ROOT_USER);
+            await setRunAs(checked ? RUN_AS_FLIGHTCTL_USER : RUN_AS_ROOT_USER);
           }}
           isDisabled={isReadOnly}
         />
@@ -46,13 +46,13 @@ const ApplicationIntegritySettings = ({ index, isReadOnly }: ApplicationIntegrit
           <TextField
             aria-label={t('Rootless user identity')}
             name={`${appFieldName}.runAs`}
-            value={runAs || RUN_AS_DEFAULT_USER}
+            value={runAs}
             isDisabled
             readOnly
             helperText={t(
-              "By default, workloads run as the '{{ runAsUser }}' user. To specify a custom user identity, edit the application configuration via YAML or CLI.",
+              "The recommended user identity is '{{ runAsUser }}'. To specify a custom user identity, edit the application configuration via YAML or CLI.",
               {
-                runAsUser: RUN_AS_DEFAULT_USER,
+                runAsUser: RUN_AS_FLIGHTCTL_USER,
               },
             )}
           />

package/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx

@@ -16,23 +16,12 @@ import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-cir
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 
 import { AppType } from '@flightctl/types';
-import {
-  AppForm,
-  AppSpecType,
-  DeviceSpecConfigFormValues,
-  isComposeImageAppForm,
-  isComposeInlineAppForm,
-  isHelmImageAppForm,
-  isQuadletImageAppForm,
-  isQuadletInlineAppForm,
-  isSingleContainerAppForm,
-} from '../../../../types/deviceSpec';
+import { AppForm, AppSpecType, DeviceSpecConfigFormValues } from '../../../../types/deviceSpec';
 import { createInitialAppForm } from '../deviceSpecUtils';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import TextField from '../../../form/TextField';
 import FormSelect from '../../../form/FormSelect';
 import RadioField from '../../../form/RadioField';
-import ErrorHelperText from '../../../form/FieldHelperText';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
 import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import { appTypeOptions } from '../../../../utils/apps';
@@ -41,6 +30,7 @@ import ApplicationInlineForm from './ApplicationInlineForm';
 import ApplicationContainerForm from './ApplicationContainerForm';
 import ApplicationHelmForm from './ApplicationHelmForm';
 import ApplicationVolumeForm from './ApplicationVolumeForm';
+import ApplicationVariablesForm from './ApplicationVariablesForm';
 import ApplicationIntegritySettings from './ApplicationIntegritySettings';
 
 import './ApplicationsForm.css';
@@ -48,31 +38,30 @@ import './ApplicationsForm.css';
 const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
   const appFieldName = `applications[${index}]`;
-  const [{ value: app }, { error }, { setValue }] = useField<AppForm>(appFieldName);
+  const [{ value: app }, , { setValue }] = useField<AppForm>(appFieldName);
   const { appType, specType, name: appName } = app;
 
-  const isContainer = isSingleContainerAppForm(app);
-  const isHelm = isHelmImageAppForm(app);
-  const isQuadlet = isQuadletImageAppForm(app) || isQuadletInlineAppForm(app);
-  const isImageIncomplete = !isContainer && specType === AppSpecType.OCI_IMAGE && !('image' in app);
-  const isInlineIncomplete = !isContainer && specType === AppSpecType.INLINE && !('files' in app);
-  const isContainerIncomplete = isContainer && (!('ports' in app) || !('volumes' in app));
-  const isHelmIncomplete = isHelm && !('valuesFiles' in app);
+  const isContainer = app.appType === AppType.AppTypeContainer;
+  const isHelm = app.appType === AppType.AppTypeHelm;
+  const isQuadlet = app.appType === AppType.AppTypeQuadlet;
+  const isCompose = app.appType === AppType.AppTypeCompose;
 
-  const shouldResetApp = isInlineIncomplete || isImageIncomplete || isContainerIncomplete || isHelmIncomplete;
+  // Each AppForm type has all data structures it needs initialized with safe defaults (eg. empty arrays, etc).
+  // However, when the user switches to a type that doesn't have those fields, we must reset the app to define the missing fields.
+  const isContainerIncomplete = isContainer && !('ports' in app);
+  const isHelmIncomplete = isHelm && !('valuesFiles' in app);
+  const isQuadletComposeIncomplete = (isQuadlet || isCompose) && !('volumes' in app);
 
-  // @ts-expect-error Formik error object includes "variables"
-  const appVarsError = typeof error?.variables === 'string' ? (error.variables as string) : undefined; // eslint-disable @typescript-eslint/no-unsafe-assignment
+  const shouldResetApp = isContainerIncomplete || isHelmIncomplete || isQuadletComposeIncomplete;
 
   const appTypesOptions = appTypeOptions(t);
 
   React.useEffect(() => {
-    // When switching types we must ensure all mandatory fields are initialized for the new type
     if (shouldResetApp) {
-      const app = createInitialAppForm(appType, specType, appName || '');
-      setValue(app, false);
+      const initialApp = createInitialAppForm(appType, appName || '');
+      setValue(initialApp, false);
     }
-  }, [shouldResetApp, specType, appType, appName, setValue]);
+  }, [shouldResetApp, appType, appName, setValue]);
 
   return (
     <ExpandableFormSection
@@ -90,9 +79,9 @@ const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?:
         </FormGroup>
 
         {isContainer ? (
-          <ApplicationContainerForm app={app} index={index} isReadOnly={isReadOnly} />
+          <ApplicationContainerForm index={index} isReadOnly={isReadOnly} />
         ) : isHelm ? (
-          <ApplicationHelmForm app={app} index={index} isReadOnly={isReadOnly} />
+          <ApplicationHelmForm index={index} isReadOnly={isReadOnly} />
         ) : (
           <>
             <FormGroupWithHelperText
@@ -124,8 +113,8 @@ const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?:
                     id={`${appFieldName}-spec-type-image`}
                     name={`${appFieldName}.specType`}
                     label={t('OCI reference URL')}
-                    checkedValue={AppSpecType.OCI_IMAGE}
                     isDisabled={isReadOnly}
+                    checkedValue={AppSpecType.OCI_IMAGE}
                   />
                 </SplitItem>
                 <SplitItem>
@@ -133,8 +122,8 @@ const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?:
                     id={`${appFieldName}-spec-type-inline`}
                     name={`${appFieldName}.specType`}
                     label={t('Inline')}
-                    checkedValue={AppSpecType.INLINE}
                     isDisabled={isReadOnly}
+                    checkedValue={AppSpecType.INLINE}
                   />
                 </SplitItem>{' '}
               </Split>
@@ -143,93 +132,32 @@ const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?:
             <FormGroupWithHelperText
               label={t('Application name')}
               content={
-                app.specType === AppSpecType.INLINE
+                specType === AppSpecType.INLINE
                   ? t('The unique identifier for this application.')
                   : t('If not specified, the image name will be used. Application name must be unique.')
               }
-              isRequired={app.specType === AppSpecType.INLINE}
+              isRequired={specType === AppSpecType.INLINE}
             >
               <TextField aria-label={t('Application name')} name={`${appFieldName}.name`} isDisabled={isReadOnly} />
             </FormGroupWithHelperText>
 
-            {(isQuadletImageAppForm(app) || isComposeImageAppForm(app)) && (
-              <ApplicationImageForm app={app} index={index} isReadOnly={isReadOnly} />
+            {specType === AppSpecType.OCI_IMAGE && <ApplicationImageForm index={index} isReadOnly={isReadOnly} />}
+            {specType === AppSpecType.INLINE && (
+              <ApplicationInlineForm files={app.files || []} index={index} isReadOnly={isReadOnly} />
             )}
-            {(isQuadletInlineAppForm(app) || isComposeInlineAppForm(app)) && (
-              <ApplicationInlineForm app={app} index={index} isReadOnly={isReadOnly} />
-            )}
-            {isQuadlet && <ApplicationIntegritySettings index={index} isReadOnly={isReadOnly} />}
           </>
         )}
 
+        {(isQuadlet || isContainer) && <ApplicationIntegritySettings index={index} isReadOnly={isReadOnly} />}
+
         {!isHelm && (
           <>
             <ApplicationVolumeForm
               appFieldName={appFieldName}
-              volumes={app.volumes || []}
               isReadOnly={isReadOnly}
               isSingleContainerApp={isContainer}
             />
-            <FieldArray name={`${appFieldName}.variables`}>
-              {({ push, remove }) => (
-                <>
-                  {app.variables?.map((variable, varIndex) => (
-                    <Split hasGutter key={varIndex}>
-                      <SplitItem className="fctl-application-template__variable-name">
-                        <FormGroup label={t('Variable {{ number }}', { number: varIndex + 1 })} />
-                      </SplitItem>
-                      <SplitItem>
-                        <FormGroup label={t('Name')} isRequired>
-                          <TextField
-                            aria-label={t('Name')}
-                            name={`${appFieldName}.variables.${varIndex}.name`}
-                            value={variable.name}
-                            isDisabled={isReadOnly}
-                          />
-                        </FormGroup>
-                      </SplitItem>
-                      <SplitItem isFilled>
-                        <FormGroup label={t('Value')} isRequired>
-                          <TextField
-                            aria-label={t('Value')}
-                            name={`${appFieldName}.variables.${varIndex}.value`}
-                            value={variable.value}
-                            isDisabled={isReadOnly}
-                          />
-                        </FormGroup>
-                      </SplitItem>
-                      {!isReadOnly && (
-                        <SplitItem>
-                          <Button
-                            aria-label={t('Delete variable')}
-                            variant="link"
-                            icon={<MinusCircleIcon />}
-                            iconPosition="end"
-                            onClick={() => remove(varIndex)}
-                          />
-                        </SplitItem>
-                      )}
-                    </Split>
-                  ))}
-                  <ErrorHelperText error={appVarsError} />
-                  {!isReadOnly && (
-                    <FormGroup>
-                      <Button
-                        variant="link"
-                        style={{ paddingInline: 0 }}
-                        icon={<PlusCircleIcon />}
-                        iconPosition="start"
-                        onClick={() => {
-                          push({ name: '', value: '' });
-                        }}
-                      >
-                        {t('Add an application variable')}
-                      </Button>
-                    </FormGroup>
-                  )}
-                </>
-              )}
-            </FieldArray>
+            <ApplicationVariablesForm appFieldName={appFieldName} isReadOnly={isReadOnly} />
           </>
         )}
       </Grid>
@@ -287,7 +215,7 @@ const ApplicationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
                       icon={<PlusCircleIcon />}
                       iconPosition="start"
                       onClick={() => {
-                        push(createInitialAppForm(AppType.AppTypeContainer, AppSpecType.OCI_IMAGE));
+                        push(createInitialAppForm(AppType.AppTypeContainer));
                       }}
                     >
                       {t('Add application')}

package/src/components/Device/EditDeviceWizard/steps/ApplicationVariablesForm.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { FieldArray, useField } from 'formik';
+import { Button, FormGroup, FormSection, Grid, Split, SplitItem } from '@patternfly/react-core';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+
+import { VariablesForm } from '../../../../types/deviceSpec';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import TextField from '../../../form/TextField';
+import ErrorHelperText from '../../../form/FieldHelperText';
+
+type ApplicationVariablesFormProps = {
+  appFieldName: string;
+  isReadOnly?: boolean;
+};
+
+const ApplicationVariablesForm = ({ appFieldName, isReadOnly }: ApplicationVariablesFormProps) => {
+  const { t } = useTranslation();
+  const [{ value: variables = [] }, { error }] = useField<VariablesForm>(`${appFieldName}.variables`);
+
+  // @ts-expect-error Formik error object includes "variables"
+  const appVarsError = typeof error?.variables === 'string' ? (error.variables as string) : undefined;
+
+  return (
+    <FormGroup label={t('Environment variables')} className="fctl-application-variables-form">
+      <FieldArray name={`${appFieldName}.variables`}>
+        {({ push, remove }) => (
+          <>
+            {variables.map((_variable, variableIndex) => {
+              const variableFieldName = `${appFieldName}.variables[${variableIndex}]`;
+              return (
+                <FormSection key={variableIndex}>
+                  <Split hasGutter>
+                    <SplitItem isFilled>
+                      <Grid hasGutter>
+                        <FormGroup label={t('Name')} isRequired>
+                          <TextField
+                            name={`${variableFieldName}.name`}
+                            aria-label={t('Variable name')}
+                            isDisabled={isReadOnly}
+                          />
+                        </FormGroup>
+                        <FormGroup label={t('Value')} isRequired>
+                          <TextField
+                            name={`${variableFieldName}.value`}
+                            aria-label={t('Variable value')}
+                            isDisabled={isReadOnly}
+                          />
+                        </FormGroup>
+                      </Grid>
+                    </SplitItem>
+                    {!isReadOnly && (
+                      <SplitItem>
+                        <Button
+                          aria-label={t('Delete variable')}
+                          variant="link"
+                          icon={<MinusCircleIcon />}
+                          iconPosition="start"
+                          onClick={() => remove(variableIndex)}
+                        />
+                      </SplitItem>
+                    )}
+                  </Split>
+                </FormSection>
+              );
+            })}
+            <ErrorHelperText error={appVarsError} />
+            {!isReadOnly && (
+              <FormGroup>
+                <Button
+                  variant="link"
+                  icon={<PlusCircleIcon />}
+                  iconPosition="start"
+                  onClick={() => push({ name: '', value: '' })}
+                >
+                  {t('Add variable')}
+                </Button>
+              </FormGroup>
+            )}
+          </>
+        )}
+      </FieldArray>
+    </FormGroup>
+  );
+};
+
+export default ApplicationVariablesForm;

package/src/components/Device/EditDeviceWizard/steps/ApplicationVolumeForm.tsx

@@ -18,7 +18,6 @@ import './ApplicationVolumeForm.css';
 
 type ApplicationVolumeFormProps = {
   appFieldName: string;
-  volumes: VolumeFormType[];
   isReadOnly?: boolean;
   isSingleContainerApp?: boolean;
 };
@@ -31,16 +30,15 @@ const getPullPolicyOptions = (t: TFunction) => ({
 
 const ApplicationVolumeForm = ({
   appFieldName,
-  volumes,
   isReadOnly,
   isSingleContainerApp = false,
 }: ApplicationVolumeFormProps) => {
   const { t } = useTranslation();
-  const [, { error }] = useField<VolumeFormType[]>(`${appFieldName}.volumes`);
-
   const pullPolicyOptions = React.useMemo(() => getPullPolicyOptions(t), [t]);
 
+  const [{ value: volumes = [] }, { error }] = useField<VolumeFormType[]>(`${appFieldName}.volumes`);
   const volumesError = typeof error === 'string' ? error : undefined;
+
   return (
     <FormGroup label={t('Volumes')} className="fctl-application-volume-form">
       <FieldArray name={`${appFieldName}.volumes`}>
@@ -126,15 +124,12 @@ const ApplicationVolumeForm = ({
                   icon={<PlusCircleIcon />}
                   iconPosition="start"
                   onClick={() => {
-                    const emptyVolume: VolumeFormType = {
+                    push({
                       name: '',
                       imageRef: '',
                       imagePullPolicy: ImagePullPolicy.PullIfNotPresent,
-                    };
-                    if (isSingleContainerApp) {
-                      emptyVolume.mountPath = '';
-                    }
-                    push(emptyVolume);
+                      mountPath: '',
+                    });
                   }}
                 >
                   {t('Add volume')}