[Index Management] Verify if isLoading before showing warning in add …

…lifecycle confirm modal (elastic#209108)

Fixes elastic#208958

## Summary
In this modal, we show a warning banner if there is no policies. The
problem was that the modal was render before the policies are loading.
This PR adds a `isLoading` state that ensures that this warning only is
shown if the policy list is empty after it has been fully loaded.


### How to test

1. Navigate to Index Management.
2. Create an index.
3. Select the index --> Click "Manage index" --> Click "Add lifecycle
policy"
4. Verify that no warning flashes before the policy shows.

Co-authored-by: Elastic Machine <[email protected]>

x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.tsx

@@ -44,6 +44,7 @@ interface State {
   selectedAlias: string;
   policies: PolicyFromES[];
   policyErrorMessage?: string;
+  isLoading: boolean;
 }
 
 export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
@@ -53,6 +54,7 @@ export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
       policies: [],
       selectedPolicyName: '',
       selectedAlias: '',
+      isLoading: true,
     };
   }
   addPolicy = async () => {
@@ -218,7 +220,7 @@ export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
   async componentDidMount() {
     try {
       const policies = await loadPolicies();
-      this.setState({ policies });
+      this.setState({ policies, isLoading: false });
     } catch (err) {
       showApiError(
         err,
@@ -233,7 +235,7 @@ export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
     }
   }
   render() {
-    const { policies } = this.state;
+    const { policies, isLoading } = this.state;
     const { indexName, closeModal, getUrlForApp } = this.props;
     const title = (
       <FormattedMessage
@@ -244,7 +246,7 @@ export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
         }}
       />
     );
-    if (!policies.length) {
+    if (!isLoading && !policies.length) {
       return (
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>