[Workspace] Refactor the style of recent items card in the header #7805

Qxisylolo · 2024-08-22T09:11:09Z

Description

In this pr, I refactor the style of recent items card in the header by

Enable maxHeight; if exceeded, the menu will become scrollable.
Display associated icons.
The workspace name will be attached to the asset.
Allow setting preferences for the number of recent items displayed.

Screenshot

Screen.Recording.2024-08-22.at.17.11.50.mov

empty state

Changelog

feat: refractor the style of recent items card

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

src/core/public/chrome/chrome_service.tsx

codecov · 2024-08-22T09:38:02Z

Codecov Report

Attention: Patch coverage is 86.11111% with 5 lines in your changes missing coverage. Please review.

Project coverage is 64.30%. Comparing base (a59f8ab) to head (69fb6d5).
Report is 59 commits behind head on main.

Files with missing lines	Patch %	Lines
src/core/public/chrome/ui/header/recent_items.tsx	86.11%	4 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7805      +/-   ##
==========================================
+ Coverage   63.83%   64.30%   +0.47%     
==========================================
  Files        3658     3674      +16     
  Lines       81284    81166     -118     
  Branches    12972    12932      -40     
==========================================
+ Hits        51884    52197     +313     
+ Misses      26216    25756     -460     
- Partials     3184     3213      +29

Flag	Coverage Δ
Linux_1	`30.20% <8.33%> (+0.04%)`	⬆️
Linux_2	`56.22% <86.11%> (+0.34%)`	⬆️
Linux_3	`40.59% <8.33%> (+0.17%)`	⬆️
Linux_4	`31.39% <8.33%> (+0.10%)`	⬆️
Windows_1	`30.22% <8.33%> (+0.04%)`	⬆️
Windows_2	`56.17% <86.11%> (+0.34%)`	⬆️
Windows_3	`40.60% <8.33%> (+0.18%)`	⬆️
Windows_4	`31.39% <8.33%> (+0.10%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

raintygao · 2024-08-22T09:30:23Z

src/core/public/chrome/ui/header/recent_items.tsx

+    workspaceName?: string;
+  };
+
+export const bulkGetDetail = (


What about move this into a utils file and rename to some others like bulkGetSavedObjectsDetail, which could better indicate the effect of this function. And we don't need to export if nowhere imports this.

Thanks for the review, I delete export and I think it's better to keep it here as the required type SavedObjectWithMetadata has the import restriction. Here I just simply duplicate it in the file. [ Unexpected path "src/plugins/saved_objects_management/common/types" imported in restricted zone.]

src/core/public/chrome/ui/header/recent_items.tsx

Signed-off-by: Qxisylolo <[email protected]>

src/core/public/chrome/ui/header/header.tsx

src/core/public/chrome/ui/header/recent_items.tsx

ruanyl · 2024-08-26T01:20:35Z

src/core/public/chrome/ui/header/recent_items.tsx

+      }));
+
+    if (savedObjects.length) {
+      bulkGetDetail(savedObjects, http).then((res) => {


Why should it call this API to get the details? Isn't items from recentlyAccessed$ already have saved object title, type and workspace id?

Hi, Thanks for your review, we call the API to get the associated icon

SuZhou-Joe · 2024-08-26T01:36:07Z

src/core/public/chrome/ui/header/recent_items.tsx

-    // Only display five most recent items
-    return recentlyAccessedItems.slice(0, 5).map((item) => {
-      return {
-        link: createRecentNavLink(item, navLinks, basePath, navigateToUrl).href,


Seems we removed the createRecentNavLink import, but the link should be generated from it. It handles with the workspace id in path.

Hi, thanks for your review，I delete it since we could directly access link from recentlyAccessedItems

But that link is not correct as it does not contain workspace info.

updated. Thank you

Signed-off-by: Qxisylolo <[email protected]>

ruanyl · 2024-09-02T03:38:04Z

src/core/public/chrome/ui/header/recent_items.tsx

+    savedObjects.map((obj) =>
+      http
+        .get<SavedObjectWithMetadata>(
+          `/api/opensearch-dashboards/management/saved_objects/${encodeURIComponent(


I'm not fully "comfortable" with calling a plugin API from a core module though the API is exposed by a core plugin.

But I've seen the saved object management API path /management/opensearch-dashboards has already been used in multiple places, so I'm fine with it now.

In my opinion, perhaps this recent visited button should be owned by saved object management plugin because it's all about recently visited saved objects, I don't see a strong correlation between chrome module and the recently visited items, to my understanding, it's just another registration point that saved objects management plugin contributes to.

cc @SuZhou-Joe @AMoo-Miki

Agree, things will look more in place if we can register the recent items to the left of the breadcrumbs within saved objects management plugin.

) * feature/refractor-style-of-recent-items Signed-off-by: Qxisylolo <[email protected]> * solve bugs and delete annotation Signed-off-by: Qxisylolo <[email protected]> * solve bugs Signed-off-by: Qxisylolo <[email protected]> * fix bugs Signed-off-by: Qxisylolo <[email protected]> * fix bugs-1 Signed-off-by: Qxisylolo <[email protected]> * fix bugs-delete-lines Signed-off-by: Qxisylolo <[email protected]> * fix refine-popover-padding Signed-off-by: Qxisylolo <[email protected]> * fix, add createRecentNavLink Signed-off-by: Qxisylolo <[email protected]> * Changeset file for PR #7805 created/updated --------- Signed-off-by: Qxisylolo <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit a7024e6) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

) (#7966) * feature/refractor-style-of-recent-items * solve bugs and delete annotation * solve bugs * fix bugs * fix bugs-1 * fix bugs-delete-lines * fix refine-popover-padding * fix, add createRecentNavLink * Changeset file for PR #7805 created/updated --------- (cherry picked from commit a7024e6) Signed-off-by: Qxisylolo <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

github-actions bot added the repeat-contributor label Aug 22, 2024

opensearch-changeset-bot bot added a commit to Qxisylolo/OpenSearch-Dashboards that referenced this pull request Aug 22, 2024

Changeset file for PR opensearch-project#7805 created/updated

c2b4652

raintygao reviewed Aug 22, 2024

View reviewed changes

src/core/public/chrome/chrome_service.tsx Outdated Show resolved Hide resolved

src/core/public/chrome/chrome_service.tsx Outdated Show resolved Hide resolved

Qxisylolo force-pushed the feature/refractor-style-of-recent-items branch from c2b4652 to 451ff49 Compare August 22, 2024 09:40

raintygao reviewed Aug 22, 2024

View reviewed changes

opensearch-changeset-bot bot added a commit to Qxisylolo/OpenSearch-Dashboards that referenced this pull request Aug 22, 2024

Changeset file for PR opensearch-project#7805 created/updated

6377112

Qxisylolo force-pushed the feature/refractor-style-of-recent-items branch from 6377112 to 8802d75 Compare August 22, 2024 10:30

Qxisylolo marked this pull request as ready for review August 23, 2024 03:14

Qxisylolo requested review from sejli and joshuali925 as code owners August 23, 2024 03:14

Qxisylolo added 5 commits August 23, 2024 13:04

feature/refractor-style-of-recent-items

b607813

Signed-off-by: Qxisylolo <[email protected]>

solve bugs and delete annotation

e679066

Signed-off-by: Qxisylolo <[email protected]>

solve bugs

9d358b6

Signed-off-by: Qxisylolo <[email protected]>

fix bugs

f58a7bf

Signed-off-by: Qxisylolo <[email protected]>

fix bugs-1

d9d1ff6

Signed-off-by: Qxisylolo <[email protected]>

Qxisylolo force-pushed the feature/refractor-style-of-recent-items branch from 8802d75 to d9d1ff6 Compare August 23, 2024 05:39

SuZhou-Joe reviewed Aug 26, 2024

View reviewed changes

src/core/public/chrome/ui/header/header.tsx Outdated Show resolved Hide resolved

SuZhou-Joe reviewed Aug 26, 2024

View reviewed changes

src/core/public/chrome/ui/header/recent_items.tsx Show resolved Hide resolved

ruanyl reviewed Aug 26, 2024

View reviewed changes

SuZhou-Joe reviewed Aug 26, 2024

View reviewed changes

Qxisylolo added 3 commits August 27, 2024 09:49

fix bugs-delete-lines

1235c92

Signed-off-by: Qxisylolo <[email protected]>

fix refine-popover-padding

c3f1f41

Signed-off-by: Qxisylolo <[email protected]>

fix, add createRecentNavLink

6cf76a5

Signed-off-by: Qxisylolo <[email protected]>

Qxisylolo changed the title ~~[Workspace] refractor the style of recent items card in the header~~ [Workspace] Refactor the style of recent items card in the header Aug 29, 2024

Changeset file for PR opensearch-project#7805 created/updated

69fb6d5

SuZhou-Joe approved these changes Aug 30, 2024

View reviewed changes

ruanyl approved these changes Sep 2, 2024

View reviewed changes

SuZhou-Joe added backport 2.x v2.17.0 navigation labels Sep 3, 2024

SuZhou-Joe merged commit a7024e6 into opensearch-project:main Sep 3, 2024
73 checks passed

opensearch-trigger-bot bot mentioned this pull request Sep 3, 2024

[Backport 2.x] [Workspace] Refactor the style of recent items card in the header #7966

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Workspace] Refactor the style of recent items card in the header #7805

[Workspace] Refactor the style of recent items card in the header #7805

Qxisylolo commented Aug 22, 2024 •

edited

Loading

codecov bot commented Aug 22, 2024 •

edited

Loading

raintygao Aug 22, 2024

Qxisylolo Aug 22, 2024

ruanyl Aug 26, 2024 •

edited

Loading

Qxisylolo Aug 26, 2024

SuZhou-Joe Aug 26, 2024 •

edited

Loading

Qxisylolo Aug 26, 2024 •

edited

Loading

SuZhou-Joe Aug 27, 2024

Qxisylolo Aug 27, 2024 •

edited

Loading

ruanyl Sep 2, 2024

SuZhou-Joe Sep 3, 2024

[Workspace] Refactor the style of recent items card in the header #7805

[Workspace] Refactor the style of recent items card in the header #7805

Conversation

Qxisylolo commented Aug 22, 2024 • edited Loading

Description

Screenshot

Changelog

Check List

codecov bot commented Aug 22, 2024 • edited Loading

Codecov Report

raintygao Aug 22, 2024

Choose a reason for hiding this comment

Qxisylolo Aug 22, 2024

Choose a reason for hiding this comment

ruanyl Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

Qxisylolo Aug 26, 2024

Choose a reason for hiding this comment

SuZhou-Joe Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

Qxisylolo Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

SuZhou-Joe Aug 27, 2024

Choose a reason for hiding this comment

Qxisylolo Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

ruanyl Sep 2, 2024

Choose a reason for hiding this comment

SuZhou-Joe Sep 3, 2024

Choose a reason for hiding this comment

Qxisylolo commented Aug 22, 2024 •

edited

Loading

codecov bot commented Aug 22, 2024 •

edited

Loading

ruanyl Aug 26, 2024 •

edited

Loading

SuZhou-Joe Aug 26, 2024 •

edited

Loading

Qxisylolo Aug 26, 2024 •

edited

Loading

Qxisylolo Aug 27, 2024 •

edited

Loading