ADM-763: [frontend] refactor: refactor component

[JiangRu1]

Summary

...

Before

Description

Screenshots
If applicable, add screenshots to help explain behavior of your code.

After

Description

Screenshots
If applicable, add screenshots to help explain behavior of your code.

Note

Null

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.00%	✅ 100.00%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (7641b92)	5533	5533	100.00%
Head commit (1ece2e3)	11070 (+5537)	11070 (+5537)	100.00% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#1008)	4	4	100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{You may notice some variations in coverage metrics with the latest Coverage engine update. For more details, visit the documentation}

[github-actions]

Hi @JiangRu1! 👋
Thank you for submitting a pull request! We appreciate your contribution and will review your changes as soon as possible.

[TingyuDong]

LGTM!