Upgrade EUI to v79.0.1 (#156925)

## Summary

`[email protected]` ⏩ `[email protected]`

🦴 The primary changes in this upgrade are around the deprecated
`EuiLoadingContent` being removed in favor of `EuiSkeletonText`.
- Most instances have been a [direct swap of
usage](327626a),
but [some replacements were a bit more
opinionated](e6ceb36)
as I saw them as potential to take advantage of `EuiSkeletonText`'s
syntactical sugar and screen reader announcements for when state
switches to loaded.

---

## [`79.0.1`](https://github.com/elastic/eui/tree/v79.0.1)

**Bug fixes**

- Fixed broken push `EuiFlyout` behavior
([#6764](elastic/eui#6764))


## [`79.0.0`](https://github.com/elastic/eui/tree/v79.0.0)

- Updated all `EuiSkeleton` components with new props that allow for
more control over screen reader live announcements:
`announceLoadingStatus`, `announceLoadedStatus`, and `ariaLiveProps`
([#6752](elastic/eui#6752))
- Improved keyboard accessibility in `EuiPageHeader` by ensuring the
right side menu items come into focus from left to right.
([#6753](elastic/eui#6753))

**Breaking changes**

- Removed deprecated `EuiLoadingContent`. Use the `EuiSkeleton`
components instead. ([#6754](elastic/eui#6754))


## [`78.0.0`](https://github.com/elastic/eui/tree/v78.0.0)

- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and
`EuiSwitch` in their unchecked states to meet WCAG AA guidelines.
([#6729](elastic/eui#6729))
- Added React Testing Library `*ByTestSubject` custom commands to
`within()`. RTL utilities can be imported from
`@elastic/eui/lib/test/rtl`.
([#6737](elastic/eui#6737))
- Updated `EuiAvatar` to support a new letter `casing` prop that allow
customizing text capitalization
([#6739](elastic/eui#6739))
- Updated `EuiFocusTrap` to support the `gapMode` prop configuration
(now defaults to `padding`)
([#6744](elastic/eui#6744))

**Bug fixes**

- Fixed inconsistency in `EuiSearchBar`'s AND/OR semantics between DSL
and query string generation
([#6717](elastic/eui#6717))
- Fixed `EuiFieldNumber`'s native browser validity detection causing
extra unnecessary rerenders
([#6741](elastic/eui#6741))
- Fixed the `scrollLock` property on `EuiFocusTrap` (and other
components using `EuiFocusTrap`, such as `EuiFlyout` and `EuiModal`) to
no longer block scrolling on nested portalled content, such as combobox
dropdowns ([#6744](elastic/eui#6744))

**Breaking changes**

- `EuiAvatar`s with the default `user` type will now default to
capitalizing all initials in uppercase
([#6739](elastic/eui#6739))

---------

Co-authored-by: Kibana Machine <[email protected]>

package.json

@@ -97,7 +97,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "77.2.2",
+    "@elastic/eui": "79.0.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/kbn-cases-components/src/tooltip/skeleton.tsx

@@ -7,13 +7,19 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiLoadingContent, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlexItem,
+  EuiSkeletonTitle,
+  EuiSkeletonText,
+  EuiHorizontalRule,
+  EuiSpacer,
+} from '@elastic/eui';
 
 const SkeletonComponent: React.FC = () => {
   return (
     <EuiFlexItem css={{ width: 240 }} data-test-subj="tooltip-loading-content">
-      <EuiLoadingContent lines={1} css={{ width: 70, marginBottom: '12px' }} />
-      <EuiLoadingContent lines={3} />
+      <EuiSkeletonTitle size="xxxs" css={{ width: 70, marginBottom: '12px' }} />
+      <EuiSkeletonText lines={3} />
       <EuiHorizontalRule margin="xs" />
       <EuiSpacer size="s" />
     </EuiFlexItem>

packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx

@@ -10,7 +10,7 @@ import React, { useMemo } from 'react';
 import type { FC } from 'react';
 import { css } from '@emotion/react';
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiImage,
   EuiEmptyPrompt,
   EuiButton,
@@ -116,13 +116,16 @@ const EmptyViewerStateComponent: FC<EmptyViewerStateProps> = ({
     listType,
   ]);
 
-  if (viewerStatus === ViewerStatus.LOADING || viewerStatus === ViewerStatus.SEARCHING)
-    return <EuiLoadingContent lines={4} data-test-subj="loadingViewerState" />;
-
   return (
-    <EuiPanel css={panelCss} color={viewerStatus === 'empty_search' ? 'subdued' : 'transparent'}>
-      <EuiEmptyPrompt {...euiEmptyPromptProps} />
-    </EuiPanel>
+    <EuiSkeletonText
+      lines={4}
+      data-test-subj="loadingViewerState"
+      isLoading={viewerStatus === ViewerStatus.LOADING || viewerStatus === ViewerStatus.SEARCHING}
+    >
+      <EuiPanel css={panelCss} color={viewerStatus === 'empty_search' ? 'subdued' : 'transparent'}>
+        <EuiEmptyPrompt {...euiEmptyPromptProps} />
+      </EuiPanel>
+    </EuiSkeletonText>
   );
 };
 

src/dev/license_checker/config.ts

@@ -85,6 +85,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@77.2.2': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@79.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

src/plugins/console/public/application/components/editor_content_spinner.tsx

@@ -7,12 +7,12 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiLoadingContent, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
+import { EuiSkeletonText, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
 
 export const EditorContentSpinner: FunctionComponent = () => {
   return (
     <EuiPageContent className="conApp__editor__spinner">
-      <EuiLoadingContent lines={10} />
+      <EuiSkeletonText lines={10} />
     </EuiPageContent>
   );
 };

src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
+import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
 import type { FieldFormat, FieldFormatParams } from '@kbn/field-formats-plugin/common';
 import { memoize } from 'lodash';
 import React, { LazyExoticComponent, PureComponent } from 'react';
@@ -62,10 +62,10 @@ export class FormatEditor extends PureComponent<FormatEditorProps, FormatEditorS
           <React.Suspense
             fallback={
               // We specify minHeight to avoid too mitigate layout shifts while loading an editor
-              // ~430 corresponds to "4 lines" of EuiLoadingContent
+              // ~430 corresponds to "4 lines" of EuiSkeletonText
               <div style={{ minHeight: 430, marginTop: 8 }}>
                 <EuiDelayRender>
-                  <EuiLoadingContent lines={4} />
+                  <EuiSkeletonText lines={4} />
                 </EuiDelayRender>
               </div>
             }

src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
+import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
 import type {
   FieldFormatEditor as InnerFieldFormatEditor,
   FieldFormatEditorFactory,
@@ -67,10 +67,10 @@ export class FieldFormatEditor extends PureComponent<
           <React.Suspense
             fallback={
               // We specify minHeight to avoid too mitigate layout shifts while loading an editor
-              // ~430 corresponds to "4 lines" of EuiLoadingContent
+              // ~430 corresponds to "4 lines" of EuiSkeletonText
               <div style={{ minHeight: 430, marginTop: 8 }}>
                 <EuiDelayRender>
-                  <EuiLoadingContent lines={4} />
+                  <EuiSkeletonText lines={4} />
                 </EuiDelayRender>
               </div>
             }

src/plugins/discover/public/plugin.tsx

@@ -26,7 +26,7 @@ import { SharePluginStart, SharePluginSetup } from '@kbn/share-plugin/public';
 import { UrlForwardingSetup, UrlForwardingStart } from '@kbn/url-forwarding-plugin/public';
 import { HomePublicPluginSetup } from '@kbn/home-plugin/public';
 import { Start as InspectorPublicPluginStart } from '@kbn/inspector-plugin/public';
-import { EuiLoadingContent } from '@elastic/eui';
+import { EuiSkeletonText } from '@elastic/eui';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { SavedObjectsStart } from '@kbn/saved-objects-plugin/public';
 import { DEFAULT_APP_CATEGORIES } from '@kbn/core/public';
@@ -248,7 +248,7 @@ export class DiscoverPlugin
           <React.Suspense
             fallback={
               <DeferredSpinner>
-                <EuiLoadingContent />
+                <EuiSkeletonText />
               </DeferredSpinner>
             }
           >
@@ -266,7 +266,7 @@ export class DiscoverPlugin
         <React.Suspense
           fallback={
             <DeferredSpinner>
-              <EuiLoadingContent />
+              <EuiSkeletonText />
             </DeferredSpinner>
           }
         >

src/plugins/es_ui_shared/public/components/code_editor/index.tsx

@@ -7,18 +7,18 @@
  */
 
 import React from 'react';
-import { EuiLoadingContentProps, EuiLoadingContent } from '@elastic/eui';
+import { EuiSkeletonTextProps, EuiSkeletonText } from '@elastic/eui';
 import type { EuiCodeEditorProps } from './code_editor';
 
 const Placeholder = ({ height }: { height?: string }) => {
   const numericalHeight = height ? parseInt(height, 10) : 0;
-  // The height of one EuiLoadingContent line is 24px.
+  // The height of one EuiSkeletonText line is 24px.
   const lineHeight = 24;
   const calculatedLineCount =
     numericalHeight < lineHeight ? 1 : Math.floor(numericalHeight / lineHeight);
   const lines = Math.min(10, calculatedLineCount);
 
-  return <EuiLoadingContent lines={lines as EuiLoadingContentProps['lines']} />;
+  return <EuiSkeletonText lines={lines as EuiSkeletonTextProps['lines']} />;
 };
 
 const LazyEuiCodeEditor = React.lazy(() => import('./code_editor'));