[Ingest Manager] Show experimental packages by default (#70997)

* Add beta and experimental badges to epm list and detail pages; clean up some epm components * Clean up styled warnings * Fix types * Allow experimental query param to be passed through to registry /search * Allow experimental query param to be passed through to registry /categories endpoint * Fix buggy categories count (#64981) * Always enable experimental packages and categories * Handle long package names nicely; misc layout tweaks * Move experimental=true flag to client side * Prevent layout jumps even more * Adjust beta/experimental badge tooltip copy
elastic · Jul 8, 2020 · 90fb7a6 · 90fb7a6
1 parent 43302bd
commit 90fb7a6
Show file tree

Hide file tree

Showing 29 changed files with 485 additions and 391 deletions.
diff --git a/x-pack/plugins/ingest_manager/common/types/models/epm.ts b/x-pack/plugins/ingest_manager/common/types/models/epm.ts
@@ -42,13 +42,16 @@ export enum AgentAssetType {
   input = 'input',
 }
 
+export type RegistryRelease = 'ga' | 'beta' | 'experimental';
+
 // from /package/{name}
 // type Package struct at https://github.com/elastic/package-registry/blob/master/util/package.go
 // https://github.com/elastic/package-registry/blob/master/docs/api/package.json
 export interface RegistryPackage {
   name: string;
   title?: string;
   version: string;
+  release?: RegistryRelease;
   readme?: string;
   description: string;
   type: string;
@@ -114,6 +117,7 @@ export type RegistrySearchResult = Pick<
   | 'name'
   | 'title'
   | 'version'
+  | 'release'
   | 'description'
   | 'type'
   | 'icons'

diff --git a/x-pack/plugins/ingest_manager/common/types/rest_spec/epm.ts b/x-pack/plugins/ingest_manager/common/types/rest_spec/epm.ts
@@ -12,13 +12,21 @@ import {
   PackageInfo,
 } from '../models/epm';
 
+export interface GetCategoriesRequest {
+  query: {
+    experimental?: boolean;
+  };
+}
+
 export interface GetCategoriesResponse {
   response: CategorySummaryList;
   success: boolean;
 }
+
 export interface GetPackagesRequest {
   query: {
     category?: string;
+    experimental?: boolean;
   };
 }
 

diff --git a/.../plugins/ingest_manager/public/applications/ingest_manager/hooks/use_package_icon_type.ts b/.../plugins/ingest_manager/public/applications/ingest_manager/hooks/use_package_icon_type.ts
@@ -6,7 +6,7 @@
 
 import { useEffect, useState } from 'react';
 import { ICON_TYPES } from '@elastic/eui';
-import { PackageInfo, PackageListItem } from '../../../../common/types/models';
+import { PackageInfo, PackageListItem } from '../types';
 import { useLinks } from '../sections/epm/hooks';
 import { sendGetPackageInfoByKey } from './index';
 

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/epm.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/epm.ts
@@ -4,30 +4,32 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { HttpFetchQuery } from 'src/core/public';
 import { useRequest, sendRequest } from './use_request';
 import { epmRouteService } from '../../services';
 import {
+  GetCategoriesRequest,
   GetCategoriesResponse,
+  GetPackagesRequest,
   GetPackagesResponse,
   GetLimitedPackagesResponse,
   GetInfoResponse,
   InstallPackageResponse,
   DeletePackageResponse,
 } from '../../types';
 
-export const useGetCategories = () => {
+export const useGetCategories = (query: GetCategoriesRequest['query'] = {}) => {
   return useRequest<GetCategoriesResponse>({
     path: epmRouteService.getCategoriesPath(),
     method: 'get',
+    query: { experimental: true, ...query },
   });
 };
 
-export const useGetPackages = (query: HttpFetchQuery = {}) => {
+export const useGetPackages = (query: GetPackagesRequest['query'] = {}) => {
   return useRequest<GetPackagesResponse>({
     path: epmRouteService.getListPath(),
     method: 'get',
-    query,
+    query: { experimental: true, ...query },
   });
 };
 
@@ -52,6 +54,13 @@ export const sendGetPackageInfoByKey = (pkgkey: string) => {
   });
 };
 
+export const useGetFileByPath = (filePath: string) => {
+  return useRequest<string>({
+    path: epmRouteService.getFilePath(filePath),
+    method: 'get',
+  });
+};
+
 export const sendGetFileByPath = (filePath: string) => {
   return sendRequest<string>({
     path: epmRouteService.getFilePath(filePath),

diff --git a/...manager/public/applications/ingest_manager/sections/epm/components/assets_facet_group.tsx b/...manager/public/applications/ingest_manager/sections/epm/components/assets_facet_group.tsx
@@ -30,19 +30,24 @@ import {
   ServiceTitleMap,
 } from '../constants';
 
-export function AssetsFacetGroup({ assets }: { assets: AssetsGroupedByServiceByType }) {
-  const FirstHeaderRow = styled(EuiFlexGroup)`
-    padding: 0 0 ${(props) => props.theme.eui.paddingSizes.m} 0;
-  `;
+const FirstHeaderRow = styled(EuiFlexGroup)`
+  padding: 0 0 ${(props) => props.theme.eui.paddingSizes.m} 0;
+`;
+
+const HeaderRow = styled(EuiFlexGroup)`
+  padding: ${(props) => props.theme.eui.paddingSizes.m} 0;
+`;
 
-  const HeaderRow = styled(EuiFlexGroup)`
-    padding: ${(props) => props.theme.eui.paddingSizes.m} 0;
-  `;
+const FacetGroup = styled(EuiFacetGroup)`
+  flex-grow: 0;
+`;
 
-  const FacetGroup = styled(EuiFacetGroup)`
-    flex-grow: 0;
-  `;
+const FacetButton = styled(EuiFacetButton)`
+  padding: '${(props) => props.theme.eui.paddingSizes.xs} 0';
+  height: 'unset';
+`;
 
+export function AssetsFacetGroup({ assets }: { assets: AssetsGroupedByServiceByType }) {
   return (
     <Fragment>
       {entries(assets).map(([service, typeToParts], index) => {
@@ -77,10 +82,6 @@ export function AssetsFacetGroup({ assets }: { assets: AssetsGroupedByServiceByT
                 // only kibana assets have icons
                 const iconType = type in AssetIcons && AssetIcons[type];
                 const iconNode = iconType ? <EuiIcon type={iconType} size="s" /> : '';
-                const FacetButton = styled(EuiFacetButton)`
-                  padding: '${(props) => props.theme.eui.paddingSizes.xs} 0';
-                  height: 'unset';
-                `;
                 return (
                   <FacetButton
                     key={type}

diff --git a/.../ingest_manager/public/applications/ingest_manager/sections/epm/components/icon_panel.tsx b/.../ingest_manager/public/applications/ingest_manager/sections/epm/components/icon_panel.tsx
@@ -3,30 +3,54 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import { EuiIcon, EuiPanel, IconType } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
+import { EuiIcon, EuiPanel } from '@elastic/eui';
+import { usePackageIconType, UsePackageIconType } from '../../../hooks';
+import { Loading } from '../../../components';
+
+const PanelWrapper = styled.div`
+  width: ${(props) =>
+    parseFloat(props.theme.eui.euiSize) * 6 + parseFloat(props.theme.eui.spacerSizes.xl) * 2}px;
+  height: 1px;
+`;
+
+const Panel = styled(EuiPanel)`
+  padding: ${(props) => props.theme.eui.spacerSizes.xl};
+  margin-bottom: -100%;
+  svg,
+  img {
+    height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+    width: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+  }
+  .euiFlexItem {
+    height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+    justify-content: center;
+  }
+`;
+
+export function IconPanel({
+  packageName,
+  version,
+  icons,
+}: Pick<UsePackageIconType, 'packageName' | 'version' | 'icons'>) {
+  const iconType = usePackageIconType({ packageName, version, icons });
 
-export function IconPanel({ iconType }: { iconType: IconType }) {
-  const Panel = styled(EuiPanel)`
-    /* 🤢🤷 https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity */
-    &&& {
-      position: absolute;
-      text-align: center;
-      vertical-align: middle;
-      padding: ${(props) => props.theme.eui.spacerSizes.xl};
-      svg,
-      img {
-        height: ${(props) => props.theme.eui.euiKeyPadMenuSize};
-        width: ${(props) => props.theme.eui.euiKeyPadMenuSize};
-      }
-    }
-  `;
+  return (
+    <PanelWrapper>
+      <Panel>
+        <EuiIcon type={iconType} size="original" />
+      </Panel>
+    </PanelWrapper>
+  );
+}
 
+export function LoadingIconPanel() {
   return (
-    <Panel>
-      <EuiIcon type={iconType} size="original" />
-    </Panel>
+    <PanelWrapper>
+      <Panel>
+        <Loading />
+      </Panel>
+    </PanelWrapper>
   );
 }
diff --git a/...ugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/icons.tsx b/...ugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/icons.tsx
@@ -3,13 +3,20 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiIcon } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { EuiIconTip, EuiIconProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
-export const StyledAlert = styled(EuiIcon)`
-  color: ${(props) => props.theme.eui.euiColorWarning};
-  padding: 0 5px;
-`;
-
-export const UpdateIcon = () => <StyledAlert type="alert" size="l" />;
+export const UpdateIcon = ({ size = 'm' }: { size?: EuiIconProps['size'] }) => (
+  <EuiIconTip
+    aria-label={i18n.translate('xpack.ingestManager.epm.updateAvailableTooltip', {
+      defaultMessage: 'Update available',
+    })}
+    size={size}
+    type="alert"
+    color="warning"
+    content={i18n.translate('xpack.ingestManager.epm.updateAvailableTooltip', {
+      defaultMessage: 'Update available',
+    })}
+  />
+);
diff --git a/...lugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/index.ts b/...lugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/index.ts
diff --git a/...st_manager/public/applications/ingest_manager/sections/epm/components/nav_button_back.tsx b/...st_manager/public/applications/ingest_manager/sections/epm/components/nav_button_back.tsx
diff --git a/...ngest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx b/...ngest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx
@@ -9,12 +9,9 @@ import { EuiCard } from '@elastic/eui';
 import { PackageInfo, PackageListItem } from '../../../types';
 import { useLink } from '../../../hooks';
 import { PackageIcon } from '../../../components/package_icon';
+import { RELEASE_BADGE_LABEL, RELEASE_BADGE_DESCRIPTION } from './release_badge';
 
-export interface BadgeProps {
-  showInstalledBadge?: boolean;
-}
-
-type PackageCardProps = (PackageListItem | PackageInfo) & BadgeProps;
+type PackageCardProps = PackageListItem | PackageInfo;
 
 // adding the `href` causes EuiCard to use a `a` instead of a `button`
 // `a` tags use `euiLinkColor` which results in blueish Badge text
@@ -27,7 +24,7 @@ export function PackageCard({
   name,
   title,
   version,
-  showInstalledBadge,
+  release,
   status,
   icons,
   ...restProps
@@ -41,12 +38,14 @@ export function PackageCard({
 
   return (
     <Card
-      betaBadgeLabel={showInstalledBadge && status === 'installed' ? 'Installed' : ''}
-      layout="horizontal"
       title={title || ''}
       description={description}
       icon={<PackageIcon icons={icons} packageName={name} version={version} size="xl" />}
       href={getHref('integration_details', { pkgkey: `${name}-${urlVersion}` })}
+      betaBadgeLabel={release && release !== 'ga' ? RELEASE_BADGE_LABEL[release] : undefined}
+      betaBadgeTooltipContent={
+        release && release !== 'ga' ? RELEASE_BADGE_DESCRIPTION[release] : undefined
+      }
     />
   );
 }
diff --git a/..._manager/public/applications/ingest_manager/sections/epm/components/package_list_grid.tsx b/..._manager/public/applications/ingest_manager/sections/epm/components/package_list_grid.tsx
@@ -20,22 +20,16 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { Loading } from '../../../components';
 import { PackageList } from '../../../types';
 import { useLocalSearch, searchIdField } from '../hooks';
-import { BadgeProps, PackageCard } from './package_card';
+import { PackageCard } from './package_card';
 
-type ListProps = {
+interface ListProps {
   isLoading?: boolean;
   controls?: ReactNode;
   title: string;
   list: PackageList;
-} & BadgeProps;
+}
 
-export function PackageListGrid({
-  isLoading,
-  controls,
-  title,
-  list,
-  showInstalledBadge,
-}: ListProps) {
+export function PackageListGrid({ isLoading, controls, title, list }: ListProps) {
   const initialQuery = EuiSearchBar.Query.MATCH_ALL;
 
   const [query, setQuery] = useState<Query | null>(initialQuery);
@@ -71,7 +65,7 @@ export function PackageListGrid({
             .includes(item[searchIdField])
         )
       : list;
-    gridContent = <GridColumn list={filteredList} showInstalledBadge={showInstalledBadge} />;
+    gridContent = <GridColumn list={filteredList} />;
   }
 
   return (
@@ -108,16 +102,16 @@ function ControlsColumn({ controls, title }: ControlsColumnProps) {
       </EuiTitle>
       <EuiSpacer size="l" />
       <EuiFlexGroup>
-        <EuiFlexItem grow={2}>{controls}</EuiFlexItem>
+        <EuiFlexItem grow={4}>{controls}</EuiFlexItem>
         <EuiFlexItem grow={1} />
       </EuiFlexGroup>
     </Fragment>
   );
 }
 
-type GridColumnProps = {
+interface GridColumnProps {
   list: PackageList;
-} & BadgeProps;
+}
 
 function GridColumn({ list }: GridColumnProps) {
   return (