Update eui deprecated components in screenshotting plugin (#164068)

## Summary Partially addresses #161422 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
elastic · Sep 11, 2023 · e72780a · e72780a
1 parent 1b5f105
commit e72780a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 50 deletions.
diff --git a/x-pack/plugins/screenshotting/public/app/app.tsx b/x-pack/plugins/screenshotting/public/app/app.tsx
@@ -7,14 +7,6 @@
 
 import './app.scss';
 import React, { useContext, useMemo, useRef } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-} from '@elastic/eui';
 import type { ExpressionRendererParams } from '@kbn/expressions-plugin/public';
 import { useExpressionRenderer } from '@kbn/expressions-plugin/public';
 import { SCREENSHOTTING_EXPRESSION, SCREENSHOTTING_EXPRESSION_INPUT } from '../../common';
@@ -40,28 +32,16 @@ export function App() {
   });
 
   return (
-    <EuiPage paddingSize="none" data-shared-items-container data-shared-items-count={1}>
-      <EuiPageBody>
-        <EuiPageContent
-          borderRadius="none"
-          hasShadow={false}
-          paddingSize="none"
-          className="eui-fullHeight"
-        >
-          <EuiPageContentBody className="eui-fullHeight">
-            <EuiFlexGroup className="eui-fullHeight" gutterSize="none" direction="column">
-              <EuiFlexItem className="eui-fullHeight">
-                <div
-                  data-shared-item={!isEmpty || !error || null}
-                  data-render-error={!isEmpty && error ? error.message : null}
-                  ref={elementRef}
-                  className="scrExpression"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+    <div
+      data-shared-item={!isEmpty || !error || null}
+      data-render-error={!isEmpty && error ? error.message : null}
+      ref={elementRef}
+      className="scrExpression"
+      style={{
+        background: 'white',
+        width: '100vw',
+        height: '100vh',
+      }}
+    />
   );
 }
diff --git a/x-pack/plugins/screenshotting/public/plugin.tsx b/x-pack/plugins/screenshotting/public/plugin.tsx
@@ -21,26 +21,24 @@ interface SetupDeps {
 
 export class ScreenshottingPlugin implements Plugin<void, void, SetupDeps> {
   setup({ application }: CoreSetup, { screenshotMode }: SetupDeps) {
-    if (!screenshotMode.isScreenshotMode()) {
-      return;
-    }
-
-    application.register({
-      id: SCREENSHOTTING_APP_ID,
-      title: 'Screenshotting Expressions Renderer',
-      navLinkStatus: AppNavLinkStatus.hidden,
-      chromeless: true,
+    if (screenshotMode.isScreenshotMode()) {
+      application.register({
+        id: SCREENSHOTTING_APP_ID,
+        title: 'Screenshotting Expressions Renderer',
+        navLinkStatus: AppNavLinkStatus.hidden,
+        chromeless: true,
 
-      mount: async ({ element }: AppMountParameters) => {
-        ReactDOM.render(
-          <ScreenshotModeContext.Provider value={screenshotMode}>
-            <App />
-          </ScreenshotModeContext.Provider>,
-          element
-        );
-        return () => ReactDOM.unmountComponentAtNode(element);
-      },
-    });
+        mount: async ({ element }: AppMountParameters) => {
+          ReactDOM.render(
+            <ScreenshotModeContext.Provider value={screenshotMode}>
+              <App />
+            </ScreenshotModeContext.Provider>,
+            element
+          );
+          return () => ReactDOM.unmountComponentAtNode(element);
+        },
+      });
+    }
   }
 
   start() {}