Update large record report warning

public/components/report_definitions/report_settings/report_settings.tsx

@@ -22,9 +22,7 @@
   EuiCompressedCheckboxGroup,
   EuiCompressedComboBox,
   EuiFormRow,
-  OuiCallOut,
-  EuiText,
-  EuiIcon,
+  EuiCallOut,
 } from '@elastic/eui';
 import {
   REPORT_SOURCE_RADIOS,
@@ -33,7 +31,7 @@
   REPORT_SOURCE_TYPES,
   SAVED_SEARCH_FORMAT_OPTIONS,
 } from './report_settings_constants';
 import ReactMde from 'react-mde';
 import 'react-mde/lib/styles/css/react-mde-all.css';
 import {
   reportDefinitionParams,
@@ -54,14 +52,14 @@
 } from './report_settings_helpers';
 import { TimeRangeSelect } from './time_range';
 import { converter } from '../utils';
 import { ReportDefinitionSchemaType } from 'server/model';
 import { ReportTrigger } from '../report_trigger';
 
 type ReportSettingProps = {
   edit: boolean;
   editDefinitionId: string;
   reportDefinitionRequest: reportDefinitionParams;
   httpClientProps: any;
   timeRange: timeRangeParams;
   showSettingsReportNameError: boolean;
   settingsReportNameErrorMessage: string;
@@ -92,22 +90,22 @@
   const [reportDescription, setReportDescription] = useState('');
   const [reportSourceId, setReportSourceId] = useState('dashboardReportSource');
 
   const [dashboardSourceSelect, setDashboardSourceSelect] = useState([] as any);
   const [dashboards, setDashboards] = useState([] as any);
 
   const [visualizationSourceSelect, setVisualizationSourceSelect] = useState(
     [] as any
   );
   const [visualizations, setVisualizations] = useState([] as any);
 
   const [savedSearchSourceSelect, setSavedSearchSourceSelect] = useState(
     [] as any
   );
   const [savedSearches, setSavedSearches] = useState([] as any);
   const [savedSearchRecordLimit, setSavedSearchRecordLimit] = useState(10000);
 
   const [notebooksSourceSelect, setNotebooksSourceSelect] = useState([] as any);
   const [notebooks, setNotebooks] = useState([] as any);
 
   const [fileFormat, setFileFormat] = useState('pdf');
 
@@ -187,7 +185,7 @@
     }
   };
 
   const handleDashboardSelect = (e: string | any[]) => {
     setDashboardSourceSelect(e);
 
     let fromInContext = false;
@@ -398,7 +396,7 @@
               response.report_definition;
             const {
               report_params: {
                 core_params: { header, footer },
               },
             } = reportDefinition;
             // set header/footer default
@@ -499,7 +497,7 @@
     }
   };
 
   const setDefaultFileFormat = (fileFormat) => {
     let index = 0;
     for (index = 0; index < PDF_PNG_FILE_FORMAT_OPTIONS.length; ++index) {
       if (
@@ -605,7 +603,7 @@
       }
     });
 
     if (reportSource == REPORT_SOURCE_TYPES.savedSearch) {
       setSavedSearchRecordLimit(
         response.report_definition.report_params.core_params.limit
       );
@@ -621,7 +619,7 @@
     );
   };
 
   const defaultConfigurationEdit = async (httpClientProps) => {
     let editData = {};
     await httpClientProps
       .get(`../api/reporting/reportDefinitions/${editDefinitionId}`)
@@ -634,8 +632,8 @@
     return editData;
   };
 
   const defaultConfigurationCreate = async (httpClientProps) => {
     let reportSourceOptions = {
       dashboard: [],
       visualizations: [],
       savedSearch: [],
@@ -801,22 +799,26 @@
           />
         </EuiCompressedFormRow>
         <EuiSpacer />
+        {savedSearchRecordLimit > 10000 ? (
+          <>
+            <EuiCallOut
+              color="primary"
+              title={i18n.translate(
+                'opensearch.reports.reportSettingProps.form.savedSearchLargeRecordLimitWarning',
+                { defaultMessage: 'Generating reports with a large number of records can cause memory issues' }
+              )}
+              iconType="iInCircle"
+              size="s"
+            />
+            <EuiSpacer size="xs" />
+          </>
+        ) : null}
         <EuiFormRow
           id="reportSourceSavedSearchRecordLimit"
           label={i18n.translate(
             'opensearch.reports.reportSettingProps.form.savedSearchRecordLimit',
             { defaultMessage: 'Record limit' }
           )}
-          helpText={
-            savedSearchRecordLimit > 10000 ? (
-              <EuiText color="warning" size="xs">
-                <EuiIcon color="warning" type="alert" size="s" /> Generating
-                very large reports can cause memory issues.
-              </EuiText>
-            ) : (
-              ''
-            )
-          }
         >
           <EuiFieldNumber
             value={savedSearchRecordLimit}