diff --git a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
index e5f9a1975d83..59d957733871 100644
--- a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
+++ b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
@@ -11,15 +11,15 @@ exports[` render with complex navLinks 1`] = `
class="euiSpacer euiSpacer--m"
/>
render with complex navLinks 1`] = `
render with complex navLinks 1`] = `
render with complex navLinks 1`] = `
render with complex navLinks 1`] = `
-
-
render with complex navLinks 1`] = `
-
-
-
render with complex navLinks 1`] = `
class="euiSpacer euiSpacer--m"
/>
render with complex navLinks 1`] = `
render with complex navLinks 1`] = `
render with complex navLinks 1`] = `
render with complex navLinks 1`] = `
-
-
render with complex navLinks 1`] = `
-
-
-
', () => {
});
it('render with complex navLinks', () => {
- const { container, getAllByTestId } = render(
+ const { container } = render(
', () => {
/>
);
expect(container).toMatchSnapshot();
- expect(getAllByTestId('landingPageRow_1').length).toEqual(2);
});
it('click item', () => {
diff --git a/src/plugins/management/public/components/feature_cards/feature_cards.tsx b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
index 73a0e300dacb..2d2a3756654f 100644
--- a/src/plugins/management/public/components/feature_cards/feature_cards.tsx
+++ b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
@@ -30,26 +30,20 @@ export const FeatureCards = ({
pageDescription,
navigationUI: { HeaderControl },
}: FeatureCardsProps) => {
- const itemsPerRow = 4;
const groupedCardForDisplay = useMemo(() => {
- const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[][] }> = [];
+ const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[] }> = [];
// The navLinks has already been sorted based on link / category's order,
// so it is safe to group the links here.
navLinks.forEach((link) => {
let lastGroup = grouped.length ? grouped[grouped.length - 1] : undefined;
- if (!lastGroup || lastGroup.category !== link.category) {
- lastGroup = { category: link.category, navLinks: [[]] };
+ if (!lastGroup || lastGroup.category?.id !== link.category?.id) {
+ lastGroup = { category: link.category, navLinks: [] };
grouped.push(lastGroup);
}
- const lastRow = lastGroup.navLinks[lastGroup.navLinks.length - 1];
- if (lastRow.length < itemsPerRow) {
- lastRow.push(link);
- } else {
- lastGroup.navLinks.push([link]);
- }
+ lastGroup.navLinks.push(link);
});
return grouped;
- }, [itemsPerRow, navLinks]);
+ }, [navLinks]);
if (!navLinks.length) {
return null;
}
@@ -72,30 +66,23 @@ export const FeatureCards = ({
)}
- {group.navLinks.map((row, rowIndex) => {
- return (
-
- {Array.from({ length: itemsPerRow }).map((item, itemIndexInRow) => {
- const link = row[itemIndexInRow];
- const content = link ? (
- navigateToApp(link.id)}
- titleSize="xs"
- />
- ) : null;
- return (
-
- {content}
-
- );
- })}
-
- );
- })}
+
+ {group.navLinks.map((link, index) => {
+ return (
+
+ navigateToApp(link.id)}
+ titleSize="xs"
+ style={{ width: 200 }}
+ />
+
+ );
+ })}
+
))}