From c9555766155bf92504bd4901661c746c0c7f46bb Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Wed, 29 May 2024 07:42:10 +0000
Subject: [PATCH 01/32] edit-icon-add

---
 .../components/Admin/UserGroup/UserGroupTable.tsx    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 9c5006ba8bc..cd859bf620d 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -71,6 +71,8 @@ export const UserGroupTable: FC<Props> = ({
   /*
    * State
    */
+  const onMouseEnterHandler = () => setIsHovered(true);
+  const onMouseLeaveHandler = () => setIsHovered(false);
   const [groupIdToUsersMap, setGroupIdToUsersMap] = useState(generateGroupIdToUsersMap(userGroupRelations));
   const [groupIdToChildGroupsMap, setGroupIdToChildGroupsMap] = useState(generateGroupIdToChildGroupsMap(childUserGroups));
 
@@ -136,7 +138,7 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
-
+  const [isHovered, setIsHovered] = useState(false);
   return (
     <div data-testid="grw-user-group-table" className="mb-5">
       <h3>{headerLabel}</h3>
@@ -168,6 +170,14 @@ export const UserGroupTable: FC<Props> = ({
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
                         {group.name}
+                        <button
+                          className="btn btn-link btn-edit-groups text-secondary"
+                          type="button"
+                          onMouseEnter={onMouseEnterHandler}
+                          onMouseLeave={onMouseLeaveHandler}
+                        >   {(isHovered) && (<span className="material-symbols-outlined fs-6">edit</span>
+                          )}
+                        </button>
                       </Link>
                     </td>
                   )

From 63f0905e2efaf70ba7294eb19d44c1eef96dc8af Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Fri, 31 May 2024 09:28:33 +0000
Subject: [PATCH 02/32] undar-line-add

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index cd859bf620d..893ffe62bba 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -165,8 +165,9 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td>
+                      <span className="material-symbols-outlined me-2">group</span>
                       <Link
-                        className="link-opacity-75-hover"
+                        className="link-opacity-75-hove text-decoration-underline"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
                         {group.name}
@@ -175,7 +176,7 @@ export const UserGroupTable: FC<Props> = ({
                           type="button"
                           onMouseEnter={onMouseEnterHandler}
                           onMouseLeave={onMouseLeaveHandler}
-                        >   {(isHovered) && (<span className="material-symbols-outlined fs-6">edit</span>
+                        >   {(isHovered) && (<span className="material-symbols-outlined fs-6 my-1">edit</span>
                           )}
                         </button>
                       </Link>

From 7b11933da09fa95c834843bf263ab553873d1bd8 Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Mon, 3 Jun 2024 06:42:01 +0000
Subject: [PATCH 03/32] mt-add

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 893ffe62bba..ac1f22a88c2 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -165,9 +165,9 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td>
-                      <span className="material-symbols-outlined me-2">group</span>
+                      <span className="material-symbols-outlined me-2 mt-2">group</span>
                       <Link
-                        className="link-opacity-75-hove text-decoration-underline"
+                        className="link-opacity-75-hover text-decoration-underline"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
                         {group.name}

From a3cfa091de94e075e0f6ec7763359603bc535dcd Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Mon, 3 Jun 2024 08:16:54 +0000
Subject: [PATCH 04/32] mt-delete

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index ac1f22a88c2..116c4ea33c0 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -167,7 +167,7 @@ export const UserGroupTable: FC<Props> = ({
                     <td>
                       <span className="material-symbols-outlined me-2 mt-2">group</span>
                       <Link
-                        className="link-opacity-75-hover text-decoration-underline"
+                        className="link-opacity-75-hover .gap-0 text-decoration-underline"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
                         {group.name}
@@ -176,7 +176,7 @@ export const UserGroupTable: FC<Props> = ({
                           type="button"
                           onMouseEnter={onMouseEnterHandler}
                           onMouseLeave={onMouseLeaveHandler}
-                        >   {(isHovered) && (<span className="material-symbols-outlined fs-6 my-1">edit</span>
+                        >   {(isHovered) && (<span className="material-symbols-outlined fs-6">edit</span>
                           )}
                         </button>
                       </Link>

From e645f7db0199622d89b706d4c951482fd3616833 Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Mon, 3 Jun 2024 08:18:16 +0000
Subject: [PATCH 05/32] .gap-delete

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 116c4ea33c0..6a1ee9cc4aa 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -167,7 +167,7 @@ export const UserGroupTable: FC<Props> = ({
                     <td>
                       <span className="material-symbols-outlined me-2 mt-2">group</span>
                       <Link
-                        className="link-opacity-75-hover .gap-0 text-decoration-underline"
+                        className="link-opacity-75-hover  text-decoration-underline"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
                         {group.name}

From f910cb2b930f8980593377d9d864a652562166e2 Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Wed, 5 Jun 2024 07:12:51 +0000
Subject: [PATCH 06/32] py-0-add-fs-delete

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 6a1ee9cc4aa..954a6383860 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -165,18 +165,18 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td>
-                      <span className="material-symbols-outlined me-2 mt-2">group</span>
                       <Link
                         className="link-opacity-75-hover  text-decoration-underline"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
+                        <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         {group.name}
                         <button
-                          className="btn btn-link btn-edit-groups text-secondary"
+                          className="btn btn-link btn-edit-groups text-secondary py-0"
                           type="button"
                           onMouseEnter={onMouseEnterHandler}
                           onMouseLeave={onMouseLeaveHandler}
-                        >   {(isHovered) && (<span className="material-symbols-outlined fs-6">edit</span>
+                        >   {(isHovered) && (<span className="material-symbols-outlined py-0">edit</span>
                           )}
                         </button>
                       </Link>

From e092a5a84a545470fe5e0ca0fd57b192607a7743 Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Mon, 10 Jun 2024 07:53:34 +0000
Subject: [PATCH 07/32] hover-add

---
 .../components/Admin/UserGroup/UserGroupTable.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 954a6383860..8dfa44bdefb 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -71,8 +71,6 @@ export const UserGroupTable: FC<Props> = ({
   /*
    * State
    */
-  const onMouseEnterHandler = () => setIsHovered(true);
-  const onMouseLeaveHandler = () => setIsHovered(false);
   const [groupIdToUsersMap, setGroupIdToUsersMap] = useState(generateGroupIdToUsersMap(userGroupRelations));
   const [groupIdToChildGroupsMap, setGroupIdToChildGroupsMap] = useState(generateGroupIdToChildGroupsMap(childUserGroups));
 
@@ -138,7 +136,8 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
-  const [isHovered, setIsHovered] = useState(false);
+  const [hoveredIndex, setHoveredIndex] = useState<undefined | number>(undefined);
+
   return (
     <div data-testid="grw-user-group-table" className="mb-5">
       <h3>{headerLabel}</h3>
@@ -156,7 +155,7 @@ export const UserGroupTable: FC<Props> = ({
           </tr>
         </thead>
         <tbody>
-          {userGroups.map((group) => {
+          {userGroups.map((group, index) => {
             const users = groupIdToUsersMap[group._id];
 
             return (
@@ -174,9 +173,11 @@ export const UserGroupTable: FC<Props> = ({
                         <button
                           className="btn btn-link btn-edit-groups text-secondary py-0"
                           type="button"
-                          onMouseEnter={onMouseEnterHandler}
-                          onMouseLeave={onMouseLeaveHandler}
-                        >   {(isHovered) && (<span className="material-symbols-outlined py-0">edit</span>
+                          // eslint-disable-next-line react/no-array-index-key
+                          key={index}
+                          onMouseEnter={() => setHoveredIndex(index)}
+                          onMouseLeave={() => setHoveredIndex(undefined)}
+                        >   {(hoveredIndex === index) && (<span className="material-symbols-outlined py-0">edit</span>
                           )}
                         </button>
                       </Link>

From c595598f08b1f43f145483eb075652d0c333c33e Mon Sep 17 00:00:00 2001
From: kazuto <kazuto-u@weseek.co.jp>
Date: Mon, 10 Jun 2024 08:57:00 +0000
Subject: [PATCH 08/32] span-tab-add

---
 .../src/components/Admin/UserGroup/UserGroupTable.tsx    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 8dfa44bdefb..7820baca88d 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -165,11 +165,9 @@ export const UserGroupTable: FC<Props> = ({
                   ? (
                     <td>
                       <Link
-                        className="link-opacity-75-hover  text-decoration-underline"
+                        className="link-opacity-75-hover"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
-                        <span className="material-symbols-outlined pe-2 pt-2">group</span>
-                        {group.name}
                         <button
                           className="btn btn-link btn-edit-groups text-secondary py-0"
                           type="button"
@@ -177,7 +175,10 @@ export const UserGroupTable: FC<Props> = ({
                           key={index}
                           onMouseEnter={() => setHoveredIndex(index)}
                           onMouseLeave={() => setHoveredIndex(undefined)}
-                        >   {(hoveredIndex === index) && (<span className="material-symbols-outlined py-0">edit</span>
+                        >
+                          <span className="material-symbols-outlined pe-2 pt-2">group</span>
+                          <span className="text-decoration-underline">{group.name}</span>
+                          {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
                           )}
                         </button>
                       </Link>

From cf5e96489be650a847c0011909a43040e055f243 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 12 Jun 2024 06:12:03 +0000
Subject: [PATCH 09/32] change-grou-id

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 7820baca88d..40417855880 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -171,8 +171,7 @@ export const UserGroupTable: FC<Props> = ({
                         <button
                           className="btn btn-link btn-edit-groups text-secondary py-0"
                           type="button"
-                          // eslint-disable-next-line react/no-array-index-key
-                          key={index}
+                          key={group._id}
                           onMouseEnter={() => setHoveredIndex(index)}
                           onMouseLeave={() => setHoveredIndex(undefined)}
                         >

From 2810e14d26128994eb57524e27a0350e1625d393 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 17 Jun 2024 06:37:56 +0000
Subject: [PATCH 10/32] link-code-move-up

---
 .../Admin/UserGroup/UserGroupTable.tsx        | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 40417855880..27e43d21be5 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -168,19 +168,19 @@ export const UserGroupTable: FC<Props> = ({
                         className="link-opacity-75-hover"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
-                        <button
-                          className="btn btn-link btn-edit-groups text-secondary py-0"
-                          type="button"
-                          key={group._id}
-                          onMouseEnter={() => setHoveredIndex(index)}
-                          onMouseLeave={() => setHoveredIndex(undefined)}
-                        >
-                          <span className="material-symbols-outlined pe-2 pt-2">group</span>
-                          <span className="text-decoration-underline">{group.name}</span>
-                          {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
-                          )}
-                        </button>
                       </Link>
+                      <button
+                        className="btn btn-link btn-edit-groups text-secondary py-0"
+                        type="button"
+                        key={group._id}
+                        onMouseEnter={() => setHoveredIndex(index)}
+                        onMouseLeave={() => setHoveredIndex(undefined)}
+                      >
+                        <span className="material-symbols-outlined pe-2 pt-2">group</span>
+                        <span className="text-decoration-underline">{group.name}</span>
+                        {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
+                        )}
+                      </button>
                     </td>
                   )
                   : (

From 7be985499cc25be52a7fa52aa9f2822be880b12c Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 17 Jun 2024 06:52:31 +0000
Subject: [PATCH 11/32] change-merge

---
 apps/app/next-env.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/app/next-env.d.ts b/apps/app/next-env.d.ts
index fd36f9494e2..4f11a03dc6c 100644
--- a/apps/app/next-env.d.ts
+++ b/apps/app/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

From 78131e1d1542a3514904771d0b63742e00acbebc Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 17 Jun 2024 07:49:03 +0000
Subject: [PATCH 12/32] div-tag-add

---
 .../Admin/UserGroup/UserGroupTable.tsx        | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 27e43d21be5..2afc225bc4b 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -164,23 +164,25 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td>
-                      <Link
-                        className="link-opacity-75-hover"
-                        href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
-                      >
-                      </Link>
-                      <button
-                        className="btn btn-link btn-edit-groups text-secondary py-0"
-                        type="button"
-                        key={group._id}
-                        onMouseEnter={() => setHoveredIndex(index)}
-                        onMouseLeave={() => setHoveredIndex(undefined)}
-                      >
-                        <span className="material-symbols-outlined pe-2 pt-2">group</span>
-                        <span className="text-decoration-underline">{group.name}</span>
-                        {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
-                        )}
-                      </button>
+                      <div>
+                        <Link
+                          className="link-opacity-75-hover"
+                          href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
+                        >
+                        </Link>
+                        <button
+                          className="btn btn-link btn-edit-groups text-secondary py-0"
+                          type="button"
+                          key={group._id}
+                          onMouseEnter={() => setHoveredIndex(index)}
+                          onMouseLeave={() => setHoveredIndex(undefined)}
+                        >
+                          <span className="material-symbols-outlined pe-2 pt-2">group</span>
+                          <span className="text-decoration-underline">{group.name}</span>
+                          {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
+                          )}
+                        </button>
+                      </div>
                     </td>
                   )
                   : (

From 0c33bc18ff3304af850002533669dc2c972b2bf7 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 17 Jun 2024 09:21:28 +0000
Subject: [PATCH 13/32] index-delete

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 2afc225bc4b..a9b5ec5eb0d 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -179,7 +179,7 @@ export const UserGroupTable: FC<Props> = ({
                         >
                           <span className="material-symbols-outlined pe-2 pt-2">group</span>
                           <span className="text-decoration-underline">{group.name}</span>
-                          {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
+                          { hoveredIndex && (<span className="material-symbols-outlined px-2 py-0">edit</span>
                           )}
                         </button>
                       </div>

From 22c292ccfa975b5cc36dcf80cc28635912ac0c02 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 17 Jun 2024 09:39:44 +0000
Subject: [PATCH 14/32] Revert "index-delete"

This reverts commit 0c33bc18ff3304af850002533669dc2c972b2bf7.
---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index a9b5ec5eb0d..2afc225bc4b 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -179,7 +179,7 @@ export const UserGroupTable: FC<Props> = ({
                         >
                           <span className="material-symbols-outlined pe-2 pt-2">group</span>
                           <span className="text-decoration-underline">{group.name}</span>
-                          { hoveredIndex && (<span className="material-symbols-outlined px-2 py-0">edit</span>
+                          {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
                           )}
                         </button>
                       </div>

From 011662121c878daf4e261b1091ebab250cc718c6 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 17 Jun 2024 11:07:06 +0000
Subject: [PATCH 15/32] onmouse-code-move-up

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 2afc225bc4b..3afdcaff6f1 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -164,7 +164,10 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td>
-                      <div>
+                      <div
+                        onMouseEnter={() => setHoveredIndex(index)}
+                        onMouseLeave={() => setHoveredIndex(undefined)}
+                      >
                         <Link
                           className="link-opacity-75-hover"
                           href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
@@ -174,8 +177,6 @@ export const UserGroupTable: FC<Props> = ({
                           className="btn btn-link btn-edit-groups text-secondary py-0"
                           type="button"
                           key={group._id}
-                          onMouseEnter={() => setHoveredIndex(index)}
-                          onMouseLeave={() => setHoveredIndex(undefined)}
                         >
                           <span className="material-symbols-outlined pe-2 pt-2">group</span>
                           <span className="text-decoration-underline">{group.name}</span>

From f558ae640789d85bcd25c964834a4ffd9359a44e Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 19 Jun 2024 05:13:43 +0000
Subject: [PATCH 16/32] revert changes

---
 apps/app/next-env.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/app/next-env.d.ts b/apps/app/next-env.d.ts
index 4f11a03dc6c..fd36f9494e2 100644
--- a/apps/app/next-env.d.ts
+++ b/apps/app/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

From 497a2b72f7d9c259d10c8640ae4c24421edaab90 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 19 Jun 2024 06:48:55 +0000
Subject: [PATCH 17/32] edit-code-move

---
 .../Admin/UserGroup/UserGroupTable.tsx        | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 3afdcaff6f1..c61b3d90efd 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -163,27 +163,26 @@ export const UserGroupTable: FC<Props> = ({
                 {isExternalGroup && <td>{(group as IExternalUserGroupHasId).provider}</td>}
                 {isAclEnabled
                   ? (
-                    <td>
-                      <div
-                        onMouseEnter={() => setHoveredIndex(index)}
-                        onMouseLeave={() => setHoveredIndex(undefined)}
+                    <td
+                      onMouseLeave={() => setHoveredIndex(undefined)}
+                      onMouseEnter={() => setHoveredIndex(index)}
+                    >
+
+
+                      <Link
+                        className="link-opacity-75-hover"
+                        href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
                       >
-                        <Link
-                          className="link-opacity-75-hover"
-                          href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
-                        >
-                        </Link>
-                        <button
-                          className="btn btn-link btn-edit-groups text-secondary py-0"
-                          type="button"
-                          key={group._id}
-                        >
-                          <span className="material-symbols-outlined pe-2 pt-2">group</span>
-                          <span className="text-decoration-underline">{group.name}</span>
-                          {(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
-                          )}
-                        </button>
-                      </div>
+                      </Link>
+                      <button
+                        className="btn btn-link btn-edit-groups text-secondary py-0"
+                        type="button"
+                        key={group._id}
+                      >
+                        <span className="material-symbols-outlined pe-2 pt-2">group</span>
+                        <span className="text-decoration-underline">{group.name}</span>
+                        <span className={`material-symbols-outlined px-2 py-0 ${hoveredIndex === index ? '' : 'opacity-0'}`}>edit</span>
+                      </button>
                     </td>
                   )
                   : (

From 8d029c600b4a63deb706caae07040aaa8e563757 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 19 Jun 2024 09:12:25 +0000
Subject: [PATCH 18/32] enter-leave-chaange

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index c61b3d90efd..66735815555 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -164,8 +164,8 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td
-                      onMouseLeave={() => setHoveredIndex(undefined)}
                       onMouseEnter={() => setHoveredIndex(index)}
+                      onMouseLeave={() => setHoveredIndex(undefined)}
                     >
 
 

From ce54fe0cedfc2d68d5cf7fc1aa843236155a8bf9 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 19 Jun 2024 09:21:37 +0000
Subject: [PATCH 19/32] index-item-change

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 66735815555..54175e07eaa 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -155,7 +155,7 @@ export const UserGroupTable: FC<Props> = ({
           </tr>
         </thead>
         <tbody>
-          {userGroups.map((group, index) => {
+          {userGroups.map((group, item) => {
             const users = groupIdToUsersMap[group._id];
 
             return (
@@ -164,7 +164,7 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td
-                      onMouseEnter={() => setHoveredIndex(index)}
+                      onMouseEnter={() => setHoveredIndex(item)}
                       onMouseLeave={() => setHoveredIndex(undefined)}
                     >
 
@@ -181,7 +181,7 @@ export const UserGroupTable: FC<Props> = ({
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
-                        <span className={`material-symbols-outlined px-2 py-0 ${hoveredIndex === index ? '' : 'opacity-0'}`}>edit</span>
+                        <span className={`material-symbols-outlined px-2 py-0 ${hoveredIndex === item ? '' : 'opacity-0'}`}>edit</span>
                       </button>
                     </td>
                   )

From a2133c7a2d0aa6f65de3bf3875b3e18cc837495e Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 24 Jun 2024 06:34:08 +0000
Subject: [PATCH 20/32] index-change-item

---
 .../app/src/components/Admin/UserGroup/UserGroupTable.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 54175e07eaa..b0ecd17dd96 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -136,7 +136,7 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
-  const [hoveredIndex, setHoveredIndex] = useState<undefined | number>(undefined);
+  const [hovereditem, setHoveredItem] = useState<undefined | number>(undefined);
 
   return (
     <div data-testid="grw-user-group-table" className="mb-5">
@@ -164,8 +164,8 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td
-                      onMouseEnter={() => setHoveredIndex(item)}
-                      onMouseLeave={() => setHoveredIndex(undefined)}
+                      onMouseEnter={() => setHoveredItem(item)}
+                      onMouseLeave={() => setHoveredItem(undefined)}
                     >
 
 
@@ -181,7 +181,7 @@ export const UserGroupTable: FC<Props> = ({
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
-                        <span className={`material-symbols-outlined px-2 py-0 ${hoveredIndex === item ? '' : 'opacity-0'}`}>edit</span>
+                        <span className={`material-symbols-outlined px-2 py-0 ${hovereditem === item ? '' : 'opacity-0'}`}>edit</span>
                       </button>
                     </td>
                   )

From 0c79a970486db8996c156615586c349e3e671a09 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 24 Jun 2024 11:20:39 +0000
Subject: [PATCH 21/32] const-add

---
 .../Admin/UserGroup/UserGroupTable.tsx        | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index b0ecd17dd96..6c27ccd6424 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -136,7 +136,19 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
-  const [hovereditem, setHoveredItem] = useState<undefined | number>(undefined);
+  const ButtonForUserGroupTable = () => {
+    return (
+      <button
+        className="btn btn-link btn-edit-groups text-secondary py-0"
+        type="button"
+      >
+        <span className="material-symbols-outlined pe-2 pt-2">group</span>
+        <span className="text-decoration-underline"></span>
+        <span className="material-symbols-outlined px-2 py-0 ">edit</span>
+      </button>
+    );
+  };
+  const [hoveredindex, setHoveredIdex] = useState<undefined | number>(undefined);
 
   return (
     <div data-testid="grw-user-group-table" className="mb-5">
@@ -155,7 +167,7 @@ export const UserGroupTable: FC<Props> = ({
           </tr>
         </thead>
         <tbody>
-          {userGroups.map((group, item) => {
+          {userGroups.map((group, index) => {
             const users = groupIdToUsersMap[group._id];
 
             return (
@@ -164,8 +176,8 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td
-                      onMouseEnter={() => setHoveredItem(item)}
-                      onMouseLeave={() => setHoveredItem(undefined)}
+                      onMouseEnter={() => setHoveredIdex(index)}
+                      onMouseLeave={() => setHoveredIdex(undefined)}
                     >
 
 
@@ -181,7 +193,7 @@ export const UserGroupTable: FC<Props> = ({
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
-                        <span className={`material-symbols-outlined px-2 py-0 ${hovereditem === item ? '' : 'opacity-0'}`}>edit</span>
+                        <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
                       </button>
                     </td>
                   )

From 7e835fb3a23edf2f0e5d0a94ff99618ba449990b Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 24 Jun 2024 11:55:28 +0000
Subject: [PATCH 22/32] group-delete

---
 apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
index 6c27ccd6424..ee4e8b78def 100644
--- a/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
@@ -142,8 +142,6 @@ export const UserGroupTable: FC<Props> = ({
         className="btn btn-link btn-edit-groups text-secondary py-0"
         type="button"
       >
-        <span className="material-symbols-outlined pe-2 pt-2">group</span>
-        <span className="text-decoration-underline"></span>
         <span className="material-symbols-outlined px-2 py-0 ">edit</span>
       </button>
     );

From 92d3ce6dc03ddc3c08f6c216a4bb84ac6d5d958a Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 1 Jul 2024 10:41:43 +0000
Subject: [PATCH 23/32] button-for-code-move

---
 .../client/components/Admin/UserGroup/UserGroupTable.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index ee4e8b78def..5cf50a2809b 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -136,17 +136,17 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
-  const ButtonForUserGroupTable = () => {
+  const [hoveredindex, setHoveredIdex] = useState<undefined | number>(undefined);
+  const ButtonForUserGroupedit = (index) => {
     return (
       <button
         className="btn btn-link btn-edit-groups text-secondary py-0"
         type="button"
       >
-        <span className="material-symbols-outlined px-2 py-0 ">edit</span>
+        <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
       </button>
     );
   };
-  const [hoveredindex, setHoveredIdex] = useState<undefined | number>(undefined);
 
   return (
     <div data-testid="grw-user-group-table" className="mb-5">

From 0d48a1b3c3f507f114b9fe717292d0c96caf4ce5 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 3 Jul 2024 06:56:48 +0000
Subject: [PATCH 24/32] code-delete

---
 .../client/components/Admin/UserGroup/UserGroupTable.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index 5cf50a2809b..fcbade342a8 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -137,14 +137,9 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
   const [hoveredindex, setHoveredIdex] = useState<undefined | number>(undefined);
-  const ButtonForUserGroupedit = (index) => {
+  const ButtonForUserGroupedit = async(index) => {
     return (
-      <button
-        className="btn btn-link btn-edit-groups text-secondary py-0"
-        type="button"
-      >
-        <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
-      </button>
+      <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
     );
   };
 

From a1c92bb6f6e70bf8358352c36fa5f7933d60e6b4 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 3 Jul 2024 10:50:14 +0000
Subject: [PATCH 25/32] button-tag-delete

---
 .../client/components/Admin/UserGroup/UserGroupTable.tsx  | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index fcbade342a8..ca82a63dd59 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -177,17 +177,11 @@ export const UserGroupTable: FC<Props> = ({
                       <Link
                         className="link-opacity-75-hover"
                         href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
-                      >
-                      </Link>
-                      <button
-                        className="btn btn-link btn-edit-groups text-secondary py-0"
-                        type="button"
-                        key={group._id}
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
                         <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
-                      </button>
+                      </Link>
                     </td>
                   )
                   : (

From 422b330fdbb7ef043df32cd6710cbda36cf1e60d Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 8 Jul 2024 09:20:25 +0000
Subject: [PATCH 26/32] props-code-add

---
 .../src/client/components/Admin/UserGroup/UserGroupTable.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index ca82a63dd59..e6a0064426e 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -5,6 +5,7 @@ import type { IUserGroupHasId, IUserGroupRelation, IUserHasId } from '@growi/cor
 import { format as dateFnsFormat } from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
+import { Item } from 'yjs';
 
 import type { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
 
@@ -137,7 +138,7 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
   const [hoveredindex, setHoveredIdex] = useState<undefined | number>(undefined);
-  const ButtonForUserGroupedit = async(index) => {
+  const ButtonForUserGroupedit = (index) => {
     return (
       <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
     );
@@ -180,7 +181,7 @@ export const UserGroupTable: FC<Props> = ({
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
-                        <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
+                        <ButtonForUserGroupedit />
                       </Link>
                     </td>
                   )

From 5bce4f95ca7894df17fea20660d2511fa61b3c4b Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 10 Jul 2024 09:57:27 +0000
Subject: [PATCH 27/32] button-tag-add

---
 .../Admin/UserGroup/UserGroupTable.tsx        | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index e6a0064426e..530aecbbff9 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -5,7 +5,6 @@ import type { IUserGroupHasId, IUserGroupRelation, IUserHasId } from '@growi/cor
 import { format as dateFnsFormat } from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
-import { Item } from 'yjs';
 
 import type { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
 
@@ -140,7 +139,15 @@ export const UserGroupTable: FC<Props> = ({
   const [hoveredindex, setHoveredIdex] = useState<undefined | number>(undefined);
   const ButtonForUserGroupedit = (index) => {
     return (
-      <span className={`material-symbols-outlined px-2 py-0 ${hoveredindex === index ? '' : 'opacity-0'}`}>edit</span>
+      <button
+        type="button"
+        className="btn btn-link btn-edit-groups text-secondary py-0"
+        key={index}
+        onMouseEnter={() => setHoveredIdex(index)}
+        onMouseLeave={() => setHoveredIdex(undefined)}
+      >
+        <span className="material-symbols-outlined px-2 py-0">edit</span>
+      </button>
     );
   };
 
@@ -161,7 +168,7 @@ export const UserGroupTable: FC<Props> = ({
           </tr>
         </thead>
         <tbody>
-          {userGroups.map((group, index) => {
+          {userGroups.map((group) => {
             const users = groupIdToUsersMap[group._id];
 
             return (
@@ -169,11 +176,7 @@ export const UserGroupTable: FC<Props> = ({
                 {isExternalGroup && <td>{(group as IExternalUserGroupHasId).provider}</td>}
                 {isAclEnabled
                   ? (
-                    <td
-                      onMouseEnter={() => setHoveredIdex(index)}
-                      onMouseLeave={() => setHoveredIdex(undefined)}
-                    >
-
+                    <td>
 
                       <Link
                         className="link-opacity-75-hover"
@@ -181,7 +184,7 @@ export const UserGroupTable: FC<Props> = ({
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
-                        <ButtonForUserGroupedit />
+                        {hoveredindex ? '' : 'opacity-0'}<ButtonForUserGroupedit />
                       </Link>
                     </td>
                   )

From 05be1dc62eebf5a4846061f4f9c17243e8b6cc30 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Thu, 11 Jul 2024 07:04:42 +0000
Subject: [PATCH 28/32] class-name-add

---
 .../client/components/Admin/UserGroup/UserGroupTable.tsx    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index 530aecbbff9..c692dcf8681 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -136,15 +136,13 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
-  const [hoveredindex, setHoveredIdex] = useState<undefined | number>(undefined);
+  const [hoveredindex, setHoveredIndex] = useState<undefined | number>(undefined);
   const ButtonForUserGroupedit = (index) => {
     return (
       <button
         type="button"
         className="btn btn-link btn-edit-groups text-secondary py-0"
         key={index}
-        onMouseEnter={() => setHoveredIdex(index)}
-        onMouseLeave={() => setHoveredIdex(undefined)}
       >
         <span className="material-symbols-outlined px-2 py-0">edit</span>
       </button>
@@ -184,7 +182,7 @@ export const UserGroupTable: FC<Props> = ({
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
-                        {hoveredindex ? '' : 'opacity-0'}<ButtonForUserGroupedit />
+                        <ButtonForUserGroupedit className={hoveredindex ?? ''} />
                       </Link>
                     </td>
                   )

From b0b3a8c8a2d85688a3da7f72e1cb93fc6181cee4 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Thu, 11 Jul 2024 10:00:15 +0000
Subject: [PATCH 29/32] hovered-delete

---
 .../src/client/components/Admin/UserGroup/UserGroupTable.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index c692dcf8681..1425f7958af 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -182,7 +182,7 @@ export const UserGroupTable: FC<Props> = ({
                       >
                         <span className="material-symbols-outlined pe-2 pt-2">group</span>
                         <span className="text-decoration-underline">{group.name}</span>
-                        <ButtonForUserGroupedit className={hoveredindex ?? ''} />
+                        <ButtonForUserGroupedit />
                       </Link>
                     </td>
                   )

From ac69f6d2924f48869da64beeda7a30f32e413f03 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Wed, 17 Jul 2024 10:13:33 +0000
Subject: [PATCH 30/32] props-code-add

---
 .../Admin/UserGroup/UserGroupTable.tsx        | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index 1425f7958af..3e831c445fc 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -54,6 +54,29 @@ const generateGroupIdToChildGroupsMap = (childUserGroups: IUserGroupHasId[]): Re
   return map;
 };
 
+type UserGroupEditLinkProps = {
+  group:IUserGroupHasId,
+  isExternalGroup:boolean,
+}
+
+const UserGroupEditLink = (props: UserGroupEditLinkProps): JSX.Element => {
+  const [isHover, setHover] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      <Link
+        href={`/admin/user-group-detail/${props.group._id}?isExternalGroup=${props.isExternalGroup}`}
+      >
+        <span className="material-symbols-outlined pe-2 pt-2">group</span>
+        <span className="text-decoration-underline">{props.group.name}</span>
+        <span className={`material-symbols-outlined link-opacity-75-hover px-2 py-0 ${isHover ? '' : 'invisible'}`}>edit</span>
+      </Link>
+    </div>
+  );
+};
 
 export const UserGroupTable: FC<Props> = ({
   headerLabel,
@@ -136,18 +159,6 @@ export const UserGroupTable: FC<Props> = ({
     setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
     setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
   }, [userGroupRelations, childUserGroups]);
-  const [hoveredindex, setHoveredIndex] = useState<undefined | number>(undefined);
-  const ButtonForUserGroupedit = (index) => {
-    return (
-      <button
-        type="button"
-        className="btn btn-link btn-edit-groups text-secondary py-0"
-        key={index}
-      >
-        <span className="material-symbols-outlined px-2 py-0">edit</span>
-      </button>
-    );
-  };
 
   return (
     <div data-testid="grw-user-group-table" className="mb-5">
@@ -175,15 +186,7 @@ export const UserGroupTable: FC<Props> = ({
                 {isAclEnabled
                   ? (
                     <td>
-
-                      <Link
-                        className="link-opacity-75-hover"
-                        href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
-                      >
-                        <span className="material-symbols-outlined pe-2 pt-2">group</span>
-                        <span className="text-decoration-underline">{group.name}</span>
-                        <ButtonForUserGroupedit />
-                      </Link>
+                      <UserGroupEditLink group={group} isExternalGroup={isExternalGroup} />
                     </td>
                   )
                   : (

From 73dce9c65ed1a680cc834990ed4719677e1c385a Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Wed, 24 Jul 2024 09:51:08 +0000
Subject: [PATCH 31/32] implement without state management

---
 .../UserGroup/UserGroupTable.module.scss      | 19 ++++++++++++++
 .../Admin/UserGroup/UserGroupTable.tsx        | 25 +++++++++----------
 2 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss
new file mode 100644
index 00000000000..031cfa31aab
--- /dev/null
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss
@@ -0,0 +1,19 @@
+.user-group-edit-link {
+  text-decoration: underline;
+}
+
+.user-group-edit-link {
+  :global {
+    .grw-edit-icon {
+      visibility: hidden;
+    }
+  }
+
+  &:global {
+    &:hover {
+      .grw-edit-icon {
+        visibility: visible;
+      }
+    }
+  }
+}
diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
index 3e831c445fc..74b3652bc72 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx
@@ -9,6 +9,11 @@ import Link from 'next/link';
 import type { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
 
 
+import styles from './UserGroupTable.module.scss';
+
+const userGroupEditLinkStyle = styles['user-group-edit-link'] ?? '';
+
+
 type Props = {
   headerLabel?: string,
   userGroups: IUserGroupHasId[],
@@ -60,21 +65,15 @@ type UserGroupEditLinkProps = {
 }
 
 const UserGroupEditLink = (props: UserGroupEditLinkProps): JSX.Element => {
-  const [isHover, setHover] = useState(false);
-
   return (
-    <div
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
+    <Link
+      href={`/admin/user-group-detail/${props.group._id}?isExternalGroup=${props.isExternalGroup}`}
+      className={`${userGroupEditLinkStyle} link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover`}
     >
-      <Link
-        href={`/admin/user-group-detail/${props.group._id}?isExternalGroup=${props.isExternalGroup}`}
-      >
-        <span className="material-symbols-outlined pe-2 pt-2">group</span>
-        <span className="text-decoration-underline">{props.group.name}</span>
-        <span className={`material-symbols-outlined link-opacity-75-hover px-2 py-0 ${isHover ? '' : 'invisible'}`}>edit</span>
-      </Link>
-    </div>
+      <span className="material-symbols-outlined pe-2 pt-2">group</span>
+      <span>{props.group.name}</span>
+      <span className="grw-edit-icon material-symbols-outlined px-2 py-0">edit</span>
+    </Link>
   );
 };
 

From 7b7160dc089ff1e539e0e5c64ed1251cff45114a Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Wed, 24 Jul 2024 09:53:34 +0000
Subject: [PATCH 32/32] add comment

---
 .../client/components/Admin/UserGroup/UserGroupTable.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss
index 031cfa31aab..23e70fc1ca7 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupTable.module.scss
@@ -2,6 +2,7 @@
   text-decoration: underline;
 }
 
+// switch visibility of the edit icon
 .user-group-edit-link {
   :global {
     .grw-edit-icon {