[HomePage] Add recent work section and additional styling for home page #6277

abbyhu2000 · 2024-03-27T15:02:19Z

Description

This PR implements:

Re-styling of the home page when advanced settinghome:useNewHomePage is toggled on. Mocks are here: [Home Page] Add recently viewed section to home page #6066
Add a recent work section with max 8 cards; any dashboard, visualization, saved search that are accessed will be added to the recent work. The most recent one will show up as the first. Each recent work card has work item name, type and last updated time.
If observability plugin is installed, it will show an extra card for observability in Start working with data section

Issues Resolved

partially resolves #6066

Screenshot

Home page toggle
https://github.com/opensearch-project/OpenSearch-Dashboards/assets/43937633/7b700395-e1cd-4572-b81c-7f24b5aee8fd
New home page without observability plugin

New home page with observability plugin

Section styling and links
https://github.com/opensearch-project/OpenSearch-Dashboards/assets/43937633/821d8aa4-e988-4adf-9556-2e05a76eef08
Recent work section
https://github.com/opensearch-project/OpenSearch-Dashboards/assets/43937633/7aeaa20e-8d0a-4284-b5f7-c55dde949d4a

Changelog

feat: Add recent work section and additional styling for home page

codecov · 2024-03-27T15:19:36Z

Codecov Report

Attention: Patch coverage is 61.29032% with 24 lines in your changes missing coverage. Please review.

Project coverage is 67.67%. Comparing base (774f64e) to head (2bfa070).

Files	Patch %	Lines
...tion/components/homepage/sections/learn_basics.tsx	14.28%	6 Missing ⚠️
...on/components/homepage/sections/work_with_data.tsx	57.14%	4 Missing and 2 partials ⚠️
...ome/recently_accessed/recently_accessed_service.ts	28.57%	4 Missing and 1 partial ⚠️
...ation/components/homepage/sections/recent_work.tsx	84.61%	1 Missing and 1 partial ⚠️
...ublic/application/components/homepage/homepage.tsx	0.00%	1 Missing ⚠️
src/plugins/home/public/mocks/mocks.ts	92.30%	0 Missing and 1 partial ⚠️
...application/utils/use/use_saved_vis_builder_vis.ts	0.00%	1 Missing ⚠️
..._builder/public/saved_visualizations/_saved_vis.ts	0.00%	1 Missing ⚠️
...ic/application/utils/use/use_saved_vis_instance.ts	50.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6277      +/-   ##
==========================================
+ Coverage   67.55%   67.67%   +0.11%     
==========================================
  Files        3469     3470       +1     
  Lines       68479    68513      +34     
  Branches    11130    11130              
==========================================
+ Hits        46264    46368     +104     
+ Misses      19512    19425      -87     
- Partials     2703     2720      +17

Flag	Coverage Δ
Linux_1	`33.11% <8.69%> (-0.02%)`	⬇️
Linux_2	`55.25% <28.57%> (-0.02%)`	⬇️
Linux_3	`45.27% <7.14%> (-0.05%)`	⬇️
Linux_4	`34.96% <60.34%> (+0.24%)`	⬆️
Windows_1	`33.13% <8.69%> (-0.02%)`	⬇️
Windows_2	`55.20% <28.57%> (-0.02%)`	⬇️
Windows_3	`45.28% <7.14%> (-0.04%)`	⬇️
Windows_4	`34.96% <60.34%> (+0.24%)`	⬆️

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.

ashwin-pc

Two things i want to call out here:

How do i see the recently accessed section? Pulling down the PR and loading the new homepage does not have this section. Also can you add a screenshot to the PR so that people who dont pull down the change can see it too?
You are modifying the architecture of the section component. That seems unnecessary for the filter but want to hear more on why you think the option you proposed is the best way to do it and what are the other alternitives you've tried.

src/plugins/discover/public/application/view_components/utils/use_search.ts

src/plugins/home/public/application/components/homepage/footer.tsx

src/plugins/home/public/application/components/homepage/section.tsx

abbyhu2000 · 2024-04-02T03:28:04Z

Added a comment here about the necessity of adding a filter button on the recent work section: #6066 (comment)

Changed the rendering structure of section back to previous way.

src/plugins/discover/public/application/view_components/utils/use_search.ts

src/core/public/chrome/recently_accessed/recently_accessed_service.ts

src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts

src/plugins/home/public/application/components/homepage/sections/recent_work.tsx

BionIT · 2024-06-05T03:35:11Z

Hi @abbyhu2000 , is this PR targeting 2.15 or 2.16?

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

SuZhou-Joe · 2024-07-09T02:57:02Z

src/core/public/chrome/recently_accessed/recently_accessed_service.ts

+        if (extraProps) {
+          const type = extraProps!.type;
+          const updatedAt = extraProps!.updatedAt;
+          history.add({
+            link,
+            label,
+            id,
+            ...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),
+            type,
+            updatedAt,
+          });
+        } else {
+          history.add({
+            link,
+            label,
+            id,
+            ...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),
+          });
+        }


Suggested change

if (extraProps) {

const type = extraProps!.type;

const updatedAt = extraProps!.updatedAt;

history.add({

link,

label,

id,

...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),

type,

updatedAt,

});

} else {

history.add({

link,

label,

id,

...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),

});

}

history.add({

link,

label,

id,

...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),

...extraProps,

});

What about we simplifying the code like this?

SuZhou-Joe · 2024-07-09T03:08:28Z

src/plugins/home/public/application/components/homepage/sections/recent_work.tsx

+const render = renderFn(() => {
+  const services = getServices();
+  const navigateToUrl = services.application.navigateToUrl;
+  const recentAccessed = useObservable(services.chrome.recentlyAccessed.get$(), []);


I suppose the correct order here should be:

Filter by type

Slice to no more than 8 items

render the items

SuZhou-Joe · 2024-07-09T03:11:17Z

src/plugins/saved_objects/public/saved_object/helpers/save_saved_object.ts

+        savedObject.getOpenSearchType(),
+        moment(Date.now()).format('MM/DD/YYYY HH:mm')


Suggested change

savedObject.getOpenSearchType(),

moment(Date.now()).format('MM/DD/YYYY HH:mm')

{ type: savedObject.getOpenSearchType(), updateAt: Date.now() }

Should be like this?

SuZhou-Joe · 2024-07-09T03:12:18Z

src/plugins/vis_builder/public/application/utils/use/use_saved_vis_builder_vis.ts

@@ -74,6 +74,13 @@ export const useSavedVisBuilderVis = (visualizationIdFromUrl: string | undefined
          data.query.filterManager.setAppFilters(actualFilters);
          data.query.queryString.setQuery(query);

+          chrome.recentlyAccessed.add(


Seems the call does not comply with the interface of chrome.recentlyAccessed.add.

ashwin-pc

Did a cursory review. Have some questions about the implementation details but given that we are going a different direction with the homepage, do we still need this PR?

ashwin-pc · 2024-07-09T08:45:26Z

src/core/public/chrome/recently_accessed/recently_accessed_service.ts

+  type?: string;
+  updatedAt?: number;


nit: It would be nice to maintain the same shape here. Either lets use extraProps in both places or not.

ashwin-pc · 2024-07-09T08:48:02Z

src/plugins/visualize/public/application/utils/use/use_saved_vis_instance.ts

+          if (visualizationIdFromUrl) {
+            chrome.recentlyAccessed.add(
+              savedVisInstance.savedVis.getFullPath(),
+              savedVisInstance.savedVis.title,
+              visualizationIdFromUrl,
+              { type: savedVisInstance.savedVis.getOpenSearchType(), updatedAt: Date.now() }
+            );
+          }


why do we need this? without this how does Recently Accessed work?

ashwin-pc · 2024-07-09T08:53:20Z

src/plugins/vis_builder/public/saved_visualizations/_saved_vis.ts

@@ -51,6 +51,7 @@ export function createSavedVisBuilderVisClass(services: SavedObjectOpenSearchDas
      });
      this.showInRecentlyAccessed = true;
      this.getFullPath = () => `/app/${PLUGIN_ID}${EDIT_PATH}/${this.id}`;
+      this.getOpenSearchType = () => VISBUILDER_SAVED_OBJECT;


Do we need this? I dont see any other saved object doing it this way

ashwin-pc · 2024-07-09T08:55:34Z

src/core/public/chrome/recently_accessed/recently_accessed_service.ts

+        link: string,
+        label: string,
+        id: string,
+        extraProps?: { type?: string; updatedAt?: number }


Is updatedAt needed? Cant we automatically update that value when the add function is called?

ashwin-pc · 2024-07-09T08:56:22Z

src/plugins/discover/public/application/view_components/utils/use_search.ts

@@ -82,6 +82,7 @@ export const useSearch = (services: DiscoverViewServices) => {
    core,
    toastNotifications,
    osdUrlStateStorage,
+    chrome,


you arent using this in this file

SuZhou-Joe · 2024-07-10T05:45:47Z

@ashwin-pc At least the recent items section is still needed.

ananzh · 2024-07-23T16:53:38Z

@abbyhu2000 is this still 2.16?

abbyhu2000 · 2024-07-25T17:34:55Z

This doesn't target 2.16 anymore. Will close

github-actions bot added the distinguished-contributor label Mar 27, 2024

abbyhu2000 changed the title ~~Add recent work section and additional styling for home page~~ [HomePage] Add recent work section and additional styling for home page Mar 27, 2024

ashwin-pc reviewed Mar 28, 2024

View reviewed changes

abbyhu2000 commented Mar 28, 2024

View reviewed changes

src/plugins/home/public/application/components/homepage/section.tsx Show resolved Hide resolved

abbyhu2000 marked this pull request as ready for review April 1, 2024 23:50

abbyhu2000 requested review from ananzh, kavilla, AMoo-Miki, joshuarrrr, zengyan-amazon, zhongnansu, manasvinibs, ZilongX, Flyingliuhub, BSFishy, curq, bandinib-amzn, SuZhou-Joe, ruanyl, BionIT and xinruiba as code owners April 1, 2024 23:50

SuZhou-Joe reviewed Apr 8, 2024

View reviewed changes

src/plugins/discover/public/application/view_components/utils/use_search.ts Outdated Show resolved Hide resolved

abbyhu2000 force-pushed the home_page_recent_work branch 2 times, most recently from c1d0d0b to ef3e843 Compare May 8, 2024 23:34

SuZhou-Joe reviewed May 14, 2024

View reviewed changes

src/core/public/chrome/recently_accessed/recently_accessed_service.ts Outdated Show resolved Hide resolved

SuZhou-Joe reviewed May 14, 2024

View reviewed changes

src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts Outdated Show resolved Hide resolved

SuZhou-Joe reviewed May 14, 2024

View reviewed changes

src/plugins/home/public/application/components/homepage/sections/recent_work.tsx Outdated Show resolved Hide resolved

yujin-emma assigned AMoo-Miki May 28, 2024

abbyhu2000 force-pushed the home_page_recent_work branch from ef3e843 to 8e68eef Compare June 25, 2024 23:38

abbyhu2000 requested review from zhyuanqi and mengweieric as code owners June 25, 2024 23:38

github-actions bot added failed changeset and removed failed changeset labels Jun 26, 2024

opensearch-changeset-bot bot added a commit to abbyhu2000/OpenSearch-Dashboards that referenced this pull request Jun 26, 2024

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

7d03e73

abbyhu2000 force-pushed the home_page_recent_work branch from 7d03e73 to 2fa121e Compare June 26, 2024 00:46

opensearch-changeset-bot bot added a commit to abbyhu2000/OpenSearch-Dashboards that referenced this pull request Jun 26, 2024

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

0661bdd

abbyhu2000 requested a review from LDrago27 as a code owner June 26, 2024 21:10

abbyhu2000 added home v2.16.0 backport 2.x labels Jun 26, 2024

new homepage with recent access section

ebab353

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

abbyhu2000 force-pushed the home_page_recent_work branch from 43d0169 to ebab353 Compare July 8, 2024 21:46

opensearch-project deleted a comment from github-actions bot Jul 8, 2024

abbyhu2000 added 2 commits July 8, 2024 22:29

fix unit test

1f5e2af

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

fix more unit tests

2bfa070

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

SuZhou-Joe reviewed Jul 9, 2024

View reviewed changes

ashwin-pc reviewed Jul 9, 2024

View reviewed changes

ananzh removed the v2.16.0 label Jul 25, 2024

abbyhu2000 closed this Jul 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HomePage] Add recent work section and additional styling for home page #6277

[HomePage] Add recent work section and additional styling for home page #6277

abbyhu2000 commented Mar 27, 2024 •

edited

Loading

codecov bot commented Mar 27, 2024 •

edited

Loading

ashwin-pc left a comment

abbyhu2000 commented Apr 2, 2024

BionIT commented Jun 5, 2024

SuZhou-Joe Jul 9, 2024 •

edited

Loading

SuZhou-Joe Jul 9, 2024

SuZhou-Joe Jul 9, 2024

SuZhou-Joe Jul 9, 2024

ashwin-pc left a comment

ashwin-pc Jul 9, 2024

ashwin-pc Jul 9, 2024

ashwin-pc Jul 9, 2024

ashwin-pc Jul 9, 2024

ashwin-pc Jul 9, 2024

SuZhou-Joe commented Jul 10, 2024

ananzh commented Jul 23, 2024

abbyhu2000 commented Jul 25, 2024

		savedObject.getOpenSearchType(),
		moment(Date.now()).format('MM/DD/YYYY HH:mm')

	savedObject.getOpenSearchType(),
	moment(Date.now()).format('MM/DD/YYYY HH:mm')
	{ type: savedObject.getOpenSearchType(), updateAt: Date.now() }

[HomePage] Add recent work section and additional styling for home page #6277

[HomePage] Add recent work section and additional styling for home page #6277

Conversation

abbyhu2000 commented Mar 27, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Changelog

codecov bot commented Mar 27, 2024 • edited Loading

Codecov Report

ashwin-pc left a comment

Choose a reason for hiding this comment

abbyhu2000 commented Apr 2, 2024

BionIT commented Jun 5, 2024

SuZhou-Joe Jul 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ashwin-pc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SuZhou-Joe commented Jul 10, 2024

ananzh commented Jul 23, 2024

abbyhu2000 commented Jul 25, 2024

abbyhu2000 commented Mar 27, 2024 •

edited

Loading

codecov bot commented Mar 27, 2024 •

edited

Loading

SuZhou-Joe Jul 9, 2024 •

edited

Loading