ItemCard: deprecate and replace with composable pieces

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

plugins/techdocs/src/reader/components/TechDocsHome.test.tsx

@@ -16,34 +16,32 @@
 
 import { ApiProvider, ApiRegistry } from '@backstage/core';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
-import { wrapInTestApp } from '@backstage/test-utils';
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import { TechDocsHome } from './TechDocsHome';
 
 describe('TechDocs Home', () => {
   const catalogApi: Partial<CatalogApi> = {
-    getEntities: () => Promise.resolve({ items: [] }),
+    getEntities: async () => ({ items: [] }),
   };
 
-  const apiRegistry = ApiRegistry.from([[catalogApiRef, catalogApi]]);
+  const apiRegistry = ApiRegistry.with(catalogApiRef, catalogApi);
 
   it('should render a TechDocs home page', async () => {
-    const { findByTestId, findByText } = render(
-      wrapInTestApp(
-        <ApiProvider apis={apiRegistry}>
-          <TechDocsHome />
-        </ApiProvider>,
-      ),
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <TechDocsHome />
+      </ApiProvider>,
     );
 
     // Header
-    expect(await findByText('Documentation')).toBeInTheDocument();
+    expect(await screen.findByText('Documentation')).toBeInTheDocument();
     expect(
-      await findByText(/Documentation available in Backstage/i),
+      await screen.findByText(/Documentation available in Backstage/i),
     ).toBeInTheDocument();
 
     // Explore Content
-    expect(await findByTestId('docs-explore')).toBeDefined();
+    expect(await screen.findByTestId('docs-explore')).toBeDefined();
   });
 });

plugins/techdocs/src/reader/components/TechDocsHome.tsx

@@ -15,17 +15,19 @@
  */
 
 import {
+  Button,
   CodeSnippet,
   Content,
   Header,
-  ItemCard,
+  ItemCardGrid,
+  ItemCardHeader,
   Page,
   Progress,
   useApi,
   WarningPanel,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { Grid } from '@material-ui/core';
+import { Card, CardActions, CardContent, CardMedia } from '@material-ui/core';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
 import { useAsync } from 'react-use';
@@ -81,24 +83,30 @@ export const TechDocsHome = () => {
         subtitle="Documentation available in Backstage"
       />
       <Content>
-        <Grid container data-testid="docs-explore">
-          {value?.length
-            ? value.map((entity, index: number) => (
-                <Grid key={index} item xs={12} sm={6} md={3}>
-                  <ItemCard
-                    href={generatePath(rootDocsRouteRef.path, {
-                      namespace: entity.metadata.namespace ?? 'default',
-                      kind: entity.kind,
-                      name: entity.metadata.name,
-                    })}
-                    title={entity.metadata.name}
-                    label="Read Docs"
-                    description={entity.metadata.description}
-                  />
-                </Grid>
-              ))
-            : null}
-        </Grid>
+        <ItemCardGrid data-testid="docs-explore">
+          {!value?.length
+            ? null
+            : value.map((entity, index: number) => (
+                <Card key={index}>
+                  <CardMedia>
+                    <ItemCardHeader title={entity.metadata.name} />
+                  </CardMedia>
+                  <CardContent>{entity.metadata.description}</CardContent>
+                  <CardActions>
+                    <Button
+                      to={generatePath(rootDocsRouteRef.path, {
+                        namespace: entity.metadata.namespace ?? 'default',
+                        kind: entity.kind,
+                        name: entity.metadata.name,
+                      })}
+                      color="primary"
+                    >
+                      Read Docs
+                    </Button>
+                  </CardActions>
+                </Card>
+              ))}
+        </ItemCardGrid>
       </Content>
     </Page>
   );