ingef · Kadrian · Sep 13, 2021 · Sep 13, 2021
diff --git a/frontend/src/js/external-forms/form-components/DropzoneList.tsx b/frontend/src/js/external-forms/form-components/DropzoneList.tsx
@@ -11,6 +11,7 @@ import DropzoneWithFileInput, {
   DragItemFile,
 } from "../../form-components/DropzoneWithFileInput";
 import Label from "../../form-components/Label";
+import Optional from "../../form-components/Optional";
 import InfoTooltip from "../../tooltip/InfoTooltip";
 
 const ListItem = styled("div")`
@@ -37,6 +38,7 @@ interface PropsT<DroppableObject> {
   className?: string;
   label?: ReactNode;
   tooltip?: string;
+  optional?: boolean;
   dropzoneChildren: (args: ChildArgs) => ReactNode;
   items: ReactNode[];
   acceptedDropTypes: string[];
@@ -61,7 +63,12 @@ const DropzoneList = <DroppableObject extends PossibleDroppableObject>(
   return (
     <div className={props.className}>
       <Row>
-        {props.label && <Label>{props.label}</Label>}
+        {props.label && (
+          <Label>
+            {props.optional && <Optional />}
+            {props.label}
+          </Label>
+        )}
         {props.tooltip && <InfoTooltip text={props.tooltip} />}
       </Row>
       {props.items && props.items.length > 0 && (

diff --git a/frontend/src/js/external-forms/form-concept-group/FormConceptGroup.tsx b/frontend/src/js/external-forms/form-concept-group/FormConceptGroup.tsx
@@ -45,14 +45,15 @@ import {
 import FormConceptCopyModal from "./FormConceptCopyModal";
 import FormConceptNode, { DragItemFormConceptNode } from "./FormConceptNode";
 
-interface PropsType extends WrappedFieldProps {
+interface Props extends WrappedFieldProps {
   formType: string;
   fieldName: string;
   label: string;
   tooltip?: string;
   onDropFilterFile: Function;
   newValue?: Object;
   isSingle?: boolean;
+  optional?: boolean;
   disallowMultipleColumns?: boolean;
   blocklistedTables?: string[];
   allowlistedTables?: string[];
@@ -416,7 +417,7 @@ const SxDescription = styled(Description)`
   font-size: ${({ theme }) => theme.font.xs};
 `;
 
-const FormConceptGroup = (props: PropsType) => {
+const FormConceptGroup = (props: Props) => {
   const newValue = props.newValue;
   const defaults = props.defaults || {};
 
@@ -503,6 +504,7 @@ const FormConceptGroup = (props: PropsType) => {
     <div>
       <DropzoneList<DragItemConceptTreeNode | DragItemFormConceptNode>
         tooltip={props.tooltip}
+        optional={props.optional}
         label={
           <>
             {props.label}

diff --git a/frontend/src/js/external-forms/form-query-dropzone/FormMultiQueryDropzone.tsx b/frontend/src/js/external-forms/form-query-dropzone/FormMultiQueryDropzone.tsx
@@ -16,12 +16,14 @@ interface PropsT extends WrappedFieldProps {
   dropzoneChildren: (args: ChildArgs) => ReactNode;
   label: string;
   tooltip?: string;
+  optional?: boolean;
 }
 
 const FormMultiQueryDropzone: FC<PropsT> = ({
   input,
   label,
   tooltip,
+  optional,
   dropzoneChildren,
 }) => {
   const addValue = (newItem) => {
@@ -39,6 +41,7 @@ const FormMultiQueryDropzone: FC<PropsT> = ({
     <DropzoneList<DragItemQuery>
       acceptedDropTypes={[PREVIOUS_QUERY, PREVIOUS_SECONDARY_ID_QUERY]}
       label={label}
+      optional={optional}
       tooltip={tooltip}
       dropzoneChildren={dropzoneChildren}
       items={input.value.map((query: PreviousQueryT, i: number) => (

diff --git a/frontend/src/js/external-forms/form-query-dropzone/FormQueryDropzone.tsx b/frontend/src/js/external-forms/form-query-dropzone/FormQueryDropzone.tsx
@@ -9,6 +9,7 @@ import {
 import { exists } from "../../common/helpers/exists";
 import Dropzone from "../../form-components/Dropzone";
 import Label from "../../form-components/Label";
+import Optional from "../../form-components/Optional";
 import type { DragItemQuery } from "../../standard-query-editor/types";
 import InfoTooltip from "../../tooltip/InfoTooltip";
 
@@ -21,6 +22,7 @@ const SxDropzone = styled(Dropzone)<{ centered?: boolean }>`
 interface PropsT extends WrappedFieldProps {
   label: string;
   tooltip?: string;
+  optional?: boolean;
   dropzoneText: string;
   className?: string;
 }
@@ -33,6 +35,7 @@ const FormQueryDropzone: FC<PropsT> = (props) => {
   return (
     <div className={props.className}>
       <Label>
+        {props.optional && <Optional />}
         {props.label}
         {exists(props.tooltip) && <InfoTooltip text={props.tooltip} />}
       </Label>

diff --git a/frontend/src/js/external-forms/form/Field.tsx b/frontend/src/js/external-forms/form/Field.tsx
@@ -20,7 +20,7 @@ import {
   FormMultiQueryDropzone,
 } from "../form-query-dropzone";
 import FormTabNavigation from "../form-tab-navigation/FormTabNavigation";
-import { isFormField } from "../helper";
+import { isFormField, isOptionalField } from "../helper";
 
 const TabsField = styled("div")``;
 
@@ -50,10 +50,17 @@ interface PropsT {
   getFieldValue: (fieldName: string) => any;
   locale: "de" | "en";
   availableDatasets: SelectOptionT[];
+  optional?: boolean;
 }
 
 const Field = ({ field, ...commonProps }: PropsT) => {
-  const { formType, locale, availableDatasets, getFieldValue } = commonProps;
+  const {
+    formType,
+    optional,
+    locale,
+    availableDatasets,
+    getFieldValue,
+  } = commonProps;
   const { t } = useTranslation();
 
   switch (field.type) {
@@ -76,6 +83,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
             placeholder: (field.placeholder && field.placeholder[locale]) || "",
             fullWidth: field.style ? field.style.fullWidth : false,
             tooltip: field.tooltip ? field.tooltip[locale] : undefined,
+            optional,
           }}
         />
       );
@@ -95,6 +103,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
               max: field.max,
             },
             tooltip: field.tooltip ? field.tooltip[locale] : undefined,
+            optional,
           }}
         />
       );
@@ -107,6 +116,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
             inline: true,
             label: field.label[locale],
             tooltip: field.tooltip ? field.tooltip[locale] : undefined,
+            optional,
           }}
         />
       );
@@ -119,6 +129,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
             label: field.label[locale],
             dropzoneText: field.dropzoneLabel[locale],
             tooltip: field.tooltip ? field.tooltip[locale] : undefined,
+            optional,
           }}
         />
       );
@@ -131,6 +142,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
             label: field.label[locale],
             dropzoneChildren: () => field.dropzoneLabel[locale],
             tooltip: field.tooltip ? field.tooltip[locale] : undefined,
+            optional,
           }}
         />
       );
@@ -157,6 +169,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
               value: option.value,
             })),
             tooltip: field.tooltip ? field.tooltip[locale] : undefined,
+            optional,
           }}
         />
       );
@@ -174,6 +187,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
             label: field.label[locale],
             options: availableDatasets,
             tooltip: field.tooltip ? field.tooltip[locale] : undefined,
+            optional,
           }}
         />
       );
@@ -199,8 +213,16 @@ const Field = ({ field, ...commonProps }: PropsT) => {
             <NestedFields>
               {tabToShow.fields.map((f, i) => {
                 const key = isFormField(f) ? f.name : f.type + i;
+                const nestedFieldOptional = isOptionalField(f);
 
-                return <Field key={key} field={f} {...commonProps} />;
+                return (
+                  <Field
+                    key={key}
+                    field={f}
+                    {...commonProps}
+                    optional={nestedFieldOptional}
+                  />
+                );
               })}
             </NestedFields>
           )}
@@ -228,6 +250,7 @@ const Field = ({ field, ...commonProps }: PropsT) => {
             blocklistedTables: field.blocklistedConnectors,
             allowlistedTables: field.allowlistedConnectors,
             defaults: field.defaults,
+            optional,
             isValidConcept: (item: Object) =>
               !nodeIsInvalid(
                 item,

diff --git a/frontend/src/js/external-forms/form/Form.tsx b/frontend/src/js/external-forms/form/Form.tsx
@@ -12,7 +12,7 @@ import type {
   Form as FormType,
   FormField as FormFieldType,
 } from "../config-types";
-import { collectAllFormFields, isFormField } from "../helper";
+import { collectAllFormFields, isFormField, isOptionalField } from "../helper";
 import { selectReduxFormState } from "../stateSelectors";
 import {
   validateRequired,
@@ -71,12 +71,8 @@ function getNotEmptyValidation(fieldType: string) {
 }
 
 function getPossibleValidations(fieldType: string) {
-  const notEmptyValidation = {
-    NOT_EMPTY: getNotEmptyValidation(fieldType),
-  };
-
   return {
-    ...notEmptyValidation,
+    NOT_EMPTY: getNotEmptyValidation(fieldType),
     GREATER_THAN_ZERO: validatePositive,
   };
 }
@@ -95,8 +91,14 @@ function getErrorForField(t: TFunction, field: FormFieldType, value: any) {
       const validateFn = getPossibleValidations(field.type)[validation];
 
       if (validateFn) {
-        // If not, someone must have configured an unsupported validation
         error = error || validateFn(t, value);
+      } else {
+        console.error(
+          "Validation configured that is not supported: ",
+          validation,
+          "for field",
+          field.name,
+        );
       }
     }
   }
@@ -131,11 +133,12 @@ const ConfiguredForm = ({ config, ...props }: ConfiguredFormPropsType) => {
     return (
       <form>
         {config.description && config.description[activeLang] && (
-          <SxFormHeader description={config.description[activeLang]} />
+          <SxFormHeader description={config.description[activeLang]!} />
         )}
         <FormConfigSaver />
         {config.fields.map((field, i) => {
           const key = isFormField(field) ? field.name : field.type + i;
+          const optional = isOptionalField(field);
 
           return (
             <Field
@@ -145,6 +148,7 @@ const ConfiguredForm = ({ config, ...props }: ConfiguredFormPropsType) => {
               field={field}
               availableDatasets={availableDatasets}
               locale={activeLang}
+              optional={optional}
             />
           );
         })}

diff --git a/frontend/src/js/external-forms/helper.ts b/frontend/src/js/external-forms/helper.ts
@@ -2,6 +2,15 @@ import type { FormField, GeneralField } from "./config-types";
 
 const nonFormFieldTypes = new Set(["HEADLINE", "DESCRIPTION"]);
 
+export const isOptionalField = (field: GeneralField) => {
+  return (
+    isFormField(field) &&
+    (!("validations" in field) ||
+      ("validations" in field &&
+        (!field.validations || !field.validations.includes("NOT_EMPTY"))))
+  );
+};
+
 export const isFormField = (field: GeneralField): field is FormField => {
   return !nonFormFieldTypes.has(field.type);
 };

diff --git a/frontend/src/js/form-components/InputCheckbox.tsx b/frontend/src/js/form-components/InputCheckbox.tsx
@@ -6,6 +6,8 @@ import { exists } from "../common/helpers/exists";
 import InfoTooltip from "../tooltip/InfoTooltip";
 import WithTooltip from "../tooltip/WithTooltip";
 
+import Optional from "./Optional";
+
 const Row = styled("div")`
   display: flex;
   flex-direction: row;

diff --git a/frontend/src/js/form-components/InputDateRange.tsx b/frontend/src/js/form-components/InputDateRange.tsx
@@ -17,6 +17,7 @@ import InfoTooltip from "../tooltip/InfoTooltip";
 import BaseInput from "./BaseInput";
 import Label from "./Label";
 import Labeled from "./Labeled";
+import Optional from "./Optional";
 
 const Root = styled("div")<{ center?: boolean }>`
   text-align: ${({ center }) => (center ? "center" : "left")};
@@ -39,7 +40,6 @@ const StyledLabel = styled(Label)<{ large?: boolean }>`
 const SxLabeled = styled(Labeled)`
   &:first-of-type {
     margin-right: 10px;
-    margin-bottom: 10px;
   }
 `;
 
@@ -53,6 +53,7 @@ interface PropsT {
   center?: boolean;
   autoFocus?: boolean;
   tooltip?: string;
+  optional?: boolean;
   input: {
     value: DateStringMinMax;
     onChange: (value: DateStringMinMax) => void;
@@ -80,6 +81,7 @@ const InputDateRange: FC<PropsT> = ({
   autoFocus,
   labelSuffix,
   input: { value, onChange },
+  optional,
   tooltip,
 }) => {
   const { t } = useTranslation();
@@ -139,6 +141,7 @@ const InputDateRange: FC<PropsT> = ({
       {label && (
         <StyledLabel large={large}>
           {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
+          {optional && <Optional />}
           {label}
           <InfoTooltip
             html={

diff --git a/frontend/src/js/form-components/InputPlain.tsx b/frontend/src/js/form-components/InputPlain.tsx
@@ -19,6 +19,7 @@ const SxBaseInput = styled(BaseInput)<{ fullWidth?: boolean }>`
 interface Props<T> extends InputProps<T> {
   label: string;
   indexPrefix?: number;
+  optional?: boolean;
   inputType?: string;
   money?: boolean;
   className?: string;
@@ -43,6 +44,7 @@ const InputPlain = <T extends string | number | null = string | null>(
       largeLabel={props.large}
       indexPrefix={props.indexPrefix}
       tooltip={props.tooltip}
+      optional={props.optional}
     >
       <SxBaseInput
         large={props.large}

diff --git a/frontend/src/js/form-components/InputSelect.tsx b/frontend/src/js/form-components/InputSelect.tsx
@@ -18,6 +18,7 @@ interface PropsT {
   selectProps?: Object;
   tooltip?: string;
   defaultValue?: string | null; // Weird to have it here as well => TODO: get rid of redux-form
+  optional?: boolean;
   input: {
     clearable?: boolean;
     defaultValue?: string | null;
@@ -37,6 +38,7 @@ const InputSelect = ({
   selectProps,
   tooltip,
   defaultValue,
+  optional,
   ...rest
 }: PropsT) => {
   const { t } = useTranslation();
@@ -53,6 +55,7 @@ const InputSelect = ({
       disabled={disabled}
       valueChanged={!isEmpty(input.value) && input.value !== input.defaultValue}
       indexPrefix={indexPrefix}
+      optional={optional}
       label={
         <>
           {!!label && label}