@flightctl/ui-components 1.0.2 → 1.1.0-rc4

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;
@@ -32,12 +32,15 @@ const InlineApplicationFileForm = ({ file, fileIndex, fileFieldName, isReadOnly
         <FormGroup label={t('File path on the device (relative)')} isRequired>
           <TextField name={`${fileFieldName}.path`} isDisabled={isReadOnly} />
         </FormGroup>
-        <UploadField
-          label={t('Content')}
-          name={`${fileFieldName}.content`}
-          maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES}
-          isDisabled={isReadOnly}
-        />
+
+        <FormGroup label={t('Content')}>
+          <UploadField
+            ariaLabel={t('Content')}
+            name={`${fileFieldName}.content`}
+            maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES}
+            isDisabled={isReadOnly}
+          />
+        </FormGroup>
 
         <FormGroup>
           <CheckboxField
@@ -52,72 +55,75 @@ 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;
   }
 
   return (
-    <FieldArray name={`applications.${index}.files`}>
-      {({ push, remove }) => (
-        <>
-          {app.files?.map((file, fileIndex) => {
-            const fieldName = `applications[${index}].files[${fileIndex}]`;
-            return (
-              <Split key={fileIndex} hasGutter>
-                <SplitItem isFilled>
-                  <InlineApplicationFileForm
-                    file={file}
-                    fileIndex={fileIndex}
-                    fileFieldName={fieldName}
-                    isReadOnly={isReadOnly}
-                  />
-                </SplitItem>
-                {!isReadOnly && app.files.length > 1 && (
-                  <SplitItem>
-                    <Button
-                      aria-label={t('Delete file')}
-                      variant="link"
-                      icon={<MinusCircleIcon />}
-                      iconPosition="start"
-                      onClick={() => remove(fileIndex)}
+    <Grid hasGutter>
+      <FieldArray name={`applications.${index}.files`}>
+        {({ push, remove }) => (
+          <>
+            {fileList.map((file, fileIndex) => {
+              const fieldName = `applications[${index}].files[${fileIndex}]`;
+              return (
+                <Split key={fileIndex} hasGutter>
+                  <SplitItem isFilled>
+                    <InlineApplicationFileForm
+                      file={file}
+                      fileIndex={fileIndex}
+                      fileFieldName={fieldName}
+                      isReadOnly={isReadOnly}
                     />
                   </SplitItem>
-                )}
-              </Split>
-            );
-          })}
+                  {!isReadOnly && fileList.length > 1 && (
+                    <SplitItem>
+                      <Button
+                        aria-label={t('Delete file')}
+                        variant="link"
+                        icon={<MinusCircleIcon />}
+                        iconPosition="start"
+                        onClick={() => remove(fileIndex)}
+                      />
+                    </SplitItem>
+                  )}
+                </Split>
+              );
+            })}
 
-          {!isReadOnly && (
-            <FormGroup>
-              <Button
-                variant="link"
-                icon={<PlusCircleIcon />}
-                iconPosition="start"
-                onClick={() => {
-                  push({
-                    path: '',
-                    content: '',
-                    base64: false,
-                  });
-                }}
-              >
-                {t('Add file')}
-              </Button>
-            </FormGroup>
-          )}
-        </>
-      )}
-    </FieldArray>
+            {!isReadOnly && (
+              <FormGroup>
+                <Button
+                  variant="link"
+                  icon={<PlusCircleIcon />}
+                  iconPosition="start"
+                  onClick={() => {
+                    push({
+                      path: '',
+                      content: '',
+                      base64: false,
+                    });
+                  }}
+                >
+                  {t('Add file')}
+                </Button>
+              </FormGroup>
+            )}
+          </>
+        )}
+      </FieldArray>
+    </Grid>
   );
 };
 

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useField } from 'formik';
+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_FLIGHTCTL_USER, RUN_AS_ROOT_USER } from '../../../../types/deviceSpec';
+
+type ApplicationIntegritySettingsProps = {
+  index: number;
+  isReadOnly?: boolean;
+};
+
+const ApplicationIntegritySettings = ({ index, isReadOnly }: ApplicationIntegritySettingsProps) => {
+  const { t } = useTranslation();
+  const appFieldName = `applications[${index}]`;
+  const [{ value: runAs }, , { setValue: setRunAs }] = useField<string | undefined>(`${appFieldName}.runAs`);
+  const isRootless = runAs !== RUN_AS_ROOT_USER;
+
+  return (
+    <FormSection title={t('Access & permissions')}>
+      <FormGroup>
+        <Switch
+          id={`${appFieldName}-system-integrity-switch`}
+          aria-label={t('System integrity protection')}
+          label={isRootless ? t('System integrity protection enabled') : t('System integrity protection disabled')}
+          isChecked={isRootless}
+          onChange={async (_, checked) => {
+            await setRunAs(checked ? RUN_AS_FLIGHTCTL_USER : RUN_AS_ROOT_USER);
+          }}
+          isDisabled={isReadOnly}
+        />
+        <DefaultHelperText
+          helperText={
+            <Content component="small">
+              {t(
+                'Prevents this workload from modifying critical host operating system files. We recommend keeping this enabled to maintain system integrity.',
+              )}
+            </Content>
+          }
+        />
+      </FormGroup>
+      {isRootless && (
+        <FormGroup label={t('Rootless user identity')} isRequired>
+          <TextField
+            aria-label={t('Rootless user identity')}
+            name={`${appFieldName}.runAs`}
+            value={runAs}
+            isDisabled
+            readOnly
+            helperText={t(
+              "The recommended user identity is '{{ runAsUser }}'. To specify a custom user identity, edit the application configuration via YAML or CLI.",
+              {
+                runAsUser: RUN_AS_FLIGHTCTL_USER,
+              },
+            )}
+          />
+        </FormGroup>
+      )}
+    </FormSection>
+  );
+};
+
+export default ApplicationIntegritySettings;

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

@@ -1,116 +1,72 @@
 import * as React from 'react';
 
-import { Button, FormGroup, FormSection, Grid, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Button,
+  Content,
+  FormGroup,
+  FormSection,
+  Grid,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+} 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';
-import { TFunction } from 'i18next';
 
 import { AppType } from '@flightctl/types';
-import {
-  AppForm,
-  AppSpecType,
-  DeviceSpecConfigFormValues,
-  isComposeImageAppForm,
-  isComposeInlineAppForm,
-  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';
 import ApplicationImageForm from './ApplicationImageForm';
 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';
 
-const appTypeOptions = (t: TFunction) => ({
-  [AppType.AppTypeContainer]: t('Single Container application'),
-  [AppType.AppTypeQuadlet]: t('Quadlet application'),
-  [AppType.AppTypeCompose]: t('Compose application'),
-});
-
 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 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 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;
+  // 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(() => {
-    if (!shouldResetApp) {
-      return;
-    }
-    // When switching appType to Container, initialize Container-specific fields
-    if (isContainer) {
-      setValue(
-        {
-          appType: AppType.AppTypeContainer,
-          specType: AppSpecType.OCI_IMAGE,
-          name: appName || '',
-          image: '',
-          variables: [],
-          ports: [],
-          volumes: [],
-        } as AppForm,
-        false,
-      );
-      return;
-    }
-
-    // When switching specType, the app becomes "incomplete" and we must add the required fields for the new type
-    if (specType === AppSpecType.INLINE) {
-      // Switching to inline - need files
-      setValue(
-        {
-          specType: AppSpecType.INLINE,
-          appType,
-          name: appName || '',
-          files: [{ path: '', content: '' }],
-          variables: [],
-          volumes: [],
-        } as AppForm,
-        false,
-      );
-    } else if (specType === AppSpecType.OCI_IMAGE) {
-      // Switching to image - need image field
-      setValue(
-        {
-          specType: AppSpecType.OCI_IMAGE,
-          appType,
-          name: appName || '',
-          image: '',
-          variables: [],
-          volumes: [],
-        } as AppForm,
-        false,
-      );
+    if (shouldResetApp) {
+      const initialApp = createInitialAppForm(appType, appName || '');
+      setValue(initialApp, false);
     }
-  }, [shouldResetApp, isContainer, specType, appType, appName, setValue]);
+  }, [shouldResetApp, appType, appName, setValue]);
 
   return (
     <ExpandableFormSection
       title={app.name || t('Application {{ appNum }}', { appNum: index + 1 })}
       fieldName={appFieldName}
-      description={app.name}
     >
       <Grid hasGutter>
         <FormGroup label={t('Application type')} isRequired>
@@ -123,7 +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 index={index} isReadOnly={isReadOnly} />
         ) : (
           <>
             <FormGroupWithHelperText
@@ -155,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>
@@ -164,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>
@@ -174,90 +132,34 @@ 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} />
-            )}
-            {(isQuadletInlineAppForm(app) || isComposeInlineAppForm(app)) && (
-              <ApplicationInlineForm 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} />
             )}
           </>
         )}
 
-        <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>
+        {(isQuadlet || isContainer) && <ApplicationIntegritySettings index={index} isReadOnly={isReadOnly} />}
+
+        {!isHelm && (
+          <>
+            <ApplicationVolumeForm
+              appFieldName={appFieldName}
+              isReadOnly={isReadOnly}
+              isSingleContainerApp={isContainer}
+            />
+            <ApplicationVariablesForm appFieldName={appFieldName} isReadOnly={isReadOnly} />
+          </>
+        )}
       </Grid>
     </ExpandableFormSection>
   );
@@ -276,11 +178,11 @@ const ApplicationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
       content={t('Define the application workloads that shall run on the device.')}
     >
       <>
-        <small>
+        <Content component="p">
           {t(
             'Configure containerized applications and services that will run on your fleet devices. You can deploy single containers, Quadlet applications for advanced container orchestration or inline applications with custom files.',
           )}
-        </small>
+        </Content>
         <FieldArray name="applications">
           {({ push, remove }) => (
             <>
@@ -313,15 +215,7 @@ const ApplicationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
                       icon={<PlusCircleIcon />}
                       iconPosition="start"
                       onClick={() => {
-                        push({
-                          appType: AppType.AppTypeContainer,
-                          specType: AppSpecType.OCI_IMAGE,
-                          name: '',
-                          image: '',
-                          variables: [],
-                          ports: [],
-                          volumes: [],
-                        });
+                        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.css

@@ -0,0 +1,6 @@
+/* 
+Workaround to prevent volume expandable sections (which are nested) to occupy vertical space when collapsed.
+*/
+.fctl-application-volume-form .pf-v6-c-expandable-section__content:where([hidden]) {
+  --pf-v6-c-expandable-section__content--MaxHeight: 0;
+}