[Cases] Show warning when all cases table reaches 10k cases message (#…

…164323)

## Summary

Fixes #154625

_**Note:**_ Cases max limit is set as 40 for below recording:


https://github.com/elastic/kibana/assets/117571355/2dda5460-2f6d-4d83-acf6-13ea93b11bac




### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios


### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Release Note:

Show a warning message to inform user that navigating after the 10Kth
case is not possible.

---------

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx

@@ -191,7 +191,10 @@ describe('AllCasesListGeneric', () => {
       expect(
         screen.getAllByTestId('case-table-column-createdAt')[0].querySelector('.euiToolTipAnchor')
       ).toHaveTextContent(removeMsFromDate(useGetCasesMockState.data.cases[0].createdAt));
-      expect(screen.getByTestId('case-table-case-count')).toHaveTextContent('Showing 10 cases');
+      expect(screen.getByTestId('case-table-case-count')).toHaveTextContent(
+        `Showing 10 of ${useGetCasesMockState.data.total} cases`
+      );
+      expect(screen.queryByTestId('all-cases-maximum-limit-warning')).not.toBeInTheDocument();
     });
   });
 

x-pack/plugins/cases/public/components/all_cases/table.tsx

@@ -79,6 +79,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
   ) : (
     <>
       <CasesTableUtilityBar
+        pagination={pagination}
         isSelectorView={isSelectorView}
         totalCases={data.total ?? 0}
         selectedCases={selectedCases}

x-pack/plugins/cases/public/components/all_cases/translations.ts

@@ -31,12 +31,28 @@ export const SHOWING_SELECTED_CASES = (totalRules: number) =>
     defaultMessage: 'Selected {totalRules} {totalRules, plural, =1 {case} other {cases}}',
   });
 
-export const SHOWING_CASES = (totalRules: number) =>
+export const SHOWING_CASES = (totalRules: number, pageSize: number) =>
   i18n.translate('xpack.cases.caseTable.showingCasesTitle', {
-    values: { totalRules },
-    defaultMessage: 'Showing {totalRules} {totalRules, plural, =1 {case} other {cases}}',
+    values: { totalRules, pageSize },
+    defaultMessage:
+      'Showing {pageSize} of {totalRules} {totalRules, plural, =1 {case} other {cases}}',
+  });
+
+export const MAX_CASES = (maxCases: number) =>
+  i18n.translate('xpack.cases.caseTable.maxCases', {
+    values: { maxCases },
+    defaultMessage:
+      'The results were capped at {maxCases} to maintain performance. Try limiting your search to reduce the results.',
   });
 
+export const DISMISS = i18n.translate('xpack.cases.caseTable.dismiss', {
+  defaultMessage: 'Dismiss',
+});
+
+export const NOT_SHOW_AGAIN = i18n.translate('xpack.cases.caseTable.notShowAgain', {
+  defaultMessage: 'Do not show again',
+});
+
 export const UNIT = (totalCount: number) =>
   i18n.translate('xpack.cases.caseTable.unit', {
     values: { totalCount },