don't add empty key values (#25472)

* don't add empty key values

fixes: #24678

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* fixed test

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/AddMapperPage.ts

@@ -115,6 +115,7 @@ export default class AddMapperPage {
       .contains("Advanced Attribute to Role")
       .click();
 
+    cy.findByTestId("attributes-add-row").click();
     cy.get(this.#attributesKeyInput).clear();
     cy.get(this.#attributesKeyInput).type("key");
 
@@ -394,6 +395,7 @@ export default class AddMapperPage {
 
     cy.findByTestId(this.#idpMapperSelect).contains("Claim to Role").click();
 
+    cy.findByTestId("claims-add-row").click();
     const keyValue = new LegacyKeyValueInput("config.claims");
 
     keyValue.fillKeyValue({ key: "key", value: "value" });

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -945,7 +945,7 @@ homeURL=Home URL
 eventTypes.REVOKE_GRANT_ERROR.name=Revoke grant error
 contentSecurityPolicyReportOnly=Content-Security-Policy-Report-Only
 firstBrokerLoginFlowAlias=First login flow
-missingAttributes=No attributes have been defined yet. Click the below button to add attributes, key and value are required for a key pair.
+missingAttributes=No {{name}} have been defined yet. Click the below button to add {{name}}, key and value are required for a key pair.
 testConnectionError=Error\! {{error}}
 authenticatedAccessPoliciesHelp=Those Policies are used when Client Registration Service is invoked by authenticated request. This means that the request contains Initial Access Token or Bearer Token.
 deleteClientPolicyProfileSuccess=Profile successfully removed from the policy.

js/apps/admin-ui/src/components/dynamic/MapComponent.tsx

@@ -2,6 +2,8 @@ import {
   ActionList,
   ActionListItem,
   Button,
+  EmptyState,
+  EmptyStateBody,
   Flex,
   FlexItem,
   FormGroup,
@@ -27,6 +29,7 @@ export const MapComponent = ({
   label,
   helpText,
   required,
+  isDisabled,
 }: ComponentProps) => {
   const { t } = useTranslation();
 
@@ -37,15 +40,20 @@ export const MapComponent = ({
   useEffect(() => {
     register(fieldName);
     const values: KeyValueType[] = JSON.parse(getValues(fieldName) || "[]");
-    if (!values.length) {
-      values.push({ key: "", value: "" });
-    }
     setMap(values.map((value) => ({ ...value, id: generateId() })));
-  }, [register, getValues]);
+  }, []);
+
+  const appendNew = () =>
+    setMap([...map, { key: "", value: "", id: generateId() }]);
 
   const update = (val = map) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setValue(
-    setValue(fieldName, JSON.stringify(val.map(({ id, ...entry }) => entry)));
+      fieldName,
+      JSON.stringify(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        val.filter((e) => e.key !== "").map(({ id, ...entry }) => entry),
+      ),
+    );
   };
 
   const updateKey = (index: number, key: string) => {
@@ -65,7 +73,7 @@ export const MapComponent = ({
     update(value);
   };
 
-  return (
+  return map.length !== 0 ? (
     <FormGroup
       label={t(label!)}
       labelIcon={<HelpItem helpText={t(helpText!)} fieldLabelId={`${label}`} />}
@@ -115,7 +123,7 @@ export const MapComponent = ({
               <Button
                 variant="link"
                 title={t("removeAttribute")}
-                isDisabled={map.length === 1}
+                isDisabled={isDisabled}
                 onClick={() => remove(index)}
                 data-testid={`${fieldName}.${index}.remove`}
               >
@@ -132,14 +140,30 @@ export const MapComponent = ({
             className="pf-u-px-0 pf-u-mt-sm"
             variant="link"
             icon={<PlusCircleIcon />}
-            onClick={() =>
+            onClick={() => appendNew()}
-              setMap([...map, { key: "", value: "", id: generateId() }])
-            }
           >
             {t("addAttribute")}
           </Button>
         </ActionListItem>
       </ActionList>
     </FormGroup>
+  ) : (
+    <EmptyState
+      data-testid={`${name}-empty-state`}
+      className="pf-u-p-0"
+      variant="xs"
+    >
+      <EmptyStateBody>{t("missingAttributes", { name })}</EmptyStateBody>
+      <Button
+        data-testid={`${name}-add-row`}
+        variant="link"
+        icon={<PlusCircleIcon />}
+        isSmall
+        onClick={appendNew}
+        isDisabled={isDisabled}
+      >
+        {t("addAttribute")}
+      </Button>
+    </EmptyState>
   );
 };

js/apps/admin-ui/src/components/key-value-form/KeyValueInput.tsx

@@ -165,7 +165,9 @@ export const KeyValueInput = ({
       className="pf-u-p-0"
       variant="xs"
     >
-      <EmptyStateBody>{t("missingAttributes")}</EmptyStateBody>
+      <EmptyStateBody>
+        {t("missingAttributes", { name: "attributes" })}
+      </EmptyStateBody>
       <Button
         data-testid={`${name}-add-row`}
         variant="link"