Merge pull request #3174 from ingef/remove-optional-display-from-form…

…-fields Stop showing whether a field is optional in all form fields
ingef · Nov 8, 2023 · 2492232 · 2492232
2 parents c062a9a + 4bc292a
commit 2492232
Show file tree

Hide file tree

Showing 14 changed files with 20 additions and 126 deletions.
diff --git a/frontend/src/js/external-forms/form-components/DropzoneList.tsx b/frontend/src/js/external-forms/form-components/DropzoneList.tsx
@@ -13,7 +13,6 @@ import DropzoneWithFileInput, {
   DragItemFile,
 } from "../../ui-components/DropzoneWithFileInput";
 import Label from "../../ui-components/Label";
-import Optional from "../../ui-components/Optional";
 
 import DropzoneBetweenElements from "./DropzoneBetweenElements";
 
@@ -56,7 +55,6 @@ interface PropsT<DroppableObject> {
   className?: string;
   label?: ReactNode;
   tooltip?: string;
-  optional?: boolean;
   dropzoneChildren: (args: ChildArgs<DroppableObject>) => ReactNode;
   items: ReactNode[];
   acceptedDropTypes: string[];
@@ -78,7 +76,6 @@ const DropzoneList = <DroppableObject extends PossibleDroppableObject>(
     className,
     label,
     tooltip,
-    optional,
     dropzoneChildren,
     items,
     acceptedDropTypes,
@@ -97,12 +94,7 @@ const DropzoneList = <DroppableObject extends PossibleDroppableObject>(
   return (
     <div className={className}>
       <Row>
-        {label && (
-          <Label>
-            {optional && <Optional />}
-            {label}
-          </Label>
-        )}
+        {label && <Label>{label}</Label>}
         {tooltip && <InfoTooltip text={tooltip} />}
       </Row>
       {items && 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
@@ -70,7 +70,6 @@ interface Props {
   tooltip?: string;
   newValue: FormConceptGroupT;
   isSingle?: boolean;
-  optional?: boolean;
   disallowMultipleColumns?: boolean;
   blocklistedTables?: string[];
   allowlistedTables?: string[];
@@ -190,7 +189,6 @@ const FormConceptGroup = (props: Props) => {
       <DropzoneList /* TODO: ADD GENERIC TYPE <ConceptQueryNodeType> */
         ref={dropzoneRef}
         tooltip={props.tooltip}
-        optional={props.optional}
         label={
           <>
             {props.label}

diff --git a/frontend/src/js/external-forms/form-query-dropzone/FormQueryDropzone.tsx b/frontend/src/js/external-forms/form-query-dropzone/FormQueryDropzone.tsx
@@ -7,7 +7,6 @@ import type { DragItemQuery } from "../../standard-query-editor/types";
 import InfoTooltip from "../../tooltip/InfoTooltip";
 import Dropzone from "../../ui-components/Dropzone";
 import Label from "../../ui-components/Label";
-import Optional from "../../ui-components/Optional";
 
 import ValidatedFormQueryResult from "./ValidatedFormQueryResult";
 
@@ -23,7 +22,6 @@ const DROP_TYPES = [
 interface PropsT {
   label: string;
   tooltip?: string;
-  optional?: boolean;
   dropzoneText: string;
   className?: string;
   value: DragItemQuery | null;
@@ -33,7 +31,6 @@ interface PropsT {
 const FormQueryDropzone: FC<PropsT> = ({
   label,
   tooltip,
-  optional,
   dropzoneText,
   className,
   value,
@@ -60,7 +57,6 @@ const FormQueryDropzone: FC<PropsT> = ({
   return (
     <div className={className}>
       <Label>
-        {optional && <Optional />}
         {label}
         {exists(tooltip) && <InfoTooltip text={tooltip} />}
       </Label>

diff --git a/frontend/src/js/external-forms/form/Field.tsx b/frontend/src/js/external-forms/form/Field.tsx
@@ -33,12 +33,7 @@ import FormConceptGroup from "../form-concept-group/FormConceptGroup";
 import type { FormConceptGroupT } from "../form-concept-group/formConceptGroupState";
 import FormQueryDropzone from "../form-query-dropzone/FormQueryDropzone";
 import FormTabNavigation from "../form-tab-navigation/FormTabNavigation";
-import {
-  getFieldKey,
-  getInitialValue,
-  isFormField,
-  isOptionalField,
-} from "../helper";
+import { getFieldKey, getInitialValue, isFormField } from "../helper";
 import { getErrorForField } from "../validators";
 
 import type { DynamicFormValues } from "./Form";
@@ -165,35 +160,28 @@ const NestedFields = styled("div")`
   border-radius: ${({ theme }) => theme.borderRadius};
 `;
 
-interface PropsT {
+const setValueConfig = {
+  shouldValidate: true,
+  shouldDirty: true,
+  shouldTouch: true,
+};
+
+const Field = ({
+  field,
+  ...commonProps
+}: {
   formType: string;
   h1Index?: number;
   field: GeneralField;
   locale: Language;
   availableDatasets: SelectOptionT[];
-  optional?: boolean;
   register: UseFormRegister<DynamicFormValues>;
   setValue: UseFormSetValue<DynamicFormValues>;
   control: Control<DynamicFormValues>;
-}
-
-const setValueConfig = {
-  shouldValidate: true,
-  shouldDirty: true,
-  shouldTouch: true,
-};
-
-const Field = ({ field, ...commonProps }: PropsT) => {
+}) => {
   const datasetId = useDatasetId();
-  const {
-    formType,
-    h1Index,
-    optional,
-    locale,
-    availableDatasets,
-    setValue,
-    control,
-  } = commonProps;
+  const { formType, h1Index, locale, availableDatasets, setValue, control } =
+    commonProps;
   const { t } = useTranslation();
 
   const defaultValue =
@@ -238,7 +226,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
               value={fieldProps.value as string}
               onChange={(value) => setValue(field.name, value, setValueConfig)}
               tooltip={field.tooltip ? field.tooltip[locale] : undefined}
-              optional={optional}
             />
           )}
         </ConnectedField>
@@ -263,7 +250,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
                 setValue(field.name, value, setValueConfig);
               }}
               tooltip={field.tooltip ? field.tooltip[locale] : undefined}
-              optional={optional}
             />
           )}
         </ConnectedField>
@@ -292,7 +278,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
                 max: field.max,
               }}
               tooltip={field.tooltip ? field.tooltip[locale] : undefined}
-              optional={optional}
             />
           )}
         </ConnectedField>
@@ -310,7 +295,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
                 inline={true}
                 label={field.label[locale]}
                 tooltip={field.tooltip ? field.tooltip[locale] : undefined}
-                optional={optional}
                 value={fieldProps.value as DateStringMinMax}
                 onChange={(value) =>
                   setValue(field.name, value, setValueConfig)
@@ -332,7 +316,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
               label={field.label[locale] || ""}
               dropzoneText={field.dropzoneLabel[locale] || ""}
               tooltip={field.tooltip ? field.tooltip[locale] : undefined}
-              optional={optional}
               value={fieldProps.value as DragItemQuery}
               onChange={(value) => setValue(field.name, value, setValueConfig)}
             />
@@ -374,7 +357,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
               label={field.label[locale]}
               options={options}
               tooltip={field.tooltip ? field.tooltip[locale] : undefined}
-              optional={optional}
               value={fieldProps.value as SelectOptionT | null}
               onChange={(value) => setValue(field.name, value, setValueConfig)}
             />
@@ -400,7 +382,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
                 label={field.label[locale]}
                 options={availableDatasets}
                 tooltip={field.tooltip ? field.tooltip[locale] : undefined}
-                optional={optional}
                 value={fieldProps.value as SelectOptionT | null}
                 onChange={(value) =>
                   setValue(field.name, value, setValueConfig)
@@ -428,16 +409,8 @@ const Field = ({ field, ...commonProps }: PropsT) => {
           >
             {field.fields.map((f, i) => {
               const key = getFieldKey(formType, f, i);
-              const nestedFieldOptional = isOptionalField(f);
 
-              return (
-                <Field
-                  key={key}
-                  field={f}
-                  {...commonProps}
-                  optional={nestedFieldOptional}
-                />
-              );
+              return <Field key={key} field={f} {...commonProps} />;
             })}
           </Group>
         </>
@@ -472,16 +445,8 @@ const Field = ({ field, ...commonProps }: PropsT) => {
                   <NestedFields>
                     {tabToShow.fields.map((f, i) => {
                       const key = getFieldKey(formType, f, i);
-                      const nestedFieldOptional = isOptionalField(f);
 
-                      return (
-                        <Field
-                          key={key}
-                          field={f}
-                          {...commonProps}
-                          optional={nestedFieldOptional}
-                        />
-                      );
+                      return <Field key={key} field={f} {...commonProps} />;
                     })}
                   </NestedFields>
                 ) : (
@@ -524,7 +489,6 @@ const Field = ({ field, ...commonProps }: PropsT) => {
               blocklistedSelects={field.blocklistedSelects}
               allowlistedSelects={field.allowlistedSelects}
               defaults={field.defaults}
-              optional={optional}
               isValidConcept={(item) =>
                 !nodeIsInvalid(
                   item,

diff --git a/frontend/src/js/external-forms/form/Form.tsx b/frontend/src/js/external-forms/form/Form.tsx
@@ -6,7 +6,7 @@ import type { SelectOptionT } from "../../api/types";
 import { useActiveLang } from "../../localization/useActiveLang";
 import FormHeader from "../FormHeader";
 import type { Form as FormType } from "../config-types";
-import { getFieldKey, getH1Index, isOptionalField } from "../helper";
+import { getFieldKey, getH1Index } from "../helper";
 
 import Field from "./Field";
 
@@ -44,7 +44,6 @@ const Form = memo(({ config, datasetOptions, methods }: Props) => {
       )}
       {config.fields.map((field, i) => {
         const key = getFieldKey(config.type, field, i);
-        const optional = isOptionalField(field);
         const h1Index = getH1Index(config.fields, field);
 
         return (
@@ -58,7 +57,6 @@ const Form = memo(({ config, datasetOptions, methods }: Props) => {
             setValue={methods.setValue}
             availableDatasets={datasetOptions}
             locale={activeLang}
-            optional={optional}
           />
         );
       })}

diff --git a/frontend/src/js/external-forms/helper.ts b/frontend/src/js/external-forms/helper.ts
@@ -42,15 +42,6 @@ export const getH1Index = (fields: GeneralField[], field: GeneralField) => {
   return h1Fields.indexOf(field);
 };
 
-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/ui-components/InputDateRange.tsx b/frontend/src/js/ui-components/InputDateRange.tsx
@@ -20,7 +20,6 @@ import InfoTooltip from "../tooltip/InfoTooltip";
 import InputDate from "./InputDate/InputDate";
 import Label from "./Label";
 import Labeled from "./Labeled";
-import Optional from "./Optional";
 
 const Root = styled("div")<{ center?: boolean }>`
   text-align: ${({ center }) => (center ? "center" : "left")};
@@ -88,7 +87,6 @@ interface PropsT {
   center?: boolean;
   autoFocus?: boolean;
   tooltip?: string;
-  optional?: boolean;
   value: DateStringMinMax;
   onChange: (value: DateStringMinMax) => void;
 }
@@ -115,7 +113,6 @@ const InputDateRange: FC<PropsT> = ({
   labelSuffix,
   value,
   onChange,
-  optional,
   tooltip,
 }) => {
   const { t } = useTranslation();
@@ -179,7 +176,6 @@ const InputDateRange: FC<PropsT> = ({
       <StyledLabel large={large}>
         <Icon icon={faCalendar} left gray />
         {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
-        {optional && <Optional />}
         {label}
         <InfoTooltip
           html={
@@ -197,7 +193,7 @@ const InputDateRange: FC<PropsT> = ({
         {labelSuffix && labelSuffix}
       </StyledLabel>
     );
-  }, [t, label, labelSuffix, large, optional, tooltip, indexPrefix]);
+  }, [t, label, labelSuffix, large, tooltip, indexPrefix]);
 
   return (
     <Root center={center}>

diff --git a/frontend/src/js/ui-components/InputPlain/InputPlain.tsx b/frontend/src/js/ui-components/InputPlain/InputPlain.tsx
@@ -17,7 +17,6 @@ const SxBaseInput = styled(BaseInput)<{ fullWidth?: boolean }>`
 interface Props {
   label: string;
   indexPrefix?: number;
-  optional?: boolean;
   inputType?: string;
   money?: boolean;
   className?: string;
@@ -44,7 +43,6 @@ const InputPlain = forwardRef<HTMLInputElement, Props>(
       large,
       indexPrefix,
       tooltip,
-      optional,
       inputType = "text",
       money,
       placeholder,
@@ -65,7 +63,6 @@ const InputPlain = forwardRef<HTMLInputElement, Props>(
         largeLabel={large}
         indexPrefix={indexPrefix}
         tooltip={tooltip}
-        optional={optional}
       >
         <SxBaseInput
           ref={ref}

diff --git a/frontend/src/js/ui-components/InputSelect/InputSelect.tsx b/frontend/src/js/ui-components/InputSelect/InputSelect.tsx
@@ -51,7 +51,6 @@ const InputSelect = ({
   clearable,
   className,
   value,
-  optional,
   smallMenu,
   onChange,
   sortOptions,
@@ -67,7 +66,6 @@ const InputSelect = ({
   className?: string;
   dataTestId?: string;
   value: SelectOptionT | null;
-  optional?: boolean;
   onChange: (value: SelectOptionT | null) => void;
   sortOptions?: (a: SelectOptionT, b: SelectOptionT, query: string) => number;
 }) => {
@@ -347,7 +345,6 @@ const InputSelect = ({
       }
       indexPrefix={indexPrefix}
       className={className}
-      optional={optional}
     >
       {Select}
     </Labeled>