Adjust data for better testing

elastic · Oct 12, 2021 · b8ad93c · b8ad93c
1 parent e21a049
commit b8ad93c
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 4,455 deletions.
diff --git a/...fleet/public/applications/integrations/sections/epm/components/integration_preference.tsx b/...fleet/public/applications/integrations/sections/epm/components/integration_preference.tsx
@@ -13,15 +13,16 @@ import { EuiPanel, EuiLink, EuiText, EuiForm, EuiRadioGroup, EuiSpacer } from '@
 
 import { SHIPPER_DISPLAY } from '../../../../../../../../../src/plugins/custom_integrations/common';
 
-type Value = 'beats' | 'agent';
+export type IntegrationPreferenceType = 'beats' | 'agent';
 
 interface Option {
-  value: Value;
+  type: IntegrationPreferenceType;
   label: string;
 }
 
 export interface Props {
-  onChange: (value: Value) => void;
+  initialType: IntegrationPreferenceType;
+  onChange: (type: IntegrationPreferenceType) => void;
 }
 
 const link = (
@@ -41,24 +42,24 @@ const title = (
   />
 );
 
-export const IntegrationPreference = ({ onChange }: Props) => {
-  const [idSelected, setIdSelected] = React.useState<Value>('agent');
+export const IntegrationPreference = ({ initialType, onChange }: Props) => {
+  const [idSelected, setIdSelected] = React.useState<IntegrationPreferenceType>(initialType);
 
   const options: Option[] = [
     {
-      value: 'agent',
+      type: 'agent',
       label: i18n.translate('xpack.fleet.epm.integrationPreference.elasticAgentLabel', {
         defaultMessage: 'Elastic Agent (recommended)',
       }),
     },
     {
-      value: 'beats',
+      type: 'beats',
       label: SHIPPER_DISPLAY.beats,
     },
   ];
 
   const radios = options.map((option) => ({
-    id: option.value,
+    id: option.type,
     ...option,
   }));
 
@@ -71,8 +72,8 @@ export const IntegrationPreference = ({ onChange }: Props) => {
           options={radios}
           idSelected={idSelected}
           onChange={(id, value) => {
-            setIdSelected(id as Value);
-            onChange(value as Value);
+            setIdSelected(id as IntegrationPreferenceType);
+            onChange(value as IntegrationPreferenceType);
           }}
           name="preference"
         />

diff --git a/...s/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx b/...s/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useLocation, useHistory, useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { EuiHorizontalRule } from '@elastic/eui';
@@ -23,13 +23,11 @@ import { doesPackageHaveIntegrations } from '../../../../services';
 import type { PackageList, PackageListItem } from '../../../../types';
 import { PackageListGrid } from '../../components/package_list_grid';
 
-import type {
-  CustomIntegration,
-  IntegrationCategory,
-} from '../../../../../../../../../../src/plugins/custom_integrations/common';
+import type { CustomIntegration } from '../../../../../../../../../../src/plugins/custom_integrations/common';
 
 import { useMergeEprPackagesWithReplacements } from '../../../../../../hooks/use_merge_epr_with_replacements';
 
+import type { IntegrationPreferenceType } from '../../components/integration_preference';
 import { IntegrationPreference } from '../../components/integration_preference';
 
 import { mergeAndReplaceCategoryCounts } from './util';
@@ -73,6 +71,7 @@ const title = i18n.translate('xpack.fleet.epmList.allTitle', {
 // TODO: clintandrewhall - this component is hard to test due to the hooks, particularly those that use `http`
 // or `location` to load data.  Ideally, we'll split this into "connected" and "pure" components.
 export const AvailablePackages: React.FC = memo(() => {
+  const [preference, setPreference] = useState<IntegrationPreferenceType>('agent');
   useBreadcrumbs('integrations_all');
 
   const { selectedCategory, searchParam } = getParams(
@@ -127,7 +126,7 @@ export const AvailablePackages: React.FC = memo(() => {
     useMergeEprPackagesWithReplacements(
       eprPackages || [],
       replacementCustomIntegrations || [],
-      selectedCategory as IntegrationCategory
+      selectedCategory
     );
 
   const { loading: isLoadingAppendCustomIntegrations, value: appendCustomIntegrations } =
@@ -138,7 +137,7 @@ export const AvailablePackages: React.FC = memo(() => {
         if (!selectedCategory) {
           return true;
         }
-        return integration.categories.indexOf(selectedCategory as IntegrationCategory) >= 0;
+        return integration.categories.indexOf(selectedCategory) >= 0;
       })
     : [];
 
@@ -184,7 +183,10 @@ export const AvailablePackages: React.FC = memo(() => {
   }
 
   // TODO: clintandrewhall - figure out the right logic for the onChange.
-  let controls = [<EuiHorizontalRule />, <IntegrationPreference onChange={() => {}} />];
+  let controls = [
+    <EuiHorizontalRule />,
+    <IntegrationPreference initialType={preference} onChange={setPreference} />,
+  ];
 
   if (categories) {
     controls = [
@@ -193,7 +195,7 @@ export const AvailablePackages: React.FC = memo(() => {
         isLoading={isLoadingCategories || isLoadingAllPackages || isLoadingAppendCustomIntegrations}
         categories={categories}
         selectedCategory={selectedCategory}
-        onCategoryChange={({ id }: CategoryFacet) => {
+        onCategoryChange={({ id }) => {
           setSelectedCategory(id);
         }}
       />,

diff --git a/...gins/fleet/public/applications/integrations/sections/epm/screens/home/category_facets.tsx b/...gins/fleet/public/applications/integrations/sections/epm/screens/home/category_facets.tsx
@@ -26,7 +26,7 @@ export interface Props {
   isLoading?: boolean;
   categories: CategoryFacet[];
   selectedCategory: string;
-  onCategoryChange: (category: CategoryFacet) => unknown;
+  onCategoryChange: (category: CategoryFacet) => void;
 }
 
 export function CategoryFacets({

diff --git a/...plugins/fleet/public/applications/integrations/sections/epm/screens/home/home.stories.tsx b/...plugins/fleet/public/applications/integrations/sections/epm/screens/home/home.stories.tsx
@@ -14,7 +14,6 @@ import { INTEGRATIONS_ROUTING_PATHS } from '../../../../constants';
 import { EPMHomePage as Component } from '.';
 
 export default {
-  component: Component,
   title: 'Sections/EPM/Home',
 };
 

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
@@ -12,7 +12,10 @@ import type { DynamicPage, DynamicPagePathValues, StaticPage } from '../../../..
 import { INTEGRATIONS_ROUTING_PATHS, INTEGRATIONS_SEARCH_QUERYPARAM } from '../../../../constants';
 import { DefaultLayout } from '../../../../layouts';
 
-import type { CustomIntegration } from '../../../../../../../../../../src/plugins/custom_integrations/common';
+import type {
+  CustomIntegration,
+  IntegrationCategory,
+} from '../../../../../../../../../../src/plugins/custom_integrations/common';
 
 import type { PackageListItem } from '../../../../types';
 
@@ -31,7 +34,10 @@ export const getParams = (params: CategoryParams, search: string) => {
   const selectedCategory = category || '';
   const queryParams = new URLSearchParams(search);
   const searchParam = queryParams.get(INTEGRATIONS_SEARCH_QUERYPARAM) || '';
-  return { selectedCategory, searchParam };
+  return { selectedCategory, searchParam } as {
+    selectedCategory: IntegrationCategory;
+    searchParam: string;
+  };
 };
 
 export const categoryExists = (category: string, categories: CategoryFacet[]) => {