From d1e7fa6b799dd659c03d467616bba8c52e2d16f9 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <saurabhkumarrr@google.com>
Date: Thu, 5 Oct 2023 19:18:29 +0530
Subject: [PATCH 1/2] Fixes map type field non readable issues

Fixes map type field non readable issues
---
 .../webapp/src/components/forms/fields/ListField.tsx   |  9 +++++++--
 .../webapp/src/components/forms/fields/MapField.tsx    | 10 ++++++++--
 .../webapp/src/components/forms/fields/SetField.tsx    |  9 +++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/radlab-ui/webapp/src/components/forms/fields/ListField.tsx b/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
index 62abe970..d5288a1b 100644
--- a/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
@@ -49,8 +49,13 @@ const ListField: React.FC<ListField> = ({ variable }) => {
           return (
             <div>
               {values[variable.name].map((setvalue: string, index: number) => (
-                <div key={index} className="badge badge-info gap-2 m-1">
-                  <span>{setvalue}</span>
+                <div
+                  key={index}
+                  className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+                >
+                  <span className="w-auto" style={{ overflowWrap: "anywhere" }}>
+                    {setvalue}
+                  </span>
                   <XIcon
                     onClick={() => remove(index)}
                     className="h-4 w-4 cursor-pointer"
diff --git a/radlab-ui/webapp/src/components/forms/fields/MapField.tsx b/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
index 2b09e2b0..fe388c5b 100644
--- a/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
@@ -73,8 +73,14 @@ const MapField: React.FC<MapField> = ({ variable, validate }) => {
             <div>
               {Object.keys(values[variable.name]).map(
                 (map_data: string, index: number) => (
-                  <div key={index} className="badge badge-info gap-2 m-1">
-                    <span>
+                  <div
+                    key={index}
+                    className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+                  >
+                    <span
+                      className="w-auto"
+                      style={{ overflowWrap: "anywhere" }}
+                    >
                       {map_data} = {values[variable.name][map_data]}
                     </span>
                     <button
diff --git a/radlab-ui/webapp/src/components/forms/fields/SetField.tsx b/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
index f63fa7d4..f28df33d 100644
--- a/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
@@ -48,8 +48,13 @@ const SetField: React.FC<SetField> = ({ variable }) => {
           return (
             <div>
               {values[variable.name].map((setvalue: string, index: number) => (
-                <div key={index} className="badge badge-info gap-2 m-1">
-                  <span>{setvalue}</span>
+                <div
+                  key={index}
+                  className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+                >
+                  <span className="w-auto" style={{ overflowWrap: "anywhere" }}>
+                    {setvalue}
+                  </span>
                   <XIcon
                     onClick={() => remove(index)}
                     className="h-4 w-4 cursor-pointer"

From 17c2957928c59f84e255e962d07c8c1cfd249519 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <saurabhkumarrr@google.com>
Date: Fri, 6 Oct 2023 14:14:25 +0530
Subject: [PATCH 2/2] updating unique key id

---
 .../src/components/forms/fields/ListField.tsx |  2 +-
 .../src/components/forms/fields/MapField.tsx  | 35 ++++++++-----------
 .../src/components/forms/fields/SetField.tsx  |  2 +-
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/radlab-ui/webapp/src/components/forms/fields/ListField.tsx b/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
index d5288a1b..1bbe8c70 100644
--- a/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
@@ -50,7 +50,7 @@ const ListField: React.FC<ListField> = ({ variable }) => {
             <div>
               {values[variable.name].map((setvalue: string, index: number) => (
                 <div
-                  key={index}
+                  key={setvalue}
                   className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
                 >
                   <span className="w-auto" style={{ overflowWrap: "anywhere" }}>
diff --git a/radlab-ui/webapp/src/components/forms/fields/MapField.tsx b/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
index fe388c5b..f28e3a31 100644
--- a/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
@@ -71,27 +71,22 @@ const MapField: React.FC<MapField> = ({ variable, validate }) => {
           }
           return (
             <div>
-              {Object.keys(values[variable.name]).map(
-                (map_data: string, index: number) => (
-                  <div
-                    key={index}
-                    className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+              {Object.keys(values[variable.name]).map((map_data: string) => (
+                <div
+                  key={map_data}
+                  className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+                >
+                  <span className="w-auto" style={{ overflowWrap: "anywhere" }}>
+                    {map_data} = {values[variable.name][map_data]}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={handleRemove(values[variable.name], map_data)}
                   >
-                    <span
-                      className="w-auto"
-                      style={{ overflowWrap: "anywhere" }}
-                    >
-                      {map_data} = {values[variable.name][map_data]}
-                    </span>
-                    <button
-                      type="button"
-                      onClick={handleRemove(values[variable.name], map_data)}
-                    >
-                      <XIcon className="h-4 w-4 cursor-pointer" />
-                    </button>
-                  </div>
-                ),
-              )}
+                    <XIcon className="h-4 w-4 cursor-pointer" />
+                  </button>
+                </div>
+              ))}
               <div className="flex mt-1">
                 <input type="hidden" value={deleteItem} />
                 <Field
diff --git a/radlab-ui/webapp/src/components/forms/fields/SetField.tsx b/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
index f28df33d..7236384e 100644
--- a/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
@@ -49,7 +49,7 @@ const SetField: React.FC<SetField> = ({ variable }) => {
             <div>
               {values[variable.name].map((setvalue: string, index: number) => (
                 <div
-                  key={index}
+                  key={setvalue}
                   className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
                 >
                   <span className="w-auto" style={{ overflowWrap: "anywhere" }}>