@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/form/validations.ts

@@ -0,0 +1,386 @@
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+import countBy from 'lodash/countBy';
+
+import { FlightCtlLabel } from '../../types/extraTypes';
+import {
+  GitConfigTemplate,
+  HttpConfigTemplate,
+  InlineConfigTemplate,
+  KubeSecretTemplate,
+  SpecConfigTemplate,
+  isGitConfigTemplate,
+  isHttpConfigTemplate,
+  isInlineConfigTemplate,
+  isKubeSecretTemplate,
+} from '../../types/deviceSpec';
+import { labelToString } from '../../utils/labels';
+import { ApplicationFormSpec } from '../Device/EditDeviceWizard/types';
+
+type UnvalidatedLabel = Partial<FlightCtlLabel>;
+
+const SYSTEMD_PATTERNS_REGEXP = /^[a-z][a-z0-9-_.]*$/;
+const SYSTEMD_UNITS_MAX_PATTERNS = 256;
+
+// Accepts uppercase characters, and "underscore" symbols
+const K8S_LABEL_VALUE_START_END = /^[a-z0-9A-Z](.*[a-z0-9A-Z])?$/;
+const K8S_LABEL_VALUE_ALLOWED_CHARACTERS = /^[a-z0-9A-Z._-]*$/;
+const K8S_LABEL_VALUE_MAX_LENGTH = 63;
+
+// Does not accept uppercase characters, nor "underscore" symbols
+const K8S_DNS_SUBDOMAIN_START_END = /^[a-z0-9](.*[a-z0-9])?$/;
+const K8S_DNS_SUBDOMAIN_ALLOWED_CHARACTERS = /^[a-z0-9.-]*$/;
+const K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH = 253;
+
+const absolutePathRegex = /^\/.*$/;
+export const MAX_TARGET_REVISION_LENGTH = 244;
+
+export const getLabelValueValidations = (t: TFunction) => [
+  { key: 'labelValueStartAndEnd', message: t('Starts and ends with a letter or a number.') },
+  {
+    key: 'labelValueAllowedChars',
+    message: t('Contains only letters, numbers, dashes (-), dots (.), and underscores (_).'),
+  },
+  {
+    key: 'labelValueMaxLength',
+    message: t('1-{{ maxCharacters }} characters', { maxCharacters: K8S_LABEL_VALUE_MAX_LENGTH }),
+  },
+];
+
+export const getDnsSubdomainValidations = (t: TFunction) => [
+  { key: 'dnsSubdomainStartAndEnd', message: t('Starts and ends with a lowercase letter or a number.') },
+  {
+    key: 'dnsSubdomainAllowedChars',
+    message: t('Contains only lowercase letters, numbers, dashes (-), and dots (.).'),
+  },
+  {
+    key: 'dnsSubdomainMaxLength',
+    message: t('1-{{ maxCharacters }} characters', { maxCharacters: K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH }),
+  },
+];
+
+export const getKubernetesLabelValueErrors = (labelValue: string) => {
+  const errorKeys: Record<string, string> = {};
+  if (!K8S_LABEL_VALUE_START_END.test(labelValue)) {
+    errorKeys.labelValueStartAndEnd = 'failed';
+  }
+  if (!K8S_LABEL_VALUE_ALLOWED_CHARACTERS.test(labelValue)) {
+    errorKeys.labelValueAllowedChars = 'failed';
+  }
+  if (labelValue?.length > K8S_LABEL_VALUE_MAX_LENGTH) {
+    errorKeys.labelValueMaxLength = 'failed';
+  }
+  return errorKeys;
+};
+
+export const getKubernetesDnsSubdomainErrors = (value: string) => {
+  const errorKeys: Record<string, string> = {};
+  if (!K8S_DNS_SUBDOMAIN_START_END.test(value)) {
+    errorKeys.dnsSubdomainStartAndEnd = 'failed';
+  }
+  if (!K8S_DNS_SUBDOMAIN_ALLOWED_CHARACTERS.test(value)) {
+    errorKeys.dnsSubdomainAllowedChars = 'failed';
+  }
+  if (value?.length > K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH) {
+    errorKeys.dnsSubdomainMaxLength = 'failed';
+  }
+  return errorKeys;
+};
+
+export const hasUniqueLabelKeys = (labels: UnvalidatedLabel[]) => {
+  const uniqueKeys = new Set(labels.map((label) => label.key));
+  return uniqueKeys.size === labels.length;
+};
+
+export const getInvalidKubernetesLabels = (labels: UnvalidatedLabel[]) => {
+  return labels.filter((unvalidatedLabel) => {
+    const key = unvalidatedLabel.key || '';
+    const value = unvalidatedLabel.value || '';
+
+    const keyParts = key.split('/');
+    if (keyParts.length > 2) {
+      return true;
+    }
+
+    // Key prefix validations
+    const keyPrefix = keyParts.length === 2 ? keyParts[0] : '';
+    if (keyPrefix) {
+      if (
+        keyPrefix.length > K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH ||
+        !K8S_DNS_SUBDOMAIN_START_END.test(keyPrefix) ||
+        !K8S_DNS_SUBDOMAIN_ALLOWED_CHARACTERS.test(keyPrefix)
+      ) {
+        return true;
+      }
+    }
+
+    // Key name validations
+    const keyName = keyPrefix ? keyParts[1] : key;
+    if (
+      keyName.length > K8S_LABEL_VALUE_MAX_LENGTH ||
+      !K8S_LABEL_VALUE_START_END.test(keyName) ||
+      !K8S_LABEL_VALUE_ALLOWED_CHARACTERS.test(keyName)
+    ) {
+      return true;
+    }
+
+    // Value validations
+    return value.length === 0
+      ? false
+      : value.length > K8S_LABEL_VALUE_MAX_LENGTH ||
+          !K8S_LABEL_VALUE_START_END.test(value) ||
+          !K8S_LABEL_VALUE_ALLOWED_CHARACTERS.test(value);
+  });
+};
+
+export const validKubernetesDnsSubdomain = (
+  t: TFunction,
+  { isRequired, fieldName }: { isRequired: boolean; fieldName?: string },
+) =>
+  isRequired
+    ? Yup.string()
+        .defined(t('{{ fieldName }} is required', { fieldName: fieldName || t('Name') }))
+        .test('k8sDnsSubdomainFormat', (value: string, testContext) => {
+          const errorKeys = getKubernetesDnsSubdomainErrors(value);
+          return Object.keys(errorKeys).length > 0
+            ? testContext.createError({
+                message: errorKeys,
+              })
+            : true;
+        })
+    : Yup.string();
+
+const labelValueValidations = (labelValue: string | undefined, testContext: Yup.TestContext) => {
+  if (!labelValue) {
+    return true;
+  }
+  const errorKeys: Partial<Record<string, string>> = {};
+  if (!K8S_LABEL_VALUE_START_END.test(labelValue)) {
+    errorKeys.labelValueStartAndEnd = 'failed';
+  }
+  if (!K8S_LABEL_VALUE_ALLOWED_CHARACTERS.test(labelValue)) {
+    errorKeys.labelValueAllowedChars = 'failed';
+  }
+  if (labelValue.length > K8S_LABEL_VALUE_MAX_LENGTH) {
+    errorKeys.labelValueMaxLength = 'failed';
+  }
+  if (Object.keys(errorKeys).length === 0) {
+    return true;
+  }
+  return testContext.createError({
+    message: errorKeys,
+  });
+};
+
+export const validKubernetesLabelValue = (
+  t: TFunction,
+  { isRequired, fieldName }: { isRequired: boolean; fieldName?: string },
+) =>
+  isRequired
+    ? Yup.string()
+        .required(t('{{ fieldName }} is required', { fieldName: fieldName || t('Name') }))
+        .test('k8sLabelValueFormat', labelValueValidations)
+    : Yup.string().test('k8sLabelValueFormat', labelValueValidations);
+
+export const maxLengthString = (t: TFunction, props: { maxLength: number; fieldName: string }) =>
+  Yup.string().max(props.maxLength, t('{{ fieldName }} must not exceed {{ maxLength }} characters', props));
+
+export const validLabelsSchema = (t: TFunction) =>
+  Yup.array()
+    .of(
+      Yup.object<UnvalidatedLabel>().shape({
+        // We'll define the mandatory key restriction for all labels, not individually
+        key: Yup.string(),
+        value: Yup.string(),
+      }),
+    )
+    .required()
+    .test('missing keys', (labels: UnvalidatedLabel[], testContext) => {
+      const missingKeyLabels = labels.filter((label) => !label.key).map((label) => label.value);
+      return missingKeyLabels.length > 0
+        ? testContext.createError({
+            message: t('Label keys are required. Invalid labels: {{invalidLabels}}', {
+              invalidLabels: `=${missingKeyLabels.join(', =')}`,
+            }),
+          })
+        : true;
+    })
+    .test('unique keys', t('Label keys must be unique'), hasUniqueLabelKeys)
+    .test('invalid-labels', (labels: UnvalidatedLabel[], testContext) => {
+      const invalidLabels = getInvalidKubernetesLabels(labels);
+
+      return invalidLabels.length > 0
+        ? testContext.createError({
+            message: t('The following labels are not valid Kubernetes labels: {{invalidLabels}}', {
+              invalidLabels: `${invalidLabels.map((label) => labelToString(label as FlightCtlLabel)).join(', ')}`,
+            }),
+          })
+        : true;
+    });
+
+export const validApplicationsSchema = (t: TFunction) => {
+  return Yup.array()
+    .of(
+      Yup.object().shape({
+        name: Yup.string(),
+        image: Yup.string().required(t('Image is required.')),
+        variables: Yup.array()
+          .of(
+            Yup.object().shape({
+              name: Yup.string().required(t('Variable name is required.')),
+              value: Yup.string().required(t('Variable value is required.')),
+            }),
+          )
+          .required(),
+      }),
+    )
+    .test('unique-app-ids', (apps: ApplicationFormSpec[] | undefined, testContext) => {
+      if (!apps?.length) {
+        return true;
+      }
+
+      // App name is optional, in which case the ID is the app image.
+      // Apps should have different names or images
+      const getAppId = (app: ApplicationFormSpec) => app.name || app.image;
+
+      const appIds = apps.map(getAppId);
+      const duplicateIds = Object.entries(countBy(appIds))
+        .filter(([, count]) => {
+          return count > 1;
+        })
+        .map(([id]) => id);
+      if (duplicateIds.length === 0) {
+        return true;
+      }
+
+      const errors = apps.reduce((errors, app, appIndex) => {
+        if (duplicateIds.includes(getAppId(app))) {
+          const error = app.name
+            ? new Yup.ValidationError(t('Application name must be unique.'), '', `applications[${appIndex}].name`)
+            : new Yup.ValidationError(
+                t('Name is required, another application uses the same image.'),
+                '',
+                `applications[${appIndex}].name`,
+              );
+
+          errors.push(error);
+        }
+        return errors;
+      }, [] as Yup.ValidationError[]);
+
+      return testContext.createError({
+        message: () => errors,
+      });
+    });
+};
+
+export const validConfigTemplatesSchema = (t: TFunction) =>
+  Yup.array()
+    .test('unique-names', t('Source names must be unique'), (templates: SpecConfigTemplate[] | undefined) => {
+      if (!templates) {
+        return true;
+      }
+      const uniqueNames = new Set(templates.map((template) => template.name));
+      return uniqueNames.size === templates.length;
+    })
+    .of(
+      Yup.lazy((value: SpecConfigTemplate) => {
+        if (isGitConfigTemplate(value)) {
+          return Yup.object<GitConfigTemplate>().shape({
+            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,
+              fieldName: t('Target revision'),
+            }).required(t('Branch/tag/commit is required.')),
+          });
+        } else if (isHttpConfigTemplate(value)) {
+          return Yup.object<HttpConfigTemplate>().shape({
+            type: Yup.string().required(t('Source type is required.')),
+            name: validKubernetesDnsSubdomain(t, { isRequired: true }),
+            filePath: Yup.string()
+              .required(t('File path is required.'))
+              .matches(absolutePathRegex, t('Path must be absolute.')),
+            suffix: Yup.string(),
+          });
+        } else if (isKubeSecretTemplate(value)) {
+          return Yup.object<KubeSecretTemplate>().shape({
+            type: Yup.string().required(t('Source type is required.')),
+            name: validKubernetesDnsSubdomain(t, { isRequired: true }),
+            secretName: Yup.string().required(t('Secret name is required.')),
+            secretNs: Yup.string().required(t('Secret namespace is required.')),
+            mountPath: Yup.string()
+              .required(t('Mount path is required.'))
+              .matches(absolutePathRegex, t('Mount path must be absolute.')),
+          });
+        } else if (isInlineConfigTemplate(value)) {
+          return Yup.object<InlineConfigTemplate>().shape({
+            type: Yup.string().required(t('Source type is required.')),
+            name: validKubernetesDnsSubdomain(t, { isRequired: true }),
+            files: Yup.array().of(
+              Yup.object<InlineConfigTemplate['files'][0]>().shape({
+                path: Yup.string()
+                  .required(t('Path is required.'))
+                  .matches(absolutePathRegex, t('File path must be absolute.'))
+                  .test(
+                    'unique-paths',
+                    t('File path must be unique.'),
+                    (path) => !path || value.files.filter((file) => file.path === path).length == 1,
+                  ),
+                content: Yup.string().required(t('File content is required.')),
+              }),
+            ),
+          });
+        }
+
+        return Yup.object<InlineConfigTemplate>().shape({
+          name: validKubernetesDnsSubdomain(t, { isRequired: true }),
+          type: Yup.string().required(t('Source type is required.')),
+        });
+      }),
+    );
+
+export const deviceSystemdUnitsValidationSchema = (t: TFunction) =>
+  Yup.object({
+    matchPatterns: Yup.array()
+      .max(
+        SYSTEMD_UNITS_MAX_PATTERNS,
+        t('The maximum number of systemd units is {{maxSystemUnits}}.', { maxSystemUnits: SYSTEMD_UNITS_MAX_PATTERNS }),
+      )
+      .of(Yup.string().required('Unit name is required.'))
+      .test('invalid patterns', (patterns: string[] | undefined, testContext) => {
+        // TODO analyze https://github.com/systemd/systemd/blob/9cebda59e818cdb89dc1e53ab5bb51b91b3dc3ff/src/basic/unit-name.c#L42
+        // and adjust the regular expression and / or the validation to accommodate for it
+        const invalidPatterns = (patterns || []).filter((pattern) => {
+          return pattern.length > SYSTEMD_UNITS_MAX_PATTERNS || !SYSTEMD_PATTERNS_REGEXP.test(pattern);
+        });
+        if (invalidPatterns.length === 0) {
+          return true;
+        }
+        return testContext.createError({
+          message: t('Invalid systemd unit names: {{invalidPatterns}}', {
+            invalidPatterns: invalidPatterns.join(', '),
+          }),
+        });
+      })
+      .test('unique patterns', t('Systemd unit names must be unique'), (patterns: string[] | undefined) => {
+        const uniqueKeys = new Set(patterns || []);
+        return uniqueKeys.size === (patterns?.length || 0);
+      }),
+  });
+
+export const deviceApprovalValidationSchema = (t: TFunction, conf: { isSingleDevice: boolean }) =>
+  Yup.object({
+    deviceAlias: conf.isSingleDevice
+      ? validKubernetesLabelValue(t, { isRequired: false, fieldName: t('Alias') })
+      : Yup.string().matches(
+          /{{n}}/,
+          t('Device aliases must be unique. Add a number to the template to generate unique aliases.'),
+        ),
+    labels: validLabelsSchema(t),
+  });

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

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import { Alert, Button, FormGroup } from '@patternfly/react-core';
+
+import { EnrollmentRequest } from '@flightctl/types';
+import RichValidationTextField from '../../form/RichValidationTextField';
+import LabelsField from '../../form/LabelsField';
+import { getLabelValueValidations } from '../../form/validations';
+import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { useTranslation } from '../../../hooks/useTranslation';
+import useDeviceLabelMatch from '../../../hooks/useDeviceLabelMatch';
+import ResourceLink from '../../common/ResourceLink';
+import DeviceLabelMatch from './DeviceLabelMatch';
+
+export type ApproveDeviceFormValues = {
+  labels: FlightCtlLabel[];
+  deviceAlias: string;
+};
+
+export type ApproveDeviceFormProps = {
+  enrollmentRequest: EnrollmentRequest;
+  onClose: (refetch?: boolean) => void;
+  error?: string;
+  children?: React.ReactNode;
+};
+
+const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest, onClose, error, children }) => {
+  const { t } = useTranslation();
+  const { submitForm, isSubmitting, errors: formErrors } = useFormikContext<ApproveDeviceFormValues>();
+
+  const disableSubmit = Object.keys(formErrors).length > 0;
+  const [matchLabelsOnChange, matchStatus] = useDeviceLabelMatch();
+
+  return (
+    <FlightCtlForm>
+      <RichValidationTextField
+        fieldName="deviceAlias"
+        aria-label={t('Alias')}
+        validations={getLabelValueValidations(t)}
+      />
+      {enrollmentRequest && (
+        <FormGroup label={t('Name')} aria-label={t('Name')}>
+          <ResourceLink id={enrollmentRequest.metadata.name as string} variant="full" />
+        </FormGroup>
+      )}
+      <FormGroup label={t('Labels')}>
+        <LabelsField name="labels" onChangeCallback={matchLabelsOnChange} />
+      </FormGroup>
+      <FormGroup label={t('Fleet name')}>
+        <DeviceLabelMatch matchStatus={matchStatus} />
+      </FormGroup>
+      {children}
+      {error && <Alert isInline title={error} variant="danger" />}
+      <FlightCtlActionGroup>
+        <Button
+          key="confirm"
+          variant="primary"
+          onClick={submitForm}
+          isDisabled={disableSubmit || isSubmitting}
+          isLoading={isSubmitting}
+        >
+          {t('Approve')}
+        </Button>
+        <Button key="cancel" variant="link" onClick={() => onClose()} isDisabled={isSubmitting}>
+          {t('Cancel')}
+        </Button>
+      </FlightCtlActionGroup>
+    </FlightCtlForm>
+  );
+};
+
+export default ApproveDeviceForm;

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { EnrollmentRequestApproval } from '@flightctl/types';
+import { Alert, Modal } from '@patternfly/react-core';
+import { Formik } from 'formik';
+
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+import ApproveDeviceForm, { ApproveDeviceFormProps, ApproveDeviceFormValues } from './ApproveDeviceForm';
+import {
+  EnrollmentRequestStatus as EnrollmentRequestStatusType,
+  getApprovalStatus,
+} from '../../../utils/status/enrollmentRequest';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { deviceApprovalValidationSchema } from '../../form/validations';
+
+import { fromAPILabel, toAPILabel } from '../../../utils/labels';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+type DeviceEnrollmentModalProps = Omit<ApproveDeviceFormProps, 'error'>;
+
+const DeviceEnrollmentModal: React.FC<DeviceEnrollmentModalProps> = ({ enrollmentRequest, onClose }) => {
+  const { t } = useTranslation();
+  const { post } = useFetch();
+  const [error, setError] = React.useState<string>();
+  const { user } = useAppContext();
+  return (
+    <Formik<ApproveDeviceFormValues>
+      initialValues={{
+        labels: fromAPILabel(enrollmentRequest.spec.labels || {}, { isDefault: true }),
+        deviceAlias: '',
+      }}
+      validationSchema={deviceApprovalValidationSchema(t, { isSingleDevice: true })}
+      onSubmit={async ({ labels, deviceAlias }) => {
+        setError(undefined);
+        const deviceLabels: EnrollmentRequestApproval['labels'] = toAPILabel(labels);
+        if (deviceAlias) {
+          deviceLabels.alias = deviceAlias;
+        }
+
+        try {
+          await post<EnrollmentRequestApproval>(`enrollmentrequests/${enrollmentRequest.metadata.name}/approval`, {
+            approved: true,
+            labels: deviceLabels,
+            approvedBy: user,
+          });
+          onClose(true);
+        } catch (e) {
+          setError(getErrorMessage(e));
+        }
+      }}
+    >
+      {({ 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>
+      )}
+    </Formik>
+  );
+};
+
+export default DeviceEnrollmentModal;

package/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css

@@ -0,0 +1,24 @@
+/* Style to get the appearance of a disabled Input with messages spanning multiple lines */
+.fctl-device-label-match {
+  display: flex;
+  align-items: center;
+  background-color: var(--pf-v5-global--disabled-color--300);
+  padding: 0.5rem;
+}
+
+.fctl-device-label-match__icon  {
+  margin-right: 0.5rem;
+}
+
+.fctl-device-label-match__placeholder {
+  color: var(--pf-v5-global--disabled-color--100);
+}
+
+/* Dark theme variations */
+.pf-v5-theme-dark .fctl-device-label-match {
+  background-color: var(--pf-v5-global--disabled-color--200);
+}
+
+.pf-v5-theme-dark .fctl-device-label-match__placeholder {
+  color: var(--pf-v5-global--Color--light-100);
+}

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

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Icon, Spinner } from '@patternfly/react-core';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { DeviceMatchStatus } from '../../../hooks/useDeviceLabelMatch';
+
+import './DeviceLabelMatch.css';
+
+const DeviceLabelMatchContent = ({
+  iconStatus,
+  text,
+  isPlaceholder,
+}: {
+  iconStatus?: 'success' | 'warning' | 'danger' | 'loader';
+  text?: string;
+  isPlaceholder?: boolean;
+}) => {
+  let icon: React.ReactNode;
+  switch (iconStatus) {
+    case 'warning':
+      icon = (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      );
+      break;
+    case 'danger':
+      icon = (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      );
+      break;
+    case 'success':
+      icon = (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      );
+      break;
+    case 'loader':
+      icon = <Spinner size="sm" />;
+      break;
+  }
+
+  return (
+    <div className="fctl-device-label-match">
+      {icon && <span className="fctl-device-label-match__icon">{icon}</span>}
+      <span className={isPlaceholder ? 'fctl-device-label-match__placeholder' : ''}>{text}</span>
+    </div>
+  );
+};
+
+export const DeviceLabelMatch = ({ matchStatus }: { matchStatus: DeviceMatchStatus }) => {
+  const { t } = useTranslation();
+
+  switch (matchStatus.status) {
+    case 'unchecked':
+      return <DeviceLabelMatchContent text={t('Add labels to select a fleet.')} isPlaceholder />;
+    case 'unchecked--invalid':
+      return (
+        <DeviceLabelMatchContent
+          iconStatus="warning"
+          text={t('Fleet label match cannot cannot be evaluated when there are invalid labels.')}
+          isPlaceholder
+        />
+      );
+    case 'checking':
+      return <DeviceLabelMatchContent iconStatus="loader" />;
+    case 'checked--unique':
+      return (
+        <DeviceLabelMatchContent
+          iconStatus="success"
+          /* The matching fleet's name */
+          text={matchStatus.detail}
+        />
+      );
+    case 'checked--empty':
+      return <DeviceLabelMatchContent iconStatus="warning" text={t('No fleet is matching the selected labels.')} />;
+    case 'checked--multiple':
+      return (
+        <DeviceLabelMatchContent
+          iconStatus="danger"
+          text={t(
+            "More than one fleet is matching the selected labels. The device will ignore the fleets' configurations.",
+          )}
+        />
+      );
+    case 'checked--error': {
+      const text = t('Check for matching fleet(s) failed. {{errorMessage}}', {
+        errorMessage: matchStatus.detail || t('Unknown error'),
+      });
+      return <DeviceLabelMatchContent iconStatus="danger" text={text} />;
+    }
+  }
+};
+
+export default DeviceLabelMatch;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Modal } from '@patternfly/react-core';
+
+import { Repository } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import CreateRepositoryForm, {
+  CreateRepositoryFormProps,
+} from '../../Repository/CreateRepository/CreateRepositoryForm';
+
+type CreateRepositoryModalProps = {
+  onClose: VoidFunction;
+  onSuccess: (repository: Repository) => void;
+  options?: CreateRepositoryFormProps['options'];
+};
+
+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>
+  );
+};
+
+export default CreateRepositoryModal;