From b43f8599d2e3adc7a2176f8dc8fb8edbf0cfd4c4 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Thu, 27 Apr 2023 13:07:45 -0700 Subject: [PATCH] Organize code files --- .../navigation/src/{ui => }/i18n_strings.ts | 0 .../src/ui/{ => components}/elastic_mark.tsx | 0 .../navigation/src/ui/components/header.tsx | 58 ++++++++++ .../src/ui/{ => components}/header_logo.scss | 0 .../navigation/src/ui/components/index.tsx | 12 ++ .../src/ui/components/link_to_cloud.tsx | 45 ++++++++ .../ui/{ => components}/navigation_bucket.tsx | 6 +- .../src/ui/components/recently_accessed.tsx | 50 ++++++++ .../chrome/navigation/src/ui/navigation.tsx | 109 +----------------- 9 files changed, 172 insertions(+), 108 deletions(-) rename packages/shared-ux/chrome/navigation/src/{ui => }/i18n_strings.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{ => components}/elastic_mark.tsx (100%) create mode 100644 packages/shared-ux/chrome/navigation/src/ui/components/header.tsx rename packages/shared-ux/chrome/navigation/src/ui/{ => components}/header_logo.scss (100%) create mode 100644 packages/shared-ux/chrome/navigation/src/ui/components/index.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/components/link_to_cloud.tsx rename packages/shared-ux/chrome/navigation/src/ui/{ => components}/navigation_bucket.tsx (87%) create mode 100644 packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx diff --git a/packages/shared-ux/chrome/navigation/src/ui/i18n_strings.ts b/packages/shared-ux/chrome/navigation/src/i18n_strings.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/i18n_strings.ts rename to packages/shared-ux/chrome/navigation/src/i18n_strings.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/elastic_mark.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/elastic_mark.tsx similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/elastic_mark.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/elastic_mark.tsx diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/header.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/header.tsx new file mode 100644 index 0000000000000..b9153a04b87e3 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/components/header.tsx @@ -0,0 +1,58 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { EuiHeaderLogo, EuiLoadingSpinner } from '@elastic/eui'; +import React from 'react'; +import useObservable from 'react-use/lib/useObservable'; +import { NavigationProps, NavigationServices } from '../../../types'; +import { getI18nStrings } from '../../i18n_strings'; +import { ElasticMark } from './elastic_mark'; +import './header_logo.scss'; + +type Props = Pick; +type Services = Pick< + NavigationServices, + 'basePath' | 'navIsOpen' | 'navigateToUrl' | 'loadingCount$' +>; + +export const NavHeader = (props: Props & Services) => { + const strings = getI18nStrings(); + const { basePath, navIsOpen, navigateToUrl, loadingCount$, homeHref } = props; + + const loadingCount = useObservable(loadingCount$, 0); + const homeUrl = basePath.prepend(homeHref); + const navigateHome = (event: React.MouseEvent) => { + event.preventDefault(); + navigateToUrl(homeUrl); + }; + const logo = + loadingCount === 0 ? ( + + ) : ( + + + + ); + + return ( + <> + {logo} + {navIsOpen ? : null} + + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/header_logo.scss b/packages/shared-ux/chrome/navigation/src/ui/components/header_logo.scss similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/header_logo.scss rename to packages/shared-ux/chrome/navigation/src/ui/components/header_logo.scss diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/index.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/index.tsx new file mode 100644 index 0000000000000..2782906ee8266 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/components/index.tsx @@ -0,0 +1,12 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export { NavHeader } from './header'; +export { LinkToCloud } from './link_to_cloud'; +export { NavigationBucket } from './navigation_bucket'; +export { RecentlyAccessed } from './recently_accessed'; diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/link_to_cloud.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/link_to_cloud.tsx new file mode 100644 index 0000000000000..ef9f1ba01ee16 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/components/link_to_cloud.tsx @@ -0,0 +1,45 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { EuiCollapsibleNavGroup, EuiLink } from '@elastic/eui'; +import React from 'react'; +import { NavigationProps } from '../../../types'; +import { getI18nStrings } from '../../i18n_strings'; + +interface Props { + linkToCloud?: NavigationProps['homeHref']; +} + +export const LinkToCloud = (props: Props) => { + const strings = getI18nStrings(); + + switch (props.linkToCloud) { + case 'projects': + return ( + + + + ); + case 'deployments': + return ( + + + + ); + default: + return null; + } +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx similarity index 87% rename from packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx index 0b0d6b5b223ab..48ee855901497 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx @@ -8,9 +8,9 @@ import { EuiCollapsibleNavGroup, EuiIcon, EuiSideNav, EuiText } from '@elastic/eui'; import React from 'react'; -import { NavigationBucketProps } from '../../types'; -import { useNavigation } from '../services'; -import { navigationStyles as styles } from '../styles'; +import { NavigationBucketProps } from '../../../types'; +import { useNavigation } from '../../services'; +import { navigationStyles as styles } from '../../styles'; export const NavigationBucket = (opts: NavigationBucketProps) => { const { id, items, activeNavItemId, ...props } = opts; diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx new file mode 100644 index 0000000000000..c6b6a6ec14738 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx @@ -0,0 +1,50 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { EuiCollapsibleNavGroup, EuiSideNav, EuiSideNavItemType } from '@elastic/eui'; +import React from 'react'; +import useObservable from 'react-use/lib/useObservable'; +import { NavigationProps, NavigationServices } from '../../../types'; +import { getI18nStrings } from '../../i18n_strings'; +import { navigationStyles as styles } from '../../styles'; + +interface Props { + recentlyAccessed$: Observable; +} + +export const RecentlyAccessed = (props: Props) => { + const strings = getI18nStrings(); + const recentlyAccessed = useObservable(props.recentlyAccessed$, []); + if (recentlyAccessed.length > 0) { + const navItems: Array> = [ + { + name: '', // no list header title + id: 'recents_root', + items: recentlyAccessed.map(({ id, label, link }) => ({ + id, + name: label, + href: link, + })), + }, + ]; + + return ( + + + + ); + } + + return null; +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx b/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx index 48bccd614fdb9..4c8d4bf20f796 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx @@ -6,28 +6,18 @@ * Side Public License, v 1. */ -import useObservable from 'react-use/lib/useObservable'; import { EuiCollapsibleNavGroup, EuiFlexGroup, EuiFlexItem, - EuiHeaderLogo, - EuiLink, - EuiLoadingSpinner, - EuiSideNav, - EuiSideNavItemType, EuiSpacer, useEuiTheme, } from '@elastic/eui'; import React from 'react'; -import { getI18nStrings } from './i18n_strings'; import { NavigationBucketProps, NavigationProps } from '../../types'; import { NavigationModel } from '../model'; import { useNavigation } from '../services'; -import { navigationStyles as styles } from '../styles'; -import { ElasticMark } from './elastic_mark'; -import './header_logo.scss'; -import { NavigationBucket } from './navigation_bucket'; +import { LinkToCloud, NavHeader, NavigationBucket, RecentlyAccessed } from './components'; export const Navigation = (props: NavigationProps) => { const { activeNavItemId, basePath, navIsOpen, navigateToUrl, ...observables } = useNavigation(); @@ -45,97 +35,6 @@ export const Navigation = (props: NavigationProps) => { const solutions = nav.getSolutions(); const { analytics, ml, devTools, management } = nav.getPlatform(); - const strings = getI18nStrings(); - - const NavHeader = () => { - const loadingCount = useObservable(observables.loadingCount$, 0); - const homeUrl = basePath.prepend(props.homeHref); - const navigateHome = (event: React.MouseEvent) => { - event.preventDefault(); - navigateToUrl(homeUrl); - }; - const logo = - loadingCount === 0 ? ( - - ) : ( - - - - ); - - return ( - <> - {logo} - {navIsOpen ? : null} - - ); - }; - - const LinkToCloud = () => { - switch (props.linkToCloud) { - case 'projects': - return ( - - - - ); - case 'deployments': - return ( - - - - ); - default: - return null; - } - }; - - const RecentlyAccessed = () => { - const recentlyAccessed = useObservable(observables.recentlyAccessed$, []); - - const navItems: Array> = [ - { - name: '', - id: 'recents_root', - items: recentlyAccessed.map((item) => ({ - ...item, - name: item.label, - href: item.link, - })), - }, - ]; - - return ( - 0} - data-test-subj={`nav-bucket-recentlyAccessed`} - > - - - ); - }; - // higher-order-component to keep the common props DRY const NavigationBucketHoc = (outerProps: Omit) => ( @@ -145,12 +44,12 @@ export const Navigation = (props: NavigationProps) => { - + - + - + {solutions.map((solutionBucket, idx) => { return ;