[ILM] edit components

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

@@ -0,0 +1,38 @@
+/*
+ * 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, { cloneElement, Children, Fragment, ReactElement } from 'react';
+import { EuiFormRow, EuiFormRowProps } from '@elastic/eui';
+
+type Props = EuiFormRowProps & {
+  errorKey: string;
+  isShowingErrors: boolean;
+  errors: Record<string, string[]>;
+};
+
+export const ErrableFormRow: React.FunctionComponent<Props> = ({
+  errorKey,
+  isShowingErrors,
+  errors,
+  children,
+  ...rest
+}) => {
+  return (
+    <EuiFormRow
+      isInvalid={isShowingErrors && errors[errorKey].length > 0}
+      error={errors[errorKey]}
+      {...rest}
+    >
+      <Fragment>
+        {Children.map(children, (child) =>
+          cloneElement(child as ReactElement, {
+            isInvalid: isShowingErrors && errors[errorKey].length > 0,
+          })
+        )}
+      </Fragment>
+    </EuiFormRow>
+  );
+};

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

@@ -5,6 +5,13 @@
  */
 
 export { ActiveBadge } from './active_badge';
+export { ErrableFormRow } from './form_errors';
 export { LearnMoreLink } from './learn_more_link';
-export { PhaseErrorMessage } from './phase_error_message';
+export { MinAgeInput } from './min_age_input';
+export { NodeAllocation } from './node_allocation';
+export { NodeAttrsDetails } from './node_attrs_details';
 export { OptionalLabel } from './optional_label';
+export { PhaseErrorMessage } from './phase_error_message';
+export { PolicyJsonFlyout } from './policy_json_flyout';
+export { SetPriorityInput } from './set_priority_input';
+export { SnapshotPolicies } from './snapshot_policies';

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

@@ -8,7 +8,7 @@ import React, { ReactNode } from 'react';
 import { EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { createDocLink } from '../../services/documentation';
+import { createDocLink } from '../../../services/documentation';
 
 interface Props {
   docPath: string;

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.js → x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.tsx

@@ -16,10 +16,10 @@ import {
   PHASE_COLD,
   PHASE_DELETE,
 } from '../../../constants';
-import { LearnMoreLink } from '../../components';
-import { ErrableFormRow } from '../form_errors';
+import { LearnMoreLink } from './learn_more_link';
+import { ErrableFormRow } from './form_errors';
 
-function getTimingLabelForPhase(phase) {
+function getTimingLabelForPhase(phase: string) {
   // NOTE: Hot phase isn't necessary, because indices begin in the hot phase.
   switch (phase) {
     case PHASE_WARM:
@@ -39,7 +39,7 @@ function getTimingLabelForPhase(phase) {
   }
 }
 
-function getUnitsAriaLabelForPhase(phase) {
+function getUnitsAriaLabelForPhase(phase: string) {
   // NOTE: Hot phase isn't necessary, because indices begin in the hot phase.
   switch (phase) {
     case PHASE_WARM:
@@ -68,9 +68,23 @@ function getUnitsAriaLabelForPhase(phase) {
   }
 }
 
-export const MinAgeInput = (props) => {
-  const { rolloverEnabled, errors, phaseData, phase, setPhaseData, isShowingErrors } = props;
+interface Props {
+  rolloverEnabled: boolean;
+  errors: Record<string, string[]>;
+  phaseData: any;
+  phase: string;
+  setPhaseData: (dataKey: string, value: any) => void;
+  isShowingErrors: boolean;
+}
 
+export const MinAgeInput: React.FunctionComponent<Props> = ({
+  rolloverEnabled,
+  errors,
+  phaseData,
+  phase,
+  setPhaseData,
+  isShowingErrors,
+}) => {
   let daysOptionLabel;
   let hoursOptionLabel;
   let minutesOptionLabel;

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

@@ -16,11 +16,11 @@ import {
   EuiButton,
 } from '@elastic/eui';
 
-import { PHASE_NODE_ATTRS } from '../../../../constants';
-import { LearnMoreLink } from '../../../components/learn_more_link';
-import { ErrableFormRow } from '../../form_errors';
-import { useLoadNodes } from '../../../../services/api';
-import { NodeAttrsDetails } from '../node_attrs_details';
+import { PHASE_NODE_ATTRS } from '../../../constants';
+import { LearnMoreLink } from './learn_more_link';
+import { ErrableFormRow } from './form_errors';
+import { useLoadNodes } from '../../../services/api';
+import { NodeAttrsDetails } from './node_attrs_details';
 
 interface Props {
   phase: string;

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

@@ -20,7 +20,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 
-import { useLoadNodeDetails } from '../../../../services/api';
+import { useLoadNodeDetails } from '../../../services/api';
 
 interface Props {
   close: () => void;

x-pack/plugins/index_lifecycle_management/public/application/sections/components/phase_error_message.js → x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_error_message.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { EuiBadge } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export const PhaseErrorMessage = ({ isShowingErrors }) => {
+export const PhaseErrorMessage = ({ isShowingErrors }: { isShowingErrors: boolean }) => {
   return isShowingErrors ? (
     <EuiBadge className="eui-alignMiddle" color="danger">
       <FormattedMessage