@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/Device/EditDeviceWizard/EditDeviceWizardFooter.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import { Button, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core';
+
+import { EditDeviceFormValues } from './types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useNavigate } from '../../../hooks/useNavigate';
+import { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
+import { deviceTemplateStepId, isDeviceTemplateStepValid } from './steps/DeviceTemplateStep';
+import { reviewDeviceStepId } from './steps/ReviewDeviceStep';
+
+const EditDeviceWizardFooter = () => {
+  const { t } = useTranslation();
+  const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
+  const { submitForm, isSubmitting, errors } = useFormikContext<EditDeviceFormValues>();
+  const navigate = useNavigate();
+
+  const isSubmitStep = activeStep.id === reviewDeviceStepId;
+
+  let isStepValid = true;
+  if (activeStep.id === generalInfoStepId) {
+    isStepValid = isGeneralInfoStepValid(errors);
+  } else if (activeStep.id === deviceTemplateStepId) {
+    isStepValid = isDeviceTemplateStepValid(errors);
+  }
+
+  const primaryBtn = isSubmitStep ? (
+    <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+      {t('Save')}
+    </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 EditDeviceWizardFooter;

package/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Icon, Tooltip, WizardNav, WizardNavItem, useWizardContext } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { TFunction } from 'react-i18next';
+
+const generalInfoStepIndex = 0;
+const deviceTemplateStepIndex = 1;
+const reviewDeviceStepIndex = 2;
+
+const disabledTemplateReason = (t: TFunction) =>
+  t('The device will be bound to a fleet. As a result, its configurations cannot be edited directly.');
+
+const EditDeviceWizardNav = () => {
+  const { t } = useTranslation();
+  const { activeStep, steps, goToStepByIndex } = useWizardContext();
+
+  const isEditTemplateDisabled = steps[deviceTemplateStepIndex]?.isDisabled;
+  const isReviewDeviceDisabled = steps[reviewDeviceStepIndex]?.isDisabled;
+
+  return (
+    <WizardNav>
+      <WizardNavItem
+        stepIndex={generalInfoStepIndex}
+        content={t('General info')}
+        isCurrent={!activeStep || activeStep?.index === generalInfoStepIndex + 1}
+        onClick={() => {
+          goToStepByIndex(generalInfoStepIndex + 1);
+        }}
+      />
+      <WizardNavItem
+        stepIndex={deviceTemplateStepIndex}
+        content={t('Device template')}
+        isCurrent={activeStep?.index === deviceTemplateStepIndex + 1}
+        isDisabled={isEditTemplateDisabled}
+        onClick={() => {
+          if (!isEditTemplateDisabled) {
+            goToStepByIndex(deviceTemplateStepIndex + 1);
+          }
+        }}
+      >
+        {isEditTemplateDisabled && (
+          <Tooltip content={disabledTemplateReason(t)}>
+            <Icon status="info" size="sm">
+              <InfoCircleIcon />
+            </Icon>
+          </Tooltip>
+        )}
+      </WizardNavItem>
+      <WizardNavItem
+        stepIndex={reviewDeviceStepIndex}
+        content={t('Review and update')}
+        isCurrent={activeStep?.index === reviewDeviceStepIndex + 1}
+        isDisabled={isReviewDeviceDisabled}
+        onClick={() => {
+          if (!isReviewDeviceDisabled) {
+            goToStepByIndex(reviewDeviceStepIndex + 1);
+          }
+        }}
+      />
+    </WizardNav>
+  );
+};
+
+export default EditDeviceWizardNav;

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

@@ -0,0 +1,278 @@
+import {
+  DeviceSpec,
+  FileSpec,
+  GitConfigProviderSpec,
+  HttpConfigProviderSpec,
+  InlineConfigProviderSpec,
+  KubernetesSecretProviderSpec,
+  PatchRequest,
+} from '@flightctl/types';
+import {
+  ConfigSourceProvider,
+  ConfigType,
+  GitConfigTemplate,
+  HttpConfigTemplate,
+  InlineConfigTemplate,
+  KubeSecretTemplate,
+  SpecConfigTemplate,
+  isGitConfigTemplate,
+  isGitProviderSpec,
+  isHttpConfigTemplate,
+  isHttpProviderSpec,
+  isInlineProviderSpec,
+  isKubeProviderSpec,
+  isKubeSecretTemplate,
+} from '../../../types/deviceSpec';
+import { ApplicationFormSpec } from './types';
+
+const DEFAULT_INLINE_FILE_MODE = 420; // In Octal: 0644
+const DEFAULT_INLINE_FILE_USER = 'root';
+const DEFAULT_INLINE_FILE_GROUP = 'root';
+
+export const getConfigType = (config: ConfigSourceProvider): ConfigType | undefined => {
+  if (isGitProviderSpec(config)) {
+    return ConfigType.GIT;
+  } else if (isInlineProviderSpec(config)) {
+    return ConfigType.INLINE;
+  } else if (isHttpProviderSpec(config)) {
+    return ConfigType.HTTP;
+  } else if (isKubeProviderSpec(config)) {
+    return ConfigType.K8S_SECRET;
+  }
+  // Fallback in case a new configType is added to the Backend which the UI doesn't support yet
+  return undefined;
+};
+
+const isSameGitConf = (a: GitConfigProviderSpec, b: GitConfigProviderSpec) => {
+  const aRef = a.gitRef;
+  const bRef = b.gitRef;
+  return (
+    a.name === b.name &&
+    aRef.path === bRef.path &&
+    aRef.repository === bRef.repository &&
+    aRef.targetRevision === bRef.targetRevision &&
+    (aRef.mountPath || '') === (bRef.mountPath || '')
+  );
+};
+
+const isSameHttpConf = (a: HttpConfigProviderSpec, b: HttpConfigProviderSpec) => {
+  const aRef = a.httpRef;
+  const bRef = b.httpRef;
+  return (
+    a.name === b.name &&
+    aRef.filePath === bRef.filePath &&
+    aRef.repository === bRef.repository &&
+    (aRef.suffix || '') === (bRef.suffix || '')
+  );
+};
+
+const isSameSecretConf = (a: KubernetesSecretProviderSpec, b: KubernetesSecretProviderSpec) => {
+  const aRef = a.secretRef;
+  const bRef = b.secretRef;
+  return (
+    a.name === b.name &&
+    aRef.name === bRef.name &&
+    aRef.namespace === bRef.namespace &&
+    aRef.mountPath === bRef.mountPath
+  );
+};
+
+const isSameInlineConfigValue = <T extends string | number>(a: T | undefined, b: T | undefined, defaultValue: T) => {
+  const aValue = a === undefined ? defaultValue : a;
+  const bValue = b === undefined ? defaultValue : b;
+  return aValue === bValue;
+};
+
+const isSameInlineConf = (a: InlineConfigProviderSpec, b: InlineConfigProviderSpec) => {
+  return (
+    a.name === b.name &&
+    a.inline.length === b.inline.length &&
+    a.inline.every((aInline, index) => {
+      const bInline = b.inline[index];
+      return (
+        aInline.path === bInline.path &&
+        isSameInlineConfigValue<string>(aInline.user, bInline.user, DEFAULT_INLINE_FILE_USER) &&
+        isSameInlineConfigValue<string>(aInline.group, bInline.group, DEFAULT_INLINE_FILE_GROUP) &&
+        isSameInlineConfigValue<number>(aInline.mode, bInline.mode, DEFAULT_INLINE_FILE_MODE) &&
+        isSameInlineConfigValue<string>(
+          aInline.contentEncoding,
+          bInline.contentEncoding,
+          FileSpec.contentEncoding.PLAIN,
+        ) &&
+        aInline.content === bInline.content
+      );
+    })
+  );
+};
+
+export const getDeviceSpecConfigPatches = (
+  currentConfigs: ConfigSourceProvider[],
+  newConfigs: ConfigSourceProvider[],
+  configPath: string,
+) => {
+  const allPatches: PatchRequest = [];
+
+  if (currentConfigs.length === 0 && newConfigs.length > 0) {
+    allPatches.push({
+      path: configPath,
+      op: 'add',
+      value: newConfigs,
+    });
+  } else if (currentConfigs.length > 0 && newConfigs.length === 0) {
+    allPatches.push({
+      path: configPath,
+      op: 'remove',
+    });
+  } else if (currentConfigs.length !== newConfigs.length) {
+    allPatches.push({
+      path: configPath,
+      op: 'replace',
+      value: newConfigs,
+    });
+  } else {
+    const hasConfigChanges = newConfigs.some((newConfig) => {
+      // Attempts to find a new config which has been changed from "currentConfigs"
+      const isUnchanged = currentConfigs.some((conf) => {
+        const currentType = getConfigType(conf);
+        const newType = getConfigType(newConfig);
+        if (currentType !== newType) {
+          return false;
+        }
+        switch (newType) {
+          case ConfigType.GIT:
+            return isSameGitConf(newConfig as GitConfigProviderSpec, conf as GitConfigProviderSpec);
+          case ConfigType.HTTP:
+            return isSameHttpConf(newConfig as HttpConfigProviderSpec, conf as HttpConfigProviderSpec);
+          case ConfigType.K8S_SECRET:
+            return isSameSecretConf(newConfig as KubernetesSecretProviderSpec, conf as KubernetesSecretProviderSpec);
+          case ConfigType.INLINE:
+            return isSameInlineConf(newConfig as InlineConfigProviderSpec, conf as InlineConfigProviderSpec);
+        }
+        return false;
+      });
+
+      return !isUnchanged;
+    });
+
+    if (hasConfigChanges) {
+      allPatches.push({
+        path: configPath,
+        op: 'replace',
+        value: newConfigs,
+      });
+    }
+  }
+
+  return allPatches;
+};
+
+export const getAPIConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
+  if (isGitConfigTemplate(ct)) {
+    return {
+      name: ct.name,
+      gitRef: {
+        path: ct.path,
+        repository: ct.repository,
+        targetRevision: ct.targetRevision,
+        mountPath: ct.mountPath,
+      },
+    };
+  }
+  if (isKubeSecretTemplate(ct)) {
+    return {
+      name: ct.name,
+      secretRef: {
+        mountPath: ct.mountPath,
+        name: ct.secretName,
+        namespace: ct.secretNs,
+      },
+    };
+  }
+  if (isHttpConfigTemplate(ct)) {
+    return {
+      name: ct.name,
+      httpRef: {
+        repository: ct.repository,
+        suffix: ct.suffix,
+        filePath: ct.filePath,
+      },
+    };
+  }
+  return {
+    name: ct.name,
+    inline: ct.files.map((file) => {
+      return {
+        path: file.path,
+        content: file.content,
+        group: file.group,
+        user: file.user,
+        mode: file.permissions ? parseInt(file.permissions, 8) : undefined,
+        contentEncoding: file.base64 ? FileSpec.contentEncoding.BASE64 : undefined,
+      };
+    }),
+  };
+};
+
+export const getApplicationValues = (deviceSpec?: DeviceSpec): ApplicationFormSpec[] => {
+  const map = deviceSpec?.applications || [];
+  return map.map((app) => {
+    return {
+      name: app.name || '',
+      image: app.image,
+      variables: Object.entries(app.envVars || {}).map(([varName, varValue]) => ({ name: varName, value: varValue })),
+    };
+  });
+};
+
+export const getConfigTemplatesValues = (deviceSpec?: DeviceSpec) =>
+  deviceSpec?.config?.map<SpecConfigTemplate>((c) => {
+    if (isGitProviderSpec(c)) {
+      return {
+        type: ConfigType.GIT,
+        name: c.name,
+        path: c.gitRef.path,
+        mountPath: c.gitRef.mountPath,
+        repository: c.gitRef.repository,
+        targetRevision: c.gitRef.targetRevision,
+      } as GitConfigTemplate;
+    }
+    if (isKubeProviderSpec(c)) {
+      return {
+        type: ConfigType.K8S_SECRET,
+        name: c.name,
+        mountPath: c.secretRef.mountPath,
+        secretName: c.secretRef.name,
+        secretNs: c.secretRef.namespace,
+      } as KubeSecretTemplate;
+    }
+    if (isHttpProviderSpec(c)) {
+      return {
+        type: ConfigType.HTTP,
+        name: c.name,
+        repository: c.httpRef.repository,
+        suffix: c.httpRef.suffix,
+        filePath: c.httpRef.filePath,
+      } as HttpConfigTemplate;
+    }
+
+    return {
+      type: ConfigType.INLINE,
+      name: c.name,
+      files: c.inline.map((inline) => {
+        return {
+          user: inline.user,
+          group: inline.group,
+          path: inline.path,
+          permissions: inline.mode !== undefined ? formatFileMode(inline.mode) : undefined,
+          content: inline.content,
+          base64: inline.contentEncoding === FileSpec.contentEncoding.BASE64,
+        } as InlineConfigTemplate['files'][0];
+      }),
+    } as InlineConfigTemplate;
+  }) || [];
+
+export const formatFileMode = (mode: string | number): string => {
+  const modeStr = typeof mode === 'number' ? mode.toString(8) : mode;
+  const prefixSize = 4 - modeStr.length;
+  return prefixSize > 0 ? `${'0'.repeat(prefixSize)}${modeStr}` : modeStr;
+};

package/src/components/Device/EditDeviceWizard/steps/ApplicationsForm.css

@@ -0,0 +1,4 @@
+.fctl-application-template__variable-name {
+  display: flex;
+  align-items: flex-end;
+}

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

@@ -0,0 +1,140 @@
+import * as React from 'react';
+
+import { Button, FormGroup, FormSection, Grid, 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 { ApplicationFormSpec, DeviceSpecConfigFormValues } from '../types';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import TextField from '../../../form/TextField';
+import ExpandableFormSection from '../../../form/ExpandableFormSection';
+
+import './ApplicationsForm.css';
+
+const ApplicationSection = ({ index }: { index: number }) => {
+  const { t } = useTranslation();
+  const fieldName = `applications[${index}]`;
+  const [{ value: app }] = useField<ApplicationFormSpec>(fieldName);
+
+  return (
+    <ExpandableFormSection title={t('Application')} fieldName={fieldName} description={app.name || app.image}>
+      <Grid hasGutter>
+        <FormGroup label={t('Image')} isRequired>
+          <TextField aria-label={t('Image')} name={`applications.${index}.image`} value={app.image} />
+        </FormGroup>
+        <FormGroup label={t('Application name')}>
+          <TextField
+            aria-label={t('Application name')}
+            name={`applications.${index}.name`}
+            value={app.name}
+            helperText={t('The image name will be used if no name is specified')}
+          />
+        </FormGroup>
+        <FieldArray name={`applications.${index}.variables`}>
+          {({ push, remove }) => (
+            <FormSection>
+              {app.variables.map((variable, varIndex) => (
+                <Split hasGutter key={varIndex}>
+                  <SplitItem className="fctl-application-template__variable-name">
+                    <FormGroup label={t('Variable {{ number }}', { number: varIndex + 1 })} />
+                  </SplitItem>
+                  <SplitItem>
+                    <FormGroup label={t('Name')} isRequired>
+                      <TextField
+                        aria-label={t('Name')}
+                        name={`applications.${index}.variables.${varIndex}.name`}
+                        value={variable.name}
+                      />
+                    </FormGroup>
+                  </SplitItem>
+                  <SplitItem isFilled>
+                    <FormGroup label={t('Value')} isRequired>
+                      <TextField
+                        aria-label={t('Value')}
+                        name={`applications.${index}.variables.${varIndex}.value`}
+                        value={variable.value}
+                      />
+                    </FormGroup>
+                  </SplitItem>
+                  <SplitItem>
+                    <Button
+                      variant="link"
+                      icon={<MinusCircleIcon />}
+                      iconPosition="end"
+                      onClick={() => remove(varIndex)}
+                    />
+                  </SplitItem>
+                </Split>
+              ))}
+              <FormGroup>
+                <Button
+                  variant="link"
+                  icon={<PlusCircleIcon />}
+                  iconPosition="start"
+                  onClick={() => {
+                    push({ name: '', value: '' });
+                  }}
+                >
+                  {t('Add a variable')}
+                </Button>
+              </FormGroup>
+            </FormSection>
+          )}
+        </FieldArray>
+      </Grid>
+    </ExpandableFormSection>
+  );
+};
+
+const ApplicationsForm = () => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<DeviceSpecConfigFormValues>();
+
+  return (
+    <FieldArray name="applications">
+      {({ push, remove }) => (
+        <>
+          {values.applications.map((_app, index) => (
+            <FormSection key={index}>
+              <Split hasGutter>
+                <SplitItem isFilled>
+                  <ApplicationSection index={index} />
+                </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: '',
+                    image: '',
+                    variables: [],
+                  });
+                }}
+              >
+                {t('Add application')}
+              </Button>
+            </FormGroup>
+          </FormSection>
+        </>
+      )}
+    </FieldArray>
+  );
+};
+
+export default ApplicationsForm;