From bafc6da6b29db7eeff320bbb1c15c10b49fca551 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Fri, 20 Oct 2023 19:07:55 +0200
Subject: [PATCH] added default field type (#24172)

* added default field type

default will now render a multiline input
which makes more sense then a multi select
with no options

fixes: #23911

* changed to only render multi line when needed
---
 .../admin-ui/src/user/UserProfileFields.tsx   |  7 ++++--
 .../user/components/MultiInputComponent.tsx   | 24 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 js/apps/admin-ui/src/user/components/MultiInputComponent.tsx

diff --git a/js/apps/admin-ui/src/user/UserProfileFields.tsx b/js/apps/admin-ui/src/user/UserProfileFields.tsx
index e8c590a28c..f245ab0197 100644
--- a/js/apps/admin-ui/src/user/UserProfileFields.tsx
+++ b/js/apps/admin-ui/src/user/UserProfileFields.tsx
@@ -15,6 +15,7 @@ import { TextAreaComponent } from "./components/TextAreaComponent";
 import { TextComponent } from "./components/TextComponent";
 import { UserFormFields } from "./form-state";
 import { fieldName, isRootAttribute } from "./utils";
+import { MultiInputComponent } from "./components/MultiInputComponent";
 
 export type UserProfileError = {
   responseData: { errors?: { errorMessage: string }[] };
@@ -50,6 +51,7 @@ const INPUT_TYPES = [
   "html5-date",
   "html5-month",
   "html5-time",
+  "multi-input",
 ] as const;
 
 export type InputType = (typeof INPUT_TYPES)[number];
@@ -79,6 +81,7 @@ export const FIELDS: {
   "html5-date": TextComponent,
   "html5-month": TextComponent,
   "html5-time": TextComponent,
+  "multi-input": MultiInputComponent,
 } as const;
 
 export type UserProfileFieldsProps = {
@@ -179,7 +182,7 @@ const FormField = ({ form, attribute, roles }: FormFieldProps) => {
   );
 };
 
-const DEFAULT_INPUT_TYPE = "multiselect" satisfies InputType;
+const DEFAULT_INPUT_TYPE = "text" satisfies InputType;
 
 function determineInputType(
   attribute: UserProfileAttributeMetadata,
@@ -199,7 +202,7 @@ function determineInputType(
 
   // An attribute with multiple values is always multi-valued, even if an input type is provided.
   if (Array.isArray(value) && value.length > 1) {
-    return DEFAULT_INPUT_TYPE;
+    return "multi-input";
   }
 
   return inputType;
diff --git a/js/apps/admin-ui/src/user/components/MultiInputComponent.tsx b/js/apps/admin-ui/src/user/components/MultiInputComponent.tsx
new file mode 100644
index 0000000000..b585aadbae
--- /dev/null
+++ b/js/apps/admin-ui/src/user/components/MultiInputComponent.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next";
+import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
+import { UserProfileFieldProps } from "../UserProfileFields";
+import { fieldName, label } from "../utils";
+import { UserProfileGroup } from "./UserProfileGroup";
+
+export const MultiInputComponent = ({
+  form,
+  attribute,
+}: UserProfileFieldProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <UserProfileGroup form={form} attribute={attribute}>
+      <MultiLineInput
+        aria-label={label(attribute, t)}
+        name={fieldName(attribute)!}
+        addButtonLabel={t("addMultivaluedLabel", {
+          fieldLabel: label(attribute, t),
+        })}
+      />
+    </UserProfileGroup>
+  );
+};