@flightctl/ui-components 0.0.4 → 0.0.5

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

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { Button, FormGroup, FormSection, Grid, Split, SplitItem } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { FieldArray, useField, useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import FormSelectTypeahead from '../../../form/FormSelectTypeahead';
+import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import TextField from '../../../form/TextField';
+import UploadField from '../../../form/UploadField';
+import CheckboxField from '../../../form/CheckboxField';
+import { DeviceSpecConfigFormValues } from '../types';
+import { InlineConfigTemplate } from '../../../../types/deviceSpec';
+
+import { formatFileMode } from '../deviceSpecUtils';
+
+const MAX_INLINE_FILE_SIZE_BYTES = 1024 * 1024;
+
+const FileForm = ({ fieldName }: { fieldName: string }) => {
+  const { t } = useTranslation();
+  const [{ value: file }] = useField<InlineConfigTemplate['files'][0]>(fieldName);
+
+  const permissions = React.useMemo(
+    () => ({
+      '0777': t('(0777) Read, write, and execute permissions for all users.'),
+      '0755': t("(0755) Read and execute permission for all users. The file's owner also has write permission."),
+      '0750': t(
+        "(0750) Read and execute permission for the owner and group. The file's owner also has write permission.",
+      ),
+      '0700': t("(0700) Read, write, and execute permissions for the file's owner only."),
+      '0666': t('(0666) Read and write permissions for all users. No execute permissions for others.'),
+      '0664': t('(0664) Read and write permissions for the owner and group. Read-only permission for all others.'),
+      '0660': t('(0660) Read and write permissions for the owner and group.'),
+      '0644': t('(0644) Read and write permissions for the owner. Read-only permission for all others.'),
+      '0640': t('(0640) Read and write permissions for the owner, and read-only permission for the group.'),
+      '0600': t('(0600) Read and write permissions for the owner.'),
+      '0400': t('(0400) Read permission for the owner.'),
+    }),
+    [t],
+  );
+
+  return (
+    <ExpandableFormSection title={t('File')} fieldName={fieldName} description={file.path}>
+      <Grid hasGutter>
+        <FormGroup label={t('File path on the device')} isRequired>
+          <TextField name={`${fieldName}.path`} />
+        </FormGroup>
+        <UploadField
+          label={t('Content')}
+          name={`${fieldName}.content`}
+          maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES}
+          isRequired
+        />
+        <FormGroup>
+          <CheckboxField name={`${fieldName}.base64`} label={t('Content is base64 encoded')} />
+        </FormGroup>
+        <FormGroup label={t('Permissions')}>
+          <FormSelectTypeahead
+            name={`${fieldName}.permissions`}
+            placeholderText={t('Select permissions')}
+            helperText={t('Select from the list or type in the permission code in octal notation')}
+            defaultId="0644"
+            items={permissions}
+            validateNewItem={(value) => {
+              try {
+                if (value !== '' && value.length <= 4) {
+                  const valNum = Number(`0o${value}`);
+                  if (isFinite(valNum) && valNum >= 0 && valNum <= 0o7777) {
+                    return undefined;
+                  }
+                }
+              } catch {
+                return t('Invalid permissions');
+              }
+              return t('Invalid permissions');
+            }}
+            transformNewItem={formatFileMode}
+          />
+        </FormGroup>
+        <FormGroup label={t('User')}>
+          <TextField name={`${fieldName}.user`} placeholder="root" />
+        </FormGroup>
+        <FormGroup label={t('Group')}>
+          <TextField name={`${fieldName}.group`} placeholder="root" />
+        </FormGroup>
+      </Grid>
+    </ExpandableFormSection>
+  );
+};
+
+type ConfigInlineTemplateFormProps = {
+  index: number;
+};
+
+const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
+  const { t } = useTranslation();
+  const { values, setFieldValue } = useFormikContext<DeviceSpecConfigFormValues>();
+  const inlineConfig = values.configTemplates[index] as InlineConfigTemplate;
+  React.useEffect(() => {
+    if (!inlineConfig.files?.length) {
+      setFieldValue(`configTemplates.${index}.files`, [
+        {
+          path: '',
+          content: '',
+        },
+      ]);
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <FieldArray name={`configTemplates.${index}.files`}>
+      {({ push, remove }) => (
+        <>
+          {inlineConfig.files?.map((_, fileIndex) => {
+            const fieldName = `configTemplates[${index}].files[${fileIndex}]`;
+            return (
+              <FormSection key={fileIndex}>
+                <Split hasGutter>
+                  <SplitItem isFilled>
+                    <FileForm fieldName={fieldName} />
+                  </SplitItem>
+                  {inlineConfig.files.length > 1 && (
+                    <SplitItem>
+                      <Button
+                        variant="link"
+                        icon={<MinusCircleIcon />}
+                        iconPosition="start"
+                        onClick={() => remove(fileIndex)}
+                      />
+                    </SplitItem>
+                  )}
+                </Split>
+              </FormSection>
+            );
+          })}
+          <FormSection>
+            <FormGroup>
+              <Button
+                variant="link"
+                icon={<PlusCircleIcon />}
+                iconPosition="start"
+                onClick={() => {
+                  push({
+                    path: '',
+                    content: '',
+                  });
+                }}
+              >
+                {t('Add file')}
+              </Button>
+            </FormGroup>
+          </FormSection>
+        </>
+      )}
+    </FieldArray>
+  );
+};
+
+export default ConfigInlineTemplateForm;

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;