diff --git a/.changeset/ten-wasps-juggle.md b/.changeset/ten-wasps-juggle.md
new file mode 100644
index 0000000000..25b4f11d25
--- /dev/null
+++ b/.changeset/ten-wasps-juggle.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': minor
+---
+
+Resolved styling inconsistencies and title visibility issues in Top Visited and Recently Visited cards
diff --git a/plugins/home/src/components/VisitList/VisitList.tsx b/plugins/home/src/components/VisitList/VisitList.tsx
index f1dc855d9d..7e79d5439f 100644
--- a/plugins/home/src/components/VisitList/VisitList.tsx
+++ b/plugins/home/src/components/VisitList/VisitList.tsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
-import { Collapse, List, Typography, makeStyles } from '@material-ui/core';
+import { Collapse, List } from '@material-ui/core';
import { Visit } from '../../api/VisitsApi';
import { VisitListItem } from './VisitListItem';
import { ItemDetailType } from './ItemDetail';
@@ -23,31 +23,23 @@ import { VisitListEmpty } from './VisitListEmpty';
import { VisitListFew } from './VisitListFew';
import { VisitListSkeleton } from './VisitListSkeleton';
-const useStyles = makeStyles(_theme => ({
- title: {
- marginBottom: '2rem',
- },
-}));
-
export const VisitList = ({
- title,
detailType,
visits = [],
numVisitsOpen = 3,
numVisitsTotal = 8,
collapsed = true,
loading = false,
+ title = '',
}: {
- title: string;
detailType: ItemDetailType;
visits?: Visit[];
numVisitsOpen?: number;
numVisitsTotal?: number;
collapsed?: boolean;
loading?: boolean;
+ title?: string;
}) => {
- const classes = useStyles();
-
let listBody: React.ReactElement = <>>;
if (loading) {
listBody = (
@@ -91,9 +83,7 @@ export const VisitList = ({
return (
<>
-
- {title}
-
+ {title &&
{title}
}
{listBody}
diff --git a/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx b/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx
index 2a7a6481ba..055ebf998b 100644
--- a/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx
+++ b/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx
@@ -66,7 +66,6 @@ describe('', () => {
,
);
- expect(getByText('Recently Visited')).toBeInTheDocument();
await waitFor(() =>
expect(getByText('Explore Backstage')).toBeInTheDocument(),
);
@@ -91,7 +90,6 @@ describe('', () => {
,
);
- expect(getByText('Recently Visited')).toBeInTheDocument();
await waitFor(() => expect(getByText('Tech Radar')).toBeInTheDocument());
});
@@ -279,7 +277,6 @@ describe('', () => {
,
);
- expect(getByText('Top Visited')).toBeInTheDocument();
await waitFor(() =>
expect(getByText('Explore Backstage')).toBeInTheDocument(),
);
diff --git a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx
index 9e363f55aa..4e3cf1e058 100644
--- a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx
+++ b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx
@@ -21,14 +21,6 @@ import { renderInTestApp } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
describe(' kind="top"', () => {
- it('should render', async () => {
- const { getByText } = await renderInTestApp(
-
-
- ,
- );
- expect(getByText('Top Visited')).toBeInTheDocument();
- });
it('should display hits', async () => {
const { getByText } = await renderInTestApp(
kind="top"', () => {
});
describe(' kind="recent"', () => {
- it('should render', async () => {
- const { getByText } = await renderInTestApp(
-
-
- ,
- );
- expect(getByText('Recently Visited')).toBeInTheDocument();
- });
it('should display how long ago a visit happened', async () => {
const { getByText } = await renderInTestApp(
{
return (
>({
name: 'HomePageTopVisited',
+ title: 'Top Visited',
components: () => import('./homePageComponents/VisitedByType/TopVisited'),
}),
);
@@ -211,6 +212,7 @@ export const HomePageTopVisited = homePlugin.provide(
export const HomePageRecentlyVisited = homePlugin.provide(
createCardExtension>({
name: 'HomePageRecentlyVisited',
+ title: 'Recently Visited',
components: () =>
import('./homePageComponents/VisitedByType/RecentlyVisited'),
}),