From 2d9a7ada2130bd21d5fa2a9aa52ea86e7853ece7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <weltenwort@users.noreply.github.com>
Date: Wed, 7 Nov 2018 11:37:23 +0100
Subject: [PATCH] [Infra UI] Work around IE11 flexbox alignment problems
 (#25224)

This works around some IE11 bugs with flexbox alignment, particularly [Flexbug #4](https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored) and a misinterpretation of the default alignment.

fixes #24758
fixes #24839
fixes #24791
fixes #24757
---
 x-pack/plugins/infra/public/components/empty_page.tsx     | 7 ++++++-
 x-pack/plugins/infra/public/components/page.tsx           | 6 +++---
 x-pack/plugins/infra/public/components/waffle/index.tsx   | 8 ++++++--
 .../lib/adapters/framework/kibana_framework_adapter.ts    | 4 ++--
 x-pack/plugins/infra/public/pages/logs/page_content.tsx   | 4 ++--
 x-pack/plugins/infra/public/pages/metrics/index.tsx       | 2 +-
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/empty_page.tsx b/x-pack/plugins/infra/public/components/empty_page.tsx
index c13d795493c26..44e4ac30d0de5 100644
--- a/x-pack/plugins/infra/public/components/empty_page.tsx
+++ b/x-pack/plugins/infra/public/components/empty_page.tsx
@@ -6,6 +6,7 @@
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
+import styled from 'styled-components';
 
 interface EmptyPageProps {
   message: string;
@@ -22,7 +23,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
   title,
   ...rest
 }) => (
-  <EuiEmptyPrompt
+  <CenteredEmptyPrompt
     title={<h2>{title}</h2>}
     body={<p>{message}</p>}
     actions={
@@ -33,3 +34,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
     {...rest}
   />
 );
+
+const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+  align-self: center;
+`;
diff --git a/x-pack/plugins/infra/public/components/page.tsx b/x-pack/plugins/infra/public/components/page.tsx
index 04d69fdb1d9e8..c4b608e2e9c64 100644
--- a/x-pack/plugins/infra/public/components/page.tsx
+++ b/x-pack/plugins/infra/public/components/page.tsx
@@ -11,16 +11,16 @@ export const ColumnarPage = styled.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  flex: 1 0 0;
+  flex: 1 0 0%;
 `;
 
 export const PageContent = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   flex-direction: row;
   background-color: ${props => props.theme.eui.euiColorEmptyShade};
 `;
 
 export const FlexPage = styled(EuiPage)`
-  flex: 1 0 0;
+  flex: 1 0 0%;
 `;
diff --git a/x-pack/plugins/infra/public/components/waffle/index.tsx b/x-pack/plugins/infra/public/components/waffle/index.tsx
index e51d919cff8d5..aa09a087af31a 100644
--- a/x-pack/plugins/infra/public/components/waffle/index.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/index.tsx
@@ -95,7 +95,7 @@ export class Waffle extends React.Component<Props, {}> {
       return <InfraLoadingPanel height="100%" width="100%" text="Loading data" />;
     } else if (!loading && map && map.length === 0) {
       return (
-        <EuiEmptyPrompt
+        <CenteredEmptyPrompt
           title={<h2>There is no data to display.</h2>}
           titleSize="m"
           body={<p>Try adjusting your time or filter.</p>}
@@ -201,7 +201,7 @@ export class Waffle extends React.Component<Props, {}> {
 }
 
 const WaffleMapOuterContiner = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -217,3 +217,7 @@ const WaffleMapInnerContainer = styled.div`
   align-content: flex-start;
   padding: 10px;
 `;
+
+const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+  align-self: center;
+`;
diff --git a/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
index 2d9bab756c104..d8f62a10856ee 100644
--- a/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
+++ b/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
@@ -117,7 +117,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
       template: `
         <div
           id="${ROOT_ELEMENT_ID}"
-          style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0; overflow: hidden;"
+          style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0%; overflow: hidden;"
         ></div>
       `,
     }));
@@ -140,7 +140,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
     uiRoutes.otherwise({
       reloadOnSearch: false,
       template:
-        '<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0;"></infra-ui-kibana-adapter>',
+        '<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0%;"></infra-ui-kibana-adapter>',
     });
   };
 }
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
index 90e7bb8d63d16..e2efd2f1a333a 100644
--- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -106,14 +106,14 @@ export const LogsPageContent: React.SFC = () => (
 );
 
 const LogPageEventStreamColumn = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 `;
 
 const LogPageMinimapColumn = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   overflow: hidden;
   min-width: 100px;
   max-width: 100px;
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index df4451c7d90ff..8e4dd37b84a71 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -222,7 +222,7 @@ const EuiSideNavContainer = styled.div`
 `;
 
 const MetricsDetailsPageColumn = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   flex-direction: column;
 `;