[Integrations] Add shipper label (#122491)

src/plugins/home/common/constants.ts

@@ -8,3 +8,10 @@
 
 export const PLUGIN_ID = 'home';
 export const HOME_APP_BASE_PATH = `/app/${PLUGIN_ID}`;
+
+export enum TutorialsCategory {
+  LOGGING = 'logging',
+  SECURITY_SOLUTION = 'security',
+  METRICS = 'metrics',
+  OTHER = 'other',
+}

src/plugins/home/public/application/components/tutorial/introduction.js

@@ -16,9 +16,11 @@ import {
   EuiPageHeader,
   EuiButtonEmpty,
   EuiSpacer,
+  EuiBadge,
 } from '@elastic/eui';
 
 import { FormattedMessage, injectI18n } from '@kbn/i18n-react';
+import { TutorialsCategory } from '../../../../common/constants';
 
 function IntroductionUI({
   description,
@@ -30,6 +32,7 @@ function IntroductionUI({
   intl,
   notices,
   basePath,
+  category,
 }) {
   let rightSideItems;
   if (previewUrl) {
@@ -98,6 +101,18 @@ function IntroductionUI({
                 {betaBadge}
               </>
             )}
+
+            {category === TutorialsCategory.LOGGING || category === TutorialsCategory.METRICS ? (
+              <>
+                &nbsp;
+                <EuiBadge>
+                  <FormattedMessage
+                    id="home.tutorial.introduction.beatsBadgeLabel"
+                    defaultMessage="Beats"
+                  />
+                </EuiBadge>
+              </>
+            ) : null}
           </>
         }
         description={

src/plugins/home/public/application/components/tutorial/introduction.test.js

@@ -11,6 +11,7 @@ import { shallowWithIntl } from '@kbn/test/jest';
 
 import { Introduction } from './introduction';
 import { httpServiceMock } from '../../../../../../core/public/mocks';
+import { TutorialsCategory } from '../../../../common/constants';
 
 const basePathMock = httpServiceMock.createBasePath();
 
@@ -73,4 +74,30 @@ describe('props', () => {
     );
     expect(component).toMatchSnapshot(); // eslint-disable-line
   });
+
+  test('Beats badge should show', () => {
+    const component = shallowWithIntl(
+      <Introduction.WrappedComponent
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        basePath={basePathMock}
+        isBeta={true}
+        category={TutorialsCategory.METRICS}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('Beats badge should not show', () => {
+    const component = shallowWithIntl(
+      <Introduction.WrappedComponent
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        basePath={basePathMock}
+        isBeta={true}
+        category={TutorialsCategory.SECURITY_SOLUTION}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });

src/plugins/home/public/application/components/tutorial/tutorial.js

@@ -414,6 +414,7 @@ class TutorialUi extends React.Component {
       content = (
         <div>
           <Introduction
+            category={this.state.tutorial.category}
             title={this.state.tutorial.name}
             description={this.props.replaceTemplateStrings(this.state.tutorial.longDescription)}
             previewUrl={previewUrl}

src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts

@@ -8,6 +8,8 @@
 
 import type { KibanaRequest } from 'src/core/server';
 import type { TutorialSchema } from './tutorial_schema';
+export { TutorialsCategory } from '../../../../common/constants';
+
 export type {
   TutorialSchema,
   ArtifactsSchema,
@@ -19,13 +21,6 @@ export type {
   Instruction,
 } from './tutorial_schema';
 
-/** @public */
-export enum TutorialsCategory {
-  LOGGING = 'logging',
-  SECURITY_SOLUTION = 'security',
-  METRICS = 'metrics',
-  OTHER = 'other',
-}
 export type Platform = 'WINDOWS' | 'OSX' | 'DEB' | 'RPM';
 
 export interface TutorialContext {

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx

@@ -10,6 +10,7 @@ import { Redirect, Route, Switch, useLocation, useParams, useHistory } from 'rea
 import styled from 'styled-components';
 import type { EuiToolTipProps } from '@elastic/eui';
 import {
+  EuiBadge,
   EuiBetaBadge,
   EuiButton,
   EuiButtonEmpty,
@@ -209,11 +210,22 @@ export function Detail() {
             </FlexItemWithMaxHeight>
             <EuiFlexItem>
               <EuiFlexGroup alignItems="center" gutterSize="m">
-                <FlexItemWithMinWidth grow={false}>
-                  <EuiText>
-                    {/* Render space in place of package name while package info loads to prevent layout from jumping around */}
-                    <h1>{integrationInfo?.title || packageInfo?.title || '\u00A0'}</h1>
-                  </EuiText>
+                <FlexItemWithMinWidth grow={true}>
+                  <EuiFlexGroup alignItems="center">
+                    <EuiFlexItem grow={false}>
+                      <EuiText>
+                        {/* Render space in place of package name while package info loads to prevent layout from jumping around */}
+                        <h1>{integrationInfo?.title || packageInfo?.title || '\u00A0'}</h1>
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiBadge color="default">
+                        {i18n.translate('xpack.fleet.epm.elasticAgentBadgeLabel', {
+                          defaultMessage: 'Elastic Agent',
+                        })}
+                      </EuiBadge>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </FlexItemWithMinWidth>
                 {packageInfo?.release && packageInfo.release !== 'ga' ? (
                   <EuiFlexItem grow={false}>