[ML] DF Analytics: Ensure creation flyout can be opened when no jobs exist (#50417) (#50682)

* Ensure create flyout can be open when no jobs exist

* remove redundant isModalVisible check

Author: alvarezmelissa87

x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx

@@ -43,6 +43,7 @@ import { AnalyticStatsBarStats, StatsBar } from '../../../../../components/stats
 import { RefreshAnalyticsListButton } from '../refresh_analytics_list_button';
 import { CreateAnalyticsButton } from '../create_analytics_button';
 import { CreateAnalyticsFormProps } from '../../hooks/use_create_analytics_form';
+import { CreateAnalyticsFlyoutWrapper } from '../create_analytics_flyout_wrapper';
 
 function getItemIdToExpandedRowMap(
   itemIds: DataFrameAnalyticsId[],
@@ -239,6 +240,9 @@ export const DataFrameAnalyticsList: FC<Props> = ({
           }
           data-test-subj="mlNoDataFrameAnalyticsFound"
         />
+        {!isManagementTable && createAnalyticsForm && (
+          <CreateAnalyticsFlyoutWrapper {...createAnalyticsForm} />
+        )}
       </Fragment>
     );
   }

x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_button/create_analytics_button.tsx

@@ -14,12 +14,10 @@ import { createPermissionFailureMessage } from '../../../../../privilege/check_p
 
 import { CreateAnalyticsFormProps } from '../../hooks/use_create_analytics_form';
 
-import { CreateAnalyticsAdvancedEditor } from '../create_analytics_advanced_editor';
-import { CreateAnalyticsForm } from '../create_analytics_form';
-import { CreateAnalyticsFlyout } from '../create_analytics_flyout';
+import { CreateAnalyticsFlyoutWrapper } from '../create_analytics_flyout_wrapper';
 
 export const CreateAnalyticsButton: FC<CreateAnalyticsFormProps> = props => {
-  const { disabled, isAdvancedEditorEnabled, isModalVisible } = props.state;
+  const { disabled } = props.state;
   const { openModal } = props.actions;
 
   const button = (
@@ -51,12 +49,7 @@ export const CreateAnalyticsButton: FC<CreateAnalyticsFormProps> = props => {
   return (
     <Fragment>
       {button}
-      {isModalVisible && (
-        <CreateAnalyticsFlyout {...props}>
-          {isAdvancedEditorEnabled === false && <CreateAnalyticsForm {...props} />}
-          {isAdvancedEditorEnabled === true && <CreateAnalyticsAdvancedEditor {...props} />}
-        </CreateAnalyticsFlyout>
-      )}
+      <CreateAnalyticsFlyoutWrapper {...props} />
     </Fragment>
   );
 };

x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_flyout_wrapper/create_analytics_flyout_wrapper.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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, { FC } from 'react';
+
+import { CreateAnalyticsFormProps } from '../../hooks/use_create_analytics_form';
+
+import { CreateAnalyticsAdvancedEditor } from '../create_analytics_advanced_editor';
+import { CreateAnalyticsForm } from '../create_analytics_form';
+import { CreateAnalyticsFlyout } from '../create_analytics_flyout';
+
+export const CreateAnalyticsFlyoutWrapper: FC<CreateAnalyticsFormProps> = props => {
+  const { isAdvancedEditorEnabled, isModalVisible } = props.state;
+
+  if (isModalVisible === false) {
+    return null;
+  }
+
+  return (
+    <CreateAnalyticsFlyout {...props}>
+      {isAdvancedEditorEnabled === false && <CreateAnalyticsForm {...props} />}
+      {isAdvancedEditorEnabled === true && <CreateAnalyticsAdvancedEditor {...props} />}
+    </CreateAnalyticsFlyout>
+  );
+};

x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_flyout_wrapper/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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 { CreateAnalyticsFlyoutWrapper } from './create_analytics_flyout_wrapper';