ItemCard: deprecate and replace with composable pieces

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

plugins/explore/src/components/DomainCard/DomainCard.tsx

@@ -14,12 +14,20 @@
  * limitations under the License.
  */
 import { DomainEntity, RELATION_OWNED_BY } from '@backstage/catalog-model';
-import { ItemCard, useRouteRef } from '@backstage/core';
+import { Button, ItemCardHeader, useRouteRef } from '@backstage/core';
 import {
   EntityRefLinks,
   entityRouteParams,
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
+import {
+  Box,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+} from '@material-ui/core';
 import React from 'react';
 import { catalogEntityRouteRef } from '../../routes';
 
@@ -28,23 +36,39 @@ type DomainCardProps = {
 };
 
 export const DomainCard = ({ entity }: DomainCardProps) => {
-  const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
   const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);
 
-  return (
-    <ItemCard
-      title={entity.metadata.name}
-      description={entity.metadata.description}
-      tags={entity.metadata.tags}
-      subtitle={
-        <EntityRefLinks
-          entityRefs={ownedByRelations}
-          defaultKind="group"
-          color="inherit"
-        />
-      }
-      label="Explore"
-      href={catalogEntityRoute(entityRouteParams(entity))}
+  const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+  const url = catalogEntityRoute(entityRouteParams(entity));
+
+  const owner = (
+    <EntityRefLinks
+      entityRefs={ownedByRelations}
+      defaultKind="group"
+      color="inherit"
     />
   );
+
+  return (
+    <Card>
+      <CardMedia>
+        <ItemCardHeader title={entity.metadata.name} subtitle={owner} />
+      </CardMedia>
+      <CardContent>
+        {entity.metadata.tags?.length ? (
+          <Box>
+            {entity.metadata.tags.map(tag => (
+              <Chip size="small" label={tag} key={tag} />
+            ))}
+          </Box>
+        ) : null}
+        {entity.metadata.description}
+      </CardContent>
+      <CardActions>
+        <Button to={url} color="primary">
+          Explore
+        </Button>
+      </CardActions>
+    </Card>
+  );
 };

plugins/explore/src/components/DomainCard/DomainCardGrid.test.tsx

@@ -1,59 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { DomainEntity } from '@backstage/catalog-model';
-import { renderInTestApp } from '@backstage/test-utils';
-import React from 'react';
-import { catalogEntityRouteRef } from '../../routes';
-import { DomainCardGrid } from './DomainCardGrid';
-
-describe('<DomainCardGrid />', () => {
-  it('renders a grid of domain cards', async () => {
-    const entities: DomainEntity[] = [
-      {
-        apiVersion: 'backstage.io/v1alpha1',
-        kind: 'Domain',
-        metadata: {
-          name: 'playback',
-        },
-        spec: {
-          owner: 'guest',
-        },
-      },
-      {
-        apiVersion: 'backstage.io/v1alpha1',
-        kind: 'Domain',
-        metadata: {
-          name: 'artists',
-        },
-        spec: {
-          owner: 'guest',
-        },
-      },
-    ];
-    const { getByText } = await renderInTestApp(
-      <DomainCardGrid entities={entities} />,
-      {
-        mountedRoutes: {
-          '/catalog/:namespace/:kind/:name': catalogEntityRouteRef,
-        },
-      },
-    );
-
-    expect(getByText('artists')).toBeInTheDocument();
-    expect(getByText('playback')).toBeInTheDocument();
-  });
-});

plugins/explore/src/components/DomainCard/DomainCardGrid.tsx

@@ -1,33 +0,0 @@
-/*
- * Copyright 2021 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { DomainEntity } from '@backstage/catalog-model';
-import { Grid } from '@material-ui/core';
-import React from 'react';
-import { DomainCard } from '.';
-
-type DomainCardGridProps = {
-  entities: DomainEntity[];
-};
-
-export const DomainCardGrid = ({ entities }: DomainCardGridProps) => (
-  <Grid container spacing={4}>
-    {entities.map((e, i) => (
-      <Grid item xs={12} md={3} key={i}>
-        <DomainCard entity={e} />
-      </Grid>
-    ))}
-  </Grid>
-);

plugins/explore/src/components/DomainCard/index.ts

@@ -14,4 +14,3 @@
  * limitations under the License.
  */
 export { DomainCard } from './DomainCard';
-export { DomainCardGrid } from './DomainCardGrid';

plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx

@@ -18,6 +18,7 @@ import {
   Content,
   ContentHeader,
   EmptyState,
+  ItemCardGrid,
   Progress,
   SupportButton,
   useApi,
@@ -27,47 +28,64 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
-import { DomainCardGrid } from '../DomainCard';
+import { DomainCard } from '../DomainCard';
 
-export const DomainExplorerContent = () => {
+const Body = () => {
   const catalogApi = useApi(catalogApiRef);
   const { value: entities, loading, error } = useAsync(async () => {
     const response = await catalogApi.getEntities({
       filter: { kind: 'domain' },
     });
-
     return response.items as DomainEntity[];
   }, [catalogApi]);
 
+  if (loading) {
+    return <Progress />;
+  }
+
+  if (error) {
+    return (
+      <WarningPanel severity="error" title="Could not load domains.">
+        {error.message}
+      </WarningPanel>
+    );
+  }
+
+  if (!entities?.length) {
+    return (
+      <EmptyState
+        missing="info"
+        title="No domains to display"
+        description="You haven't added any domains yet."
+        action={
+          <Button
+            variant="contained"
+            color="primary"
+            href="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-domain"
+          >
+            Read more
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <ItemCardGrid>
+      {entities.map((entity, index) => (
+        <DomainCard key={index} entity={entity} />
+      ))}
+    </ItemCardGrid>
+  );
+};
+
+export const DomainExplorerContent = () => {
   return (
     <Content noPadding>
       <ContentHeader title="Domains">
         <SupportButton>Discover the domains in your ecosystem.</SupportButton>
       </ContentHeader>
-
-      {loading && <Progress />}
-      {error && (
-        <WarningPanel severity="error" title="Could not load domains.">
-          {error.message}
-        </WarningPanel>
-      )}
-      {!loading && !error && (!entities || entities.length === 0) && (
-        <EmptyState
-          missing="info"
-          title="No domains to display"
-          description={`You haven't added any domains yet.`}
-          action={
-            <Button
-              variant="contained"
-              color="primary"
-              href="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-domain"
-            >
-              Read more
-            </Button>
-          }
-        />
-      )}
-      {!loading && entities && <DomainCardGrid entities={entities} />}
+      <Body />
     </Content>
   );
 };