From 439e79a0db39c0cf9930b2acb66fcad9eb99603b Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Tue, 28 Sep 2021 13:56:00 +0200
Subject: [PATCH 1/2] [User Experience app] Simplify page header responsiveness
 in ux app (#112930)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../plugins/apm/public/application/uxApp.tsx  |  7 ++-
 .../components/app/RumDashboard/RumHome.tsx   | 54 ++++++-------------
 .../URLFilter/ServiceNameFilter/index.tsx     | 33 ++++++------
 .../app/RumDashboard/UserPercentile/index.tsx |  2 +-
 .../shared/EnvironmentFilter/index.tsx        |  1 +
 .../translations/translations/ja-JP.json      |  1 -
 .../translations/translations/zh-CN.json      |  1 -
 7 files changed, 39 insertions(+), 60 deletions(-)

diff --git a/x-pack/plugins/apm/public/application/uxApp.tsx b/x-pack/plugins/apm/public/application/uxApp.tsx
index 1b36008e5c353..e66a8f2551fe9 100644
--- a/x-pack/plugins/apm/public/application/uxApp.tsx
+++ b/x-pack/plugins/apm/public/application/uxApp.tsx
@@ -22,7 +22,10 @@ import {
 } from '../../../../../src/plugins/kibana_react/public';
 import { APMRouteDefinition } from '../application/routes';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
-import { RumHome, UX_LABEL } from '../components/app/RumDashboard/RumHome';
+import {
+  RumHome,
+  DASHBOARD_LABEL,
+} from '../components/app/RumDashboard/RumHome';
 import { ApmPluginContext } from '../context/apm_plugin/apm_plugin_context';
 import { UrlParamsProvider } from '../context/url_params_context/url_params_context';
 import { ConfigSchema } from '../index';
@@ -40,7 +43,7 @@ export const uxRoutes: APMRouteDefinition[] = [
     exact: true,
     path: '/',
     render: redirectTo('/ux'),
-    breadcrumb: UX_LABEL,
+    breadcrumb: DASHBOARD_LABEL,
   },
 ];
 
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
index 7b3f9c8a911ae..2b9773b5c3a74 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -17,7 +17,7 @@ import { EnvironmentFilter } from '../../shared/EnvironmentFilter';
 import { UserPercentile } from './UserPercentile';
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
 
-export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
+export const DASHBOARD_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'Dashboard',
 });
 
@@ -25,65 +25,43 @@ export function RumHome() {
   const { observability } = useApmPluginContext();
   const PageTemplateComponent = observability.navigation.PageTemplate;
 
-  const { isSmall, isXXL } = useBreakpoints();
-
-  const envStyle = isSmall ? {} : { maxWidth: 500 };
-
   return (
-    <CsmSharedContextProvider>
-      <PageTemplateComponent
-        pageHeader={
-          isXXL
-            ? {
-                pageTitle: i18n.translate('xpack.apm.ux.overview', {
-                  defaultMessage: 'Dashboard',
-                }),
-                rightSideItems: [
-                  <DatePicker />,
-                  <div style={envStyle}>
-                    <EnvironmentFilter />
-                  </div>,
-                  <UserPercentile />,
-                  <WebApplicationSelect />,
-                ],
-              }
-            : { children: <PageHeader /> }
-        }
-      >
-        <RumOverview />
-      </PageTemplateComponent>
-    </CsmSharedContextProvider>
+      <CsmSharedContextProvider>
+        <PageTemplateComponent
+          pageHeader={{ children: <PageHeader /> }}
+        >
+            <RumOverview />
+        </PageTemplateComponent>
+      </CsmSharedContextProvider>
   );
 }
 
 function PageHeader() {
-  const { isSmall } = useBreakpoints();
+  const sizes = useBreakpoints();
 
-  const envStyle = isSmall ? {} : { maxWidth: 400 };
+  const datePickerStyle = sizes.isMedium ? {} : { maxWidth: '70%' };
 
   return (
     <div style={{ width: '100%' }}>
       <EuiFlexGroup wrap>
         <EuiFlexItem>
           <EuiTitle>
-            <h1>{UX_LABEL}</h1>
+            <h1 className="eui-textNoWrap">{DASHBOARD_LABEL}</h1>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem style={{ alignItems: 'flex-end', ...datePickerStyle }}>
           <DatePicker />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexGroup wrap>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem>
           <WebApplicationSelect />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem>
           <UserPercentile />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <div style={envStyle}>
-            <EnvironmentFilter />
-          </div>
+        <EuiFlexItem>
+          <EnvironmentFilter />
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx
index 9d17f980d16d4..5750dd9cf441e 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx
@@ -65,23 +65,22 @@ function ServiceNameFilter({ loading, serviceNames }: Props) {
   }, [serviceNames, selectedServiceName, updateServiceName, loading]);
 
   return (
-    <>
-      <EuiSelect
-        prepend={i18n.translate(
-          'xpack.apm.ux.localFilters.titles.webApplication',
-          {
-            defaultMessage: 'Web application',
-          }
-        )}
-        isLoading={loading}
-        data-cy="serviceNameFilter"
-        options={options}
-        value={selectedServiceName}
-        onChange={(event) => {
-          updateServiceName(event.target.value);
-        }}
-      />
-    </>
+    <EuiSelect
+      fullWidth
+      prepend={i18n.translate(
+        'xpack.apm.ux.localFilters.titles.webApplication',
+        {
+          defaultMessage: 'Web application',
+        }
+      )}
+      isLoading={loading}
+      data-cy="serviceNameFilter"
+      options={options}
+      value={selectedServiceName}
+      onChange={(event) => {
+        updateServiceName(event.target.value);
+      }}
+    />
   );
 }
 
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx
index df5e7d6682b3f..0a5669095c2e5 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx
@@ -80,9 +80,9 @@ export function UserPercentile() {
 
   return (
     <EuiSelect
+      fullWidth
       prepend={I18LABELS.percentile}
       data-test-subj="uxPercentileSelect"
-      style={{ width: 150 }}
       options={options}
       onChange={(evt) => onChange(evt.target.value)}
     />
diff --git a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
index 084b8d1ce6840..3524ce65f2c57 100644
--- a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
@@ -85,6 +85,7 @@ export function EnvironmentFilter() {
 
   return (
     <EuiSelect
+      fullWidth
       prepend={i18n.translate('xpack.apm.filter.environment.label', {
         defaultMessage: 'Environment',
       })}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 1a9da48e86f5e..d811196c86208 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -7491,7 +7491,6 @@
     "xpack.apm.ux.localFilters.titles.webApplication": "Webアプリケーション",
     "xpack.apm.ux.median": "中間",
     "xpack.apm.ux.metrics": "メトリック",
-    "xpack.apm.ux.overview": "ダッシュボード",
     "xpack.apm.ux.overview.heading": "ダッシュボード",
     "xpack.apm.ux.percentile.50thMedian": "50 番目（中央値）",
     "xpack.apm.ux.percentile.75th": "75番目",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index db0acec94be56..be81ee632b719 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7552,7 +7552,6 @@
     "xpack.apm.ux.localFilters.titles.webApplication": "Web 应用程序",
     "xpack.apm.ux.median": "中值",
     "xpack.apm.ux.metrics": "指标",
-    "xpack.apm.ux.overview": "仪表板",
     "xpack.apm.ux.overview.heading": "仪表板",
     "xpack.apm.ux.percentile.50thMedian": "第 50 个（中值）",
     "xpack.apm.ux.percentile.75th": "第 75 个",

From 741773c601728eaaed28eebf830b53f07a78fdd4 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Tue, 5 Oct 2021 18:52:28 +0200
Subject: [PATCH 2/2] eslint

---
 .../public/components/app/RumDashboard/RumHome.tsx   | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
index 2b9773b5c3a74..a7db73d71facf 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -26,13 +26,11 @@ export function RumHome() {
   const PageTemplateComponent = observability.navigation.PageTemplate;
 
   return (
-      <CsmSharedContextProvider>
-        <PageTemplateComponent
-          pageHeader={{ children: <PageHeader /> }}
-        >
-            <RumOverview />
-        </PageTemplateComponent>
-      </CsmSharedContextProvider>
+    <CsmSharedContextProvider>
+      <PageTemplateComponent pageHeader={{ children: <PageHeader /> }}>
+        <RumOverview />
+      </PageTemplateComponent>
+    </CsmSharedContextProvider>
   );
 }