@flightctl/ui-components 1.1.0-rc3 → 1.1.0-rc5

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

@@ -24,7 +24,7 @@ const ApplicationVariablesForm = ({ appFieldName, isReadOnly }: ApplicationVaria
   return (
     <FormGroup label={t('Environment variables')} className="fctl-application-variables-form">
       <FieldArray name={`${appFieldName}.variables`}>
-        {({ push, remove }) => (
+        {(arrayHelpers) => (
           <>
             {variables.map((_variable, variableIndex) => {
               const variableFieldName = `${appFieldName}.variables[${variableIndex}]`;
@@ -56,7 +56,7 @@ const ApplicationVariablesForm = ({ appFieldName, isReadOnly }: ApplicationVaria
                           variant="link"
                           icon={<MinusCircleIcon />}
                           iconPosition="start"
-                          onClick={() => remove(variableIndex)}
+                          onClick={() => arrayHelpers.remove(variableIndex)}
                         />
                       </SplitItem>
                     )}
@@ -71,7 +71,7 @@ const ApplicationVariablesForm = ({ appFieldName, isReadOnly }: ApplicationVaria
                   variant="link"
                   icon={<PlusCircleIcon />}
                   iconPosition="start"
-                  onClick={() => push({ name: '', value: '' })}
+                  onClick={() => arrayHelpers.push({ name: '', value: '' })}
                 >
                   {t('Add variable')}
                 </Button>

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

@@ -42,7 +42,7 @@ const ApplicationVolumeForm = ({
   return (
     <FormGroup label={t('Volumes')} className="fctl-application-volume-form">
       <FieldArray name={`${appFieldName}.volumes`}>
-        {({ push, remove }) => (
+        {(arrayHelpers) => (
           <>
             {volumes.map((volume, volumeIndex) => {
               const volumeFieldName = `${appFieldName}.volumes[${volumeIndex}]`;
@@ -108,7 +108,7 @@ const ApplicationVolumeForm = ({
                           variant="link"
                           icon={<MinusCircleIcon />}
                           iconPosition="start"
-                          onClick={() => remove(volumeIndex)}
+                          onClick={() => arrayHelpers.remove(volumeIndex)}
                         />
                       </SplitItem>
                     )}
@@ -124,7 +124,7 @@ const ApplicationVolumeForm = ({
                   icon={<PlusCircleIcon />}
                   iconPosition="start"
                   onClick={() => {
-                    push({
+                    arrayHelpers.push({
                       name: '',
                       imageRef: '',
                       imagePullPolicy: ImagePullPolicy.PullIfNotPresent,

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

@@ -121,7 +121,7 @@ const ConfigInlineTemplateForm = ({ index, isReadOnly }: ConfigInlineTemplateFor
 
   return (
     <FieldArray name={`configTemplates.${index}.files`}>
-      {({ push, remove }) => (
+      {(arrayHelpers) => (
         <>
           {inlineConfig.files?.map((_, fileIndex) => {
             const fieldName = `configTemplates[${index}].files[${fileIndex}]`;
@@ -137,7 +137,7 @@ const ConfigInlineTemplateForm = ({ index, isReadOnly }: ConfigInlineTemplateFor
                       variant="link"
                       icon={<MinusCircleIcon />}
                       iconPosition="start"
-                      onClick={() => remove(fileIndex)}
+                      onClick={() => arrayHelpers.remove(fileIndex)}
                     />
                   </SplitItem>
                 )}
@@ -151,7 +151,7 @@ const ConfigInlineTemplateForm = ({ index, isReadOnly }: ConfigInlineTemplateFor
                 icon={<PlusCircleIcon />}
                 iconPosition="start"
                 onClick={() => {
-                  push({
+                  arrayHelpers.push({
                     path: '',
                     content: '',
                   });

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

@@ -160,7 +160,7 @@ const ConfigurationTemplatesForm = ({
       )}
     >
       <FieldArray name="configTemplates">
-        {({ push, remove }) => (
+        {(arrayHelpers) => (
           <>
             {values.configTemplates.map((_, index) => (
               <FormSection key={index}>
@@ -182,7 +182,7 @@ const ConfigurationTemplatesForm = ({
                         variant="link"
                         icon={<MinusCircleIcon />}
                         iconPosition="start"
-                        onClick={() => remove(index)}
+                        onClick={() => arrayHelpers.remove(index)}
                       />
                     </SplitItem>
                   )}
@@ -197,7 +197,7 @@ const ConfigurationTemplatesForm = ({
                     icon={<PlusCircleIcon />}
                     iconPosition="start"
                     onClick={() => {
-                      push({
+                      arrayHelpers.push({
                         name: '',
                         type: '',
                       });

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Alert, CodeBlock, CodeBlockCode, FormGroup, Grid, Spinner } from '@patternfly/react-core';
+import { Alert, CodeBlock, CodeBlockCode, FormGroup, Grid, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import { FormikErrors, useFormikContext } from 'formik';
 import { Trans } from 'react-i18next';
 import { Repository } from '@flightctl/types';
@@ -18,6 +18,7 @@ import { useAppLinks } from '../../../../hooks/useAppLinks';
 import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
 import { FlightCtlApp, useAppContext } from '../../../../hooks/useAppContext';
 import { ACM_REPO_NAME } from '../deviceSpecUtils';
+import { OS_CATALOG_LABEL_KEY } from '../../../Catalog/const';
 
 export const deviceTemplateStepId = 'device-template';
 
@@ -103,12 +104,22 @@ const MicroShiftCheckbox = ({ isFleet, isReadOnly }: { isFleet: boolean; isReadO
   );
 };
 
-const DeviceTemplateStep = ({ isFleet, isReadOnly }: { isFleet: boolean; isReadOnly?: boolean }) => {
+const DeviceTemplateStep = ({
+  labels,
+  isFleet,
+  isReadOnly,
+}: {
+  isFleet: boolean;
+  isReadOnly?: boolean;
+  labels: Record<string, string> | undefined;
+}) => {
   const { appType } = useAppContext();
   const { t } = useTranslation();
   const { values } = useFormikContext<DeviceSpecConfigFormValues>();
   const useTemplateVarsLink = useAppLinks('useTemplateVars');
 
+  const catalogOs = !!labels?.[OS_CATALOG_LABEL_KEY];
+
   return (
     <Grid span={8}>
       <FlightCtlForm>
@@ -133,18 +144,27 @@ const DeviceTemplateStep = ({ isFleet, isReadOnly }: { isFleet: boolean; isReadO
               : t('The target system image for this device.')
           }
         >
-          <TextField
-            name="osImage"
-            aria-label={t('System image')}
-            value={values.osImage}
-            isDisabled={isReadOnly}
-            helperText={t(
-              'Must be a reference to a bootable container image (such as "quay.io/<my-org>/my-rhel-with-fc-agent:<version>"). If you do not want to manage your OS from Edge management, leave this field empty.',
+          <Stack hasGutter>
+            {catalogOs && (
+              <StackItem>
+                <Alert isInline variant="info" title={t('System image is managed by Software Catalog')} />
+              </StackItem>
             )}
-          />
+            <StackItem>
+              <TextField
+                name="osImage"
+                aria-label={t('System image')}
+                value={values.osImage}
+                isDisabled={isReadOnly || catalogOs}
+                helperText={t(
+                  'Must be a reference to a bootable container image (such as "quay.io/<my-org>/my-rhel-with-fc-agent:<version>"). If you do not want to manage your OS from Edge management, leave this field empty.',
+                )}
+              />
+            </StackItem>
+          </Stack>
         </FormGroupWithHelperText>
         <ConfigurationTemplates isReadOnly={isReadOnly} />
-        <ApplicationsForm isReadOnly={isReadOnly} />
+        <ApplicationsForm isReadOnly={isReadOnly} labels={labels} />
         <SystemdUnitsForm isReadOnly={isReadOnly} />
         {appType === FlightCtlApp.OCP && <MicroShiftCheckbox isFleet={isFleet} isReadOnly={isReadOnly} />}
       </FlightCtlForm>

package/src/components/DynamicForm/DynamicForm.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Form from '@rjsf/core';
+import { RJSFSchema, RegistryWidgetsType, TemplatesType } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+import { CatalogItem } from '@flightctl/types/alpha';
+import AJV8Validator from '@rjsf/validator-ajv8/lib/validator';
+
+import {
+  PFCheckboxWidget,
+  PFEmailWidget,
+  PFNumberWidget,
+  PFPasswordWidget,
+  PFSelectWidget,
+  PFTextWidget,
+  PFTextareaWidget,
+  PFURLWidget,
+} from './FormWidget';
+import {
+  BaseInputTemplate,
+  PFArrayFieldTemplate,
+  PFFieldTemplate,
+  PFObjectFieldTemplate,
+  pfFields,
+} from './FieldTemplate';
+
+export type AssetSelection = {
+  volumeIndex: number;
+  assetChannel: string;
+  assetVersion: string;
+  assetItem?: CatalogItem;
+  assetCatalog: string;
+  assetItemName: string;
+};
+
+export type DynamicFormContext = {
+  selectedAssets: AssetSelection[];
+  onAssetSelected: (selection: AssetSelection) => void;
+  /** Called when an array item is removed, before the form state is updated. Use to sync e.g. selectedAssets when the array is "volumes". */
+  onBeforeArrayItemRemoved: (arrayId: string, index: number) => void;
+  /** Called when the user clears the selected asset for a volume (e.g. "Delete Item"). Use to remove the entry from selectedAssets. */
+  onAssetCleared: (volumeIndex: number) => void;
+};
+
+// All PatternFly widgets
+const pfWidgets: RegistryWidgetsType = {
+  TextWidget: PFTextWidget,
+  TextareaWidget: PFTextareaWidget,
+  CheckboxWidget: PFCheckboxWidget,
+  SelectWidget: PFSelectWidget,
+  UpDownWidget: PFNumberWidget,
+  PasswordWidget: PFPasswordWidget,
+  EmailWidget: PFEmailWidget,
+  URLWidget: PFURLWidget,
+};
+
+// All PatternFly templates
+const pfTemplates: Partial<TemplatesType<Record<string, unknown>, RJSFSchema>> = {
+  FieldTemplate: PFFieldTemplate,
+  ObjectFieldTemplate: PFObjectFieldTemplate,
+  ArrayFieldTemplate: PFArrayFieldTemplate,
+  BaseInputTemplate,
+};
+
+type DynamicFormProps = {
+  valuesSchema: RJSFSchema;
+  formData: Record<string, unknown> | undefined;
+  onChange: (data: Record<string, unknown> | undefined) => void;
+  onValidate?: (isValid: boolean) => void;
+  formContext?: DynamicFormContext;
+};
+
+const DynamicForm = ({ valuesSchema, formData, onChange, onValidate, formContext }: DynamicFormProps) => {
+  return (
+    <Form<Record<string, unknown>>
+      schema={valuesSchema}
+      formData={formData}
+      validator={validator as AJV8Validator<Record<string, unknown>, RJSFSchema, DynamicFormContext>}
+      widgets={pfWidgets}
+      templates={pfTemplates}
+      fields={pfFields}
+      formContext={formContext}
+      onChange={(e) => {
+        onChange(e.formData);
+        onValidate?.(e.errors.length === 0);
+      }}
+      liveValidate
+      showErrorList={false}
+      tagName="div"
+    >
+      {/* Hide default submit button */}
+      <></>
+    </Form>
+  );
+};
+
+export default DynamicForm;

package/src/components/DynamicForm/FieldErrors.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+
+// Helper component for displaying errors
+const FieldErrors = ({ errors }: { errors?: string[] }) =>
+  !!errors?.length && (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+          {errors.join(', ')}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+
+export default FieldErrors;

package/src/components/DynamicForm/FieldTemplate.tsx

@@ -0,0 +1,246 @@
+import * as React from 'react';
+
+import {
+  Button,
+  ExpandableSection,
+  FormGroup,
+  FormHelperText,
+  FormSection,
+  Grid,
+  GridItem,
+  HelperText,
+  HelperTextItem,
+  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 {
+  ArrayFieldTemplateProps,
+  BaseInputTemplateProps,
+  FieldProps,
+  FieldTemplateProps,
+  ObjectFieldTemplateProps,
+  RegistryFieldsType,
+} from '@rjsf/utils';
+import { getDefaultRegistry } from '@rjsf/core';
+
+import VolumeImageField, { ROOT_VOLUMES_IMAGE_REFERENCE_FIELD_REGEX } from './VolumeImageField';
+import FieldErrors from './FieldErrors';
+import { PFEmailWidget, PFPasswordWidget, PFTextWidget, PFURLWidget } from './FormWidget';
+import { useTranslation } from '../../hooks/useTranslation';
+import { DynamicFormContext } from './DynamicForm';
+import { FormGroupWithHelperText } from '../common/WithHelperText';
+
+/** When true, the object template should hide its title (used for array item objects). */
+const DirectArrayItemContext = React.createContext<boolean>(false);
+
+// Get default fields from rjsf to use as fallbacks
+const defaultRegistry = getDefaultRegistry();
+const DefaultObjectField = defaultRegistry.fields.ObjectField;
+const DefaultStringField = defaultRegistry.fields.StringField;
+
+// Helper component for description text
+const DescriptionText = ({ description }: { description?: React.ReactNode }) =>
+  !!description && (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem variant="default">{description}</HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+
+// Field Template - wraps each field with FormGroup
+const PFFieldTemplate: React.FC<FieldTemplateProps> = ({
+  id,
+  label,
+  required,
+  description,
+  children,
+  schema,
+  displayLabel,
+  rawErrors,
+}) => {
+  // Don't wrap object or array types with FormGroup - they handle their own layout
+  if (schema.type === 'object' || schema.type === 'array') {
+    return <>{children}</>;
+  }
+
+  // Checkbox handles its own label
+  if (schema.type === 'boolean') {
+    return (
+      <FormGroup fieldId={id}>
+        {children}
+        <DescriptionText description={description} />
+        <FieldErrors errors={rawErrors} />
+      </FormGroup>
+    );
+  }
+
+  return (
+    <FormGroup fieldId={id} label={displayLabel ? label : undefined} isRequired={required}>
+      {children}
+      <DescriptionText description={description} />
+      <FieldErrors errors={rawErrors} />
+    </FormGroup>
+  );
+};
+
+// Object Field Template - layout for object properties using PatternFly FormFieldGroup
+const PFObjectFieldTemplate: React.FC<ObjectFieldTemplateProps> = ({ title, description, properties, idSchema }) => {
+  const isRoot = idSchema.$id === 'root';
+  const isDirectArrayItem = React.useContext(DirectArrayItemContext);
+
+  // For root or direct array item object, render without title (array template already shows item title)
+  if (isRoot || isDirectArrayItem) {
+    const content = (
+      <>
+        {description && <DescriptionText description={description} />}
+        {properties.map((prop) => (
+          <React.Fragment key={prop.name}>{prop.content}</React.Fragment>
+        ))}
+      </>
+    );
+    return isDirectArrayItem ? (
+      <DirectArrayItemContext.Provider value={false}>{content}</DirectArrayItemContext.Provider>
+    ) : (
+      content
+    );
+  }
+
+  // For other nested objects, use FormSection with title
+  return (
+    <FormSection>
+      <FormGroupWithHelperText label={title} content={description}>
+        <Grid hasGutter>
+          {properties.map((prop) => (
+            <GridItem key={prop.name}>{prop.content}</GridItem>
+          ))}
+        </Grid>
+      </FormGroupWithHelperText>
+    </FormSection>
+  );
+};
+
+// Custom Object Field - can be extended for other special object types
+const CustomObjectField: React.FC<FieldProps> = (props) => {
+  return <DefaultObjectField {...props} />;
+};
+
+// Custom String Field - use VolumeImageField for volume image reference only
+const CustomStringField: React.FC<FieldProps> = (props) => {
+  const { idSchema, schema } = props;
+
+  if (schema.type === 'string' && ROOT_VOLUMES_IMAGE_REFERENCE_FIELD_REGEX.test(idSchema.$id)) {
+    return <VolumeImageField {...props} />;
+  }
+
+  return <DefaultStringField {...props} />;
+};
+
+// Custom fields registry
+const pfFields: RegistryFieldsType = {
+  ObjectField: CustomObjectField,
+  StringField: CustomStringField,
+};
+
+// Array Field Template - each array item is an expandable section (aligned with ExpandableFormSection)
+const PFArrayFieldTemplate: React.FC<ArrayFieldTemplateProps> = ({
+  title,
+  items,
+  canAdd,
+  onAddClick,
+  idSchema,
+  rawErrors,
+  formContext,
+}) => {
+  const { t } = useTranslation();
+  const onBeforeArrayItemRemoved = (formContext as DynamicFormContext)?.onBeforeArrayItemRemoved;
+  const sectionTitle = title || t('Items');
+  const [expandedItems, setExpandedItems] = React.useState<Record<number, boolean>>(() =>
+    items.reduce<Record<number, boolean>>((acc, item) => {
+      acc[item.index] = true;
+      return acc;
+    }, {}),
+  );
+
+  // Keep expanded state in sync when items are added/removed
+  React.useEffect(() => {
+    setExpandedItems((prev) => {
+      const next = { ...prev };
+      items.forEach((item) => {
+        if (next[item.index] === undefined) next[item.index] = true;
+      });
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items.length]);
+
+  return (
+    <FormGroup fieldId={idSchema.$id} label={sectionTitle}>
+      <Grid hasGutter>
+        {items.map((item) => (
+          <GridItem key={item.index}>
+            <Split hasGutter>
+              <SplitItem isFilled>
+                <ExpandableSection
+                  key={item.key}
+                  toggleContent={`${sectionTitle} ${item.index + 1}`}
+                  isIndented
+                  isExpanded={expandedItems[item.index] !== false}
+                  onToggle={(_, expanded) => {
+                    setExpandedItems((prev) => ({ ...prev, [item.index]: expanded }));
+                  }}
+                >
+                  <DirectArrayItemContext.Provider value={true}>{item.children}</DirectArrayItemContext.Provider>
+                </ExpandableSection>
+              </SplitItem>
+              {item.hasRemove && (
+                <SplitItem>
+                  <Button
+                    aria-label={t('Delete item')}
+                    variant="link"
+                    icon={<MinusCircleIcon />}
+                    iconPosition="start"
+                    onClick={() => {
+                      onBeforeArrayItemRemoved?.(idSchema.$id, item.index);
+                      item.onDropIndexClick(item.index)();
+                    }}
+                  />
+                </SplitItem>
+              )}
+            </Split>
+          </GridItem>
+        ))}
+        {canAdd && (
+          <GridItem>
+            <Button variant="link" icon={<PlusCircleIcon />} iconPosition="start" onClick={onAddClick}>
+              {t('Add item')}
+            </Button>
+          </GridItem>
+        )}
+        <GridItem>
+          <FieldErrors errors={rawErrors} />
+        </GridItem>
+      </Grid>
+    </FormGroup>
+  );
+};
+
+// Base Input Template
+const BaseInputTemplate: React.FC<BaseInputTemplateProps> = (props) => {
+  const { type } = props;
+
+  switch (type) {
+    case 'password':
+      return <PFPasswordWidget {...props} />;
+    case 'email':
+      return <PFEmailWidget {...props} />;
+    case 'url':
+      return <PFURLWidget {...props} />;
+    default:
+      return <PFTextWidget {...props} />;
+  }
+};
+
+export { PFFieldTemplate, PFObjectFieldTemplate, PFArrayFieldTemplate, BaseInputTemplate, pfFields };