add data-test-subj prop support to Ingest components

elastic · Jun 12, 2020 · f59602e · f59602e
1 parent a97958d
commit f59602e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx
@@ -36,6 +36,7 @@ export interface HeaderProps {
   rightColumn?: JSX.Element;
   rightColumnGrow?: EuiFlexItemProps['grow'];
   tabs?: EuiTabProps[];
+  'data-test-subj'?: string;
 }
 
 const HeaderColumns: React.FC<Omit<HeaderProps, 'tabs'>> = memo(
@@ -53,8 +54,9 @@ export const Header: React.FC<HeaderProps> = ({
   rightColumnGrow,
   tabs,
   maxWidth,
+  'data-test-subj': dataTestSubj,
 }) => (
-  <Container>
+  <Container data-test-subj={dataTestSubj}>
     <Wrapper maxWidth={maxWidth}>
       <HeaderColumns
         leftColumn={leftColumn}

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx
@@ -15,18 +15,27 @@ const Page = styled(EuiPage)`
 interface Props extends HeaderProps {
   restrictWidth?: number;
   restrictHeaderWidth?: number;
+  'data-test-subj'?: string;
   children?: React.ReactNode;
 }
 
 export const WithHeaderLayout: React.FC<Props> = ({
   restrictWidth,
   restrictHeaderWidth,
   children,
+  'data-test-subj': dataTestSubj,
   ...rest
 }) => (
   <Fragment>
-    <Header maxWidth={restrictHeaderWidth} {...rest} />
-    <Page restrictWidth={restrictWidth || 1200}>
+    <Header
+      maxWidth={restrictHeaderWidth}
+      data-test-subj={dataTestSubj ? `${dataTestSubj}_header` : undefined}
+      {...rest}
+    />
+    <Page
+      restrictWidth={restrictWidth || 1200}
+      data-test-subj={dataTestSubj ? `${dataTestSubj}_page` : undefined}
+    >
       <EuiPageBody>
         <EuiSpacer size="m" />
         {children}

diff --git a/...cations/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx b/...cations/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
@@ -26,7 +26,16 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
   cancelOnClick?: React.ReactEventHandler;
   agentConfig?: AgentConfig;
   packageInfo?: PackageInfo;
-}> = ({ from, cancelUrl, cancelOnClick, agentConfig, packageInfo, children }) => {
+  'data-test-subj'?: string;
+}> = ({
+  from,
+  cancelUrl,
+  cancelOnClick,
+  agentConfig,
+  packageInfo,
+  children,
+  'data-test-subj': dataTestSubj,
+}) => {
   const leftColumn = (
     <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
       <EuiFlexItem>
@@ -138,6 +147,7 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
       leftColumn={leftColumn}
       rightColumn={rightColumn}
       rightColumnGrow={false}
+      data-test-subj={dataTestSubj}
     >
       {children}
     </WithHeaderLayout>

diff --git a/...public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx b/...public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx
@@ -333,7 +333,7 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
   ];
 
   return (
-    <CreateDatasourcePageLayout {...layoutProps}>
+    <CreateDatasourcePageLayout {...layoutProps} data-test-subj="createDataSource">
       {formState === 'CONFIRM' && agentConfig && (
         <ConfirmDeployConfigModal
           agentCount={agentCount}