elastic#47978 add screenshots component with single image

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

@@ -32,6 +32,10 @@ export interface RegistryListItem {
   title?: string;
 }
 
+export interface ScreenshotItem {
+  src: string;
+}
+
 // from /package/{name}
 // https://github.com/elastic/integrations-registry/blob/master/docs/api/package.json
 export type ServiceName = 'kibana' | 'elasticsearch' | 'filebeat' | 'metricbeat';
@@ -67,6 +71,7 @@ export interface RegistryPackage {
   icon: string;
   requirement: RequirementsByServiceName;
   title?: string;
+  screenshots?: ScreenshotItem[];
 }
 
 // Managers public HTTP response types

x-pack/legacy/plugins/integrations_manager/public/hooks/use_links.tsx

@@ -6,6 +6,7 @@
 
 import { generatePath } from 'react-router-dom';
 import { PLUGIN } from '../../common/constants';
+import { API_ROOT } from '../../common/routes';
 import { patterns } from '../routes';
 import { useCore } from '.';
 import { DetailViewPanelName } from '..';
@@ -31,6 +32,7 @@ function appRoot(path: string) {
 export function useLinks() {
   return {
     toAssets: (path: string) => addBasePath(`/plugins/${PLUGIN.ID}/assets/${path}`),
+    toImage: (path: string) => addBasePath(`${API_ROOT}${path}`),
     toListView: () => appRoot(patterns.LIST_VIEW),
     toDetailView: ({ name, version, panel }: DetailParams) => {
       // panel is optional, but `generatePath` won't accept `path: undefined`

x-pack/legacy/plugins/integrations_manager/public/screens/detail/overview_panel.tsx

@@ -6,25 +6,21 @@
 import React, { Fragment } from 'react';
 import { EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { IntegrationInfo } from '../../../common/types';
+import { Screenshots } from './screenshots';
 
 export function OverviewPanel(props: IntegrationInfo) {
-  const { description } = props;
+  const { description, screenshots } = props;
   return (
     <Fragment>
-      <EuiTitle size="xs">
-        <span>About</span>
+      <EuiTitle size="s">
+        <h3>About</h3>
       </EuiTitle>
       <EuiText>
         <p>{description}</p>
         <p>Still need a) longer descriptions b) component to show/hide</p>
       </EuiText>
       <EuiSpacer size="xl" />
-      <EuiTitle size="xs">
-        <span>Screenshots</span>
-      </EuiTitle>
-      <EuiText>
-        <p>Where are we getting these images?</p>
-      </EuiText>
+      {screenshots && <Screenshots images={screenshots} />}
     </Fragment>
   );
 }

x-pack/legacy/plugins/integrations_manager/public/screens/detail/screenshots.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { Fragment } from 'react';
+import { EuiSpacer, EuiText, EuiTitle, EuiImage, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import styled from 'styled-components';
+import { ScreenshotItem } from '../../../common/types';
+import { useLinks, useCore } from '../../hooks';
+
+interface ScreenshotProps {
+  images: ScreenshotItem[];
+}
+
+export function Screenshots(props: ScreenshotProps) {
+  const { theme } = useCore();
+  const { toImage } = useLinks();
+  const { images } = props;
+  // for now, just get first image
+  const src = toImage(images[0].src);
+  const ScreenshotsContainer = styled.div`
+    background: linear-gradient(360deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%),
+      ${theme.eui.euiColorPrimary};
+    padding: 54px 64px;
+    border-radius: 4px;
+  `;
+  const ImageCaptionContainer = styled(EuiFlexItem)`
+    margin: 0;
+  `;
+  return (
+    <Fragment>
+      <EuiTitle size="s">
+        <h3>Screenshots</h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <ScreenshotsContainer>
+        <EuiFlexGroup direction="column" alignItems="center">
+          <ImageCaptionContainer>
+            <EuiText color="ghost">
+              We need image descriptions to be returned in the response
+            </EuiText>
+            <EuiSpacer />
+          </ImageCaptionContainer>
+          <EuiFlexItem>
+            <EuiImage url={src} alt="image" size="l" allowFullScreen />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </ScreenshotsContainer>
+    </Fragment>
+  );
+}