@flightctl/ui-components 1.0.2 → 1.1.0-rc2

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

@@ -3,3 +3,15 @@
   border: 1px solid gray !important;
   margin-top: 1rem;
 }
+
+/*
+The tooltip text has the same color as the background, making the text unreadable in light and dark modes.
+ Due to Patternfly targets the tooltip content ([class*='pf-v6-c-content']), just using the CSS variables does not work.
+ */
+.fctl-application-helm-form__tooltip [class*='pf-v6-c-content'] {
+  color: var(--pf-t--global--text--color--300, white);
+}
+
+.pf-v6-theme-dark .fctl-application-helm-form__tooltip [class*='pf-v6-c-content'] {
+  color: var(--pf-t--global--text--color--100, gray);
+}

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

@@ -1,16 +1,6 @@
 import * as React from 'react';
-import { useField } from 'formik';
-import {
-  Button,
-  FormGroup,
-  FormSection,
-  Grid,
-  Label,
-  LabelGroup,
-  Split,
-  SplitItem,
-  TextInput,
-} from '@patternfly/react-core';
+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';
 
 import { FormGroupWithHelperText } from '../../../common/WithHelperText';
@@ -22,18 +12,13 @@ import { PortMapping, SingleContainerAppForm } from '../../../../types/deviceSpe
 
 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('');
   const [hostPortTouched, setHostPortTouched] = React.useState(false);
@@ -41,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);
@@ -49,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;
@@ -59,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);
@@ -76,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
@@ -115,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');
     }
@@ -135,7 +120,7 @@ const ApplicationContainerForm = ({
       return;
     }
 
-    const newPorts = [...(ports || [])];
+    const newPorts = [...ports];
     newPorts[index] = { hostPort: newHostPort || '', containerPort: newContainerPort || '' };
     await updatePorts(newPorts);
 
@@ -154,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);
     }
@@ -168,144 +153,140 @@ const ApplicationContainerForm = ({
   };
 
   return (
-    <FormSection>
-      <Grid hasGutter>
-        <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>
-        <FormGroup label={t('Image')} isRequired>
-          <TextField
-            aria-label={t('Image')}
-            name={`${appFieldName}.image`}
-            value={app.image || ''}
-            isDisabled={isReadOnly}
-            helperText={t('Provide a valid image reference')}
-          />
-        </FormGroup>
+    <Grid hasGutter>
+      <FormGroupWithHelperText
+        label={t('Application name')}
+        content={t('If not specified, the image name will be used. Application name must be unique.')}
+      >
+        <TextField aria-label={t('Application name')} name={`${appFieldName}.name`} isDisabled={isReadOnly} />
+      </FormGroupWithHelperText>
+      <FormGroup label={t('Image')} isRequired>
+        <TextField
+          aria-label={t('Image')}
+          name={`${appFieldName}.image`}
+          isDisabled={isReadOnly}
+          helperText={t('Provide a valid image reference')}
+        />
+      </FormGroup>
 
-        <FormGroup label={t('Ports')}>
-          <small>{t('Provide a list of ports to map to the container')}</small>
-          {!isReadOnly && (
-            <Split hasGutter className="pf-v5-u-mt-sm">
-              <SplitItem isFilled>
-                <TextInput
-                  aria-label={t('Host port')}
-                  value={hostPort}
-                  placeholder={t('Host port')}
-                  onChange={(_, value) => {
-                    setHostPort(value);
-                    setHostPortTouched(true);
-                  }}
-                  onBlur={() => setHostPortTouched(true)}
-                  onKeyDown={handleKeyDown}
-                  isDisabled={isReadOnly}
-                  validated={hostPortError ? 'error' : 'default'}
-                />
-                {hostPortError ? <ErrorHelperText error={hostPortError} touchRequired={false} /> : <div>&nbsp;</div>}
-              </SplitItem>
-              <SplitItem isFilled>
-                <TextInput
-                  aria-label={t('Container port')}
-                  value={containerPort}
-                  placeholder={t('Container port')}
-                  onChange={(_, value) => {
-                    setContainerPort(value);
-                    setContainerPortTouched(true);
-                  }}
-                  onBlur={() => setContainerPortTouched(true)}
-                  onKeyDown={handleKeyDown}
-                  isDisabled={isReadOnly}
-                  validated={containerPortError ? 'error' : 'default'}
-                />
-              </SplitItem>
-              <SplitItem>
-                <Button
-                  aria-label={t('Add port mapping')}
-                  variant="control"
-                  icon={<ArrowRightIcon />}
-                  iconPosition="end"
-                  onClick={onAddPort}
-                  isDisabled={!canAddPorts}
-                >
-                  {t('Add')}
-                </Button>
-              </SplitItem>
-            </Split>
-          )}
-          {ports && ports.length > 0 && (
-            <>
-              <LabelGroup
-                numLabels={5}
-                categoryName={t('Added ports')}
-                isEditable={!isReadOnly}
-                className="fctl-containerapp__added-ports"
-              >
-                {ports.map((port, portIndex) => {
-                  const portText = `${port.hostPort}:${port.containerPort}`;
-                  const isEditing = editingPortIndex === portIndex;
-                  const hasError = isEditing && editingPortError;
-                  return (
-                    <Label
-                      key={`${port.hostPort}_${port.containerPort}_${portIndex}`}
-                      textMaxWidth="16ch"
-                      onClose={!isReadOnly ? () => onDeletePort(portIndex) : undefined}
-                      onEditComplete={!isReadOnly ? (_, newText) => onEditPort(portIndex, newText) : undefined}
-                      onEditCancel={!isReadOnly ? () => onEditCancel(portIndex) : undefined}
-                      title={portText}
-                      isEditable={!isReadOnly && (!editingPortError || portIndex === editingPortIndex)}
-                      color={hasError ? 'red' : undefined}
-                    >
-                      {portText}
-                    </Label>
-                  );
-                })}
-              </LabelGroup>
-              {editingPortError && editingPortIndex !== null && (
-                <ErrorHelperText error={editingPortError} touchRequired={false} />
-              )}
-            </>
-          )}
-        </FormGroup>
-        <FormGroup label={t('Resources')}>
-          <Grid hasGutter>
-            <FormGroupWithHelperText
-              label={t('CPU limit')}
-              content={t(
-                'Set the maximum CPU usage for your container. Use fractional values ("0.5" for half a CPU core) or whole numbers ("1", "2" for full cores). Consider your device\'s total CPU capacity when setting limits.',
-              )}
-            >
-              <TextField
-                aria-label={t('CPU limit')}
-                name={`${appFieldName}.limits.cpu`}
-                value={app.limits?.cpu || ''}
-                placeholder={t('Enter numeric value')}
+      <FormGroup label={t('Ports')}>
+        <small>{t('Provide a list of ports to map to the container')}</small>
+        {!isReadOnly && (
+          <Split hasGutter className="pf-v6-u-mt-sm">
+            <SplitItem isFilled>
+              <TextInput
+                aria-label={t('Host port')}
+                value={hostPort}
+                placeholder={t('Host port')}
+                onChange={(_, value) => {
+                  setHostPort(value);
+                  setHostPortTouched(true);
+                }}
+                onBlur={() => setHostPortTouched(true)}
+                onKeyDown={handleKeyDown}
                 isDisabled={isReadOnly}
-                helperText={t('Provide a valid CPU value (e.g., "0.4" or "2").')}
+                validated={hostPortError ? 'error' : 'default'}
               />
-            </FormGroupWithHelperText>
-            <FormGroupWithHelperText
-              label={t('Memory limit')}
-              content={t(
-                'Set the maximum memory usage for your container using Podman format. You can specify a number with an optional unit: "b" (bytes), "k" (kibibytes), "m" (mebibytes), "g" (gibibytes). Examples: "512", "512m", "1g", "2048k". Ensure the limit fits within your device\'s available memory and accounts for other applications and system processes.',
-              )}
-            >
-              <TextField
-                aria-label={t('Memory limit')}
-                name={`${appFieldName}.limits.memory`}
-                value={app.limits?.memory || ''}
-                placeholder={t('Enter numeric value with optional unit')}
+              {hostPortError ? <ErrorHelperText error={hostPortError} touchRequired={false} /> : <div>&nbsp;</div>}
+            </SplitItem>
+            <SplitItem isFilled>
+              <TextInput
+                aria-label={t('Container port')}
+                value={containerPort}
+                placeholder={t('Container port')}
+                onChange={(_, value) => {
+                  setContainerPort(value);
+                  setContainerPortTouched(true);
+                }}
+                onBlur={() => setContainerPortTouched(true)}
+                onKeyDown={handleKeyDown}
                 isDisabled={isReadOnly}
-                helperText={t('Provide a valid memory value (e.g., "512", "512m", "2g", "1024k").')}
+                validated={containerPortError ? 'error' : 'default'}
               />
-            </FormGroupWithHelperText>
-          </Grid>
-        </FormGroup>
-      </Grid>
-    </FormSection>
+            </SplitItem>
+            <SplitItem>
+              <Button
+                aria-label={t('Add port mapping')}
+                variant="control"
+                icon={<ArrowRightIcon />}
+                iconPosition="end"
+                onClick={onAddPort}
+                isDisabled={!canAddPorts}
+              >
+                {t('Add')}
+              </Button>
+            </SplitItem>
+          </Split>
+        )}
+        {ports && ports.length > 0 && (
+          <>
+            <LabelGroup
+              numLabels={5}
+              categoryName={t('Added ports')}
+              isEditable={!isReadOnly}
+              className="fctl-containerapp__added-ports"
+            >
+              {ports.map((port, portIndex) => {
+                const portText = `${port.hostPort}:${port.containerPort}`;
+                const isEditing = editingPortIndex === portIndex;
+                const hasError = isEditing && editingPortError;
+                return (
+                  <Label
+                    key={`${port.hostPort}_${port.containerPort}_${portIndex}`}
+                    textMaxWidth="16ch"
+                    onClose={!isReadOnly ? () => onDeletePort(portIndex) : undefined}
+                    onEditComplete={!isReadOnly ? (_, newText) => onEditPort(portIndex, newText) : undefined}
+                    onEditCancel={!isReadOnly ? () => onEditCancel(portIndex) : undefined}
+                    title={portText}
+                    isEditable={!isReadOnly && (!editingPortError || portIndex === editingPortIndex)}
+                    color={hasError ? 'red' : undefined}
+                  >
+                    {portText}
+                  </Label>
+                );
+              })}
+            </LabelGroup>
+            {editingPortError && editingPortIndex !== null && (
+              <ErrorHelperText error={editingPortError} touchRequired={false} />
+            )}
+          </>
+        )}
+      </FormGroup>
+      <FormGroup label={t('Resources')}>
+        <Grid hasGutter>
+          <FormGroupWithHelperText
+            label={t('CPU limit')}
+            content={t(
+              'Set the maximum CPU usage for your container. Use fractional values ("0.5" for half a CPU core) or whole numbers ("1", "2" for full cores). Consider your device\'s total CPU capacity when setting limits.',
+            )}
+          >
+            <TextField
+              aria-label={t('CPU limit')}
+              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").')}
+            />
+          </FormGroupWithHelperText>
+          <FormGroupWithHelperText
+            label={t('Memory limit')}
+            content={t(
+              'Set the maximum memory usage for your container using Podman format. You can specify a number with an optional unit: "b" (bytes), "k" (kibibytes), "m" (mebibytes), "g" (gibibytes). Examples: "512", "512m", "1g", "2048k". Ensure the limit fits within your device\'s available memory and accounts for other applications and system processes.',
+            )}
+          >
+            <TextField
+              aria-label={t('Memory limit')}
+              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").')}
+            />
+          </FormGroupWithHelperText>
+        </Grid>
+      </FormGroup>
+    </Grid>
   );
 };
 

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

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { FieldArray, useField } from 'formik';
+import { Alert, Button, Content, FormGroup, Grid, Radio, Split, SplitItem, Tooltip } 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 { FormGroupWithHelperText } from '../../../common/WithHelperText';
+import TextField from '../../../form/TextField';
+import UploadField from '../../../form/UploadField';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { AppSpecType, HelmAppForm } from '../../../../types/deviceSpec';
+
+const ApplicationHelmForm = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
+  const { t } = useTranslation();
+  const appFieldName = `applications[${index}]`;
+  const [{ value: app }] = useField<HelmAppForm>(`${appFieldName}`);
+  const valuesFiles = app.valuesFiles || [];
+  const canAddValuesFile = valuesFiles && valuesFiles.every((file) => file && file.trim() !== '');
+
+  return (
+    <Grid hasGutter>
+      <FormGroup label={t('Application name')} isRequired>
+        <TextField aria-label={t('Application name')} name={`${appFieldName}.name`} isDisabled={isReadOnly} />
+      </FormGroup>
+
+      {/* Field not configurable - just to display helm apps like the other app types that have OCI image references */}
+      <Radio
+        id={`${appFieldName}-helm-app-spec-type`}
+        name={`${appFieldName}-helm-app-spec-type`}
+        label={t('OCI reference URL')}
+        value={AppSpecType.OCI_IMAGE}
+        isDisabled={isReadOnly}
+        isChecked
+      />
+
+      <FormGroupWithHelperText
+        label={t('Image')}
+        content={t('Reference to the OCI image or artifact containing the Helm chart.')}
+        isRequired
+      >
+        <TextField
+          aria-label={t('Image')}
+          name={`${appFieldName}.image`}
+          isDisabled={isReadOnly}
+          helperText={t('Provide a valid image reference')}
+        />
+      </FormGroupWithHelperText>
+
+      <FormGroupWithHelperText label={t('Namespace')} content={t('The namespace to install the Helm chart into.')}>
+        <TextField
+          aria-label={t('Namespace')}
+          name={`${appFieldName}.namespace`}
+          value={app.namespace || ''}
+          isDisabled={isReadOnly}
+          placeholder={t('Type namespace here')}
+        />
+        <Alert
+          isInline
+          isPlain
+          variant="info"
+          className="pf-v6-u-mt-md"
+          title={t('If you do not specify a namespace, the agent uses a namespace based on the application name.')}
+        />
+      </FormGroupWithHelperText>
+
+      <FormGroupWithHelperText
+        label={t('Values file names')}
+        content={t(
+          'Reference values files that are defined within the Helm application package. Files are applied in the specified order, before user-provided values.',
+        )}
+      >
+        <FieldArray name={`${appFieldName}.valuesFiles`}>
+          {({ push, remove }) => (
+            <>
+              {(valuesFiles || []).map((file, fileIndex) => (
+                <Split hasGutter key={fileIndex} className="pf-v6-u-mb-sm">
+                  <SplitItem isFilled>
+                    <TextField
+                      aria-label={t('Values file {{ number }}', { number: fileIndex + 1 })}
+                      name={`${appFieldName}.valuesFiles.${fileIndex}`}
+                      value={file}
+                      isDisabled={isReadOnly}
+                      helperText={t('Enter a file path relative to the Helm chart root. For example, values.yaml')}
+                      placeholder={t('Type values file name here')}
+                    />
+                  </SplitItem>
+                  {!isReadOnly && (
+                    <SplitItem>
+                      <Button
+                        aria-label={t('Delete values file')}
+                        variant="link"
+                        icon={<MinusCircleIcon />}
+                        iconPosition="end"
+                        onClick={() => remove(fileIndex)}
+                      />
+                    </SplitItem>
+                  )}
+                </Split>
+              ))}
+              {!isReadOnly && (
+                <FormGroup>
+                  <Tooltip
+                    className="fctl-application-helm-form__tooltip"
+                    content={
+                      <Content>{t('Fill in the existing values files before you can add more values files.')}</Content>
+                    }
+                  >
+                    <Button
+                      variant="link"
+                      icon={<PlusCircleIcon />}
+                      iconPosition="start"
+                      isAriaDisabled={!canAddValuesFile}
+                      onClick={() => {
+                        push('');
+                      }}
+                    >
+                      {t('Add values file')}
+                    </Button>
+                  </Tooltip>
+                </FormGroup>
+              )}
+              <Alert
+                isInline
+                isPlain
+                variant="info"
+                className="pf-v6-u-mt-md"
+                title={t(
+                  'Order of precedence: Files are applied in the order listed. If the same parameter is defined in multiple files, the value in the last file takes precedence and overrides previous values.',
+                )}
+              />
+            </>
+          )}
+        </FieldArray>
+      </FormGroupWithHelperText>
+
+      <FormGroupWithHelperText label={t('Inline values')} content={t('Provide a valid YAML file')}>
+        <Content component="small">
+          {t(
+            'Enter configuration values in YAML format to be applied to the Helm chart. These values take precedence over those defined in the files listed above.',
+          )}
+        </Content>
+        <UploadField ariaLabel={t('Inline values')} name={`${appFieldName}.valuesYaml`} isDisabled={isReadOnly} />
+      </FormGroupWithHelperText>
+    </Grid>
+  );
+};
+
+export default ApplicationHelmForm;

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

@@ -1,41 +1,31 @@
 import * as React from 'react';
+import { Grid } from '@patternfly/react-core';
 
 import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 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');
 
   return (
-    <FormGroupWithHelperText
-      label={t('Image')}
-      content={
-        <span>
-          {t('The application image. Learn how to create one')} <LearnMoreLink text={t('here')} link={createAppLink} />
-        </span>
-      }
-      isRequired
-    >
-      <TextField
-        aria-label={t('Image')}
-        name={`applications.${index}.image`}
-        value={app.image || ''}
-        isDisabled={isReadOnly}
-      />
-    </FormGroupWithHelperText>
+    <Grid hasGutter>
+      <FormGroupWithHelperText
+        label={t('Image')}
+        content={
+          <span>
+            {t('The application image. Learn how to create one')}{' '}
+            <LearnMoreLink text={t('here')} link={createAppLink} />
+          </span>
+        }
+        isRequired
+      >
+        <TextField aria-label={t('Image')} name={`applications.${index}.image`} isDisabled={isReadOnly} />
+      </FormGroupWithHelperText>
+    </Grid>
   );
 };