Secret input auto complete

[Salman2301]

Description 📣

Improve secret input component auto complete, lint and error validations

• Move to react query
• Use Radix component for portal, scroll and keyboard navigation popup
• Refactor onChange?
• Fix popup position on overview (Maybe move to radix component will fix it)
• Invalidate Input on improper reference
• Escape [dot] character
• Highlight different color for env, folders and secrets? (Different color can be too heavy skipping for now)
• invalidate / . in environment slug

Type ✨

• Bug fix
• New feature
• Breaking change
• Documentation

Tests 🛠️

output_video.mp4

# Here's some code block to paste some code snippets

---

• I have read the contributing guide, agreed and acknowledged the code of conduct. 📝

[Salman2301]

This is ready for review

[Grraahaam]

The result looks great! This will be really useful! Well done 👏🏽

[Salman2301]

The UI in the video is kind of outdated after moved to Radix component.
Will update it later

[Salman2301]

Using Radix component... looks better in secret overview cause of portal I believe but input get out of focus on this version everytime it's popup
https://github.com/Infisical/infisical/assets/40920317/ea0e6303-92f8-43c4-bcc4-571657b9c2f6

[maidul98]

@Salman2301 wow this looks great! @akhilmhdh can you please help @Salman2301 get this into main?

[akhilmhdh]

Let me know after the changes has been made. Ill test more of the edge cases and ill try to simplify the whole code

[vmatsiiako]

Hey guys! Really excited about this PR! When are you thinking to merge this?

[Grraahaam]

Hey @Salman2301, are you still working on this? It sure looks really useful!

[sheensantoscapadngan]

Hey @Salman2301! I'd like to work on top of this and help you finally resolve this PR. I'll be pushing a few changes in a bit.

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
-		Generic Password	fb69236	.env.example	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

<sup>🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!</sup>

[sheensantoscapadngan]

2024-04-24.01-45-00.mp4

[maidul98]

Great work!