[fleet] Adjust unified integration view to have better UI controls (#…

…114692) * [fleet] Adjust Package Cards to horizontal layout * Fix responsive shifting * Addressing feedback * cleanup layout for integrations view * i18n * Fix type errors Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dave Snider <dave.snider@gmail.com> Co-authored-by: Josh Dover <1813008+joshdover@users.noreply.github.com>
elastic · Oct 14, 2021 · 864e6f1 · 864e6f1
1 parent 56a2e78
commit 864e6f1
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 161 deletions.
diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
@@ -42,6 +42,12 @@
   #app-fixed-viewport {
     top: $headerHeight;
   }
+
+  .kbnStickyMenu {
+    position: sticky;
+    max-height: calc(100vh - #{$headerHeight + $euiSize});
+    top: $headerHeight + $euiSize;
+  }
 }
 
 .kbnBody {

diff --git a/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx
@@ -5,66 +5,24 @@
  * 2.0.
  */
 import React, { memo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText, EuiLink } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { i18n } from '@kbn/i18n';
-
-import styled, { useTheme } from 'styled-components';
-
-import type { EuiTheme } from 'src/plugins/kibana_react/common';
-
 import { useLink } from '../../../hooks';
 import type { Section } from '../sections';
 
-import { useLinks, useStartServices } from '../hooks';
-
 import { WithHeaderLayout } from './';
 
 interface Props {
   section?: Section;
   children?: React.ReactNode;
 }
 
-const Illustration = styled(EuiImage)`
-  margin-bottom: -77px;
-  position: relative;
-  top: -16px;
-  width: 395px;
-`;
-
-const Hero = styled.div`
-  text-align: right;
-`;
-
-const HeroImage = memo(() => {
-  const { toSharedAssets } = useLinks();
-  const theme = useTheme() as EuiTheme;
-  const IS_DARK_THEME = theme.darkMode;
-
-  return (
-    <Hero>
-      <Illustration
-        alt={i18n.translate('xpack.fleet.epm.illustrationAltText', {
-          defaultMessage: 'Illustration of an integration',
-        })}
-        url={
-          IS_DARK_THEME
-            ? toSharedAssets('illustration_integrations_darkmode.svg')
-            : toSharedAssets('illustration_integrations_lightmode.svg')
-        }
-      />
-    </Hero>
-  );
-});
-
 export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, children }) => {
   const { getHref } = useLink();
-  const { docLinks } = useStartServices();
 
   return (
     <WithHeaderLayout
-      rightColumn={<HeroImage />}
       leftColumn={
         <EuiFlexGroup direction="column" gutterSize="none" justifyContent="center">
           <EuiText>
@@ -79,20 +37,11 @@ export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, ch
           <EuiSpacer size="s" />
 
           <EuiFlexItem grow={false}>
-            <EuiText size="m" color="subdued">
+            <EuiText size="s" color="subdued">
               <p>
                 <FormattedMessage
                   id="xpack.fleet.epm.pageSubtitle"
-                  defaultMessage="Collect data from popular applications and services.  To learn more about Integrations, view {link}"
-                  values={{
-                    link: (
-                      <EuiLink target="_blank" href={docLinks.links.elasticStackGetStarted}>
-                        {i18n.translate('xpack.fleet.epm.pageSubtitleLinkText', {
-                          defaultMessage: 'Getting started with Elastic Stack',
-                        })}
-                      </EuiLink>
-                    ),
-                  }}
+                  defaultMessage="Choose an integration to start collecting and analyzing your data"
                 />
               </p>
             </EuiText>

diff --git a/...s/fleet/public/applications/integrations/sections/epm/components/package_card.stories.tsx b/...s/fleet/public/applications/integrations/sections/epm/components/package_card.stories.tsx
@@ -22,7 +22,7 @@ export default {
 type Args = Omit<PackageCardProps, 'status'> & { width: number };
 
 const args: Args = {
-  width: 250,
+  width: 280,
   title: 'Title',
   description: 'Description',
   name: 'beats',

diff --git a/...k/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx b/...k/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { EuiCard } from '@elastic/eui';
+import { EuiCard, EuiFlexItem, EuiBadge, EuiToolTip, EuiSpacer } from '@elastic/eui';
 
 import { CardIcon } from '../../../../../components/package_icon';
 import type { IntegrationCardItem } from '../../../../../../common/types/models/epm';
@@ -16,10 +16,10 @@ import { RELEASE_BADGE_DESCRIPTION, RELEASE_BADGE_LABEL } from './release_badge'
 
 export type PackageCardProps = IntegrationCardItem;
 
-// adding the `href` causes EuiCard to use a `a` instead of a `button`
-// `a` tags use `euiLinkColor` which results in blueish Badge text
+// Min-height is roughly 3 lines of content.
+// This keeps the cards from looking overly unbalanced because of content differences.
 const Card = styled(EuiCard)`
-  color: inherit;
+  min-height: 127px;
 `;
 
 export function PackageCard({
@@ -32,14 +32,28 @@ export function PackageCard({
   url,
   release,
 }: PackageCardProps) {
-  const betaBadgeLabel = release && release !== 'ga' ? RELEASE_BADGE_LABEL[release] : undefined;
-  const betaBadgeLabelTooltipContent =
-    release && release !== 'ga' ? RELEASE_BADGE_DESCRIPTION[release] : undefined;
+  let releaseBadge: React.ReactNode | null = null;
+
+  if (release && release !== 'ga') {
+    releaseBadge = (
+      <EuiFlexItem grow={false}>
+        <EuiSpacer size="xs" />
+        <span>
+          <EuiToolTip display="inlineBlock" content={RELEASE_BADGE_DESCRIPTION[release]}>
+            <EuiBadge color="hollow">{RELEASE_BADGE_LABEL[release]}</EuiBadge>
+          </EuiToolTip>
+        </span>
+      </EuiFlexItem>
+    );
+  }
 
   return (
     <Card
+      layout="horizontal"
       title={title || ''}
+      titleSize="xs"
       description={description}
+      hasBorder
       icon={
         <CardIcon
           icons={icons}
@@ -50,9 +64,9 @@ export function PackageCard({
         />
       }
       href={url}
-      betaBadgeLabel={betaBadgeLabel}
-      betaBadgeTooltipContent={betaBadgeLabelTooltipContent}
       target={url.startsWith('http') || url.startsWith('https') ? '_blank' : undefined}
-    />
+    >
+      {releaseBadge}
+    </Card>
   );
 }