From 12e0ed40ecf01ec559bd5e5d476b65bc43f1a55d Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Fri, 25 Oct 2019 14:41:46 -0400
Subject: [PATCH 1/8] fix height and color issues

---
 .../public/screens/detail/header.tsx          |  1 -
 .../public/screens/detail/index.tsx           | 20 +++----------------
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/header.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/header.tsx
index 0fdc4ccfdccf6..bfe76a9af4ae9 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/header.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/header.tsx
@@ -34,7 +34,6 @@ export function Header(props: HeaderProps) {
   const FullWidthNavRow = styled(EuiPage)`
     /* no left padding so link is against column left edge  */
     padding-left: 0;
-    background-color: ${p => p.theme.eui.euiColorLightestShade};
   `;
 
   const Text = styled.span`
diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
index 3029c5391c27f..8f422e65090c9 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
@@ -46,13 +46,10 @@ export function DetailLayout(props: LayoutProps) {
     padding-bottom: ${theme.eui.paddingSizes.xl};
   `;
 
-  const FullWidthRemainingHeight = styled(EuiPage)`
-    background-color: ${theme.eui.euiColorEmptyShade};
-    height: calc(100vh - ${topBarsHeight()}px);
+  const FullWidthContent = styled(EuiPage)`
+    background-color: ${panel === 'overview' ? theme.eui.euiColorEmptyShade : 'none'};
   `;
 
-  const FullWidthContent = panel === 'overview' ? FullWidthRemainingHeight : EuiPage;
-
   return (
     <Fragment>
       <FullWidthHeader>
@@ -67,15 +64,4 @@ export function DetailLayout(props: LayoutProps) {
       </FullWidthContent>
     </Fragment>
   );
-}
-
-function topBarsHeight() {
-  const { theme } = useCore();
-  const globalNav = parseInt(theme.eui.euiHeaderChildSize, 10);
-  const pageTopNav = /* line-height */ 24 + /* padding-top */ 16 + /* padding-bottom */ 16;
-  const title = /* line-height */ 48;
-  const header = /* padding-top */ 16 + pageTopNav + title + /* padding-bottom */ 16;
-  const topBarsTotal = globalNav + header;
-
-  return topBarsTotal;
-}
+}
\ No newline at end of file

From 2f602464794aa0dd79f17bca51df97b8138b8152 Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Fri, 25 Oct 2019 15:51:30 -0400
Subject: [PATCH 2/8] make container full height

---
 x-pack/legacy/plugins/integrations_manager/public/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/index.ts b/x-pack/legacy/plugins/integrations_manager/public/index.ts
index 934eaae6decb4..63d044ee43c3f 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/index.ts
+++ b/x-pack/legacy/plugins/integrations_manager/public/index.ts
@@ -17,7 +17,7 @@ import { routes } from './routes';
 export type DetailViewPanelName = 'overview' | 'assets' | 'data-sources';
 
 const REACT_APP_ROOT_ID = 'epm__root';
-const template = `<div id="${REACT_APP_ROOT_ID}"></div>`;
+const template = `<div id="${REACT_APP_ROOT_ID}" style="flex-grow: 1"></div>`;
 const getRootEl = () => document.getElementById(REACT_APP_ROOT_ID);
 
 main();

From 59b900b5c522184987455064f9e00d4a1883cf7f Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Fri, 25 Oct 2019 15:54:13 -0400
Subject: [PATCH 3/8] remove panels per design update and make white bg color

---
 .../public/components/asset_accordion.tsx     | 102 +++++++++---------
 .../public/screens/detail/content.tsx         |   8 +-
 .../public/screens/detail/index.tsx           |   7 +-
 3 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx b/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
index bc8a46ce5db4f..aa1a2dcbc4c57 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
@@ -35,61 +35,59 @@ export function AssetAccordion({ assets }: { assets: AssetsGroupedByServiceByTyp
       {entries(assets).map(([service, typeToParts], assetIndex) => {
         return (
           <Fragment key={service}>
-            <EuiPanel grow={false} paddingSize="none">
-              <FlexGroup gutterSize="s" alignItems="center">
-                <EuiFlexItem grow={false}>
-                  <EuiIcon type={ServiceIcons[service]} />
-                </EuiFlexItem>
+            <FlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiIcon type={ServiceIcons[service]} />
+              </EuiFlexItem>
 
-                <EuiFlexItem>
-                  <EuiTitle key={service}>
-                    <EuiText>
-                      <h4>{ServiceTitleMap[service]} Assets</h4>
-                    </EuiText>
-                  </EuiTitle>
-                </EuiFlexItem>
-              </FlexGroup>
-              <EuiHorizontalRule margin="none" />
+              <EuiFlexItem>
+                <EuiTitle key={service}>
+                  <EuiText>
+                    <h4>{ServiceTitleMap[service]} Assets</h4>
+                  </EuiText>
+                </EuiTitle>
+              </EuiFlexItem>
+            </FlexGroup>
+            <EuiHorizontalRule margin="none" />
 
-              {entries(typeToParts).map(([type, parts], typeIndex, typeEntries) => {
-                const iconType = AssetIcons[type];
-                // @types/styled-components@3 does yet support `defaultProps`, which EuiAccordion uses
-                // Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31903
-                // we're a major version behind; nearly 2
-                return (
-                  <Fragment key={type}>
-                    <EuiAccordion
-                      style={{ margin: theme.eui.euiFormControlPadding }}
-                      id={type}
-                      buttonContent={
-                        <EuiFlexGroup gutterSize="s" alignItems="center">
-                          <EuiFlexItem grow={false}>
-                            {iconType ? <EuiIcon type={iconType} size="s" /> : ''}
-                          </EuiFlexItem>
+            {entries(typeToParts).map(([type, parts], typeIndex, typeEntries) => {
+              const iconType = AssetIcons[type];
+              // @types/styled-components@3 does yet support `defaultProps`, which EuiAccordion uses
+              // Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31903
+              // we're a major version behind; nearly 2
+              return (
+                <Fragment key={type}>
+                  <EuiAccordion
+                    style={{ margin: theme.eui.euiFormControlPadding }}
+                    id={type}
+                    buttonContent={
+                      <EuiFlexGroup gutterSize="s" alignItems="center">
+                        <EuiFlexItem grow={false}>
+                          {iconType ? <EuiIcon type={iconType} size="s" /> : ''}
+                        </EuiFlexItem>
 
-                          <EuiFlexItem>
-                            <EuiText color="secondary">{AssetTitleMap[type]}</EuiText>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      }
-                      paddingSize="m"
-                      extraAction={
-                        <EuiNotificationBadge color="subdued" size="m">
-                          {parts.length}
-                        </EuiNotificationBadge>
-                      }
-                    >
-                      <EuiText>
-                        <span role="img" aria-label="woman shrugging">
-                          🤷
-                        </span>
-                      </EuiText>
-                    </EuiAccordion>
-                    {typeIndex < typeEntries.length - 1 ? <EuiHorizontalRule margin="none" /> : ''}
-                  </Fragment>
-                );
-              })}
-            </EuiPanel>
+                        <EuiFlexItem>
+                          <EuiText color="secondary">{AssetTitleMap[type]}</EuiText>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    }
+                    paddingSize="m"
+                    extraAction={
+                      <EuiNotificationBadge color="subdued" size="m">
+                        {parts.length}
+                      </EuiNotificationBadge>
+                    }
+                  >
+                    <EuiText>
+                      <span role="img" aria-label="woman shrugging">
+                        🤷
+                      </span>
+                    </EuiText>
+                  </EuiAccordion>
+                  {typeIndex < typeEntries.length - 1 ? <EuiHorizontalRule margin="none" /> : ''}
+                </Fragment>
+              );
+            })}
             <EuiSpacer size="l" />
           </Fragment>
         );
diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
index 1b89fafc76179..fcb919ba2abf7 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
@@ -64,11 +64,9 @@ export function ContentPanel(props: ContentPanelProps) {
       return <AssetAccordion assets={assets} />;
     case 'data-sources':
       return (
-        <EuiPanel>
-          <EuiTitle size="xs">
-            <span>Data Sources</span>
-          </EuiTitle>
-        </EuiPanel>
+        <EuiTitle size="xs">
+          <span>Data Sources</span>
+        </EuiTitle>
       );
     case 'overview':
     default:
diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
index 8f422e65090c9..a76c4837fcd4d 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
@@ -37,7 +37,7 @@ export function Detail({ pkgkey, panel = DEFAULT_PANEL }: DetailProps) {
 
 type LayoutProps = PackageInfo & Pick<DetailProps, 'panel'> & EuiPageWidthProps;
 export function DetailLayout(props: LayoutProps) {
-  const { name, restrictWidth, panel } = props;
+  const { name, restrictWidth } = props;
   const { theme } = useCore();
   const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);
 
@@ -47,7 +47,8 @@ export function DetailLayout(props: LayoutProps) {
   `;
 
   const FullWidthContent = styled(EuiPage)`
-    background-color: ${panel === 'overview' ? theme.eui.euiColorEmptyShade : 'none'};
+    background-color: ${theme.eui.euiColorEmptyShade};
+    height: 100%;
   `;
 
   return (
@@ -64,4 +65,4 @@ export function DetailLayout(props: LayoutProps) {
       </FullWidthContent>
     </Fragment>
   );
-}
\ No newline at end of file
+}

From 987bbb16bf2466014a20b98012e0550211470edf Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Fri, 25 Oct 2019 17:00:18 -0400
Subject: [PATCH 4/8] adjust spacing

---
 .../public/screens/detail/content.tsx               | 13 ++-----------
 .../public/screens/detail/index.tsx                 |  2 ++
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
index fcb919ba2abf7..c2f2ba6b2e3fa 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
@@ -6,14 +6,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiPanel,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { SideNavLinks } from './side_nav_links';
 import { PackageInfo } from '../../../common/types';
 import { AssetAccordion } from '../../components/asset_accordion';
@@ -21,18 +14,16 @@ import { AssetsFacetGroup } from '../../components/assets_facet_group';
 import { Requirements } from '../../components/requirements';
 import { CenterColumn, LeftColumn, RightColumn } from './layout';
 import { OverviewPanel } from './overview_panel';
-import { useCore } from '../../hooks/use_core';
 import { DEFAULT_PANEL, DetailProps } from '.';
 
 type ContentProps = PackageInfo & Pick<DetailProps, 'panel'> & { hasIconPanel: boolean };
 export function Content(props: ContentProps) {
   const { hasIconPanel, name, panel, version } = props;
-  const { theme } = useCore();
   const SideNavColumn = hasIconPanel
     ? styled(LeftColumn)`
         /* 🤢🤷 https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity */
         &&& {
-          margin-top: ${theme.eui.euiKeyPadMenuSize};
+          margin-top: 77px;
         }
       `
     : LeftColumn;
diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
index a76c4837fcd4d..597b93d789b74 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
@@ -46,9 +46,11 @@ export function DetailLayout(props: LayoutProps) {
     padding-bottom: ${theme.eui.paddingSizes.xl};
   `;
 
+  const paddingSizeTop: number = parseInt(theme.eui.paddingSizes.xl, 10) * 1.25;
   const FullWidthContent = styled(EuiPage)`
     background-color: ${theme.eui.euiColorEmptyShade};
     height: 100%;
+    padding-top: ${paddingSizeTop}px;
   `;
 
   return (

From ce709ce83fceee0907cfdfacebe0ef490e0e9d5d Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Mon, 28 Oct 2019 09:40:10 -0400
Subject: [PATCH 5/8] check for empty response

---
 .../integrations_manager/public/screens/detail/readme.tsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
index f3954248a881d..cf2c219e4b06e 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
@@ -15,12 +15,13 @@ export function Readme({ readmePath }: { readmePath: string }) {
   useEffect(() => {
     getFileByPath(readmePath).then(res => {
       setMarkdown(res);
-    });
+    })
   }, []);
 
   return (
     <Fragment>
-      {markdown ? (
+      { // checking against undefined because currently some readme paths exist with empty response
+        markdown !== undefined ? (
         <ReactMarkdown renderers={markdownRenderers} source={markdown} />
       ) : (
         <EuiText>

From 84bcdcc6a407231ba759a94acbd145b0b3a84631 Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Mon, 28 Oct 2019 10:06:07 -0400
Subject: [PATCH 6/8] fix eslint issue

---
 .../integrations_manager/public/screens/detail/readme.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
index cf2c219e4b06e..7dda96cf029ff 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
@@ -15,13 +15,13 @@ export function Readme({ readmePath }: { readmePath: string }) {
   useEffect(() => {
     getFileByPath(readmePath).then(res => {
       setMarkdown(res);
-    })
+    });
   }, []);
 
   return (
     <Fragment>
-      { // checking against undefined because currently some readme paths exist with empty response
-        markdown !== undefined ? (
+      {// checking against undefined because currently some readme paths exist with empty response
+      markdown !== undefined ? (
         <ReactMarkdown renderers={markdownRenderers} source={markdown} />
       ) : (
         <EuiText>

From d3f28e838ea76ee1a4dcf9d16ec5e5e503656446 Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Mon, 28 Oct 2019 19:32:22 -0400
Subject: [PATCH 7/8] fix layout in safari

---
 x-pack/legacy/plugins/integrations_manager/public/index.ts      | 2 +-
 .../integrations_manager/public/screens/detail/index.tsx        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/index.ts b/x-pack/legacy/plugins/integrations_manager/public/index.ts
index 63d044ee43c3f..9c0258666f20d 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/index.ts
+++ b/x-pack/legacy/plugins/integrations_manager/public/index.ts
@@ -17,7 +17,7 @@ import { routes } from './routes';
 export type DetailViewPanelName = 'overview' | 'assets' | 'data-sources';
 
 const REACT_APP_ROOT_ID = 'epm__root';
-const template = `<div id="${REACT_APP_ROOT_ID}" style="flex-grow: 1"></div>`;
+const template = `<div id="${REACT_APP_ROOT_ID}" style="flex-grow: 1; display: flex; flex-direction: column"></div>`;
 const getRootEl = () => document.getElementById(REACT_APP_ROOT_ID);
 
 main();
diff --git a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
index 597b93d789b74..47cac09958dff 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
@@ -51,6 +51,7 @@ export function DetailLayout(props: LayoutProps) {
     background-color: ${theme.eui.euiColorEmptyShade};
     height: 100%;
     padding-top: ${paddingSizeTop}px;
+    flex-grow: 1;
   `;
 
   return (

From c4583e345b98a9fcc4f59200fbc405d1aac2e069 Mon Sep 17 00:00:00 2001
From: neptunian <sandra.gonzales@elastic.co>
Date: Tue, 29 Oct 2019 10:10:46 -0400
Subject: [PATCH 8/8] remove unused component

---
 .../integrations_manager/public/components/asset_accordion.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx b/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
index aa1a2dcbc4c57..c69ce8a5270d1 100644
--- a/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
+++ b/x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
@@ -12,7 +12,6 @@ import {
   EuiHorizontalRule,
   EuiIcon,
   EuiNotificationBadge,
-  EuiPanel,
   EuiText,
   EuiTitle,
   EuiSpacer,