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'), }),