@flightctl/ui-components 1.1.0-rc1 → 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 { API_VERSION } from '../../../constants';
+import { ApiVersion, Fleet, PatchRequest } from '@flightctl/types';
 import { toAPILabel } from '../../../utils/labels';
 import {
   systemdUnitListValidationSchema,
@@ -34,7 +33,7 @@ import {
   getDeviceSpecConfigPatches,
   getSystemdUnitsValues,
   hasMicroshiftRegistrationConfig,
-  toAPIApplication,
+  toApiApplication,
 } from '../../Device/EditDeviceWizard/deviceSpecUtils';
 import { getDisruptionBudgetValues, getRolloutPolicyValues, getUpdatePolicyValues } from './fleetSpecUtils';
 import { FleetFormValues, UpdatePolicyForm } from '../../../types/deviceSpec';
@@ -178,7 +177,7 @@ export const getFleetResource = (values: FleetFormValues): Fleet => {
           },
         };
   const fleet: Fleet = {
-    apiVersion: API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1beta1,
     kind: 'Fleet',
     metadata: {
       name: values.name,
@@ -197,7 +196,7 @@ export const getFleetResource = (values: FleetFormValues): Fleet => {
         spec: {
           os: values.osImage ? { image: values.osImage || '' } : undefined,
           config: values.configTemplates.map(getApiConfig),
-          applications: values.applications.map(toAPIApplication),
+          applications: values.applications.map(toApiApplication),
           ...systemdPatterns,
         },
       },

package/src/components/Fleet/ImportFleetWizard/steps/RepositoryStep.tsx

@@ -14,6 +14,7 @@ import FormSelect from '../../../form/FormSelect';
 import FlightCtlForm from '../../../form/FlightCtlForm';
 import { usePermissionsContext } from '../../../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../../../types/rbac';
+import WithTooltip from '../../../common/WithTooltip';
 
 export const repositoryStepId = 'repository';
 
@@ -93,14 +94,16 @@ const RepositoryStep = ({ repositories, hasLoaded }: { repositories: Repository[
         {canCreateRepo && (
           <FormSection>
             <FormGroup isInline>
-              <Radio
-                isChecked={values.useExistingRepo}
-                onChange={() => setFieldValue('useExistingRepo', true, true)}
-                id="existing-repo"
-                name="repo"
-                label={t('Use an existing Git repository')}
-                isDisabled={noRepositoriesExist}
-              />
+              <WithTooltip showTooltip={noRepositoriesExist} content={t('No Git repositories found')}>
+                <Radio
+                  isChecked={values.useExistingRepo}
+                  onChange={() => setFieldValue('useExistingRepo', true, true)}
+                  id="existing-repo"
+                  name="repo"
+                  label={t('Use an existing Git repository')}
+                  isDisabled={noRepositoriesExist}
+                />
+              </WithTooltip>
               <Radio
                 isChecked={!values.useExistingRepo}
                 onChange={() => setFieldValue('useExistingRepo', false, true)}

package/src/components/ImageBuilds/CancelImageBuildModal/CancelImageBuildModal.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+
+const CancelImageBuildModal = ({
+  imageBuildId,
+  onClose,
+}: {
+  imageBuildId: string;
+  onClose: (confirmed?: boolean) => void;
+}) => {
+  const { t } = useTranslation();
+  const { post } = useFetch();
+
+  const [error, setError] = React.useState<string>();
+  const [isCancelling, setIsCancelling] = React.useState<boolean>(false);
+
+  return (
+    <Modal isOpen onClose={() => onClose()} variant="small">
+      <ModalHeader title={t('Cancel and discard build?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Content>
+              {t(
+                'This will immediately stop the current process. All progress will be lost, and the associated data will be permanently deleted.',
+              )}
+            </Content>
+          </StackItem>
+          {error && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('Failed to cancel image build')}>
+                {error}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          key="confirm"
+          variant="danger"
+          isDisabled={isCancelling}
+          isLoading={isCancelling}
+          onClick={async () => {
+            setError(undefined);
+            try {
+              setIsCancelling(true);
+              await post(`imagebuilds/${imageBuildId}/cancel`, {});
+              onClose(true);
+            } catch (err) {
+              setError(getErrorMessage(err));
+            } finally {
+              setIsCancelling(false);
+            }
+          }}
+        >
+          {t('Cancel image build')}
+        </Button>
+        <Button key="dismiss" variant="link" onClick={() => onClose()} isDisabled={isCancelling}>
+          {t('Close')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default CancelImageBuildModal;

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+
+export type ConfirmImageExportAction = 'cancel' | 'delete' | 'rebuild';
+
+const ConfirmImageExportActionModal = ({
+  action,
+  onClose,
+}: {
+  action: ConfirmImageExportAction;
+  onClose: (isConfirmed: boolean) => void;
+}) => {
+  const { t } = useTranslation();
+
+  let title = '';
+  let message = '';
+  let confirmButtonTitle = '';
+
+  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 (
+    <Modal variant="small" isOpen onClose={() => onClose(false)}>
+      <ModalHeader title={title} />
+      <ModalBody>{message}</ModalBody>
+      <ModalFooter>
+        <Button key="confirm" variant={action === 'rebuild' ? 'primary' : 'danger'} onClick={() => onClose(true)}>
+          {confirmButtonTitle}
+        </Button>
+        <Button key="cancel" variant="link" onClick={() => onClose(false)}>
+          {action === 'cancel' ? t('Close') : t('Cancel')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+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 =