Skip to content

Commit

Permalink
Fix after review part 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@nchaulet
nchaulet committed Apr 9, 2020
1 parent 47945a6 commit 5a16fde
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 74 deletions.
23 changes: 16 additions & 7 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import React, { memo } from 'react';
import styled from 'styled-components';
import { EuiFlexGroup, EuiFlexItem, EuiTabs, EuiTab, EuiSpacer } from '@elastic/eui';
import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
import { EuiFlexItemProps } from '@elastic/eui/src/components/flex/flex_item';

const Container = styled.div`
border-bottom: ${props => props.theme.eui.euiBorderThin};
Expand All @@ -33,25 +34,33 @@ export interface HeaderProps {
restrictHeaderWidth?: number;
leftColumn?: JSX.Element;
rightColumn?: JSX.Element;
rightColumnGrow?: EuiFlexItemProps['grow'];
tabs?: EuiTabProps[];
}

const HeaderColumns: React.FC<Omit<HeaderProps, 'tabs'>> = memo(({ leftColumn, rightColumn }) => (
<EuiFlexGroup alignItems="center">
{leftColumn ? <EuiFlexItem>{leftColumn}</EuiFlexItem> : null}
{rightColumn ? <EuiFlexItem>{rightColumn}</EuiFlexItem> : null}
</EuiFlexGroup>
));
const HeaderColumns: React.FC<Omit<HeaderProps, 'tabs'>> = memo(
({ leftColumn, rightColumn, rightColumnGrow }) => (
<EuiFlexGroup alignItems="center">
{leftColumn ? <EuiFlexItem>{leftColumn}</EuiFlexItem> : null}
{rightColumn ? <EuiFlexItem grow={rightColumnGrow}>{rightColumn}</EuiFlexItem> : null}
</EuiFlexGroup>
)
);

export const Header: React.FC<HeaderProps> = ({
leftColumn,
rightColumn,
rightColumnGrow,
tabs,
restrictHeaderWidth,
}) => (
<Container>
<Wrapper maxWidth={restrictHeaderWidth}>
<HeaderColumns leftColumn={leftColumn} rightColumn={rightColumn} />
<HeaderColumns
leftColumn={leftColumn}
rightColumn={rightColumn}
rightColumnGrow={rightColumnGrow}
/>
<EuiFlexGroup>
{tabs ? (
<EuiFlexItem>
Expand Down
146 changes: 79 additions & 67 deletions ...cations/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,79 +28,91 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
agentConfig?: AgentConfig;
packageInfo?: PackageInfo;
}> = ({ from, basePath, cancelUrl, maxStep, agentConfig, packageInfo, children }) => {
return (
<WithHeaderLayout
restrictHeaderWidth={833}
restrictWidth={833}
leftColumn={
<EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
<EuiFlexItem>
<EuiButtonEmpty size="s" iconType="arrowLeft" flush="left" href={cancelUrl}>
const leftColumn = (
<EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
<EuiFlexItem>
<EuiButtonEmpty size="s" iconType="arrowLeft" flush="left" href={cancelUrl}>
<FormattedMessage
id="xpack.ingestManager.createDatasource.cancelLinkText"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<h1>
<FormattedMessage
id="xpack.ingestManager.createDatasource.pageTitle"
defaultMessage="Add data source"
/>
</h1>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="s" />
<EuiText color="subdued" size="s">
<FormattedMessage
id="xpack.ingestManager.createDatasource.pageDescription"
defaultMessage="Follow the instructions below to add a data source to the selected agent configuration."
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);
const rightColumn = (
<EuiFlexGroup justifyContent="flexEnd" direction={'row'} gutterSize="xl">
<EuiFlexItem grow={false}>
<EuiSpacer size="s" />
{agentConfig && from === 'config' ? (
<EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.createDatasource.agentConfigurationNameLabel"
defaultMessage="Configuration"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{agentConfig?.name || '-'}
</EuiDescriptionListDescription>
</EuiDescriptionList>
) : null}
{packageInfo && from === 'package' ? (
<EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.createDatasource.cancelLinkText"
defaultMessage="Cancel"
id="xpack.ingestManager.createDatasource.packageNameLabel"
defaultMessage="Integration"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<h1>
<FormattedMessage
id="xpack.ingestManager.createDatasource.pageTitle"
defaultMessage="Add data source"
/>
</h1>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="s" />
<EuiFlexGroup direction={from === 'config' ? 'row' : 'rowReverse'} gutterSize="xl">
{agentConfig && from === 'config' ? (
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiDescriptionList textStyle="reverse">
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.createDatasource.agentConfigurationNameLabel"
defaultMessage="Configuration"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{agentConfig?.name || '-'}
</EuiDescriptionListDescription>
</EuiDescriptionList>
<PackageIcon
packageName={packageInfo?.name || ''}
version={packageInfo?.version || ''}
icons={packageInfo?.icons}
size="m"
/>
</EuiFlexItem>
) : null}
{packageInfo && from === 'package' ? (
<EuiFlexItem grow={false}>
<EuiDescriptionList textStyle="reverse">
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.createDatasource.packageNameLabel"
defaultMessage="Integration"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<PackageIcon
packageName={packageInfo?.name || ''}
version={packageInfo?.version || ''}
icons={packageInfo?.icons}
size="m"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{packageInfo?.title || packageInfo?.name || '-'}
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionListDescription>
</EuiDescriptionList>
{packageInfo?.title || packageInfo?.name || '-'}
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
}
</EuiFlexGroup>
</EuiDescriptionListDescription>
</EuiDescriptionList>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
);

const maxWidth = 770;
return (
<WithHeaderLayout
restrictHeaderWidth={maxWidth}
restrictWidth={maxWidth}
leftColumn={leftColumn}
rightColumn={rightColumn}
rightColumnGrow={false}
>
{children}
</WithHeaderLayout>
Expand Down

0 comments on commit 5a16fde

Please sign in to comment.