[RHOAIENG-11530] Add file field advanced settings for connection type…

… fields (#3132)

frontend/package.json

@@ -85,6 +85,7 @@
     "react": "^18.2.0",
     "react-cool-dimensions": "^2.0.5",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-redux": "^8.0.4",
     "react-router": "^6.4.1",
     "react-router-dom": "^6.4.1",

frontend/src/concepts/connectionTypes/fields/FileFormField.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import { FileUpload } from '@patternfly/react-core';
+import { ErrorCode, FileError } from 'react-dropzone';
+import { FileUpload, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { FileField } from '~/concepts/connectionTypes/types';
 import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+import { EXTENSION_REGEX, isDuplicateExtension } from './fieldUtils';
+
+const MAX_SIZE = 1024 * 1024; // 1 MB as bytes
 
 const FileFormField: React.FC<FieldProps<FileField>> = ({
   id,
@@ -14,31 +19,97 @@ const FileFormField: React.FC<FieldProps<FileField>> = ({
   const isPreview = mode === 'preview';
   const [isLoading, setIsLoading] = React.useState(false);
   const [filename, setFilename] = React.useState('');
-  const readOnly = isPreview || field.properties.defaultReadOnly;
+  const [rejectedReason, setRejectedReason] = React.useState<string | undefined>();
+  const readOnly = isPreview || (mode !== 'default' && field.properties.defaultReadOnly);
+  const extensions =
+    field.properties.extensions
+      ?.filter(
+        (ext, index) =>
+          !isDuplicateExtension(index, field.properties.extensions || []) &&
+          EXTENSION_REGEX.test(ext),
+      )
+      .map((ext) => ext.toLowerCase()) ?? [];
+
+  React.useEffect(() => {
+    setRejectedReason(undefined);
+  }, [field.properties.extensions]);
+
+  const formatString = extensions.length
+    ? `File format must be ${extensions.slice(0, -1).join(', ')}${
+        extensions.length > 1
+          ? `${extensions.length > 2 ? ',' : ''} or ${extensions[extensions.length - 1]}`
+          : extensions[0]
+      }`
+    : '';
+
+  const getRejectionMessage = (error?: FileError): string => {
+    switch (error?.code) {
+      case ErrorCode.FileTooLarge:
+        return 'File is larger than 1MB';
+      case ErrorCode.FileInvalidType:
+        return formatString;
+      case ErrorCode.TooManyFiles:
+        return 'Only a single file may be uploaded';
+      default:
+        return 'Unable to upload the file';
+    }
+  };
+
   return (
-    <FileUpload
-      id={id}
-      name={id}
-      data-testid={dataTestId}
-      type="text"
-      isLoading={isLoading}
-      value={isPreview || field.properties.defaultReadOnly ? field.properties.defaultValue : value}
-      filename={filename}
-      allowEditingUploadedText
-      isReadOnly={readOnly}
-      isDisabled={readOnly}
-      filenamePlaceholder={readOnly ? '' : 'Drag and drop a file or upload one'}
-      browseButtonText="Upload"
-      clearButtonText="Clear"
-      onDataChange={isPreview || !onChange ? undefined : (e, content) => onChange(content)}
-      onFileInputChange={(_e, file) => setFilename(file.name)}
-      onReadStarted={() => {
-        setIsLoading(true);
-      }}
-      onReadFinished={() => {
-        setIsLoading(false);
-      }}
-    />
+    <>
+      <FileUpload
+        id={id}
+        name={id}
+        data-testid={dataTestId}
+        type="text"
+        isLoading={isLoading}
+        value={
+          isPreview || field.properties.defaultReadOnly ? field.properties.defaultValue : value
+        }
+        filename={filename}
+        allowEditingUploadedText
+        isReadOnly={readOnly}
+        isDisabled={readOnly}
+        filenamePlaceholder={readOnly ? '' : 'Drag and drop a file or upload one'}
+        browseButtonText="Upload"
+        clearButtonText="Clear"
+        onDataChange={isPreview || !onChange ? undefined : (e, content) => onChange(content)}
+        onFileInputChange={(_e, file) => setFilename(file.name)}
+        isClearButtonDisabled={rejectedReason ? false : undefined}
+        onClearClick={() => {
+          if (onChange) {
+            onChange('');
+          }
+          setFilename('');
+          setRejectedReason(undefined);
+        }}
+        onReadStarted={() => {
+          setRejectedReason(undefined);
+          setIsLoading(true);
+        }}
+        onReadFinished={() => {
+          setIsLoading(false);
+        }}
+        dropzoneProps={{
+          accept: extensions.length ? { '': extensions } : undefined,
+          maxSize: MAX_SIZE,
+          onDropRejected: (reason) => {
+            setRejectedReason(getRejectionMessage(reason[0]?.errors?.[0]));
+          },
+        }}
+      />
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            icon={rejectedReason ? <ExclamationCircleIcon /> : undefined}
+            variant={rejectedReason ? 'error' : 'default'}
+            data-testid="file-form-field-helper-text"
+          >
+            {rejectedReason || formatString}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </>
   );
 };
 

frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx

@@ -14,6 +14,7 @@ describe('FileFormField', () => {
       envVar: 'test-envVar',
       properties: {
         defaultValue: 'default-value',
+        extensions: ['.jpg', '.svg', '.png'],
       },
     };
 
@@ -24,6 +25,9 @@ describe('FileFormField', () => {
     expect(screen.getByRole('button', { name: 'Upload' })).not.toBeDisabled();
     expect(screen.getByRole('button', { name: 'Clear' })).not.toBeDisabled();
 
+    const helperText = screen.getByTestId('file-form-field-helper-text');
+    expect(helperText).toHaveTextContent('.jpg, .svg, or .png');
+
     act(() => {
       fireEvent.change(contentInput, { target: { value: 'new-value' } });
     });

frontend/src/concepts/connectionTypes/fields/fieldUtils.ts

@@ -0,0 +1,5 @@
+export const EXTENSION_REGEX = /^\.[a-zA-Z0-9]+(^.[a-zA-Z0-9]+)?$/;
+
+export const isDuplicateExtension = (index: number, values: string[]): boolean =>
+  index !== 0 &&
+  !!values.slice(0, index).find((val) => values[index].toLowerCase() === val.toLowerCase());

frontend/src/concepts/connectionTypes/types.ts

@@ -59,10 +59,16 @@ export type DataField<T extends ConnectionTypeFieldTypeUnion, V = string, P = {}
 export type SectionField = Field<ConnectionTypeFieldType.Section | 'section'>;
 
 export type HiddenField = DataField<ConnectionTypeFieldType.Hidden | 'hidden'>;
-export type FileField = DataField<ConnectionTypeFieldType.File | 'file'>;
 export type ShortTextField = DataField<ConnectionTypeFieldType.ShortText | 'short-text'>;
 export type TextField = DataField<ConnectionTypeFieldType.Text | 'text'>;
 export type UriField = DataField<ConnectionTypeFieldType.URI | 'uri'>;
+export type FileField = DataField<
+  ConnectionTypeFieldType.File | 'file',
+  string,
+  {
+    extensions?: string[];
+  }
+>;
 export type BooleanField = DataField<
   ConnectionTypeFieldType.Boolean | 'boolean',
   boolean,

frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx

@@ -32,6 +32,7 @@ import { fieldNameToEnvVar, fieldTypeToString } from '~/concepts/connectionTypes
 import { isEnumMember } from '~/utilities/utils';
 import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 import DataFieldPropertiesForm from '~/pages/connectionTypes/manage/DataFieldPropertiesForm';
+import { prepareFieldForSave } from '~/pages/connectionTypes/manage/manageFieldUtils';
 
 const ENV_VAR_NAME_REGEX = new RegExp('^[-._a-zA-Z][-._a-zA-Z0-9]*$');
 
@@ -98,7 +99,7 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
   const handleSubmit = () => {
     if (isValid) {
       if (newField) {
-        onSubmit(newField);
+        onSubmit(prepareFieldForSave(newField));
       }
       onClose();
     }

frontend/src/pages/connectionTypes/manage/advanced/DataFieldAdvancedPropertiesForm.tsx

@@ -3,6 +3,7 @@ import { ConnectionTypeDataField, ConnectionTypeFieldType } from '~/concepts/con
 import BooleanAdvancedPropertiesForm from '~/pages/connectionTypes/manage/advanced/BooleanAdvancedPropertiesForm';
 import { AdvancedFieldProps } from '~/pages/connectionTypes/manage/advanced/types';
 import NumericAdvancedPropertiesForm from '~/pages/connectionTypes/manage/advanced/NumericAdvancedPropertiesForm';
+import FileUploadAdvancedPropertiesForm from '~/pages/connectionTypes/manage/advanced/FileUploadAdvancedPropertiesForm';
 
 const CustomFieldPropertiesForm = <T extends ConnectionTypeDataField>(
   props: AdvancedFieldProps<T>,
@@ -11,7 +12,7 @@ const CustomFieldPropertiesForm = <T extends ConnectionTypeDataField>(
     // TODO define advanced forms
     switch (props.field.type) {
       case ConnectionTypeFieldType.File:
-        return () => null;
+        return FileUploadAdvancedPropertiesForm;
 
       case ConnectionTypeFieldType.Boolean:
         return BooleanAdvancedPropertiesForm;

frontend/src/pages/connectionTypes/manage/advanced/FileUploadAdvancedPropertiesForm.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Button, FormGroup } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { FileField } from '~/concepts/connectionTypes/types';
+import {
+  EXTENSION_REGEX,
+  isDuplicateExtension,
+} from '~/concepts/connectionTypes/fields/fieldUtils';
+import { AdvancedFieldProps } from '~/pages/connectionTypes/manage/advanced/types';
+import ExpandableFormSection from '~/components/ExpandableFormSection';
+import FileUploadExtensionRow from '~/pages/connectionTypes/manage/advanced/FileUploadExtensionRow';
+
+const FileUploadAdvancedPropertiesForm: React.FC<AdvancedFieldProps<FileField>> = ({
+  properties,
+  onChange,
+  onValidate,
+}) => {
+  const displayedExtensions = React.useMemo(
+    () => [...(properties.extensions?.length ? properties.extensions : [''])],
+    [properties.extensions],
+  );
+  const lastTextRef = React.useRef<HTMLInputElement | null>(null);
+
+  React.useEffect(() => {
+    if (!properties.extensions?.length) {
+      onValidate(true);
+      return;
+    }
+    const valid = properties.extensions.every(
+      (extension, i) =>
+        !extension ||
+        (EXTENSION_REGEX.test(extension) && !isDuplicateExtension(i, properties.extensions || [])),
+    );
+    onValidate(valid);
+    // do not run when callback changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties.extensions]);
+
+  return (
+    <ExpandableFormSection
+      toggleText="Advanced settings"
+      initExpanded={!!properties.extensions?.length}
+      data-testid="advanced-settings-toggle"
+    >
+      <FormGroup label="Allow specific files" fieldId="file-types" isStack>
+        {displayedExtensions.map((extension, index) => (
+          <FileUploadExtensionRow
+            key={index}
+            extension={extension}
+            isDuplicate={isDuplicateExtension(index, displayedExtensions)}
+            textRef={index === displayedExtensions.length - 1 ? lastTextRef : undefined}
+            onChange={(val) => {
+              onChange({
+                ...properties,
+                extensions: [
+                  ...displayedExtensions.slice(0, index),
+                  val,
+                  ...displayedExtensions.slice(index + 1),
+                ],
+              });
+            }}
+            onRemove={() =>
+              onChange({
+                ...properties,
+                extensions: [
+                  ...displayedExtensions.slice(0, index),
+                  ...displayedExtensions.slice(index + 1),
+                ],
+              })
+            }
+            allowRemove={displayedExtensions.length > 1 || !!displayedExtensions[0]}
+          />
+        ))}
+        <Button
+          variant="link"
+          data-testid="add-variable-button"
+          isInline
+          icon={<PlusCircleIcon />}
+          iconPosition="left"
+          onClick={() => {
+            onChange({ ...properties, extensions: [...displayedExtensions, ''] });
+            requestAnimationFrame(() => lastTextRef.current?.focus());
+          }}
+        >
+          Add file type
+        </Button>
+      </FormGroup>
+    </ExpandableFormSection>
+  );
+};
+
+export default FileUploadAdvancedPropertiesForm;