-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: in left menu, move recently viewed from top to middle #87
Conversation
Codecov Report
@@ Coverage Diff @@
## workspace #87 +/- ##
==========================================
Coverage 65.78% 65.78%
==========================================
Files 3334 3334
Lines 64441 64439 -2
Branches 10258 10256 -2
==========================================
+ Hits 42390 42392 +2
+ Misses 19482 19477 -5
- Partials 2569 2570 +1
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 3 files with indirect coverage changes 📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
className="osdCollapsibleNav__recentsListGroup" | ||
/> | ||
) : ( | ||
<EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will we still show No recently viewed items
after this refactor?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No. This edge case for recently visited and favorites needs to be confirmed with UX.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just get to know that No recently viewed items
need to show. I will add it later.
@@ -134,16 +131,10 @@ export function createRecentNavLink( | |||
|
|||
return { | |||
href, | |||
label, | |||
baseUrl: href, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it a correct baseUrl value?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think baseUrl
can be considered as a placeholder rather than a real value. The reason is that Recent ChromeNavLink is only consumed by function createEuiListItem
, where baseUrl
is not used.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK. Can we add some annotations about that? It may be confused.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
baseUrl
is supposed to be the base route used to open the root of an application
, in this case, we are trying to generate ChromeNavLink
from recently accessed url and ofc we don't know what's the root of an application
.
Instead of simply making an conclusion:
Recent ChromeNavLink is only consumed by function createEuiListItem, where baseUrl is not used.
Here is what I'd suggest:
// src/core/public/chrome/ui/header/nav_link.tsx
export type RecentNavLink = Omit<ChromeNavLink, 'baseUrl'>;
export function createRecentChromeNavLink(/*....*/): RecentNavLink {
//...
}
// src/core/public/chrome/ui/header/collapsible_nav.tsx
const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
const allNavLinks: Array<ChromeNavLink | RecentNavLink> = [...navLinks];
const recentlyAccessed = useObservable(observables.recentlyAccessed$, []);
if (recentlyAccessed.length) {
allNavLinks.push(
...recentlyAccessed.map((link) => createRecentChromeNavLink(link, navLinks, basePath))
);
} else {
allNavLinks.push(emptyRecentlyVisited);
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need another type for const emptyRecentlyVisited
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you can use RecentNavLink
I suggested.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since baseUrl
prop in navLinks
is also not consumed, how about declaring the type as CollapsibleNavLink
and then convert navLinks into this type?
// src/core/public/chrome/ui/header/nav_link.tsx
export type CollapsibleNavLink = Omit<ChromeNavLink, 'baseUrl'>;
// src/core/public/chrome/ui/header/collapsible_nav.tsx
const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden)
.map(({ baseUrl, ...collapsibleNavLinkProps }) => collapsibleNavLinkProps);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not necessary, I would suggest you keep the existing code as it is if you can.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, I define a new type ChromeOrRecentNavLink
in my latest commit to refactor the code. Please take a look
// src/core/public/chrome/ui/header/nav_link.tsx
export type ChromeOrRecentNavLink = ChromeNavLink | RecentNavLink;
// src/core/public/chrome/ui/header/collapsible_nav.tsx
function getAllCategories(allCategorizedLinks: Record<string, ChromeOrRecentNavLink[]>) {
...
}
Signed-off-by: yuye-aws <yuyezhu@amazon.com>
Signed-off-by: yuye-aws <yuyezhu@amazon.com>
Signed-off-by: yuye-aws <yuyezhu@amazon.com>
Signed-off-by: yuye-aws <yuyezhu@amazon.com>
@@ -110,12 +109,11 @@ export interface RecentNavLink { | |||
* @param navLinks | |||
* @param basePath | |||
*/ | |||
export function createRecentNavLink( | |||
export function createRecentChromeNavLink( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm still looking at the this, please don't merge for now, having a few doubts need to figure out
id: '', | ||
disabled: true, | ||
category: recentlyVisitedCategory, | ||
title: i18n.translate('core.ui.EmptyRecentlyVisitied', { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo, Visited
Signed-off-by: yuye-aws <yuyezhu@amazon.com>
Signed-off-by: yuye-aws <yuyezhu@amazon.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work!
* refactor recently visited links to category Signed-off-by: yuye-aws <yuyezhu@amazon.com> * bring back external link logic Signed-off-by: yuye-aws <yuyezhu@amazon.com> * add no recently visited items when empty Signed-off-by: yuye-aws <yuyezhu@amazon.com> * change annotation Signed-off-by: yuye-aws <yuyezhu@amazon.com> * refactor with type RecentNavLink Signed-off-by: yuye-aws <yuyezhu@amazon.com> * rename navlink type from ChromeOrRecentNavLink to CollapsibleNavLink Signed-off-by: yuye-aws <yuyezhu@amazon.com> --------- Signed-off-by: yuye-aws <yuyezhu@amazon.com>
* refactor recently visited links to category Signed-off-by: yuye-aws <yuyezhu@amazon.com> * bring back external link logic Signed-off-by: yuye-aws <yuyezhu@amazon.com> * add no recently visited items when empty Signed-off-by: yuye-aws <yuyezhu@amazon.com> * change annotation Signed-off-by: yuye-aws <yuyezhu@amazon.com> * refactor with type RecentNavLink Signed-off-by: yuye-aws <yuyezhu@amazon.com> * rename navlink type from ChromeOrRecentNavLink to CollapsibleNavLink Signed-off-by: yuye-aws <yuyezhu@amazon.com> --------- Signed-off-by: yuye-aws <yuyezhu@amazon.com>
* refactor recently visited links to category Signed-off-by: yuye-aws <yuyezhu@amazon.com> * bring back external link logic Signed-off-by: yuye-aws <yuyezhu@amazon.com> * add no recently visited items when empty Signed-off-by: yuye-aws <yuyezhu@amazon.com> * change annotation Signed-off-by: yuye-aws <yuyezhu@amazon.com> * refactor with type RecentNavLink Signed-off-by: yuye-aws <yuyezhu@amazon.com> * rename navlink type from ChromeOrRecentNavLink to CollapsibleNavLink Signed-off-by: yuye-aws <yuyezhu@amazon.com> --------- Signed-off-by: yuye-aws <yuyezhu@amazon.com>
Description
The category name has changed from "recently viewed" to "recently visited". We need to confirm with UX team whether to render this category when there is no recently accessed items.
Issues Resolved
Screenshot
Testing the changes
Check List
yarn test:jest
yarn test:jest_integration
yarn test:ftr