Merge pull request #23097 from zeshanziya/home-page

Inconsistency in Styling and Title Visibility for Top Visited and Recently Visited Cards

.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

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 (
     <>
-      <Typography variant="h5" className={classes.title}>
-        {title}
-      </Typography>
+      {title && <h5>{title}</h5>}
       <List dense disablePadding>
         {listBody}
       </List>

plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx

@@ -66,7 +66,6 @@ describe('<Content kind="recent"/>', () => {
         </ContextProvider>
       </TestApiProvider>,
     );
-    expect(getByText('Recently Visited')).toBeInTheDocument();
     await waitFor(() =>
       expect(getByText('Explore Backstage')).toBeInTheDocument(),
     );
@@ -91,7 +90,6 @@ describe('<Content kind="recent"/>', () => {
         </ContextProvider>
       </TestApiProvider>,
     );
-    expect(getByText('Recently Visited')).toBeInTheDocument();
     await waitFor(() => expect(getByText('Tech Radar')).toBeInTheDocument());
   });
 
@@ -279,7 +277,6 @@ describe('<Content kind="top"/>', () => {
         </ContextProvider>
       </TestApiProvider>,
     );
-    expect(getByText('Top Visited')).toBeInTheDocument();
     await waitFor(() =>
       expect(getByText('Explore Backstage')).toBeInTheDocument(),
     );

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('<VisitedByType/> kind="top"', () => {
-  it('should render', async () => {
-    const { getByText } = await renderInTestApp(
-      <Context.Provider value={{ ...defaultContextValue, kind: 'top' }}>
-        <VisitedByType />
-      </Context.Provider>,
-    );
-    expect(getByText('Top Visited')).toBeInTheDocument();
-  });
   it('should display hits', async () => {
     const { getByText } = await renderInTestApp(
       <Context.Provider
@@ -55,14 +47,6 @@ describe('<VisitedByType/> kind="top"', () => {
 });
 
 describe('<VisitedByType/> kind="recent"', () => {
-  it('should render', async () => {
-    const { getByText } = await renderInTestApp(
-      <Context.Provider value={{ ...defaultContextValue, kind: 'recent' }}>
-        <VisitedByType />
-      </Context.Provider>,
-    );
-    expect(getByText('Recently Visited')).toBeInTheDocument();
-  });
   it('should display how long ago a visit happened', async () => {
     const { getByText } = await renderInTestApp(
       <Context.Provider

plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx

@@ -25,7 +25,6 @@ export const VisitedByType = () => {
   return (
     <VisitList
       visits={visits}
-      title={kind === 'top' ? 'Top Visited' : 'Recently Visited'}
       detailType={kind === 'top' ? 'hits' : 'time-ago'}
       collapsed={collapsed}
       numVisitsOpen={numVisitsOpen}

plugins/home/src/plugin.ts

@@ -200,6 +200,7 @@ export const HeaderWorldClock = homePlugin.provide(
 export const HomePageTopVisited = homePlugin.provide(
   createCardExtension<Partial<VisitedByTypeProps>>({
     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<Partial<VisitedByTypeProps>>({
     name: 'HomePageRecentlyVisited',
+    title: 'Recently Visited',
     components: () =>
       import('./homePageComponents/VisitedByType/RecentlyVisited'),
   }),