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

package/src/components/ErrorAlert/ErrorAlert.tsx

@@ -1,12 +1,22 @@
 import * as React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Alert, AlertActionLink } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/useTranslation';
 import { getErrorMessage } from '../../utils/error';
 
-const ErrorAlert = ({ error }: { error: unknown }) => {
+type ErrorAlertProps = {
+  error: unknown;
+  onRetry?: VoidFunction;
+};
+
+const ErrorAlert = ({ error, onRetry }: ErrorAlertProps) => {
   const { t } = useTranslation();
   return (
-    <Alert isInline variant="danger" title={t('Unexpected error occurred')}>
+    <Alert
+      isInline
+      variant="danger"
+      title={t('Unexpected error occurred')}
+      actionLinks={onRetry ? <AlertActionLink onClick={onRetry}>{t('Try again')}</AlertActionLink> : undefined}
+    >
       {getErrorMessage(error)}
     </Alert>
   );

package/src/components/Fleet/CreateFleet/utils.ts

@@ -1,7 +1,6 @@
-import { Fleet, PatchRequest } from '@flightctl/types';
 import { TFunction } from 'i18next';
 import * as Yup from 'yup';
-import { CORE_API_VERSION } from '../../../constants';
+import { ApiVersion, Fleet, PatchRequest } from '@flightctl/types';
 import { toAPILabel } from '../../../utils/labels';
 import {
   systemdUnitListValidationSchema,
@@ -178,7 +177,7 @@ export const getFleetResource = (values: FleetFormValues): Fleet => {
           },
         };
   const fleet: Fleet = {
-    apiVersion: CORE_API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1beta1,
     kind: 'Fleet',
     metadata: {
       name: values.name,

package/src/components/ImageBuilds/ConfirmImageExportModal/ConfirmImageExportModal.tsx

@@ -3,9 +3,9 @@ import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/
 
 import { useTranslation } from '../../../hooks/useTranslation';
 
-export type ConfirmImageExportAction = 'cancel' | 'delete';
+export type ConfirmImageExportAction = 'cancel' | 'delete' | 'rebuild';
 
-const ConfirmDeleteOrCancelImageExportModal = ({
+const ConfirmImageExportActionModal = ({
   action,
   onClose,
 }: {
@@ -17,16 +17,29 @@ const ConfirmDeleteOrCancelImageExportModal = ({
   let title = '';
   let message = '';
   let confirmButtonTitle = '';
-  if (action === 'cancel') {
-    title = t('Cancel image export?');
-    message = t('This will immediately stop the current process. As a result, no images will be exported.');
-    confirmButtonTitle = t('Cancel image export');
-  } else if (action === 'delete') {
-    title = t('Delete image export?');
-    message = t(
-      'This image export will be permanently removed. The actual image files in your storage will not be deleted.',
-    );
-    confirmButtonTitle = t('Delete');
+
+  switch (action) {
+    case 'cancel':
+      title = t('Cancel image export?');
+      message = t(
+        'This will immediately stop the current process. As a result, the image will not be exported in this format.',
+      );
+      confirmButtonTitle = t('Cancel image export');
+      break;
+    case 'delete':
+      title = t('Delete image export?');
+      message = t(
+        'This image export will be permanently removed. The actual image files in your storage will not be deleted.',
+      );
+      confirmButtonTitle = t('Delete');
+      break;
+    case 'rebuild':
+      title = t('Rebuild image export?');
+      message = t(
+        'Rebuilding updates the image currently displayed in the console. Previous versions remain accessible via the flightctl CLI.',
+      );
+      confirmButtonTitle = t('Rebuild');
+      break;
   }
 
   return (
@@ -34,15 +47,15 @@ const ConfirmDeleteOrCancelImageExportModal = ({
       <ModalHeader title={title} />
       <ModalBody>{message}</ModalBody>
       <ModalFooter>
-        <Button key="confirm" variant="danger" onClick={() => onClose(true)}>
+        <Button key="confirm" variant={action === 'rebuild' ? 'primary' : 'danger'} onClick={() => onClose(true)}>
           {confirmButtonTitle}
         </Button>
         <Button key="cancel" variant="link" onClick={() => onClose(false)}>
-          {t('Close')}
+          {action === 'cancel' ? t('Close') : t('Cancel')}
         </Button>
       </ModalFooter>
     </Modal>
   );
 };
 
-export default ConfirmDeleteOrCancelImageExportModal;
+export default ConfirmImageExportActionModal;

package/src/components/ImageBuilds/CreateImageBuildWizard/CreateImageBuildWizard.tsx

@@ -70,11 +70,16 @@ const CreateImageBuildWizard = () => {
   const [error, setError] = React.useState<ImageBuildWizardError>();
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
   const [imageBuildId, imageBuild, imageBuildLoading, editError] = useEditImageBuild();
-  const { isLoading: registriesLoading, error: registriesError } = useOciRegistriesContext();
+  const { ociRegistries, isLoading: registriesLoading, error: registriesError } = useOciRegistriesContext();
 
   const isEdit = !!imageBuildId;
   const buildReason = imageBuild ? getImageBuildStatusReason(imageBuild) : undefined;
 
+  const availableRepositoryIds = React.useMemo(
+    () => new Set(ociRegistries.map((r) => r.metadata?.name as string)),
+    [ociRegistries],
+  );
+
   let title: string;
   if (isEdit) {
     title =
@@ -117,7 +122,7 @@ const CreateImageBuildWizard = () => {
             </Alert>
           ) : (
             <Formik<ImageBuildFormValues>
-              initialValues={getInitialValues(imageBuild)}
+              initialValues={getInitialValues(imageBuild, availableRepositoryIds)}
               validationSchema={getValidationSchema(t)}
               validateOnMount
               onSubmit={async (values) => {
@@ -184,7 +189,7 @@ const CreateImageBuildWizard = () => {
                         setCurrentStep(step);
                       }}
                     >
-                      <WizardStep name={t('Image details')} id={sourceImageStepId}>
+                      <WizardStep name={t('Base image')} id={sourceImageStepId}>
                         {(!currentStep || currentStep?.id === sourceImageStepId) && <SourceImageStep />}
                       </WizardStep>
                       <WizardStep

package/src/components/ImageBuilds/CreateImageBuildWizard/steps/OutputImageStep.tsx

@@ -37,7 +37,7 @@ const OutputImageStep = () => {
   const writableRepoValidation = React.useCallback(
     (repo: Repository) => {
       if (isOciRepoSpec(repo.spec) && repo.spec.accessMode === OciRepoSpec.accessMode.READ) {
-        return t('Repository is read-only and cannot be used as the target repository.');
+        return t('Repositories used for output images must be writable.');
       }
       return undefined;
     },

package/src/components/ImageBuilds/CreateImageBuildWizard/steps/RegistrationStep.tsx

@@ -22,6 +22,7 @@ import { FormikErrors, useFormikContext } from 'formik';
 
 import { BindingType } from '@flightctl/types/imagebuilder';
 import { ImageBuildFormValues } from '../types';
+import { PUBLIC_KEY_MAX_LENGTH } from '../utils';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import FlightCtlForm from '../../../form/FlightCtlForm';
 import TextField from '../../../form/TextField';
@@ -31,7 +32,14 @@ import { CERTIFICATE_VALIDITY_IN_YEARS } from '../../../../constants';
 
 export const registrationStepId = 'registration';
 
-export const isRegistrationStepValid = (errors: FormikErrors<ImageBuildFormValues>) => !errors.bindingType;
+export const isRegistrationStepValid = (errors: FormikErrors<ImageBuildFormValues>) => {
+  const { userConfiguration } = errors;
+  if (!userConfiguration) {
+    return true;
+  }
+
+  return !userConfiguration.username && !userConfiguration.publickey;
+};
 
 const RegistrationStep = () => {
   const { t } = useTranslation();
@@ -52,11 +60,7 @@ const RegistrationStep = () => {
   };
 
   const handleRemoteAccessToggle = (enabled: boolean) => {
-    if (enabled && !values.userConfiguration) {
-      setFieldValue('userConfiguration', { username: '', publickey: '', enabled: true });
-      return;
-    }
-    setFieldValue('userConfiguration.enabled', enabled);
+    setFieldValue('remoteAccessEnabled', enabled);
   };
 
   return (
@@ -158,19 +162,23 @@ const RegistrationStep = () => {
       <Grid lg={5} span={8}>
         <FormSection title={t('Remote access')}>
           <CheckboxField
-            name="userConfiguration.enabled"
+            name="remoteAccessEnabled"
             label={t('Provide an SSH public key to enable passwordless login once your image is deployed.')}
             onChangeCustom={handleRemoteAccessToggle}
           >
-            <FormGroup label={t('Username')} fieldId="user-config-username">
+            <FormGroup label={t('Username')} fieldId="user-config-username" isRequired>
               <TextField
                 name="userConfiguration.username"
                 aria-label={t('Username')}
                 helperText={t('The username for the user account')}
               />
             </FormGroup>
-            <FormGroup label={t('SSH public key')} fieldId="user-config-publickey">
-              <UploadField name="userConfiguration.publickey" ariaLabel={t('SSH public key')} />
+            <FormGroup label={t('SSH public key')} fieldId="user-config-publickey" isRequired>
+              <UploadField
+                name="userConfiguration.publickey"
+                ariaLabel={t('SSH public key')}
+                maxFileBytes={PUBLIC_KEY_MAX_LENGTH}
+              />
             </FormGroup>
           </CheckboxField>
           <Content component="small">

package/src/components/ImageBuilds/CreateImageBuildWizard/steps/ReviewStep.tsx

@@ -54,7 +54,7 @@ const ReviewStep = ({ error }: ReviewStepProps) => {
   );
 
   const isEarlyBinding = values.bindingType === BindingType.BindingTypeEarly;
-  const remoteAccessUsername = values.userConfiguration?.enabled ? values.userConfiguration?.username || '' : '';
+  const remoteAccessUsername = values.remoteAccessEnabled ? values.userConfiguration.username || '' : '';
 
   return (
     <Stack hasGutter>
@@ -63,6 +63,10 @@ const ReviewStep = ({ error }: ReviewStepProps) => {
           <CardTitle>{t('Base image')}</CardTitle>
           <CardBody>
             <FlightCtlDescriptionList isHorizontal isCompact>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Build name')}</DescriptionListTerm>
+                <DescriptionListDescription>{values.buildName}</DescriptionListDescription>
+              </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>{t('Source repository')}</DescriptionListTerm>
                 <DescriptionListDescription>{values.source.repository}</DescriptionListDescription>

package/src/components/ImageBuilds/CreateImageBuildWizard/steps/SourceImageStep.tsx

@@ -6,6 +6,7 @@ import { RepoSpecType } from '@flightctl/types';
 import { ImageBuildFormValues } from '../types';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import FlightCtlForm from '../../../form/FlightCtlForm';
+import NameField from '../../../form/NameField';
 import TextField from '../../../form/TextField';
 import RepositorySelect from '../../../form/RepositorySelect';
 import { usePermissionsContext } from '../../../common/PermissionsContext';
@@ -13,11 +14,15 @@ import { RESOURCE, VERB } from '../../../../types/rbac';
 import { getImageReference } from '../../../../utils/imageBuilds';
 import ImageUrlCard from '../../ImageUrlCard';
 import { useOciRegistriesContext } from '../../OciRegistriesContext';
+import { getBuildNameValidations } from '../../../form/validations';
 
 export const sourceImageStepId = 'source-image';
 
 export const isSourceImageStepValid = (errors: FormikErrors<ImageBuildFormValues>) => {
-  const { source } = errors;
+  const { buildName, source } = errors;
+  if (buildName) {
+    return false;
+  }
   if (!source) {
     return true;
   }
@@ -39,6 +44,13 @@ const SourceImageStep = () => {
     <FlightCtlForm>
       <Grid lg={5} span={8}>
         <FormSection>
+          <NameField
+            name="buildName"
+            aria-label={t('Build name')}
+            isRequired
+            resourceType="imagebuilds"
+            validations={getBuildNameValidations(t)}
+          />
           <RepositorySelect
             name="source.repository"
             label={t('Source repository')}

package/src/components/ImageBuilds/CreateImageBuildWizard/types.ts

@@ -6,17 +6,14 @@ import {
 } from '@flightctl/types/imagebuilder';
 import { ExportFormatType } from '@flightctl/types/imagebuilder';
 
-type ImageBuildUserConfigurationForm = ImageBuildUserConfiguration & {
-  enabled?: boolean;
-};
-
 export type ImageBuildFormValues = {
-  // name is autogenereated by us
+  buildName: string;
   source: ImageBuildSource;
   destination: ImageBuildDestination;
   bindingType: BindingType;
   exportFormats: ExportFormatType[];
-  userConfiguration?: ImageBuildUserConfigurationForm;
+  remoteAccessEnabled: boolean;
+  userConfiguration: ImageBuildUserConfiguration;
 };
 
 export type ImageBuildWizardError =

package/src/components/ImageBuilds/CreateImageBuildWizard/utils.ts

@@ -2,32 +2,148 @@ import { TFunction } from 'i18next';
 import * as Yup from 'yup';
 
 import {
+  ApiVersion,
   BindingType,
   ExportFormatType,
   ImageBuild,
   ImageBuildDestination,
   ImageBuildSource,
+  ImageBuildUserConfiguration,
   ImageExport,
   ResourceKind,
 } from '@flightctl/types/imagebuilder';
-import { IMAGEBUILDER_API_VERSION } from '../../../constants';
+import { validImageBuildName } from '../../form/validations';
 import { ImageBuildFormValues } from './types';
 import { ImageBuildWithExports } from '../../../types/extraTypes';
 
-export const getValidationSchema = (t: TFunction) => {
-  return Yup.object<ImageBuildFormValues>({
-    source: Yup.object<ImageBuildSource>({
-      repository: Yup.string().required(t('Source repository is required')),
-      imageName: Yup.string().required(t('Image name is required')),
-      imageTag: Yup.string().required(t('Image tag is required')),
-    }).required(t('Source image is required')),
-    destination: Yup.object<ImageBuildDestination>({
-      repository: Yup.string().required(t('Target repository is required')),
-      imageName: Yup.string().required(t('Image name is required')),
-      imageTag: Yup.string().required(t('Image tag is required')),
-    }).required(t('Target image is required')),
-    bindingType: Yup.string<BindingType>().required(t('Binding type is required')),
+export const PUBLIC_KEY_MAX_LENGTH = 8 * 1024; // (8 KB)
+const VALID_SSH_PUBLIC_KEY_TYPES = [
+  'ssh-rsa',
+  'ssh-ed25519',
+  'ecdsa-sha2-nistp256',
+  'ecdsa-sha2-nistp384',
+  'ecdsa-sha2-nistp521',
+  'ssh-dss',
+];
+
+const SSH_PUBLIC_KEY_BASE64_DATA_REGEX = /^(?=.{50,}$)[A-Za-z0-9+/]+=*$/;
+// Characters that could be used for injection attacks
+const MALICIOUS_PUBLIC_KEY_CHARACTERS = /[;|&`()[\]{}<>"'\\\t$]/;
+
+const OCI_IMAGE_NAME_MAX_LENGTH = 255;
+const OCI_IMAGE_NAME_REGEX = /^[a-z0-9]+(?:[._-]+[a-z0-9]+)*(?:\/[a-z0-9]+(?:[._-]+[a-z0-9]+)*)*$/;
+const OCI_IMAGE_NAME_VALID_CHARS = /^[a-z0-9._/-]+$/;
+
+const OCI_IMAGE_TAG_MAX_LENGTH = 128;
+const OCI_IMAGE_TAG_REGEX = /^[\w][\w.-]{0,127}$/;
+const OCI_IMAGE_TAG_VALID_CHARS = /^[\w.-]+$/;
+
+/** Returns an error message for image name: invalid chars, or invalid format. */
+const getImageNameValidationError = (value: string, t: TFunction): string | undefined => {
+  if (!value) return undefined;
+  if (value.length > OCI_IMAGE_NAME_MAX_LENGTH) {
+    return t('Image name must not exceed {{max}} characters.', { max: OCI_IMAGE_NAME_MAX_LENGTH });
+  }
+  if (!OCI_IMAGE_NAME_VALID_CHARS.test(value)) {
+    return t('Image name may only contain alphanumeric characters, dots, underscores, hyphens, and slashes.');
+  }
+  if (!OCI_IMAGE_NAME_REGEX.test(value)) {
+    return t('Only alphanumeric characters are allowed at the start and end of each path component.');
+  }
+  return undefined;
+};
+
+const getImageTagValidationError = (value: string, t: TFunction): string | undefined => {
+  if (!value) return undefined;
+  if (value.length > OCI_IMAGE_TAG_MAX_LENGTH) {
+    return t('Image tag must not exceed {{max}} characters.', { max: OCI_IMAGE_TAG_MAX_LENGTH });
+  }
+  if (!OCI_IMAGE_TAG_VALID_CHARS.test(value)) {
+    return t('Image tag may only contain letters, numbers, underscores, dots, and hyphens.');
+  }
+  if (!OCI_IMAGE_TAG_REGEX.test(value)) {
+    return t('Image tag must start with a letter, number, or underscore.');
+  }
+  return undefined;
+};
+
+const getPublicKeyValidationError = (publicKey: string, t: TFunction): string | undefined => {
+  if (publicKey.length > PUBLIC_KEY_MAX_LENGTH) {
+    return t('SSH public key is too long');
+  }
+
+  // Allow newlines only at the end
+  const trimmedKey = publicKey.replace(/[\r\n]+$/g, '');
+  if (/[\r\n]/.test(trimmedKey)) {
+    return t('A single public key can be provided only');
+  }
+
+  if (MALICIOUS_PUBLIC_KEY_CHARACTERS.test(trimmedKey)) {
+    return t('Invalid SSH public key');
+  }
+
+  const parts = trimmedKey.trim().split(/\s+/);
+  if (parts.length < 2) {
+    return t('Invalid SSH public key format. Expected: "[TYPE] key [comment]"');
+  }
+
+  const keyType = parts[0];
+  if (!VALID_SSH_PUBLIC_KEY_TYPES.includes(keyType)) {
+    return t('Unsupported SSH public key type. Supported types: {{supportedTypes}}', {
+      supportedTypes: VALID_SSH_PUBLIC_KEY_TYPES.join(', '),
+    });
+  }
+
+  const base64Data = parts[1];
+  if (!SSH_PUBLIC_KEY_BASE64_DATA_REGEX.test(base64Data)) {
+    return t('Invalid SSH public key data');
+  }
+
+  return undefined;
+};
+
+const validImageBuildImageFields = (t: TFunction) =>
+  Yup.object<ImageBuildSource | ImageBuildDestination>({
+    repository: Yup.string().required(t('Repository is required')),
+    imageName: Yup.string()
+      .required(t('Image name is required'))
+      .test('oci-image-name', function (value) {
+        if (!value) return true;
+        const error = getImageNameValidationError(value, t);
+        return error ? this.createError({ message: error }) : true;
+      }),
+    imageTag: Yup.string()
+      .required(t('Image tag is required'))
+      .test('oci-image-tag', function (value) {
+        if (!value) return true;
+        const error = getImageTagValidationError(value, t);
+        return error ? this.createError({ message: error }) : true;
+      }),
   });
+
+export const getValidationSchema = (t: TFunction) => {
+  return Yup.lazy((values: ImageBuildFormValues) =>
+    Yup.object<ImageBuildFormValues>({
+      buildName: validImageBuildName(t),
+      source: validImageBuildImageFields(t).required(t('Source image is required')),
+      destination: validImageBuildImageFields(t).required(t('Target image is required')),
+      bindingType: Yup.string<BindingType>().required(t('Binding type is required')),
+      userConfiguration: Yup.object<ImageBuildUserConfiguration>({
+        username: values.remoteAccessEnabled ? Yup.string().required(t('Username is required')) : Yup.string(),
+        publickey: values.remoteAccessEnabled
+          ? Yup.string()
+              .required(t('SSH public key is required'))
+              .test('flightctl-ssh-public-key', function (publicKey) {
+                if (!publicKey) {
+                  return true;
+                }
+                const error = getPublicKeyValidationError(publicKey, t);
+                return error ? this.createError({ message: error }) : true;
+              })
+          : Yup.string(),
+      }),
+    }),
+  );
 };
 
 // Returns an array with one item per format (VMDK, QCOW2, ISO), where each item is either
@@ -84,32 +200,40 @@ export const toImageBuildWithExports = (imageBuild: ImageBuild): ImageBuildWithE
   };
 };
 
-export const getInitialValues = (imageBuild?: ImageBuildWithExports): ImageBuildFormValues => {
+const getExistingImageData = (image: ImageBuildSource | ImageBuildDestination, repoIds: Set<string>) => {
+  if (repoIds.has(image.repository)) {
+    return image;
+  }
+  // When copying the image build, drop the reference to the repository if it doesn't exist anymore
+  return {
+    ...image,
+    repository: '',
+  };
+};
+
+export const getInitialValues = (
+  imageBuild: ImageBuildWithExports | undefined,
+  repoIds: Set<string>,
+): ImageBuildFormValues => {
   if (imageBuild) {
     const exportFormats = imageBuild.imageExports
       .filter((ie): ie is ImageExport => ie !== undefined)
       .map((imageExport) => imageExport.spec.format);
     const userConfig = imageBuild.spec.userConfiguration;
-    const userConfiguration = userConfig
-      ? {
-          ...userConfig,
-          enabled: !!(userConfig.username || userConfig.publickey),
-        }
-      : {
-          username: '',
-          publickey: '',
-          enabled: false,
-        };
     return {
-      source: imageBuild.spec.source,
-      destination: imageBuild.spec.destination,
+      // Since we're always creating new imageBuilds, we don't copy the current name
+      buildName: '',
+      source: getExistingImageData(imageBuild.spec.source, repoIds),
+      destination: getExistingImageData(imageBuild.spec.destination, repoIds),
       bindingType: imageBuild.spec.binding.type as BindingType,
       exportFormats: exportFormats || [],
-      userConfiguration,
+      remoteAccessEnabled: !!(userConfig?.username || userConfig?.publickey),
+      userConfiguration: userConfig || { username: '', publickey: '' },
     };
   }
 
   return {
+    buildName: '',
     source: {
       repository: '',
       imageName: '',
@@ -122,10 +246,10 @@ export const getInitialValues = (imageBuild?: ImageBuildWithExports): ImageBuild
     },
     bindingType: BindingType.BindingTypeEarly,
     exportFormats: [],
+    remoteAccessEnabled: false,
     userConfiguration: {
       username: '',
       publickey: '',
-      enabled: false,
     },
   };
 };
@@ -136,13 +260,13 @@ const getHash = () =>
     .toString(16)
     .padStart(6, '0');
 
-const generateBuildName = () => `imagebuild-${getHash()}`;
 const generateExportName = (imageBuildName: string, format: ExportFormatType) => {
-  return `${imageBuildName}-${format}-${getHash()}`;
+  const formatKey = format === ExportFormatType.ExportFormatTypeQCOW2DiskContainer ? 'qcow2-disk' : format;
+  return `${imageBuildName}-${formatKey}-${getHash()}`;
 };
 
 export const getImageBuildResource = (values: ImageBuildFormValues): ImageBuild => {
-  const name = generateBuildName();
+  const name = values.buildName;
   const spec: ImageBuild['spec'] = {
     source: values.source,
     destination: values.destination,
@@ -152,9 +276,9 @@ export const getImageBuildResource = (values: ImageBuildFormValues): ImageBuild
   };
 
   // Allow the user to uncheck the toggle without having cleared the fields
-  const username = values.userConfiguration?.username || '';
-  const publickey = values.userConfiguration?.publickey || '';
-  if (values.userConfiguration?.enabled && username && publickey) {
+  const username = values.userConfiguration.username || '';
+  const publickey = values.userConfiguration.publickey || '';
+  if (values.remoteAccessEnabled && username && publickey) {
     spec.userConfiguration = {
       username,
       publickey,
@@ -162,7 +286,7 @@ export const getImageBuildResource = (values: ImageBuildFormValues): ImageBuild
   }
 
   return {
-    apiVersion: IMAGEBUILDER_API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1alpha1,
     kind: ResourceKind.IMAGE_BUILD,
     metadata: {
       name,
@@ -175,7 +299,7 @@ export const getImageExportResource = (imageBuildName: string, format: ExportFor
   const exportName = generateExportName(imageBuildName, format);
 
   return {
-    apiVersion: IMAGEBUILDER_API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1alpha1,
     kind: ResourceKind.IMAGE_EXPORT,
     metadata: {
       name: exportName,

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

@@ -60,7 +60,7 @@ const ImageBuildDetailsPageContent = () => {
       resourceTypeLabel={t('Image builds')}
       nav={
         <TabsNav aria-label="Image build details tabs" tabKeys={tabKeys}>
-          <Tab eventKey="details" title={t('Image details')} />
+          <Tab eventKey="details" title={t('Base image')} />
           <Tab eventKey="exports" title={t('Export images')} />
           <Tab eventKey="yaml" title={t('YAML')} />
           {canViewLogs && <Tab eventKey="logs" title={t('Logs')} />}