From 207024e2e04ca432d7e4d23f2d01d44fcf57e796 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Wed, 27 Jan 2021 17:52:19 +0100 Subject: [PATCH] Implement explorer page --- packages/app/src/App.tsx | 29 +++--- packages/app/src/components/Root/Root.tsx | 2 +- plugins/explore/README.md | 2 +- plugins/explore/dev/index.tsx | 5 +- plugins/explore/package.json | 3 +- .../DomainCard/DomainCardGrid.test.tsx | 54 +++++++++++ .../DomainCardGrid.tsx} | 6 +- .../src/components/DomainCard/index.ts | 1 + .../DomainExplorerContent.test.tsx | 93 +++++++++++++++++++ .../DomainExplorerContent.tsx | 6 +- .../index.ts | 2 +- .../components/ExplorePage/ExplorePage.tsx | 2 +- .../components/ExplorePage/ExploreTabs.tsx | 40 +++++--- .../ToolCard.test.js} | 21 ++--- .../ToolCard.tsx} | 25 ++--- .../src/components/ToolCard/ToolCardGrid.tsx | 46 +++++++++ .../index.ts} | 22 +---- .../explore/src/components/ToolCard/types.ts | 25 +++++ .../ToolExplorerContent.tsx} | 52 +++-------- .../index.ts | 2 +- plugins/explore/src/plugin.test.ts | 4 +- plugins/explore/src/routes.ts | 1 - 22 files changed, 311 insertions(+), 132 deletions(-) create mode 100644 plugins/explore/src/components/DomainCard/DomainCardGrid.test.tsx rename plugins/explore/src/components/{DomainExplorer/DomainExplorer.tsx => DomainCard/DomainCardGrid.tsx} (87%) create mode 100644 plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx rename plugins/explore/src/components/{DomainExplorerPage => DomainExplorerContent}/DomainExplorerContent.tsx (93%) rename plugins/explore/src/components/{DomainExplorerPage => DomainExplorerContent}/index.ts (90%) rename plugins/explore/src/components/{ExploreCard.test.js => ToolCard/ToolCard.test.js} (81%) rename plugins/explore/src/components/{ExploreCard.tsx => ToolCard/ToolCard.tsx} (92%) create mode 100644 plugins/explore/src/components/ToolCard/ToolCardGrid.tsx rename plugins/explore/src/components/{DomainExplorerPage/DomainExplorerPage.tsx => ToolCard/index.ts} (50%) create mode 100644 plugins/explore/src/components/ToolCard/types.ts rename plugins/explore/src/components/{ExplorePluginPage.tsx => ToolExplorerContent/ToolExplorerContent.tsx} (76%) rename plugins/explore/src/components/{DomainExplorer => ToolExplorerContent}/index.ts (90%) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 1b76773979..00696736d1 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -15,30 +15,30 @@ */ import { - createApp, AlertDisplay, - OAuthRequestDialog, - SignInPage, + createApp, createRouteRef, FlatRoutes, + OAuthRequestDialog, + SignInPage, } from '@backstage/core'; -import React from 'react'; -import Root from './components/Root'; -import * as plugins from './plugins'; -import { apis } from './apis'; -import { hot } from 'react-hot-loader/root'; -import { providers } from './identityProviders'; import { Router as CatalogRouter } from '@backstage/plugin-catalog'; -import { Router as DocsRouter } from '@backstage/plugin-techdocs'; +import { Router as ImportComponentRouter } from '@backstage/plugin-catalog-import'; +import { ExplorePage } from '@backstage/plugin-explore'; import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql'; -import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse'; import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component'; +import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; +import { Router as DocsRouter } from '@backstage/plugin-techdocs'; import { Router as SettingsRouter } from '@backstage/plugin-user-settings'; -import { Router as ImportComponentRouter } from '@backstage/plugin-catalog-import'; -import { Route, Navigate } from 'react-router'; - +import React from 'react'; +import { hot } from 'react-hot-loader/root'; +import { Navigate, Route } from 'react-router'; +import { apis } from './apis'; import { EntityPage } from './components/catalog/EntityPage'; +import Root from './components/Root'; +import { providers } from './identityProviders'; +import * as plugins from './plugins'; const app = createApp({ apis, @@ -78,6 +78,7 @@ const routes = ( element={} /> } /> + } /> } diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index fca05db222..80706fe459 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -83,10 +83,10 @@ const Root = ({ children }: PropsWithChildren<{}>) => ( + {/* End global nav */} - diff --git a/plugins/explore/README.md b/plugins/explore/README.md index 522fb15df8..2b17efc605 100644 --- a/plugins/explore/README.md +++ b/plugins/explore/README.md @@ -1,7 +1,7 @@ # explore Welcome to the explore plugin! -This plugin helps to visualize the domains and in your ecosystem. +This plugin helps to visualize the domains and tools in your ecosystem. ## Getting started diff --git a/plugins/explore/dev/index.tsx b/plugins/explore/dev/index.tsx index d28bd50bd0..cf03991530 100644 --- a/plugins/explore/dev/index.tsx +++ b/plugins/explore/dev/index.tsx @@ -17,10 +17,10 @@ import { Entity } from '@backstage/catalog-model'; import { createDevApp } from '@backstage/dev-utils'; import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog'; -import { plugin } from '../src/plugin'; +import React from 'react'; +import { ExplorePage } from '../src/extensions'; createDevApp() - .registerPlugin(plugin) .registerApi({ api: catalogApiRef, deps: {}, @@ -56,4 +56,5 @@ createDevApp() }, } as CatalogApi), }) + .addPage({ element: , title: 'Explore' }) .render(); diff --git a/plugins/explore/package.json b/plugins/explore/package.json index 6d3e21ced0..418370d70d 100644 --- a/plugins/explore/package.json +++ b/plugins/explore/package.json @@ -30,8 +30,9 @@ "start": "backstage-cli plugin:serve" }, "dependencies": { - "@backstage/core": "^0.5.0", "@backstage/catalog-model": "^0.7.0", + "@backstage/core": "^0.5.0", + "@backstage/plugin-catalog": "^0.2.12", "@backstage/theme": "^0.2.2", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", diff --git a/plugins/explore/src/components/DomainCard/DomainCardGrid.test.tsx b/plugins/explore/src/components/DomainCard/DomainCardGrid.test.tsx new file mode 100644 index 0000000000..bad3ca581b --- /dev/null +++ b/plugins/explore/src/components/DomainCard/DomainCardGrid.test.tsx @@ -0,0 +1,54 @@ +/* + * 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 { render } from '@testing-library/react'; +import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { DomainCardGrid } from './DomainCardGrid'; + +describe('', () => { + it('renders a grid of domain cards', () => { + 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 } = render(, { + wrapper: MemoryRouter, + }); + + expect(getByText('artists')).toBeInTheDocument(); + expect(getByText('playback')).toBeInTheDocument(); + }); +}); diff --git a/plugins/explore/src/components/DomainExplorer/DomainExplorer.tsx b/plugins/explore/src/components/DomainCard/DomainCardGrid.tsx similarity index 87% rename from plugins/explore/src/components/DomainExplorer/DomainExplorer.tsx rename to plugins/explore/src/components/DomainCard/DomainCardGrid.tsx index 92bdc4f14a..b4a13aa39f 100644 --- a/plugins/explore/src/components/DomainExplorer/DomainExplorer.tsx +++ b/plugins/explore/src/components/DomainCard/DomainCardGrid.tsx @@ -16,13 +16,13 @@ import { DomainEntity } from '@backstage/catalog-model'; import { Grid } from '@material-ui/core'; import React from 'react'; -import { DomainCard } from '../DomainCard'; +import { DomainCard } from '.'; -type DomainExplorerProps = { +type DomainCardGridProps = { entities: DomainEntity[]; }; -export const DomainExplorer = ({ entities }: DomainExplorerProps) => ( +export const DomainCardGrid = ({ entities }: DomainCardGridProps) => ( {entities.map((e, i) => ( diff --git a/plugins/explore/src/components/DomainCard/index.ts b/plugins/explore/src/components/DomainCard/index.ts index 3511ff023d..6acf10800a 100644 --- a/plugins/explore/src/components/DomainCard/index.ts +++ b/plugins/explore/src/components/DomainCard/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { DomainCard } from './DomainCard'; +export { DomainCardGrid } from './DomainCardGrid'; diff --git a/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx b/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx new file mode 100644 index 0000000000..212479b4de --- /dev/null +++ b/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx @@ -0,0 +1,93 @@ +/* + * 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 { ApiProvider, ApiRegistry } from '@backstage/core'; +import { catalogApiRef } from '@backstage/plugin-catalog'; +import { render, waitFor } from '@testing-library/react'; +import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { DomainExplorerContent } from './DomainExplorerContent'; + +describe('', () => { + const catalogApi: jest.Mocked = { + addLocation: jest.fn(_a => new Promise(() => {})), + getEntities: jest.fn(), + getLocationByEntity: jest.fn(), + getLocationById: jest.fn(), + removeEntityByUid: jest.fn(), + getEntityByName: jest.fn(), + }; + + const Wrapper = ({ children }: { children?: React.ReactNode }) => ( + + + {children} + + + ); + + beforeEach(() => { + jest.resetAllMocks(); + }); + + it('renders a grid of domains', 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', + }, + }, + ]; + catalogApi.getEntities.mockResolvedValue({ items: entities }); + + const { getByText } = render(, { + wrapper: Wrapper, + }); + + await waitFor(() => { + expect(getByText('artists')).toBeInTheDocument(); + expect(getByText('playback')).toBeInTheDocument(); + }); + }); + + it('renders empty state', async () => { + catalogApi.getEntities.mockResolvedValue({ items: [] }); + + const { getByText } = render(, { + wrapper: Wrapper, + }); + + await waitFor(() => + expect(getByText('No domains to display')).toBeInTheDocument(), + ); + }); +}); diff --git a/plugins/explore/src/components/DomainExplorerPage/DomainExplorerContent.tsx b/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx similarity index 93% rename from plugins/explore/src/components/DomainExplorerPage/DomainExplorerContent.tsx rename to plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx index 90faabbb7d..b2f225c458 100644 --- a/plugins/explore/src/components/DomainExplorerPage/DomainExplorerContent.tsx +++ b/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx @@ -26,7 +26,7 @@ import { catalogApiRef } from '@backstage/plugin-catalog'; import { Button } from '@material-ui/core'; import React from 'react'; import { useAsync } from 'react-use'; -import { DomainExplorer } from '../DomainExplorer/DomainExplorer'; +import { DomainCardGrid } from '../DomainCard'; export const DomainExplorerContent = () => { const catalogApi = useApi(catalogApiRef); @@ -39,7 +39,7 @@ export const DomainExplorerContent = () => { }, [catalogApi]); return ( - + Discover the domains in your ecosystem. @@ -60,7 +60,7 @@ export const DomainExplorerContent = () => { } /> )} - {!loading && entities && } + {!loading && entities && } ); }; diff --git a/plugins/explore/src/components/DomainExplorerPage/index.ts b/plugins/explore/src/components/DomainExplorerContent/index.ts similarity index 90% rename from plugins/explore/src/components/DomainExplorerPage/index.ts rename to plugins/explore/src/components/DomainExplorerContent/index.ts index 121eacdc99..4012332006 100644 --- a/plugins/explore/src/components/DomainExplorerPage/index.ts +++ b/plugins/explore/src/components/DomainExplorerContent/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { DomainExplorerPage } from './DomainExplorerPage'; +export { DomainExplorerContent } from './DomainExplorerContent'; diff --git a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx index ade7d8326c..3f9394a1ab 100644 --- a/plugins/explore/src/components/ExplorePage/ExplorePage.tsx +++ b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx @@ -25,7 +25,7 @@ export const ExplorePage = () => {
diff --git a/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx index a3e67f44bf..ef7b64ebe2 100644 --- a/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx +++ b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx @@ -14,22 +14,36 @@ * limitations under the License. */ import { Tabs } from '@backstage/core'; +import { makeStyles } from '@material-ui/core'; import React from 'react'; -import { DomainExplorerContent } from '../DomainExplorerPage/DomainExplorerContent'; +import { DomainExplorerContent } from '../DomainExplorerContent'; +import { ToolExplorerContent } from '../ToolExplorerContent'; + +// TODO: Support sub routes for these tabs in the future + +const useStyles = makeStyles({ + layout: { + gridArea: 'pageContent', + }, +}); export const ExploreTabs = () => { + const classes = useStyles(); + return ( - , - }, - { - label: `Tools`, - content: , - }, - ]} - /> +
+ , + }, + { + label: `Tools`, + content: , + }, + ]} + /> +
); }; diff --git a/plugins/explore/src/components/ExploreCard.test.js b/plugins/explore/src/components/ToolCard/ToolCard.test.js similarity index 81% rename from plugins/explore/src/components/ExploreCard.test.js rename to plugins/explore/src/components/ToolCard/ToolCard.test.js index 45652015a5..83e1e7f186 100644 --- a/plugins/explore/src/components/ExploreCard.test.js +++ b/plugins/explore/src/components/ToolCard/ToolCard.test.js @@ -14,11 +14,10 @@ * limitations under the License. */ -import React from 'react'; -import { render } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; - -import ExploreCard from './ExploreCard'; +import { render } from '@testing-library/react'; +import React from 'react'; +import { ToolCard } from './ToolCard'; const minProps = { card: { @@ -30,20 +29,20 @@ const minProps = { }, }; -describe('', () => { +describe('', () => { it('renders without exploding', () => { - const { getByText } = render(wrapInTestApp()); + const { getByText } = render(wrapInTestApp()); expect(getByText('Explore')).toBeInTheDocument(); }); it('renders props correctly', () => { - const { getByText } = render(wrapInTestApp()); + const { getByText } = render(wrapInTestApp()); expect(getByText(minProps.card.title)).toBeInTheDocument(); expect(getByText(minProps.card.description)).toBeInTheDocument(); }); it('should link out', () => { - const rendered = render(wrapInTestApp()); + const rendered = render(wrapInTestApp()); const anchor = rendered.container.querySelector('a'); expect(anchor.href).toBe(minProps.card.url); }); @@ -59,7 +58,7 @@ describe('', () => { }, }; const { getByText } = render( - wrapInTestApp(), + wrapInTestApp(), ); expect(getByText('Description missing')).toBeInTheDocument(); }); @@ -74,13 +73,13 @@ describe('', () => { }, }; const { queryByText } = render( - wrapInTestApp(), + wrapInTestApp(), ); expect(queryByText('GA')).not.toBeInTheDocument(); }); it('renders tags correctly', () => { - const { getByText } = render(wrapInTestApp()); + const { getByText } = render(wrapInTestApp()); expect(getByText(minProps.card.tags[0])).toBeInTheDocument(); expect(getByText(minProps.card.tags[1])).toBeInTheDocument(); }); diff --git a/plugins/explore/src/components/ExploreCard.tsx b/plugins/explore/src/components/ToolCard/ToolCard.tsx similarity index 92% rename from plugins/explore/src/components/ExploreCard.tsx rename to plugins/explore/src/components/ToolCard/ToolCard.tsx index 8d1348c116..5d6ccfc276 100644 --- a/plugins/explore/src/components/ExploreCard.tsx +++ b/plugins/explore/src/components/ToolCard/ToolCard.tsx @@ -14,8 +14,7 @@ * limitations under the License. */ -import React from 'react'; -import classNames from 'classnames'; +import { BackstageTheme } from '@backstage/theme'; import { Button, Card, @@ -23,10 +22,14 @@ import { CardContent, CardMedia, Chip, - Typography, makeStyles, + Typography, } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; +import classNames from 'classnames'; +import React from 'react'; +import { CardData } from './types'; + +// TODO: Align styling between Domain and ToolCard const useStyles = makeStyles(theme => ({ card: { @@ -65,22 +68,12 @@ const useStyles = makeStyles(theme => ({ }, })); -export type CardData = { - title: string; - description: string; - url: string; - image: string; - tags?: string[]; - lifecycle?: string; - newsTag?: string; -}; - type Props = { card: CardData; objectFit?: 'cover' | 'contain'; }; -const ExploreCard = ({ card, objectFit }: Props) => { +export const ToolCard = ({ card, objectFit }: Props) => { const classes = useStyles(); const { title, description, url, image, lifecycle, newsTag, tags } = card; @@ -130,5 +123,3 @@ const ExploreCard = ({ card, objectFit }: Props) => { ); }; - -export default ExploreCard; diff --git a/plugins/explore/src/components/ToolCard/ToolCardGrid.tsx b/plugins/explore/src/components/ToolCard/ToolCardGrid.tsx new file mode 100644 index 0000000000..356bf4a5c5 --- /dev/null +++ b/plugins/explore/src/components/ToolCard/ToolCardGrid.tsx @@ -0,0 +1,46 @@ +/* + * 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 { BackstageTheme } from '@backstage/theme'; +import { makeStyles } from '@material-ui/core'; +import React from 'react'; +import { ToolCard } from './ToolCard'; +import { CardData } from './types'; + +const useStyles = makeStyles(theme => ({ + container: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, 296px)', + gridGap: theme.spacing(3), + marginBottom: theme.spacing(6), + }, +})); + +type ToolCardGridProps = { + tools: CardData[]; +}; + +export const ToolCardGrid = ({ tools }: ToolCardGridProps) => { + const classes = useStyles(); + + return ( +
+ {tools.map((card: CardData, ix: any) => ( + + ))} +
+ ); +}; diff --git a/plugins/explore/src/components/DomainExplorerPage/DomainExplorerPage.tsx b/plugins/explore/src/components/ToolCard/index.ts similarity index 50% rename from plugins/explore/src/components/DomainExplorerPage/DomainExplorerPage.tsx rename to plugins/explore/src/components/ToolCard/index.ts index 3228963e41..6ce62fddaa 100644 --- a/plugins/explore/src/components/DomainExplorerPage/DomainExplorerPage.tsx +++ b/plugins/explore/src/components/ToolCard/index.ts @@ -13,22 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { configApiRef, Header, Page, useApi } from '@backstage/core'; -import React from 'react'; -import { DomainExplorerContent } from './DomainExplorerContent'; - -export const DomainExplorerPage = () => { - const configApi = useApi(configApiRef); - const organizationName = - configApi.getOptionalString('organization.name') ?? 'Backstage'; - - return ( - -
- - - ); -}; +export { ToolCard } from './ToolCard'; +export { ToolCardGrid } from './ToolCardGrid'; +export type { CardData } from './types'; diff --git a/plugins/explore/src/components/ToolCard/types.ts b/plugins/explore/src/components/ToolCard/types.ts new file mode 100644 index 0000000000..183dbf3963 --- /dev/null +++ b/plugins/explore/src/components/ToolCard/types.ts @@ -0,0 +1,25 @@ +/* + * 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. + */ + +export type CardData = { + title: string; + description: string; + url: string; + image: string; + tags?: string[]; + lifecycle?: string; + newsTag?: string; +}; diff --git a/plugins/explore/src/components/ExplorePluginPage.tsx b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx similarity index 76% rename from plugins/explore/src/components/ExplorePluginPage.tsx rename to plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx index f3e75e0011..c6e1986ea2 100644 --- a/plugins/explore/src/components/ExplorePluginPage.tsx +++ b/plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2020 Spotify AB + * 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. @@ -13,27 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { Content, ContentHeader, SupportButton } from '@backstage/core'; import React from 'react'; -import { makeStyles, Typography } from '@material-ui/core'; -import { - Content, - ContentHeader, - Header, - Page, - SupportButton, -} from '@backstage/core'; -import ExploreCard, { CardData } from './ExploreCard'; -import { BackstageTheme } from '@backstage/theme'; +import { ToolCardGrid } from '../ToolCard'; -const useStyles = makeStyles(theme => ({ - container: { - display: 'grid', - gridTemplateColumns: 'repeat(auto-fill, 296px)', - gridGap: theme.spacing(3), - marginBottom: theme.spacing(6), - }, -})); +// TODO: Provide API to configure the toolsCards const toolsCards = [ { @@ -113,27 +97,13 @@ const toolsCards = [ }, ]; -export const ExplorePluginPage = () => { - const classes = useStyles(); - +export const ToolExplorerContent = () => { return ( - -
- - - - Explore tools available in Backstage - - -
- {toolsCards.map((card: CardData, ix: any) => ( - - ))} -
- - + + + Discover the tools in your ecosystem. + + + ); }; diff --git a/plugins/explore/src/components/DomainExplorer/index.ts b/plugins/explore/src/components/ToolExplorerContent/index.ts similarity index 90% rename from plugins/explore/src/components/DomainExplorer/index.ts rename to plugins/explore/src/components/ToolExplorerContent/index.ts index 48bb10220e..8fb3072d46 100644 --- a/plugins/explore/src/components/DomainExplorer/index.ts +++ b/plugins/explore/src/components/ToolExplorerContent/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { DomainExplorer } from './DomainExplorer'; +export { ToolExplorerContent } from './ToolExplorerContent'; diff --git a/plugins/explore/src/plugin.test.ts b/plugins/explore/src/plugin.test.ts index d6503c038b..652a0590dc 100644 --- a/plugins/explore/src/plugin.test.ts +++ b/plugins/explore/src/plugin.test.ts @@ -14,10 +14,10 @@ * limitations under the License. */ -import { plugin } from './plugin'; +import { explorePlugin } from './plugin'; describe('explore', () => { it('should export plugin', () => { - expect(plugin).toBeDefined(); + expect(explorePlugin).toBeDefined(); }); }); diff --git a/plugins/explore/src/routes.ts b/plugins/explore/src/routes.ts index 1134c61c16..c41a53128f 100644 --- a/plugins/explore/src/routes.ts +++ b/plugins/explore/src/routes.ts @@ -20,6 +20,5 @@ const NoIcon = () => null; export const exploreRouteRef = createRouteRef({ icon: NoIcon, - path: '', title: 'Explore', });