Skip to content

Commit

Permalink
[Enterprise Search] Add flag to restrict width of layout (#77539) (#7…
Browse files Browse the repository at this point in the history
…7552)

* [Enterprise Search] Add flag to restrict with of layout

This PR adds a boolean flag to restrict the width of the Enterprise Search layout file for use in Workplace Search.

* Add tests
  • Loading branch information
scottybollinger authored Sep 16, 2020
1 parent 52d580c commit 6144ab0
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import React from 'react';
import { shallow } from 'enzyme';
import { EuiPageSideBar, EuiButton } from '@elastic/eui';
import { EuiPageSideBar, EuiButton, EuiPageBody } from '@elastic/eui';

import { Layout, INavContext } from './layout';

Expand All @@ -15,6 +15,13 @@ describe('Layout', () => {
const wrapper = shallow(<Layout navigation={null} />);

expect(wrapper.find('.enterpriseSearchLayout')).toHaveLength(1);
expect(wrapper.find(EuiPageBody).prop('restrictWidth')).toBeFalsy();
});

it('passes the restrictWidth prop', () => {
const wrapper = shallow(<Layout navigation={null} restrictWidth />);

expect(wrapper.find(EuiPageBody).prop('restrictWidth')).toEqual(true);
});

it('renders navigation', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ import './layout.scss';

interface ILayoutProps {
navigation: React.ReactNode;
restrictWidth?: boolean;
}

export interface INavContext {
closeNavigation(): void;
}
export const NavContext = React.createContext({});

export const Layout: React.FC<ILayoutProps> = ({ children, navigation }) => {
export const Layout: React.FC<ILayoutProps> = ({ children, navigation, restrictWidth }) => {
const [isNavOpen, setIsNavOpen] = useState(false);
const toggleNavigation = () => setIsNavOpen(!isNavOpen);
const closeNavigation = () => setIsNavOpen(false);
Expand Down Expand Up @@ -54,7 +55,9 @@ export const Layout: React.FC<ILayoutProps> = ({ children, navigation }) => {
</div>
<NavContext.Provider value={{ closeNavigation }}>{navigation}</NavContext.Provider>
</EuiPageSideBar>
<EuiPageBody className="enterpriseSearchLayout__body">{children}</EuiPageBody>
<EuiPageBody className="enterpriseSearchLayout__body" restrictWidth={restrictWidth}>
{children}
</EuiPageBody>
</EuiPage>
);
};

0 comments on commit 6144ab0

Please sign in to comment.