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

package/src/components/ImageBuilds/ImageBuildDetails/ImageBuildExportsGallery.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { Gallery } from '@patternfly/react-core';
 import { saveAs } from 'file-saver';
 
-import { ExportFormatType, ImageExport } from '@flightctl/types/imagebuilder';
+import { ExportFormatType, ImageBuildConditionReason, ImageExport } from '@flightctl/types/imagebuilder';
 import { ImageBuildWithExports } from '../../../types/extraTypes';
+import { getImageBuildStatusReason } from '../../../utils/imageBuilds';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import { useFetch } from '../../../hooks/useFetch';
 import { usePermissionsContext } from '../../common/PermissionsContext';
@@ -13,8 +14,8 @@ import { ImageExportAction, ViewImageBuildExportCard } from '../ImageExportCards
 import { useOciRegistriesContext } from '../OciRegistriesContext';
 import { showSpinnerBriefly } from '../../../utils/time';
 import { getAllExportFormats, getExportDownloadResult, getImageReference } from '../../../utils/imageBuilds';
-import { useAppContext } from '../../../hooks/useAppContext';
-import { ROUTE } from '../../../hooks/useNavigate';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { IMAGE_EXPORT_ID_PARAM } from './ImageBuildLogsTab';
 
 type ImageBuildExportsGalleryProps = {
   imageBuild: ImageBuildWithExports;
@@ -50,8 +51,21 @@ const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGall
   const [canCreateExport, canDelete, canViewLogs, canDownload, canCancel] =
     checkPermissions(imageBuildExportsPermissions);
 
+  const buildReason = getImageBuildStatusReason(imageBuild);
+
   const actionPermissions = React.useMemo(() => {
     const actions: ImageExportAction[] = [];
+    if (
+      buildReason === ImageBuildConditionReason.ImageBuildConditionReasonFailed ||
+      buildReason === ImageBuildConditionReason.ImageBuildConditionReasonCanceled ||
+      buildReason === ImageBuildConditionReason.ImageBuildConditionReasonCanceling
+    ) {
+      if (canDelete) {
+        actions.push('delete');
+      }
+      return actions;
+    }
+
     if (canCreateExport) {
       actions.push('createExport');
       actions.push('rebuild');
@@ -70,12 +84,9 @@ const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGall
       actions.push('cancel');
     }
     return actions;
-  }, [canCreateExport, canDelete, canViewLogs, canDownload, canCancel]);
+  }, [buildReason, canCreateExport, canDelete, canViewLogs, canDownload, canCancel]);
 
-  const {
-    router: { useNavigate: useRouterNavigate, appRoutes },
-  } = useAppContext();
-  const routerNavigate = useRouterNavigate();
+  const navigate = useNavigate();
   const [error, setError] = React.useState<{
     format: ExportFormatType;
     action: ImageExportAction;
@@ -88,11 +99,6 @@ const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGall
   >();
   const imageBuildId = imageBuild.metadata.name as string;
 
-  const handleViewLogs = () => {
-    const baseRoute = appRoutes[ROUTE.IMAGE_BUILD_DETAILS];
-    routerNavigate(`${baseRoute}/${imageBuildId}/logs`);
-  };
-
   const handleCreateNewExport = async (format: ExportFormatType) => {
     try {
       const imageExport = getImageExportResource(imageBuildId, format);
@@ -110,14 +116,13 @@ const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGall
     const response = await proxyFetch(`imagebuilder/api/v1/imageexports/${ieName}/download`, {
       method: 'GET',
       credentials: 'include',
-      redirect: 'manual', // Prevent automatic redirect following to avoid CORS issues
     });
-
     const downloadResult = await getExportDownloadResult(response);
     if (downloadResult === null) {
       await showSpinnerBriefly(DOWNLOAD_REDIRECT_DELAY);
       throw new Error(`Download failed: ${response.status} ${response.statusText}`);
-    } else if (downloadResult.type === 'redirect') {
+    }
+    if (downloadResult.type === 'redirect') {
       createDownloadLink(downloadResult.url);
       await showSpinnerBriefly(DOWNLOAD_REDIRECT_DELAY);
     } else {
@@ -164,9 +169,13 @@ const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGall
         case 'delete':
           await handleDelete(ieName);
           break;
-        case 'viewLogs':
-          handleViewLogs();
+        case 'viewLogs': {
+          const searchParams = new URLSearchParams({
+            [IMAGE_EXPORT_ID_PARAM]: ieName,
+          });
+          navigate({ route: ROUTE.IMAGE_BUILD_DETAILS, postfix: `${imageBuildId}/logs?${searchParams.toString()}` });
           break;
+        }
       }
     } catch (error) {
       setError({ format, message: getErrorMessage(error), action });

package/src/components/ImageBuilds/ImageBuildDetails/ImageBuildLogsTab.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { TFunction } from 'react-i18next';
 import {
   Alert,
   Bullseye,
@@ -25,6 +24,7 @@ import {
 import { ExportFormatType, ImageBuildConditionReason, ImageExportConditionReason } from '@flightctl/types/imagebuilder';
 import { useTranslation } from '../../../hooks/useTranslation';
 import {
+  getExportFormatLabel,
   getImageBuildStatusReason,
   getImageExportStatusReason,
   isImageBuildActiveReason,
@@ -34,6 +34,9 @@ import { ImageBuildWithExports } from '../../../types/extraTypes';
 import { LogResourceType, useImageBuildLogs } from '../useImageBuildLogs';
 import { StatusDisplayContent } from '../../Status/StatusDisplay';
 import { StatusLevel } from '../../../utils/status/common';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+export const IMAGE_EXPORT_ID_PARAM = 'exportId';
 
 type LogEntity = {
   type: LogResourceType;
@@ -43,19 +46,6 @@ type LogEntity = {
   status: ImageBuildConditionReason | ImageExportConditionReason;
 };
 
-const getExportFormatText = (t: TFunction, format: ExportFormatType) => {
-  switch (format) {
-    case ExportFormatType.ExportFormatTypeVMDK:
-      return t('Virtualization (VMDK)');
-    case ExportFormatType.ExportFormatTypeQCOW2:
-      return t('OpenStack/KVM (QCOW2)');
-    case ExportFormatType.ExportFormatTypeQCOW2DiskContainer:
-      return t('OpenShift Virtualization (QCOW2)');
-    case ExportFormatType.ExportFormatTypeISO:
-      return t('Metal installer (ISO)');
-  }
-};
-
 const ImageBuildAndExportLogStatus = ({
   status,
 }: {
@@ -85,18 +75,23 @@ const ImageBuildAndExportLogStatus = ({
 
 const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }) => {
   const { t } = useTranslation();
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams] = useSearchParams();
   const [isLogSelectOpen, setIsLogSelectOpen] = React.useState(false);
   const logsRef = React.useRef<HTMLTextAreaElement>(null);
 
+  const buildName = imageBuild.metadata.name as string;
+
   const { selectableEntities, hasExports } = React.useMemo(() => {
     const entities: LogEntity[] = [];
-    const buildName = imageBuild.metadata.name as string;
 
     const buildReason = getImageBuildStatusReason(imageBuild);
     entities.push({
       type: LogResourceType.BUILD,
       id: buildName,
-      label: buildName,
+      label: t('Image build'),
       isActive: isImageBuildActiveReason(buildReason),
       status: buildReason,
     });
@@ -115,7 +110,7 @@ const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }
         entities.push({
           type: LogResourceType.EXPORT,
           id: ie.metadata.name as string,
-          label: getExportFormatText(t, format),
+          label: getExportFormatLabel(t, format),
           isActive: isImageExportActiveReason(exportReason),
           status: exportReason,
         });
@@ -125,9 +120,15 @@ const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }
       selectableEntities: entities,
       hasExports,
     };
-  }, [imageBuild, t]);
+  }, [imageBuild, buildName, t]);
 
-  const [selectedEntityId, setSelectedEntityId] = React.useState<string>(imageBuild.metadata.name as string);
+  const [selectedEntityId, setSelectedEntityId] = React.useState<string>(() => {
+    const selectedId = searchParams.get(IMAGE_EXPORT_ID_PARAM);
+    if (selectedId && selectableEntities.some((e) => e.id === selectedId)) {
+      return selectedId;
+    }
+    return buildName;
+  });
   const selectedEntity = selectableEntities.find((entity) => entity.id === selectedEntityId) || selectableEntities[0];
   const { logs, isLoading, error, isStreaming } = useImageBuildLogs(
     selectedEntity.id,
@@ -209,13 +210,8 @@ const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }
                         {selectableEntities
                           .filter((entity) => entity.type === LogResourceType.BUILD)
                           .map((entity) => (
-                            <MenuItem
-                              key={entity.id}
-                              itemId={entity.id}
-                              isSelected={selectedEntityId === entity.id}
-                              description={entity.id}
-                            >
-                              {entity.label}
+                            <MenuItem key={entity.id} itemId={entity.id} isSelected={selectedEntityId === entity.id}>
+                              {entity.id}
                             </MenuItem>
                           ))}
                       </MenuList>

package/src/components/ImageBuilds/ImageExportCards.tsx

@@ -26,12 +26,14 @@ import { VirtualMachineIcon } from '@patternfly/react-icons/dist/js/icons/virtua
 import { CloudSecurityIcon } from '@patternfly/react-icons/dist/js/icons/cloud-security-icon';
 import { ServerGroupIcon } from '@patternfly/react-icons/dist/js/icons/server-group-icon';
 import { BuilderImageIcon } from '@patternfly/react-icons/dist/js/icons/builder-image-icon';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { ExportFormatType, ImageExport, ImageExportConditionReason } from '@flightctl/types/imagebuilder';
 import { getExportFormatDescription, getExportFormatLabel, getImageExportStatusReason } from '../../utils/imageBuilds';
 import { getDateDisplay } from '../../utils/dates';
 import { useTranslation } from '../../hooks/useTranslation';
-import ConfirmDeleteOrCancelImageExportModal, {
+import WithTooltip from '../common/WithTooltip';
+import ConfirmImageExportActionModal, {
   ConfirmImageExportAction,
 } from './ConfirmImageExportModal/ConfirmImageExportModal';
 import { ImageExportStatusDisplay } from './ImageBuildAndExportStatus';
@@ -41,6 +43,7 @@ import './ImageExportCards.css';
 export type ImageExportAction = 'cancel' | 'delete' | 'viewLogs' | 'download' | 'retry' | 'rebuild' | 'createExport';
 
 const getActionsForStatus = (
+  format: ExportFormatType,
   exportReason: ImageExportConditionReason | undefined,
   actionPermissions: ImageExportAction[],
 ): ImageExportAction[] => {
@@ -54,7 +57,10 @@ const getActionsForStatus = (
       actions.push('cancel', 'viewLogs');
       break;
     case ImageExportConditionReason.ImageExportConditionReasonCompleted:
-      actions.push('download', 'viewLogs', 'delete', 'rebuild');
+      if (format !== ExportFormatType.ExportFormatTypeQCOW2DiskContainer) {
+        actions.push('download');
+      }
+      actions.push('viewLogs', 'delete', 'rebuild');
       break;
     case ImageExportConditionReason.ImageExportConditionReasonFailed:
     case ImageExportConditionReason.ImageExportConditionReasonCanceled:
@@ -102,7 +108,7 @@ const getActionTitle = (t: TFunction, action: ImageExportAction, inProgress: boo
     case 'createExport':
       return inProgress ? t('Exporting...') : t('Export image');
     default:
-      return t('Action');
+      return t('Actions');
   }
 };
 const iconMap: Record<ExportFormatType, React.ReactElement> = {
@@ -173,9 +179,14 @@ export const ViewImageBuildExportCard = ({
   const [actionsDropdownOpen, setActionsDropdownOpen] = React.useState(false);
   const [pendingConfirmAction, setPendingConfirmAction] = React.useState<ConfirmImageExportAction>();
   const exists = !!imageExport;
+  const exportReason = exists ? getImageExportStatusReason(imageExport) : undefined;
 
   const handleCardAction = (action: ImageExportAction) => {
-    if (action === 'cancel' || action === 'delete') {
+    if (
+      action === 'cancel' ||
+      action === 'delete' ||
+      (action === 'rebuild' && exportReason === ImageExportConditionReason.ImageExportConditionReasonCompleted)
+    ) {
       setPendingConfirmAction(action);
     } else {
       onCardAction({ format, action });
@@ -189,13 +200,12 @@ export const ViewImageBuildExportCard = ({
     setPendingConfirmAction(undefined);
   };
 
-  const exportReason = exists ? getImageExportStatusReason(imageExport) : undefined;
   const { primaryAction, remainingActions } = React.useMemo(() => {
-    const allActions = getActionsForStatus(exportReason, actionPermissions);
+    const allActions = getActionsForStatus(format, exportReason, actionPermissions);
     const primaryAction = allActions.length > 0 ? allActions[0] : undefined;
     const remainingActions = allActions.length > 1 ? allActions.slice(1) : [];
     return { primaryAction, remainingActions };
-  }, [exportReason, actionPermissions]);
+  }, [format, exportReason, actionPermissions]);
 
   const renderActionButton = (exportAction: ImageExportAction, variant: 'primary' | 'secondary' = 'secondary') => {
     const isDisabled = activeAction !== undefined;
@@ -259,9 +269,18 @@ export const ViewImageBuildExportCard = ({
             </Flex>
           </FlexItem>
           <FlexItem>
-            <Content>
-              <Content component={ContentVariants.h2}>{getExportFormatLabel(t, format)}</Content>
-            </Content>
+            <Flex gap={{ default: 'gapSm' }}>
+              <FlexItem>
+                <Content component={ContentVariants.h2}>{getExportFormatLabel(t, format)}</Content>
+              </FlexItem>
+              {imageExport?.metadata?.name && (
+                <FlexItem>
+                  <WithTooltip showTooltip content={imageExport.metadata.name}>
+                    <InfoCircleIcon />
+                  </WithTooltip>
+                </FlexItem>
+              )}
+            </Flex>
           </FlexItem>
         </Flex>
       </CardHeader>
@@ -287,7 +306,7 @@ export const ViewImageBuildExportCard = ({
                           variant="secondary"
                           isDisabled={activeAction !== undefined}
                         >
-                          {t('Action')}
+                          {t('Actions')}
                         </MenuToggle>
                       )}
                     >
@@ -318,7 +337,7 @@ export const ViewImageBuildExportCard = ({
         </Stack>
       </CardFooter>
       {pendingConfirmAction && (
-        <ConfirmDeleteOrCancelImageExportModal action={pendingConfirmAction} onClose={handleConfirmAction} />
+        <ConfirmImageExportActionModal action={pendingConfirmAction} onClose={handleConfirmAction} />
       )}
     </Card>
   );

package/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx

@@ -439,6 +439,8 @@ export type CreateRepositoryFormProps = {
   onSuccess: (repository: Repository) => void;
   repository?: Repository;
   resourceSyncs?: ResourceSync[];
+  // If provided, the repository submission will be blocked if the validation fails
+  validateBefore?: (repo: Repository) => string | undefined;
   options?: {
     isReadOnly?: boolean;
     canUseResourceSyncs?: boolean;
@@ -447,13 +449,14 @@ export type CreateRepositoryFormProps = {
   };
 };
 
-const CreateRepositoryForm: React.FC<CreateRepositoryFormProps> = ({
+const CreateRepositoryForm = ({
   repository,
   resourceSyncs,
+  validateBefore,
   options,
   onClose,
   onSuccess,
-}) => {
+}: CreateRepositoryFormProps) => {
   const [errors, setErrors] = React.useState<string[]>();
   const { patch, remove, post } = useFetch();
   const { t } = useTranslation();
@@ -513,8 +516,14 @@ const CreateRepositoryForm: React.FC<CreateRepositoryFormProps> = ({
             setErrors([getErrorMessage(e)]);
           }
         } else {
+          const repoToCreate = getRepository(values);
+          const validationError = validateBefore?.(repoToCreate);
+          if (validationError) {
+            setErrors([validationError]);
+            return;
+          }
           try {
-            const repo = await post<Repository>('repositories', getRepository(values));
+            const repo = await post<Repository>('repositories', repoToCreate);
             if (values.useResourceSyncs) {
               const resourceSyncPromises = values.resourceSyncs.map((rs) =>
                 post<ResourceSync>('resourcesyncs', getResourceSync(values.name, rs)),
@@ -534,7 +543,7 @@ const CreateRepositoryForm: React.FC<CreateRepositoryFormProps> = ({
     >
       <CreateRepositoryFormContent isEdit={!!repository} onClose={onClose} isReadOnly={!!options?.isReadOnly}>
         {errors?.length && (
-          <Alert isInline variant="danger" title={t('An error occurred')}>
+          <Alert isInline variant="danger" title={t('Repository could not be saved')}>
             {errors.map((e, index) => (
               <div key={index}>{e}</div>
             ))}

package/src/components/Repository/CreateRepository/utils.ts

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
 import {
+  ApiVersion,
   DockerAuth,
   GitRepoSpec,
   HttpConfig,
@@ -16,7 +17,6 @@ import {
 } from '@flightctl/types';
 
 import { RepositoryFormValues, ResourceSyncFormValue } from './types';
-import { CORE_API_VERSION } from '../../../constants';
 import { getErrorMessage } from '../../../utils/error';
 import { appendJSONPatch } from '../../../utils/patch';
 import { MAX_TARGET_REVISION_LENGTH, maxLengthString, validKubernetesDnsSubdomain } from '../../form/validations';
@@ -779,7 +779,7 @@ export const getRepository = (values: Omit<RepositoryFormValues, 'useResourceSyn
     }
 
     return {
-      apiVersion: CORE_API_VERSION,
+      apiVersion: ApiVersion.ApiVersionV1beta1,
       kind: 'Repository',
       metadata: {
         name: values.name,
@@ -877,7 +877,7 @@ export const getRepository = (values: Omit<RepositoryFormValues, 'useResourceSyn
   }
 
   return {
-    apiVersion: CORE_API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1beta1,
     kind: 'Repository',
     metadata: {
       name: values.name,
@@ -888,7 +888,7 @@ export const getRepository = (values: Omit<RepositoryFormValues, 'useResourceSyn
 
 export const getResourceSync = (repositoryId: string, values: ResourceSyncFormValue): ResourceSync => {
   return {
-    apiVersion: CORE_API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1beta1,
     kind: 'ResourceSync',
     metadata: {
       name: values.name,

package/src/components/form/RepositorySelect.tsx

@@ -214,6 +214,7 @@ const RepositorySelect = ({
           type={repoType}
           onClose={() => setCreateRepoModalOpen(false)}
           onSuccess={handleCreateRepository}
+          validateBeforeCreate={validateRepoSelection}
         />
       )}
     </>

package/src/components/form/UploadField.tsx

@@ -15,44 +15,38 @@ type UploadFieldProps = {
   maxFileBytes?: number;
 };
 
-const UploadHelperText = ({
+const ONE_MB = 1024 * 1024;
+
+const UploadMaxFileSizeHelperText = ({ maxFileBytes }: { maxFileBytes: number }) => {
+  const { t } = useTranslation();
+
+  const showKB = maxFileBytes < ONE_MB;
+  const maxFileSize = maxFileBytes / (showKB ? 1024 : ONE_MB);
+
+  const helperText = showKB
+    ? t('Max file size {{ maxFileSize }} KB', { maxFileSize })
+    : t('Max file size {{ maxFileSize }} MB', { maxFileSize });
+
+  return <DefaultHelperText helperText={helperText} />;
+};
+
+const UploadErrorHelperText = ({
   meta,
   isUploading,
   isRejected,
-  maxFileBytes,
 }: {
   meta?: FieldMetaProps<unknown>;
   isUploading: boolean;
   isRejected: boolean;
-  maxFileBytes?: number;
 }) => {
   const { t } = useTranslation();
 
-  const maxFileMB = (maxFileBytes || 0) / (1024 * 1024);
-
-  const defaultContent = maxFileBytes ? (
-    <DefaultHelperText helperText={t('Max file size {{ maxFileSize }} MB', { maxFileSize: maxFileMB })} />
-  ) : null;
   if (isRejected) {
-    return (
-      <>
-        {defaultContent}
-        <ErrorHelperText
-          error={t('Content exceeds max file size of {{ maxFileSize }} MB', {
-            maxFileSize: maxFileMB,
-          })}
-        />
-      </>
-    );
+    return <ErrorHelperText error={t('File exceeds maximum allowed size.')} />;
   } else if (!isUploading && !!meta?.error) {
-    return (
-      <>
-        {defaultContent}
-        <ErrorHelperText meta={meta} />
-      </>
-    );
+    return <ErrorHelperText meta={meta} />;
   }
-  return defaultContent;
+  return null;
 };
 
 const UploadField = ({ ariaLabel, maxFileBytes, isRequired, name }: UploadFieldProps) => {
@@ -83,8 +77,9 @@ const UploadField = ({ ariaLabel, maxFileBytes, isRequired, name }: UploadFieldP
       }
     }
 
-    void setValue(file);
+    // To prevent timing issues with validations, we must touch the field before we set the new value
     void setTouched(true);
+    void setValue(file, true);
     setIsRejected(false);
   };
 
@@ -105,7 +100,9 @@ const UploadField = ({ ariaLabel, maxFileBytes, isRequired, name }: UploadFieldP
         onDataChange={handleFileChange}
         onTextChange={handleFileChange}
         onFileInputChange={(_event, file) => {
-          if (!maxFileBytes || file.size <= maxFileBytes) {
+          if (maxFileBytes && file.size > maxFileBytes) {
+            handleFileRejected(true);
+          } else {
             setFilename(file.name);
             setIsRejected(false);
           }
@@ -122,12 +119,14 @@ const UploadField = ({ ariaLabel, maxFileBytes, isRequired, name }: UploadFieldP
         }}
         onClearClick={() => {
           setFilename('');
+          if (!isRequired) {
+            void setTouched(false);
+          }
           void setValue('');
-          void setTouched(false);
         }}
       />
-
-      <UploadHelperText maxFileBytes={maxFileBytes} meta={meta} isUploading={isFileUploading} isRejected={isRejected} />
+      {maxFileBytes && <UploadMaxFileSizeHelperText maxFileBytes={maxFileBytes} />}
+      <UploadErrorHelperText meta={meta} isUploading={isFileUploading} isRejected={isRejected} />
     </FormGroup>
   );
 };

package/src/components/form/validations.ts

@@ -47,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_]*$/;
 
@@ -230,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));
 
@@ -258,7 +275,7 @@ export const validOsImage = (t: TFunction, { isFleet }: { isFleet: boolean }) =>
         }
       }
 
-      return BASIC_DEVICE_OS_IMAGE_REGEXP.test(validateOsImage);
+      return OCI_IMAGE_FULL_REGEXP.test(validateOsImage);
     },
   );
 
@@ -654,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(
@@ -678,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),
     }),
@@ -693,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),
     }),
   );
@@ -710,9 +736,7 @@ export const validApplicationsSchema = (t: TFunction) => {
               .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),
-            image: Yup.string()
-              .required(t('Image is required.'))
-              .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
+            image: requiredOciImageSchema(t),
             ports: Yup.array().of(
               Yup.object()
                 .shape({
@@ -749,9 +773,7 @@ export const validApplicationsSchema = (t: TFunction) => {
               .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.')),
+            image: requiredOciImageSchema(t),
             namespace: validHelmNamespace(t),
             valuesYaml: Yup.string().test('valid-yaml', t('YAML content is invalid.'), (value) => {
               if (!value || value.trim() === '') {
@@ -778,9 +800,7 @@ 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),
           });