diff --git a/.changeset/smart-waves-dream.md b/.changeset/smart-waves-dream.md new file mode 100644 index 0000000000..648493f2df --- /dev/null +++ b/.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 diff --git a/plugins/explore-react/src/tools/api.ts b/plugins/explore-react/src/tools/api.ts index 5d96033546..b7c39b4d50 100644 --- a/plugins/explore-react/src/tools/api.ts +++ b/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 { diff --git a/plugins/explore/src/components/ToolCard/ToolCard.tsx b/plugins/explore/src/components/ToolCard/ToolCard.tsx index c6d812b098..60f467ca80 100644 --- a/plugins/explore/src/components/ToolCard/ToolCard.tsx +++ b/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(theme => ({ - card: { - display: 'flex', - flexDirection: 'column', - }, - cardActions: { - flexGrow: 1, - alignItems: 'flex-end', - }, media: { height: 128, }, @@ -59,13 +52,6 @@ const useStyles = makeStyles(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 ( - + { })} /> - + {title}{' '} {lifecycle && lifecycle.toLowerCase() !== 'ga' && ( { /> )} - - {description || 'Description missing'} - + {description || 'Description missing'} {tags && ( -
+ {tags.map((item, idx) => ( - + ))} -
+ )}
- - diff --git a/plugins/explore/src/components/ToolCard/ToolCardGrid.tsx b/plugins/explore/src/components/ToolCard/ToolCardGrid.tsx deleted file mode 100644 index 5b6fbd1834..0000000000 --- a/plugins/explore/src/components/ToolCard/ToolCardGrid.tsx +++ /dev/null @@ -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(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 ( -
- {tools.map((card: ExploreTool, ix: any) => ( - - ))} -
- ); -}; diff --git a/plugins/explore/src/components/ToolCard/index.ts b/plugins/explore/src/components/ToolCard/index.ts index 84599aa163..805d822a05 100644 --- a/plugins/explore/src/components/ToolCard/index.ts +++ b/plugins/explore/src/components/ToolCard/index.ts @@ -14,4 +14,3 @@ * limitations under the License. */ export { ToolCard } from './ToolCard'; -export { ToolCardGrid } from './ToolCardGrid'; diff --git a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx index 8b8b3f0a61..e00606eeb2 100644 --- a/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx +++ b/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 ( - - - Discover the tools in your ecosystem. - + if (loading) { + return ; + } - {loading && } - {!loading && (!tools || tools.length === 0) && ( - - )} - {!loading && tools && } - + if (error) { + return ; + } + + if (!tools?.length) { + return ( + + ); + } + + return ( + + {tools.map((tool, index) => ( + + ))} + ); }; + +export const ToolExplorerContent = () => ( + + + Discover the tools in your ecosystem. + + + +);