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

package/src/components/form/validations.ts

@@ -10,31 +10,25 @@ import {
   AppSpecType,
   BatchForm,
   BatchLimitType,
-  ComposeImageAppForm,
-  ComposeInlineAppForm,
+  ComposeAppForm,
   DisruptionBudgetForm,
   GitConfigTemplate,
-  HelmImageAppForm,
+  HelmAppForm,
   HttpConfigTemplate,
   InlineConfigTemplate,
+  InlineFileForm,
   KubeSecretTemplate,
   PortMapping,
-  QuadletImageAppForm,
-  QuadletInlineAppForm,
+  QuadletAppForm,
   RolloutPolicyForm,
   SpecConfigTemplate,
   SystemdUnitFormValue,
   UpdatePolicyForm,
   getAppIdentifier,
-  isComposeImageAppForm,
   isGitConfigTemplate,
-  isHelmImageAppForm,
   isHttpConfigTemplate,
   isInlineConfigTemplate,
   isKubeSecretTemplate,
-  isQuadletImageAppForm,
-  isQuadletInlineAppForm,
-  isSingleContainerAppForm,
 } from '../../types/deviceSpec';
 import { labelToString } from '../../utils/labels';
 import { UpdateScheduleMode } from '../../utils/time';
@@ -53,9 +47,9 @@ const K8S_DNS_SUBDOMAIN_START_END = /^[a-z0-9](.*[a-z0-9])?$/;
 const K8S_DNS_SUBDOMAIN_ALLOWED_CHARACTERS = /^[a-z0-9.-]*$/;
 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 OCI_IMAGE_FULL_REGEXP = /^(?![./_])[a-zA-Z0-9.\-\/:@_+]*$/;
+// Accepts all characters from the above regex, but it rejects leading dot, slash, or underscore
+const OCI_IMAGE_ALLOWED_CHARS_REGEXP = /^[a-zA-Z0-9.\-\/:@_+]*$/;
 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_]*$/;
 
@@ -74,6 +68,9 @@ const relativePathRegex = /^(?!\.\.\/|\.\.\$|\.\/)(\.\/)*[\w.-]+(?:\/[\w.-]+)*\/
 export const MAX_TARGET_REVISION_LENGTH = 244;
 const MAX_FILE_PATH_LENGTH = 253;
 
+const HELM_NAMESPACE_MAX_LENGTH = 63;
+const HELM_VALUES_FILE_EXT_REGEXP = /\.(yaml|yml)$/i;
+
 const isInteger = (val: number | undefined) => val === undefined || Number.isInteger(val);
 
 const validComposeFileNames = [
@@ -233,6 +230,23 @@ export const validApplicationAndVolumeName = (t: TFunction) =>
     t('Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.'),
   );
 
+export const getBuildNameValidations = (t: TFunction) => [
+  {
+    key: 'imageBuildName',
+    message: t(
+      'Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.',
+    ),
+  },
+];
+
+export const validImageBuildName = (t: TFunction) =>
+  Yup.string()
+    .required(t('Build name is required'))
+    .test('imageBuildName', function (value: string | undefined) {
+      if (!value) return true;
+      return APPLICATION_NAME_REGEXP.test(value) || this.createError({ message: { imageBuildName: 'failed' } });
+    });
+
 export const maxLengthString = (t: TFunction, props: { maxLength: number; fieldName: string }) =>
   Yup.string().max(props.maxLength, t('{{ fieldName }} must not exceed {{ maxLength }} characters', props));
 
@@ -261,10 +275,52 @@ export const validOsImage = (t: TFunction, { isFleet }: { isFleet: boolean }) =>
         }
       }
 
-      return BASIC_DEVICE_OS_IMAGE_REGEXP.test(validateOsImage);
+      return OCI_IMAGE_FULL_REGEXP.test(validateOsImage);
     },
   );
 
+export const validHelmNamespace = (t: TFunction) =>
+  Yup.string()
+    .max(
+      HELM_NAMESPACE_MAX_LENGTH,
+      t('Namespace must not exceed {{ max }} characters.', { max: HELM_NAMESPACE_MAX_LENGTH }),
+    )
+    .test(
+      'helm-namespace-format',
+      t(
+        'Namespace must only include lowercase letters, numbers, and hyphens. It must start and end with a letter or number.',
+      ),
+      (value) => {
+        return !value || APPLICATION_NAME_REGEXP.test(value);
+      },
+    );
+
+export const validHelmValuesFile = (t: TFunction) =>
+  Yup.string().test('helm-values-file', function (filename) {
+    if (!filename) {
+      return true;
+    }
+    if (filename.length > MAX_FILE_PATH_LENGTH) {
+      return this.createError({
+        message: t('Values file path must not exceed {{ max }} characters.', {
+          max: MAX_FILE_PATH_LENGTH,
+        }),
+      });
+    }
+    if (filename.startsWith('/') || filename.includes('..')) {
+      return this.createError({
+        message: t('Values file path must be relative and cannot contain parent directory references (..).'),
+      });
+    }
+
+    if (!HELM_VALUES_FILE_EXT_REGEXP.test(filename)) {
+      return this.createError({
+        message: t('Values file must have .yaml or .yml extension.'),
+      });
+    }
+    return true;
+  });
+
 export const validLabelsSchema = (t: TFunction, forbiddenLabels?: string[]) =>
   Yup.array()
     .of(
@@ -370,11 +426,7 @@ const inlineAppFileSchema = (t: TFunction) =>
 
 // Common test for unique file paths in inline applications
 const uniqueFilePathsTest =
-  (t: TFunction) =>
-  (
-    files: (QuadletInlineAppForm | ComposeInlineAppForm)['files'] | undefined,
-    testContext: Yup.TestContext<Yup.AnyObject>,
-  ) => {
+  (t: TFunction) => (files: InlineFileForm[] | undefined, testContext: Yup.TestContext<Yup.AnyObject>) => {
     if (!files || files.length === 0) {
       return true;
     }
@@ -412,34 +464,33 @@ const uniqueFilePathsTest =
     });
   };
 
-const composeFileName =
-  (t: TFunction) => (files: ComposeInlineAppForm['files'], testContext: Yup.TestContext<Yup.AnyObject>) => {
-    const invalidFiles = files
-      .map((file, index) => {
-        if (!file.path) {
-          return null;
-        }
-        // Extract filename from relative path (get last part after slash, or use whole path if no slash)
-        const fileName = file.path.includes('/') ? file.path.split('/').pop() || file.path : file.path;
-        if (!validComposeFileNames.includes(fileName)) {
-          return index;
-        }
+const composeFileName = (t: TFunction) => (files: InlineFileForm[], testContext: Yup.TestContext<Yup.AnyObject>) => {
+  const invalidFiles = files
+    .map((file, index) => {
+      if (!file.path) {
         return null;
-      })
-      .filter((index): index is number => index !== null);
+      }
+      // Extract filename from relative path (get last part after slash, or use whole path if no slash)
+      const fileName = file.path.includes('/') ? file.path.split('/').pop() || file.path : file.path;
+      if (!validComposeFileNames.includes(fileName)) {
+        return index;
+      }
+      return null;
+    })
+    .filter((index): index is number => index !== null);
 
-    if (invalidFiles.length > 0) {
-      const firstInvalidIndex = invalidFiles[0];
-      return testContext.createError({
-        path: `${testContext.path}[${firstInvalidIndex}].path`,
-        message: () =>
-          t('File name must be one of: {{ allowedFileNames }}', {
-            allowedFileNames: validComposeFileNameDisplay,
-          }),
-      });
-    }
-    return true;
-  };
+  if (invalidFiles.length > 0) {
+    const firstInvalidIndex = invalidFiles[0];
+    return testContext.createError({
+      path: `${testContext.path}[${firstInvalidIndex}].path`,
+      message: () =>
+        t('File name must be one of: {{ allowedFileNames }}', {
+          allowedFileNames: validComposeFileNameDisplay,
+        }),
+    });
+  }
+  return true;
+};
 
 // Helper to extract file extension from a path
 const getFileExtension = (path: string): string => {
@@ -454,7 +505,7 @@ const isAtRoot = (path: string): boolean => {
 
 // Validation for quadlet applications: checks for unsupported types first, then requires at least one supported type
 const quadletFileTypesValidation =
-  (t: TFunction) => (files: QuadletInlineAppForm['files'], testContext: Yup.TestContext<Yup.AnyObject>) => {
+  (t: TFunction) => (files: InlineFileForm[], testContext: Yup.TestContext<Yup.AnyObject>) => {
     if (!files || files.length === 0) {
       return true; // This is handled by the min(1) requirement
     }
@@ -512,36 +563,35 @@ const quadletFileTypesValidation =
   };
 
 // Validation for quadlet applications: quadlet files must be at root level
-const quadletFilesAtRoot =
-  (t: TFunction) => (files: QuadletInlineAppForm['files'], testContext: Yup.TestContext<Yup.AnyObject>) => {
-    if (!files || files.length === 0) {
-      return true;
-    }
+const quadletFilesAtRoot = (t: TFunction) => (files: InlineFileForm[], testContext: Yup.TestContext<Yup.AnyObject>) => {
+  if (!files || files.length === 0) {
+    return true;
+  }
 
-    const invalidFiles = files
-      .map((file, index) => {
-        if (!file.path) {
-          return null;
-        }
-        const ext = getFileExtension(file.path);
-        // Only check files with supported quadlet extensions
-        if (supportedQuadletExtensions.includes(ext) && !isAtRoot(file.path)) {
-          return index;
-        }
+  const invalidFiles = files
+    .map((file, index) => {
+      if (!file.path) {
         return null;
-      })
-      .filter((index): index is number => index !== null);
+      }
+      const ext = getFileExtension(file.path);
+      // Only check files with supported quadlet extensions
+      if (supportedQuadletExtensions.includes(ext) && !isAtRoot(file.path)) {
+        return index;
+      }
+      return null;
+    })
+    .filter((index): index is number => index !== null);
 
-    if (invalidFiles.length > 0) {
-      const firstInvalidIndex = invalidFiles[0];
-      return testContext.createError({
-        path: `${testContext.path}[${firstInvalidIndex}].path`,
-        message: () => t('Quadlet files must be at root level (no subdirectories)'),
-      });
-    }
+  if (invalidFiles.length > 0) {
+    const firstInvalidIndex = invalidFiles[0];
+    return testContext.createError({
+      path: `${testContext.path}[${firstInvalidIndex}].path`,
+      message: () => t('Quadlet files must be at root level (no subdirectories)'),
+    });
+  }
 
-    return true;
-  };
+  return true;
+};
 
 const PORT_NUMBER_REGEXP = /^\d+$/;
 const MAX_PORT = 65535;
@@ -621,17 +671,27 @@ export const validateMemoryLimit = (memory: string | undefined): boolean => {
   return true;
 };
 
-// Common volume validation helpers
-const volumeNameSchema = (t: TFunction) => validApplicationAndVolumeName(t).required(t('Volume name is required'));
-
-const optionalImageRefSchema = (t: TFunction) =>
-  Yup.string().test('image-ref-format', t('Image reference includes invalid characters.'), (value) => {
-    if (!value || value.length === 0) {
-      return true; // Empty is allowed
+const ociImageSchema = (t: TFunction) =>
+  Yup.string().test('oci-image-format', (value, testContext) => {
+    if (!value) return true;
+    if (!OCI_IMAGE_ALLOWED_CHARS_REGEXP.test(value)) {
+      return testContext.createError({
+        message: t('Image includes invalid characters.'),
+      });
+    }
+    if (!OCI_IMAGE_FULL_REGEXP.test(value)) {
+      return testContext.createError({
+        message: t('Image must not start with a dot (.), slash (/), or underscore (_).'),
+      });
     }
-    return APPLICATION_IMAGE_REGEXP.test(value);
+    return true;
   });
 
+const requiredOciImageSchema = (t: TFunction, requiredMessage?: string) =>
+  ociImageSchema(t).required(requiredMessage || t('Image is required.'));
+
+const volumeNameSchema = (t: TFunction) => validApplicationAndVolumeName(t).required(t('Volume name is required'));
+
 const imagePullPolicySchema = (t: TFunction) =>
   Yup.string()
     .oneOf(
@@ -645,12 +705,11 @@ const mountPathSchema = (t: TFunction, isRequired: boolean = true) => {
   return isRequired ? schema.required(t('Mount path is required for this volume type')) : schema;
 };
 
-// Volume validation schemas
 const singleContainerVolumesSchema = (t: TFunction) =>
   Yup.array().of(
     Yup.object().shape({
       name: volumeNameSchema(t),
-      imageRef: optionalImageRefSchema(t),
+      imageRef: ociImageSchema(t),
       imagePullPolicy: Yup.string(),
       mountPath: mountPathSchema(t, true),
     }),
@@ -660,7 +719,7 @@ const composeQuadletVolumesSchema = (t: TFunction) =>
   Yup.array().of(
     Yup.object().shape({
       name: volumeNameSchema(t),
-      imageRef: optionalImageRefSchema(t).required(t('Image reference is required for this volume type')),
+      imageRef: requiredOciImageSchema(t, t('Image reference is required for this volume type')),
       imagePullPolicy: imagePullPolicySchema(t),
     }),
   );
@@ -670,16 +729,14 @@ export const validApplicationsSchema = (t: TFunction) => {
     .of(
       Yup.lazy((value: AppForm) => {
         // Container applications (image-based with ports and resources)
-        if (isSingleContainerAppForm(value)) {
+        if (value.appType === AppType.AppTypeContainer) {
           return Yup.object().shape({
             specType: Yup.string()
               .oneOf([AppSpecType.OCI_IMAGE])
               .required(t('Definition source must be image for this type of applications')),
             appType: Yup.string().oneOf([AppType.AppTypeContainer]).required(t('Application type is required')),
-            name: validApplicationAndVolumeName(t).required(t('Name is required for single container applications.')),
-            image: Yup.string()
-              .required(t('Image is required.'))
-              .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
+            name: validApplicationAndVolumeName(t),
+            image: requiredOciImageSchema(t),
             ports: Yup.array().of(
               Yup.object()
                 .shape({
@@ -709,17 +766,15 @@ export const validApplicationsSchema = (t: TFunction) => {
         }
 
         // Helm applications
-        if (isHelmImageAppForm(value)) {
-          return Yup.object<HelmImageAppForm>().shape({
+        if (value.appType === AppType.AppTypeHelm) {
+          return Yup.object<HelmAppForm>().shape({
             specType: Yup.string()
               .oneOf([AppSpecType.OCI_IMAGE])
               .required(t('Definition source must be image for this type of applications')),
             appType: Yup.string().oneOf([AppType.AppTypeHelm]).required(t('Application type is required')),
             name: validApplicationAndVolumeName(t),
-            image: Yup.string()
-              .required(t('Image is required.'))
-              .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
-            namespace: Yup.string(),
+            image: requiredOciImageSchema(t),
+            namespace: validHelmNamespace(t),
             valuesYaml: Yup.string().test('valid-yaml', t('YAML content is invalid.'), (value) => {
               if (!value || value.trim() === '') {
                 return true;
@@ -731,16 +786,13 @@ export const validApplicationsSchema = (t: TFunction) => {
               }
               return true;
             }),
-            // Values files don't need to be validated.
-            // Since the UX design has the first field added by default, we will ignore all empty values files.
-            // The user can't add more values files if any is empty (though they can clear existing ones).
-            valuesFiles: Yup.array().of(Yup.string()),
+            valuesFiles: Yup.array().of(validHelmValuesFile(t)),
           });
         }
 
         // Image applications (Quadlet or Compose)
-        if (isQuadletImageAppForm(value) || isComposeImageAppForm(value)) {
-          return Yup.object<QuadletImageAppForm | ComposeImageAppForm>().shape({
+        if (value.specType === AppSpecType.OCI_IMAGE) {
+          return Yup.object<QuadletAppForm | ComposeAppForm>().shape({
             specType: Yup.string()
               .oneOf([AppSpecType.OCI_IMAGE])
               .required(t('Definition source must be image for this type of applications')),
@@ -748,17 +800,15 @@ export const validApplicationsSchema = (t: TFunction) => {
               .oneOf([AppType.AppTypeCompose, AppType.AppTypeQuadlet])
               .required(t('Application type is required')),
             name: validApplicationAndVolumeName(t),
-            image: Yup.string()
-              .required(t('Image is required.'))
-              .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
+            image: requiredOciImageSchema(t),
             volumes: composeQuadletVolumesSchema(t),
             variables: appVariablesSchema(t),
           });
         }
 
         // Inline quadlet applications
-        if (isQuadletInlineAppForm(value)) {
-          return Yup.object<QuadletInlineAppForm>().shape({
+        if (value.appType === AppType.AppTypeQuadlet && value.specType === AppSpecType.INLINE) {
+          return Yup.object<QuadletAppForm>().shape({
             specType: appSpecTypeSchema(t),
             appType: Yup.string().oneOf([AppType.AppTypeQuadlet]).required(t('Application type is required')),
             name: validApplicationAndVolumeName(t).required(t('Name is required for quadlet applications.')),
@@ -772,7 +822,7 @@ export const validApplicationsSchema = (t: TFunction) => {
         }
 
         // Inline compose applications
-        return Yup.object<ComposeInlineAppForm>().shape({
+        return Yup.object<ComposeAppForm>().shape({
           specType: appSpecTypeSchema(t),
           appType: Yup.string().oneOf([AppType.AppTypeCompose]).required(t('Application type is required')),
           name: validApplicationAndVolumeName(t).required(t('Name is required for compose applications.')),

package/src/components/modals/CreateRepositoryModal/CreateRepositoryModal.tsx

@@ -9,9 +9,10 @@ type CreateRepositoryModalProps = {
   type: RepoSpecType;
   onClose: VoidFunction;
   onSuccess: (repository: Repository) => void;
+  validateBeforeCreate?: (repo: Repository) => string | undefined;
 };
 
-const CreateRepositoryModal = ({ type, onClose, onSuccess }: CreateRepositoryModalProps) => {
+const CreateRepositoryModal = ({ type, onClose, onSuccess, validateBeforeCreate }: CreateRepositoryModalProps) => {
   const { t } = useTranslation();
   return (
     <Modal variant="medium" isOpen>
@@ -20,6 +21,7 @@ const CreateRepositoryModal = ({ type, onClose, onSuccess }: CreateRepositoryMod
         <CreateRepositoryForm
           onClose={onClose}
           onSuccess={onSuccess}
+          validateBefore={validateBeforeCreate}
           options={{
             canUseResourceSyncs: false,
             allowedRepoTypes: [type],

package/src/constants.ts

@@ -1,7 +1,20 @@
-const APP_TITLE = 'Edge Manager';
-const API_VERSION = 'v1beta1';
-const PAGE_SIZE = 15;
-const EVENT_PAGE_SIZE = 200; // It's 500 in OCP console
-const CERTIFICATE_VALIDITY_IN_YEARS = 1;
+import { ApiVersion } from '@flightctl/types';
+import { ApiVersion as ImageBuilderApiVersion } from '@flightctl/types/imagebuilder';
 
-export { APP_TITLE, API_VERSION, PAGE_SIZE, EVENT_PAGE_SIZE, CERTIFICATE_VALIDITY_IN_YEARS };
+export const APP_TITLE = 'Edge Manager';
+export const PAGE_SIZE = 15;
+export const EVENT_PAGE_SIZE = 200; // It's 500 in OCP console
+
+export const CERTIFICATE_VALIDITY_IN_YEARS = 1;
+
+export const getApiVersion = (api: 'flightctl' | 'imagebuilder' | 'alerts'): string | undefined => {
+  switch (api) {
+    case 'flightctl':
+      return ApiVersion.ApiVersionV1beta1;
+    case 'imagebuilder':
+      return ImageBuilderApiVersion.ApiVersionV1alpha1;
+    case 'alerts':
+    default:
+      return undefined;
+  }
+};

package/src/hooks/useWebSocket.ts

@@ -11,6 +11,8 @@ const msgToBytes = (msg: string, resize?: boolean) => {
   return result;
 };
 
+const isErrorCloseEvent = (evt: CloseEvent) => evt.code !== 1000 && evt.code !== 1001;
+
 export type WsMetadata = {
   tty: boolean;
   term: string;
@@ -34,13 +36,17 @@ export const useWebSocket = <T>(
   const { t } = useTranslation();
   const wsRef = React.useRef<WebSocket>();
   const isMountedRef = React.useRef(true);
+  const hasReceivedMessageRef = React.useRef(false);
   const [isConnecting, setIsConnecting] = React.useState(true);
   const [isClosed, setIsClosed] = React.useState(false);
   const [error, setError] = React.useState<unknown>();
   const [reset, setReset] = React.useState<number>(0);
 
   const sendMessage = React.useCallback((data: string, resize?: boolean) => {
-    wsRef.current?.send(msgToBytes(data, resize));
+    const ws = wsRef.current;
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(msgToBytes(data, resize));
+    }
   }, []);
 
   React.useEffect(() => {
@@ -54,6 +60,8 @@ export const useWebSocket = <T>(
     try {
       setIsConnecting(true);
       setIsClosed(false);
+      setError(undefined);
+      hasReceivedMessageRef.current = false;
       const wsEndpoint = getWsEndpoint(deviceId);
       const wsMeta = JSON.stringify(wsMetadata);
       const params = new URLSearchParams({
@@ -73,9 +81,16 @@ export const useWebSocket = <T>(
         }
       };
 
-      const handleClose = () => {
+      const handleClose = (evt: CloseEvent) => {
         if (isMountedRef.current) {
+          setIsConnecting(false);
           setIsClosed(true);
+          // If we never received any data from the backend, treat an error close as a failure
+          // Otherwise it may be a normal session close, and we'll show the "Reconnect" banner.
+          if (isErrorCloseEvent(evt) && !hasReceivedMessageRef.current) {
+            const reason = evt.reason || t('Unknown error');
+            setError(t('Failed to connect to device terminal: {{reason}}', { reason }));
+          }
         }
         wsRef.current = undefined;
       };
@@ -84,7 +99,13 @@ export const useWebSocket = <T>(
         // eslint-disable-next-line no-console
         console.error('Error creating websocket:', evt);
         if (isMountedRef.current) {
-          setError(t('Websocket error occured'));
+          setIsConnecting(false);
+          if (!hasReceivedMessageRef.current) {
+            setError(t('Failed to connect to device terminal'));
+          } else {
+            // User may have closed the session, so we'll show the "Reconnect" banner.
+            setIsClosed(true);
+          }
         }
       };
 
@@ -120,6 +141,7 @@ export const useWebSocket = <T>(
   React.useEffect(() => {
     const listener = (evt: MessageEvent<T>) => {
       if (isMountedRef.current) {
+        hasReceivedMessageRef.current = true;
         onMsgReceived(evt.data);
       }
     };