update ui component according to designer and add fallback string

[raintygao]

Description

update ui component according to designer and add fallback string

Issues Resolved

List any issues this PR will resolve, e.g. Closes [...].

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[codecov]

Codecov Report

Merging #254 (89714de) into main (9bbd25f) will decrease coverage by 0.13%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main     #254      +/-   ##
==========================================
- Coverage   80.42%   80.29%   -0.13%     
==========================================
  Files          26       26              
  Lines         475      477       +2     
  Branches      103      105       +2     
==========================================
+ Hits          382      383       +1     
  Misses         67       67              
- Partials       26       27       +1     

see 2 files with indirect coverage changes

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-2.x 2.x
# Navigate to the new working tree
cd .worktrees/backport-2.x
# Create a new branch
git switch --create backport/backport-254-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 3cd2fabaea5ff3d007041ec590846d59cff19c24
# Push it to GitHub
git push --set-upstream origin backport/backport-254-to-2.x
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-254-to-2.x.