Configuration: Added the Config ID in Config Card

[Ayush8923]

Summary

• Added the config ID in the config card so that user can easily copy the config ID.

Summary by CodeRabbit

• New Features
  • Config ID is now visible in the expanded configuration details view.
  • Added a copy button for the Config ID with visual feedback confirming successful or failed copy operations.

[coderabbitai]

📝 Walkthrough

Walkthrough

ConfigCard component adds clipboard copy functionality with toast notifications. It imports icon components and the useToast hook, implements a handleCopyId callback for copying the config ID with success/error feedback, and adds a new UI row displaying the config ID with a copy button that provides visual confirmation.

Changes

Copy Config ID Feature

Layer / File(s)	Summary
Dependencies and Imports app/components/ConfigCard.tsx	Adds CheckIcon, CopyIcon imports, and imports useToast hook for toast notifications.
State and Copy Handler app/components/ConfigCard.tsx	Initializes useToast hook, introduces copiedId state to track copy status, and implements handleCopyId callback that copies config ID to clipboard with success/error toast messages and auto-reset after 2 seconds.
Config ID Display and Copy Button app/components/ConfigCard.tsx	Renders expanded config ID row with icon button that toggles between CopyIcon and CheckIcon based on copiedId state when clicked.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A copy button hops into view,
With icons that change when you're through—
Toast messages chime, success or fail,
Config IDs copy without travail! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding Config ID display to the Config Card component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 hotfix/add-config-id

---

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: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/components/ConfigCard.tsx`:
- Around line 251-256: The icon-only copy button in ConfigCard.tsx (the button
with onClick={handleCopyId}) relies only on title for accessibility; add an
explicit accessible name by adding aria-label="Copy Config ID" to that button
element so screen readers announce the action reliably.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ac19b8c2-4e1f-4d48-9833-22251cdb09cf

📥 Commits

Reviewing files that changed from the base of the PR and between 89d6fbd and 0235724.

📒 Files selected for processing (1)

• app/components/ConfigCard.tsx

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add an explicit accessible name to the icon-only copy button.

At Line 251, the button relies on title (Line 255). Please add aria-label="Copy Config ID" so screen readers announce the action reliably.

Suggested patch

                 <button
                   type="button"
                   onClick={handleCopyId}
                   className="ml-auto p-1 rounded-md transition-colors shrink-0 cursor-pointer hover:bg-neutral-200"
                   title="Copy Config ID"
+                  aria-label="Copy Config ID"
                 >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<button
	type="button"
	onClick={handleCopyId}
	className="ml-auto p-1 rounded-md transition-colors shrink-0 cursor-pointer hover:bg-neutral-200"
	title="Copy Config ID"
	>
	<button
	type="button"
	onClick={handleCopyId}
	className="ml-auto p-1 rounded-md transition-colors shrink-0 cursor-pointer hover:bg-neutral-200"
	title="Copy Config ID"
	aria-label="Copy Config ID"
	>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/ConfigCard.tsx` around lines 251 - 256, The icon-only copy
button in ConfigCard.tsx (the button with onClick={handleCopyId}) relies only on
title for accessibility; add an explicit accessible name by adding
aria-label="Copy Config ID" to that button element so screen readers announce
the action reliably.