[Inspector] Migrate scss to emotion (#216195)

## Summary

Part of https://github.com/elastic/kibana/issues/207852 for inspector.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-optimizer/limits.yml

@@ -85,7 +85,7 @@ pageLoadAssetSize:
   infra: 184320
   ingestPipelines: 58003
   inputControlVis: 172675
-  inspector: 148711
+  inspector: 17600
   interactiveSetup: 80000
   inventory: 27430
   investigate: 17970

src/platform/plugins/shared/inspector/public/index.scss

@@ -1 +0,0 @@
-@import 'views/index';

src/platform/plugins/shared/inspector/public/index.ts

@@ -7,10 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-// TODO: https://github.com/elastic/kibana/issues/109900
-
-import './index.scss';
-
 import { PluginInitializerContext } from '@kbn/core/public';
 import { InspectorPublicPlugin } from './plugin';
 

src/platform/plugins/shared/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap

@@ -48,7 +48,7 @@ Array [
     </div>
   </div>,
   <div
-    class="euiFlyoutBody insInspectorPanel__flyoutBody emotion-euiFlyoutBody"
+    class="euiFlyoutBody emotion-EuiFlyoutBody"
   >
     <div
       class="euiFlyoutBody__overflow emotion-euiFlyoutBody__overflow-noBanner"

src/platform/plugins/shared/inspector/public/ui/inspector_panel.scss

@@ -1,16 +0,0 @@
-.insInspectorPanel__flyoutBody {
-  .euiFlyoutBody__overflowContent {
-    height: 100%;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: column;
-
-    >div {
-      flex-grow: 0;
-    }
-
-    .insRequestCodeViewer {
-      flex-grow: 1;
-    }
-  }
-}

src/platform/plugins/shared/inspector/public/ui/inspector_panel.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './inspector_panel.scss';
 import { i18n } from '@kbn/i18n';
 import React, { Component, Suspense } from 'react';
 import PropTypes from 'prop-types';
@@ -28,6 +27,7 @@ import {
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { SharePluginStart } from '@kbn/share-plugin/public';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
+import { css } from '@emotion/react';
 import { InspectorViewDescription } from '../types';
 import { Adapters } from '../../common';
 import { InspectorViewChooser } from './inspector_view_chooser';
@@ -143,7 +143,24 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutHeader>
-        <EuiFlyoutBody className="insInspectorPanel__flyoutBody">
+        <EuiFlyoutBody
+          css={css({
+            '.euiFlyoutBody__overflowContent': {
+              height: '100%',
+              display: 'flex',
+              flexWrap: 'nowrap',
+              flexDirection: 'column',
+
+              '> div': {
+                flexGrow: 0,
+              },
+
+              '.insRequestCodeViewer': {
+                flexGrow: 1,
+              },
+            },
+          })}
+        >
           {this.renderSelectedPanel()}
         </EuiFlyoutBody>
       </KibanaContextProvider>

src/platform/plugins/shared/inspector/public/views/_index.scss

@@ -1 +0,0 @@
-@import './requests/index';

src/platform/plugins/shared/inspector/public/views/requests/_index.scss

@@ -1 +0,0 @@
-@import './requests';

src/platform/plugins/shared/inspector/public/views/requests/_requests.scss

@@ -1,18 +0,0 @@
-.insRequestDetailsStats__icon {
-  margin-left: $euiSizeXS;
-}
-
-.insRequestSelector__singleRequest {
-  height: $euiButtonHeightSmall;
-  padding: 0 $euiSizeS;
-  display: flex;
-  align-items: center;
-}
-
-.insRequestSelector__menuSpinner {
-  margin-left: $euiSizeS;
-}
-
-.insRequestCodeViewer .react-monaco-editor-container {
-  flex-grow: 1; // Ensure the editor takes the full height of its flex container on Safari.
-}

src/platform/plugins/shared/inspector/public/views/requests/components/details/req_code_viewer.tsx

@@ -16,6 +16,7 @@ import { i18n } from '@kbn/i18n';
 import { XJsonLang } from '@kbn/monaco';
 import React, { ReactNode } from 'react';
 import { CodeEditor } from '@kbn/code-editor';
+import { css } from '@emotion/react';
 
 interface RequestCodeViewerProps {
   value: string;
@@ -37,6 +38,11 @@ export const RequestCodeViewer = ({ value, actions }: RequestCodeViewerProps) =>
       wrap={false}
       responsive={false}
       className="insRequestCodeViewer"
+      css={css({
+        '.react-monaco-editor-container': {
+          flexGrow: 1, // Ensure the editor takes the full height of its flex container on Safari.
+        },
+      })}
     >
       <EuiFlexItem grow={false}>
         <EuiSpacer size="s" />

src/platform/plugins/shared/inspector/public/views/requests/components/details/req_details_stats.tsx

@@ -8,6 +8,7 @@
  */
 
 import React, { Component } from 'react';
+import { css } from '@emotion/react';
 import {
   EuiIcon,
   EuiIconTip,
@@ -15,46 +16,48 @@ import {
   EuiTableBody,
   EuiTableRow,
   EuiTableRowCell,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Request, RequestStatistic } from '../../../../../common/adapters/request/types';
 import { DetailViewProps } from './types';
+import { Request, RequestStatistic } from '../../../../../common/adapters/request/types';
 
 // TODO: Replace by property once available
 interface RequestDetailsStatRow extends RequestStatistic {
   id: string;
 }
 
+const StatRow = ({ stat }: { stat: RequestDetailsStatRow }) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <EuiTableRow>
+      <EuiTableRowCell>
+        {stat.label}
+
+        <span css={css({ marginLeft: euiTheme.size.xs })}>
+          {stat.description ? (
+            <EuiIconTip
+              aria-label={i18n.translate('inspector.requests.descriptionRowIconAriaLabel', {
+                defaultMessage: 'Description',
+              })}
+              type="questionInCircle"
+              color="subdued"
+              content={stat.description}
+            />
+          ) : (
+            <EuiIcon type="empty" />
+          )}
+        </span>
+      </EuiTableRowCell>
+      <EuiTableRowCell>{stat.value}</EuiTableRowCell>
+    </EuiTableRow>
+  );
+};
+
 export class RequestDetailsStats extends Component<DetailViewProps> {
   static shouldShow = (request: Request) =>
     Boolean(request.stats && Object.keys(request.stats).length);
 
-  renderStatRow = (stat: RequestDetailsStatRow) => {
-    return [
-      <EuiTableRow key={stat.id}>
-        <EuiTableRowCell>
-          {stat.label}
-
-          <span className="insRequestDetailsStats__icon">
-            {stat.description ? (
-              <EuiIconTip
-                aria-label={i18n.translate('inspector.requests.descriptionRowIconAriaLabel', {
-                  defaultMessage: 'Description',
-                })}
-                type="questionInCircle"
-                color="subdued"
-                content={stat.description}
-              />
-            ) : (
-              <EuiIcon type="empty" />
-            )}
-          </span>
-        </EuiTableRowCell>
-        <EuiTableRowCell>{stat.value}</EuiTableRowCell>
-      </EuiTableRow>,
-    ];
-  };
-
   render() {
     const { stats } = this.props.request;
 
@@ -68,7 +71,11 @@ export class RequestDetailsStats extends Component<DetailViewProps> {
 
     return (
       <EuiTable responsiveBreakpoint={false}>
-        <EuiTableBody>{sortedStats.map(this.renderStatRow)}</EuiTableBody>
+        <EuiTableBody>
+          {sortedStats.map((stat) => (
+            <StatRow stat={stat} key={stat.id} />
+          ))}
+        </EuiTableBody>
       </EuiTable>
     );
   }