@flightctl/ui-components 0.0.4 → 0.0.10

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import { FormGroup } from '@patternfly/react-core';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+
+import TextField from '../../../form/TextField';
+import { DeviceSpecConfigFormValues } from '../types';
+import { KubeSecretTemplate } from '../../../../types/deviceSpec';
+
+type ConfigK8sSecretTemplateFormProps = {
+  index: number;
+};
+
+const ConfigK8sSecretTemplateForm = ({ index }: ConfigK8sSecretTemplateFormProps) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<DeviceSpecConfigFormValues>();
+  const template = values.configTemplates[index] as KubeSecretTemplate;
+  return (
+    <>
+      <FormGroup label={t('Secret name')} isRequired>
+        <TextField
+          aria-label={t('Secret name')}
+          value={template.secretName}
+          name={`configTemplates.${index}.secretName`}
+          isDisabled
+        />
+      </FormGroup>
+      <FormGroup label={t('Secret namespace')} isRequired>
+        <TextField
+          aria-label={t('Secret namespace')}
+          name={`configTemplates.${index}.secretNs`}
+          value={template.secretNs}
+          isDisabled
+        />
+      </FormGroup>
+      <FormGroup label={t('Mount path')} isRequired>
+        <TextField
+          aria-label={t('Mount path')}
+          name={`configTemplates.${index}.mountPath`}
+          value={template.mountPath}
+          placeholder={t('/absolute/path')}
+          isDisabled
+        />
+      </FormGroup>
+    </>
+  );
+};
+
+export default ConfigK8sSecretTemplateForm;

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

@@ -0,0 +1,174 @@
+import * as React from 'react';
+
+import {
+  Alert,
+  Bullseye,
+  Button,
+  FormGroup,
+  FormSection,
+  Grid,
+  Spinner,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import { FieldArray, useField, useFormikContext } from 'formik';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+
+import { RepoSpecType, Repository, RepositoryList } from '@flightctl/types';
+import { ConfigType, SpecConfigTemplate } from '../../../../types/deviceSpec';
+import { DeviceSpecConfigFormValues } from '../types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
+import { getErrorMessage } from '../../../../utils/error';
+import { sortByName } from '../../../../utils/sort/generic';
+import { getDnsSubdomainValidations } from '../../../form/validations';
+import ErrorHelperText from '../../../form/FieldHelperText';
+import FormSelect from '../../../form/FormSelect';
+import RichValidationTextField from '../../../form/RichValidationTextField';
+import ConfigWithRepositoryTemplateForm from './ConfigWithRepositoryTemplateForm';
+import ConfigK8sSecretTemplateForm from './ConfigK8sSecretTemplateForm';
+import ConfigInlineTemplateForm from './ConfigInlineTemplateForm';
+import ExpandableFormSection from '../../../form/ExpandableFormSection';
+
+const useValidateOnMount = () => {
+  const { validateForm } = useFormikContext<DeviceSpecConfigFormValues>();
+
+  // validate new config section on mount
+  React.useEffect(() => {
+    validateForm();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+type ConfigSectionProps = {
+  index: number;
+  repositories: Repository[];
+  repoRefetch: VoidFunction;
+};
+
+const ConfigSection = ({ index, repositories, repoRefetch }: ConfigSectionProps) => {
+  const { t } = useTranslation();
+  const fieldName = `configTemplates[${index}]`;
+  const [
+    {
+      value: { name, type },
+    },
+  ] = useField<SpecConfigTemplate>(fieldName);
+
+  useValidateOnMount();
+
+  const items = React.useMemo(() => {
+    const options = {
+      [ConfigType.GIT]: { label: t('Git configuration') },
+      [ConfigType.HTTP]: { label: t('Http configuration') },
+      [ConfigType.INLINE]: { label: t('Inline configuration') },
+    };
+    if (type === ConfigType.K8S_SECRET) {
+      options[ConfigType.K8S_SECRET] = { label: t('Kubernetes secret provider') };
+    }
+    return options;
+    // The k8s secret option must remain active for this config even when the users switch the configType to a different one
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [t]);
+
+  return (
+    <ExpandableFormSection title={t('Configurations')} fieldName={fieldName} description={name}>
+      <Grid hasGutter>
+        <RichValidationTextField
+          fieldName={`${fieldName}.name`}
+          aria-label={t('Source name')}
+          validations={getDnsSubdomainValidations(t)}
+          isRequired
+        />
+
+        <FormGroup label={t('Source type')} isRequired>
+          <FormSelect items={items} name={`${fieldName}.type`} placeholderText={t('Select a source type')} />
+        </FormGroup>
+
+        {type === ConfigType.K8S_SECRET && <ConfigK8sSecretTemplateForm index={index} />}
+        {type === ConfigType.INLINE && <ConfigInlineTemplateForm index={index} />}
+        {(type === ConfigType.GIT || type === ConfigType.HTTP) && (
+          <ConfigWithRepositoryTemplateForm
+            repoType={type === ConfigType.HTTP ? RepoSpecType.HTTP : RepoSpecType.GIT}
+            index={index}
+            repositories={repositories}
+            repoRefetch={repoRefetch}
+          />
+        )}
+      </Grid>
+    </ExpandableFormSection>
+  );
+};
+
+const ConfigTemplateForm = () => {
+  const { t } = useTranslation();
+  const { values, errors } = useFormikContext<DeviceSpecConfigFormValues>();
+  const [repositoryList, isLoading, error, refetch] = useFetchPeriodically<RepositoryList>({
+    endpoint: 'repositories',
+  });
+
+  const repositories = React.useMemo(() => sortByName(repositoryList?.items || []), [repositoryList]);
+
+  const generalError = typeof errors.configTemplates === 'string' ? errors.configTemplates : undefined;
+
+  if (error) {
+    return (
+      <Alert isInline variant="danger" title={t('Failed to load repositories')}>
+        {getErrorMessage(error)}
+      </Alert>
+    );
+  } else if (isLoading) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  return (
+    <FieldArray name="configTemplates">
+      {({ push, remove }) => (
+        <>
+          {values.configTemplates.map((_, index) => (
+            <FormSection key={index}>
+              <Split hasGutter>
+                <SplitItem isFilled>
+                  <ConfigSection index={index} repositories={repositories} repoRefetch={refetch} />
+                </SplitItem>
+                <SplitItem>
+                  <Button
+                    variant="link"
+                    icon={<MinusCircleIcon />}
+                    iconPosition="start"
+                    onClick={() => remove(index)}
+                  />
+                </SplitItem>
+              </Split>
+            </FormSection>
+          ))}
+          <FormSection>
+            <FormGroup>
+              <Button
+                variant="link"
+                icon={<PlusCircleIcon />}
+                iconPosition="start"
+                onClick={() => {
+                  push({
+                    name: '',
+                    type: '',
+                  });
+                }}
+              >
+                {t('Add configuration')}
+              </Button>
+            </FormGroup>
+          </FormSection>
+          <ErrorHelperText error={generalError} />
+        </>
+      )}
+    </FieldArray>
+  );
+};
+
+export default ConfigTemplateForm;

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

@@ -0,0 +1,229 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import { Button, FormGroup, Icon, MenuFooter } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { TFunction, Trans } from 'react-i18next';
+
+import { RepoSpecType, Repository } from '@flightctl/types';
+import { GitConfigTemplate, HttpConfigTemplate } from '../../../../types/deviceSpec';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { DeviceSpecConfigFormValues } from '../types';
+import TextField from '../../../form/TextField';
+import FormSelect from '../../../form/FormSelect';
+import CreateRepositoryModal from '../../../modals/CreateRepositoryModal/CreateRepositoryModal';
+import WithHelperText from '../../../common/WithHelperText';
+
+type ConfigWithRepositoryTemplateFormProps = {
+  repoType: RepoSpecType;
+  index: number;
+  repositories: Repository[];
+  repoRefetch: VoidFunction;
+};
+
+const getRepositoryItems = (
+  t: TFunction,
+  repositories: Repository[],
+  repoType: RepoSpecType,
+  forcedRepoName?: string,
+) => {
+  const repositoryItems = repositories.reduce((acc, curr) => {
+    if (curr.spec.type === repoType) {
+      acc[curr.metadata.name || ''] = {
+        label: curr.metadata.name,
+        description: curr.spec.url,
+      };
+    }
+    return acc;
+  }, {});
+  // If there's a broken reference to a repository, we must add an item so the name shows in the dropdown
+  if (forcedRepoName && !repositoryItems[forcedRepoName]) {
+    repositoryItems[forcedRepoName] = {
+      label: forcedRepoName,
+      description: (
+        <>
+          <Icon size="sm" status="danger">
+            <ExclamationCircleIcon />
+          </Icon>{' '}
+          {t('Missing repository')}
+        </>
+      ),
+    };
+  }
+  return repositoryItems;
+};
+
+const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index: number }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <FormGroup label={t('Branch/tag/commit')} isRequired>
+        <TextField
+          aria-label={t('Branch/tag/commit')}
+          name={`configTemplates[${index}].targetRevision`}
+          value={template.targetRevision}
+        />
+      </FormGroup>
+      <FormGroup
+        label={
+          <WithHelperText
+            ariaLabel={t('Path')}
+            content={t('Path in the repository where the configuration file(s) are located')}
+            showLabel
+          />
+        }
+        isRequired
+      >
+        <TextField
+          aria-label={t('Path')}
+          name={`configTemplates[${index}].path`}
+          value={template.path}
+          placeholder={t('/absolute/path')}
+        />
+      </FormGroup>
+      <FormGroup
+        isRequired
+        label={
+          <WithHelperText
+            ariaLabel={t('Mount path')}
+            content={t('Path in the device where the configurations will be stored')}
+            showLabel
+          />
+        }
+      >
+        <TextField
+          aria-label={t('Mount path')}
+          name={`configTemplates[${index}].mountPath`}
+          value={template.mountPath}
+          placeholder={t('/absolute/path')}
+        />
+      </FormGroup>
+    </>
+  );
+};
+
+const HttpConfigForm = ({
+  template,
+  baseURL,
+  index,
+}: {
+  template: HttpConfigTemplate;
+  index: number;
+  baseURL?: string;
+}) => {
+  const { t } = useTranslation();
+
+  let suffixHelperText: React.ReactNode;
+  if (baseURL) {
+    const fullURL = `${baseURL}${template.suffix || ''}`;
+    suffixHelperText = (
+      <Trans t={t}>
+        Full HTTP service URL: <strong>{fullURL}</strong>
+      </Trans>
+    );
+  } else {
+    suffixHelperText = t('Select a repository to generate the full URL');
+  }
+
+  return (
+    <>
+      <FormGroup
+        label={t('Suffix')}
+        labelIcon={
+          <WithHelperText
+            ariaLabel={t('Suffix')}
+            content={t(
+              "Suffix that will be combined with the repository's base URL to invoke the HTTP service. Can include query parameters.",
+            )}
+          />
+        }
+      >
+        <TextField
+          aria-label={t('Suffix')}
+          name={`configTemplates[${index}].suffix`}
+          value={template.suffix || ''}
+          helperText={suffixHelperText}
+        />
+      </FormGroup>
+      <FormGroup
+        label={t('File path')}
+        labelIcon={
+          <WithHelperText
+            ariaLabel={t('File path')}
+            content={t('Path of the file where the response will be stored in the device filesystem.')}
+          />
+        }
+        isRequired
+      >
+        <TextField
+          aria-label={t('File path')}
+          name={`configTemplates[${index}].filePath`}
+          value={template.filePath || ''}
+          placeholder={t('/absolute/path')}
+        />
+      </FormGroup>
+    </>
+  );
+};
+
+const ConfigWithRepositoryTemplateForm = ({
+  repoType,
+  index,
+  repositories,
+  repoRefetch,
+}: ConfigWithRepositoryTemplateFormProps) => {
+  const { t } = useTranslation();
+  const { values, setFieldValue } = useFormikContext<DeviceSpecConfigFormValues>();
+  const [createRepoModalOpen, setCreateRepoModalOpen] = React.useState(false);
+
+  const ct = values.configTemplates[index] as HttpConfigTemplate | GitConfigTemplate;
+  const selectedRepoName = ct?.repository;
+
+  const repositoryItems = getRepositoryItems(t, repositories, repoType, selectedRepoName);
+  const selectedRepo = repositories.find((repo) => repo.metadata.name === selectedRepoName);
+  return (
+    <>
+      <FormGroup label={t('Repository')} isRequired>
+        <FormSelect
+          name={`configTemplates[${index}].repository`}
+          items={repositoryItems}
+          placeholderText={t('Select a repository')}
+        >
+          <MenuFooter>
+            <Button
+              variant="link"
+              isInline
+              icon={<PlusCircleIcon />}
+              onClick={() => {
+                setCreateRepoModalOpen(true);
+              }}
+            >
+              {t('Create repository')}
+            </Button>
+          </MenuFooter>
+        </FormSelect>
+      </FormGroup>
+      {repoType === RepoSpecType.GIT && <GitConfigForm template={ct as GitConfigTemplate} index={index} />}
+      {repoType === RepoSpecType.HTTP && (
+        <HttpConfigForm template={ct as HttpConfigTemplate} index={index} baseURL={selectedRepo?.spec.url} />
+      )}
+      {createRepoModalOpen && (
+        <CreateRepositoryModal
+          onClose={() => setCreateRepoModalOpen(false)}
+          onSuccess={(repo) => {
+            setCreateRepoModalOpen(false);
+            repoRefetch();
+            void setFieldValue(`configTemplates[${index}].repository`, repo.metadata.name, true);
+          }}
+          options={{
+            canUseResourceSyncs: false,
+            allowedRepoTypes: [repoType],
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default ConfigWithRepositoryTemplateForm;

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Alert, CodeBlock, CodeBlockCode, FormGroup, Grid } from '@patternfly/react-core';
+import { FormikErrors, useFormikContext } from 'formik';
+import { Trans } from 'react-i18next';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import WithHelperText from '../../../common/WithHelperText';
+import TextField from '../../../form/TextField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { DeviceSpecConfigFormValues } from '../types';
+import ConfigTemplateForm from './ConfigTemplateForm';
+import ApplicationsForm from './ApplicationsForm';
+
+export const deviceTemplateStepId = 'device-template';
+
+export const isDeviceTemplateStepValid = (errors: FormikErrors<DeviceSpecConfigFormValues>) => {
+  return !errors.osImage && !errors.configTemplates && !errors.applications;
+};
+
+const templateOption1 = '{{ device.metadata.labels[key] }}';
+const templateOption2 = '{{ device.metadata.name }}';
+const exampleCode = `/device-configs/factory-floors/floor-{{ device.metadata.labels[factory-floor] }}`;
+
+const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<DeviceSpecConfigFormValues>();
+  return (
+    <Grid span={8}>
+      <FlightCtlForm>
+        {isFleet && (
+          <Alert isInline variant="info" title={t('Using template variables')} isExpandable>
+            <Trans t={t}>
+              Add a variable by using <strong>{templateOption1}</strong> or <strong>{templateOption2}</strong> and it
+              will be applied based on each device&rsquo;s details. For example, you could set the following value to
+              apply different files in a Git configuration:
+            </Trans>
+            <CodeBlock className="pf-v5-u-mt-md">
+              <CodeBlockCode>{exampleCode}</CodeBlockCode>
+            </CodeBlock>
+          </Alert>
+        )}
+        <FormGroup
+          label={
+            <WithHelperText
+              ariaLabel={t('System image')}
+              content={
+                isFleet
+                  ? t("The target system image for this fleet's devices.")
+                  : t('The target system image for this device.')
+              }
+              showLabel
+            />
+          }
+        >
+          <TextField
+            name="osImage"
+            aria-label={t('System image')}
+            value={values.osImage}
+            helperText={t(
+              'Must be either an OCI image ref (e.g. "quay.io/redhat/rhde:9.3") or ostree ref (e.g. "https://ostree.fedoraproject.org/iot?ref=fedora/stable/x86_64/iot"). Keep this empty if you do not want to manage your OS from Flight Control.',
+            )}
+          />
+        </FormGroup>
+        <FormGroup>
+          <ConfigTemplateForm />
+        </FormGroup>
+        <FormGroup>
+          <ApplicationsForm />
+        </FormGroup>
+      </FlightCtlForm>
+    </Grid>
+  );
+};
+
+export default DeviceTemplateStep;

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;