diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx index 1936c63c98..9fbbf28dca 100644 --- a/frontend/packages/app/src/App.tsx +++ b/frontend/packages/app/src/App.tsx @@ -1,18 +1,10 @@ -import { - BackstageTheme, - createApp, - Header, - InfoCard, - Page, - theme, -} from '@backstage/core'; +import { BackstageTheme, createApp, InfoCard } from '@backstage/core'; import HomePagePlugin from '@backstage/plugin-home-page'; //import PageHeader from './components/PageHeader'; import { LoginComponent } from '@backstage/plugin-login'; import { CssBaseline, makeStyles, ThemeProvider } from '@material-ui/core'; import React, { FC } from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; -import HomePageTimer from './components/HomepageTimer'; import SideBar from './components/SideBar'; import entities from './entities'; import { LoginBarrier } from './login/LoginBarrier'; @@ -37,20 +29,10 @@ const useStyles = makeStyles(theme => ({ display: 'grid', // FIXME: Don't used a fixed width here gridTemplateColumns: '64px auto', - gridTemplateRows: 'auto 1fr', + gridTemplateRows: '1fr', width: '100%', height: '100vh', }, - mainContentArea: { - overflowX: 'hidden', - overflowY: 'auto', - }, - pageBody: { - padding: theme.spacing(2), - }, - avatarButton: { - padding: theme.spacing(2), - }, })); const currentUser = new MockCurrentUser(); @@ -69,14 +51,7 @@ const AppShell: FC<{}> = ({ children }) => { return (
- -
-
- -
-
{children}
-
- + {children}
); }; diff --git a/frontend/packages/app/src/components/SideBar/SideBar.tsx b/frontend/packages/app/src/components/SideBar/SideBar.tsx index 395ae45410..2db9363f1d 100644 --- a/frontend/packages/app/src/components/SideBar/SideBar.tsx +++ b/frontend/packages/app/src/components/SideBar/SideBar.tsx @@ -158,7 +158,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', flexFlow: 'column nowrap', alignItems: 'flex-start', - position: 'absolute', + position: 'fixed', left: 0, top: 0, bottom: 0, diff --git a/frontend/packages/app/src/entities/index.ts b/frontend/packages/app/src/entities/index.ts index 38e529d87f..01f4105902 100644 --- a/frontend/packages/app/src/entities/index.ts +++ b/frontend/packages/app/src/entities/index.ts @@ -4,6 +4,8 @@ import { createEntityPage, } from '@backstage/core'; import ComputerIcon from '@material-ui/icons/Computer'; +import WebIcon from '@material-ui/icons/Web'; +import DnsIcon from '@material-ui/icons/Dns'; import MockEntityPage from './MockEntityPage'; import MockEntityCard from './MockEntityCard'; import GithubActionsPlugin from '@backstage/plugin-github-actions'; @@ -14,9 +16,9 @@ const serviceOverviewPage = createWidgetView() .addComponent(MockEntityCard); const serviceView = createEntityPage() - .addPage('Overview', '/overview', serviceOverviewPage) + .addPage('Overview', WebIcon, '/overview', serviceOverviewPage) .register(GithubActionsPlugin) - .addComponent('Deployment', '/deployment', MockEntityPage); + .addComponent('Deployment', DnsIcon, '/deployment', MockEntityPage); const serviceEntity = createEntityKind({ kind: 'service', diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json index d22516afe1..d7265591eb 100644 --- a/frontend/packages/core/package.json +++ b/frontend/packages/core/package.json @@ -4,6 +4,8 @@ "main": "src/index.ts", "main:src": "src/index.ts", "devDependencies": { + "@material-ui/core": "^4.9.1", + "@material-ui/icons": "^4.9.1", "@spotify/web-scripts": "^6.0.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", diff --git a/frontend/packages/core/src/api/entity/EntityKind.ts b/frontend/packages/core/src/api/entity/EntityKind.ts index 7f6447f4a6..b10a16c991 100644 --- a/frontend/packages/core/src/api/entity/EntityKind.ts +++ b/frontend/packages/core/src/api/entity/EntityKind.ts @@ -1,10 +1,11 @@ import { ComponentType } from 'react'; import { AppComponentBuilder } from '../app/types'; +import { IconComponent } from '../types'; export type EntityConfig = { kind: string; title: string; - icon: React.ComponentType<{ fontSize: number }>; + icon: IconComponent; color: { primary: string; secondary: string; diff --git a/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx b/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx index 8dbf6ba2a0..fdbdef01fb 100644 --- a/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx +++ b/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx @@ -1,83 +1,21 @@ -import React, { ComponentType, FC } from 'react'; -import { Route, Redirect, Switch } from 'react-router-dom'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import { AppComponentBuilder, App } from '../app/types'; -import { useEntity, useEntityUri, useEntityConfig } from './EntityContext'; -import EntityLink from '../../components/EntityLink/EntityLink'; +import React, { ComponentType } from 'react'; +import DefaultEntityPage from '../../components/DefaultEntityPage'; +import { App, AppComponentBuilder } from '../app/types'; import BackstagePlugin from '../plugin/Plugin'; +import { EntityPageNavItem, EntityPageView } from './types'; +import { IconComponent } from '../types'; -const EntityLayout: FC<{}> = ({ children }) => { - const config = useEntityConfig(); - return ( -
{children}
- ); -}; - -const EntitySidebar: FC<{}> = ({ children }) => { - return {children}; -}; - -const EntitySidebarItem: FC<{ title: string; path: string }> = ({ - title, - path, -}) => { - const entityUri = useEntityUri(); - - return ( - - - {title} - - - ); -}; - -type EntityPageNavItem = { - title: string; - target: string; -}; - -type EntityPageView = { - path: string; - component: ComponentType; -}; - -type Props = { - navItems: EntityPageNavItem[]; - views: EntityPageView[]; -}; - -const EntityPageComponent: FC = ({ navItems, views }) => { - const { kind, id } = useEntity(); - const basePath = `/entity/${kind}/${id}`; - - return ( - - - {navItems.map(({ title, target }) => ( - - ))} - - - {views.map(({ path, component }) => ( - - ))} - - - - ); -}; +// type AppComponents = { +// EntityPage: ComponentType; +// EntityPageNavbar: ComponentType; +// EntityPageHeader: ComponentType; +// }; type EntityPageRegistration = | { type: 'page'; title: string; + icon: IconComponent; path: string; page: AppComponentBuilder; } @@ -88,6 +26,7 @@ type EntityPageRegistration = | { type: 'component'; title: string; + icon: IconComponent; path: string; component: ComponentType; }; @@ -97,19 +36,27 @@ export default class EntityPageBuilder extends AppComponentBuilder { addPage( title: string, + icon: IconComponent, path: string, page: AppComponentBuilder, ): EntityPageBuilder { - this.registrations.push({ type: 'page', title, path, page }); + this.registrations.push({ type: 'page', title, icon, path, page }); return this; } addComponent( title: string, + icon: IconComponent, path: string, component: ComponentType, ): EntityPageBuilder { - this.registrations.push({ type: 'component', title, path, component }); + this.registrations.push({ + type: 'component', + title, + icon, + path, + component, + }); return this; } @@ -125,14 +72,14 @@ export default class EntityPageBuilder extends AppComponentBuilder { for (const reg of this.registrations) { switch (reg.type) { case 'page': { - const { title, path, page } = reg; - navItems.push({ title, target: path }); + const { title, icon, path, page } = reg; + navItems.push({ title, icon, target: path }); views.push({ path, component: page.build(app) }); break; } case 'component': { - const { title, path, component } = reg; - navItems.push({ title, target: path }); + const { title, icon, path, component } = reg; + navItems.push({ title, icon, target: path }); views.push({ path, component }); break; } @@ -141,8 +88,8 @@ export default class EntityPageBuilder extends AppComponentBuilder { for (const output of reg.plugin.output()) { switch (output.type) { case 'entity-page-nav-item': - const { title, target } = output; - navItems.push({ title, target }); + const { title, icon, target } = output; + navItems.push({ title, icon, target }); added = true; break; case 'entity-page-view-route': @@ -162,6 +109,6 @@ export default class EntityPageBuilder extends AppComponentBuilder { } } - return () => ; + return () => ; } } diff --git a/frontend/packages/core/src/api/entityView/types.ts b/frontend/packages/core/src/api/entityView/types.ts new file mode 100644 index 0000000000..8708057b8a --- /dev/null +++ b/frontend/packages/core/src/api/entityView/types.ts @@ -0,0 +1,24 @@ +import { ComponentType } from 'react'; +import { IconComponent } from '../types'; + +export type EntityPageNavItem = { + icon: IconComponent; + title: string; + target: string; +}; + +export type EntityPageView = { + path: string; + component: ComponentType; +}; + +export type EntityPageProps = { + navItems: EntityPageNavItem[]; + views: EntityPageView[]; +}; + +export type EntityPageNavbarProps = { + navItems: EntityPageNavItem[]; +}; + +export type EntityPageHeaderProps = {}; diff --git a/frontend/packages/core/src/api/plugin/Plugin.tsx b/frontend/packages/core/src/api/plugin/Plugin.tsx index e351801047..772776e288 100644 --- a/frontend/packages/core/src/api/plugin/Plugin.tsx +++ b/frontend/packages/core/src/api/plugin/Plugin.tsx @@ -1,5 +1,6 @@ import { ComponentType } from 'react'; import { PluginOutput, RoutePath, RouteOptions } from './types'; +import { IconComponent } from '../types'; export type PluginConfig = { id: string; @@ -27,6 +28,7 @@ export type RouterHooks = { type EntityPageSidebarItemOptions = { title: string; + icon: IconComponent; target: RoutePath; }; @@ -79,11 +81,12 @@ export default class Plugin { }, }, entityPage: { - navItem({ title, target }) { + navItem({ title, icon, target }) { outputs.push({ type: 'entity-page-nav-item', - target, title, + icon, + target, }); }, route(path, component, options) { diff --git a/frontend/packages/core/src/api/plugin/types.ts b/frontend/packages/core/src/api/plugin/types.ts index ddc6364ec5..f6efee230e 100644 --- a/frontend/packages/core/src/api/plugin/types.ts +++ b/frontend/packages/core/src/api/plugin/types.ts @@ -1,4 +1,5 @@ import { ComponentType } from 'react'; +import { IconComponent } from '../types'; export type RouteOptions = { // Whether the route path must match exactly, defaults to true. @@ -31,6 +32,7 @@ export type EntityPageViewRouteOutput = { export type EntityPageNavItemOutput = { type: 'entity-page-nav-item'; title: string; + icon: IconComponent; target: RoutePath; }; diff --git a/frontend/packages/core/src/api/types.ts b/frontend/packages/core/src/api/types.ts index 06f1570900..8462a5a1b9 100644 --- a/frontend/packages/core/src/api/types.ts +++ b/frontend/packages/core/src/api/types.ts @@ -1,10 +1,5 @@ -export type User = { - id: string; - email: string; -}; +import { ComponentType } from 'react'; -export type UserApi = { - isLoggedIn(): Promise; - - getUser(): Promise; -}; +export type IconComponent = ComponentType<{ + fontSize: 'inherit' | 'default' | 'small' | 'large'; +}>; diff --git a/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx b/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx new file mode 100644 index 0000000000..5edbea7bf0 --- /dev/null +++ b/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx @@ -0,0 +1,62 @@ +import React, { FC } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; +import { EntityPageProps } from '../../api/entityView/types'; +import { useEntity } from '../../api'; +import { Switch, Route, Redirect } from 'react-router-dom'; +import DefaultEntityPageHeader from '../DefaultEntityPageHeader'; +import DefaultEntityPageNavbar from '../DefaultEntityPageNavbar'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'grid', + gridTemplateAreas: ` + 'header header' + 'navbar content' + `, + gridTemplateRows: 'auto 1fr', + gridTemplateColumns: 'auto 1fr', + minHeight: '100%', + paddingBottom: theme.spacing(3), + }, + header: { + gridArea: 'header', + }, + navbar: { + gridArea: 'navbar', + }, + content: { + gridArea: 'content', + }, +})); + +const DefaultEntityPage: FC = ({ navItems, views }) => { + const classes = useStyles(); + const { kind, id } = useEntity(); + const basePath = `/entity/${kind}/${id}`; + + return ( +
+
+ +
+
+ +
+
+ + {views.map(({ path, component }) => ( + + ))} + + +
+
+ ); +}; + +export default DefaultEntityPage; diff --git a/frontend/packages/core/src/components/DefaultEntityPage/index.ts b/frontend/packages/core/src/components/DefaultEntityPage/index.ts new file mode 100644 index 0000000000..4f683076c4 --- /dev/null +++ b/frontend/packages/core/src/components/DefaultEntityPage/index.ts @@ -0,0 +1 @@ +export { default } from './DefaultEntityPage'; diff --git a/frontend/packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx b/frontend/packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx new file mode 100644 index 0000000000..b9e2768141 --- /dev/null +++ b/frontend/packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx @@ -0,0 +1,18 @@ +import React, { FC } from 'react'; +import { Header, useEntity, useEntityConfig, theme } from '../..'; +import { EntityPageHeaderProps } from '../../api/entityView/types'; +import { Theme } from '../../layout/Page/Page'; + +const DefaultEntityPageHeader: FC = () => { + const { id } = useEntity(); + const config = useEntityConfig(); + + // TODO(rugvip): provide theme through entity config + return ( + +
+ + ); +}; + +export default DefaultEntityPageHeader; diff --git a/frontend/packages/core/src/components/DefaultEntityPageHeader/index.ts b/frontend/packages/core/src/components/DefaultEntityPageHeader/index.ts new file mode 100644 index 0000000000..5c9304bad7 --- /dev/null +++ b/frontend/packages/core/src/components/DefaultEntityPageHeader/index.ts @@ -0,0 +1 @@ +export { default } from './DefaultEntityPageHeader'; diff --git a/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx b/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx new file mode 100644 index 0000000000..69aed8bd9f --- /dev/null +++ b/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx @@ -0,0 +1,36 @@ +import React, { FC } from 'react'; +import { EntityPageNavbarProps } from '../../api/entityView/types'; +import { useEntityUri } from '../..'; +import { List, makeStyles, Theme } from '@material-ui/core'; +import NavbarItem from './NavbarItem'; + +const useStyles = makeStyles({ + nav: { + gridArea: 'pageNav', + width: 220, + transition: 'width 0.07s, height 0s', + transitionTimingFunction: 'ease-in', + backgroundColor: '#eeeeee', + boxShadow: '0px 0 4px 0px rgba(0,0,0,0.35)', + }, + list: { + padding: 0, + }, +}); + +const DefaultEntityPageNavbar: FC = ({ navItems }) => { + const classes = useStyles(); + const entityUri = useEntityUri(); + + return ( + + ); +}; + +export default DefaultEntityPageNavbar; diff --git a/frontend/packages/core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx b/frontend/packages/core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx new file mode 100644 index 0000000000..d75ee16f4c --- /dev/null +++ b/frontend/packages/core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx @@ -0,0 +1,72 @@ +import React, { FC } from 'react'; +import { EntityLink } from '../..'; +import { + ListItem, + makeStyles, + Theme, + ListItemIcon, + ListItemText, + Typography, +} from '@material-ui/core'; +import { EntityPageNavItem } from '../../api/entityView/types'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'block', + overflow: 'hidden', + borderBottom: `1px solid #d9d9d9`, + paddingLeft: theme.spacing(1), + }, + label: { + color: '#333', + fontWeight: 'bolder', + whiteSpace: 'nowrap', + lineHeight: 1.0, + }, + iconImg: { + width: 24, + height: 24, + }, + icon: { + margin: theme.spacing(0.5, 2, 0.5, 0), + minWidth: 0, + fontSize: 24, + }, + expand: { + color: 'white', + }, +})); + +type Props = { + navItem: EntityPageNavItem; + entityUri: string; +}; + +const NavbarItem: FC = ({ navItem, entityUri }) => { + const classes = useStyles(); + const IconComponent = navItem.icon; + + return ( + + + + + + + {navItem.title} + + } + disableTypography + /> + + + ); +}; + +export default NavbarItem; diff --git a/frontend/packages/core/src/components/DefaultEntityPageNavbar/index.ts b/frontend/packages/core/src/components/DefaultEntityPageNavbar/index.ts new file mode 100644 index 0000000000..14a807a40f --- /dev/null +++ b/frontend/packages/core/src/components/DefaultEntityPageNavbar/index.ts @@ -0,0 +1 @@ +export { default } from './DefaultEntityPageNavbar'; diff --git a/frontend/packages/core/src/components/EntityLink/EntityLink.tsx b/frontend/packages/core/src/components/EntityLink/EntityLink.tsx index 04b070e397..57993f8abf 100644 --- a/frontend/packages/core/src/components/EntityLink/EntityLink.tsx +++ b/frontend/packages/core/src/components/EntityLink/EntityLink.tsx @@ -1,17 +1,17 @@ import React, { FC } from 'react'; -import { Link } from 'react-router-dom'; +import { Link, LinkProps } from 'react-router-dom'; -type Props = { +type Props = Omit & { subPath?: string; } & ( - | { - kind: string; - id?: string; - } - | { - uri: string; - } -); + | { + kind: string; + id?: string; + } + | { + uri: string; + } + ); export function buildPath(kind: string, id?: string, subPath?: string) { if (id) { @@ -26,7 +26,11 @@ export function buildPath(kind: string, id?: string, subPath?: string) { const EntityLink: FC = ({ subPath, children, ...props }) => { if ('kind' in props) { const { kind, id } = props; - return {children}; + return ( + + {children} + + ); } else { const match = props.uri.match(/entity:([^:]+)(:[^:]+)?/); if (!match) { @@ -36,7 +40,11 @@ const EntityLink: FC = ({ subPath, children, ...props }) => { const [, kind, maybeId] = match; const id = maybeId ? maybeId.slice(1) : undefined; - return {children}; + return ( + + {children} + + ); } }; diff --git a/frontend/packages/core/src/index.ts b/frontend/packages/core/src/index.ts index ccca30231a..ae3bc452d9 100644 --- a/frontend/packages/core/src/index.ts +++ b/frontend/packages/core/src/index.ts @@ -3,10 +3,10 @@ export { default as EntityLink, RelativeEntityLink, } from './components/EntityLink'; -export { default as Page } from '../src/layout/Page'; -export { gradients, theme } from '../src/layout/Page'; -export { default as Header } from '../src/layout/Header/Header'; -export { default as HeaderLabel } from '../src/layout/HeaderLabel'; -export { default as InfoCard } from '../src/layout/InfoCard'; -export { default as ErrorBoundary } from '../src/layout/ErrorBoundary'; -export { default as BackstageTheme } from '../src/theme/BackstageTheme'; +export { default as Page } from './layout/Page'; +export { gradients, theme } from './layout/Page'; +export { default as Header } from './layout/Header/Header'; +export { default as HeaderLabel } from './layout/HeaderLabel'; +export { default as InfoCard } from './layout/InfoCard'; +export { default as ErrorBoundary } from './layout/ErrorBoundary'; +export { default as BackstageTheme } from './theme/BackstageTheme'; diff --git a/frontend/packages/core/src/layout/Header/Header.js b/frontend/packages/core/src/layout/Header/Header.js index 5ddb7865e4..7f715e5996 100644 --- a/frontend/packages/core/src/layout/Header/Header.js +++ b/frontend/packages/core/src/layout/Header/Header.js @@ -103,7 +103,7 @@ const styles = theme => ({ gridArea: 'pageHeader', padding: theme.spacing(3), minHeight: 118, - width: '100vw', + width: '100%', boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', position: 'relative', zIndex: 100, diff --git a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx index eaafce74c6..9096cc8f2e 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx @@ -10,6 +10,8 @@ import { LinearProgress, Typography, Tooltip, + makeStyles, + Theme, } from '@material-ui/core'; import { RelativeEntityLink } from '@backstage/core'; import { BuildsClient } from '../../apis/builds'; @@ -28,23 +30,31 @@ const LongText: FC<{ text: string; max: number }> = ({ text, max }) => { ); }; +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(2), + }, + title: { + paddingBottom: theme.spacing(2), + }, +})); + const BuildListPage: FC<{}> = () => { + const classes = useStyles(); const status = useAsync(() => client.listBuilds('entity:spotify:backstage')); + let content: JSX.Element; + if (status.loading) { - return ; - } - if (status.error) { - return ( - + content = ; + } else if (status.error) { + content = ( + Failed to load builds, {status.error.message} ); - } - - return ( - <> - CI/CD Builds + } else { + content = ( @@ -86,7 +96,16 @@ const BuildListPage: FC<{}> = () => {
- + ); + } + + return ( +
+ + CI/CD Builds + + {content} +
); }; diff --git a/frontend/packages/plugins/github-actions/src/plugin.ts b/frontend/packages/plugins/github-actions/src/plugin.ts index 6972d8d128..d95d5b5bdc 100644 --- a/frontend/packages/plugins/github-actions/src/plugin.ts +++ b/frontend/packages/plugins/github-actions/src/plugin.ts @@ -1,6 +1,7 @@ import { createPlugin } from '@backstage/core'; import BuildDetailsPage from './components/BuildDetailsPage'; import BuildListPage from './components/BuildListPage'; +import BuildIcon from '@material-ui/icons/Build'; // export const buildListRoute = createEntityRoute<[]>('/builds') // export const buildDetailsRoute = createEntityRoute<[number]>('/builds/:buildId') @@ -9,7 +10,7 @@ export default createPlugin({ id: 'github-actions', register({ entityPage }) { - entityPage.navItem({ title: 'CI/CD', target: '/builds' }); + entityPage.navItem({ title: 'CI/CD', icon: BuildIcon, target: '/builds' }); entityPage.route('/builds', BuildListPage); entityPage.route('/builds/:buildUri', BuildDetailsPage); }, diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.test.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.test.tsx index 383bc9a5aa..fc495d3111 100644 --- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.test.tsx +++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.test.tsx @@ -1,10 +1,16 @@ import React from 'react'; import { render } from '@testing-library/react'; import HomePage from './HomePage'; +import { ThemeProvider } from '@material-ui/core'; +import { BackstageTheme } from '@backstage/core'; describe('HomePage', () => { it('should render', () => { - const rendered = render(); + const rendered = render( + + + , + ); expect(rendered.baseElement).toBeInTheDocument(); }); }); diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx index d84256ac42..f5d388f420 100644 --- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx +++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx @@ -1,20 +1,45 @@ -import { EntityLink, InfoCard } from '@backstage/core'; -import { Typography } from '@material-ui/core'; +import { EntityLink, InfoCard, Header, Page, theme } from '@backstage/core'; +import { Typography, makeStyles, Theme } from '@material-ui/core'; import React, { FC } from 'react'; +import HomePageTimer from '../HomepageTimer'; + +const useStyles = makeStyles(theme => ({ + mainContentArea: { + overflowX: 'hidden', + overflowY: 'auto', + }, + pageBody: { + padding: theme.spacing(2), + }, + avatarButton: { + padding: theme.spacing(2), + }, +})); const HomePage: FC<{}> = () => { + const classes = useStyles(); + return ( - - Welcome to Backstage! -
- - Backstage Backend - - - Backstage LB CI/CD - + +
+
+ +
+
+ + Welcome to Backstage! +
+ + Backstage Backend + + + Backstage LB CI/CD + +
+ +
- + ); }; diff --git a/frontend/packages/app/src/components/HomepageTimer/HomepageTimer.tsx b/frontend/packages/plugins/home-page/src/components/HomepageTimer/HomepageTimer.tsx similarity index 100% rename from frontend/packages/app/src/components/HomepageTimer/HomepageTimer.tsx rename to frontend/packages/plugins/home-page/src/components/HomepageTimer/HomepageTimer.tsx diff --git a/frontend/packages/app/src/components/HomepageTimer/index.ts b/frontend/packages/plugins/home-page/src/components/HomepageTimer/index.ts similarity index 100% rename from frontend/packages/app/src/components/HomepageTimer/index.ts rename to frontend/packages/plugins/home-page/src/components/HomepageTimer/index.ts