Fix page layouts, clean up unused code (#63992)

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx

@@ -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}

x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx

@@ -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`

x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx

@@ -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" />

x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/without_header.tsx

@@ -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 {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx

@@ -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>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx

@@ -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,
   };

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/types.ts

@@ -5,4 +5,3 @@
  */
 
 export type CreateDatasourceFrom = 'package' | 'config';
-export type CreateDatasourceStep = 'selectConfig' | 'selectPackage' | 'configure' | 'review';