added new prop fieldNotices to render callouts in correct position on…

… the left

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/described_form_row.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent, useState } from 'react';
+import {
+  EuiDescribedFormGroup,
+  EuiDescribedFormGroupProps,
+  EuiSwitchProps,
+  EuiSwitch,
+  EuiSpacer,
+} from '@elastic/eui';
+
+export interface SwitchProps
+  extends Omit<EuiSwitchProps, 'children' | 'checked' | 'value' | 'onChange'> {
+  /**
+   * use initialValue to specify an uncontrolled component
+   */
+  initialValue?: boolean;
+
+  /**
+   * checked and onChange together specify a controlled component
+   */
+  checked?: boolean;
+  onChange?: (nextValue: boolean) => void;
+}
+
+export type Props = EuiDescribedFormGroupProps & {
+  children: (() => JSX.Element) | JSX.Element | JSX.Element[] | undefined;
+
+  switchProps?: SwitchProps;
+
+  /**
+   * Use this prop to pass down components that should be rendered below the toggle like
+   * warnings or notices.
+   */
+  fieldNotices?: React.ReactNode;
+};
+
+export const DescribedFormRow: FunctionComponent<Props> = ({
+  children,
+  switchProps,
+  description,
+  fieldNotices,
+  ...restDescribedFormProps
+}) => {
+  if (
+    switchProps &&
+    !(typeof switchProps.checked === 'boolean' || typeof switchProps.initialValue === 'boolean')
+  ) {
+    throw new Error('Must specify controlled, uncontrolled component. See SwitchProps interface!');
+  }
+  const [uncontrolledIsContentVisible, setUncontrolledIsContentVisible] = useState<boolean>(
+    () => switchProps?.initialValue ?? false
+  );
+  const isContentVisible = Boolean(switchProps?.checked ?? uncontrolledIsContentVisible);
+
+  const renderToggle = () => {
+    if (!switchProps) {
+      return null;
+    }
+    const { onChange, checked, initialValue, ...restSwitchProps } = switchProps;
+
+    return (
+      <EuiSwitch
+        {...restSwitchProps}
+        checked={isContentVisible}
+        onChange={(e) => {
+          const nextValue = e.target.checked;
+          setUncontrolledIsContentVisible(nextValue);
+          if (onChange) {
+            onChange(nextValue);
+          }
+        }}
+      />
+    );
+  };
+  return (
+    <EuiDescribedFormGroup
+      {...restDescribedFormProps}
+      description={
+        <>
+          {description}
+          <EuiSpacer size="m" />
+          {renderToggle()}
+          {fieldNotices}
+        </>
+      }
+    >
+      {isContentVisible ? (typeof children === 'function' ? children() : children) : null}
+    </EuiDescribedFormGroup>
+  );
+};

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { DescribedFormRow } from './described_form_row';
+
+export { ToggleFieldWithDescribedFormRow } from './toggle_field_with_described_form_row';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/toggle_field_with_described_form_row.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { FunctionComponent } from 'react';
+
+import { UseField } from '../../../../../shared_imports';
+
+import {
+  DescribedFormRow,
+  Props as DescribedFormRowProps,
+  SwitchProps,
+} from './described_form_row';
+
+type Props = Omit<DescribedFormRowProps, 'switchProps'> & {
+  switchProps: Omit<SwitchProps, 'label'> & { path: string };
+};
+
+export const ToggleFieldWithDescribedFormRow: FunctionComponent<Props> = ({
+  switchProps,
+  ...passThroughProps
+}) => (
+  <UseField<boolean> path={switchProps.path}>
+    {(field) => {
+      return (
+        <DescribedFormRow
+          {...passThroughProps}
+          switchProps={{
+            ...switchProps,
+            label: field.label,
+            checked: field.value,
+            onChange: field.setValue,
+          }}
+        />
+      );
+    }}
+  </UseField>
+);

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx

@@ -20,13 +20,7 @@ import {
 
 import { Phases } from '../../../../../../../common/types';
 
-import {
-  useFormData,
-  UseField,
-  SelectField,
-  ToggleField,
-  NumericField,
-} from '../../../../../../shared_imports';
+import { useFormData, UseField, SelectField, NumericField } from '../../../../../../shared_imports';
 
 import { i18nTexts } from '../../../i18n_texts';
 
@@ -36,12 +30,7 @@ import { useEditPolicyContext } from '../../../edit_policy_context';
 
 import { ROLLOVER_FORM_PATHS } from '../../../constants';
 
-import {
-  LearnMoreLink,
-  ActiveBadge,
-  DescribedFormRow,
-  ToggleFieldWithDescribedFormRow,
-} from '../../';
+import { LearnMoreLink, ActiveBadge, ToggleFieldWithDescribedFormRow } from '../../';
 
 import {
   ForcemergeField,

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx

@@ -327,9 +327,9 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({ phase }) =>
               }}
             />
           </EuiTextColor>
-          {renderInfoCallout()}
         </>
       }
+      fieldNotices={renderInfoCallout()}
       fullWidth
     >
       {isDisabled ? <div /> : renderField}