[ILM] TS conversion of Edit policy components (#74747)

* [ILM] Convert node allocation component to TS and use hooks * [ILM] Fix jest tests * [ILM] Fix i18n check * [ILM] Implement code review suggestions * [ILM] Fix type check, docs link and button maxWidth in NodeAllocation component * Fix internaliation error * [ILM] Convert node details flyout to TS * [ILM] Fix useState declaration * [ILM] Fix useState declaration * [ILM] Fix jest test * [ILM] Change error message when unable to load node attributes * [ILM] Change error message when unable to load node details * [ILM] Delete a period in error callout * [ILM] Delete a period in error callout * [ILM] Convert node details flyout to TS * [ILM] Fix i18n check * [ILM] Fix useState declaration * [ILM] Fix useState declaration * [ILM] Fix jest test * [ILM] Change error message when unable to load node details * [ILM] Delete a period in error callout * [ILM] edit components * [ILM] Fix review suggestions Co-authored-by: Elastic Machine <[email protected]>
elastic · Aug 14, 2020 · 64b8b88 · 64b8b88
1 parent 459e9d6
commit 64b8b88
Show file tree

Hide file tree

Showing 32 changed files with 267 additions and 310 deletions.
diff --git a/...ation/sections/components/active_badge.js → ...s/edit_policy/components/active_badge.tsx b/...ation/sections/components/active_badge.js → ...s/edit_policy/components/active_badge.tsx
diff --git a/...ent/public/application/sections/edit_policy/components/cold_phase/cold_phase.container.js b/...ent/public/application/sections/edit_policy/components/cold_phase/cold_phase.container.js
diff --git a/...fecycle_management/public/application/sections/edit_policy/components/cold_phase/index.js b/...fecycle_management/public/application/sections/edit_policy/components/cold_phase/index.js
diff --git a/...public/application/sections/edit_policy/components/delete_phase/delete_phase.container.js b/...public/application/sections/edit_policy/components/delete_phase/delete_phase.container.js
diff --git a/...cycle_management/public/application/sections/edit_policy/components/delete_phase/index.js b/...cycle_management/public/application/sections/edit_policy/components/delete_phase/index.js
diff --git a/...tion/sections/edit_policy/form_errors.tsx → ...ns/edit_policy/components/form_errors.tsx b/...tion/sections/edit_policy/form_errors.tsx → ...ns/edit_policy/components/form_errors.tsx
diff --git a/...ement/public/application/sections/edit_policy/components/hot_phase/hot_phase.container.js b/...ement/public/application/sections/edit_policy/components/hot_phase/hot_phase.container.js
diff --git a/...ifecycle_management/public/application/sections/edit_policy/components/hot_phase/index.js b/...ifecycle_management/public/application/sections/edit_policy/components/hot_phase/index.js
diff --git a/.../application/sections/components/index.js → .../sections/edit_policy/components/index.ts b/.../application/sections/components/index.js → .../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';
diff --git a/...n/sections/components/learn_more_link.tsx → ...dit_policy/components/learn_more_link.tsx b/...n/sections/components/learn_more_link.tsx → ...dit_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;

diff --git a/...s/edit_policy/components/min_age_input.js → .../edit_policy/components/min_age_input.tsx b/...s/edit_policy/components/min_age_input.js → .../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,24 @@ function getUnitsAriaLabelForPhase(phase) {
   }
 }
 
-export const MinAgeInput = (props) => {
-  const { rolloverEnabled, errors, phaseData, phase, setPhaseData, isShowingErrors } = props;
+interface Props {
+  rolloverEnabled: boolean;
+  errors: Record<string, string[]>;
+  phase: string;
+  // TODO add types for phaseData and setPhaseData after policy is typed
+  phaseData: any;
+  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;

diff --git a/...nents/node_allocation/node_allocation.tsx → ...dit_policy/components/node_allocation.tsx b/...nents/node_allocation/node_allocation.tsx → ...dit_policy/components/node_allocation.tsx
@@ -16,17 +16,18 @@ 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;
-  setPhaseData: (dataKey: string, value: any) => void;
-  errors: any;
+  errors: Record<string, string[]>;
+  // TODO add types for phaseData and setPhaseData after policy is typed
   phaseData: any;
+  setPhaseData: (dataKey: string, value: any) => void;
   isShowingErrors: boolean;
 }
 

diff --git a/...node_attrs_details/node_attrs_details.tsx → ..._policy/components/node_attrs_details.tsx b/...node_attrs_details/node_attrs_details.tsx → ..._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;

diff --git a/...management/public/application/sections/edit_policy/components/node_attrs_details/index.ts b/...management/public/application/sections/edit_policy/components/node_attrs_details/index.ts
diff --git a/...ion/sections/components/optional_label.js → ...edit_policy/components/optional_label.tsx b/...ion/sections/components/optional_label.js → ...edit_policy/components/optional_label.tsx
diff --git a/...ections/components/phase_error_message.js → ...policy/components/phase_error_message.tsx b/...ections/components/phase_error_message.js → ...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

diff --git a/...cycle_management/public/application/sections/edit_policy/components/policy_json_flyout.js b/...cycle_management/public/application/sections/edit_policy/components/policy_json_flyout.js