[EPM] update compatibility section (#50975)

* change min max version to single range value

* add elastic stack icon and change text

* remove badge from version and use code font

* remove euistyled

* add back version component lost in merge

* remove euiStyled

* remove old file

x-pack/legacy/plugins/epm/common/types.ts

@@ -40,12 +40,7 @@ export type ServiceName = 'kibana' | 'elasticsearch';
 export type RequirementVersion = string;
 
 export interface ServiceRequirements {
-  version: RequirementVersionRange;
-}
-
-export interface RequirementVersionRange {
-  min: RequirementVersion;
-  max: RequirementVersion;
+  versions: string;
 }
 
 // from /categories

x-pack/legacy/plugins/epm/public/components/content_collapse.tsx

@@ -5,29 +5,29 @@
  */
 import React, { useState, useRef, useLayoutEffect, Fragment, useCallback } from 'react';
 import { EuiButtonEmpty, EuiSpacer, EuiButton, EuiHorizontalRule } from '@elastic/eui';
-import euiStyled from '../../../../common/eui_styled_components';
+import styled from 'styled-components';
 
-const BottomFade = euiStyled.div`
-width: 100%;
-background: ${props =>
-  `linear-gradient(${props.theme.eui.euiColorEmptyShade}00 0%, ${props.theme.eui.euiColorEmptyShade} 100%)`};
-margin-top: -${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px;
-height: ${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px;
-position: absolute;
+const BottomFade = styled.div`
+  width: 100%;
+  background: ${props =>
+    `linear-gradient(${props.theme.eui.euiColorEmptyShade}00 0%, ${props.theme.eui.euiColorEmptyShade} 100%)`};
+  margin-top: -${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px;
+  height: ${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px;
+  position: absolute;
 `;
-const ContentCollapseContainer = euiStyled.div`
-position: relative;
+const ContentCollapseContainer = styled.div`
+  position: relative;
 `;
-const CollapseButtonContainer = euiStyled.div`
-display: inline-block;
-background-color: ${props => props.theme.eui.euiColorGhost};
-position: absolute;
-left: 50%;
-transform: translateX(-50%);
-top: ${props => parseInt(props.theme.eui.euiButtonHeight, 10) / 2}px;
+const CollapseButtonContainer = styled.div`
+  display: inline-block;
+  background-color: ${props => props.theme.eui.euiColorGhost};
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: ${props => parseInt(props.theme.eui.euiButtonHeight, 10) / 2}px;
 `;
-const CollapseButtonTop = euiStyled(EuiButtonEmpty)`
-float: right;
+const CollapseButtonTop = styled(EuiButtonEmpty)`
+  float: right;
 `;
 
 const CollapseButton = ({

x-pack/legacy/plugins/epm/public/components/requirements.tsx

@@ -5,13 +5,13 @@
  */
 
 import React, { Fragment } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiTextColor, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTextColor, EuiTitle, EuiIcon, EuiText } from '@elastic/eui';
 import styled from 'styled-components';
 import { entries } from '../../common/type_utils';
 import { RequirementsByServiceName } from '../../common/types';
 import { ServiceTitleMap } from '../constants';
 import { useCore } from '../hooks/use_core';
-import { VersionBadge } from './version_badge';
+import { Version } from './version';
 
 export interface RequirementsProps {
   requirements: RequirementsByServiceName;
@@ -21,15 +21,27 @@ export function Requirements(props: RequirementsProps) {
   const { requirements } = props;
   const { theme } = useCore();
 
-  const Text = styled.span`
-    padding-bottom: ${theme.eui.paddingSizes.m};
+  const FlexGroup = styled(EuiFlexGroup)`
+    padding: 0 0 ${theme.eui.paddingSizes.m} 0;
+    margin: 0;
+  `;
+  const StyledVersion = styled(Version)`
+    font-size: ${theme.eui.euiFontSizeXS};
   `;
-
   return (
     <Fragment>
-      <EuiTitle size="xs">
-        <Text>Compatibility</Text>
-      </EuiTitle>
+      <FlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiIcon type={'logoElasticStack'} />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiTitle>
+            <EuiText>
+              <h4>Elastic Stack Compatibility</h4>
+            </EuiText>
+          </EuiTitle>
+        </EuiFlexItem>
+      </FlexGroup>
       {entries(requirements).map(([service, requirement]) => (
         <EuiFlexGroup key={service}>
           <EuiFlexItem grow={true}>
@@ -38,11 +50,7 @@ export function Requirements(props: RequirementsProps) {
             </EuiTextColor>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <div>
-              <VersionBadge version={requirement.version.min} />
-              <span>{' - '}</span>
-              <VersionBadge version={requirement.version.max} />
-            </div>
+            <StyledVersion version={requirement.versions} />
           </EuiFlexItem>
         </EuiFlexGroup>
       ))}

x-pack/legacy/plugins/epm/public/components/version.tsx

@@ -5,9 +5,18 @@
  */
 
 import React from 'react';
-import { EuiBadge } from '@elastic/eui';
+import styled from 'styled-components';
 import { RequirementVersion } from '../../common/types';
 
-export function VersionBadge({ version }: { version: RequirementVersion }) {
-  return <EuiBadge color="hollow">v{version}</EuiBadge>;
+const CodeText = styled.span`
+  font-family: ${props => props.theme.eui.euiCodeFontFamily};
+`;
+export function Version({
+  className,
+  version,
+}: {
+  className?: string;
+  version: RequirementVersion;
+}) {
+  return <CodeText className={className}>{version}</CodeText>;
 }

x-pack/legacy/plugins/epm/public/screens/detail/header.tsx

@@ -23,7 +23,7 @@ import { useTrackedPromise } from '../../../../infra/public/utils/use_tracked_pr
 import { installPackage } from '../../data';
 import { PLUGIN } from '../../../common/constants';
 import { PackageInfo } from '../../../common/types';
-import { VersionBadge } from '../../components/version_badge';
+import { Version } from '../../components/version';
 import { IconPanel } from '../../components/icon_panel';
 import { useBreadcrumbs, useCore, useLinks } from '../../hooks';
 import { CenterColumn, LeftColumn, RightColumn } from './layout';
@@ -42,7 +42,12 @@ export function Header(props: HeaderProps) {
   `;
 
   const Text = styled.span`
-    margin-right: ${theme.eui.spacerSizes.xl};
+    margin-right: ${theme.eui.euiSizeM};
+  `;
+
+  const StyledVersion = styled(Version)`
+    font-size: ${theme.eui.euiFontSizeS};
+    color: ${theme.eui.euiColorDarkShade};
   `;
 
   return (
@@ -60,7 +65,7 @@ export function Header(props: HeaderProps) {
           <EuiTitle size="l">
             <h1>
               <Text>{title}</Text>
-              <VersionBadge version={version} />
+              <StyledVersion version={version} />
             </h1>
           </EuiTitle>
         </CenterColumn>