@flightctl/ui-components 0.7.2 → 0.8.0-rc1

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

@@ -3,24 +3,38 @@ import * as React from 'react';
 import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import TextField from '../../../form/TextField';
 import LearnMoreLink from '../../../common/LearnMoreLink';
-import { CREATING_APPLICATIONS_LINK } from '../../../../links';
 import { useTranslation } from '../../../../hooks/useTranslation';
+import { useAppLinks } from '../../../../hooks/useAppLinks';
 import { ImageAppForm } from '../../../../types/deviceSpec';
 
-const ApplicationImageForm = ({ app, index }: { app: ImageAppForm; index: number }) => {
+const ApplicationImageForm = ({
+  app,
+  index,
+  isReadOnly,
+}: {
+  app: ImageAppForm;
+  index: number;
+  isReadOnly?: boolean;
+}) => {
   const { t } = useTranslation();
+  const createAppLink = useAppLinks('createApp');
+
   return (
     <FormGroupWithHelperText
       label={t('Image')}
       content={
         <span>
-          {t('The application image. Learn how to create one')}{' '}
-          <LearnMoreLink text={t('here')} link={CREATING_APPLICATIONS_LINK} />
+          {t('The application image. Learn how to create one')} <LearnMoreLink text={t('here')} link={createAppLink} />
         </span>
       }
       isRequired
     >
-      <TextField aria-label={t('Image')} name={`applications.${index}.image`} value={app.image || ''} />
+      <TextField
+        aria-label={t('Image')}
+        name={`applications.${index}.image`}
+        value={app.image || ''}
+        isDisabled={isReadOnly}
+      />
     </FormGroupWithHelperText>
   );
 };

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

@@ -17,9 +17,10 @@ type InlineApplicationFileFormProps = {
   file: InlineAppForm['files'][0];
   fileFieldName: string;
   fileIndex: number;
+  isReadOnly?: boolean;
 };
 
-const InlineApplicationFileForm = ({ file, fileIndex, fileFieldName }: InlineApplicationFileFormProps) => {
+const InlineApplicationFileForm = ({ file, fileIndex, fileFieldName, isReadOnly }: InlineApplicationFileFormProps) => {
   const { t } = useTranslation();
   return (
     <ExpandableFormSection
@@ -29,21 +30,42 @@ const InlineApplicationFileForm = ({ file, fileIndex, fileFieldName }: InlineApp
     >
       <Grid hasGutter>
         <FormGroup label={t('File path on the device (relative)')} isRequired>
-          <TextField name={`${fileFieldName}.path`} />
+          <TextField name={`${fileFieldName}.path`} isDisabled={isReadOnly} />
         </FormGroup>
-        <UploadField label={t('Content')} name={`${fileFieldName}.content`} maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES} />
+        <UploadField
+          label={t('Content')}
+          name={`${fileFieldName}.content`}
+          maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES}
+          isDisabled={isReadOnly}
+        />
 
         <FormGroup>
-          <CheckboxField name={`${fileFieldName}.base64`} label={t('Content is base64 encoded')} />
+          <CheckboxField
+            name={`${fileFieldName}.base64`}
+            label={t('Content is base64 encoded')}
+            isDisabled={isReadOnly}
+          />
         </FormGroup>
       </Grid>
     </ExpandableFormSection>
   );
 };
 
-const ApplicationInlineForm = ({ app, index }: { app: InlineAppForm; index: number }) => {
+const ApplicationInlineForm = ({
+  app,
+  index,
+  isReadOnly,
+}: {
+  app: InlineAppForm;
+  index: number;
+  isReadOnly?: boolean;
+}) => {
   const { t } = useTranslation();
 
+  if (isReadOnly && !app.files?.length) {
+    return null;
+  }
+
   return (
     <FieldArray name={`applications.${index}.files`}>
       {({ push, remove }) => (
@@ -53,9 +75,14 @@ const ApplicationInlineForm = ({ app, index }: { app: InlineAppForm; index: numb
             return (
               <Split key={fileIndex} hasGutter>
                 <SplitItem isFilled>
-                  <InlineApplicationFileForm file={file} fileIndex={fileIndex} fileFieldName={fieldName} />
+                  <InlineApplicationFileForm
+                    file={file}
+                    fileIndex={fileIndex}
+                    fileFieldName={fieldName}
+                    isReadOnly={isReadOnly}
+                  />
                 </SplitItem>
-                {app.files.length > 1 && (
+                {!isReadOnly && app.files.length > 1 && (
                   <SplitItem>
                     <Button
                       aria-label={t('Delete file')}
@@ -69,22 +96,25 @@ const ApplicationInlineForm = ({ app, index }: { app: InlineAppForm; index: numb
               </Split>
             );
           })}
-          <FormGroup>
-            <Button
-              variant="link"
-              icon={<PlusCircleIcon />}
-              iconPosition="start"
-              onClick={() => {
-                push({
-                  path: '',
-                  content: '',
-                  base64: false,
-                });
-              }}
-            >
-              {t('Add file')}
-            </Button>
-          </FormGroup>
+
+          {!isReadOnly && (
+            <FormGroup>
+              <Button
+                variant="link"
+                icon={<PlusCircleIcon />}
+                iconPosition="start"
+                onClick={() => {
+                  push({
+                    path: '',
+                    content: '',
+                    base64: false,
+                  });
+                }}
+              >
+                {t('Add file')}
+              </Button>
+            </FormGroup>
+          )}
         </>
       )}
     </FieldArray>

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

@@ -23,7 +23,7 @@ import ApplicationInlineForm from './ApplicationInlineForm';
 
 import './ApplicationsForm.css';
 
-const ApplicationSection = ({ index }: { index: number }) => {
+const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
   const appFieldName = `applications[${index}]`;
   const [{ value: app }, { error }, { setValue }] = useField<AppForm>(appFieldName);
@@ -76,6 +76,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
             items={appTypes}
             name={`${appFieldName}.specType`}
             placeholderText={t('Select an application type')}
+            isDisabled={isReadOnly}
           />
         </FormGroup>
 
@@ -88,11 +89,11 @@ const ApplicationSection = ({ index }: { index: number }) => {
           }
           isRequired={app.specType === AppSpecType.INLINE}
         >
-          <TextField aria-label={t('Application name')} name={`${appFieldName}.name`} />
+          <TextField aria-label={t('Application name')} name={`${appFieldName}.name`} isDisabled={isReadOnly} />
         </FormGroupWithHelperText>
 
-        {isImageAppForm(app) && <ApplicationImageForm app={app} index={index} />}
-        {isInlineAppForm(app) && <ApplicationInlineForm app={app} index={index} />}
+        {isImageAppForm(app) && <ApplicationImageForm app={app} index={index} isReadOnly={isReadOnly} />}
+        {isInlineAppForm(app) && <ApplicationInlineForm app={app} index={index} isReadOnly={isReadOnly} />}
 
         <FieldArray name={`${appFieldName}.variables`}>
           {({ push, remove }) => (
@@ -108,6 +109,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
                         aria-label={t('Name')}
                         name={`${appFieldName}.variables.${varIndex}.name`}
                         value={variable.name}
+                        isDisabled={isReadOnly}
                       />
                     </FormGroup>
                   </SplitItem>
@@ -117,33 +119,38 @@ const ApplicationSection = ({ index }: { index: number }) => {
                         aria-label={t('Value')}
                         name={`${appFieldName}.variables.${varIndex}.value`}
                         value={variable.value}
+                        isDisabled={isReadOnly}
                       />
                     </FormGroup>
                   </SplitItem>
-                  <SplitItem>
-                    <Button
-                      aria-label={t('Delete variable')}
-                      variant="link"
-                      icon={<MinusCircleIcon />}
-                      iconPosition="end"
-                      onClick={() => remove(varIndex)}
-                    />
-                  </SplitItem>
+                  {!isReadOnly && (
+                    <SplitItem>
+                      <Button
+                        aria-label={t('Delete variable')}
+                        variant="link"
+                        icon={<MinusCircleIcon />}
+                        iconPosition="end"
+                        onClick={() => remove(varIndex)}
+                      />
+                    </SplitItem>
+                  )}
                 </Split>
               ))}
               <ErrorHelperText error={appVarsError} />
-              <FormGroup>
-                <Button
-                  variant="link"
-                  icon={<PlusCircleIcon />}
-                  iconPosition="start"
-                  onClick={() => {
-                    push({ name: '', value: '' });
-                  }}
-                >
-                  {t('Add an application variable')}
-                </Button>
-              </FormGroup>
+              {!isReadOnly && (
+                <FormGroup>
+                  <Button
+                    variant="link"
+                    icon={<PlusCircleIcon />}
+                    iconPosition="start"
+                    onClick={() => {
+                      push({ name: '', value: '' });
+                    }}
+                  >
+                    {t('Add an application variable')}
+                  </Button>
+                </FormGroup>
+              )}
             </>
           )}
         </FieldArray>
@@ -152,9 +159,12 @@ const ApplicationSection = ({ index }: { index: number }) => {
   );
 };
 
-const ApplicationTemplates = () => {
+const ApplicationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<DeviceSpecConfigFormValues>();
+  if (isReadOnly && values.applications.length === 0) {
+    return null;
+  }
 
   return (
     <FormGroupWithHelperText
@@ -168,37 +178,42 @@ const ApplicationTemplates = () => {
               <FormSection key={index}>
                 <Split hasGutter>
                   <SplitItem isFilled>
-                    <ApplicationSection index={index} />
-                  </SplitItem>
-                  <SplitItem>
-                    <Button
-                      aria-label={t('Delete application')}
-                      variant="link"
-                      icon={<MinusCircleIcon />}
-                      iconPosition="start"
-                      onClick={() => remove(index)}
-                    />
+                    <ApplicationSection index={index} isReadOnly={isReadOnly} />
                   </SplitItem>
+                  {!isReadOnly && (
+                    <SplitItem>
+                      <Button
+                        aria-label={t('Delete application')}
+                        variant="link"
+                        icon={<MinusCircleIcon />}
+                        iconPosition="start"
+                        onClick={() => remove(index)}
+                      />
+                    </SplitItem>
+                  )}
                 </Split>
               </FormSection>
             ))}
-            <FormSection>
-              <FormGroup>
-                <Button
-                  variant="link"
-                  icon={<PlusCircleIcon />}
-                  iconPosition="start"
-                  onClick={() => {
-                    push({
-                      name: '',
-                      variables: [],
-                    });
-                  }}
-                >
-                  {t('Add application')}
-                </Button>
-              </FormGroup>
-            </FormSection>
+
+            {!isReadOnly && (
+              <FormSection>
+                <FormGroup>
+                  <Button
+                    variant="link"
+                    icon={<PlusCircleIcon />}
+                    iconPosition="start"
+                    onClick={() => {
+                      push({
+                        name: '',
+                        variables: [],
+                      });
+                    }}
+                  >
+                    {t('Add application')}
+                  </Button>
+                </FormGroup>
+              </FormSection>
+            )}
           </>
         )}
       </FieldArray>

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

@@ -15,7 +15,7 @@ import { formatFileMode } from '../deviceSpecUtils';
 
 const MAX_INLINE_FILE_SIZE_BYTES = 1024 * 1024;
 
-const FileForm = ({ fieldName, index }: { fieldName: string; index: number }) => {
+const FileForm = ({ fieldName, index, isReadOnly }: { fieldName: string; index: number; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
   const [{ value: file }] = useField<InlineConfigTemplate['files'][0]>(fieldName);
 
@@ -46,11 +46,16 @@ const FileForm = ({ fieldName, index }: { fieldName: string; index: number }) =>
     >
       <Grid hasGutter>
         <FormGroup label={t('File path on the device')} isRequired>
-          <TextField name={`${fieldName}.path`} />
+          <TextField name={`${fieldName}.path`} isDisabled={isReadOnly} />
         </FormGroup>
-        <UploadField label={t('Content')} name={`${fieldName}.content`} maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES} />
+        <UploadField
+          label={t('Content')}
+          name={`${fieldName}.content`}
+          maxFileBytes={MAX_INLINE_FILE_SIZE_BYTES}
+          isDisabled={isReadOnly}
+        />
         <FormGroup>
-          <CheckboxField name={`${fieldName}.base64`} label={t('Content is base64 encoded')} />
+          <CheckboxField name={`${fieldName}.base64`} label={t('Content is base64 encoded')} isDisabled={isReadOnly} />
         </FormGroup>
         <FormGroup label={t('Permissions')}>
           <FormSelectTypeahead
@@ -71,13 +76,14 @@ const FileForm = ({ fieldName, index }: { fieldName: string; index: number }) =>
               return false;
             }}
             transformTypedItem={formatFileMode}
+            isDisabled={isReadOnly}
           />
         </FormGroup>
         <FormGroup label={t('User')}>
-          <TextField name={`${fieldName}.user`} placeholder="root" />
+          <TextField name={`${fieldName}.user`} placeholder="root" isDisabled={isReadOnly} />
         </FormGroup>
         <FormGroup label={t('Group')}>
-          <TextField name={`${fieldName}.group`} placeholder="root" />
+          <TextField name={`${fieldName}.group`} placeholder="root" isDisabled={isReadOnly} />
         </FormGroup>
       </Grid>
     </ExpandableFormSection>
@@ -86,14 +92,17 @@ const FileForm = ({ fieldName, index }: { fieldName: string; index: number }) =>
 
 type ConfigInlineTemplateFormProps = {
   index: number;
+  isReadOnly?: boolean;
 };
 
-const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
+const ConfigInlineTemplateForm = ({ index, isReadOnly }: ConfigInlineTemplateFormProps) => {
   const { t } = useTranslation();
   const { values, setFieldValue } = useFormikContext<DeviceSpecConfigFormValues>();
   const inlineConfig = values.configTemplates[index] as InlineConfigTemplate;
+  const configCount = inlineConfig.files?.length || 0;
+
   React.useEffect(() => {
-    if (!inlineConfig.files?.length) {
+    if (configCount === 0) {
       setFieldValue(`configTemplates.${index}.files`, [
         {
           path: '',
@@ -104,6 +113,10 @@ const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
     // eslint-disable-next-line
   }, []);
 
+  if (isReadOnly && configCount === 0) {
+    return null;
+  }
+
   return (
     <FieldArray name={`configTemplates.${index}.files`}>
       {({ push, remove }) => (
@@ -113,9 +126,9 @@ const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
             return (
               <Split key={fileIndex} hasGutter>
                 <SplitItem isFilled>
-                  <FileForm index={fileIndex} fieldName={fieldName} />
+                  <FileForm index={fileIndex} fieldName={fieldName} isReadOnly={isReadOnly} />
                 </SplitItem>
-                {inlineConfig.files.length > 1 && (
+                {!isReadOnly && configCount > 1 && (
                   <SplitItem>
                     <Button
                       aria-label={t('Delete file')}
@@ -129,21 +142,23 @@ const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
               </Split>
             );
           })}
-          <FormGroup>
-            <Button
-              variant="link"
-              icon={<PlusCircleIcon />}
-              iconPosition="start"
-              onClick={() => {
-                push({
-                  path: '',
-                  content: '',
-                });
-              }}
-            >
-              {t('Add file')}
-            </Button>
-          </FormGroup>
+          {!isReadOnly && (
+            <FormGroup>
+              <Button
+                variant="link"
+                icon={<PlusCircleIcon />}
+                iconPosition="start"
+                onClick={() => {
+                  push({
+                    path: '',
+                    content: '',
+                  });
+                }}
+              >
+                {t('Add file')}
+              </Button>
+            </FormGroup>
+          )}
         </>
       )}
     </FieldArray>

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

@@ -18,6 +18,7 @@ type ConfigWithRepositoryTemplateFormProps = {
   index: number;
   repositories: Repository[];
   repoRefetch: VoidFunction;
+  isReadOnly?: boolean;
   canCreateRepo: boolean;
 };
 
@@ -53,7 +54,15 @@ const getRepositoryItems = (
   return repositoryItems;
 };
 
-const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index: number }) => {
+const GitConfigForm = ({
+  template,
+  index,
+  isReadOnly,
+}: {
+  template: GitConfigTemplate;
+  index: number;
+  isReadOnly?: boolean;
+}) => {
   const { t } = useTranslation();
 
   return (
@@ -63,6 +72,7 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           aria-label={t('Branch/tag/commit')}
           name={`configTemplates[${index}].targetRevision`}
           value={template.targetRevision}
+          isDisabled={isReadOnly}
         />
       </FormGroup>
       <FormGroupWithHelperText
@@ -75,6 +85,7 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           name={`configTemplates[${index}].path`}
           value={template.path}
           placeholder={t('/absolute/path')}
+          isDisabled={isReadOnly}
         />
       </FormGroupWithHelperText>
       <FormGroupWithHelperText
@@ -87,6 +98,7 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           name={`configTemplates[${index}].mountPath`}
           value={template.mountPath}
           placeholder={t('/absolute/path')}
+          isDisabled={isReadOnly}
         />
       </FormGroupWithHelperText>
     </>
@@ -97,10 +109,12 @@ const HttpConfigForm = ({
   template,
   baseURL,
   index,
+  isReadOnly,
 }: {
   template: HttpConfigTemplate;
   index: number;
   baseURL?: string;
+  isReadOnly?: boolean;
 }) => {
   const { t } = useTranslation();
 
@@ -129,6 +143,7 @@ const HttpConfigForm = ({
           name={`configTemplates[${index}].suffix`}
           value={template.suffix || ''}
           helperText={suffixHelperText}
+          isDisabled={isReadOnly}
         />
       </FormGroupWithHelperText>
       <FormGroupWithHelperText
@@ -141,6 +156,7 @@ const HttpConfigForm = ({
           name={`configTemplates[${index}].filePath`}
           value={template.filePath || ''}
           placeholder={t('/absolute/path')}
+          isDisabled={isReadOnly}
         />
       </FormGroupWithHelperText>
     </>
@@ -152,6 +168,7 @@ const ConfigWithRepositoryTemplateForm = ({
   index,
   repositories,
   repoRefetch,
+  isReadOnly,
   canCreateRepo,
 }: ConfigWithRepositoryTemplateFormProps) => {
   const { t } = useTranslation();
@@ -159,9 +176,17 @@ const ConfigWithRepositoryTemplateForm = ({
   const [createRepoModalOpen, setCreateRepoModalOpen] = React.useState(false);
 
   const ct = values.configTemplates[index] as HttpConfigTemplate | GitConfigTemplate;
-  const selectedRepoName = ct?.repository;
+  const selectedRepoName = ct.repository;
+
+  const repositoryItems = isReadOnly
+    ? {
+        [selectedRepoName]: {
+          label: selectedRepoName,
+          description: '',
+        },
+      }
+    : getRepositoryItems(t, repositories, repoType, selectedRepoName);
 
-  const repositoryItems = getRepositoryItems(t, repositories, repoType, selectedRepoName);
   const selectedRepo = repositories.find((repo) => repo.metadata.name === selectedRepoName);
   return (
     <>
@@ -171,6 +196,7 @@ const ConfigWithRepositoryTemplateForm = ({
           items={repositoryItems}
           withStatusIcon
           placeholderText={t('Select a repository')}
+          isDisabled={isReadOnly}
         >
           {canCreateRepo && (
             <MenuFooter>
@@ -181,6 +207,7 @@ const ConfigWithRepositoryTemplateForm = ({
                 onClick={() => {
                   setCreateRepoModalOpen(true);
                 }}
+                isDisabled={isReadOnly}
               >
                 {t('Create repository')}
               </Button>
@@ -188,9 +215,16 @@ const ConfigWithRepositoryTemplateForm = ({
           )}
         </FormSelect>
       </FormGroup>
-      {repoType === RepoSpecType.GIT && <GitConfigForm template={ct as GitConfigTemplate} index={index} />}
+      {repoType === RepoSpecType.GIT && (
+        <GitConfigForm template={ct as GitConfigTemplate} index={index} isReadOnly={isReadOnly} />
+      )}
       {repoType === RepoSpecType.HTTP && (
-        <HttpConfigForm template={ct as HttpConfigTemplate} index={index} baseURL={selectedRepo?.spec.url} />
+        <HttpConfigForm
+          template={ct as HttpConfigTemplate}
+          index={index}
+          baseURL={selectedRepo?.spec.url}
+          isReadOnly={isReadOnly}
+        />
       )}
       {createRepoModalOpen && (
         <CreateRepositoryModal