@flightctl/ui-components 1.0.2 → 1.1.0-rc4

package/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.css

@@ -0,0 +1,4 @@
+.fctl-update-policy--advanced .pf-v6-c-check {
+  /* Prevents Patternfly from moving these checkboxes too high relative to the center of their label */
+  --pf-v6-c-check__input--TranslateY: 0.7rem;
+}

package/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx

@@ -12,6 +12,8 @@ import UpdateStepDisruptionBudget from './UpdateStepDisruptionBudget';
 import UpdateStepUpdatePolicy from './UpdateStepUpdatePolicy';
 import CheckboxField from '../../../form/CheckboxField';
 
+import './UpdatePolicyStep.css';
+
 export const updatePolicyStepId = 'update-policy';
 
 export const isUpdatePolicyStepValid = (errors: FormikErrors<FleetFormValues>) =>
@@ -29,7 +31,7 @@ const UpdatePolicyStep = ({ isReadOnly }: { isReadOnly: boolean }) => {
       <FlightCtlForm>
         <CheckboxField name="useBasicUpdateConfig" label={t('Use basic configurations')} isDisabled={isReadOnly} />
         {!useBasicUpdateConfig ? (
-          <FormSection title={t('Advanced configurations')} titleElement="h1" className="pf-v5-u-mt-sm">
+          <FormSection title={t('Advanced configurations')} titleElement="h1" className="fctl-update-policy--advanced">
             {/* Rollout policies */}
             <CheckboxField
               name="rolloutPolicy.isAdvanced"

package/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx

@@ -120,7 +120,7 @@ const UpdateStepRolloutPolicy = ({ isReadOnly }: { isReadOnly: boolean }) => {
 
   return (
     <>
-      <Alert isInline variant="info" title={t('Batch sequencing')}>
+      <Alert isInline variant="info" title={t('Batch sequencing')} className="pf-v6-u-mb-md">
         {t('Batches will be applied from first to last.')}
         <br />
         {t('Devices that are not part of any batch will be updated last.')}

package/src/components/Fleet/CreateFleet/steps/UpdateStepUpdatePolicy.css

@@ -1,3 +1,3 @@
-.fctl-policy-timezone .pf-v5-c-form__helper-text {
+.fctl-policy-timezone .pf-v6-c-form__helper-text {
   margin-top: 0.5rem;
 }

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/DeleteFleetModal/DeleteFleetModal.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { Alert, Button, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+import { Alert, Button, Modal, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
 
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useFetch } from '../../../hooks/useFetch';

package/src/components/Fleet/FleetDetails/FleetDetailsContent.tsx

@@ -83,7 +83,7 @@ const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
           </CardBody>
         </Card>
         {devicesSummary && (
-          <Card className="pf-v5-u-mt-md">
+          <Card className="pf-v6-u-mt-md">
             <CardTitle>{t('Fleet devices')}</CardTitle>
             <CardBody>
               <FleetDevicesCharts fleetId={fleetId} devicesSummary={devicesSummary} />

package/src/components/Fleet/FleetDetails/FleetDetailsPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropdownItem, DropdownList, Nav, NavList } from '@patternfly/react-core';
+import { DropdownItem, DropdownList, Tab } from '@patternfly/react-core';
 import { Fleet } from '@flightctl/types';
 
 import { RESOURCE, VERB } from '../../../types/rbac';
@@ -9,13 +9,13 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { usePermissionsContext } from '../../common/PermissionsContext';
 import { useAppContext } from '../../../hooks/useAppContext';
-import NavItem from '../../NavItem/NavItem';
 import DetailsPage from '../../DetailsPage/DetailsPage';
 import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
 import DeleteFleetModal from '../DeleteFleetModal/DeleteFleetModal';
 import FleetDetailsContent from './FleetDetailsContent';
 import FleetRestoreBanner from './FleetRestoreBanner';
 import FleetYaml from './FleetYaml';
+import TabsNav from '../../TabsNav/TabsNav';
 
 const fleetDetailsPermissions = [
   { kind: RESOURCE.FLEET, verb: VERB.DELETE },
@@ -52,12 +52,10 @@ const FleetDetailPage = () => {
       resourceTypeLabel={t('Fleets')}
       banner={<FleetRestoreBanner fleet={fleet} refetch={refetch} />}
       nav={
-        <Nav variant="tertiary">
-          <NavList>
-            <NavItem to="details">{t('Details')}</NavItem>
-            <NavItem to="yaml">{t('YAML')}</NavItem>
-          </NavList>
-        </Nav>
+        <TabsNav aria-label="Fleet details tabs" tabKeys={['details', 'yaml']}>
+          <Tab eventKey="details" title={t('Details')} />
+          <Tab eventKey="yaml" title={t('YAML')} />
+        </TabsNav>
       }
       actions={
         hasActions && (

package/src/components/Fleet/FleetDetails/FleetDevicesCount.tsx

@@ -25,7 +25,7 @@ const UpdatedFleetDevices = ({ error }: { error?: string }) => {
       bodyContent={error}
       hasAutoWidth={false}
     >
-      <Icon status="danger" className="pf-v5-u-mr-sm">
+      <Icon status="danger">
         <ExclamationCircleIcon />
       </Icon>
     </Popover>

package/src/components/Fleet/FleetDetails/FleetRestoreBanner.tsx

@@ -38,7 +38,7 @@ const FleetRestoreBanner = ({ fleet, refetch }: { fleet?: Fleet; refetch: VoidFu
         },
       }}
       onResumeComplete={refetch}
-      className="pf-v5-u-pt-0 pf-v5-u-px-lg"
+      className="pf-v6-u-px-lg"
     />
   );
 };

package/src/components/Fleet/FleetResourceSyncs.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Alert,
-  AlertActionCloseButton,
-  PageSection,
-  PageSectionVariants,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Alert, AlertActionCloseButton, PageSection, Stack, StackItem } from '@patternfly/react-core';
 import { Trans } from 'react-i18next';
 
 import { ConditionType, ResourceSync, ResourceSyncList } from '@flightctl/types';
@@ -144,7 +137,7 @@ const FleetResourceSyncs = () => {
     return null;
   }
   return (
-    <PageSection variant={PageSectionVariants.light}>
+    <PageSection hasBodyWrapper={false}>
       <Stack hasGutter>
         {pendingRs.map((rs) => {
           return (

package/src/components/Fleet/FleetRow.tsx

@@ -16,7 +16,7 @@ type FleetRowProps = {
   rowIndex: number;
   onRowSelect: (fleet: Fleet) => OnSelect;
   isRowSelected: (fleet: Fleet) => boolean;
-  onDeleteClick: () => void;
+  onDeleteClick: VoidFunction;
   canDelete: boolean;
   canEdit: boolean;
 };

package/src/components/Fleet/FleetsPage.tsx

@@ -133,7 +133,7 @@ const FleetTable = () => {
       <Toolbar inset={{ default: 'insetNone' }}>
         <ToolbarContent>
           <ToolbarGroup>
-            <ToolbarItem variant="search-filter">
+            <ToolbarItem>
               <TableTextSearch value={name} setValue={setName} placeholder={t('Search by name')} />
             </ToolbarItem>
           </ToolbarGroup>

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

@@ -3,21 +3,17 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   Bullseye,
-  Button,
   PageSection,
-  PageSectionVariants,
   Spinner,
   Title,
   Wizard,
-  WizardFooterWrapper,
   WizardStep,
   WizardStepType,
-  useWizardContext,
 } from '@patternfly/react-core';
 import * as React from 'react';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { Formik, useFormikContext } from 'formik';
+import { Formik, FormikErrors } from 'formik';
 
 import RepositoryStep, { isRepoStepValid, repositoryStepId } from './steps/RepositoryStep';
 import ReviewStep, { reviewStepId } from './steps/ReviewStep';
@@ -42,10 +38,9 @@ import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import ErrorBoundary from '../../common/ErrorBoundary';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { usePermissionsContext } from '../../common/PermissionsContext';
+import FlightCtlWizardFooter from '../../common/FlightCtlWizardFooter';
 import { RESOURCE, VERB } from '../../../types/rbac';
 
-import './ImportFleetWizard.css';
-
 const validationSchema = (t: TFunction) =>
   Yup.lazy((values: ImportFleetFormValues) =>
     values.useExistingRepo
@@ -56,42 +51,17 @@ const validationSchema = (t: TFunction) =>
       : repositorySchema(t, undefined)({ ...values, useResourceSyncs: true, exists: false }),
   );
 
-const ImportFleetWizardFooter = () => {
-  const { t } = useTranslation();
-  const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
-  const { submitForm, isSubmitting, errors, values } = useFormikContext<ImportFleetFormValues>();
-  const navigate = useNavigate();
-
-  const isReviewStep = activeStep.id === reviewStepId;
-  let isStepValid = true;
-  if (activeStep.id === repositoryStepId) {
-    isStepValid = isRepoStepValid(values, errors);
-  } else if (activeStep.id === resourceSyncStepId) {
-    isStepValid = isResourceSyncStepValid(errors);
+const validateFooterStep = (
+  activeStepId: string,
+  errors: FormikErrors<ImportFleetFormValues>,
+  values: ImportFleetFormValues,
+) => {
+  if (activeStepId === repositoryStepId) {
+    return isRepoStepValid(values, errors);
+  } else if (activeStepId === resourceSyncStepId) {
+    return isResourceSyncStepValid(errors);
   }
-  const primaryBtn = isReviewStep ? (
-    <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
-      {t('Import')}
-    </Button>
-  ) : (
-    <Button variant="primary" onClick={goToNextStep} isDisabled={!isStepValid}>
-      {t('Next')}
-    </Button>
-  );
-
-  return (
-    <WizardFooterWrapper>
-      {primaryBtn}
-      {activeStep.id !== repositoryStepId && (
-        <Button variant="secondary" onClick={goToPrevStep} isDisabled={isSubmitting}>
-          {t('Back')}
-        </Button>
-      )}
-      <Button variant="link" onClick={() => navigate(-1)} isDisabled={isSubmitting}>
-        {t('Cancel')}
-      </Button>
-    </WizardFooterWrapper>
-  );
+  return true;
 };
 
 const ImportFleetWizard = () => {
@@ -104,7 +74,7 @@ const ImportFleetWizard = () => {
     endpoint: 'repositories',
   });
 
-  const gitRepositories = (repoList?.items || []).filter((repo) => repo.spec.type === RepoSpecType.GIT);
+  const gitRepositories = (repoList?.items || []).filter((repo) => repo.spec.type === RepoSpecType.RepoSpecTypeGit);
 
   let body: React.ReactNode;
 
@@ -123,7 +93,7 @@ const ImportFleetWizard = () => {
   } else {
     const repoInitValues = getInitValues({
       options: {
-        allowedRepoTypes: [RepoSpecType.GIT],
+        allowedRepoTypes: [RepoSpecType.RepoSpecTypeGit],
         showRepoTypes: false,
       },
     });
@@ -164,9 +134,15 @@ const ImportFleetWizard = () => {
           <>
             <LeaveFormConfirmation />
             <Wizard
-              footer={<ImportFleetWizardFooter />}
+              footer={
+                <FlightCtlWizardFooter<ImportFleetFormValues>
+                  firstStepId={repositoryStepId}
+                  submitStepId={reviewStepId}
+                  validateStep={validateFooterStep}
+                  saveButtonText={t('Import')}
+                />
+              }
               onStepChange={(_, step) => setCurrentStep(step)}
-              className="fctl-import-fleet"
             >
               <WizardStep name={t('Select or create repository')} id={repositoryStepId}>
                 {(!currentStep || currentStep?.id === repositoryStepId) && (
@@ -198,7 +174,7 @@ const ImportFleetWizard = () => {
 
   return (
     <>
-      <PageSection variant="light" type="breadcrumb">
+      <PageSection hasBodyWrapper={false} type="breadcrumb">
         <Breadcrumb>
           <BreadcrumbItem>
             <Link to={ROUTE.FLEETS}>{t('Fleets')}</Link>
@@ -206,12 +182,12 @@ const ImportFleetWizard = () => {
           <BreadcrumbItem isActive>{t('Import fleets')}</BreadcrumbItem>
         </Breadcrumb>
       </PageSection>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h1" size="3xl">
           {t('Import fleets')}
         </Title>
       </PageSection>
-      <PageSection variant={PageSectionVariants.light} type="wizard">
+      <PageSection hasBodyWrapper={false} type="wizard">
         <ErrorBoundary>{body}</ErrorBoundary>
       </PageSection>
     </>

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

@@ -3,17 +3,18 @@ import { FormGroup, FormSection, Grid, Radio } from '@patternfly/react-core';
 import { FormikErrors, useFormikContext } from 'formik';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
-import { Repository } from '@flightctl/types';
+import { GitRepoSpec, Repository } from '@flightctl/types';
 import { ImportFleetFormValues } from '../types';
 
 import { RepositoryForm } from '../../../Repository/CreateRepository/CreateRepositoryForm';
 import RepositoryStatus from '../../../Status/RepositoryStatus';
-import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../../../utils/status/repository';
+import { getLastTransitionTimeText } from '../../../../utils/status/repository';
 import { useTranslation } from '../../../../hooks/useTranslation';
 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';
 
@@ -36,7 +37,7 @@ const ExistingRepoForm = ({ repositories }: { repositories: Repository[] }) => {
   const { values } = useFormikContext<ImportFleetFormValues>();
 
   const currentRepo = repositories.find((r) => r.metadata.name === values.existingRepo);
-
+  const repoSpec = currentRepo?.spec as GitRepoSpec | undefined; // Only git repositories can be used for importing fleets;
   return (
     <>
       <FormGroup label={t('Repository')} fieldId="repository">
@@ -60,9 +61,9 @@ const ExistingRepoForm = ({ repositories }: { repositories: Repository[] }) => {
           </Thead>
           <Tbody>
             <Tr>
-              <Td dataLabel={t('URL')}>{currentRepo.spec.url}</Td>
+              <Td dataLabel={t('URL')}>{repoSpec?.url || '-'}</Td>
               <Td dataLabel={t('Sync status')}>
-                <RepositoryStatus statusInfo={getRepositorySyncStatus(currentRepo)} />
+                <RepositoryStatus repository={currentRepo} />
               </Td>
               <Td dataLabel={t('Last transition')}>{getLastTransitionTimeText(currentRepo, t).text}</Td>
             </Tr>
@@ -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/Fleet/ImportFleetWizard/steps/ResourceSyncStep.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Grid, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { Content, Grid, Stack, StackItem } from '@patternfly/react-core';
 import { FormikErrors } from 'formik';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
@@ -20,13 +20,11 @@ const ResourceSyncStep = () => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <TextContent>
-          <Text>
-            {t(
-              'A resource sync is an automated Gitops method that helps manage your imported fleets by monitoring source repository changes and updating your fleet configuration accordingly.',
-            )}
-          </Text>
-        </TextContent>
+        <Content component="p">
+          {t(
+            'A resource sync is an automated Gitops method that helps manage your imported fleets by monitoring source repository changes and updating your fleet configuration accordingly.',
+          )}
+        </Content>
       </StackItem>
       <StackItem>
         <FlightControlForm>

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;