TagEditButton / TagEditModal を非React化する

[komagata]

closes #9798

概要

TagEditButton / TagEditModal コンポーネントを React から非React（Rails view + バニラJS）に移行しました。

変更内容

• React コンポーネントを削除:
  • app/javascript/components/Tags/TagEditButton.jsx
  • app/javascript/components/Tags/TagEditModal.jsx
• Slim テンプレートで置き換え: app/views/shared/_tag_edit_button.html.slim
• 既存の app/javascript/tag_edit.js (バニラJS) を活用
• 以下のビューを更新:
  • app/views/users/index.html.slim
  • app/views/pages/index.html.slim
  • app/views/questions/index.html.slim

注意

TagsInput.jsx は今回は対象外（tagifyライブラリ依存で別対応）。
これは #9798 の部分対応で、TagsInput は別Issue化を検討予定です。

Summary by CodeRabbit

リリースノート

• Refactor
  • タグ編集機能の内部実装を改善しました。クライアント側のコンポーネント処理からサーバー側のテンプレート処理へ移行し、複数のページにおけるタグ編集ボタンの表示ロジックを統一しました。

[coderabbitai]

📝 Walkthrough

ウォークスルー

React で実装されていたタグ編集機能（TagEditButton と TagEditModal）を削除し、Rails のサーバーサイド部分テンプレートに置き換えています。3 つのビューファイルで React コンポーネント呼び出しを削除し、新しく作成した _tag_edit_button.html.slim 部分テンプレートの呼び出しに統一しました。

変更内容

コホート / ファイル(s)	要約
削除された React コンポーネント app/javascript/components/Tags/TagEditButton.jsx, app/javascript/components/Tags/TagEditModal.jsx	タグ編集機能を提供していた 2 つの React コンポーネントを完全に削除。モーダル表示管理、API 通信、フォーム入力処理をサーバーサイドに移行。
サーバーサイド部分テンプレート app/views/shared/_tag_edit_button.html.slim	新しい Slim テンプレートとしてタグ編集 UI を実装。admin ユーザーの場合のみ表示し、モーダル構造、入力フォーム、操作ボタンを含む。
ビューファイルの更新 app/views/pages/index.html.slim, app/views/questions/index.html.slim, app/views/users/index.html.slim	React コンポーネント呼び出しから部分テンプレート呼び出しに変更。条件分岐ロジックを部分テンプレート側に移動し、パラメータ名を camelCase から snake_case に統一。

推定コードレビュー工数

🎯 3 (Moderate) | ⏱️ ~20 分

関連の可能性がある課題

• Tags（タグ編集）を非React化する #9798: 本 PR はこの課題の主要な目標である「タグ編集機能を React から Rails view + バニラ JS に移行する」を直接実現しています。TagEditButton と TagEditModal の削除および _tag_edit_button.html.slim の作成が課題の要件に対応。

関連の可能性がある PR

• タグ機能を非React化 #8881: 同様にタグ関連 UI を React からサーバーサイド/バニラ JS へリファクタリングしており、本 PR と同じ非 React 化の方向性を共有しています。

詩

🐰 React のコンポーネント、さようなら！
Rails のテンプレートで新しい春
モーダルもフォームも Slim に優雅に
タグ編集は今、サーバーの手で踊る ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR addresses #9798 by removing React components (TagEditButton.jsx, TagEditModal.jsx) and replacing with Slim template and vanilla JS, updating three view files. However, TagsInput.jsx migration (also required in #9798) is deferred to a separate issue.	This PR is a partial implementation of #9798. Verify that deferring TagsInput.jsx to a separate issue aligns with project requirements and that the partial completion is intentional.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: converting TagEditButton and TagEditModal from React to non-React implementation.
Description check	✅ Passed	The PR description includes Issue reference, overview, detailed change list, and important notes. However, it lacks verification/testing instructions and screenshots as specified in the template.
Out of Scope Changes check	✅ Passed	All changes are directly related to migrating TagEditButton and TagEditModal from React to non-React implementation as specified in #9798. No out-of-scope changes detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch de-react-tag-edit

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/views/pages/index.html.slim`:
- Around line 20-21: Wrap the entire li.page-header-actions__item in the same
condition that determines whether the 'shared/tag_edit_button' partial is shown
so an empty <li> is not rendered for non-admins; locate the li containing the
render 'shared/tag_edit_button' (and references to `@tag.id` / `@tag.name`) and move
the visibility check (e.g., the admin/permission check or helper like
can_edit_tag?) to the outer element so the li is only emitted when the partial
will actually render.

In `@app/views/shared/_tag_edit_button.html.slim`:
- Line 22: cancel-change-tag-button は div になっているためキーボードでフォーカス/実行できません。Slim
の該当要素（クラス cancel-change-tag-button / card-main-actions__muted-action）を div から
button[type="button"] に置き換え、保存ボタンと同様に button
要素として実装してテキスト「キャンセル」を維持し、type="button" を必ず指定してフォーム送信を防いでください。

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f45aa38b-130d-4f75-9adb-2b2e012a39dc

📥 Commits

Reviewing files that changed from the base of the PR and between 0669728 and 86b10da.

📒 Files selected for processing (6)

• app/javascript/components/Tags/TagEditButton.jsx
• app/javascript/components/Tags/TagEditModal.jsx
• app/views/pages/index.html.slim
• app/views/questions/index.html.slim
• app/views/shared/_tag_edit_button.html.slim
• app/views/users/index.html.slim

💤 Files with no reviewable changes (2)

• app/javascript/components/Tags/TagEditModal.jsx
• app/javascript/components/Tags/TagEditButton.jsx