fix(admin-ui): adding ssa custom attributes

admin-ui/app/locales/en/translation.json

@@ -55,7 +55,8 @@
     "add_source_ldap_server": "Add source LDAP server",
     "remove_source_server": "Remove source server",
     "copy_to_clipboard": "Copy To Clipboard",
-    "export_csv": "Export CSV"
+    "export_csv": "Export CSV",
+    "add_custom_attributes": "Add custom attributes"
   },
   "dashboard": {
     "summary_title": "Actives Users & Access Token Stats",

admin-ui/plugins/auth-server/components/Configuration/JsonPropertyBuilder.js

@@ -63,6 +63,13 @@ function JsonPropertyBuilder({
     )
   }
 
+  function isEmptyArray(item) {
+    return (
+      (Array.isArray(item) && item.length === 0) ||
+      (schema?.type === "array" && schema?.items?.type === "string")
+    )
+  }
+
   if (isBoolean(propValue)) {
     return (
       <GluuInlineInput
@@ -110,7 +117,7 @@ function JsonPropertyBuilder({
       />
     )
   }
-  if (isStringArray(propValue)) {
+  if (isStringArray(propValue) || isEmptyArray(propValue)) {
     return (
       <GluuInlineInput
         id={propKey}

admin-ui/plugins/auth-server/components/Ssa/CustomAttributesList.js

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const CustomAttributesList = ({
+  availableAttributes,
+  selectedAttributes,
+  onAttributeSelect,
+  searchQuery,
+  onSearchChange,
+}) => {
+  return (
+    <div className="border border-light">
+      <div className="bg-light text-bold p-2">Available Custom Attributes</div>
+      <input
+        type="search"
+        className="form-control mb-2"
+        placeholder="Search Attribute Here"
+        onChange={(e) => onSearchChange(e.target.value)}
+        value={searchQuery}
+        aria-label="Search custom attributes"
+      />
+      <ul className="list-group" role="listbox">
+        {availableAttributes.map((attribute) => {
+          const name = attribute.toLowerCase();
+          const alreadyAdded = selectedAttributes.includes(attribute);
+
+          if (
+            (name.includes(searchQuery.toLowerCase()) || !searchQuery) &&
+            !alreadyAdded
+          ) {
+            return (
+              <li
+                className="list-group-item"
+                key={attribute}
+                role="option"
+                aria-selected={false}
+              >
+                <button
+                  className="btn btn-link p-0"
+                  onClick={() => onAttributeSelect(attribute)}
+                  title="Click to add to the form"
+                >
+                  {attribute}
+                </button>
+              </li>
+            );
+          }
+          return null;
+        })}
+      </ul>
+    </div>
+  );
+};
+
+CustomAttributesList.propTypes = {
+  availableAttributes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selectedAttributes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onAttributeSelect: PropTypes.func.isRequired,
+  searchQuery: PropTypes.string.isRequired,
+  onSearchChange: PropTypes.func.isRequired,
+};
+
+export default CustomAttributesList;