feat(favorite/recent): implement new favorite/recent feature (with vue query)#6136
Conversation
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 3 Skipped Deployments
|
|
🎉 @skdud4659 has been randomly selected as the reviewer! Please review. 🙏 |
There was a problem hiding this comment.
Pull Request Overview
This pull request implements a new favorite/recent feature using Vue Query for better data management and performance. The implementation replaces the existing Vuex store-based favorite and recent functionality with a more modern approach using composables and Vue Query.
- Refactors favorite and recent data management from Vuex stores to Vue Query-based composables
- Introduces new config-data conversion utilities for better data transformation
- Adds comprehensive recent list management with type-specific queries
Reviewed Changes
Copilot reviewed 37 out of 37 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/language-pack/*.json | Adds new translation key "ALL_METRIC" and fixes typos in existing translations |
| apps/web/src/services/workspace-home/components/*.vue | Updates to use new favorite/recent composables instead of store |
| apps/web/src/services/landing/components/*.vue | Migrates landing page components to new workspace favorite system |
| apps/web/src/common/modules/favorites/core/*.ts | New favorite management composables using Vue Query |
| apps/web/src/common/modules/recents/*.ts | New recent list management with CRUD operations |
| apps/web/src/common/composables/config-data/*.ts | New config data conversion utilities |
| apps/web/src/query/resource-query/shared/composable/*.ts | Updates resource cache sync functionality |
Comments suppressed due to low confidence (2)
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
| projects: computed<ProjectReferenceMap>(() => allReferenceGetters.project), | ||
| projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceGetters.projectGroup), | ||
| recentList: computed<UserConfigModel[]>(() => workspaceHomePageState.recentList), | ||
| // recentList: computed<UserConfigModel[]>(() => workspaceHomePageState.recentList), |
There was a problem hiding this comment.
Remove the commented-out code as it's no longer needed and creates clutter in the codebase.
| // recentList: computed<UserConfigModel[]>(() => workspaceHomePageState.recentList), |
| await _updateResourceCache(resourceType, res as Obj, queryClient); | ||
| return res; | ||
| }; | ||
| // TODO: annotaion |
There was a problem hiding this comment.
There's a typo in the TODO comment: 'annotaion' should be 'annotation'.
| // TODO: annotaion | |
| // TODO: annotation |
| type: RecentType; | ||
| workspaceId: string; | ||
| id: string; | ||
| options?: {[key:string]: any}; |
There was a problem hiding this comment.
[nitpick] Add a space after the colon in the object type definition: '{[key: string]: any}' for better readability and consistency with TypeScript style conventions.
| options?: {[key:string]: any}; | |
| options?: { [key: string]: any }; |
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
| return useScopedQuery({ | ||
| queryKey: key, | ||
| queryFn: () => userConfigAPI.list(queryParams.value), | ||
| enabled: computed(() => { | ||
| if (enabled === undefined) { | ||
| return true; | ||
| } | ||
| return enabled.value; | ||
| }), | ||
| }, ['WORKSPACE', 'USER']); |
There was a problem hiding this comment.
Question: Why doesn't UserConfig have a 'stale time'?
| if (!dataSourceIds.value?.length) return; | ||
| loading.value = true; | ||
| const promises = dataSourceIds.value.map((dataSourceId) => costQuerySetFetcher(dataSourceId)); | ||
| const results = await Promise.all(promises); |
There was a problem hiding this comment.
Question: Shouldn't you use allSettled?
|
|
||
| return { | ||
| map: computed(() => { | ||
| const workspaceMap = new Map<string, WorkspaceModel>(); |
There was a problem hiding this comment.
Question: Is it okay for map objects to be placed in a computed?
| workspaceConfigList?: ComputedRef<ConfigData[]>; | ||
| } | ||
|
|
||
| export const useConvertReferencedConfigData = ({ |
There was a problem hiding this comment.
Question: I couldn't understand that useConvertReferencedConfigData is a composable.
Could it be a composable that provides the recent and favorite config lists all at once for each resource?
There was a problem hiding this comment.
nitpick: The return type is missing.
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
Skip Review (optional)
style,chore,ci,test,docs)Description (optional)
SSIA
Things to Talk About (optional)