@flightctl/ui-components 0.5.1 → 0.6.0-rc1

package/src/components/Device/EditDeviceWizard/deviceSpecUtils.ts

@@ -1,18 +1,27 @@
 import {
+  AppType,
+  // eslint-disable-next-line no-restricted-imports
+  ApplicationProviderSpec,
   ConfigProviderSpec,
   DeviceSpec,
+  EncodingType,
   FileSpec,
   GitConfigProviderSpec,
   HttpConfigProviderSpec,
+  InlineApplicationProviderSpec,
   InlineConfigProviderSpec,
   KubernetesSecretProviderSpec,
   PatchRequest,
 } from '@flightctl/types';
 import {
+  AppForm,
+  AppSpecType,
   ConfigSourceProvider,
   ConfigType,
   GitConfigTemplate,
   HttpConfigTemplate,
+  ImageAppForm,
+  InlineAppForm,
   InlineConfigTemplate,
   KubeSecretTemplate,
   SpecConfigTemplate,
@@ -20,11 +29,13 @@ import {
   isGitProviderSpec,
   isHttpConfigTemplate,
   isHttpProviderSpec,
+  isImageAppForm,
+  isImageAppProvider,
   isInlineProviderSpec,
   isKubeProviderSpec,
   isKubeSecretTemplate,
 } from '../../../types/deviceSpec';
-import { ApplicationFormSpec } from './types';
+import { ApplicationProviderSpecFixed, InlineApplicationFileFixed } from '../../../types/extraTypes';
 
 const DEFAULT_INLINE_FILE_MODE = 420; // In Octal: 0644
 const DEFAULT_INLINE_FILE_USER = 'root';
@@ -116,11 +127,7 @@ const isSameInlineConf = (a: InlineConfigProviderSpec, b: InlineConfigProviderSp
         isSameInlineConfigValue<string>(aInline.user, bInline.user, DEFAULT_INLINE_FILE_USER) &&
         isSameInlineConfigValue<string>(aInline.group, bInline.group, DEFAULT_INLINE_FILE_GROUP) &&
         isSameInlineConfigValue<number>(aInline.mode, bInline.mode, DEFAULT_INLINE_FILE_MODE) &&
-        isSameInlineConfigValue<string>(
-          aInline.contentEncoding,
-          bInline.contentEncoding,
-          FileSpec.contentEncoding.PLAIN,
-        ) &&
+        isSameInlineConfigValue<string>(aInline.contentEncoding, bInline.contentEncoding, EncodingType.EncodingPlain) &&
         aInline.content === bInline.content
       );
     })
@@ -188,7 +195,117 @@ export const getDeviceSpecConfigPatches = (
   return allPatches;
 };
 
-export const getAPIConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
+export const toAPIApplication = (app: AppForm): ApplicationProviderSpec => {
+  const envVars = app.variables.reduce((acc, variable) => {
+    acc[variable.name] = variable.value;
+    return acc;
+  }, {});
+
+  if (isImageAppForm(app)) {
+    const data = {
+      image: app.image,
+      envVars,
+    };
+    return app.name ? { ...data, name: app.name } : data;
+  }
+
+  return {
+    name: app.name,
+    appType: AppType.AppTypeCompose,
+    inline: app.files.map(
+      (file): InlineApplicationFileFixed => ({
+        path: file.path,
+        content: file.content || '',
+        contentEncoding: file.base64 ? EncodingType.EncodingBase64 : EncodingType.EncodingPlain,
+      }),
+    ),
+    envVars,
+  };
+};
+
+const hasInlineApplicationChanged = (currentApp: InlineApplicationProviderSpec, updatedApp: InlineAppForm) => {
+  if (currentApp.inline.length != updatedApp.files.length) {
+    return true;
+  }
+  return currentApp.inline.some((file, index) => {
+    const updatedFile = updatedApp.files[index];
+    const isCurrentBase64 = file.contentEncoding === EncodingType.EncodingBase64;
+    return (
+      (updatedFile.base64 || false) !== isCurrentBase64 ||
+      updatedFile.path !== file.path ||
+      updatedFile.content !== file.content
+    );
+  });
+};
+
+export const getApplicationPatches = (
+  basePath: string,
+  currentApps: ApplicationProviderSpec[],
+  updatedApps: AppForm[],
+) => {
+  const patches: PatchRequest = [];
+
+  const currentLen = currentApps.length;
+  const newLen = updatedApps.length;
+  if (currentLen === 0 && newLen > 0) {
+    // First apps(s) have been added
+    patches.push({
+      path: `${basePath}/applications`,
+      op: 'add',
+      value: updatedApps.map(toAPIApplication),
+    });
+  } else if (currentLen > 0 && newLen === 0) {
+    // Last app(s) have been removed
+    patches.push({
+      path: `${basePath}/applications`,
+      op: 'remove',
+    });
+  } else if (currentLen !== newLen) {
+    patches.push({
+      path: `${basePath}/applications`,
+      op: 'replace',
+      value: updatedApps.map(toAPIApplication),
+    });
+  } else {
+    const needsPatch = currentApps.some((currentApp, index) => {
+      const updatedApp = updatedApps[index];
+      const isCurrentImageApp = isImageAppProvider(currentApp);
+      const currentAppSpecType = isCurrentImageApp ? AppSpecType.OCI_IMAGE : AppSpecType.INLINE;
+      if (currentAppSpecType !== updatedApp.specType || updatedApp.name !== currentApp.name) {
+        return true;
+      }
+      const currentVars = Object.entries(currentApp.envVars || {});
+      if (currentVars.length !== updatedApp.variables.length) {
+        return true;
+      } else {
+        const hasChangedVars = updatedApp.variables.some((variable) => {
+          const currentValue = currentApp.envVars ? currentApp.envVars[variable.name] : undefined;
+          return !currentValue || currentValue !== variable.value;
+        });
+        if (hasChangedVars) {
+          return true;
+        }
+      }
+
+      if (isCurrentImageApp) {
+        return (updatedApp as ImageAppForm).image !== currentApp.image;
+      }
+
+      return hasInlineApplicationChanged(currentApp, updatedApp as InlineAppForm);
+    });
+    if (needsPatch) {
+      patches.push({
+        path: `${basePath}/applications`,
+        op: 'replace',
+        value: updatedApps.map(toAPIApplication),
+      });
+    }
+  }
+
+  return patches;
+};
+
+export const getApiConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
   if (isGitConfigTemplate(ct)) {
     return {
       name: ct.name,
@@ -227,7 +344,7 @@ export const getAPIConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
         path: file.path,
         content: file.content,
         mode: file.permissions ? parseInt(file.permissions, 8) : undefined,
-        contentEncoding: file.base64 ? FileSpec.contentEncoding.BASE64 : undefined,
+        contentEncoding: file.base64 ? EncodingType.EncodingBase64 : undefined,
       };
       // user / group fields cannot be sent as empty in PATCH operations
       if (file.user) {
@@ -241,13 +358,29 @@ export const getAPIConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
   };
 };
 
-export const getApplicationValues = (deviceSpec?: DeviceSpec): ApplicationFormSpec[] => {
-  const map = deviceSpec?.applications || [];
-  return map.map((app) => {
+const getAppFormVariables = (app: ApplicationProviderSpecFixed) =>
+  Object.entries(app.envVars || {}).map(([varName, varValue]) => ({ name: varName, value: varValue }));
+
+export const getApplicationValues = (deviceSpec?: DeviceSpec): AppForm[] => {
+  const apps = deviceSpec?.applications || [];
+  return apps.map((app) => {
+    if (isImageAppProvider(app)) {
+      return {
+        specType: AppSpecType.OCI_IMAGE,
+        name: app.name || '',
+        image: app.image,
+        variables: getAppFormVariables(app),
+      };
+    }
     return {
+      specType: AppSpecType.INLINE,
       name: app.name || '',
-      image: app.image,
-      variables: Object.entries(app.envVars || {}).map(([varName, varValue]) => ({ name: varName, value: varValue })),
+      files: app.inline.map((file) => ({
+        path: file.path || '',
+        content: file.content,
+        base64: file.contentEncoding === EncodingType.EncodingBase64,
+      })),
+      variables: getAppFormVariables(app),
     };
   });
 };
@@ -297,7 +430,7 @@ export const getConfigTemplatesValues = (deviceSpec?: DeviceSpec, registerMicroS
             path: inline.path,
             permissions: inline.mode !== undefined ? formatFileMode(inline.mode) : undefined,
             content: inline.content,
-            base64: inline.contentEncoding === FileSpec.contentEncoding.BASE64,
+            base64: inline.contentEncoding === EncodingType.EncodingBase64,
           } as InlineConfigTemplate['files'][0];
         }),
       } as InlineConfigTemplate;

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
+import TextField from '../../../form/TextField';
+import LearnMoreLink from '../../../common/LearnMoreLink';
+import { CREATING_APPLICATIONS_LINK } from '../../../../links';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { ImageAppForm } from '../../../../types/deviceSpec';
+
+const ApplicationImageForm = ({ app, index }: { app: ImageAppForm; index: number }) => {
+  const { t } = useTranslation();
+  return (
+    <FormGroupWithHelperText
+      label={t('Image')}
+      content={
+        <span>
+          {t('The application image. Learn how to create one')}{' '}
+          <LearnMoreLink text={t('here')} link={CREATING_APPLICATIONS_LINK} />
+        </span>
+      }
+      isRequired
+    >
+      <TextField aria-label={t('Image')} name={`applications.${index}.image`} value={app.image || ''} />
+    </FormGroupWithHelperText>
+  );
+};
+
+export default ApplicationImageForm;

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { FieldArray } from 'formik';
+import { Button, FormGroup, 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 { useTranslation } from '../../../../hooks/useTranslation';
+import CheckboxField from '../../../form/CheckboxField';
+import UploadField from '../../../form/UploadField';
+import TextField from '../../../form/TextField';
+import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import { InlineAppForm } from '../../../../types/deviceSpec';
+
+const MAX_INLINE_FILE_SIZE_BYTES = 1024 * 1024;
+
+type InlineApplicationFileFormProps = {
+  file: InlineAppForm['files'][0];
+  fileFieldName: string;
+  fileIndex: number;
+};
+
+const InlineApplicationFileForm = ({ file, fileIndex, fileFieldName }: InlineApplicationFileFormProps) => {
+  const { t } = useTranslation();
+  return (
+    <ExpandableFormSection
+      title={t('File {{ fileNum }}', { fileNum: fileIndex + 1 })}
+      fieldName={fileFieldName}
+      description={file.path}
+    >
+      <Grid hasGutter>
+        <FormGroup label={t('File path on the device (relative)')} isRequired>
+          <TextField name={`${fileFieldName}.path`} />
+        </FormGroup>
+        <UploadField label={t('Content')} name={`${fileFieldName}.content`} maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES} />
+
+        <FormGroup>
+          <CheckboxField name={`${fileFieldName}.base64`} label={t('Content is base64 encoded')} />
+        </FormGroup>
+      </Grid>
+    </ExpandableFormSection>
+  );
+};
+
+const ApplicationInlineForm = ({ app, index }: { app: InlineAppForm; index: number }) => {
+  const { t } = useTranslation();
+
+  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} />
+                </SplitItem>
+                {app.files.length > 1 && (
+                  <SplitItem>
+                    <Button
+                      aria-label={t('Delete file')}
+                      variant="link"
+                      icon={<MinusCircleIcon />}
+                      iconPosition="start"
+                      onClick={() => remove(fileIndex)}
+                    />
+                  </SplitItem>
+                )}
+              </Split>
+            );
+          })}
+          <FormGroup>
+            <Button
+              variant="link"
+              icon={<PlusCircleIcon />}
+              iconPosition="start"
+              onClick={() => {
+                push({
+                  path: '',
+                  content: '',
+                  base64: false,
+                });
+              }}
+            >
+              {t('Add file')}
+            </Button>
+          </FormGroup>
+        </>
+      )}
+    </FieldArray>
+  );
+};
+
+export default ApplicationInlineForm;

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

@@ -5,60 +5,96 @@ 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 { ApplicationFormSpec, DeviceSpecConfigFormValues } from '../types';
-
+import {
+  AppForm,
+  AppSpecType,
+  DeviceSpecConfigFormValues,
+  isImageAppForm,
+  isInlineAppForm,
+} from '../../../../types/deviceSpec';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import TextField from '../../../form/TextField';
+import FormSelect from '../../../form/FormSelect';
+import ErrorHelperText from '../../../form/FieldHelperText';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
-import WithHelperText from '../../../common/WithHelperText';
-import LearnMoreLink from '../../../common/LearnMoreLink';
-import { CREATING_APPLICATIONS_LINK } from '../../../../links';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
+import ApplicationImageForm from './ApplicationImageForm';
+import ApplicationInlineForm from './ApplicationInlineForm';
 
 import './ApplicationsForm.css';
 
 const ApplicationSection = ({ index }: { index: number }) => {
   const { t } = useTranslation();
-  const fieldName = `applications[${index}]`;
-  const [{ value: app }] = useField<ApplicationFormSpec>(fieldName);
+  const appFieldName = `applications[${index}]`;
+  const [{ value: app }, { error }, { setValue }] = useField<AppForm>(appFieldName);
+  const isInlineIncomplete = app.specType === AppSpecType.INLINE && !('files' in app);
+  const isImageIncomplete = app.specType === AppSpecType.OCI_IMAGE && !('image' 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 appTypes = React.useMemo(() => {
+    return {
+      [AppSpecType.INLINE]: t('Inline application'),
+      [AppSpecType.OCI_IMAGE]: t('Image based application'),
+    };
+  }, [t]);
+
+  React.useEffect(() => {
+    // When switching types, setting the new required fields and clearing those from the old type
+    if (isInlineIncomplete) {
+      setValue(
+        {
+          specType: AppSpecType.INLINE,
+          name: app.name || '',
+          files: [{ path: '', content: '' }],
+          variables: [],
+        },
+        false,
+      );
+    } else if (isImageIncomplete) {
+      setValue(
+        {
+          specType: AppSpecType.OCI_IMAGE,
+          name: app.name || '',
+          image: '',
+          variables: [],
+        },
+        false,
+      );
+    }
+  }, [isImageIncomplete, isInlineIncomplete, app.name, setValue]);
 
   return (
     <ExpandableFormSection
       title={t('Application {{ appNum }}', { appNum: index + 1 })}
-      fieldName={fieldName}
-      description={app.name || app.image}
+      fieldName={appFieldName}
+      description={app.name}
     >
       <Grid hasGutter>
-        <FormGroup
-          label={
-            <WithHelperText
-              ariaLabel={t('Image')}
-              content={
-                <span>
-                  {t('The application image. Learn how to create one')}{' '}
-                  <LearnMoreLink text={t('here')} link={CREATING_APPLICATIONS_LINK} />
-                </span>
-              }
-              showLabel
-            />
-          }
-          isRequired
-        >
-          <TextField aria-label={t('Image')} name={`applications.${index}.image`} value={app.image} />
+        <FormGroup label={t('Application type')} isRequired>
+          <FormSelect
+            items={appTypes}
+            name={`${appFieldName}.specType`}
+            placeholderText={t('Select an application type')}
+          />
         </FormGroup>
-        <FormGroup
-          label={
-            <WithHelperText
-              ariaLabel={t('Application name')}
-              content={t(
-                'The image name will be used instead of when application name is not specified. Application name must be unique.',
-              )}
-              showLabel
-            />
+
+        <FormGroupWithHelperText
+          label={t('Application name')}
+          content={
+            app.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}
         >
-          <TextField aria-label={t('Application name')} name={`applications.${index}.name`} value={app.name} />
-        </FormGroup>
-        <FieldArray name={`applications.${index}.variables`}>
+          <TextField aria-label={t('Application name')} name={`${appFieldName}.name`} />
+        </FormGroupWithHelperText>
+
+        {isImageAppForm(app) && <ApplicationImageForm app={app} index={index} />}
+        {isInlineAppForm(app) && <ApplicationInlineForm app={app} index={index} />}
+
+        <FieldArray name={`${appFieldName}.variables`}>
           {({ push, remove }) => (
             <>
               {app.variables.map((variable, varIndex) => (
@@ -70,7 +106,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
                     <FormGroup label={t('Name')} isRequired>
                       <TextField
                         aria-label={t('Name')}
-                        name={`applications.${index}.variables.${varIndex}.name`}
+                        name={`${appFieldName}.variables.${varIndex}.name`}
                         value={variable.name}
                       />
                     </FormGroup>
@@ -79,7 +115,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
                     <FormGroup label={t('Value')} isRequired>
                       <TextField
                         aria-label={t('Value')}
-                        name={`applications.${index}.variables.${varIndex}.value`}
+                        name={`${appFieldName}.variables.${varIndex}.value`}
                         value={variable.value}
                       />
                     </FormGroup>
@@ -95,6 +131,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
                   </SplitItem>
                 </Split>
               ))}
+              <ErrorHelperText error={appVarsError} />
               <FormGroup>
                 <Button
                   variant="link"
@@ -104,7 +141,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
                     push({ name: '', value: '' });
                   }}
                 >
-                  {t('Add a variable')}
+                  {t('Add an application variable')}
                 </Button>
               </FormGroup>
             </>
@@ -120,14 +157,9 @@ const ApplicationTemplates = () => {
   const { values } = useFormikContext<DeviceSpecConfigFormValues>();
 
   return (
-    <FormGroup
-      label={
-        <WithHelperText
-          ariaLabel={t('Application workloads')}
-          content={t('Define the application workloads that shall run on the device.')}
-          showLabel
-        />
-      }
+    <FormGroupWithHelperText
+      label={t('Application workloads')}
+      content={t('Define the application workloads that shall run on the device.')}
     >
       <FieldArray name="applications">
         {({ push, remove }) => (
@@ -159,7 +191,6 @@ const ApplicationTemplates = () => {
                   onClick={() => {
                     push({
                       name: '',
-                      image: '',
                       variables: [],
                     });
                   }}
@@ -171,7 +202,7 @@ const ApplicationTemplates = () => {
           </>
         )}
       </FieldArray>
-    </FormGroup>
+    </FormGroupWithHelperText>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, FormGroup, FormSection, Grid, Split, SplitItem } from '@patternfly/react-core';
+import { Button, FormGroup, Grid, Split, SplitItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
 import { FieldArray, useField, useFormikContext } from 'formik';
@@ -10,8 +10,7 @@ import TextField from '../../../form/TextField';
 import UploadField from '../../../form/UploadField';
 import CheckboxField from '../../../form/CheckboxField';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
-import { DeviceSpecConfigFormValues } from '../types';
-import { InlineConfigTemplate } from '../../../../types/deviceSpec';
+import { DeviceSpecConfigFormValues, InlineConfigTemplate } from '../../../../types/deviceSpec';
 import { formatFileMode } from '../deviceSpecUtils';
 
 const MAX_INLINE_FILE_SIZE_BYTES = 1024 * 1024;
@@ -60,20 +59,18 @@ const FileForm = ({ fieldName, index }: { fieldName: string; index: number }) =>
             helperText={t('Select from the list or type in the permission code in octal notation')}
             defaultId="0644"
             items={permissions}
-            validateNewItem={(value) => {
+            isValidTypedItem={(value) => {
               try {
-                if (value !== '' && value.length <= 4) {
+                if (value !== '' && value.length === 4) {
                   const valNum = Number(`0o${value}`);
-                  if (isFinite(valNum) && valNum >= 0 && valNum <= 0o7777) {
-                    return undefined;
-                  }
+                  return Number.isFinite(valNum) && valNum >= 0 && valNum <= 0o7777;
                 }
               } catch {
-                return t('Invalid permissions');
+                return false;
               }
-              return t('Invalid permissions');
+              return false;
             }}
-            transformNewItem={formatFileMode}
+            transformTypedItem={formatFileMode}
           />
         </FormGroup>
         <FormGroup label={t('User')}>
@@ -132,23 +129,21 @@ const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
               </Split>
             );
           })}
-          <FormSection>
-            <FormGroup>
-              <Button
-                variant="link"
-                icon={<PlusCircleIcon />}
-                iconPosition="start"
-                onClick={() => {
-                  push({
-                    path: '',
-                    content: '',
-                  });
-                }}
-              >
-                {t('Add file')}
-              </Button>
-            </FormGroup>
-          </FormSection>
+          <FormGroup>
+            <Button
+              variant="link"
+              icon={<PlusCircleIcon />}
+              iconPosition="start"
+              onClick={() => {
+                push({
+                  path: '',
+                  content: '',
+                });
+              }}
+            >
+              {t('Add file')}
+            </Button>
+          </FormGroup>
         </>
       )}
     </FieldArray>

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

@@ -5,8 +5,7 @@ import { FormGroup } from '@patternfly/react-core';
 import { useTranslation } from '../../../../hooks/useTranslation';
 
 import TextField from '../../../form/TextField';
-import { DeviceSpecConfigFormValues } from '../types';
-import { KubeSecretTemplate } from '../../../../types/deviceSpec';
+import { DeviceSpecConfigFormValues, KubeSecretTemplate } from '../../../../types/deviceSpec';
 
 type ConfigK8sSecretTemplateFormProps = {
   index: number;