@flightctl/ui-components 0.7.2 → 0.8.0-rc1

package/src/components/modals/DecommissionModal/DecommissionModal.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Formik } from 'formik';
-import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
+import { Alert, Button, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
 
 import { DeviceDecommissionTargetType } from '@flightctl/types';
 
@@ -30,64 +31,67 @@ const DecommissionModal = ({ onDecommission, onClose }: DecommissionModalProps)
   }, []);
 
   return (
-    <Modal title={t('Decommission device?')} isOpen onClose={onClose} variant="small" titleIconVariant="warning">
-      <Formik<DecommissionFormValues>
-        initialValues={{
-          doFactoryReset: false,
-        }}
-        onSubmit={({ doFactoryReset }) => {
-          const doSubmit = async () => {
-            setError(undefined);
-            try {
-              setIsDecommissioning(true);
-              await onDecommission(
-                doFactoryReset
-                  ? DeviceDecommissionTargetType.DeviceDecommissionTargetTypeFactoryReset
-                  : DeviceDecommissionTargetType.DeviceDecommissionTargetTypeUnenroll,
-              );
-              onClose();
-            } catch (err) {
-              setError(getErrorMessage(err));
-              setIsDecommissioning(false);
-            }
-          };
-          void doSubmit();
-        }}
-      >
-        {({ submitForm }) => {
-          return (
-            <Stack hasGutter>
-              <StackItem>{t('Are you sure you want to proceed with decommissioning this device?')}</StackItem>
-              <StackItem>
-                {t(
-                  'Decommissioned devices will not be able to communicate with the edge management system anymore, and they will be removed from any fleet they were associated to. Once decommissioned, the device cannot be managed further.',
+    <Modal isOpen onClose={onClose} variant="small">
+      <ModalHeader title={t('Decommission device?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Formik<DecommissionFormValues>
+          initialValues={{
+            doFactoryReset: false,
+          }}
+          onSubmit={({ doFactoryReset }) => {
+            const doSubmit = async () => {
+              setError(undefined);
+              try {
+                setIsDecommissioning(true);
+                await onDecommission(
+                  doFactoryReset
+                    ? DeviceDecommissionTargetType.DeviceDecommissionTargetTypeFactoryReset
+                    : DeviceDecommissionTargetType.DeviceDecommissionTargetTypeUnenroll,
+                );
+                onClose();
+              } catch (err) {
+                setError(getErrorMessage(err));
+                setIsDecommissioning(false);
+              }
+            };
+            void doSubmit();
+          }}
+        >
+          {({ submitForm }) => {
+            return (
+              <Stack hasGutter>
+                <StackItem>{t('Are you sure you want to proceed with decommissioning this device?')}</StackItem>
+                <StackItem>
+                  {t(
+                    'Decommissioned devices will not be able to communicate with the edge management system anymore, and they will be removed from any fleet they were associated to. Once decommissioned, the device cannot be managed further.',
+                  )}
+                </StackItem>
+                {error && (
+                  <StackItem>
+                    <Alert isInline variant="danger" title={t('An error occurred')}>
+                      {error}
+                    </Alert>
+                  </StackItem>
                 )}
-              </StackItem>
-              {error && (
                 <StackItem>
-                  <Alert isInline variant="danger" title={t('An error occurred')}>
-                    {error}
-                  </Alert>
+                  <Button
+                    key="confirm"
+                    variant="danger"
+                    isDisabled={isDecommissioning}
+                    isLoading={isDecommissioning}
+                    onClick={submitForm}
+                  >
+                    {t('Decommission device')}
+                  </Button>
+                  <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDecommissioning}>
+                    {t('Cancel')}
+                  </Button>
                 </StackItem>
-              )}
-              <StackItem>
-                <Button
-                  key="confirm"
-                  variant="danger"
-                  isDisabled={isDecommissioning}
-                  isLoading={isDecommissioning}
-                  onClick={submitForm}
-                >
-                  {t('Decommission device')}
-                </Button>
-                <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDecommissioning}>
-                  {t('Cancel')}
-                </Button>
-              </StackItem>
-            </Stack>
-          );
-        }}
-      </Formik>
+              </Stack>
+            );
+          }}
+        </Formik>
+      </ModalBody>
     </Modal>
   );
 };

package/src/components/modals/DeleteModal/DeleteModal.tsx

@@ -1,7 +1,8 @@
-import { getErrorMessage } from '../../../utils/error';
-import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
 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 { getErrorMessage } from '../../../utils/error';
 import { useTranslation } from '../../../hooks/useTranslation';
 
 type DeleteModalProps = {
@@ -16,13 +17,25 @@ const DeleteModal: React.FC<DeleteModalProps> = ({ onDelete, onClose, resourceTy
   const [isDeleting, setIsDeleting] = React.useState(false);
   const [error, setError] = React.useState<string>();
   return (
-    <Modal
-      title={t('Delete {{resourceType}} ?', { resourceType })}
-      isOpen
-      onClose={onClose}
-      variant="small"
-      titleIconVariant="warning"
-      actions={[
+    <Modal isOpen onClose={onClose} variant="small">
+      <ModalHeader title={t('Delete {{resourceType}} ?', { resourceType })} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Trans t={t}>
+              Are you sure you want to delete {resourceType} <b>{resourceName}</b>?
+            </Trans>
+          </StackItem>
+          {error && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                {error}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="confirm"
           variant="danger"
@@ -41,26 +54,11 @@ const DeleteModal: React.FC<DeleteModalProps> = ({ onDelete, onClose, resourceTy
           }}
         >
           {t('Delete {{ resourceType }}', { resourceType })}
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>
-          <Trans t={t}>
-            Are you sure you want to delete {resourceType} <b>{resourceName}</b>?
-          </Trans>
-        </StackItem>
-        {error && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              {error}
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/modals/massModals/MassApproveDeviceModal/MassApproveDeviceModal.tsx

@@ -1,15 +1,7 @@
 import * as React from 'react';
 import { EnrollmentRequest, EnrollmentRequestApproval } from '@flightctl/types';
-import {
-  Alert,
-  Button,
-  FormGroup,
-  Modal,
-  Progress,
-  ProgressMeasureLocation,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Alert, Button, FormGroup, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { Formik } from 'formik';
 
@@ -89,13 +81,82 @@ const MassApproveDeviceModal: React.FC<MassApproveDeviceModalProps> = ({
       onSubmit={approveEnrollments}
     >
       {({ isSubmitting, values, submitForm, isValid }) => (
-        <Modal
-          title={t('Approve pending devices')}
-          isOpen
-          onClose={onClose}
-          showClose={!isSubmitting}
-          variant="medium"
-          actions={[
+        <Modal isOpen onClose={isSubmitting ? undefined : onClose} variant="medium">
+          <ModalHeader title={t('Approve pending devices')} />
+          <ModalBody>
+            <Stack hasGutter>
+              <StackItem>
+                {t(
+                  'Make sure you recognise and expect the following devices before approving them. Are you sure you want to approve the listed devices?',
+                )}
+              </StackItem>
+              <StackItem className="fctl-mass-approve__table">
+                <Table>
+                  <Thead>
+                    <Tr>
+                      <Th width={60}>{t('Name')}</Th>
+                      <Th width={40}>{t('Alias')}</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {pendingEnrollments.map((pendingEr, index) => (
+                      <Tr key={pendingEr.metadata.name}>
+                        <Td dataLabel={t('Name')}>
+                          <ResourceLink id={pendingEr.metadata.name as string} />
+                        </Td>
+                        <Td dataLabel={t('Alias')}>{templateToName(index, values.deviceAlias)}</Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              </StackItem>
+              <StackItem>
+                <FlightCtlForm>
+                  <FormGroup label={t('Labels')}>
+                    <LabelsField name="labels" />
+                  </FormGroup>
+                  <FormGroup label={t('Alias')}>
+                    <TextField
+                      name="deviceAlias"
+                      aria-label={t('Alias')}
+                      placeholder="device-{{n}}"
+                      helperText={
+                        <>
+                          {t('Alias devices using a custom template. Add a number using')}
+                          <strong> {`{{n}}`}</strong>
+                        </>
+                      }
+                    />
+                  </FormGroup>
+                </FlightCtlForm>
+              </StackItem>
+              {isSubmitting && (
+                <StackItem>
+                  <Progress
+                    value={progress}
+                    min={0}
+                    max={totalProgress}
+                    title={t('Approving...')}
+                    measureLocation={ProgressMeasureLocation.top}
+                    label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+                    valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+                  />
+                </StackItem>
+              )}
+              {errors?.length && (
+                <StackItem>
+                  <Alert isInline variant="danger" title={t('An error occurred')}>
+                    <Stack hasGutter>
+                      {errors.map((e, index) => (
+                        <StackItem key={index}>{e}</StackItem>
+                      ))}
+                    </Stack>
+                  </Alert>
+                </StackItem>
+              )}
+            </Stack>
+          </ModalBody>
+          <ModalFooter>
             <Button
               key="approve"
               variant="primary"
@@ -104,83 +165,11 @@ const MassApproveDeviceModal: React.FC<MassApproveDeviceModalProps> = ({
               isDisabled={isSubmitting || !isValid}
             >
               {t('Approve')}
-            </Button>,
+            </Button>
             <Button key="cancel" variant="link" onClick={onClose} isDisabled={isSubmitting}>
               {t('Cancel')}
-            </Button>,
-          ]}
-        >
-          <Stack hasGutter>
-            <StackItem>
-              {t(
-                'Make sure you recognise and expect the following devices before approving them. Are you sure you want to approve the listed devices?',
-              )}
-            </StackItem>
-            <StackItem className="fctl-mass-approve__table">
-              <Table>
-                <Thead>
-                  <Tr>
-                    <Th width={60}>{t('Name')}</Th>
-                    <Th width={40}>{t('Alias')}</Th>
-                  </Tr>
-                </Thead>
-                <Tbody>
-                  {pendingEnrollments.map((pendingEr, index) => (
-                    <Tr key={pendingEr.metadata.name}>
-                      <Td dataLabel={t('Name')}>
-                        <ResourceLink id={pendingEr.metadata.name as string} />
-                      </Td>
-                      <Td dataLabel={t('Alias')}>{templateToName(index, values.deviceAlias)}</Td>
-                    </Tr>
-                  ))}
-                </Tbody>
-              </Table>
-            </StackItem>
-            <StackItem>
-              <FlightCtlForm>
-                <FormGroup label={t('Labels')}>
-                  <LabelsField name="labels" />
-                </FormGroup>
-                <FormGroup label={t('Alias')}>
-                  <TextField
-                    name="deviceAlias"
-                    aria-label={t('Alias')}
-                    placeholder="device-{{n}}"
-                    helperText={
-                      <>
-                        {t('Alias devices using a custom template. Add a number using')}
-                        <strong> {`{{n}}`}</strong>
-                      </>
-                    }
-                  />
-                </FormGroup>
-              </FlightCtlForm>
-            </StackItem>
-            {isSubmitting && (
-              <StackItem>
-                <Progress
-                  value={progress}
-                  min={0}
-                  max={totalProgress}
-                  title={t('Approving...')}
-                  measureLocation={ProgressMeasureLocation.top}
-                  label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
-                  valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
-                />
-              </StackItem>
-            )}
-            {errors?.length && (
-              <StackItem>
-                <Alert isInline variant="danger" title={t('An error occurred')}>
-                  <Stack hasGutter>
-                    {errors.map((e, index) => (
-                      <StackItem key={index}>{e}</StackItem>
-                    ))}
-                  </Stack>
-                </Alert>
-              </StackItem>
-            )}
-          </Stack>
+            </Button>
+          </ModalFooter>
         </Modal>
       )}
     </Formik>

package/src/components/modals/massModals/MassDecommissionDeviceModal/MassDecommissionDeviceModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Alert, Button, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 import { Device, DeviceDecommission, DeviceDecommissionTargetType } from '@flightctl/types';
@@ -47,14 +48,65 @@ const MassDecommissionDeviceModal = ({ onClose, devices, onSuccess }: MassDecomm
   };
 
   return (
-    <Modal
-      title={t('Decommission devices ?')}
-      isOpen
-      onClose={onClose}
-      showClose={!isSubmitting}
-      titleIconVariant="warning"
-      variant="medium"
-      actions={[
+    <Modal isOpen onClose={isSubmitting ? undefined : onClose} variant="medium">
+      <ModalHeader title={t('Decommission devices ?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>{t('Are you sure you want to proceed with decommissioning these devices?')}</StackItem>
+          <StackItem>
+            {t(
+              'Decommissioned devices will not be able to communicate with the edge management system anymore, and they will be removed from any fleet they were associated to. Once decommissioned, the devices cannot be managed further.',
+            )}
+          </StackItem>
+          <StackItem>
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>{t('Alias')}</Th>
+                  <Th>{t('Name')}</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {devices.map((device) => {
+                  return (
+                    <Tr key={device.metadata.name}>
+                      <Td dataLabel={t('Alias')}>{device.metadata.labels?.alias || '-'}</Td>
+                      <Td dataLabel={t('Name')}>
+                        <ResourceLink id={device.metadata.name as string} />
+                      </Td>
+                    </Tr>
+                  );
+                })}
+              </Tbody>
+            </Table>
+          </StackItem>
+          {isSubmitting && (
+            <StackItem>
+              <Progress
+                value={progress}
+                min={0}
+                max={totalProgress}
+                title={t('Decommissioning...')}
+                measureLocation={ProgressMeasureLocation.top}
+                label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+                valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+              />
+            </StackItem>
+          )}
+          {errors?.length && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                <Stack hasGutter>
+                  {errors.map((e, index) => (
+                    <StackItem key={index}>{e}</StackItem>
+                  ))}
+                </Stack>
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="decommission"
           variant="danger"
@@ -63,66 +115,11 @@ const MassDecommissionDeviceModal = ({ onClose, devices, onSuccess }: MassDecomm
           isDisabled={isSubmitting}
         >
           {t('Decommission')}
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isSubmitting}>
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>{t('Are you sure you want to proceed with decommissioning these devices ?')}</StackItem>
-        <StackItem>
-          {t(
-            'Decommissioned devices will not be able to communicate with the edge management system anymore, and they will be removed from any fleet they were associated to. Once decommissioned, the devices cannot be managed further.',
-          )}
-        </StackItem>
-        <StackItem>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{t('Alias')}</Th>
-                <Th>{t('Name')}</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {devices.map((device) => {
-                return (
-                  <Tr key={device.metadata.name}>
-                    <Td dataLabel={t('Alias')}>{device.metadata.labels?.alias || '-'}</Td>
-                    <Td dataLabel={t('Name')}>
-                      <ResourceLink id={device.metadata.name as string} />
-                    </Td>
-                  </Tr>
-                );
-              })}
-            </Tbody>
-          </Table>
-        </StackItem>
-        {isSubmitting && (
-          <StackItem>
-            <Progress
-              value={progress}
-              min={0}
-              max={totalProgress}
-              title={t('Decommissioning...')}
-              measureLocation={ProgressMeasureLocation.top}
-              label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
-              valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
-            />
-          </StackItem>
-        )}
-        {errors?.length && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              <Stack hasGutter>
-                {errors.map((e, index) => (
-                  <StackItem key={index}>{e}</StackItem>
-                ))}
-              </Stack>
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };