[Synthetics] Fixes embedded components styles !! (#197188)

## Summary Fixes #190853 Fixes embedded components styles !! Hide multiple titles ### After <img width="1728" alt="image" src="https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a"> ### Before <img width="1251" alt="image" src="https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412"> --------- Co-authored-by: Kevin Delemme <[email protected]> (cherry picked from commit d6465c7)
elastic · Oct 30, 2024 · 63f60e0 · 63f60e0
1 parent b7c8696
commit 63f60e0
Show file tree

Hide file tree

Showing 18 changed files with 200 additions and 128 deletions.
diff --git a/...bservability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx b/...bservability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx
@@ -18,7 +18,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { i18n } from '@kbn/i18n';
 import { FormProvider, useForm } from 'react-hook-form';
 import { MonitorFilters } from '../monitors_overview/types';
 import { MonitorFiltersForm } from './monitor_filters_form';
@@ -29,12 +28,14 @@ interface MonitorConfigurationProps {
   };
   onCreate: (props: { filters: MonitorFilters }) => void;
   onCancel: () => void;
+  title: string;
 }
 
 export function MonitorConfiguration({
   initialInput,
   onCreate,
   onCancel,
+  title,
 }: MonitorConfigurationProps) {
   const methods = useForm<MonitorFilters>({
     defaultValues: {
@@ -57,64 +58,50 @@ export function MonitorConfiguration({
   };
 
   return (
-    <EuiFlyout data-test-subj="sloSingleOverviewConfiguration" onClose={onCancel}>
+    <EuiFlyout onClose={onCancel}>
       <EuiFlyoutHeader>
-        <EuiFlexGroup direction="column">
+        <EuiTitle>
+          <h2>{title}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiTitle>
-              <h2>
-                {i18n.translate(
-                  'xpack.synthetics.overviewEmbeddable.config.sloSelector.headerTitle',
-                  {
-                    defaultMessage: 'Overview configuration',
-                  }
-                )}
-              </h2>
-            </EuiTitle>
+            <EuiFlexGroup>
+              <EuiFlexItem grow>
+                <FormProvider {...methods}>
+                  <MonitorFiltersForm />
+                </FormProvider>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiFlyoutHeader>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiButtonEmpty
+            data-test-subj="syntheticsMonitorConfigurationCancelButton"
+            onClick={onCancel}
+          >
+            <FormattedMessage
+              id="xpack.synthetics.embeddable.config.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />
+          </EuiButtonEmpty>
 
-      <>
-        <EuiFlyoutBody>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiFlexGroup>
-                <EuiFlexItem data-test-subj="singleSloSelector" grow>
-                  <FormProvider {...methods}>
-                    <MonitorFiltersForm />
-                  </FormProvider>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiButtonEmpty
-              data-test-subj="syntheticsMonitorConfigurationCancelButton"
-              onClick={onCancel}
-            >
-              <FormattedMessage
-                id="xpack.synthetics.sloEmbeddable.config.cancelButtonLabel"
-                defaultMessage="Cancel"
-              />
-            </EuiButtonEmpty>
-
-            <EuiButton
-              data-test-subj="syntheticsMonitorConfigurationSaveButton"
-              isDisabled={!(formState.isDirty || !initialInput)}
-              onClick={onConfirmClick}
-              fill
-            >
-              <FormattedMessage
-                id="xpack.synthetics.overviewEmbeddableSlo.config.confirmButtonLabel"
-                defaultMessage="Save"
-              />
-            </EuiButton>
-          </EuiFlexGroup>
-        </EuiFlyoutFooter>
-      </>
+          <EuiButton
+            data-test-subj="syntheticsMonitorConfigurationSaveButton"
+            isDisabled={!(formState.isDirty || !initialInput)}
+            onClick={onConfirmClick}
+            fill
+          >
+            <FormattedMessage
+              id="xpack.synthetics.overviewEmbeddableSynthetics.config.confirmButtonLabel"
+              defaultMessage="Save"
+            />
+          </EuiButton>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
     </EuiFlyout>
   );
 }
diff --git a/...observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx b/...observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiIconTip } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { FieldSelector } from './field_selector';
@@ -23,18 +23,6 @@ export function MonitorFiltersForm() {
           )}
           name="monitorIds"
           dataTestSubj="syntheticsAvailabilityMonitorSelector"
-          tooltip={
-            <EuiIconTip
-              content={i18n.translate(
-                'xpack.synthetics.monitorEdit.syntheticsAvailability.monitor.tooltip',
-                {
-                  defaultMessage:
-                    'This is the monitor or monitors part of this monitor. Select "*" to group by project, tag, or location',
-                }
-              )}
-              position="top"
-            />
-          }
         />
         <FieldSelector
           label={i18n.translate('xpack.synthetics.monitorEdit.syntheticsAvailability.tags', {

diff --git a/...bility_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx b/...bility_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx
@@ -18,7 +18,9 @@ export async function openMonitorConfiguration({
   coreStart,
   pluginStart,
   initialState,
+  title,
 }: {
+  title: string;
   coreStart: CoreStart;
   pluginStart: ClientPluginsStart;
   initialState?: { filters: MonitorFilters };
@@ -37,6 +39,7 @@ export async function openMonitorConfiguration({
           >
             <QueryClientProvider client={queryClient}>
               <MonitorConfiguration
+                title={title}
                 initialInput={initialState}
                 onCreate={(update: { filters: MonitorFilters }) => {
                   flyoutSession.close();

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { MonitorFilters } from '../monitors_overview/types';
+
+export const areFiltersEmpty = (filters: MonitorFilters) => {
+  if (!filters) {
+    return true;
+  }
+
+  return (
+    !filters.monitorIds?.length &&
+    !filters.projects?.length &&
+    !filters.tags?.length &&
+    !filters.monitorTypes?.length &&
+    !filters.locations?.length
+  );
+};
diff --git a/...tion/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx b/...tion/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx
@@ -87,6 +87,12 @@ export const getMonitorsEmbeddableFactory = (
                 initialState: {
                   filters: filters$.getValue(),
                 },
+                title: i18n.translate(
+                  'xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.overview.title',
+                  {
+                    defaultMessage: 'Create monitors overview',
+                  }
+                ),
               });
               filters$.next(result.filters);
             } catch (e) {

diff --git a/...solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx b/...solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx
@@ -7,8 +7,8 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Subject } from 'rxjs';
-import { i18n } from '@kbn/i18n';
 import { useDispatch } from 'react-redux';
+import { areFiltersEmpty } from '../common/utils';
 import { getOverviewStore } from './redux_store';
 import { ShowSelectedFilters } from '../common/show_selected_filters';
 import { setOverviewPageStateAction } from '../../synthetics/state';
@@ -26,13 +26,11 @@ export const StatusGridComponent = ({
 }) => {
   const overviewStore = useRef(getOverviewStore());
 
+  const hasFilters = !areFiltersEmpty(filters);
+
   return (
     <EmbeddablePanelWrapper
-      title={i18n.translate(
-        'xpack.synthetics.statusOverviewComponent.embeddablePanelWrapper.monitorsLabel',
-        { defaultMessage: 'Monitors' }
-      )}
-      titleAppend={<ShowSelectedFilters filters={filters ?? {}} />}
+      titleAppend={hasFilters ? <ShowSelectedFilters filters={filters ?? {}} /> : null}
     >
       <SyntheticsEmbeddableContext reload$={reload$} reduxStore={overviewStore.current}>
         <MonitorsOverviewList filters={filters} />

diff --git a/...y_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx b/...y_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx
@@ -8,6 +8,8 @@
 import React, { useEffect, useRef } from 'react';
 import { Subject } from 'rxjs';
 import { useDispatch } from 'react-redux';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { areFiltersEmpty } from '../common/utils';
 import { getStatsOverviewStore } from './redux_store';
 import { ShowSelectedFilters } from '../common/show_selected_filters';
 import { MonitorFilters } from '../monitors_overview/types';
@@ -26,7 +28,16 @@ export const StatsOverviewComponent = ({
 
   return (
     <SyntheticsEmbeddableContext reload$={reload$} reduxStore={statsOverviewStore.current}>
-      <WithFiltersComponent filters={filters} />
+      <EuiFlexGroup
+        alignItems="center"
+        css={{
+          height: '100%',
+        }}
+      >
+        <EuiFlexItem>
+          <WithFiltersComponent filters={filters ?? {}} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </SyntheticsEmbeddableContext>
   );
 };
@@ -36,14 +47,21 @@ const WithFiltersComponent = ({ filters }: { filters: MonitorFilters }) => {
   useEffect(() => {
     dispatch(
       setOverviewPageStateAction({
-        tags: filters.tags.map((tag) => tag.value),
-        locations: filters.locations.map((location) => location.value),
-        monitorTypes: filters.monitorTypes.map((monitorType) => monitorType.value),
-        monitorQueryIds: filters.monitorIds.map((monitorId) => monitorId.value),
-        projects: filters.projects.map((project) => project.value),
+        tags: filters.tags?.map((tag) => tag.value),
+        locations: filters.locations?.map((location) => location.value),
+        monitorTypes: filters.monitorTypes?.map((monitorType) => monitorType.value),
+        monitorQueryIds: filters.monitorIds?.map((monitorId) => monitorId.value),
+        projects: filters.projects?.map((project) => project.value),
       })
     );
   }, [dispatch, filters]);
 
-  return <OverviewStatus titleAppend={<ShowSelectedFilters filters={filters ?? {}} />} />;
+  const hasFilters = !areFiltersEmpty(filters);
+
+  return (
+    <OverviewStatus
+      titleAppend={hasFilters ? <ShowSelectedFilters filters={filters ?? {}} /> : null}
+      hideTitle={true}
+    />
+  );
 };
diff --git a/...n/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx b/...n/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx
@@ -80,6 +80,9 @@ export const getStatsOverviewEmbeddableFactory = (
                 initialState: {
                   filters: filters$.getValue(),
                 },
+                title: i18n.translate('xpack.synthetics.editSloOverviewEmbeddableTitle.title', {
+                  defaultMessage: 'Create monitor stats',
+                }),
               });
               filters$.next(result.filters);
             } catch (e) {

diff --git a/...servability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx b/...servability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx
@@ -7,7 +7,6 @@
 
 import React from 'react';
 import { createBrowserHistory } from 'history';
-import { EuiPanel } from '@elastic/eui';
 import { Router } from '@kbn/shared-ux-router';
 import { Subject } from 'rxjs';
 import { Store } from 'redux';
@@ -29,14 +28,7 @@ export const SyntheticsEmbeddableContext: React.FC<
       <SyntheticsEmbeddableStateContextProvider>
         <Router history={createBrowserHistory()}>
           <SyntheticsSettingsContextProvider {...props}>
-            <EuiPanel
-              hasShadow={false}
-              css={{
-                width: '100%',
-              }}
-            >
-              {children}
-            </EuiPanel>
+            {children}
           </SyntheticsSettingsContextProvider>
         </Router>
       </SyntheticsEmbeddableStateContextProvider>

diff --git a/...n/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx b/...n/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx
@@ -38,6 +38,12 @@ export function createMonitorsOverviewPanelAction(
       const initialState = await openMonitorConfiguration({
         coreStart,
         pluginStart,
+        title: i18n.translate(
+          'xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.overview.title',
+          {
+            defaultMessage: 'Create monitors overview',
+          }
+        ),
       });
       try {
         embeddable.addNewPanel({

diff --git a/...tion/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx b/...tion/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx
@@ -39,6 +39,9 @@ export function createStatusOverviewPanelAction(
         const initialState = await openMonitorConfiguration({
           coreStart,
           pluginStart,
+          title: i18n.translate('xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.title', {
+            defaultMessage: 'Create monitor stats',
+          }),
         });
         embeddable.addNewPanel({
           panelType: SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE,