@flightctl/ui-components 0.0.4 → 0.0.5

package/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { FormGroup, Grid } from '@patternfly/react-core';
+import { FormikErrors, useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import useDeviceLabelMatch from '../../../../hooks/useDeviceLabelMatch';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import LabelsField from '../../../form/LabelsField';
+import RichValidationTextField from '../../../form/RichValidationTextField';
+import { getLabelValueValidations } from '../../../form/validations';
+import DeviceLabelMatch from '../../../modals/ApproveDeviceModal/DeviceLabelMatch';
+import { EditDeviceFormValues } from '../types';
+
+export const generalInfoStepId = 'general-info';
+
+export const isGeneralInfoStepValid = (errors: FormikErrors<EditDeviceFormValues>) => {
+  return !errors.deviceAlias && !errors.labels;
+};
+
+const GeneralInfoStep = () => {
+  const { t } = useTranslation();
+  const [matchLabelsOnChange, matchStatus] = useDeviceLabelMatch();
+
+  const { values, setFieldValue } = useFormikContext<EditDeviceFormValues>();
+
+  React.useEffect(() => {
+    if (matchStatus.status === 'checked--unique') {
+      setFieldValue('fleetMatch', matchStatus.detail); // set the name of the matched fleet
+    } else {
+      setFieldValue('fleetMatch', '');
+    }
+  }, [matchStatus, setFieldValue]);
+
+  // When users go back to the General info step, we trigger the fleet match check
+  React.useEffect(() => {
+    if (values.labels) {
+      matchLabelsOnChange(values.labels, false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [matchLabelsOnChange]);
+
+  return (
+    <Grid lg={5} span={8}>
+      <FlightCtlForm>
+        <RichValidationTextField
+          fieldName="deviceAlias"
+          aria-label={t('Alias')}
+          validations={getLabelValueValidations(t)}
+        />
+        <FormGroup label={t('Device labels')}>
+          <LabelsField name="labels" onChangeCallback={matchLabelsOnChange} />
+        </FormGroup>
+        <FormGroup label={t('Fleet name')}>
+          <DeviceLabelMatch matchStatus={matchStatus} />
+        </FormGroup>
+      </FlightCtlForm>
+    </Grid>
+  );
+};
+
+export default GeneralInfoStep;

package/src/components/Device/EditDeviceWizard/steps/ReviewApplications.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Flex, FlexItem, Label, Stack, StackItem } from '@patternfly/react-core';
+
+import { ApplicationFormSpec } from '../types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+
+const ReviewApplications = ({ apps }: { apps: ApplicationFormSpec[] }) => {
+  const { t } = useTranslation();
+  if (apps.length === 0) {
+    return '-';
+  }
+
+  return (
+    <Stack hasGutter>
+      {apps.map((app, index) => (
+        <StackItem key={`${app.image}_${index}`}>
+          <Flex>
+            <FlexItem>
+              {app.name || t('Unnamed')} ({app.image})
+            </FlexItem>
+            {app.variables.map((variable, index) => (
+              <FlexItem key={`var-${variable.name}_${index}`}>
+                <Label color="blue">
+                  {variable.name}={variable.value}
+                </Label>
+              </FlexItem>
+            ))}
+          </Flex>
+        </StackItem>
+      ))}
+    </Stack>
+  );
+};
+
+export default ReviewApplications;

package/src/components/Device/EditDeviceWizard/steps/ReviewDeviceStep.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import {
+  Alert,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { EditDeviceFormValues } from '../types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import LabelsView from '../../../common/LabelsView';
+import { toAPILabel } from '../../../../utils/labels';
+import { getErrorMessage } from '../../../../utils/error';
+import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
+import RepositorySourceList from '../../../Repository/RepositoryDetails/RepositorySourceList';
+import { getAPIConfig } from '../deviceSpecUtils';
+import ReviewApplications from './ReviewApplications';
+
+export const reviewDeviceStepId = 'review-device';
+
+const ReviewStep = ({ error }: { error?: string }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<EditDeviceFormValues>();
+  return (
+    <Stack hasGutter>
+      <StackItem isFilled>
+        <FlightControlDescriptionList
+          isHorizontal
+          horizontalTermWidthModifier={{
+            default: '25ch',
+          }}
+        >
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Alias')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.deviceAlias || t('Untitled')}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Device labels')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          {values.fleetMatch && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Device fleet')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.fleetMatch}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('System image')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {values.osImage || t(`Device management service 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/Device/EditDeviceWizard/types.ts

@@ -0,0 +1,19 @@
+import { ApplicationSpec } from '@flightctl/types';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { SpecConfigTemplate } from '../../../types/deviceSpec';
+
+export type ApplicationFormSpec = Omit<ApplicationSpec, 'envVars'> & {
+  variables: { name: string; value: string }[];
+};
+
+export type DeviceSpecConfigFormValues = {
+  osImage?: string;
+  configTemplates: SpecConfigTemplate[];
+  applications: ApplicationFormSpec[];
+};
+
+export type EditDeviceFormValues = DeviceSpecConfigFormValues & {
+  deviceAlias: string;
+  labels: FlightCtlLabel[];
+  fleetMatch: string;
+};

package/src/components/Device/EditDeviceWizard/useEditDevice.ts

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

package/src/components/Device/EditDeviceWizard/utils.ts

@@ -0,0 +1,79 @@
+import { TFunction } from 'i18next';
+import * as Yup from 'yup';
+
+import {
+  maxLengthString,
+  validApplicationsSchema,
+  validConfigTemplatesSchema,
+  validKubernetesLabelValue,
+  validLabelsSchema,
+} from '../../form/validations';
+import { appendJSONPatch, getApplicationPatches, getLabelPatches } from '../../../utils/patch';
+import { Device, PatchRequest } from '@flightctl/types';
+import { EditDeviceFormValues } from './types';
+import { getAPIConfig, getDeviceSpecConfigPatches } from './deviceSpecUtils';
+
+export const getValidationSchema = (t: TFunction) =>
+  Yup.lazy(() =>
+    Yup.object({
+      deviceAlias: validKubernetesLabelValue(t, { isRequired: false, fieldName: t('Alias') }),
+      osImage: maxLengthString(t, { fieldName: t('System image'), maxLength: 2048 }),
+      labels: validLabelsSchema(t),
+      configTemplates: validConfigTemplatesSchema(t),
+      applications: validApplicationsSchema(t),
+    }),
+  );
+
+export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDeviceFormValues) => {
+  let allPatches: PatchRequest = [];
+
+  // Device labels
+  const currentLabels = currentDevice.metadata.labels || {};
+  const updatedLabels = updatedDevice.labels || [];
+  if (updatedDevice.deviceAlias) {
+    updatedLabels.push({ key: 'alias', value: updatedDevice.deviceAlias });
+  }
+
+  const deviceLabelPatches = getLabelPatches('/metadata/labels', currentLabels, updatedLabels);
+  allPatches = allPatches.concat(deviceLabelPatches);
+
+  if (updatedDevice.fleetMatch) {
+    // The change in device labels makes the device bound to a fleet. Only the labels can be updated.
+    return allPatches;
+  }
+
+  // OS image
+  const currentOsImage = currentDevice.spec?.os?.image;
+  const newOsImage = updatedDevice.osImage;
+  if (!currentOsImage && newOsImage) {
+    allPatches.push({
+      path: '/spec/os',
+      op: 'add',
+      value: { image: newOsImage },
+    });
+  } else if (!newOsImage && currentOsImage) {
+    allPatches.push({
+      path: '/spec/os',
+      op: 'remove',
+    });
+  } else if (newOsImage && currentOsImage !== newOsImage) {
+    appendJSONPatch({
+      path: '/spec/os/image',
+      patches: allPatches,
+      newValue: newOsImage,
+      originalValue: currentOsImage,
+    });
+  }
+
+  // Configurations
+  const currentConfigs = currentDevice.spec?.config || [];
+  const newConfigs = updatedDevice.configTemplates.map(getAPIConfig);
+  const configPatches = getDeviceSpecConfigPatches(currentConfigs, newConfigs, '/spec/config');
+  allPatches = allPatches.concat(configPatches);
+
+  // Applications
+  const appPatches = getApplicationPatches('/spec', currentDevice.spec?.applications || [], updatedDevice.applications);
+  allPatches = allPatches.concat(appPatches);
+
+  return allPatches;
+};

package/src/components/Device/MatchPatternsModal/MatchPatternsForm.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Alert, Button, Label, LabelGroup } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import ErrorHelperText from '../../form/FieldHelperText';
+import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import { useTranslation } from '../../../hooks/useTranslation';
+import EditableLabelControl from '../../common/EditableLabelControl';
+
+export type MatchPatternsFormValues = {
+  matchPatterns: string[];
+};
+
+export type MatchPatternsFormProps = {
+  onClose: (reload?: boolean) => void;
+  error?: string;
+};
+
+const MatchPatternsForm: React.FC<MatchPatternsFormProps> = ({ onClose, error }) => {
+  const { t } = useTranslation();
+  const {
+    values,
+    setFieldValue,
+    submitForm,
+    isSubmitting,
+    errors: formErrors,
+  } = useFormikContext<MatchPatternsFormValues>();
+
+  const onPatternClose = (e: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    const newMatchPatterns = [...values.matchPatterns];
+    newMatchPatterns.splice(index, 1);
+    void setFieldValue('matchPatterns', newMatchPatterns);
+  };
+
+  const onAdd = (text: string) => {
+    const newMatchPatterns = [...values.matchPatterns, text];
+    void setFieldValue('matchPatterns', newMatchPatterns);
+  };
+
+  const onEdit = (index: number, nextText: string) => {
+    const newMatchPatterns = [...values.matchPatterns];
+    newMatchPatterns.splice(index, 1, nextText);
+    void setFieldValue('matchPatterns', newMatchPatterns);
+  };
+
+  const hasFormErrors = !!formErrors.matchPatterns;
+
+  return (
+    <FlightCtlForm>
+      <LabelGroup
+        isEditable
+        addLabelControl={
+          <EditableLabelControl defaultLabel="name.service" addButtonText={t('Add match pattern')} onAddLabel={onAdd} />
+        }
+        numLabels={20}
+        defaultIsOpen
+      >
+        {values.matchPatterns.map((pattern, index) => (
+          <Label
+            key={index}
+            id={`${index}`}
+            onClose={(e) => onPatternClose(e, index)}
+            onEditCancel={(_, prevText) => onEdit(index, prevText)}
+            onEditComplete={(_, newText) => onEdit(index, newText)}
+            isEditable
+          >
+            {pattern}
+          </Label>
+        ))}
+      </LabelGroup>
+      <ErrorHelperText error={formErrors.matchPatterns} />
+      {error && <Alert isInline title={error} variant="danger" />}
+      <FlightCtlActionGroup>
+        <Button
+          key="confirm"
+          variant="primary"
+          onClick={submitForm}
+          isDisabled={isSubmitting || hasFormErrors}
+          isLoading={isSubmitting}
+        >
+          {t('Update match patterns')}
+        </Button>
+        <Button key="cancel" variant="link" onClick={() => onClose()} isDisabled={isSubmitting}>
+          {t('Cancel')}
+        </Button>
+      </FlightCtlActionGroup>
+    </FlightCtlForm>
+  );
+};
+
+export default MatchPatternsForm;

package/src/components/Device/MatchPatternsModal/MatchPatternsModal.tsx

@@ -0,0 +1,62 @@
+import { Modal } from '@patternfly/react-core';
+import { Device } from '@flightctl/types';
+import { Formik } from 'formik';
+import * as React from 'react';
+import MatchPatternsForm, { MatchPatternsFormValues } from './MatchPatternsForm';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+import { getStringListPatches } from '../../../utils/patch';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { deviceSystemdUnitsValidationSchema } from '../../form/validations';
+
+type MatchPatternsModalProps = {
+  onClose: (reload?: boolean) => void;
+  device: Device;
+};
+
+/**
+ * Modal for editing the Systemd units matchPatterns of a Device.
+ * This operation is only supported for devices that are NOT bound to fleets, in which case
+ * the systemd units definition are defined in the `device.spec` itself, not via a templateVersion.
+
+ * @param device FlightCtl device
+ * @param onClose on close callback
+ */
+const MatchPatternsModal: React.FC<MatchPatternsModalProps> = ({ onClose, device }) => {
+  const { t } = useTranslation();
+  const { patch } = useFetch();
+  const [error, setError] = React.useState<string>();
+
+  const currentPatterns = device.spec?.systemd?.matchPatterns || [];
+  return (
+    <Modal title={t('Edit match patterns')} isOpen onClose={() => onClose()} variant="small">
+      <Formik<MatchPatternsFormValues>
+        validationSchema={deviceSystemdUnitsValidationSchema(t)}
+        initialValues={{ matchPatterns: currentPatterns }}
+        onSubmit={async ({ matchPatterns: updatedPatterns }) => {
+          try {
+            const patternPatchBuilder = (value: string[]) => ({
+              matchPatterns: value,
+            });
+            const patches = getStringListPatches(
+              '/spec/systemd',
+              currentPatterns,
+              updatedPatterns,
+              patternPatchBuilder,
+            );
+            if (patches.length > 0) {
+              await patch(`devices/${device.metadata.name}`, patches);
+            }
+            onClose(true);
+          } catch (err) {
+            setError(getErrorMessage(err));
+          }
+        }}
+      >
+        <MatchPatternsForm onClose={onClose} error={error} />
+      </Formik>
+    </Modal>
+  );
+};
+
+export default MatchPatternsModal;

package/src/components/EnrollmentRequest/EnrollmentRequestDetails/EnrollmentRequestDetails.css

@@ -0,0 +1,3 @@
+.fctl-enrollment-details__text-area {
+    resize: none;
+}