Upgrade EUI to v81.0.0 (#158330)

## Summary `@elastic/eui@80.0.0` ⏩ `@elastic/eui@81.0.0` --- ## [`81.0.0`](https://github.com/elastic/eui/tree/v81.0.0) - Added ability to set `options.checked` to "mixed" in `EuiSelectable` ([#6774](elastic/eui#6774)) **Bug fixes** - Portalled components (e.g. `EuiPopover`, `EuiModal`, `EuiFlyout`) will correctly inherit text color from its nearest `EuiThemeProvider` parent. `<EuiText color="default">` is no longer needed. ([#6775](elastic/eui#6775)) **Breaking changes** - `EuiSelectable` no longer renders a `data-test-selected` attribute on its list items. Use the `aria-checked` property instead ([#6774](elastic/eui#6774)) - Nested `EuiThemeProvider`s now render a wrapping `<span>` element in order to correctly set the inherited text `color` of all descendants. `<EuiText color="default">` is no longer needed. ([#6775](elastic/eui#6775)) --------- Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Constance Chen <constance.chen@elastic.co>
elastic · May 31, 2023 · aa1d266 · aa1d266
1 parent 8744c0d
commit aa1d266
Show file tree

Hide file tree

Showing 21 changed files with 109 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "80.0.0",
+    "@elastic/eui": "81.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/content-management/table_list/src/table_list_view.test.tsx b/packages/content-management/table_list/src/table_list_view.test.tsx
@@ -450,7 +450,7 @@ describe('TableListView', () => {
       expect(filterOptions.map((wrapper) => wrapper.text())).toEqual([
         'Name A-Z ',
         'Name Z-A ',
-        'Recently updated - Checked option. ',
+        'Recently updated. Checked option. ',
         'Least recently updated ',
       ]);
     });
@@ -532,7 +532,7 @@ describe('TableListView', () => {
       expect(filterOptions.map((wrapper) => wrapper.text())).toEqual([
         'Name A-Z ',
         'Name Z-A ',
-        'Recently updated - Checked option. ', // checked
+        'Recently updated. Checked option. ', // checked
         'Least recently updated ',
       ]);
 
@@ -571,7 +571,7 @@ describe('TableListView', () => {
 
       expect(filterOptions.map((wrapper) => wrapper.text())).toEqual([
         'Name A-Z ',
-        'Name Z-A - Checked option. ', // now this option is checked
+        'Name Z-A. Checked option. ', // now this option is checked
         'Recently updated ',
         'Least recently updated ',
       ]);

diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -1499,40 +1499,50 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Checked option.',
       }
     ),
-    'euiSelectableListItem.checkedOptionInstructions': i18n.translate(
-      'core.euiSelectableListItem.checkedOptionInstructions',
+    'euiSelectableListItem.excludedOption': i18n.translate(
+      'core.euiSelectableListItem.excludedOption',
       {
-        defaultMessage: 'To uncheck this option, press enter.',
+        defaultMessage: 'Excluded option.',
       }
     ),
-    'euiSelectableListItem.includedOption': i18n.translate(
-      'core.euiSelectableListItem.includedOption',
+    'euiSelectableListItem.checkOptionInstructions': i18n.translate(
+      'core.euiSelectableListItem.checkOptionInstructions',
       {
-        defaultMessage: 'Selected option.',
+        defaultMessage: 'To check this option, press Enter.',
       }
     ),
-    'euiSelectableListItem.includedOptionInstructions': i18n.translate(
-      'core.euiSelectableListItem.includedOptionInstructions',
+    'euiSelectableListItem.uncheckOptionInstructions': i18n.translate(
+      'core.euiSelectableListItem.uncheckOptionInstructions',
       {
-        defaultMessage: 'To exclude this option, press enter.',
+        defaultMessage: 'To uncheck this option, press Enter.',
       }
     ),
-    'euiSelectableListItem.excludedOption': i18n.translate(
-      'core.euiSelectableListItem.excludedOption',
+    'euiSelectableListItem.excludeOptionInstructions': i18n.translate(
+      'core.euiSelectableListItem.excludeOptionInstructions',
       {
-        defaultMessage: 'Excluded option.',
+        defaultMessage: 'To exclude this option, press Enter.',
+      }
+    ),
+    'euiSelectableListItem.mixedOption': i18n.translate('core.euiSelectableListItem.mixedOption', {
+      defaultMessage: 'Mixed (indeterminate) option.',
+    }),
+
+    'euiSelectableListItem.mixedOptionInstructions': i18n.translate(
+      'core.euiSelectableListItem.mixedOptionInstructions',
+      {
+        defaultMessage: 'To check this option for all, press Enter once.',
       }
     ),
-    'euiSelectableListItem.excludedOptionInstructions': i18n.translate(
-      'core.euiSelectableListItem.excludedOptionInstructions',
+    'euiSelectableListItem.mixedOptionUncheckInstructions': i18n.translate(
+      'core.euiSelectableListItem.mixedOptionUncheckInstructions',
       {
-        defaultMessage: 'To uncheck this option, press enter.',
+        defaultMessage: 'To uncheck this option for all, press Enter twice.',
       }
     ),
-    'euiSelectableListItem.unckeckedOptionInstructions': i18n.translate(
-      'core.euiSelectableListItem.unckeckedOptionInstructions',
+    'euiSelectableListItem.mixedOptionExcludeInstructions': i18n.translate(
+      'core.euiSelectableListItem.mixedOptionExcludeInstructions',
       {
-        defaultMessage: 'To select this option, press enter.',
+        defaultMessage: 'To exclude this option for all, press Enter twice.',
       }
     ),
     'euiSelectableTemplateSitewide.loadingResults': i18n.translate(

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.4.0': ['Elastic License 2.0'],
-  '@elastic/eui@80.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@81.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx b/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx
@@ -100,7 +100,7 @@ describe('Options list popover', () => {
       '[data-test-subj="optionsList-control-available-options"] ul'
     );
     availableOptions.children().forEach((child, i) => {
-      expect(child.text()).toBe(`${selections[i]} - Checked option.`);
+      expect(child.text()).toBe(`${selections[i]}. Checked option.`);
     });
   });
 
@@ -134,7 +134,7 @@ describe('Options list popover', () => {
     });
     const validSelection = findTestSubject(popover, 'optionsList-control-selection-bark');
     expect(validSelection.find('.euiSelectableListItem__text').text()).toEqual(
-      'bark - Checked option.'
+      'bark. Checked option.'
     );
     expect(
       validSelection.find('div[data-test-subj="optionsList-document-count-badge"]').text().trim()
@@ -143,7 +143,7 @@ describe('Options list popover', () => {
     expect(title).toEqual('Ignored selection');
     const invalidSelection = findTestSubject(popover, 'optionsList-control-ignored-selection-woof');
     expect(invalidSelection.find('.euiSelectableListItem__text').text()).toEqual(
-      'woof - Checked option.'
+      'woof. Checked option.'
     );
     expect(invalidSelection.hasClass('optionsList__selectionInvalid')).toBe(true);
   });
@@ -230,7 +230,7 @@ describe('Options list popover', () => {
     const availableOptions = popover.find(
       '[data-test-subj="optionsList-control-available-options"] ul'
     );
-    expect(availableOptions.text()).toBe('Exists - Checked option.');
+    expect(availableOptions.text()).toBe('Exists. Checked option.');
   });
 
   test('when sorting suggestions, show both sorting types for keyword field', async () => {
@@ -244,7 +244,7 @@ describe('Options list popover', () => {
 
     const sortingOptionsDiv = findTestSubject(popover, 'optionsListControl__sortingOptions');
     const optionsText = sortingOptionsDiv.find('ul li').map((element) => element.text().trim());
-    expect(optionsText).toEqual(['By document count - Checked option.', 'Alphabetically']);
+    expect(optionsText).toEqual(['By document count. Checked option.', 'Alphabetically']);
   });
 
   test('sorting popover selects appropriate sorting type on load', async () => {
@@ -259,7 +259,7 @@ describe('Options list popover', () => {
 
     const sortingOptionsDiv = findTestSubject(popover, 'optionsListControl__sortingOptions');
     const optionsText = sortingOptionsDiv.find('ul li').map((element) => element.text().trim());
-    expect(optionsText).toEqual(['By document count', 'Alphabetically - Checked option.']);
+    expect(optionsText).toEqual(['By document count', 'Alphabetically. Checked option.']);
 
     const ascendingButton = findTestSubject(popover, 'optionsList__sortOrder_asc').instance();
     expect(ascendingButton).toHaveClass('euiButtonGroupButton-isSelected');
@@ -276,7 +276,7 @@ describe('Options list popover', () => {
 
     const sortingOptionsDiv = findTestSubject(popover, 'optionsListControl__sortingOptions');
     const optionsText = sortingOptionsDiv.find('ul li').map((element) => element.text().trim());
-    expect(optionsText).toEqual(['By document count - Checked option.']);
+    expect(optionsText).toEqual(['By document count. Checked option.']);
   });
 
   test('ensure warning icon does not show up when testAllowExpensiveQueries = true/undefined', async () => {

diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx
@@ -59,8 +59,8 @@ export const PageControlsComponent: FC<Props> = ({
   const currentPage = page + 1;
 
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="none" style={{ margin: '0 12px' }}>
-      <EuiThemeProvider colorMode="dark">
+    <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
+      <EuiFlexGroup alignItems="center" gutterSize="none" style={{ margin: '0 12px' }}>
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
             color="text"
@@ -94,8 +94,8 @@ export const PageControlsComponent: FC<Props> = ({
             aria-label="Next Page"
           />
         </EuiFlexItem>
-      </EuiThemeProvider>
-    </EuiFlexGroup>
+      </EuiFlexGroup>
+    </EuiThemeProvider>
   );
 };
 

diff --git a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.test.tsx
@@ -30,7 +30,7 @@ jest.mock('@kbn/unified-search-plugin/public', () => {
 
 interface IndexPatternPickerOption {
   label: string;
-  checked?: 'on' | 'off';
+  checked?: 'on' | 'off' | 'mixed';
 }
 
 const fieldsOne = [

diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_rules/bulk_edit_rules.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_rules/bulk_edit_rules.cy.ts
@@ -94,6 +94,7 @@ import { getAvailablePrebuiltRulesCount } from '../../tasks/api_calls/prebuilt_r
 import { setRowsPerPageTo } from '../../tasks/table_pagination';
 
 const RULE_NAME = 'Custom rule for bulk actions';
+const EUI_SELECTABLE_LIST_ITEM_SR_TEXT = '. To check this option, press Enter.';
 
 const prePopulatedIndexPatterns = ['index-1-*', 'index-2-*'];
 const prePopulatedTags = ['test-default-tag-1', 'test-default-tag-2'];
@@ -248,7 +249,7 @@ describe('Detection rules, bulk edit', () => {
       const resultingTags = [...prePopulatedTags, ...tagsToBeAdded];
 
       // check if only pre-populated tags exist in the tags filter
-      checkTagsInTagsFilter(prePopulatedTags);
+      checkTagsInTagsFilter(prePopulatedTags, EUI_SELECTABLE_LIST_ITEM_SR_TEXT);
 
       selectNumberOfRules(expectedNumberOfCustomRulesToBeEdited);
 
@@ -264,14 +265,14 @@ describe('Detection rules, bulk edit', () => {
       // check that new tags were added to tags filter
       // tags in tags filter sorted alphabetically
       const resultingTagsInFilter = [...resultingTags].sort();
-      checkTagsInTagsFilter(resultingTagsInFilter);
+      checkTagsInTagsFilter(resultingTagsInFilter, EUI_SELECTABLE_LIST_ITEM_SR_TEXT);
     });
 
     it('Display success toast after adding tags', () => {
       const tagsToBeAdded = ['tag-to-add-1', 'tag-to-add-2'];
 
       // check if only pre-populated tags exist in the tags filter
-      checkTagsInTagsFilter(prePopulatedTags);
+      checkTagsInTagsFilter(prePopulatedTags, EUI_SELECTABLE_LIST_ITEM_SR_TEXT);
 
       selectNumberOfRules(expectedNumberOfCustomRulesToBeEdited);
 
@@ -286,7 +287,7 @@ describe('Detection rules, bulk edit', () => {
       const tagsToOverwrite = ['overwrite-tag-1'];
 
       // check if only pre-populated tags exist in the tags filter
-      checkTagsInTagsFilter(prePopulatedTags);
+      checkTagsInTagsFilter(prePopulatedTags, EUI_SELECTABLE_LIST_ITEM_SR_TEXT);
 
       selectNumberOfRules(expectedNumberOfCustomRulesToBeEdited);
 
@@ -307,15 +308,15 @@ describe('Detection rules, bulk edit', () => {
       testAllTagsBadges(tagsToOverwrite);
 
       // check that only new tags are in the tag filter
-      checkTagsInTagsFilter(tagsToOverwrite);
+      checkTagsInTagsFilter(tagsToOverwrite, EUI_SELECTABLE_LIST_ITEM_SR_TEXT);
     });
 
     it('Delete tags from custom rules', () => {
       const tagsToDelete = prePopulatedTags.slice(0, 1);
       const resultingTags = prePopulatedTags.slice(1);
 
       // check if only pre-populated tags exist in the tags filter
-      checkTagsInTagsFilter(prePopulatedTags);
+      checkTagsInTagsFilter(prePopulatedTags, EUI_SELECTABLE_LIST_ITEM_SR_TEXT);
 
       selectNumberOfRules(expectedNumberOfCustomRulesToBeEdited);
 
@@ -329,7 +330,7 @@ describe('Detection rules, bulk edit', () => {
       testAllTagsBadges(resultingTags);
 
       // check that tags were removed from the tag filter
-      checkTagsInTagsFilter(resultingTags);
+      checkTagsInTagsFilter(resultingTags, EUI_SELECTABLE_LIST_ITEM_SR_TEXT);
     });
   });
 

diff --git a/x-pack/plugins/security_solution/cypress/screens/alerts_detection_rules.ts b/x-pack/plugins/security_solution/cypress/screens/alerts_detection_rules.ts
@@ -146,7 +146,7 @@ export const RULES_TAGS_FILTER_BTN = '[data-test-subj="tags-filter-popover-butto
 
 export const RULES_TAGS_FILTER_POPOVER = '[data-test-subj="tags-filter-popover"]';
 
-export const RULES_SELECTED_TAG = '.euiSelectableListItem[data-test-selected="true"]';
+export const RULES_SELECTED_TAG = '.euiSelectableListItem[aria-checked="true"]';
 
 export const SELECTED_RULES_NUMBER_LABEL = '[data-test-subj="selectedRules"]';
 

diff --git a/x-pack/plugins/security_solution/cypress/tasks/rules_bulk_edit.ts b/x-pack/plugins/security_solution/cypress/tasks/rules_bulk_edit.ts
@@ -244,14 +244,15 @@ export const selectTimelineTemplate = (timelineTitle: string) => {
 /**
  * check if rule tags filter populated with a list of tags
  * @param tags
+ * @param srOnlyText SR-only text appended by EUI
  */
-export const checkTagsInTagsFilter = (tags: string[]) => {
+export const checkTagsInTagsFilter = (tags: string[], srOnlyText: string = '') => {
   cy.get(RULES_TAGS_FILTER_BTN).contains(`Tags${tags.length}`).click();
 
   cy.get(EUI_SELECTABLE_LIST_ITEM)
     .should('have.length', tags.length)
     .each(($el, index) => {
-      cy.wrap($el).should('have.text', tags[index]);
+      cy.wrap($el).should('have.text', `${tags[index]}${srOnlyText}`);
     });
 };
 

diff --git a/...ugins/security_solution/public/management/components/effected_policy_select/test_utils.ts b/...ugins/security_solution/public/management/components/effected_policy_select/test_utils.ts
@@ -93,5 +93,5 @@ export const isEffectedPolicySelected = async (
     throw new Error(`No policy found in EffectedPolicySelect at index position ${atIndex}`);
   }
 
-  return item.dataset.testSelected === 'true';
+  return item.getAttribute('aria-checked') === 'true';
 };
diff --git a/...components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx b/...components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx
@@ -1089,14 +1089,14 @@ describe('Response actions history', () => {
         RESPONSE_ACTION_API_COMMANDS_NAMES.length
       );
       expect(getAllByTestId(`${filterPrefix}-option`).map((option) => option.textContent)).toEqual([
-        'isolate',
-        'release',
-        'kill-process',
-        'suspend-process',
-        'processes',
-        'get-file',
-        'execute',
-        'upload',
+        'isolate. To check this option, press Enter.',
+        'release. To check this option, press Enter.',
+        'kill-process. To check this option, press Enter.',
+        'suspend-process. To check this option, press Enter.',
+        'processes. To check this option, press Enter.',
+        'get-file. To check this option, press Enter.',
+        'execute. To check this option, press Enter.',
+        'upload. To check this option, press Enter.',
       ]);
     });
 

diff --git a/...lution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx b/...lution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx
@@ -14,7 +14,6 @@ import {
   EuiLoadingSpinner,
   EuiBottomBar,
   EuiSpacer,
-  EuiThemeProvider,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -167,18 +166,16 @@ export const PolicyFormLayout = React.memo(() => {
       <EuiBottomBar paddingSize="s">
         <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiThemeProvider colorMode="dark">
-              <EuiButtonEmpty
-                color="text"
-                onClick={handleCancelOnClick}
-                data-test-subj="policyDetailsCancelButton"
-              >
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.policy.details.cancel"
-                  defaultMessage="Cancel"
-                />
-              </EuiButtonEmpty>
-            </EuiThemeProvider>
+            <EuiButtonEmpty
+              color="text"
+              onClick={handleCancelOnClick}
+              data-test-subj="policyDetailsCancelButton"
+            >
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.policy.details.cancel"
+                defaultMessage="Cancel"
+              />
+            </EuiButtonEmpty>
           </EuiFlexItem>
           {showEditableFormFields && (
             <EuiFlexItem grow={false}>