Upgrade EUI to v79.0.1

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'));