Added possibility to manage array attributes (#1384)

* Added possibility to manage array attributes

* feat(attributes): added multivalue tests

cypress/integration/group_test.spec.ts

@@ -209,7 +209,7 @@ describe("Group test", () => {
       clickGroup(groups[0]);
       attributesTab
         .goToAttributesTab()
-        .fillAttribute("key", "value")
+        .fillLastRow("key", "value")
         .saveAttribute();
 
       masthead.checkNotificationMessage("Group updated");

cypress/integration/users_test.spec.ts

@@ -125,12 +125,39 @@ describe("Users test", () => {
 
       attributesTab
         .goToAttributesTab()
-        .fillAttribute("key", "value")
+        .fillLastRow("key", "value")
         .saveAttribute();
 
       masthead.checkNotificationMessage("The user has been saved");
     });
 
+    it("User attributes with multiple values test", () => {
+      listingPage.searchItem(itemId).itemExist(itemId);
+
+      listingPage.goToItemDetails(itemId);
+
+      cy.intercept("PUT", `/auth/admin/realms/master/users/*`).as("save-user");
+
+      const attributeKey = "key-multiple";
+      attributesTab
+        .goToAttributesTab()
+        .fillLastRow(attributeKey, "value")
+        .addRow()
+        .fillLastRow(attributeKey, "other value")
+        .saveAttribute();
+
+      cy.wait("@save-user").should(({ request, response }) => {
+        expect(response?.statusCode).to.equal(204);
+
+        expect(
+          request?.body.attributes[attributeKey],
+          "response body"
+        ).deep.equal(["value", "other value"]);
+      });
+
+      masthead.checkNotificationMessage("The user has been saved");
+    });
+
     it("Add user to groups test", () => {
       // Go to user groups
       listingPage.searchItem(itemId).itemExist(itemId);

cypress/support/pages/admin_console/manage/AttributesTab.ts

@@ -1,8 +1,10 @@
 export default class AttributesTab {
-  private keyInput = '[name="attributes[0].key"]';
-  private valueInput = '[name="attributes[0].value"]';
   private saveAttributeBtn = "save-attributes";
+  private addAttributeBtn = "attribute-add-row";
   private attributesTab = "attributes";
+  private attributeRow = "attribute-row";
+  private keyInput = "attribute-key-input";
+  private valueInput = "attribute-value-input";
 
   goToAttributesTab() {
     cy.findByTestId(this.attributesTab).click();
@@ -10,8 +12,20 @@ export default class AttributesTab {
     return this;
   }
 
-  fillAttribute(key: string, value: string) {
-    cy.get(this.keyInput).type(key).get(this.valueInput).type(value);
+  addRow() {
+    cy.findByTestId(this.addAttributeBtn).click();
+    return this;
+  }
+
+  fillLastRow(key: string, value: string) {
+    cy.findAllByTestId(this.attributeRow)
+      .last()
+      .findByTestId(this.keyInput)
+      .type(key);
+    cy.findAllByTestId(this.attributeRow)
+      .last()
+      .findByTestId(this.valueInput)
+      .type(value);
     return this;
   }
 

src/components/attribute-form/AttributeForm.tsx

@@ -40,7 +40,9 @@ export type AttributesFormProps = {
 export const arrayToAttributes = (attributeArray: KeyValueType[]) => {
   const initValue: { [index: string]: string[] } = {};
   return attributeArray.reduce((acc, attribute) => {
-    acc[attribute.key] = [attribute.value];
+    acc[attribute.key] = !acc[attribute.key]
+      ? [attribute.value]
+      : acc[attribute.key].concat(attribute.value);
     return acc;
   }, initValue);
 };
@@ -51,10 +53,17 @@ export const attributesToArray = (attributes?: {
   if (!attributes || Object.keys(attributes).length == 0) {
     return [];
   }
-  return Object.keys(attributes).map((key) => ({
-    key: key,
-    value: attributes[key][0],
-  }));
+  const initValue: KeyValueType[] = [];
+  return Object.keys(attributes).reduce((acc, key) => {
+    return acc.concat(
+      attributes[key].map((value) => {
+        return {
+          key: key,
+          value: value,
+        };
+      })
+    );
+  }, initValue);
 };
 
 export const AttributesForm = ({
@@ -103,7 +112,7 @@ export const AttributesForm = ({
         </Thead>
         <Tbody>
           {fields.map((attribute, rowIndex) => (
-            <Tr key={attribute.id}>
+            <Tr key={attribute.id} data-testid="attribute-row">
               <Td
                 key={`${attribute.id}-key`}
                 id={`text-input-${rowIndex}-key`}
@@ -121,6 +130,7 @@ export const AttributesForm = ({
                   validated={
                     errors.attributes?.[rowIndex] ? "error" : "default"
                   }
+                  data-testid="attribute-key-input"
                 />
               </Td>
               <Td
@@ -137,6 +147,7 @@ export const AttributesForm = ({
                   ref={register()}
                   aria-label="value-input"
                   defaultValue={attribute.value}
+                  data-testid="attribute-value-input"
                 />
               </Td>
               {rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
@@ -183,6 +194,7 @@ export const AttributesForm = ({
                 onClick={() => append({ key: "", value: "" })}
                 icon={<PlusCircleIcon />}
                 isDisabled={!watchLast}
+                data-testid="attribute-add-row"
               >
                 {t("roles:addAttributeText")}
               </Button>