@flightctl/ui-components 0.5.1 → 0.6.0-rc2

package/src/components/form/validations.ts

@@ -4,20 +4,30 @@ import countBy from 'lodash/countBy';
 
 import { FlightCtlLabel } from '../../types/extraTypes';
 import {
+  AppForm,
+  AppSpecType,
+  BatchForm,
+  BatchLimitType,
+  DisruptionBudgetForm,
   GitConfigTemplate,
   HttpConfigTemplate,
+  ImageAppForm,
+  InlineAppForm,
   InlineConfigTemplate,
   KubeSecretTemplate,
+  RolloutPolicyForm,
   SpecConfigTemplate,
+  SystemdUnitFormValue,
+  UpdatePolicyForm,
+  getAppIdentifier,
   isGitConfigTemplate,
   isHttpConfigTemplate,
+  isInlineAppForm,
   isInlineConfigTemplate,
   isKubeSecretTemplate,
 } from '../../types/deviceSpec';
 import { labelToString } from '../../utils/labels';
-import { ApplicationFormSpec } from '../Device/EditDeviceWizard/types';
-import { SystemdUnitFormValue } from '../Device/SystemdUnitsModal/TrackSystemdUnitsForm';
-import { BatchForm, BatchLimitType, DisruptionBudgetForm, RolloutPolicyForm } from '../Fleet/CreateFleet/types';
+import { UpdateScheduleMode } from '../../utils/time';
 
 const SYSTEMD_PATTERNS_REGEXP = /^[a-z][a-z0-9-_.]*$/;
 const SYSTEMD_UNITS_MAX_PATTERNS = 256;
@@ -35,13 +45,21 @@ const K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH = 253;
 // https://issues.redhat.com/browse/MGMT-18349 to make the validation more robust
 const BASIC_DEVICE_OS_IMAGE_REGEXP = /^[a-zA-Z0-9.\-\/:@_+]*$/;
 const APPLICATION_IMAGE_REGEXP = BASIC_DEVICE_OS_IMAGE_REGEXP;
+const APPLICATION_NAME_REGEXP = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/;
+const APPLICATION_VAR_NAME_REGEXP = /^[a-zA-Z_]+[a-zA-Z0-9_]*$/;
 
 const TEMPLATE_VARIABLES_REGEXP = /{{.+?}}/g;
 // Special characters allowed: "dot", "pipe", "spaces" "quote", "backward slash", "underscore", "forward slash", "dash"
 const TEMPLATE_VARIABLES_CONTENT_REGEXP = /^([.a-zA-Z0-9|\s"\\_\/-])+$/;
+const TIME_VALUE_REGEXP = /^([01][0-9]|2[0-3]):([0-5][0-9])$/;
 
 const absolutePathRegex = /^\/.*$/;
+
+// Accepts only relative paths. Rejects paths that start with "/", have multiple "/", or use dots (./file, ../parent/file), etc
+const relativePathRegex = /^(?!\.\.\/|\.\.\$|\.\/)(\.\/)*[\w.-]+(?:\/[\w.-]+)*\/?$/;
+
 export const MAX_TARGET_REVISION_LENGTH = 244;
+const MAX_FILE_PATH_LENGTH = 253;
 
 const isInteger = (val: number | undefined) => val === undefined || Number.isInteger(val);
 
@@ -53,7 +71,7 @@ export const getLabelValueValidations = (t: TFunction) => [
   },
   {
     key: 'labelValueMaxLength',
-    message: t('1-{{ maxCharacters }} characters', { maxCharacters: K8S_LABEL_VALUE_MAX_LENGTH }),
+    message: t('1-{{ maxCharacters }} characters.', { maxCharacters: K8S_LABEL_VALUE_MAX_LENGTH }),
   },
 ];
 
@@ -65,7 +83,7 @@ export const getDnsSubdomainValidations = (t: TFunction) => [
   },
   {
     key: 'dnsSubdomainMaxLength',
-    message: t('1-{{ maxCharacters }} characters', { maxCharacters: K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH }),
+    message: t('1-{{ maxCharacters }} characters.', { maxCharacters: K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH }),
   },
 ];
 
@@ -210,11 +228,21 @@ export const validOsImage = (t: TFunction, { isFleet }: { isFleet: boolean }) =>
     },
   );
 
-export const validLabelsSchema = (t: TFunction) =>
+export const validLabelsSchema = (t: TFunction, forbiddenLabels?: string[]) =>
   Yup.array()
     .of(
       Yup.object<FlightCtlLabel>().shape({
-        key: Yup.string().required(),
+        key: Yup.string()
+          .required()
+          .test('forbid labels', 'is forbidden', (key: string, testContext) => {
+            if (forbiddenLabels?.length && forbiddenLabels.includes(key)) {
+              return testContext.createError({
+                path: 'labels',
+                message: t('Label key "{{ forbiddenLabel }}" is forbidden', { forbiddenLabel: key }),
+              });
+            }
+            return true;
+          }),
         value: Yup.string(),
       }),
     )
@@ -256,34 +284,105 @@ export const validGroupLabelKeysSchema = (t: TFunction) =>
       return uniqueKeys.size === labelKeys?.length;
     });
 
-export const validApplicationsSchema = (t: TFunction) => {
+const appVariablesSchema = (t: TFunction) => {
   return Yup.array()
     .of(
       Yup.object().shape({
-        name: Yup.string(),
-        image: Yup.string()
-          .required(t('Image is required.'))
-          .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
-        variables: Yup.array()
-          .of(
-            Yup.object().shape({
-              name: Yup.string().required(t('Variable name is required.')),
-              value: Yup.string().required(t('Variable value is required.')),
-            }),
-          )
-          .required(),
+        name: Yup.string()
+          .required(t('Variable name is required.'))
+          .matches(APPLICATION_VAR_NAME_REGEXP, t('Use alphanumeric characters, or underscore (_)')),
+        value: Yup.string().required(t('Variable value is required.')),
+      }),
+    )
+    .required()
+    .test('unique-vars-names', t('Variable names of an application must be unique'), (vars) => {
+      const uniqueKeys = new Set(vars.map((varItem) => varItem.name));
+      return uniqueKeys.size === vars?.length;
+    });
+};
+
+const appSpecTypeSchema = (t: TFunction) =>
+  Yup.string().oneOf([AppSpecType.INLINE, AppSpecType.OCI_IMAGE]).required(t('Application type is required'));
+
+export const validApplicationsSchema = (t: TFunction) => {
+  return Yup.array()
+    .of(
+      Yup.lazy((value: AppForm) => {
+        if (isInlineAppForm(value)) {
+          return Yup.object<InlineAppForm>().shape({
+            specType: appSpecTypeSchema(t),
+            name: Yup.string()
+              .required(t('Name is required for inline applications.'))
+              .matches(
+                APPLICATION_NAME_REGEXP,
+                t(
+                  'Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.',
+                ),
+              ),
+            files: Yup.array()
+              .of(
+                Yup.object().shape({
+                  content: Yup.string(),
+                  path: Yup.string()
+                    .required(t('File path is required'))
+                    .max(
+                      MAX_FILE_PATH_LENGTH,
+                      t('File path length cannot exceed {{ maxCharacters }} characters.', {
+                        maxCharacters: MAX_FILE_PATH_LENGTH,
+                      }),
+                    )
+                    .matches(
+                      relativePathRegex,
+                      t('Application file path must be relative. It cannot be outside the application directory.'),
+                    ),
+                }),
+              )
+              .required()
+              .min(1, t('Inline applications must include at least one file.'))
+              .test('unique-file-paths', (files: InlineAppForm['files'], testContext) => {
+                const duplicateFilePaths = Object.entries(countBy(files.map((file) => file.path)))
+                  .filter(([, count]) => {
+                    return count > 1;
+                  })
+                  .map(([filePath]) => filePath);
+
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                const duplicateIndex = ((testContext.parent.files || []) as InlineAppForm['files']).findIndex((file) =>
+                  duplicateFilePaths.includes(file.path),
+                );
+                if (duplicateIndex === -1) {
+                  return true;
+                }
+
+                return testContext.createError({
+                  path: `${testContext.path}[${duplicateIndex}].path`,
+                  message: () => t('Each file of the same application must use different paths.'),
+                });
+              }),
+            variables: appVariablesSchema(t),
+          });
+        }
+
+        // Image applications
+        return Yup.object<ImageAppForm>().shape({
+          specType: appSpecTypeSchema(t),
+          name: Yup.string().matches(
+            APPLICATION_NAME_REGEXP,
+            t('Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.'),
+          ),
+          image: Yup.string()
+            .required(t('Image is required.'))
+            .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
+          variables: appVariablesSchema(t),
+        });
       }),
     )
-    .test('unique-app-ids', (apps: ApplicationFormSpec[] | undefined, testContext) => {
+    .test('unique-app-ids', (apps: AppForm[] | undefined, testContext) => {
       if (!apps?.length) {
         return true;
       }
 
-      // App name is optional, in which case the ID is the app image.
-      // Apps should have different names or images
-      const getAppId = (app: ApplicationFormSpec) => app.name || app.image;
-
-      const appIds = apps.map(getAppId);
+      const appIds = apps.map(getAppIdentifier);
       const duplicateIds = Object.entries(countBy(appIds))
         .filter(([, count]) => {
           return count > 1;
@@ -294,7 +393,7 @@ export const validApplicationsSchema = (t: TFunction) => {
       }
 
       const errors = apps.reduce((errors, app, appIndex) => {
-        if (duplicateIds.includes(getAppId(app))) {
+        if (duplicateIds.includes(appIds[appIndex])) {
           const error = app.name
             ? new Yup.ValidationError(t('Application name must be unique.'), '', `applications[${appIndex}].name`)
             : new Yup.ValidationError(
@@ -377,6 +476,74 @@ export const validFleetRolloutPolicySchema = (t: TFunction) => {
     });
 };
 
+const requiredDownloadTimes = (t: TFunction, isStartTime: boolean) =>
+  Yup.string().when(['isAdvanced', 'downloadAndInstallDiffer'], ([isAdvanced, downloadAndInstallDiffer]) => {
+    if (!isAdvanced) {
+      return Yup.string();
+    }
+    if (downloadAndInstallDiffer) {
+      return Yup.string().required(
+        isStartTime ? t('Downloading start time is required') : t('Downloading end time is required'),
+      );
+    }
+    return Yup.string()
+      .required(
+        isStartTime
+          ? t('Downloading and installing start times are required')
+          : t('Downloading and installing end times are required'),
+      )
+      .matches(TIME_VALUE_REGEXP, t('Time must be in hh:mm with 24-hour format', { nsSeparator: '|' }));
+  });
+
+const requiredInstallTimes = (t: TFunction, isStartTime: boolean) =>
+  Yup.string().when(['isAdvanced', 'downloadAndInstallDiffer'], ([isAdvanced, downloadAndInstallDiffer]) => {
+    if (isAdvanced && downloadAndInstallDiffer) {
+      return Yup.string()
+        .required(isStartTime ? t('Installing start time is required') : t('Installing end time is required'))
+        .matches(TIME_VALUE_REGEXP, t('Time must be in hh:mm with 24-hour format', { nsSeparator: '|' }));
+    }
+    return Yup.string();
+  });
+
+const updateWeekDaysSchema = (t: TFunction) =>
+  Yup.array()
+    .required()
+    .of(Yup.boolean().required())
+    .test(
+      'selected weekdays',
+      t('Select at least one day of the week for "weekly" schedules'),
+      (selectedDays: boolean[], { path, parent }) => {
+        const parentWeekMode =
+          path === 'updatePolicy.downloadWeekDays'
+            ? (parent as UpdatePolicyForm).downloadScheduleMode
+            : (parent as UpdatePolicyForm).installScheduleMode;
+
+        if (parentWeekMode === UpdateScheduleMode.Weekly) {
+          return selectedDays.some(Boolean);
+        }
+
+        return true;
+      },
+    );
+
+export const validUpdatePolicySchema = (t: TFunction) => {
+  return Yup.object().shape({
+    isAdvanced: Yup.boolean().required(),
+    downloadAndInstallDiffer: Yup.boolean().required(),
+    // Fields are flattened so "isAdvanced" can be used for validating them
+    downloadStartsAt: requiredDownloadTimes(t, true),
+    downloadEndsAt: requiredDownloadTimes(t, false),
+    downloadScheduleMode: Yup.string().oneOf([UpdateScheduleMode.Weekly, UpdateScheduleMode.Daily]).required(),
+    downloadWeekDays: updateWeekDaysSchema(t),
+    downloadTimeZone: Yup.string().required(t('Select the timezone for downloading updates')),
+    installStartsAt: requiredInstallTimes(t, true),
+    installEndsAt: requiredInstallTimes(t, false),
+    installScheduleMode: Yup.string().oneOf([UpdateScheduleMode.Weekly, UpdateScheduleMode.Daily]).required(),
+    installWeekDays: updateWeekDaysSchema(t),
+    installTimeZone: Yup.string().required(t('Select the timezone for installing updates')),
+  });
+};
+
 export const validFleetDisruptionBudgetSchema = (t: TFunction) => {
   return Yup.object()
     .shape({
@@ -453,6 +620,17 @@ export const validConfigTemplatesSchema = (t: TFunction) =>
                     (path) => !path || value.files.filter((file) => file.path === path).length == 1,
                   ),
                 content: Yup.string(),
+                permissions: Yup.string().test(
+                  'permissions',
+                  t('Permissions must use octal notation'),
+                  (perm: string | undefined) => {
+                    if (!perm) {
+                      return true;
+                    }
+                    const valNum = Number(`0o${perm}`);
+                    return Number.isFinite(valNum) && valNum >= 0 && valNum <= 0o7777;
+                  },
+                ),
               }),
             ),
           });
@@ -508,6 +686,7 @@ export const deviceSystemdUnitsValidationSchema = (t: TFunction) =>
     systemdUnits: systemdUnitListValidationSchema(t),
   });
 
+const forbiddenDeviceLabels = ['alias'];
 export const deviceApprovalValidationSchema = (t: TFunction, conf: { isSingleDevice: boolean }) =>
   Yup.object({
     deviceAlias: conf.isSingleDevice
@@ -516,5 +695,5 @@ export const deviceApprovalValidationSchema = (t: TFunction, conf: { isSingleDev
           /{{n}}/,
           t('Device aliases must be unique. Add a number to the template to generate unique aliases.'),
         ),
-    labels: validLabelsSchema(t),
+    labels: validLabelsSchema(t, forbiddenDeviceLabels),
   });

package/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx

@@ -32,6 +32,7 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
 
   const disableSubmit = Object.keys(formErrors).length > 0;
   const [matchLabelsOnChange, matchStatus] = useDeviceLabelMatch();
+  const defaultAlias = enrollmentRequest.spec.labels?.alias;
 
   return (
     <FlightCtlForm>
@@ -39,12 +40,11 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
         fieldName="deviceAlias"
         aria-label={t('Alias')}
         validations={getLabelValueValidations(t)}
+        isDisabled={!!defaultAlias}
       />
-      {enrollmentRequest && (
-        <FormGroup label={t('Name')} aria-label={t('Name')}>
-          <ResourceLink id={enrollmentRequest.metadata.name as string} variant="full" />
-        </FormGroup>
-      )}
+      <FormGroup label={t('Name')} aria-label={t('Name')}>
+        <ResourceLink id={enrollmentRequest.metadata.name as string} variant="full" />
+      </FormGroup>
       <FormGroup label={t('Labels')}>
         <LabelsField name="labels" onChangeCallback={matchLabelsOnChange} />
       </FormGroup>

package/src/components/modals/ApproveDeviceModal/ApproveDeviceModal.tsx

@@ -21,11 +21,12 @@ const DeviceEnrollmentModal: React.FC<DeviceEnrollmentModalProps> = ({ enrollmen
   const { t } = useTranslation();
   const { put } = useFetch();
   const [error, setError] = React.useState<string>();
+  const labels = enrollmentRequest.spec.labels || {};
   return (
     <Formik<ApproveDeviceFormValues>
       initialValues={{
-        labels: fromAPILabel(enrollmentRequest.spec.labels || {}, { isDefault: true }),
-        deviceAlias: '',
+        labels: fromAPILabel(labels, { isDefault: true }).filter((label) => label.key !== 'alias'),
+        deviceAlias: labels.alias || '',
       }}
       validationSchema={deviceApprovalValidationSchema(t, { isSingleDevice: true })}
       onSubmit={async ({ labels, deviceAlias }) => {

package/src/components/modals/EditLabelsModal/EditLabelsForm.tsx

@@ -3,7 +3,6 @@ import { Formik, FormikProps } from 'formik';
 import { Alert } from '@patternfly/react-core';
 import { TFunction } from 'i18next';
 import * as Yup from 'yup';
-import debounce from 'lodash/debounce';
 
 import { Device } from '@flightctl/types';
 import LabelsField from '../../form/LabelsField';
@@ -14,7 +13,7 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { fromAPILabel } from '../../../utils/labels';
 import { validLabelsSchema } from '../../form/validations';
 import { getErrorMessage } from '../../../utils/error';
-import { getLabelPatches } from '../../../utils/patch';
+import { getDeviceLabelPatches } from '../../../utils/patch';
 import LabelsView from '../../common/LabelsView';
 
 type EditLabelsFormValues = {
@@ -26,16 +25,15 @@ type EditLabelsFormContentProps = {
   submitForm: (values: EditLabelsFormValues) => Promise<string>;
 };
 
+const forbiddenDeviceLabels = ['alias'];
+
 const getValidationSchema = (t: TFunction) => {
   return Yup.object<EditLabelsFormValues>({
-    labels: validLabelsSchema(t),
+    labels: validLabelsSchema(t, forbiddenDeviceLabels),
   });
 };
 
-const delayResponse = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
 const EditLabelsFormContent = ({ isSubmitting, submitForm }: EditLabelsFormContentProps) => {
-  const { t } = useTranslation();
   const [submitError, setSubmitError] = React.useState<string>();
 
   const onChangedLabels = async (newLabels: FlightCtlLabel[], hasErrors: boolean) => {
@@ -46,17 +44,9 @@ const EditLabelsFormContent = ({ isSubmitting, submitForm }: EditLabelsFormConte
     }
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedSubmit = React.useCallback(debounce(onChangedLabels, 2000), []);
-
   return (
     <FlightCtlForm>
-      <LabelsField
-        name="labels"
-        addButtonText={isSubmitting ? t('Saving...') : undefined}
-        isLoading={isSubmitting}
-        onChangeCallback={debouncedSubmit}
-      />
+      <LabelsField name="labels" isLoading={isSubmitting} onChangeCallback={onChangedLabels} />
       {submitError && <Alert isInline title={submitError} variant="danger" />}
     </FlightCtlForm>
   );
@@ -76,20 +66,19 @@ const EditLabelsForm = ({ device, onDeviceUpdate }: EditLabelsFormProps) => {
   const { t } = useTranslation();
   const { patch } = useFetch();
 
-  const currentLabels = device.metadata.labels || {};
+  const currentLabelsMap = device.metadata.labels || {};
+  const currentLabelsList = fromAPILabel(currentLabelsMap || {});
 
   return (
     <Formik<EditLabelsFormValues>
       initialValues={{
-        labels: fromAPILabel(currentLabels),
+        labels: currentLabelsList.filter((label) => label.key !== 'alias'),
       }}
       onSubmit={async (values: EditLabelsFormValues) => {
         try {
-          const labelsPatch = getLabelPatches('/metadata/labels', currentLabels, values.labels);
+          const labelsPatch = getDeviceLabelPatches(currentLabelsMap, values.labels);
           if (labelsPatch.length > 0) {
             await patch(`devices/${device.metadata.name}`, labelsPatch);
-            // The API call is "too" quick, allow the "Saving" button to be briefly seen
-            await delayResponse(150);
             onDeviceUpdate();
           }
           return null;

package/src/components/modals/massModals/MassDecommissionDeviceModal/MassDecommissionDeviceModal.tsx

@@ -80,18 +80,18 @@ const MassDecommissionDeviceModal = ({ onClose, devices, onSuccess }: MassDecomm
           <Table>
             <Thead>
               <Tr>
-                <Th>{t('Name')}</Th>
                 <Th>{t('Alias')}</Th>
+                <Th>{t('Name')}</Th>
               </Tr>
             </Thead>
             <Tbody>
               {devices.map((device) => {
                 return (
                   <Tr key={device.metadata.name}>
+                    <Td dataLabel={t('Alias')}>{device.metadata.labels?.alias || '-'}</Td>
                     <Td dataLabel={t('Name')}>
                       <ResourceLink id={device.metadata.name as string} />
                     </Td>
-                    <Td dataLabel={t('Alias')}>{device.metadata.labels?.alias || '-'}</Td>
                   </Tr>
                 );
               })}

package/src/components/modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal.tsx

@@ -67,18 +67,18 @@ const MassDeleteDeviceModal: React.FC<MassDeleteDeviceModalProps> = ({ onClose,
           <Table>
             <Thead>
               <Tr>
-                <Th>{t('Name')}</Th>
                 <Th>{t('Alias')}</Th>
+                <Th>{t('Name')}</Th>
               </Tr>
             </Thead>
             <Tbody>
               {resources.map((resource) => {
                 return (
                   <Tr key={resource.metadata.name}>
+                    <Td dataLabel={t('Alias')}>{resource.metadata.labels?.alias || '-'}</Td>
                     <Td dataLabel={t('Name')}>
                       <ResourceLink id={resource.metadata.name as string} />
                     </Td>
-                    <Td dataLabel={t('Alias')}>{resource.metadata.labels?.alias || '-'}</Td>
                   </Tr>
                 );
               })}

package/src/components/modals/massModals/MassDeleteFleetModal/MassDeleteFleetModal.tsx

@@ -30,8 +30,8 @@ const MassDeleteFleetTable = ({ fleets }: { fleets: Array<Fleet> }) => {
     <Table>
       <Thead>
         <Tr>
-          <Th>{t('Name')}</Th>
-          <Th>{t('Managed by')}</Th>
+          <Th modifier="fitContent">{t('Name')}</Th>
+          <Th modifier="fitContent">{t('Managed by')}</Th>
         </Tr>
       </Thead>
       <Tbody>

package/src/components/modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal.tsx

@@ -126,8 +126,8 @@ const MassDeleteRepositoryModal: React.FC<MassDeleteRepositoryModalProps> = ({
               <Table>
                 <Thead>
                   <Tr>
-                    <Th>{t('Repository name')}</Th>
-                    <Th>{t('# Resource syncs')}</Th>
+                    <Th modifier="fitContent">{t('Repository name')}</Th>
+                    <Th modifier="fitContent">{t('# Resource syncs')}</Th>
                   </Tr>
                 </Thead>
                 <Tbody>