Standardize the tool cards in explore some more

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

.changeset/smart-waves-dream.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-explore': patch
+'@backstage/plugin-explore-react': patch
+---
+
+Standardize the tool cards in explore some more

plugins/explore-react/src/tools/api.ts

@@ -28,7 +28,6 @@ export type ExploreTool = {
   image: string;
   tags?: string[];
   lifecycle?: string;
-  newsTag?: string;
 };
 
 export interface ExploreToolsConfig {

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -17,6 +17,7 @@
 import { ExploreTool } from '@backstage/plugin-explore-react';
 import { BackstageTheme } from '@backstage/theme';
 import {
+  Box,
   Button,
   Card,
   CardActions,
@@ -32,14 +33,6 @@ import React from 'react';
 // TODO: Align styling between Domain and ToolCard
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
-  card: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  cardActions: {
-    flexGrow: 1,
-    alignItems: 'flex-end',
-  },
   media: {
     height: 128,
   },
@@ -59,13 +52,6 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   beta: {
     backgroundColor: theme.palette.status.warning,
   },
-  domains: {
-    position: 'relative',
-    top: theme.spacing(2),
-  },
-  spaceBetween: {
-    justifyContent: 'space-between',
-  },
 }));
 
 type Props = {
@@ -76,10 +62,10 @@ type Props = {
 export const ToolCard = ({ card, objectFit }: Props) => {
   const classes = useStyles();
 
-  const { title, description, url, image, lifecycle, newsTag, tags } = card;
+  const { title, description, url, image, lifecycle, tags } = card;
 
   return (
-    <Card key={title} className={classes.card}>
+    <Card key={title}>
       <CardMedia
         image={image}
         title={title}
@@ -88,10 +74,11 @@ export const ToolCard = ({ card, objectFit }: Props) => {
         })}
       />
       <CardContent>
-        <Typography gutterBottom variant="h5">
+        <Typography paragraph variant="h5">
           {title}{' '}
           {lifecycle && lifecycle.toLowerCase() !== 'ga' && (
             <Chip
+              size="small"
               label={lifecycle}
               className={classNames(
                 classes.lifecycle,
@@ -100,23 +87,17 @@ export const ToolCard = ({ card, objectFit }: Props) => {
             />
           )}
         </Typography>
-        <Typography paragraph>
-          {description || 'Description missing'}
-        </Typography>
+        <Typography>{description || 'Description missing'}</Typography>
         {tags && (
-          <div className={classes.domains}>
+          <Box marginTop={2}>
             {tags.map((item, idx) => (
-              <Chip key={idx} label={item} />
+              <Chip size="small" key={idx} label={item} />
             ))}
-          </div>
+          </Box>
         )}
       </CardContent>
-      <CardActions
-        className={classNames(classes.cardActions, {
-          [classes.spaceBetween]: newsTag,
-        })}
-      >
-        <Button size="small" color="primary" href={url} disabled={!url}>
+      <CardActions>
+        <Button color="primary" href={url} disabled={!url}>
           Explore
         </Button>
       </CardActions>

plugins/explore/src/components/ToolCard/ToolCardGrid.tsx

@@ -1,46 +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 { ExploreTool } from '@backstage/plugin-explore-react';
-import { BackstageTheme } from '@backstage/theme';
-import { makeStyles } from '@material-ui/core';
-import React from 'react';
-import { ToolCard } from './ToolCard';
-
-const useStyles = makeStyles<BackstageTheme>(theme => ({
-  container: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, 296px)',
-    gridGap: theme.spacing(3),
-    marginBottom: theme.spacing(6),
-  },
-}));
-
-type ToolCardGridProps = {
-  tools: ExploreTool[];
-};
-
-export const ToolCardGrid = ({ tools }: ToolCardGridProps) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.container}>
-      {tools.map((card: ExploreTool, ix: any) => (
-        <ToolCard card={card} key={ix} />
-      ))}
-    </div>
-  );
-};

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

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

plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx

@@ -17,36 +17,55 @@ import {
   Content,
   ContentHeader,
   EmptyState,
+  ItemCardGrid,
   Progress,
   SupportButton,
   useApi,
+  WarningPanel,
 } from '@backstage/core';
 import { exploreToolsConfigRef } from '@backstage/plugin-explore-react';
 import React from 'react';
 import { useAsync } from 'react-use';
-import { ToolCardGrid } from '../ToolCard';
+import { ToolCard } from '../ToolCard';
 
-export const ToolExplorerContent = () => {
+const Body = () => {
   const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
-  const { value: tools, loading } = useAsync(async () => {
+  const { value: tools, loading, error } = useAsync(async () => {
     return await exploreToolsConfigApi.getTools();
   }, [exploreToolsConfigApi]);
 
-  return (
-    <Content noPadding>
-      <ContentHeader title="Tools">
-        <SupportButton>Discover the tools in your ecosystem.</SupportButton>
-      </ContentHeader>
+  if (loading) {
+    return <Progress />;
+  }
 
-      {loading && <Progress />}
-      {!loading && (!tools || tools.length === 0) && (
-        <EmptyState
-          missing="info"
-          title="No tools to display"
-          description={`You haven't added any tools yet.`}
-        />
-      )}
-      {!loading && tools && <ToolCardGrid tools={tools} />}
-    </Content>
+  if (error) {
+    return <WarningPanel title="Failed to load tools" />;
+  }
+
+  if (!tools?.length) {
+    return (
+      <EmptyState
+        missing="info"
+        title="No tools to display"
+        description="You haven't added any tools yet."
+      />
+    );
+  }
+
+  return (
+    <ItemCardGrid>
+      {tools.map((tool, index) => (
+        <ToolCard key={index} card={tool} />
+      ))}
+    </ItemCardGrid>
   );
 };
+
+export const ToolExplorerContent = () => (
+  <Content noPadding>
+    <ContentHeader title="Tools">
+      <SupportButton>Discover the tools in your ecosystem.</SupportButton>
+    </ContentHeader>
+    <Body />
+  </Content>
+);