[Observability Solution][Maintenance] Move to Emotion CSS, enable Tel…

…emetry and i18n ESLint rules for all Obs plugins (#177785)

## Summary

This does two things:

* Moves to Emotion CSS from .scss files
* Enables Telemetry and i18n ESLint rules for all Observability apps 

## Why?

**Move to Emotion CSS**
There were four .scss files total in the 17 Observability plugins. Two
of them were empty. The remaining two had one class each. By removing
the two empty files and moving to Emotion, we can remove the lines
pertaining to .scss files in the CODEOWNERS file.

**Enabling Telemetry and i18n ESLint rules for all Observability apps**
One of the reasons for consolidating Obs apps into one folder was to
create a more consistent development experience across apps in the
Observability org.

By changing the eslint rule config to enable the
[Telemetry](https://github.com/elastic/kibana/tree/main/packages/kbn-eslint-plugin-telemetry)
and
[i18n](https://github.com/elastic/kibana/tree/main/packages/kbn-eslint-plugin-i18n)
ESLint rules on all `.ts` and `tsx` files in `observability_solution`,
we enable the rule for 5 apps that did not have them enabled before and
we ensure that the rule will immediately be enabled on new Observability
applications at the moment of creation.

## Related PRs:
- [x] [Move APM ](#177433)
- [x] [Move Data Quality](#177456)
- [x] [Move Exploratory
View](#177440)
- [x] [Move Infra](#177443)
- [X] Move Logs Explorer
- [x] [Move Logs Shared](#177735)
- [x] [Move Observability AI
Assistant](#177427)
- [x] [Move Observability
App](#177437)
- [x] [Move Observability
Onboarding](#177458)
- [x] [Move Observability
Shared](#177463)
- [x] [Move Profiling](#177453)
- [x] [Move Synthetics](#177464) 
- [x] [Move Uptime](#177466)
- [x] [Move UX](#177470)

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Marco Antonio Ghiani <[email protected]>

.eslintrc.js

@@ -911,19 +911,7 @@ module.exports = {
     {
       files: [
         'x-pack/plugins/aiops/**/*.tsx',
-        'x-pack/plugins/infra/**/*.tsx',
-        'x-pack/plugins/observability_solution/apm/**/*.tsx',
-        'x-pack/plugins/observability_solution/dataset_quality/**/*.tsx',
-        'x-pack/plugins/observability_solution/exploratory_view/**/*.tsx',
-        'x-pack/plugins/observability_solution/infra/**/*.tsx',
-        'x-pack/plugins/observability_solution/observability/**/*.tsx',
-        'x-pack/plugins/observability_solution/observability_ai_assistant/**/*.tsx',
-        'x-pack/plugins/observability_solution/observability_onboarding/**/*.tsx',
-        'x-pack/plugins/observability_solution/observability_shared/**/*.tsx',
-        'x-pack/plugins/observability_solution/profiling/**/*.tsx',
-        'x-pack/plugins/observability_solution/synthetics/**/*.tsx',
-        'x-pack/plugins/observability_solution/uptime/**/*.tsx',
-        'x-pack/plugins/observability_solution/ux/**/*.tsx',
+        'x-pack/plugins/observability_solution/**/*.tsx',
         'src/plugins/ai_assistant_management/**/*.tsx',
       ],
       rules: {
@@ -932,16 +920,7 @@ module.exports = {
     },
     {
       files: [
-        'x-pack/plugins/observability_solution/apm/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/exploratory_view/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/infra/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/observability/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/observability_ai_assistant/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/observability_onboarding/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/observability_shared/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/profiling/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/synthetics/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
-        'x-pack/plugins/observability_solution/ux/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
+        'x-pack/plugins/observability_solution/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
         'src/plugins/ai_assistant_management/**/!(*.stories.tsx|*.test.tsx|*.storybook_decorator.tsx|*.mock.tsx)',
       ],
       rules: {

.github/CODEOWNERS

@@ -1543,8 +1543,6 @@ x-pack/plugins/security_solution/server/lib/security_integrations @elastic/secur
 **/*.scss @elastic/kibana-design
 
 # Observability design
-/x-pack/plugins/observability_solution/apm/**/*.scss @elastic/observability-design
-/x-pack/plugins/observability_solution/infra/**/*.scss @elastic/observability-design
 /x-pack/plugins/fleet/**/*.scss @elastic/observability-design
 /x-pack/plugins/monitoring/**/*.scss @elastic/observability-design
 
@@ -1556,7 +1554,6 @@ x-pack/plugins/security_solution/server/lib/security_integrations @elastic/secur
 /x-pack/plugins/security_solution/**/*.scss @elastic/security-design
 /x-pack/plugins/security_solution_ess/**/*.scss @elastic/security-design
 /x-pack/plugins/security_solution_serverless/**/*.scss @elastic/security-design
-/x-pack/plugins/observability_solution/logs_explorer/**/*.scss @elastic/observability-design
 
 # Logstash
 #CC# /x-pack/plugins/logstash/ @elastic/logstash

x-pack/plugins/observability_solution/infra/public/apps/logs_app.tsx

@@ -12,7 +12,6 @@ import ReactDOM from 'react-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { AppMountParameters } from '@kbn/core/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
-import '../index.scss';
 import { LinkToLogsPage } from '../pages/link_to/link_to_logs';
 import { LogsPage } from '../pages/logs';
 import { InfraClientStartDeps, InfraClientStartExports } from '../types';

x-pack/plugins/observability_solution/infra/public/apps/metrics_app.tsx

@@ -12,7 +12,6 @@ import ReactDOM from 'react-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { AppMountParameters } from '@kbn/core/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
-import '../index.scss';
 import { InfraPublicConfig } from '../../common/plugin_config_types';
 import { LinkToMetricsPage } from '../pages/link_to/link_to_metrics';
 import { InfrastructurePage } from '../pages/metrics';

x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/add_data_button.tsx

@@ -37,7 +37,12 @@ export const AddDataButton: React.FunctionComponent<{}> = ({}) => {
   });
 
   return (
-    <EuiButtonEmpty {...onboardingLinkProps} iconType="plusInCircleFilled" size="xs">
+    <EuiButtonEmpty
+      data-test-subj="logsExplorerAddDataButtonButton"
+      {...onboardingLinkProps}
+      iconType="plusInCircleFilled"
+      size="xs"
+    >
       {addDataLabel}
     </EuiButtonEmpty>
   );

x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/list_status.tsx

@@ -60,7 +60,11 @@ export const ListStatus = ({
             }}
           />
         }
-        actions={[<EuiButton onClick={onRetry}>{noDataRetryLabel}</EuiButton>]}
+        actions={[
+          <EuiButton data-test-subj="logsExplorerListStatusButton" onClick={onRetry}>
+            {noDataRetryLabel}
+          </EuiButton>,
+        ]}
       />
     );
   }

x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/search_controls.tsx

@@ -42,6 +42,7 @@ export const SearchControls = ({ search, onSearch, onSort, isLoading }: SearchCo
       <EuiFlexGroup gutterSize="xs" responsive={false}>
         <EuiFlexItem>
           <EuiFieldSearch
+            data-test-subj="logsExplorerSearchControlsFieldSearch"
             compressed
             incremental
             value={search.name}

x-pack/plugins/observability_solution/logs_explorer/public/components/flyout_detail/sub_components/highlight_section.tsx

@@ -41,6 +41,7 @@ export function HighlightSection({ title, children, columns, ...props }: Highlig
   const showMoreButtonLabel = flyoutAccordionShowMoreText(hiddenCount);
   const showMoreButton = (
     <EuiButtonEmpty
+      data-test-subj="logsExplorerHighlightSectionShowMoreButton"
       size="xs"
       flush="left"
       css={{ width: '80px' }}

x-pack/plugins/observability_solution/logs_explorer/public/components/flyout_detail/sub_components/hover_popover_action.tsx

@@ -72,6 +72,7 @@ export const HoverActionPopover = ({
           {hoverActions.map((action) => (
             <EuiToolTip content={action.tooltipContent} key={action.id}>
               <EuiButtonIcon
+                data-test-subj="logsExplorerHoverActionPopoverButton"
                 size="xs"
                 iconType={action.iconType}
                 aria-label={action.tooltipContent as string}

x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/content.tsx

@@ -6,7 +6,9 @@
  */
 
 import React, { useMemo } from 'react';
+import { css } from '@emotion/css';
 import { EuiButtonIcon, EuiText } from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
 import type { DataGridCellValueElementProps } from '@kbn/unified-data-table';
 import { getShouldShowFieldHandler } from '@kbn/discover-utils';
 import { i18n } from '@kbn/i18n';
@@ -16,7 +18,6 @@ import { useDocDetail, getMessageWithFallbacks } from '../../hooks/use_doc_detai
 import { LogDocument } from '../../../common/document';
 import { LogLevel } from '../common/log_level';
 import * as constants from '../../../common/constants';
-import './virtual_column.scss';
 
 const SourceDocument = dynamic(
   () => import('@kbn/unified-data-table/src/components/source_document')
@@ -26,6 +27,11 @@ const DiscoverSourcePopoverContent = dynamic(
   () => import('@kbn/unified-data-table/src/components/source_popover_content')
 );
 
+const sourceDocumentClassName = css`
+  display: inline !important;
+  margin-left: ${euiThemeVars.euiSizeXS};
+`;
+
 const LogMessage = ({ field, value }: { field?: string; value: string }) => {
   const renderFieldPrefix = field && field !== constants.MESSAGE_FIELD;
   return (
@@ -115,7 +121,7 @@ export const Content = ({
           shouldShowFieldHandler={shouldShowFieldHandler}
           maxEntries={50}
           dataTestSubj="logsExplorerCellDescriptionList"
-          className="logsExplorerVirtualColumn__sourceDocument"
+          className={sourceDocumentClassName}
         />
       )}
     </span>

x-pack/plugins/observability_solution/logs_shared/public/components/data_search_progress.tsx

@@ -29,6 +29,7 @@ export const DataSearchProgress: React.FC<{
       {onCancel ? (
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
+            data-test-subj="logsSharedDataSearchProgressButton"
             color="danger"
             iconType="cross"
             onClick={onCancel}

x-pack/plugins/observability_solution/observability/public/pages/overview/components/news_feed/news_feed.tsx

@@ -15,17 +15,22 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import { css } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
 import { truncate } from 'lodash';
 import React, { useContext } from 'react';
 import { ThemeContext } from 'styled-components';
 import { NewsItem as INewsItem } from './helpers/get_news_feed';
-import './news_feed.scss';
 
 interface Props {
   items: INewsItem[];
 }
 
+const imageClassName = css`
+  box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05),
+    0 4.5px 10px rgba(0, 0, 0, 0.05);
+`;
+
 export function NewsFeed({ items }: Props) {
   return (
     // The news feed is manually added/edited, to prevent any errors caused by typos or missing fields,
@@ -98,7 +103,7 @@ function NewsItem({ item }: { item: INewsItem }) {
                   height={48}
                   alt={item.title.en}
                   src={item.image_url.en}
-                  className="obsNewsFeed__itemImg"
+                  className={imageClassName}
                 />
               </EuiFlexItem>
             )}

x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx

@@ -77,6 +77,7 @@ export function NavControl({}: {}) {
   return (
     <>
       <EuiButton
+        data-test-subj="observabilityAiAssistantAppNavControlButton"
         css={buttonCss}
         onClick={() => {
           service.conversations.openNewConversation({

x-pack/plugins/observability_solution/observability_logs_explorer/public/components/alerts_popover.tsx

@@ -228,6 +228,7 @@ export const AlertsPopover = () => {
       <EuiPopover
         button={
           <EuiButtonEmpty
+            data-test-subj="observabilityLogsExplorerAlertsPopoverAlertsButton"
             onClick={togglePopover}
             iconType="arrowDown"
             iconSide="right"