Fix page layouts, clean up unused code (#63992)
This commit is contained in:
parent
2caed9b7be
commit
f76669b17a
|
@ -31,7 +31,7 @@ const Tabs = styled(EuiTabs)`
|
|||
`;
|
||||
|
||||
export interface HeaderProps {
|
||||
restrictHeaderWidth?: number;
|
||||
maxWidth?: number;
|
||||
leftColumn?: JSX.Element;
|
||||
rightColumn?: JSX.Element;
|
||||
rightColumnGrow?: EuiFlexItemProps['grow'];
|
||||
|
@ -52,10 +52,10 @@ export const Header: React.FC<HeaderProps> = ({
|
|||
rightColumn,
|
||||
rightColumnGrow,
|
||||
tabs,
|
||||
restrictHeaderWidth,
|
||||
maxWidth,
|
||||
}) => (
|
||||
<Container>
|
||||
<Wrapper maxWidth={restrictHeaderWidth}>
|
||||
<Wrapper maxWidth={maxWidth}>
|
||||
<HeaderColumns
|
||||
leftColumn={leftColumn}
|
||||
rightColumn={rightColumn}
|
||||
|
|
|
@ -20,8 +20,6 @@ interface Props {
|
|||
const Container = styled.div`
|
||||
min-height: calc(100vh - ${props => props.theme.eui.euiHeaderChildSize});
|
||||
background: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Nav = styled.nav`
|
||||
|
|
|
@ -10,18 +10,22 @@ import { Header, HeaderProps } from '../components';
|
|||
|
||||
const Page = styled(EuiPage)`
|
||||
background: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
`;
|
||||
|
||||
interface Props extends HeaderProps {
|
||||
restrictWidth?: number;
|
||||
restrictHeaderWidth?: number;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const WithHeaderLayout: React.FC<Props> = ({ restrictWidth, children, ...rest }) => (
|
||||
export const WithHeaderLayout: React.FC<Props> = ({
|
||||
restrictWidth,
|
||||
restrictHeaderWidth,
|
||||
children,
|
||||
...rest
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Header {...rest} />
|
||||
<Header maxWidth={restrictHeaderWidth} {...rest} />
|
||||
<Page restrictWidth={restrictWidth || 1200}>
|
||||
<EuiPageBody>
|
||||
<EuiSpacer size="m" />
|
||||
|
|
|
@ -9,8 +9,6 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
|
|||
|
||||
const Page = styled(EuiPage)`
|
||||
background: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
|
|
|
@ -18,16 +18,14 @@ import {
|
|||
import { WithHeaderLayout } from '../../../../layouts';
|
||||
import { AgentConfig, PackageInfo } from '../../../../types';
|
||||
import { PackageIcon } from '../../../../components/package_icon';
|
||||
import { CreateDatasourceFrom, CreateDatasourceStep } from '../types';
|
||||
import { CreateDatasourceFrom } from '../types';
|
||||
|
||||
export const CreateDatasourcePageLayout: React.FunctionComponent<{
|
||||
from: CreateDatasourceFrom;
|
||||
basePath: string;
|
||||
cancelUrl: string;
|
||||
maxStep: CreateDatasourceStep | '';
|
||||
agentConfig?: AgentConfig;
|
||||
packageInfo?: PackageInfo;
|
||||
}> = ({ from, basePath, cancelUrl, maxStep, agentConfig, packageInfo, children }) => {
|
||||
}> = ({ from, cancelUrl, agentConfig, packageInfo, children }) => {
|
||||
const leftColumn = (
|
||||
<EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
|
||||
<EuiFlexItem>
|
||||
|
|
|
@ -28,12 +28,11 @@ import {
|
|||
} from '../../../hooks';
|
||||
import { useLinks as useEPMLinks } from '../../epm/hooks';
|
||||
import { CreateDatasourcePageLayout, ConfirmCreateDatasourceModal } from './components';
|
||||
import { CreateDatasourceFrom, CreateDatasourceStep } from './types';
|
||||
import { CreateDatasourceFrom } from './types';
|
||||
import { DatasourceValidationResults, validateDatasource, validationHasErrors } from './services';
|
||||
import { StepSelectPackage } from './step_select_package';
|
||||
import { StepSelectConfig } from './step_select_config';
|
||||
import { StepConfigureDatasource } from './step_configure_datasource';
|
||||
|
||||
import { StepDefineDatasource } from './step_define_datasource';
|
||||
|
||||
export const CreateDatasourcePage: React.FunctionComponent = () => {
|
||||
|
@ -43,11 +42,9 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
|
|||
} = useConfig();
|
||||
const {
|
||||
params: { configId, pkgkey },
|
||||
url: basePath,
|
||||
} = useRouteMatch();
|
||||
const history = useHistory();
|
||||
const from: CreateDatasourceFrom = configId ? 'config' : 'package';
|
||||
const [maxStep, setMaxStep] = useState<CreateDatasourceStep | ''>('');
|
||||
|
||||
// Agent config and package info states
|
||||
const [agentConfig, setAgentConfig] = useState<AgentConfig>();
|
||||
|
@ -91,7 +88,6 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
|
|||
} else {
|
||||
setFormState('INVALID');
|
||||
setPackageInfo(undefined);
|
||||
setMaxStep('');
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
|
@ -105,7 +101,6 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
|
|||
} else {
|
||||
setFormState('INVALID');
|
||||
setAgentConfig(undefined);
|
||||
setMaxStep('');
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
|
@ -189,9 +184,7 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
|
|||
|
||||
const layoutProps = {
|
||||
from,
|
||||
basePath,
|
||||
cancelUrl,
|
||||
maxStep,
|
||||
agentConfig,
|
||||
packageInfo,
|
||||
};
|
||||
|
|
|
@ -5,4 +5,3 @@
|
|||
*/
|
||||
|
||||
export type CreateDatasourceFrom = 'package' | 'config';
|
||||
export type CreateDatasourceStep = 'selectConfig' | 'selectPackage' | 'configure' | 'review';
|
||||
|
|
Loading…
Reference in a new issue