Skip to content
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.

Sign up for GitHub

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

[EPM] update to layout and and spacing #49413

Merged
merged 8 commits into from
Oct 29, 2019
Merged

[EPM] update to layout and and spacing #49413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
12e0ed4
fix height and color issues
neptunian Oct 25, 2019
2f60246
make container full height
neptunian Oct 25, 2019
59b900b
remove panels per design update and make white bg color
neptunian Oct 25, 2019
987bbb1
adjust spacing
neptunian Oct 25, 2019
ce709ce
check for empty response
neptunian Oct 28, 2019
84bcdcc
fix eslint issue
neptunian Oct 28, 2019
d3f28e8
fix layout in safari
neptunian Oct 28, 2019
c4583e3
remove unused component
neptunian Oct 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 50 additions & 53 deletions x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
EuiHorizontalRule,
EuiIcon,
EuiNotificationBadge,
EuiPanel,
EuiText,
EuiTitle,
EuiSpacer,
Expand All @@ -35,61 +34,59 @@ export function AssetAccordion({ assets }: { assets: AssetsGroupedByServiceByTyp
{entries(assets).map(([service, typeToParts], assetIndex) => {
return (
<Fragment key={service}>
<EuiPanel grow={false} paddingSize="none">
<FlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiIcon type={ServiceIcons[service]} />
</EuiFlexItem>
<FlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiIcon type={ServiceIcons[service]} />
</EuiFlexItem>

<EuiFlexItem>
<EuiTitle key={service}>
<EuiText>
<h4>{ServiceTitleMap[service]} Assets</h4>
</EuiText>
</EuiTitle>
</EuiFlexItem>
</FlexGroup>
<EuiHorizontalRule margin="none" />
<EuiFlexItem>
<EuiTitle key={service}>
<EuiText>
<h4>{ServiceTitleMap[service]} Assets</h4>
</EuiText>
</EuiTitle>
</EuiFlexItem>
</FlexGroup>
<EuiHorizontalRule margin="none" />

{entries(typeToParts).map(([type, parts], typeIndex, typeEntries) => {
const iconType = AssetIcons[type];
// @types/styled-components@3 does yet support `defaultProps`, which EuiAccordion uses
// Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31903
// we're a major version behind; nearly 2
return (
<Fragment key={type}>
<EuiAccordion
style={{ margin: theme.eui.euiFormControlPadding }}
id={type}
buttonContent={
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
{iconType ? <EuiIcon type={iconType} size="s" /> : ''}
</EuiFlexItem>
{entries(typeToParts).map(([type, parts], typeIndex, typeEntries) => {
const iconType = AssetIcons[type];
// @types/styled-components@3 does yet support `defaultProps`, which EuiAccordion uses
// Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31903
// we're a major version behind; nearly 2
return (
<Fragment key={type}>
<EuiAccordion
style={{ margin: theme.eui.euiFormControlPadding }}
id={type}
buttonContent={
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
{iconType ? <EuiIcon type={iconType} size="s" /> : ''}
</EuiFlexItem>

<EuiFlexItem>
<EuiText color="secondary">{AssetTitleMap[type]}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
paddingSize="m"
extraAction={
<EuiNotificationBadge color="subdued" size="m">
{parts.length}
</EuiNotificationBadge>
}
>
<EuiText>
<span role="img" aria-label="woman shrugging">
🤷
</span>
</EuiText>
</EuiAccordion>
{typeIndex < typeEntries.length - 1 ? <EuiHorizontalRule margin="none" /> : ''}
</Fragment>
);
})}
</EuiPanel>
<EuiFlexItem>
<EuiText color="secondary">{AssetTitleMap[type]}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
paddingSize="m"
extraAction={
<EuiNotificationBadge color="subdued" size="m">
{parts.length}
</EuiNotificationBadge>
}
>
<EuiText>
<span role="img" aria-label="woman shrugging">
🤷
</span>
</EuiText>
</EuiAccordion>
{typeIndex < typeEntries.length - 1 ? <EuiHorizontalRule margin="none" /> : ''}
</Fragment>
);
})}
<EuiSpacer size="l" />
</Fragment>
);
Expand Down
2 changes: 1 addition & 1 deletion x-pack/legacy/plugins/integrations_manager/public/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { routes } from './routes';
export type DetailViewPanelName = 'overview' | 'assets' | 'data-sources';

const REACT_APP_ROOT_ID = 'epm__root';
const template = `<div id="${REACT_APP_ROOT_ID}"></div>`;
const template = `<div id="${REACT_APP_ROOT_ID}" style="flex-grow: 1; display: flex; flex-direction: column"></div>`;
const getRootEl = () => document.getElementById(REACT_APP_ROOT_ID);

main();
Expand Down
21 changes: 5 additions & 16 deletions x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,24 @@

import React from 'react';
import styled from 'styled-components';
import {
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui';
import { SideNavLinks } from './side_nav_links';
import { PackageInfo } from '../../../common/types';
import { AssetAccordion } from '../../components/asset_accordion';
import { AssetsFacetGroup } from '../../components/assets_facet_group';
import { Requirements } from '../../components/requirements';
import { CenterColumn, LeftColumn, RightColumn } from './layout';
import { OverviewPanel } from './overview_panel';
import { useCore } from '../../hooks/use_core';
import { DEFAULT_PANEL, DetailProps } from '.';

type ContentProps = PackageInfo & Pick<DetailProps, 'panel'> & { hasIconPanel: boolean };
export function Content(props: ContentProps) {
const { hasIconPanel, name, panel, version } = props;
const { theme } = useCore();
const SideNavColumn = hasIconPanel
? styled(LeftColumn)`
/* 🤢🤷 https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity */
&&& {
margin-top: ${theme.eui.euiKeyPadMenuSize};
margin-top: 77px;
}
`
: LeftColumn;
Expand Down Expand Up @@ -64,11 +55,9 @@ export function ContentPanel(props: ContentPanelProps) {
return <AssetAccordion assets={assets} />;
case 'data-sources':
return (
<EuiPanel>
<EuiTitle size="xs">
<span>Data Sources</span>
</EuiTitle>
</EuiPanel>
<EuiTitle size="xs">
<span>Data Sources</span>
</EuiTitle>
);
case 'overview':
default:
Expand Down
1 change: 0 additions & 1 deletion x-pack/legacy/plugins/integrations_manager/public/screens/detail/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export function Header(props: HeaderProps) {
const FullWidthNavRow = styled(EuiPage)`
/* no left padding so link is against column left edge */
padding-left: 0;
background-color: ${p => p.theme.eui.euiColorLightestShade};
`;

const Text = styled.span`
Expand Down
22 changes: 6 additions & 16 deletions x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function Detail({ pkgkey, panel = DEFAULT_PANEL }: DetailProps) {

type LayoutProps = PackageInfo & Pick<DetailProps, 'panel'> & EuiPageWidthProps;
export function DetailLayout(props: LayoutProps) {
const { name, restrictWidth, panel } = props;
const { name, restrictWidth } = props;
const { theme } = useCore();
const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);

Expand All @@ -46,13 +46,14 @@ export function DetailLayout(props: LayoutProps) {
padding-bottom: ${theme.eui.paddingSizes.xl};
`;

const FullWidthRemainingHeight = styled(EuiPage)`
const paddingSizeTop: number = parseInt(theme.eui.paddingSizes.xl, 10) * 1.25;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now have 3 of these "xl times some multiple" values. Doesn't have to be fixed here, but I want to keep an eye out for them and make some EPM theme values if we need to repeat them.

const FullWidthContent = styled(EuiPage)`
background-color: ${theme.eui.euiColorEmptyShade};
height: calc(100vh - ${topBarsHeight()}px);
height: 100%;
padding-top: ${paddingSizeTop}px;
flex-grow: 1;
`;

const FullWidthContent = panel === 'overview' ? FullWidthRemainingHeight : EuiPage;

return (
<Fragment>
<FullWidthHeader>
Expand All @@ -68,14 +69,3 @@ export function DetailLayout(props: LayoutProps) {
</Fragment>
);
}

function topBarsHeight() {
const { theme } = useCore();
const globalNav = parseInt(theme.eui.euiHeaderChildSize, 10);
const pageTopNav = /* line-height */ 24 + /* padding-top */ 16 + /* padding-bottom */ 16;
const title = /* line-height */ 48;
const header = /* padding-top */ 16 + pageTopNav + title + /* padding-bottom */ 16;
const topBarsTotal = globalNav + header;

return topBarsTotal;
}
3 changes: 2 additions & 1 deletion x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export function Readme({ readmePath }: { readmePath: string }) {

return (
<Fragment>
{markdown ? (
{// checking against undefined because currently some readme paths exist with empty response
markdown !== undefined ? (
<ReactMarkdown renderers={markdownRenderers} source={markdown} />
) : (
<EuiText>
Expand Down