@flightctl/ui-components 0.7.2 → 0.8.0-rc2

package/src/components/form/RichValidationTextField.tsx

@@ -150,4 +150,23 @@ const RichValidationTextField = React.forwardRef(
 
 RichValidationTextField.displayName = 'RichValidationTextField';
 
-export default RichValidationTextField;
+const RichValidationTextFieldWrapper = React.forwardRef(
+  ({ fieldName, isDisabled, ...rest }: RichValidationTextFieldProps, ref: React.Ref<HTMLInputElement>) => {
+    const [field] = useField<string>({
+      name: fieldName,
+    });
+    if (isDisabled) {
+      return (
+        <FormGroup label={rest?.['aria-label']} isRequired={rest.isRequired}>
+          <TextInput value={field.value} {...rest} isDisabled />
+        </FormGroup>
+      );
+    }
+
+    return <RichValidationTextField ref={ref} fieldName={fieldName} {...rest} />;
+  },
+);
+
+RichValidationTextFieldWrapper.displayName = 'RichValidationTextFieldWrapper';
+
+export default RichValidationTextFieldWrapper;

package/src/components/form/TextListField.tsx

@@ -26,7 +26,7 @@ const TextListField = ({ name, onChangeCallback, addButtonText, helperText }: Te
     onChangeCallback?.(newValueList, hasErrors);
   };
 
-  const onDelete = async (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+  const onDelete = async (index: number) => {
     const newValueList = [...valueList];
     newValueList.splice(index, 1);
     await updateValueList(newValueList);
@@ -61,7 +61,7 @@ const TextListField = ({ name, onChangeCallback, addButtonText, helperText }: Te
             <Label
               key={`${text}_${index}`}
               textMaxWidth={maxWidth}
-              onClose={(e) => onDelete(e, index)}
+              onClose={() => onDelete(index)}
               onEditCancel={(_, prevText) => onEdit(index, prevText)}
               onEditComplete={(_, newText) => onEdit(index, newText)}
               /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
@@ -79,4 +79,20 @@ const TextListField = ({ name, onChangeCallback, addButtonText, helperText }: Te
   );
 };
 
-export default TextListField;
+const TextListFieldWrapper = ({ name, isReadOnly, ...rest }: TextListFieldProps & { isReadOnly: boolean }) => {
+  const [{ value: valueList }] = useField<string[]>(name);
+
+  if (isReadOnly) {
+    return valueList.length === 0
+      ? '-'
+      : valueList.map((text, index) => (
+          <Label key={`${text}_${index}`} textMaxWidth={maxWidth}>
+            {text}
+          </Label>
+        ));
+  }
+
+  return <TextListField name={name} {...rest} />;
+};
+
+export default TextListFieldWrapper;

package/src/components/form/UploadField.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FieldMetaProps, useField } from 'formik';
-import { FileUpload, FormGroup } from '@patternfly/react-core';
+import { FileUpload, FormGroup, TextArea } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/useTranslation';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
@@ -8,6 +8,7 @@ type UploadFieldProps = {
   name: string;
   isRequired?: boolean;
   label: string;
+  isDisabled?: boolean;
   getErrorText?: (error: string) => React.ReactNode | undefined;
   placeholder?: string;
   onChange?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
@@ -130,4 +131,17 @@ const UploadField = ({ label, maxFileBytes, isRequired, name }: UploadFieldProps
   );
 };
 
-export default UploadField;
+const UploadFieldWrapper = ({ name, label, maxFileBytes, isRequired, ...rest }: UploadFieldProps) => {
+  const [{ value }] = useField<string>(name);
+
+  if (rest.isDisabled) {
+    return (
+      <FormGroup label={label} isRequired={isRequired}>
+        <TextArea aria-label={label} name={name} value={value} {...rest} isDisabled />
+      </FormGroup>
+    );
+  }
+  return <UploadField name={name} label={label} maxFileBytes={maxFileBytes} isRequired={isRequired} {...rest} />;
+};
+
+export default UploadFieldWrapper;

package/src/components/form/validations.ts

@@ -457,7 +457,7 @@ export const validFleetRolloutPolicySchema = (t: TFunction) => {
       }
 
       const errors = rolloutPolicy.batches.reduce((errors, batch, batchIndex) => {
-        const hasError = batch.limit === undefined && Object.keys(batch.selector || {}).length === 0;
+        const hasError = batch.limit === undefined && batch.selector.length === 0;
         if (hasError) {
           errors.push(
             new Yup.ValidationError(
@@ -576,9 +576,6 @@ export const validConfigTemplatesSchema = (t: TFunction) =>
             type: Yup.string().required(t('Source type is required.')),
             name: validKubernetesDnsSubdomain(t, { isRequired: true }),
             path: Yup.string().required(t('Path is required.')).matches(absolutePathRegex, t('Path must be absolute.')),
-            mountPath: Yup.string()
-              .required(t('Mount path is required.'))
-              .matches(absolutePathRegex, t('Mount path must be absolute.')),
             repository: Yup.string().required(t('Repository is required.')),
             targetRevision: maxLengthString(t, {
               maxLength: MAX_TARGET_REVISION_LENGTH,

package/src/components/modals/ApproveDeviceModal/ApproveDeviceModal.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { EnrollmentRequestApproval } from '@flightctl/types';
-import { Alert, Modal } from '@patternfly/react-core';
+import { Alert } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
+
 import { Formik } from 'formik';
 
 import { useFetch } from '../../../hooks/useFetch';
@@ -48,12 +50,15 @@ const DeviceEnrollmentModal: React.FC<DeviceEnrollmentModalProps> = ({ enrollmen
       }}
     >
       {({ isSubmitting }) => (
-        <Modal title={t('Approve pending device')} isOpen onClose={() => !isSubmitting && onClose()} variant="small">
-          {getApprovalStatus(enrollmentRequest) !== EnrollmentRequestStatusType.Approved ? (
-            <ApproveDeviceForm enrollmentRequest={enrollmentRequest} onClose={onClose} error={error} />
-          ) : (
-            <Alert isInline variant="info" title={t('Enrollment request is already approved.')} />
-          )}
+        <Modal isOpen onClose={() => !isSubmitting && onClose()} variant="small">
+          <ModalHeader title={t('Approve pending device')} />
+          <ModalBody>
+            {getApprovalStatus(enrollmentRequest) !== EnrollmentRequestStatusType.Approved ? (
+              <ApproveDeviceForm enrollmentRequest={enrollmentRequest} onClose={onClose} error={error} />
+            ) : (
+              <Alert isInline variant="info" title={t('Enrollment request is already approved.')} />
+            )}
+          </ModalBody>
         </Modal>
       )}
     </Formik>

package/src/components/modals/CreateRepositoryModal/CreateRepositoryModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
 
 import { Repository } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
@@ -16,8 +16,11 @@ type CreateRepositoryModalProps = {
 const CreateRepositoryModal = ({ options, onClose, onSuccess }: CreateRepositoryModalProps) => {
   const { t } = useTranslation();
   return (
-    <Modal variant="medium" isOpen title={t('Create repository')} showClose={false}>
-      <CreateRepositoryForm onClose={onClose} onSuccess={onSuccess} options={options} />
+    <Modal variant="medium" isOpen>
+      <ModalHeader title={t('Create repository')} />
+      <ModalBody>
+        <CreateRepositoryForm onClose={onClose} onSuccess={onSuccess} options={options} />
+      </ModalBody>
     </Modal>
   );
 };

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>