@flightctl/ui-components 0.0.4 → 0.0.10

package/src/components/EnrollmentRequest/PendingEnrollmentRequestsBadge.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Badge } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { usePendingEnrollmentRequestsCount } from '../../hooks/usePendingEnrollmentRequestsCount';
+import WithTooltip from '../common/WithTooltip';
+
+import './PendingEnrollmentRequestsBadge.css';
+
+const PendingEnrollmentRequestsBadge = () => {
+  const { t } = useTranslation();
+  const [count] = usePendingEnrollmentRequestsCount();
+  if (count === 0) {
+    return null;
+  }
+
+  const text = t('{{ count }} devices pending approval', { count });
+  return (
+    <Badge className="fctl-pending-ers-badge pf-v5-u-ml-lg" screenReaderText={text}>
+      <WithTooltip showTooltip content={text}>
+        <span>{count}</span>
+      </WithTooltip>
+    </Badge>
+  );
+};
+
+export default PendingEnrollmentRequestsBadge;

package/src/components/ErrorAlert/ErrorAlert.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getErrorMessage } from '../../utils/error';
+
+const ErrorAlert = ({ error }: { error: unknown }) => {
+  const { t } = useTranslation();
+  return (
+    <Alert isInline variant="danger" title={t('Unexpected error occurred')}>
+      {getErrorMessage(error)}
+    </Alert>
+  );
+};
+
+export default ErrorAlert;

package/src/components/Fleet/CreateFleet/CreateFleetWizard.css

@@ -0,0 +1,3 @@
+.fctl-create-fleet .pf-v5-c-wizard__main-body {
+    height: 100%
+}

package/src/components/Fleet/CreateFleet/CreateFleetWizard.tsx

@@ -0,0 +1,152 @@
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  PageSection,
+  PageSectionVariants,
+  Spinner,
+  Title,
+  Wizard,
+  WizardStep,
+  WizardStepType,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import { Fleet } from '@flightctl/types';
+import { Formik } from 'formik';
+import { FleetFormValues } from './types';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import GeneralInfoStep, { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
+import DeviceTemplateStep, {
+  deviceTemplateStepId,
+  isDeviceTemplateStepValid,
+} from '../../Device/EditDeviceWizard/steps/DeviceTemplateStep';
+import ReviewStep, { reviewStepId } from './steps/ReviewStep';
+import { getFleetPatches, getFleetResource, getInitialValues, getValidationSchema } from './utils';
+import CreateFleetWizardFooter from './CreateFleetWizardFooter';
+import { useEditFleet } from './useEditFleet';
+import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
+import ErrorBoundary from '../../common/ErrorBoundary';
+
+import './CreateFleetWizard.css';
+
+const CreateFleetWizard = () => {
+  const { t } = useTranslation();
+  const { post, patch } = useFetch();
+  const [error, setError] = React.useState<unknown>();
+  const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const [fleetId, fleet, loading, editError] = useEditFleet();
+  const isEdit = !!fleetId;
+  let body;
+
+  if (loading) {
+    body = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else if (editError) {
+    body = (
+      <Alert isInline variant="danger" title={t('An error occurred')}>
+        {getErrorMessage(editError)}
+      </Alert>
+    );
+  } else if (!!fleet?.metadata.owner) {
+    body = (
+      <Alert isInline variant="info" title={t('Fleet is non-editable')}>
+        {t('This fleet is managed by a resource sync and it cannot be edited directly.')}
+      </Alert>
+    );
+  } else {
+    body = (
+      <Formik<FleetFormValues>
+        initialValues={getInitialValues(fleet)}
+        validationSchema={getValidationSchema(t)}
+        validateOnMount
+        onSubmit={async (values) => {
+          setError(undefined);
+          try {
+            if (isEdit) {
+              const fleetPatches = getFleetPatches(fleet as Fleet, values);
+              if (fleetPatches.length > 0) {
+                await patch<Fleet>(`fleets/${fleetId}`, fleetPatches);
+              }
+            } else {
+              await post<Fleet>('fleets', getFleetResource(values));
+            }
+
+            navigate({ route: ROUTE.FLEET_DETAILS, postfix: values.name });
+          } catch (e) {
+            setError(e);
+          }
+        }}
+      >
+        {({ errors: formikErrors }) => {
+          const generalStepValid = isGeneralInfoStepValid(formikErrors);
+          return (
+            <>
+              <LeaveFormConfirmation />
+              <Wizard
+                footer={<CreateFleetWizardFooter isEdit={isEdit} />}
+                onStepChange={(_, step) => setCurrentStep(step)}
+                className="fctl-create-fleet"
+              >
+                <WizardStep name={t('General info')} id={generalInfoStepId}>
+                  {(!currentStep || currentStep?.id === generalInfoStepId) && <GeneralInfoStep isEdit={isEdit} />}
+                </WizardStep>
+                <WizardStep
+                  name={t('Device template')}
+                  id={deviceTemplateStepId}
+                  isDisabled={(!currentStep || currentStep?.id === generalInfoStepId) && !generalStepValid}
+                >
+                  {currentStep?.id === deviceTemplateStepId && <DeviceTemplateStep isFleet />}
+                </WizardStep>
+                <WizardStep
+                  name={isEdit ? t('Review and update') : t('Review and create')}
+                  id={reviewStepId}
+                  isDisabled={!generalStepValid || !isDeviceTemplateStepValid(formikErrors)}
+                >
+                  {currentStep?.id === reviewStepId && <ReviewStep error={error} />}
+                </WizardStep>
+              </Wizard>
+            </>
+          );
+        }}
+      </Formik>
+    );
+  }
+
+  const title = isEdit ? t('Edit fleet') : t('Create fleet');
+
+  return (
+    <>
+      <PageSection variant="light" type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={ROUTE.FLEETS}>{t('Fleets')}</Link>
+          </BreadcrumbItem>
+          {fleetId && (
+            <BreadcrumbItem>
+              <Link to={{ route: ROUTE.FLEET_DETAILS, postfix: fleetId }}>{fleetId}</Link>
+            </BreadcrumbItem>
+          )}
+          <BreadcrumbItem isActive>{title}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h1" size="3xl">
+          {title}
+        </Title>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light} type="wizard">
+        <ErrorBoundary>{body}</ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+export default CreateFleetWizard;

package/src/components/Fleet/CreateFleet/CreateFleetWizardFooter.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Button, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+import { FleetFormValues } from './types';
+import { useNavigate } from '../../../hooks/useNavigate';
+import { reviewStepId } from './steps/ReviewStep';
+import { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
+import {
+  deviceTemplateStepId,
+  isDeviceTemplateStepValid,
+} from '../../Device/EditDeviceWizard/steps/DeviceTemplateStep';
+
+type CreateFleetWizardFooterProps = {
+  isEdit: boolean;
+};
+
+const CreateFleetWizardFooter = ({ isEdit }: CreateFleetWizardFooterProps) => {
+  const { t } = useTranslation();
+  const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
+  const { submitForm, isSubmitting, errors } = useFormikContext<FleetFormValues>();
+  const navigate = useNavigate();
+
+  const isReviewStep = activeStep.id === reviewStepId;
+  let isStepValid = true;
+  if (activeStep.id === generalInfoStepId) {
+    isStepValid = isGeneralInfoStepValid(errors);
+  } else if (activeStep.id === deviceTemplateStepId) {
+    isStepValid = isDeviceTemplateStepValid(errors);
+  }
+  const primaryBtn = isReviewStep ? (
+    <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+      {isEdit ? t('Save') : t('Create fleet')}
+    </Button>
+  ) : (
+    <Button variant="primary" onClick={goToNextStep} isDisabled={!isStepValid}>
+      {t('Next')}
+    </Button>
+  );
+
+  return (
+    <WizardFooterWrapper>
+      {primaryBtn}
+      {activeStep.id !== generalInfoStepId && (
+        <Button variant="secondary" onClick={goToPrevStep} isDisabled={isSubmitting}>
+          {t('Back')}
+        </Button>
+      )}
+      <Button variant="link" onClick={() => navigate(-1)} isDisabled={isSubmitting}>
+        {t('Cancel')}
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+export default CreateFleetWizardFooter;

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

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
+import { RedoIcon } from '@patternfly/react-icons/dist/js/icons/redo-icon';
+import debounce from 'lodash/debounce';
+
+import { DeviceList } from '@flightctl/types';
+import LabelsField from '../../../form/LabelsField';
+import { getInvalidKubernetesLabels, hasUniqueLabelKeys } from '../../../form/validations';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { useFetch } from '../../../../hooks/useFetch';
+import { FlightCtlLabel } from '../../../../types/extraTypes';
+import { getApiListCount } from '../../../../utils/api';
+import { getErrorMessage } from '../../../../utils/error';
+import { labelToString } from '../../../../utils/labels';
+
+const validateLabels = (labels: FlightCtlLabel[]) =>
+  hasUniqueLabelKeys(labels) && getInvalidKubernetesLabels(labels).length === 0;
+
+const DeviceLabelSelector = () => {
+  const { t } = useTranslation();
+  const { get } = useFetch();
+  const [{ value: labels }] = useField<FlightCtlLabel[]>('labels');
+
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [deviceCountError, setDeviceCountError] = React.useState<string>();
+  const [deviceCount, setDeviceCount] = React.useState<number>(0);
+
+  const updateDeviceCount = async (matchLabels: FlightCtlLabel[]) => {
+    const labelSelector = matchLabels.map(labelToString);
+
+    try {
+      // TODO remove sortBy when https://issues.redhat.com/browse/EDM-624 is fixed. Otherwise the device count can be wrong.
+      const deviceListResp = await get<DeviceList>(
+        `devices?labelSelector=${labelSelector.join(',')}&limit=1&sortBy=metadata.name`,
+      );
+      const num = getApiListCount(deviceListResp);
+      setDeviceCount(num || 0);
+    } catch (e) {
+      setDeviceCountError(getErrorMessage(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedUpdateCount = React.useCallback(debounce(updateDeviceCount, 800), []);
+
+  const reloadDeviceSelection = React.useCallback(
+    (labels: FlightCtlLabel[]) => {
+      const hasLabels = labels.length > 0;
+
+      // The error field is not set on time, we manually validate the labels
+      // to make sure we only trigger requests when labels are valid
+      const validLabels = validateLabels(labels);
+      if (validLabels && hasLabels) {
+        setIsLoading(true);
+        setDeviceCountError(undefined);
+        void debouncedUpdateCount(labels);
+      } else if (!hasLabels) {
+        setDeviceCount(0);
+      }
+    },
+    [debouncedUpdateCount],
+  );
+
+  React.useEffect(() => {
+    reloadDeviceSelection(labels);
+  }, [labels, reloadDeviceSelection]);
+
+  let message: React.ReactNode;
+  let showHelperText = true;
+  if (isLoading) {
+    message = <Spinner size="sm" />;
+  } else if (deviceCountError) {
+    showHelperText = false;
+    message = (
+      <Alert isInline variant="danger" title={t('Failed to determine the number of selected devices')}>
+        {deviceCountError}
+        <Button
+          variant="link"
+          icon={<RedoIcon />}
+          onClick={() => {
+            reloadDeviceSelection(labels);
+          }}
+        >
+          {t('Try again')}
+        </Button>
+      </Alert>
+    );
+  } else if (labels.length > 0) {
+    showHelperText = false;
+    message = (
+      <Alert
+        isInline
+        variant={deviceCount === 0 ? 'warning' : 'info'}
+        title={t('{{ count }} devices matching the labels were selected.', { count: deviceCount })}
+      />
+    );
+  } else {
+    message = t('Add labels to select devices to be included in this fleet.');
+  }
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <LabelsField name="labels" helperText={showHelperText ? message : undefined} />
+      </StackItem>
+      {!showHelperText && message && <StackItem>{message}</StackItem>}
+    </Stack>
+  );
+};
+
+export default DeviceLabelSelector;

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { FormGroup, Grid } from '@patternfly/react-core';
+import { FormikErrors } from 'formik';
+
+import { FleetFormValues } from '../types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import NameField from '../../../form/NameField';
+import LabelsField from '../../../form/LabelsField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { getDnsSubdomainValidations } from '../../../form/validations';
+import WithHelperText from '../../../common/WithHelperText';
+import DeviceLabelSelector from './DeviceLabelSelector';
+
+export const generalInfoStepId = 'general-info';
+
+export const isGeneralInfoStepValid = (errors: FormikErrors<FleetFormValues>) => {
+  return !errors.name && !errors.labels && !errors.fleetLabels;
+};
+
+const GeneralInfoStep = ({ isEdit }: { isEdit: boolean }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid lg={5} span={8}>
+      <FlightCtlForm>
+        <NameField
+          name="name"
+          aria-label={t('Name')}
+          isRequired
+          isDisabled={isEdit}
+          resourceType="fleets"
+          validations={getDnsSubdomainValidations(t)}
+        />
+        <FormGroup label={t('Fleet labels')}>
+          <LabelsField name="fleetLabels" />
+        </FormGroup>
+        <FormGroup
+          label={
+            <WithHelperText
+              content={t(
+                'Devices matching these labels will be selected by the fleet. If left empty, no devices will be selected.',
+              )}
+              ariaLabel={t('Device selector')}
+              showLabel
+            />
+          }
+        >
+          <DeviceLabelSelector />
+        </FormGroup>
+      </FlightCtlForm>
+    </Grid>
+  );
+};
+
+export default GeneralInfoStep;

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import {
+  Alert,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { FleetFormValues } from '../types';
+import LabelsView from '../../../common/LabelsView';
+import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
+import { toAPILabel } from '../../../../utils/labels';
+import RepositorySourceList from '../../../Repository/RepositoryDetails/RepositorySourceList';
+import { getErrorMessage } from '../../../../utils/error';
+import { getAPIConfig } from '../../../Device/EditDeviceWizard/deviceSpecUtils';
+import ReviewApplications from '../../../Device/EditDeviceWizard/steps/ReviewApplications';
+
+export const reviewStepId = 'review';
+
+const ReviewStep = ({ error }: { error?: unknown }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<FleetFormValues>();
+  return (
+    <Stack hasGutter>
+      <StackItem isFilled>
+        <FlightControlDescriptionList
+          isHorizontal
+          horizontalTermWidthModifier={{
+            default: '25ch',
+          }}
+        >
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.name}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Fleet labels')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelsView prefix="fleet" labels={toAPILabel(values.fleetLabels)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Device selector')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('System image')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {values.osImage || t(`The fleet will not manage system image`)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Applications')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <ReviewApplications apps={values.applications} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </FlightControlDescriptionList>
+      </StackItem>
+      {!!error && (
+        <StackItem>
+          <Alert isInline variant="danger" title={t('An error occurred')}>
+            {getErrorMessage(error)}
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default ReviewStep;

package/src/components/Fleet/CreateFleet/types.ts

@@ -0,0 +1,8 @@
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { DeviceSpecConfigFormValues } from '../../Device/EditDeviceWizard/types';
+
+export type FleetFormValues = DeviceSpecConfigFormValues & {
+  name: string;
+  fleetLabels: FlightCtlLabel[];
+  labels: FlightCtlLabel[];
+};

package/src/components/Fleet/CreateFleet/useEditFleet.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { useFetch } from '../../../hooks/useFetch';
+import { Fleet } from '@flightctl/types';
+
+export const useEditFleet = (): [string | undefined, Fleet | undefined, boolean, unknown] => {
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { fleetId } = useParams<{ fleetId: string }>();
+
+  const { get } = useFetch();
+  const [fleet, setFleet] = React.useState<Fleet>();
+  const [isLoading, setIsLoading] = React.useState<boolean>(!!fleetId);
+  const [error, setError] = React.useState<unknown>();
+
+  React.useEffect(() => {
+    const fetch = async () => {
+      try {
+        const result = await get<Fleet>(`fleets/${fleetId}`);
+        setFleet(result);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (fleetId && !fleet) {
+      fetch();
+    }
+  }, [fleetId, get, fleet]);
+
+  return [fleetId, fleet, isLoading, error];
+};