@flightctl/ui-components 0.7.1 → 0.8.0-rc1

package/src/components/common/CodeEditor/YamlEditorBase.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import * as monaco from 'monaco-editor';
+import { loader } from '@monaco-editor/react';
+import { ActionGroup, Button } from '@patternfly/react-core';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { DownloadIcon } from '@patternfly/react-icons/dist/js/icons/download-icon';
+import { saveAs } from 'file-saver';
+import type * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
+
+import ErrorBoundary from '../ErrorBoundary';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useThemePreferences } from '../../../hooks/useThemePreferences';
+// TODO add useShortcutPopover when adding saving capabilities to the YAML editor
+import { defineConsoleThemes } from './CodeEditorTheme';
+
+import './YamlEditorBase.css';
+
+// Avoid using monaco from CDN
+loader.config({ monaco });
+
+type Monaco = typeof monacoEditor;
+type YamlEditorBaseProps = {
+  filename: string;
+  code?: string;
+  onCancel: VoidFunction;
+  onReload?: VoidFunction;
+};
+
+const YamlEditorBase = ({ filename, code, onCancel, onReload }: YamlEditorBaseProps) => {
+  const { t } = useTranslation();
+  const editorRef = React.useRef<monacoEditor.editor.IStandaloneCodeEditor | null>(null);
+  const monacoRef = React.useRef<typeof monacoEditor | null>(null);
+  const { resolvedTheme } = useThemePreferences();
+
+  const [editorMounted, setEditorMounted] = React.useState(false);
+
+  const downloadYaml = () => {
+    const resource = editorRef.current?.getValue();
+    if (resource) {
+      const blob = new Blob([resource], { type: 'text/yaml;charset=utf-8' });
+      saveAs(blob, `${filename}.yaml`);
+    }
+  };
+
+  // recalculate bounds when viewport is changed
+  React.useEffect(() => {
+    const handleResize = () => {
+      const editors = monacoRef.current?.editor?.getEditors();
+      editors?.forEach((editor) => {
+        editor.layout({ width: 0, height: 0 });
+        editor.layout();
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  React.useEffect(() => {
+    if (editorMounted) {
+      // Prevent all brackets/curly braces by being highlighted by default
+      monaco.languages.setLanguageConfiguration('yaml', {
+        colorizedBracketPairs: [],
+      });
+    }
+  }, [editorMounted]);
+
+  return (
+    <ErrorBoundary>
+      <FlightCtlForm>
+        <CodeEditor
+          className="fctl-yaml-editor-base"
+          copyButtonAriaLabel={t('Copy to clipboard')}
+          copyButtonSuccessTooltipText={t('Content copied to clipboard')}
+          copyButtonToolTipText={t('Copy to clipboard')}
+          downloadButtonAriaLabel={t('Download yaml')}
+          downloadButtonToolTipText={t('Download yaml')}
+          shortcutsPopoverButtonText={t('View shortcuts')}
+          emptyStateBody={t('Drag and drop a file or upload one.')}
+          emptyStateButton={t('Browse')}
+          emptyStateLink={t('Start from scratch')}
+          emptyStateTitle={t('Start editing')}
+          language={Language.yaml}
+          code={code}
+          onEditorDidMount={(editor: monacoEditor.editor.IStandaloneCodeEditor, instance: Monaco) => {
+            setEditorMounted(true);
+            defineConsoleThemes(instance);
+            editorRef.current = editor;
+            monacoRef.current = instance;
+          }}
+          options={{
+            theme: `console-${resolvedTheme}`,
+            readOnly: true,
+            readOnlyMessage: {
+              value: t('Yaml is currently read-only'),
+            },
+          }}
+        />
+        <ActionGroup className="fctl-yaml-editor-base__action-group">
+          {onReload && (
+            <Button variant="secondary" aria-label={t('Reload')} onClick={onReload}>
+              {t('Reload')}
+            </Button>
+          )}
+          <Button variant="secondary" aria-label={t('Cancel')} onClick={onCancel}>
+            {t('Cancel')}
+          </Button>
+          <Button
+            icon={<DownloadIcon />}
+            type="submit"
+            variant="secondary"
+            className="pf-v5-u-ml-auto hidden-sm hidden-xs"
+            aria-label={t('Download')}
+            onClick={downloadYaml}
+          >
+            {t('Download')}
+          </Button>
+        </ActionGroup>
+      </FlightCtlForm>
+    </ErrorBoundary>
+  );
+};
+
+export default YamlEditorBase;

package/src/components/common/CodeEditor/useShortcutPopover.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { PopoverProps } from '@patternfly/react-core';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import Shortcut from './Shortcut';
+
+export const useShortcutPopover = (onHideShortcuts?: VoidFunction): PopoverProps => {
+  const { t } = useTranslation();
+
+  return React.useMemo(
+    () => ({
+      'aria-label': t('View shortcuts'),
+      bodyContent: (
+        <table>
+          <tbody>
+            <Shortcut keyName="F1">{t('View all editor shortcuts')}</Shortcut>
+            <Shortcut ctrl keyName="space">
+              {t('Activate auto complete')}
+            </Shortcut>
+            <Shortcut ctrl shift keyName="m">
+              {t('Toggle Tab action between insert Tab character and move focus out of editor')}
+            </Shortcut>
+            <Shortcut ctrlCmd shift keyName="o">
+              {t('View document outline')}
+            </Shortcut>
+            <Shortcut hover>{t('View property descriptions')}</Shortcut>
+            <Shortcut ctrlCmd keyName="s">
+              {t('Save')}
+            </Shortcut>
+          </tbody>
+        </table>
+      ),
+      maxWidth: '25rem',
+      distance: 18,
+      onHide: onHideShortcuts,
+    }),
+    [t, onHideShortcuts],
+  );
+};

package/src/components/common/LabelsView.tsx

@@ -3,29 +3,20 @@ import { Label, LabelGroup } from '@patternfly/react-core';
 
 import { useTranslation } from '../../hooks/useTranslation';
 
-import './LabelsView.css';
-
 interface LabelsViewProps {
   prefix: string;
   labels: Record<string, string | undefined> | undefined;
-  variant?: 'default' | 'collapsed';
 }
 
-const LabelsView = ({ variant, prefix, labels }: LabelsViewProps) => {
+const LabelsView = ({ prefix, labels }: LabelsViewProps) => {
   const { t } = useTranslation();
   const labelItems = Object.entries(labels || {});
   if (labelItems.length === 0) {
     return '-';
   }
 
-  const isLimited = variant === 'collapsed';
   return (
-    <LabelGroup
-      numLabels={isLimited ? 2 : 5}
-      className={isLimited ? 'fctl-labels-view__collapsed' : undefined}
-      expandedText={t('Show less')}
-      collapsedText={'${remaining} ' + t('more')}
-    >
+    <LabelGroup numLabels={5} expandedText={t('Show less')} collapsedText={'${remaining} ' + t('more')}>
       {labelItems.map(([key, value], index: number) => (
         <Label key={`${prefix}_${index}`} id={`${prefix}_${index}`}>
           {value ? `${key}=${value}` : key}

package/src/components/common/LeaveFormConfirmation.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { Button, Modal, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { Button, Text, TextContent } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
 import { Blocker, BlockerFunction } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 
@@ -14,12 +16,14 @@ const ConfirmNavigationDialog = ({ blocker }: { blocker: Blocker }) => {
   }
 
   return (
-    <Modal
-      title={t('There are unsaved changes')}
-      isOpen
-      variant="small"
-      titleIconVariant="warning"
-      actions={[
+    <Modal isOpen variant="small">
+      <ModalHeader title={t('There are unsaved changes')} titleIconVariant="warning" />
+      <ModalBody>
+        <TextContent>
+          <Text>{t('Are you sure you want to leave the current page? Unsaved changes will be lost.')}</Text>
+        </TextContent>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="proceed"
           variant="danger"
@@ -28,7 +32,7 @@ const ConfirmNavigationDialog = ({ blocker }: { blocker: Blocker }) => {
           }}
         >
           {t('Discard changes')}
-        </Button>,
+        </Button>
         <Button
           key="stay"
           variant="link"
@@ -37,16 +41,8 @@ const ConfirmNavigationDialog = ({ blocker }: { blocker: Blocker }) => {
           }}
         >
           {t('Stay here')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>
-          <TextContent>
-            <Text>{t('Are you sure you want to leave the current page? Unsaved changes will be lost.')}</Text>
-          </TextContent>
-        </StackItem>
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/common/TechPreviewBadge.tsx

@@ -4,7 +4,9 @@ import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons';
 
 import { useTranslation } from '../../hooks/useTranslation';
 import LearnMoreLink from './LearnMoreLink';
-import { TECH_PREVIEW_LEVEL_LINK } from '../../links';
+
+// Links to general Red Hat docs
+const TECH_PREVIEW_LEVEL_LINK = 'https://access.redhat.com/support/offerings/techpreview';
 
 const TechPreviewPopoverContent = () => {
   const { t } = useTranslation();

package/src/components/form/FlightCtlActionGroup.tsx

@@ -4,7 +4,7 @@ import { ActionGroup } from '@patternfly/react-core';
 
 import './FlightCtlActionGroup.css';
 
-const FlightCtlActionGroup = ({ children }: React.PropsWithChildren<Record<never, never>>) => (
+const FlightCtlActionGroup = ({ children }: React.PropsWithChildren) => (
   <ActionGroup className="fctl-form__action-footer">{children}</ActionGroup>
 );
 

package/src/components/form/FormSelect.tsx

@@ -21,14 +21,14 @@ const isItemObject = (item: string | SelectItem): item is SelectItem => typeof i
 
 const getItemLabel = (item: string | SelectItem) => (isItemObject(item) ? item.label : item);
 
-const FormSelect: React.FC<FormSelectProps> = ({
+const FormSelect = ({
   name,
   items,
   withStatusIcon,
   helperText,
   placeholderText,
   children,
-}) => {
+}: React.PropsWithChildren<FormSelectProps>) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [field, meta, { setValue, setTouched }] = useField<string>({
     name: name,
@@ -113,4 +113,15 @@ const FormSelect: React.FC<FormSelectProps> = ({
   );
 };
 
-export default FormSelect;
+const FormSelectWrapper = ({ name, items, isDisabled, ...rest }: FormSelectProps & { isDisabled?: boolean }) => {
+  const [{ value }] = useField<string>({
+    name: name,
+  });
+  if (isDisabled) {
+    const selectedText = value ? getItemLabel(items[value]) : rest.placeholderText;
+    return selectedText || value || '-';
+  }
+  return <FormSelect name={name} items={items} {...rest} />;
+};
+
+export default FormSelectWrapper;

package/src/components/form/FormSelectTypeahead.tsx

@@ -21,7 +21,6 @@ type FormSelectProps = {
   items: Record<string, string | SelectItem>;
   defaultId?: string;
   helperText?: React.ReactNode;
-  children?: React.ReactNode;
   placeholderText?: string;
   isValidTypedItem?: (value: string) => boolean;
   transformTypedItem?: (value: string) => string;
@@ -40,10 +39,11 @@ const FormSelectTypeahead = ({
   isValidTypedItem,
   transformTypedItem,
   children,
-}: FormSelectProps) => {
+}: React.PropsWithChildren<FormSelectProps>) => {
   const [field, meta, { setValue, setTouched }] = useField<string>({
     name: name,
   });
+
   const [isOpen, setIsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState<string | undefined>(undefined);
 
@@ -182,4 +182,25 @@ const FormSelectTypeahead = ({
   );
 };
 
-export default FormSelectTypeahead;
+const FormSelectTypeaheadWrapper = ({
+  name,
+  items,
+  isDisabled,
+  ...rest
+}: FormSelectProps & { isDisabled?: boolean }) => {
+  const [{ value }] = useField<string>({
+    name: name,
+  });
+  if (isDisabled) {
+    let displayText: string = '';
+    if (value) {
+      displayText = getItemLabel(items[value]) || value;
+    } else if (rest.defaultId) {
+      displayText = getItemLabel(items[rest.defaultId]) || rest.defaultId;
+    }
+    return displayText || rest.placeholderText || '-';
+  }
+  return <FormSelectTypeahead name={name} items={items} {...rest} />;
+};
+
+export default FormSelectTypeaheadWrapper;

package/src/components/form/LabelsField.tsx

@@ -4,6 +4,8 @@ import { Label, LabelGroup } from '@patternfly/react-core';
 
 import { FlightCtlLabel } from '../../types/extraTypes';
 import EditableLabelControl from '../common/EditableLabelControl';
+import LabelsView from '../common/LabelsView';
+import { toAPILabel } from '../../utils/labels';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
 type LabelsFieldProps = {
@@ -12,20 +14,12 @@ type LabelsFieldProps = {
   addButtonText?: string;
   helperText?: React.ReactNode;
   onChangeCallback?: (newLabels: FlightCtlLabel[], hasErrors: boolean) => void;
-  canEdit?: boolean;
 };
 
 const maxWidthDefaultLabel = '18ch'; // Can fit more chars as it doesn't have a "Close" button
 const maxWidthNonDefaultLabel = '16ch'; // Can fit less chars due to the "Close" button
 
-const LabelsField: React.FC<LabelsFieldProps> = ({
-  name,
-  onChangeCallback,
-  addButtonText,
-  helperText,
-  isLoading,
-  canEdit = true,
-}) => {
+const LabelsField = ({ name, onChangeCallback, addButtonText, helperText, isLoading }: LabelsFieldProps) => {
   const [{ value: labels }, meta, { setValue: setLabels }] = useField<FlightCtlLabel[]>(name);
   const updateLabels = async (newLabels: FlightCtlLabel[]) => {
     const errors = await setLabels(newLabels, true);
@@ -74,14 +68,12 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
         numLabels={5}
         isEditable={!isLoading}
         addLabelControl={
-          canEdit && (
-            <EditableLabelControl
-              defaultLabel="key=value"
-              addButtonText={addButtonText}
-              onAddLabel={onAdd}
-              isEditable={!isLoading}
-            />
-          )
+          <EditableLabelControl
+            defaultLabel="key=value"
+            addButtonText={addButtonText}
+            onAddLabel={onAdd}
+            isEditable={!isLoading}
+          />
         }
       >
         {labels.map(({ key, value, isDefault }, index) => {
@@ -96,13 +88,13 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
           }
 
           const closeButtonProps = isLoading && { isDisabled: true };
-          const isLabelEditable = !isLoading && !isDefault && canEdit;
+          const isLabelEditable = !isLoading && !isDefault;
           return (
             <Label
               key={elKey}
               textMaxWidth={maxWidthNonDefaultLabel}
               closeBtnProps={closeButtonProps}
-              onClose={canEdit ? (e) => onDelete(e, index) : undefined}
+              onClose={(e) => onDelete(e, 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 */
@@ -120,4 +112,12 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
   );
 };
 
-export default LabelsField;
+const LabelsFieldWrapper = ({ name, isDisabled, ...rest }: LabelsFieldProps & { isDisabled?: boolean }) => {
+  const [{ value }] = useField<FlightCtlLabel[]>(name);
+  if (isDisabled) {
+    return <LabelsView prefix={name} labels={toAPILabel(value)} />;
+  }
+  return <LabelsField name={name} {...rest} />;
+};
+
+export default LabelsFieldWrapper;

package/src/components/form/NameField.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import debounce from 'lodash/debounce';
+import { FormGroup, TextInput } from '@patternfly/react-core';
 
 import { useFetch } from '../../hooks/useFetch';
 import { useTranslation } from '../../hooks/useTranslation';
@@ -12,7 +13,7 @@ type NameFieldProps = TextFieldProps & {
   validations: RichValidationTextFieldProps['validations'];
 };
 
-const NameField: React.FC<NameFieldProps> = ({ name, isDisabled, validations, resourceType, ...rest }) => {
+const NameField = ({ name, validations, resourceType, ...rest }: NameFieldProps) => {
   const { t } = useTranslation();
   const { get } = useFetch();
   const [{ value }, { error }, { setError }] = useField<string>(name);
@@ -31,7 +32,7 @@ const NameField: React.FC<NameFieldProps> = ({ name, isDisabled, validations, re
       abortControllerRef.current.abort();
     }
     abortControllerRef.current = new AbortController();
-    if (isDisabled || !value) {
+    if (!value) {
       currentErrorRef.current = false;
       return;
     }
@@ -67,7 +68,20 @@ const NameField: React.FC<NameFieldProps> = ({ name, isDisabled, validations, re
     ...validations,
   ];
 
-  return <RichValidationTextField fieldName={name} validations={allValidations} isDisabled={isDisabled} {...rest} />;
+  return <RichValidationTextField fieldName={name} validations={allValidations} {...rest} />;
 };
 
-export default NameField;
+const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, ...rest }: NameFieldProps) => {
+  const [{ value }] = useField<string>(name);
+
+  if (isDisabled) {
+    return (
+      <FormGroup label={rest?.['aria-label']} isRequired={rest.isRequired}>
+        <TextInput value={value} {...rest} isDisabled />
+      </FormGroup>
+    );
+  }
+  return <NameField name={name} validations={validations} resourceType={resourceType} {...rest} />;
+};
+
+export default NameFieldWrapper;

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(

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>
   );
 };