From 4d878b8f52b97e437d1d7e5e91e2bb125ed43b02 Mon Sep 17 00:00:00 2001
From: Chuanbao Lu <chuanbao.lu@gmail.com>
Date: Thu, 16 Jan 2025 08:54:42 -0500
Subject: [PATCH] 35522 add group edit page

---
 packages/dina-ui/components/group/GroupLabelsEditor.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/dina-ui/components/group/GroupLabelsEditor.tsx b/packages/dina-ui/components/group/GroupLabelsEditor.tsx
index 6ebd257a5..7764bb10f 100644
--- a/packages/dina-ui/components/group/GroupLabelsEditor.tsx
+++ b/packages/dina-ui/components/group/GroupLabelsEditor.tsx
@@ -78,14 +78,16 @@ export function GroupLabelsEditor({ valuesPath }: GroupLabelsEditorProps) {
                       <FormikButton
                         className="btn remove-attribute"
                         onClick={(_, form) => {
-                          // Delete the value and hide the managed attribute:
+                          // Delete the value and hide the label:
                           form.setFieldValue(
                             `${valuesPath}.${language}`,
                             undefined
                           );
+                          // Add the language back to availableLanguages
                           setAvailableLanguages(
                             concat(availableLanguages, language).sort()
                           );
+                          // Remove the language from visibleLanguages
                           setVisibleLanguages((languages) =>
                             languages.filter((lang) => lang !== language)
                           );
@@ -104,12 +106,15 @@ export function GroupLabelsEditor({ valuesPath }: GroupLabelsEditorProps) {
                   onChange={(value) => {
                     const selectedLang = value?.value;
                     if (selectedLang) {
+                      // add the language to visibleLanguages
                       setVisibleLanguages(
                         concat(visibleLanguages, selectedLang)
                       );
+                      // remove the language from availableLanguages
                       setAvailableLanguages((languages) =>
                         languages.filter((lang) => lang !== selectedLang)
                       );
+                      // set fieldValue in the formik.
                       form.setFieldValue(`${valuesPath}.${selectedLang}`, "");
                     }
                   }}