diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts index 856d483e174a6..41f8869ad5f61 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts +++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts @@ -7,7 +7,3 @@ export { EnterpriseSearchPageTemplate, PageTemplateProps } from './page_template'; export { generateNavLink } from './nav_link_helpers'; - -// TODO: Delete these once KibanaPageTemplate migration is done -export { Layout } from './layout'; -export { SideNav, SideNavLink, SideNavItem } from './side_nav'; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.scss b/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.scss deleted file mode 100644 index 88799406070cd..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.scss +++ /dev/null @@ -1,96 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -.enterpriseSearchLayout { - $sideBarWidth: $euiSize * 15; - $sideBarMobileHeight: $euiSize * 4.75; - $consoleHeaderHeight: 98px; // NOTE: Keep an eye on this for changes - $pageHeight: calc(100vh - #{$consoleHeaderHeight}); - - display: block; - background-color: $euiColorEmptyShade; - min-height: $pageHeight; - position: relative; - left: $sideBarWidth; - width: calc(100% - #{$sideBarWidth}); - padding: 0; - - @include euiBreakpoint('xs', 's', 'm') { - left: auto; - width: 100%; - } - - &__sideBarToggle { - display: none; - - @include euiBreakpoint('xs', 's', 'm') { - display: block; - - position: absolute; - right: $euiSize; - top: $sideBarMobileHeight / 2; - transform: translateY(-50%) scale(.9); - - .euiButton { - min-width: 0; - } - } - } - - &__sideBar { - z-index: $euiZNavigation; - position: fixed; - margin-left: -1 * $sideBarWidth; - margin-right: 0; - overflow-y: auto; - overflow-x: hidden; - - height: $pageHeight; - width: $sideBarWidth; - - background-color: $euiColorLightestShade; - box-shadow: inset (-1 * $euiSizeXS) 0 $euiSizeS (-1 * $euiSizeXS) rgba($euiShadowColor, .25); - - @include euiBreakpoint('xs', 's', 'm') { - position: relative; - width: 100%; - height: $sideBarMobileHeight; - margin-left: 0; - overflow-y: hidden; - - border-bottom: $euiBorderThin; - box-shadow: none; - - &--isOpen { - height: auto; - overflow-y: auto; - } - } - } - - &__body { - padding: $euiSizeXXL; - - @include euiBreakpoint('m') { - padding: $euiSizeL; - } - @include euiBreakpoint('xs', 's') { - padding: $euiSize; - } - } - - &__readOnlyMode { - margin: -$euiSizeM 0 $euiSizeL; - - @include euiBreakpoint('m') { - margin: 0 0 $euiSizeL; - } - @include euiBreakpoint('xs', 's') { - margin: 0; - } - } -} diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.test.tsx deleted file mode 100644 index 28092f75cdede..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.test.tsx +++ /dev/null @@ -1,77 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; - -import { shallow } from 'enzyme'; - -import { EuiPageSideBar, EuiButton, EuiPageBody, EuiCallOut } from '@elastic/eui'; - -import { Layout, INavContext } from './layout'; - -describe('Layout', () => { - it('renders', () => { - const wrapper = shallow(); - - expect(wrapper.find('.enterpriseSearchLayout')).toHaveLength(1); - expect(wrapper.find(EuiPageBody).prop('restrictWidth')).toBeFalsy(); - }); - - it('passes the restrictWidth prop', () => { - const wrapper = shallow(); - - expect(wrapper.find(EuiPageBody).prop('restrictWidth')).toEqual(true); - }); - - it('renders navigation', () => { - const wrapper = shallow(Hello World} />); - - expect(wrapper.find('.enterpriseSearchLayout__sideBar')).toHaveLength(1); - expect(wrapper.find('.nav-test')).toHaveLength(1); - }); - - it('renders navigation toggle state', () => { - const wrapper = shallow(Hello World} />); - expect(wrapper.find(EuiPageSideBar).prop('className')).not.toContain('--isOpen'); - expect(wrapper.find(EuiButton).prop('iconType')).toEqual('arrowRight'); - - const toggle = wrapper.find('[data-test-subj="enterpriseSearchNavToggle"]'); - toggle.simulate('click'); - - expect(wrapper.find(EuiPageSideBar).prop('className')).toContain('--isOpen'); - expect(wrapper.find(EuiButton).prop('iconType')).toEqual('arrowDown'); - }); - - it('passes down NavContext to navigation links', () => { - const wrapper = shallow(} />); - - const toggle = wrapper.find('[data-test-subj="enterpriseSearchNavToggle"]'); - toggle.simulate('click'); - expect(wrapper.find(EuiPageSideBar).prop('className')).toContain('--isOpen'); - - const context = (wrapper.find('ContextProvider').prop('value') as unknown) as INavContext; - context.closeNavigation(); - expect(wrapper.find(EuiPageSideBar).prop('className')).not.toContain('--isOpen'); - }); - - it('renders a read-only mode callout', () => { - const wrapper = shallow(); - - expect(wrapper.find(EuiCallOut)).toHaveLength(1); - }); - - it('renders children', () => { - const wrapper = shallow( - -
Test
- - ); - - expect(wrapper.find('.enterpriseSearchLayout__body')).toHaveLength(1); - expect(wrapper.find('.testing')).toHaveLength(1); - }); -}); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.tsx deleted file mode 100644 index 9cf5fccddbd5b..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React, { useState } from 'react'; - -import classNames from 'classnames'; - -import { EuiPage, EuiPageSideBar, EuiPageBody, EuiButton, EuiCallOut } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; - -import './layout.scss'; - -interface LayoutProps { - navigation: React.ReactNode; - restrictWidth?: boolean; - readOnlyMode?: boolean; -} - -export interface INavContext { - closeNavigation(): void; -} -export const NavContext = React.createContext({}); - -export const Layout: React.FC = ({ - children, - navigation, - restrictWidth, - readOnlyMode, -}) => { - const [isNavOpen, setIsNavOpen] = useState(false); - const toggleNavigation = () => setIsNavOpen(!isNavOpen); - const closeNavigation = () => setIsNavOpen(false); - - const navClasses = classNames('enterpriseSearchLayout__sideBar', { - 'enterpriseSearchLayout__sideBar--isOpen': isNavOpen, // eslint-disable-line @typescript-eslint/naming-convention - }); - - return ( - - -
- - {i18n.translate('xpack.enterpriseSearch.nav.menu', { - defaultMessage: 'Menu', - })} - -
- {navigation} - - - {readOnlyMode && ( - - )} - {children} - - - ); -}; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss deleted file mode 100644 index f6a1ebed7ba93..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss +++ /dev/null @@ -1,87 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -$euiSizeML: $euiSize * 1.25; // 20px - between medium and large ¯\_(ツ)_/¯ - -.enterpriseSearchProduct { - display: flex; - align-items: center; - padding: $euiSizeML; - - background-image: url('./side_nav_bg.svg'); - background-repeat: no-repeat; - - @include euiBreakpoint('xs', 's', 'm') { - padding: $euiSize $euiSizeML; - } - - &__icon { - display: flex; - align-items: center; - justify-content: center; - - width: $euiSizeXXL; - height: $euiSizeXXL; - margin-right: $euiSizeS; - - background-color: $euiColorEmptyShade; - border-radius: 50%; - @include euiSlightShadow(); - - .euiIcon { - width: $euiSizeML; - height: $euiSizeML; - } - } - - &__title { - .euiText { - font-weight: $euiFontWeightMedium; - } - } -} - -.enterpriseSearchNavLinks { - &__item { - display: block; - padding: $euiSizeM $euiSizeML; - font-size: $euiFontSizeS; - font-weight: $euiFontWeightMedium; - line-height: $euiFontSizeM; - - $activeBgColor: rgba($euiColorFullShade, .05); - - &--isActive { - background-color: $activeBgColor; - } - - &.euiLink { - color: $euiTextColor; - font-weight: $euiFontWeightMedium; - - &:hover { - color: $euiTextColor; - } - - &:focus { - outline: solid 0 $activeBgColor; - background-color: $activeBgColor; - } - } - } - - &__subNav { - padding-left: $euiSizeML; - - // Extends the click area of links more to the left, so that second tiers - // of subnavigation links still have the same hitbox as first tier links - .enterpriseSearchNavLinks__item { - margin-left: -$euiSizeML; - padding-left: $euiSizeXXL; - } - } -} diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx deleted file mode 100644 index 244037d6e1382..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx +++ /dev/null @@ -1,166 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { mockLocation } from '../../__mocks__/react_router'; - -import React from 'react'; - -import { shallow } from 'enzyme'; - -import { EuiLink } from '@elastic/eui'; - -import { ENTERPRISE_SEARCH_PLUGIN, APP_SEARCH_PLUGIN } from '../../../../common/constants'; -import { EuiLinkTo } from '../react_router_helpers'; - -import { SideNav, SideNavLink, SideNavItem } from './'; - -describe('SideNav', () => { - it('renders link children', () => { - const wrapper = shallow( - -
Hello World
- - ); - - expect(wrapper.type()).toEqual('nav'); - expect(wrapper.find('.enterpriseSearchNavLinks')).toHaveLength(1); - expect(wrapper.find('.testing')).toHaveLength(1); - }); - - it('renders a custom product', () => { - const wrapper = shallow(); - - expect(wrapper.find('h3').text()).toEqual('App Search'); - expect(wrapper.find('.enterpriseSearchProduct--appSearch')).toHaveLength(1); - }); -}); - -describe('SideNavLink', () => { - it('renders', () => { - const wrapper = shallow(Link); - - expect(wrapper.type()).toEqual('li'); - expect(wrapper.find(EuiLinkTo)).toHaveLength(1); - expect(wrapper.find('.enterpriseSearchNavLinks__item')).toHaveLength(1); - }); - - it('renders an external link if isExternal is true', () => { - const wrapper = shallow( - - Link - - ); - const externalLink = wrapper.find(EuiLink); - - expect(externalLink).toHaveLength(1); - expect(externalLink.prop('href')).toEqual('http://website.com'); - expect(externalLink.prop('target')).toEqual('_blank'); - }); - - it('sets an active class if the current path matches the nav link', () => { - mockLocation.pathname = '/test/'; - - const wrapper = shallow(Link); - - expect(wrapper.find('.enterpriseSearchNavLinks__item--isActive')).toHaveLength(1); - }); - - it('sets an active class if the current path is / and the link isRoot', () => { - mockLocation.pathname = '/'; - - const wrapper = shallow( - - Link - - ); - - expect(wrapper.find('.enterpriseSearchNavLinks__item--isActive')).toHaveLength(1); - }); - - it('passes down custom classes and props', () => { - const wrapper = shallow( - - Link - - ); - - expect(wrapper.find('.testing')).toHaveLength(1); - expect(wrapper.find('[data-test-subj="testing"]')).toHaveLength(1); - }); - - it('renders nested subnavigation', () => { - const subNav = ( - - Another link! - - ); - const wrapper = shallow( - - Link - - ); - - expect(wrapper.find('.enterpriseSearchNavLinks__subNav')).toHaveLength(1); - expect(wrapper.find('[data-test-subj="subNav"]')).toHaveLength(1); - }); - - describe('shouldShowActiveForSubroutes', () => { - it("won't set an active class when route is a subroute of 'to'", () => { - mockLocation.pathname = '/documents/1234'; - - const wrapper = shallow( - - Link - - ); - - expect(wrapper.find('.enterpriseSearchNavLinks__item--isActive')).toHaveLength(0); - }); - - it('sets an active class if the current path is a subRoute of "to", and shouldShowActiveForSubroutes is true', () => { - mockLocation.pathname = '/documents/1234'; - - const wrapper = shallow( - - Link - - ); - - expect(wrapper.find('.enterpriseSearchNavLinks__item--isActive')).toHaveLength(1); - }); - }); -}); - -describe('SideNavItem', () => { - it('renders', () => { - const wrapper = shallow(Test); - - expect(wrapper.type()).toEqual('li'); - expect(wrapper.find('.enterpriseSearchNavLinks__item')).toHaveLength(1); - }); - - it('renders children', () => { - const wrapper = shallow( - - World - - ); - - expect(wrapper.find('[data-test-subj="hello"]').text()).toEqual('World'); - }); - - it('passes down custom classes and props', () => { - const wrapper = shallow( - - Test - - ); - - expect(wrapper.find('.testing')).toHaveLength(1); - expect(wrapper.find('[data-test-subj="testing"]')).toHaveLength(1); - }); -}); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx deleted file mode 100644 index 58a5c7bbb229f..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx +++ /dev/null @@ -1,130 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React, { useContext } from 'react'; -import { useLocation } from 'react-router-dom'; - -import classNames from 'classnames'; - -import { EuiIcon, EuiTitle, EuiText, EuiLink } from '@elastic/eui'; // TODO: Remove EuiLink after full Kibana transition -import { i18n } from '@kbn/i18n'; - -import { ENTERPRISE_SEARCH_PLUGIN } from '../../../../common/constants'; -import { stripTrailingSlash } from '../../../../common/strip_slashes'; -import { EuiLinkTo } from '../react_router_helpers'; - -import { NavContext, INavContext } from './layout'; - -import './side_nav.scss'; - -/** - * Side navigation - product & icon + links wrapper - */ - -interface SideNavProps { - // Expects product plugin constants (@see common/constants.ts) - product: { - NAME: string; - ID: string; - }; -} - -export const SideNav: React.FC = ({ product, children }) => { - return ( - - ); -}; - -/** - * Side navigation link item - */ - -interface SideNavLinkProps { - to: string; - shouldShowActiveForSubroutes?: boolean; - isExternal?: boolean; - className?: string; - isRoot?: boolean; - subNav?: React.ReactNode; -} - -export const SideNavLink: React.FC = ({ - to, - shouldShowActiveForSubroutes = false, - isExternal, - children, - className, - isRoot, - subNav, - ...rest -}) => { - const { closeNavigation } = useContext(NavContext) as INavContext; - - const { pathname } = useLocation(); - const currentPath = stripTrailingSlash(pathname); - const isActive = - currentPath === to || - (shouldShowActiveForSubroutes && currentPath.startsWith(to)) || - (isRoot && currentPath === ''); - - const classes = classNames('enterpriseSearchNavLinks__item', className, { - 'enterpriseSearchNavLinks__item--isActive': !isExternal && isActive, // eslint-disable-line @typescript-eslint/naming-convention - }); - - return ( -
  • - {isExternal ? ( - // eslint-disable-next-line @elastic/eui/href-or-on-click - - {children} - - ) : ( - - {children} - - )} - {subNav &&
      {subNav}
    } -
    • - ); -}; - -/** - * Side navigation non-link item - */ - -interface SideNavItemProps { - className?: string; -} - -export const SideNavItem: React.FC = ({ children, className, ...rest }) => { - const classes = classNames('enterpriseSearchNavLinks__item', className); - return ( -
  • - {children} -
    • - ); -}; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav_bg.svg b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav_bg.svg deleted file mode 100644 index a19227ab7b7eb..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav_bg.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - -