[Workspace] Refactor new home page #8467
Conversation
Signed-off-by: yubonluo <[email protected]>
…oards into 2.17/support-home-page
Signed-off-by: yubonluo <[email protected]>
Signed-off-by: yubonluo <[email protected]>
Signed-off-by: yubonluo <[email protected]>
Signed-off-by: yubonluo <[email protected]>
Signed-off-by: yubonluo <[email protected]>
…oards into 2.17/support-home-page
Signed-off-by: yubonluo <[email protected]>
Signed-off-by: yubonluo <[email protected]>
yubonluo
requested review from
ananzh,
kavilla,
AMoo-Miki,
ashwin-pc,
joshuarrrr,
abbyhu2000,
zengyan-amazon,
zhongnansu,
manasvinibs,
ZilongX,
Flyingliuhub,
curq,
bandinib-amzn,
SuZhou-Joe,
ruanyl,
BionIT,
xinruiba,
zhyuanqi,
mengweieric and
LDrago27
as code owners
yubonluo
requested review from
virajsanghvi,
sejli,
joshuali925 and
huyaboo
as code owners
…ch-Dashboards into 2.17/support-home-page
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8467 +/- ##
==========================================
- Coverage 60.95% 60.93% -0.03%
==========================================
Files 3758 3759 +1
Lines 89326 89349 +23
Branches 13974 13981 +7
==========================================
- Hits 54453 54446 -7
- Misses 31481 31501 +20
- Partials 3392 3402 +10
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Signed-off-by: yubonluo <[email protected]>
Signed-off-by: yubonluo <[email protected]>
Signed-off-by: yubonluo <[email protected]>
| @@ -166,6 +166,9 @@ export class HomePublicPlugin | |||
| navLinkStatus: AppNavLinkStatus.hidden, | |||
| mount: async (params: AppMountParameters) => { | |||
| const [coreStart, { navigation }] = await core.getStartServices(); | |||
| if (!!coreStart.application.capabilities.workspaces?.enabled) { | |||
| coreStart.application.navigateToApp('workspace_initial'); | |||
There was a problem hiding this comment.
| coreStart.application.navigateToApp('workspace_initial'); | |
| coreStart.application.navigateToApp('workspace_initial'); | |
| return ; |
What about we return early here to avoid unnecessary code execution below.
| const isDashboardAdmin = !!application.capabilities.dashboards?.isDashboardAdmin; | ||
| const availableUseCases = registeredUseCases$ | ||
| .getValue() | ||
| .filter((item) => !item.systematic || item.id === 'all'); |
There was a problem hiding this comment.
| .filter((item) => !item.systematic || item.id === 'all'); | |
| .filter((item) => !item.systematic || item.id === ALL_USE_CASE_ID); |
Nit: we have the id from core I remember.
| </EuiPageBody> | ||
| {isUseCaseFlyoutVisible && ( | ||
| <WorkspaceUseCaseFlyout |
There was a problem hiding this comment.
The features inside the flyout do not looks correct to me.
| setSettingMount(items.at(2)); | ||
| setDevToolsMount(items.at(3)); | ||
| setUserAccountMount(items.at(-1)); |
There was a problem hiding this comment.
Can we use id to match instead picking from fixed index?
| userAccountMount.mount(mountUserAccountRef.current); | ||
| devToolsMount.mount(mountDevToolsRef.current); | ||
| settingMount.mount(mountSettingRef.current); |
There was a problem hiding this comment.
We should mount the menu in individual if else. The code won't work if security plugin is not installed.
| .filter((item) => !item.systematic || item.id === 'all'); | ||
| const workspaceList = workspaces.workspaceList$.getValue(); | ||
| const [isUseCaseFlyoutVisible, setIsUseCaseFlyoutVisible] = useState(false); | ||
| const [defaultUseCaseId, setDefaultUseCaseId] = useState(availableUseCases[0].id); |
There was a problem hiding this comment.
| const [defaultUseCaseId, setDefaultUseCaseId] = useState(availableUseCases[0].id); | |
| const [defaultExpandedUseCaseId, setDefaultExpandedUseCaseId] = useState(availableUseCases[0].id); |
Nit: defaultUseCaseId seems a little bit confusing.
| const [userAccountMount, setUserAccountMount] = useState<ChromeNavControl | undefined>(undefined); | ||
| const [settingMount, setSettingMount] = useState<ChromeNavControl | undefined>(undefined); | ||
| const [devToolsMount, setDevToolsMount] = useState<ChromeNavControl | undefined>(undefined); |
There was a problem hiding this comment.
What about we just use const items = useObservable(chrome.navControls.getLeftBottom$()); and cherry-pick the needed icon to render? the useState seems overwhelming here.
| <EuiIcon type="reporter" size="s" color="primary" /> | ||
| | ||
| <EuiLink | ||
| href="https://docs.aws.amazon.com/opensearch-service/latest/developerguide/what-is.html" |
There was a problem hiding this comment.
Should it be the doc link related to workspace?
| @@ -0,0 +1,80 @@ | |||
| /* stylelint-disable */ | |||
| .observability { | |||
There was a problem hiding this comment.
The className may match unexpected elements, can we add some prefix?
| /* stylelint-disable */ | ||
| .observability { | ||
| background-color: hsla(30deg, 24%, 96%, 100%); | ||
| background-image: |
There was a problem hiding this comment.
Can we move the customized gradient to a file like gradient_variables.scss? So that we only apply the stylelint-disable rule in that file.
| .createWorkspaceTextBorder { | ||
| border: 1px dashed; | ||
| border-radius: 8px; | ||
| max-height: 160px; | ||
| width: 210px; | ||
| padding: 10px; | ||
| border-color: $ouiColorDarkShade; | ||
| } | ||
|
|
||
| .fixedLeftBottomIcon { | ||
| position: fixed; | ||
| bottom: 12px; | ||
| left: 12px; | ||
| } |
There was a problem hiding this comment.
Same here, please use a unified prefix for the class.
Description
Refactor new home page.
The new home page will show use case card, workspace list, use case information flyout, create workspace button for OSD admin, view workspace button, tools button, setting button and user information.
Issues Resolved
Screenshot
2024-10-03.15.23.43.mp4
Dark mode
Testing the changes
Changelog
Check List
yarn test:jestyarn test:jest_integration