feat: Introduce SettingList component for setting page UI

[ironAiken2]

This PR Resolves #2209 issue, revamping Setting-related components.

The modifications to the UserSettingPage component serve as an example of how to use the SettingList component. If the PR is approved, will roll back these changes.

Features

Edit tasklist title

Beta Give feedback Tasklist Features, more options

• Rename
• Copy markdown
• Delete tasklist

Delete tasklist

Delete tasklist block?

Are you sure? All relationships in this tasklist will be removed.

Cancel Delete

1. Separate components into SettingPage and SettingPageItem to manage each option item through the settingOption array.

   Separate components into SettingPage and SettingPageItem to manage each option item through the settingOption array.
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
2. Added function to filter for specific options via search.

   Added function to filter for specific options via search.
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
3. Show and reset icons for non-default settings

   Show and reset icons for non-default settings
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
4. Filter to show only overridden items

   Filter to show only overridden items
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
5. Display the number of filtered option items

   Display the number of filtered option items
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove

Add item to Features

UI Changes

Edit tasklist title

Beta Give feedback Tasklist UI Changes, more options

• Rename
• Copy markdown
• Delete tasklist

Delete tasklist

Delete tasklist block?

Are you sure? All relationships in this tasklist will be removed.

Cancel Delete

1. Modified to place each option item in a single horizontal column.

   Modified to place each option item in a single horizontal column.
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
2. Add an Input component for search

   Add an Input component for search
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
3. Use the Antd badge to distinguish changed options.

   Use the Antd badge to distinguish changed options.
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove

Add item to UI Changes

Checklist: (if applicable)

How to use

/parents component

1. Define each option (type : { title: string; options: SettingItemProps[]}[] )
2. Pass that data to the SettingList component as a property.

• Mention to the original issue
• Documentation
• Minium required manager version
• Specific setting for review (eg., KB link, endpoint or how to setup)
• Minimum requirements to check during review
• Test case(s) to demonstrate the difference of before/after

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2212.d3g9cs6u59b8lw.amplifyapp.com

[agatha197]

@ironAiken2 please resolve the conflicts :)

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	2.93% (-0.04% 🔻)	102/3486
🔴	Branches	3.1% (-0.05% 🔻)	69/2229
🔴	Functions	1.45% (-0.02% 🔻)	17/1175
🔴	Lines	2.98% (-0.04% 🔻)	102/3422

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / SettingItem.tsx	0%	0%	0%	0%
🔴	... / SettingList.tsx	0%	0%	0%	0%

Test suite run success

20 tests passing in 4 suites.

Report generated by 🧪jest coverage report action from 517439a

[yomybaby]

Thank you for your contribution. I pushed several commits to improve layout and composability. Now, the setting components introduced in this PR are ready to be merged. We need to convert backend-ai-settings-store.ts into a React hook while maintaining compatibility before using these components for the User setting page.

[yomybaby]

I rolled back UserSettingsPage and renamed the new version to UserSettingsPage2. After the setting React hook is ready, let's apply UserSettingsPage2. Therefore, this PR does not have any impact on the WebUI yet. @agatha197 @ironAiken2

I approve this PR and merge.

[yomybaby]

🤯 Oh! I forgot to push a commit for rollback. I'll make another PR to fix it and merge.