[Reporting] Fix the delete button in the reporting management dashboa…

…rd (#106016) * Fix the delete button in the reporting management dashboard * Update delete button copy for consistency
elastic · Jul 22, 2021 · e952f9a · e952f9a
1 parent dd142c4
commit e952f9a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/x-pack/plugins/reporting/public/management/report_delete_button.tsx b/x-pack/plugins/reporting/public/management/report_delete_button.tsx
@@ -92,7 +92,7 @@ export class ReportDeleteButton extends PureComponent<Props, State> {
           {intl.formatMessage(
             {
               id: 'xpack.reporting.listing.table.deleteReportButton',
-              defaultMessage: `Delete ({num})`,
+              defaultMessage: `Delete {num, plural, one {report} other {reports} }`,
             },
             { num: jobsToDelete.length }
           )}

diff --git a/x-pack/plugins/reporting/public/management/report_listing.tsx b/x-pack/plugins/reporting/public/management/report_listing.tsx
@@ -147,7 +147,7 @@ class ReportListingUi extends Component<Props, State> {
         <MigrateIlmPolicyCallOut toasts={this.props.toasts} />
 
         <EuiSpacer size={'l'} />
-        {this.renderTable()}
+        <div>{this.renderTable()}</div>
 
         <EuiSpacer size="s" />
         <EuiFlexGroup justifyContent="flexEnd">
@@ -489,6 +489,14 @@ class ReportListingUi extends Component<Props, State> {
 
     return (
       <Fragment>
+        {this.state.selectedJobs.length > 0 && (
+          <Fragment>
+            <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="m">
+              <EuiFlexItem grow={false}>{this.renderDeleteButton()}</EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
+          </Fragment>
+        )}
         <EuiBasicTable
           tableCaption={i18n.translate('xpack.reporting.listing.table.captionDescription', {
             defaultMessage: 'Reports generated in Kibana applications',
@@ -514,7 +522,6 @@ class ReportListingUi extends Component<Props, State> {
           onChange={this.onTableChange}
           data-test-subj="reportJobListing"
         />
-        {this.state.selectedJobs.length > 0 ? this.renderDeleteButton() : null}
       </Fragment>
     );
   }