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',
});