make cards generic

elastic · Sep 21, 2021 · a40cee6 · a40cee6
1 parent 3844e8a
commit a40cee6
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 55 deletions.
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,18 +7,17 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { EuiCard, EuiIcon } from '@elastic/eui';
+import { EuiCard } from '@elastic/eui';
 
 import type { PackageListItem } from '../../../types';
-import { useLink } from '../../../hooks';
 import { CardIcon } from '../../../../../components/package_icon';
 
-import { RELEASE_BADGE_LABEL, RELEASE_BADGE_DESCRIPTION } from './release_badge';
-
 type PackageCardProps = PackageListItem & {
   type?: string;
   uiInternalPath?: string;
-  uiInteralPathUrl: string;
+  uiInternalPathUrl: string;
+  betaBadgeLabel?: string;
+  betaBadgeLabelTooltipContent?: string;
 };
 
 // adding the `href` causes EuiCard to use a `a` instead of a `button`
@@ -27,25 +26,23 @@ const Card = styled(EuiCard)`
   color: inherit;
 `;
 
-export function PackageCard({
-  description,
-  name,
-  title,
-  version,
-  release,
-  status,
-  icons,
-  integration,
-  type,
-  uiInternalPath,
-  ...restProps
-}: PackageCardProps) {
-  const { getHref, getAbsolutePath } = useLink();
-  let urlVersion = version;
-  // if this is an installed package, link to the version installed
-  if ('savedObject' in restProps) {
-    urlVersion = restProps.savedObject.attributes.version || version;
-  }
+export function PackageCard(props: PackageCardProps) {
+  const {
+    description,
+    name,
+    title,
+    version,
+    release,
+    status,
+    icons,
+    integration,
+    type,
+    uiInternalPath,
+    uiInternalPathUrl,
+    betaBadgeLabel,
+    betaBadgeLabelTooltipContent,
+    ...restProps
+  } = props;
 
   const icon = (
     <CardIcon
@@ -57,29 +54,14 @@ export function PackageCard({
     />
   );
 
-  const href =
-    type === 'ui_link'
-      ? getAbsolutePath(uiInternalPath)
-      : getHref('integration_details_overview', {
-          pkgkey: `${name}-${urlVersion}`,
-          ...(integration ? { integration } : {}),
-        });
-
-  const betaBadgeLabel =
-    type === 'ui_link' && release && release !== 'ga' ? RELEASE_BADGE_LABEL[release] : undefined;
-  const betaBadgeTooltipContent =
-    type === 'ui_link' && release && release !== 'ga'
-      ? RELEASE_BADGE_DESCRIPTION[release]
-      : undefined;
-
   return (
     <Card
       title={title || ''}
       description={description}
       icon={icon}
-      href={href}
+      href={uiInternalPathUrl}
       betaBadgeLabel={betaBadgeLabel}
-      betaBadgeTooltipContent={betaBadgeTooltipContent}
+      betaBadgeTooltipContent={betaBadgeLabelTooltipContent}
     />
   );
 }
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
@@ -32,6 +32,8 @@ import type { CustomIntegration } from '../../../../../../../../../../src/plugin
 
 import type { PackageListItem } from '../../../../types';
 
+import { RELEASE_BADGE_DESCRIPTION, RELEASE_BADGE_LABEL } from '../../components/release_badge';
+
 import { CategoryFacets } from './category_facets';
 import { mergeAndReplaceCategoryCounts } from './util';
 
@@ -51,6 +53,39 @@ function categoryExists(category: string, categories: CategorySummaryItem[]) {
   return categories.some((c) => c.id === category);
 }
 
+function mapToCard(getAbsolutePath, getHref, item: CustomIntegration | PackageListItem) {
+  let uiInternalPathUrl;
+  if (item.type === 'ui_link') {
+    uiInternalPathUrl = getAbsolutePath(item.uiInternalPath);
+  } else {
+    let urlVersion = item.version;
+    if ('savedObject' in item) {
+      urlVersion = item.savedObject.attributes.version || item.version;
+    }
+    const url = getHref('integration_details_overview', {
+      pkgkey: `${item.name}-${urlVersion}`,
+      ...(item.integration ? { integration: item.integration } : {}),
+    });
+    uiInternalPathUrl = url;
+  }
+
+  const betaBadgeLabel =
+    item.type !== 'ui_link' && item.release && item.release !== 'ga'
+      ? RELEASE_BADGE_LABEL[item.release]
+      : undefined;
+  const betaBadgeTooltipContent =
+    item.type !== 'ui_link' && item.release && item.release !== 'ga'
+      ? RELEASE_BADGE_DESCRIPTION[item.release]
+      : undefined;
+
+  return {
+    uiInternalPathUrl,
+    betaBadgeLabel,
+    betaBadgeTooltipContent,
+    ...item,
+  };
+}
+
 export const EPMHomePage: React.FC = memo(() => {
   return (
     <Switch>
@@ -100,6 +135,7 @@ const InstalledPackages: React.FC = memo(() => {
   const { data: allPackages, isLoading: isLoadingPackages } = useGetPackages({
     experimental: true,
   });
+  const { getHref, getAbsolutePath } = useLink();
 
   const { selectedCategory, searchParam } = getParams(
     useParams<CategoryParams>(),
@@ -181,6 +217,13 @@ const InstalledPackages: React.FC = memo(() => {
     />
   );
 
+  const cards = (selectedCategory === 'updates_available'
+    ? updatablePackages
+    : allInstalledPackages
+  ).map((item) => {
+    return mapToCard(getAbsolutePath, getHref, item);
+  });
+
   return (
     <PackageListGrid
       isLoading={isLoadingPackages}
@@ -189,7 +232,7 @@ const InstalledPackages: React.FC = memo(() => {
       onSearchChange={setSearchTerm}
       initialSearch={searchParam}
       title={title}
-      list={selectedCategory === 'updates_available' ? updatablePackages : allInstalledPackages}
+      list={cards}
     />
   );
 });
@@ -301,19 +344,8 @@ const AvailablePackages: React.FC = memo(() => {
     />
   ) : null;
 
-  const cards = eprAndCustomPackages.map((item: CustomIntegration | PackageListItem) => {
-    const uiInternalPathUrl =
-      item.type === 'ui_link'
-        ? getAbsolutePath(item.uiInternalPath)
-        : getHref('integration_details_overview', {
-            pkgkey: `${name}-${item.urlVersion}`,
-            ...(item.integration ? { integration: item.integration } : {}),
-          });
-
-    return {
-      uiInternalPathUrl,
-      ...item,
-    };
+  const cards = eprAndCustomPackages.map((item) => {
+    return mapToCard(getAbsolutePath, getHref, item);
   });
 
   return (