feat: Filtering UI down to Individual test blocks

[g4rry420]

Resolves: #3109

I have considered two ways to add this functionality:

• In first method, we will get index and nestedIndex of items when user clicks on test name and if the that indexes are present then we will show that code block. Potential Issue: If the test file is not formatted properly, i.e, starting and ending of test block on the same line, then it might not work
• Second Method (fallback) - Here, based on the test name, we will search for that test and filter the string block for that test. Potential issue with this fallback method is that if there are two tests with the same name, then it will show the test block whose name comes first in the string.

There is also Codemirror add-ons for code folding which can be useful for this feature, but I haven't taken a deep look into it. https://codemirror.net/docs/ref/#language.foldCode

Video:
https://www.loom.com/share/9fdbf88ef5114b2fa76e45b119b31e61

Disclaimer: I am coming from React background, so I am learning Vue on the go, please let me know if I am missing best practices specific to Vue

Also, when I was trying to make commit, I am facing this eslint error, not sure why that occurred, so I have commited the files with -n flag.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[userquin]

run nr lint in your local, there are a few lint errors, check Files changed tab.

[dammy001]

Can we create a computed property that holds this to avoid duplicate.

[g4rry420]

Sure

[dammy001]

@userquin take a look at this again.

[netlify]

✅ Deploy Preview for fastidious-cascaron-4ded94 canceled.

Name	Link
🔨 Latest commit	6fa3034
🔍 Latest deploy log	https://app.netlify.com/sites/fastidious-cascaron-4ded94/deploys/65a94f1b808a4e0008821e43

[sheremet-va]

This is implemented in #5948