@flightctl/ui-components 0.0.10 → 0.4.0-rc2

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

@@ -1,4 +1,5 @@
 import {
+  ConfigProviderSpec,
   DeviceSpec,
   FileSpec,
   GitConfigProviderSpec,
@@ -29,6 +30,27 @@ const DEFAULT_INLINE_FILE_MODE = 420; // In Octal: 0644
 const DEFAULT_INLINE_FILE_USER = 'root';
 const DEFAULT_INLINE_FILE_GROUP = 'root';
 
+export const ACM_REPO_NAME = 'acm-registration';
+const ACM_CRD_YAML_PATH = '/var/local/acm-import/crd.yaml';
+const ACM_IMPORT_YAML_PATH = '/var/local/acm-import/import.yaml';
+const ACM_REPO_SUFFIX = `/agent-registration/manifests/`;
+
+const MICROSHIFT_REGISTRATION_HOOK_NAME = 'apply-acm-manifests';
+const MICROSHIFT_REGISTRATION_HOOK_FILE = '/etc/flightctl/hooks.d/afterupdating/50-acm-registration.yaml';
+const MICROSHIFT_REGISTRATION_HOOK = `- if:
+  - path: /var/local/acm-import/crd.yaml
+    op: [created]
+  run: kubectl apply -f /var/local/acm-import/crd.yaml
+  envVars:
+    KUBECONFIG: /var/lib/microshift/resources/kubeadmin/kubeconfig
+- if:
+  - path: /var/local/acm-import/import.yaml
+    op: [created]
+  run: kubectl apply -f /var/local/acm-import/import.yaml
+  envVars:
+    KUBECONFIG: /var/lib/microshift/resources/kubeadmin/kubeconfig
+`;
+
 export const getConfigType = (config: ConfigSourceProvider): ConfigType | undefined => {
   if (isGitProviderSpec(config)) {
     return ConfigType.GIT;
@@ -201,14 +223,20 @@ export const getAPIConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
   return {
     name: ct.name,
     inline: ct.files.map((file) => {
-      return {
+      const baseProps: FileSpec = {
         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,
       };
+      // user / group fields cannot be sent as empty in PATCH operations
+      if (file.user) {
+        baseProps.user = file.user;
+      }
+      if (file.group) {
+        baseProps.group = file.group;
+      }
+      return baseProps;
     }),
   };
 };
@@ -224,55 +252,136 @@ export const getApplicationValues = (deviceSpec?: DeviceSpec): ApplicationFormSp
   });
 };
 
-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)) {
+export const getConfigTemplatesValues = (deviceSpec?: DeviceSpec, registerMicroShift?: boolean) => {
+  const deviceConfig = registerMicroShift
+    ? deviceSpec?.config?.filter((c) => !isConfigACMCrd(c) && !isConfigACMImport(c) && !isMicroshiftRegistrationHook(c))
+    : deviceSpec?.config;
+  return (
+    deviceConfig?.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.HTTP,
+        type: ConfigType.INLINE,
         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;
-  }) || [];
+        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;
 };
+
+export const ACMCrdConfig: HttpConfigProviderSpec = {
+  name: 'acm-crd',
+  httpRef: {
+    filePath: ACM_CRD_YAML_PATH,
+    repository: ACM_REPO_NAME,
+    suffix: '/agent-registration/crds/v1',
+  },
+};
+
+export const ACMImportConfig: HttpConfigProviderSpec = {
+  name: 'acm-registration',
+  httpRef: {
+    filePath: ACM_IMPORT_YAML_PATH,
+    repository: ACM_REPO_NAME,
+    suffix: `${ACM_REPO_SUFFIX}{{ .metadata.name }}`,
+  },
+};
+
+const isConfigACMCrd = (c: ConfigProviderSpec) => {
+  if (!isHttpProviderSpec(c)) {
+    return false;
+  }
+  return (
+    c.name === ACMCrdConfig.name &&
+    c.httpRef.filePath === ACMCrdConfig.httpRef.filePath &&
+    c.httpRef.repository === ACMCrdConfig.httpRef.repository &&
+    c.httpRef.suffix === ACMCrdConfig.httpRef.suffix
+  );
+};
+
+const isConfigACMImport = (c: ConfigProviderSpec) => {
+  if (!isHttpProviderSpec(c)) {
+    return false;
+  }
+  return (
+    c.name === ACMImportConfig.name &&
+    c.httpRef.filePath === ACMImportConfig.httpRef.filePath &&
+    c.httpRef.repository === ACMImportConfig.httpRef.repository &&
+    c.httpRef.suffix?.startsWith(ACM_REPO_SUFFIX)
+  );
+};
+
+const isMicroshiftRegistrationHook = (c: ConfigProviderSpec) => {
+  if (!isInlineProviderSpec(c)) {
+    return false;
+  }
+  return (
+    c.name === MICROSHIFT_REGISTRATION_HOOK_NAME &&
+    c.inline.length === 1 &&
+    c.inline[0].path === MICROSHIFT_REGISTRATION_HOOK_FILE &&
+    c.inline[0].content === MICROSHIFT_REGISTRATION_HOOK
+  );
+};
+
+export const MicroshiftRegistrationHook: InlineConfigProviderSpec = {
+  name: MICROSHIFT_REGISTRATION_HOOK_NAME,
+  inline: [
+    {
+      path: MICROSHIFT_REGISTRATION_HOOK_FILE,
+      content: MICROSHIFT_REGISTRATION_HOOK,
+    },
+  ],
+};
+
+export const hasMicroshiftRegistrationConfig = (deviceSpec?: DeviceSpec): boolean => {
+  if (!deviceSpec) {
+    return false;
+  }
+  const hasCrdsSpec = deviceSpec.config?.some(isConfigACMCrd);
+  const hasImportSpec = deviceSpec.config?.some(isConfigACMImport);
+  const hasRegistrationHook = deviceSpec.config?.some(isMicroshiftRegistrationHook);
+
+  return !!hasCrdsSpec && !!hasImportSpec && !!hasRegistrationHook;
+};

package/src/components/Device/EditDeviceWizard/steps/{ApplicationsForm.tsx → ApplicationTemplates.tsx}

@@ -10,6 +10,9 @@ import { ApplicationFormSpec, DeviceSpecConfigFormValues } from '../types';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import TextField from '../../../form/TextField';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import WithHelperText from '../../../common/WithHelperText';
+import LearnMoreLink from '../../../common/LearnMoreLink';
+import { CREATING_APPLICATIONS_LINK } from '../../../../links';
 
 import './ApplicationsForm.css';
 
@@ -19,22 +22,45 @@ const ApplicationSection = ({ index }: { index: number }) => {
   const [{ value: app }] = useField<ApplicationFormSpec>(fieldName);
 
   return (
-    <ExpandableFormSection title={t('Application')} fieldName={fieldName} description={app.name || app.image}>
+    <ExpandableFormSection
+      title={t('Application {{ appNum }}', { appNum: index + 1 })}
+      fieldName={fieldName}
+      description={app.name || app.image}
+    >
       <Grid hasGutter>
-        <FormGroup label={t('Image')} isRequired>
+        <FormGroup
+          label={
+            <WithHelperText
+              ariaLabel={t('Image')}
+              content={
+                <span>
+                  {t('The application image. Learn how to create one')}{' '}
+                  <LearnMoreLink text={t('here')} link={CREATING_APPLICATIONS_LINK} />
+                </span>
+              }
+              showLabel
+            />
+          }
+          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
+          label={
+            <WithHelperText
+              ariaLabel={t('Application name')}
+              content={t(
+                'The image name will be used instead of when application name is not specified. Application name must be unique.',
+              )}
+              showLabel
+            />
+          }
+        >
+          <TextField aria-label={t('Application name')} name={`applications.${index}.name`} value={app.name} />
         </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">
@@ -80,7 +106,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
                   {t('Add a variable')}
                 </Button>
               </FormGroup>
-            </FormSection>
+            </>
           )}
         </FieldArray>
       </Grid>
@@ -88,53 +114,63 @@ const ApplicationSection = ({ index }: { index: number }) => {
   );
 };
 
-const ApplicationsForm = () => {
+const ApplicationTemplates = () => {
   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>
+    <FormGroup
+      label={
+        <WithHelperText
+          ariaLabel={t('Application workloads')}
+          content={t('Define the application workloads that shall run on the device.')}
+          showLabel
+        />
+      }
+    >
+      <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>
-          ))}
-          <FormSection>
-            <FormGroup>
-              <Button
-                variant="link"
-                icon={<PlusCircleIcon />}
-                iconPosition="start"
-                onClick={() => {
-                  push({
-                    name: '',
-                    image: '',
-                    variables: [],
-                  });
-                }}
-              >
-                {t('Add application')}
-              </Button>
-            </FormGroup>
-          </FormSection>
-        </>
-      )}
-    </FieldArray>
+          </>
+        )}
+      </FieldArray>
+    </FormGroup>
   );
 };
 
-export default ApplicationsForm;
+export default ApplicationTemplates;

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

@@ -6,18 +6,17 @@ 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 ExpandableFormSection from '../../../form/ExpandableFormSection';
 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 FileForm = ({ fieldName, index }: { fieldName: string; index: number }) => {
   const { t } = useTranslation();
   const [{ value: file }] = useField<InlineConfigTemplate['files'][0]>(fieldName);
 
@@ -41,17 +40,16 @@ const FileForm = ({ fieldName }: { fieldName: string }) => {
   );
 
   return (
-    <ExpandableFormSection title={t('File')} fieldName={fieldName} description={file.path}>
+    <ExpandableFormSection
+      title={t('File {{ fileNum }}', { fileNum: index + 1 })}
+      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
-        />
+        <UploadField label={t('Content')} name={`${fieldName}.content`} maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES} />
         <FormGroup>
           <CheckboxField name={`${fieldName}.base64`} label={t('Content is base64 encoded')} />
         </FormGroup>
@@ -116,23 +114,21 @@ const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
           {inlineConfig.files?.map((_, fileIndex) => {
             const fieldName = `configTemplates[${index}].files[${fileIndex}]`;
             return (
-              <FormSection key={fileIndex}>
-                <Split hasGutter>
-                  <SplitItem isFilled>
-                    <FileForm fieldName={fieldName} />
+              <Split key={fileIndex} hasGutter>
+                <SplitItem isFilled>
+                  <FileForm index={fileIndex} fieldName={fieldName} />
+                </SplitItem>
+                {inlineConfig.files.length > 1 && (
+                  <SplitItem>
+                    <Button
+                      variant="link"
+                      icon={<MinusCircleIcon />}
+                      iconPosition="start"
+                      onClick={() => remove(fileIndex)}
+                    />
                   </SplitItem>
-                  {inlineConfig.files.length > 1 && (
-                    <SplitItem>
-                      <Button
-                        variant="link"
-                        icon={<MinusCircleIcon />}
-                        iconPosition="start"
-                        onClick={() => remove(fileIndex)}
-                      />
-                    </SplitItem>
-                  )}
-                </Split>
-              </FormSection>
+                )}
+              </Split>
             );
           })}
           <FormSection>

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

@@ -19,6 +19,7 @@ type ConfigWithRepositoryTemplateFormProps = {
   index: number;
   repositories: Repository[];
   repoRefetch: VoidFunction;
+  canCreateRepo: boolean;
 };
 
 const getRepositoryItems = (
@@ -172,6 +173,7 @@ const ConfigWithRepositoryTemplateForm = ({
   index,
   repositories,
   repoRefetch,
+  canCreateRepo,
 }: ConfigWithRepositoryTemplateFormProps) => {
   const { t } = useTranslation();
   const { values, setFieldValue } = useFormikContext<DeviceSpecConfigFormValues>();
@@ -188,20 +190,23 @@ const ConfigWithRepositoryTemplateForm = ({
         <FormSelect
           name={`configTemplates[${index}].repository`}
           items={repositoryItems}
+          withStatusIcon
           placeholderText={t('Select a repository')}
         >
-          <MenuFooter>
-            <Button
-              variant="link"
-              isInline
-              icon={<PlusCircleIcon />}
-              onClick={() => {
-                setCreateRepoModalOpen(true);
-              }}
-            >
-              {t('Create repository')}
-            </Button>
-          </MenuFooter>
+          {canCreateRepo && (
+            <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} />}