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

package/src/components/ImageBuilds/ImageExportCards.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TFunction } from 'react-i18next';
 import {
   Alert,
   AlertActionCloseButton,
@@ -10,9 +11,14 @@ import {
   CardHeader,
   Content,
   ContentVariants,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
   Flex,
   FlexItem,
   Icon,
+  MenuToggle,
+  MenuToggleElement,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -20,17 +26,91 @@ 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 WithTooltip from '../common/WithTooltip';
+import ConfirmImageExportActionModal, {
+  ConfirmImageExportAction,
+} from './ConfirmImageExportModal/ConfirmImageExportModal';
 import { ImageExportStatusDisplay } from './ImageBuildAndExportStatus';
-import { useAppContext } from '../../hooks/useAppContext';
-import { ROUTE } from '../../hooks/useNavigate';
 
 import './ImageExportCards.css';
 
+export type ImageExportAction = 'cancel' | 'delete' | 'viewLogs' | 'download' | 'retry' | 'rebuild' | 'createExport';
+
+const getActionsForStatus = (
+  format: ExportFormatType,
+  exportReason: ImageExportConditionReason | undefined,
+  actionPermissions: ImageExportAction[],
+): ImageExportAction[] => {
+  const actions: ImageExportAction[] = [];
+  switch (exportReason) {
+    case ImageExportConditionReason.ImageExportConditionReasonPending:
+      actions.push('cancel', 'delete');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonConverting:
+    case ImageExportConditionReason.ImageExportConditionReasonPushing:
+      actions.push('cancel', 'viewLogs');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonCompleted:
+      if (format !== ExportFormatType.ExportFormatTypeQCOW2DiskContainer) {
+        actions.push('download');
+      }
+      actions.push('viewLogs', 'delete', 'rebuild');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonFailed:
+    case ImageExportConditionReason.ImageExportConditionReasonCanceled:
+      actions.push('retry', 'viewLogs', 'delete');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonCanceling:
+      actions.push('viewLogs');
+      break;
+    default:
+      actions.push('createExport');
+      break;
+  }
+  return actions.filter((action) => actionPermissions.includes(action));
+};
+
+const getErrorTitle = (t: TFunction, action: ImageExportAction) => {
+  switch (action) {
+    case 'createExport':
+      return t("We couldn't export your image");
+    case 'download':
+      return t("We couldn't download your image");
+    case 'cancel':
+      return t("We couldn't cancel your image export");
+    case 'delete':
+      return t("We couldn't delete your image export");
+    default:
+      return t("We couldn't perform the action you requested");
+  }
+};
+
+const getActionTitle = (t: TFunction, action: ImageExportAction, inProgress: boolean) => {
+  switch (action) {
+    case 'cancel':
+      return inProgress ? t('Canceling...') : t('Cancel');
+    case 'delete':
+      return inProgress ? t('Deleting...') : t('Delete');
+    case 'viewLogs':
+      return t('View logs');
+    case 'download':
+      return inProgress ? t('Downloading...') : t('Download');
+    case 'retry':
+      return inProgress ? t('Retrying...') : t('Retry');
+    case 'rebuild':
+      return inProgress ? t('Rebuilding...') : t('Rebuild');
+    case 'createExport':
+      return inProgress ? t('Exporting...') : t('Export image');
+    default:
+      return t('Actions');
+  }
+};
 const iconMap: Record<ExportFormatType, React.ReactElement> = {
   [ExportFormatType.ExportFormatTypeVMDK]: <VirtualMachineIcon />,
   [ExportFormatType.ExportFormatTypeQCOW2]: <CloudSecurityIcon />,
@@ -39,17 +119,14 @@ const iconMap: Record<ExportFormatType, React.ReactElement> = {
 };
 
 export type ImageExportFormatCardProps = {
-  imageBuildId: string;
   imageReference: string | undefined;
   format: ExportFormatType;
-  error?: { message: string; mode: 'export' | 'download' } | null;
   imageExport?: ImageExport;
-  onExportImage: (format: ExportFormatType) => void;
-  onDownload: (format: ExportFormatType) => void;
+  actionPermissions: ImageExportAction[];
+  activeAction: ImageExportAction | undefined;
+  onCardAction: ({ format, action }: { format: ExportFormatType; action: ImageExportAction }) => void;
+  error?: { message: string; action: ImageExportAction } | null;
   onDismissError: VoidFunction;
-  isCreating: boolean;
-  isDownloading?: boolean;
-  isDisabled?: boolean;
 };
 
 type SelectImageBuildExportCardProps = {
@@ -60,11 +137,8 @@ type SelectImageBuildExportCardProps = {
 
 export const SelectImageBuildExportCard = ({ format, isChecked, onToggle }: SelectImageBuildExportCardProps) => {
   const { t } = useTranslation();
-
-  const title = getExportFormatLabel(t, format);
-  const description = getExportFormatDescription(t, format);
-
   const id = `export-format-${format}`;
+
   return (
     <Card id={id} isSelectable isSelected={isChecked} className="fctl-imageexport-card">
       <CardHeader
@@ -81,43 +155,91 @@ export const SelectImageBuildExportCard = ({ format, isChecked, onToggle }: Sele
           </FlexItem>
           <FlexItem>
             <Content>
-              <Content component={ContentVariants.h2}>{title}</Content>
+              <Content component={ContentVariants.h2}>{getExportFormatLabel(t, format)}</Content>
             </Content>
           </FlexItem>
         </Flex>
       </CardHeader>
-      <CardBody>{description}</CardBody>
+      <CardBody>{getExportFormatDescription(t, format)}</CardBody>
     </Card>
   );
 };
 
 export const ViewImageBuildExportCard = ({
-  imageBuildId,
   format,
   imageExport,
   imageReference,
-  onExportImage,
-  onDownload,
-  onDismissError,
-  isCreating = false,
-  isDownloading = false,
-  isDisabled = false,
+  actionPermissions,
+  onCardAction,
+  activeAction,
   error,
+  onDismissError,
 }: ImageExportFormatCardProps) => {
   const { t } = useTranslation();
-  const {
-    router: { useNavigate: useRouterNavigate, appRoutes },
-  } = useAppContext();
-  const routerNavigate = useRouterNavigate();
+  const [actionsDropdownOpen, setActionsDropdownOpen] = React.useState(false);
+  const [pendingConfirmAction, setPendingConfirmAction] = React.useState<ConfirmImageExportAction>();
   const exists = !!imageExport;
-
   const exportReason = exists ? getImageExportStatusReason(imageExport) : undefined;
-  const title = getExportFormatLabel(t, format);
-  const description = getExportFormatDescription(t, format);
 
-  const handleViewLogs = () => {
-    const baseRoute = appRoutes[ROUTE.IMAGE_BUILD_DETAILS];
-    routerNavigate(`${baseRoute}/${imageBuildId}/logs`);
+  const handleCardAction = (action: ImageExportAction) => {
+    if (
+      action === 'cancel' ||
+      action === 'delete' ||
+      (action === 'rebuild' && exportReason === ImageExportConditionReason.ImageExportConditionReasonCompleted)
+    ) {
+      setPendingConfirmAction(action);
+    } else {
+      onCardAction({ format, action });
+    }
+  };
+
+  const handleConfirmAction = (isConfirmed: boolean) => {
+    if (pendingConfirmAction && isConfirmed) {
+      onCardAction({ format, action: pendingConfirmAction });
+    }
+    setPendingConfirmAction(undefined);
+  };
+
+  const { primaryAction, remainingActions } = React.useMemo(() => {
+    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 };
+  }, [format, exportReason, actionPermissions]);
+
+  const renderActionButton = (exportAction: ImageExportAction, variant: 'primary' | 'secondary' = 'secondary') => {
+    const isDisabled = activeAction !== undefined;
+    const isLoading = exportAction === activeAction;
+
+    return (
+      <Button
+        variant={variant}
+        onClick={() => handleCardAction(exportAction)}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+      >
+        {getActionTitle(t, exportAction, isLoading)}
+      </Button>
+    );
+  };
+
+  const renderDropdownItem = (exportAction: ImageExportAction) => {
+    const isDisabled = activeAction !== undefined;
+    const isLoading = exportAction === activeAction;
+
+    return (
+      <DropdownItem
+        key={exportAction}
+        onClick={() => {
+          setActionsDropdownOpen(false);
+          handleCardAction(exportAction);
+        }}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+      >
+        {getActionTitle(t, exportAction, false)}
+      </DropdownItem>
+    );
   };
 
   return (
@@ -147,58 +269,53 @@ export const ViewImageBuildExportCard = ({
             </Flex>
           </FlexItem>
           <FlexItem>
-            <Content>
-              <Content component={ContentVariants.h2}>{title}</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>
-      <CardBody>{description}</CardBody>
+      <CardBody>{getExportFormatDescription(t, format)}</CardBody>
       <CardFooter>
         <Stack hasGutter>
           <StackItem>
-            <Flex>
-              {exportReason === ImageExportConditionReason.ImageExportConditionReasonFailed && (
-                <FlexItem>
-                  <Button
-                    variant="primary"
-                    onClick={() => onExportImage(format)}
-                    isDisabled={isDisabled}
-                    isLoading={isCreating}
-                  >
-                    {t('Retry')}
-                  </Button>
-                </FlexItem>
-              )}
-              {exportReason === ImageExportConditionReason.ImageExportConditionReasonCompleted && (
-                <FlexItem>
-                  <Button
-                    variant="secondary"
-                    onClick={() => onDownload(format)}
-                    isDisabled={isDisabled || isDownloading}
-                    isLoading={isDownloading}
-                  >
-                    {isDownloading ? t('Downloading...') : t('Download')}
-                  </Button>
-                </FlexItem>
-              )}
-              <FlexItem>
-                {exists ? (
-                  <Button variant="secondary" onClick={handleViewLogs}>
-                    {t('View logs')}
-                  </Button>
-                ) : (
-                  <Button
-                    variant="secondary"
-                    onClick={() => onExportImage(format)}
-                    isDisabled={isDisabled}
-                    isLoading={isCreating}
-                  >
-                    {t('Export image')}
-                  </Button>
+            {primaryAction && (
+              <Flex>
+                <FlexItem>{renderActionButton(primaryAction)}</FlexItem>
+                {remainingActions.length === 1 && <FlexItem>{renderActionButton(remainingActions[0])}</FlexItem>}
+                {remainingActions.length > 1 && (
+                  <FlexItem>
+                    <Dropdown
+                      isOpen={actionsDropdownOpen}
+                      onSelect={() => setActionsDropdownOpen(false)}
+                      onOpenChange={(isOpen: boolean) => setActionsDropdownOpen(isOpen)}
+                      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                        <MenuToggle
+                          ref={toggleRef}
+                          isExpanded={actionsDropdownOpen}
+                          onClick={() => setActionsDropdownOpen(!actionsDropdownOpen)}
+                          variant="secondary"
+                          isDisabled={activeAction !== undefined}
+                        >
+                          {t('Actions')}
+                        </MenuToggle>
+                      )}
+                    >
+                      <DropdownList>{remainingActions.map((actionKey) => renderDropdownItem(actionKey))}</DropdownList>
+                    </Dropdown>
+                  </FlexItem>
                 )}
-              </FlexItem>
-            </Flex>
+              </Flex>
+            )}
           </StackItem>
           <StackItem>
             <Content component={ContentVariants.small}>
@@ -209,9 +326,7 @@ export const ViewImageBuildExportCard = ({
             <AlertGroup isToast>
               <Alert
                 variant="danger"
-                title={
-                  error.mode === 'export' ? t("We couldn't export your image") : t("We couldn't download your image")
-                }
+                title={getErrorTitle(t, error.action)}
                 actionClose={<AlertActionCloseButton onClose={onDismissError} />}
               >
                 {t('Something went wrong on our end. Please review the error details and try again.')}
@@ -221,6 +336,9 @@ export const ViewImageBuildExportCard = ({
           )}
         </Stack>
       </CardFooter>
+      {pendingConfirmAction && (
+        <ConfirmImageExportActionModal action={pendingConfirmAction} onClose={handleConfirmAction} />
+      )}
     </Card>
   );
 };

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

@@ -3,5 +3,9 @@
 }
 
 .fctl-create-repo__adv-section--nested {
-    margin-left: 1.5rem;
+  margin-left: 1.5rem;
+}
+
+.fctl-create-repo__rs-checkbox {
+  --pf-v6-c-check__input--TranslateY: 0.75rem;
 }

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

@@ -402,6 +402,7 @@ const CreateRepositoryFormContent = ({ isEdit, isReadOnly, onClose, children }:
           {showResourceSyncs && canCreateRS && (
             <Checkbox
               id="use-resource-syncs"
+              className="fctl-create-repo__rs-checkbox"
               label={
                 <LabelWithHelperText
                   label={t('Use resource syncs')}
@@ -438,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;
@@ -446,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();
@@ -512,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)),
@@ -533,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 { 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: API_VERSION,
+      apiVersion: ApiVersion.ApiVersionV1beta1,
       kind: 'Repository',
       metadata: {
         name: values.name,
@@ -877,7 +877,7 @@ export const getRepository = (values: Omit<RepositoryFormValues, 'useResourceSyn
   }
 
   return {
-    apiVersion: 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: 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>
   );
 };