imprv: User group link in admin page

[kazutoweseek]

TASK
https://redmine.weseek.co.jp/issues/140677
┗https://redmine.weseek.co.jp/issues/145630

修正前

修正後

修正後ホバー時

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7b7160d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[yuki-takei]

DOM 構造について

DOM 構造的に Link の中に button があるのは違和感。

親コンテナの中に Link と button を子供として並列に入れて、
親コンテナに対する hover で button の表示・非表示をコントロールしたらいいと思う。
PageCreateButton あたりが参考になるはず。

ステート管理について

index を保持するのはあまりスマートではないので、ここは切り出して別コンポーネントにしよう。
このファイル内に定義してしまって構わない。

[miya]

これが考慮されていないと思う。
以下を別コンポーネントに切り出して index を props で渡す、という実装になるんじゃないかな。

    <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 ${hovereditem === item ? '' : 'opacity-0'}`}>edit</span>
    </button>

[reg-suit]

reg-suit detected visual differences.

Check this report, and review them.

🔴🔴🔴🔴🔴🔴🔴🔴

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean?

The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.