update parent group from UserGroupForm

packages/app/resource/locales/en_US/admin/admin.json

@@ -472,6 +472,8 @@
     "deny_create_group": "You can't create a new group with the current settings.",
     "group_name": "Group name",
     "group_example": "e.g. : Group1",
+    "parent_group": "Parent Group",
+    "select_parent_group": "Select Parent Group",
     "add_modal": {
       "add_user": "Add a user to the created group",
       "search_option": "Search option",

packages/app/resource/locales/ja_JP/admin/admin.json

@@ -471,6 +471,8 @@
     "deny_create_group": "新規グループの作成はできません。",
     "group_name": "グループ名",
     "group_example": "例: Group1",
+    "parent_group": "親グループ",
+    "select_parent_group": "親グループを選択",
     "add_modal": {
       "add_user": "グループへのユーザー追加",
       "search_option": "検索オプション",

packages/app/resource/locales/zh_CN/admin/admin.json

@@ -481,6 +481,8 @@
     "deny_create_group": "不能用当前设置创建新组。",
     "group_name": "组名",
     "group_example": "e.g.：第1组",
+    "parent_group": "父母组",
+    "select_parent_group": "选择父组",
     "add_modal": {
       "add_user": "将用户添加到创建的组",
       "search_option": "搜索选项",

packages/app/src/components/Admin/UserGroup/UserGroupForm.tsx

@@ -1,8 +1,11 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, {
+  FC, useCallback, useState, useEffect,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 import { TFunctionResult } from 'i18next';
 
+import { useSWRxUserGroup } from '~/stores/user-group';
 import { IUserGroup, IUserGroupHasId } from '~/interfaces/user';
 import { CustomWindow } from '~/interfaces/global';
 import Xss from '~/services/xss';
@@ -28,7 +31,12 @@ const UserGroupForm: FC<Props> = (props: Props) => {
    */
   const [currentName, setName] = useState(userGroup != null ? userGroup.name : '');
   const [currentDescription, setDescription] = useState(userGroup != null ? userGroup.description : '');
-  const [currentParent, setParent] = useState(userGroup != null ? userGroup.parent : '');
+  const [selectedParent, setSelectedSelectedParent] = useState<IUserGroupHasId | null>(null);
+
+  /*
+   * Fetch
+   */
+  const { data: parentUserGroup } = useSWRxUserGroup(userGroup?.parent as string);
 
   /*
    * Function
@@ -41,6 +49,12 @@ const UserGroupForm: FC<Props> = (props: Props) => {
     setDescription(e.target.value);
   }, []);
 
+  const onChangeParerentButtonHandler = useCallback((userGroup: IUserGroupHasId) => {
+    if (userGroup._id !== selectedParent?._id) {
+      setSelectedSelectedParent(userGroup);
+    }
+  }, [selectedParent, setSelectedSelectedParent]);
+
   const onSubmitHandler = useCallback(async(e) => {
     e.preventDefault(); // no reload
 
@@ -48,8 +62,12 @@ const UserGroupForm: FC<Props> = (props: Props) => {
       return;
     }
 
-    await onSubmit({ name: currentName, description: currentDescription, parent: currentParent });
-  }, [currentName, currentDescription, currentParent, onSubmit]);
+    await onSubmit({ name: currentName, description: currentDescription, parent: selectedParent?._id });
+  }, [currentName, currentDescription, selectedParent, onSubmit]);
+
+  useEffect(() => {
+    setSelectedSelectedParent(parentUserGroup ?? null);
+  }, [parentUserGroup]);
 
   return (
     <form onSubmit={onSubmitHandler}>
@@ -57,7 +75,6 @@ const UserGroupForm: FC<Props> = (props: Props) => {
       <fieldset>
         <h2 className="admin-setting-header">{t('admin:user_group_management.basic_info')}</h2>
 
-        {/* TODO 85062: improve style */}
         {
           userGroup?.createdAt != null && (
             <div className="form-group row">
@@ -95,11 +112,11 @@ const UserGroupForm: FC<Props> = (props: Props) => {
 
         <div className="form-group row">
           <label htmlFor="parent" className="col-md-2 col-form-label">
-            親グループ
+            {t('admin:user_group_management.parent_group')}
           </label>
           <div className="dropdown col-md-4">
             <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
-              {t('admin:user_group_management.add_child_group')}
+              {selectedParent?.name ?? t('admin:user_group_management.select_parent_group')}
             </button>
             <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
               {
@@ -111,6 +128,7 @@ const UserGroupForm: FC<Props> = (props: Props) => {
                           key={userGroup._id}
                           type="button"
                           className="dropdown-item"
+                          onClick={() => onChangeParerentButtonHandler(userGroup)}
                         >
                           {userGroup.name}
                         </button>